🏗️ 💥 Change the whole folder structure.

Now using src as a subfolder to the source files

src/components/AppShelf/AddAppShelfItem.tsx

@@ -0,0 +1,210 @@
+import {
+  Modal,
+  Center,
+  Group,
+  TextInput,
+  Image,
+  Button,
+  Select,
+  AspectRatio,
+  Text,
+  Card,
+  LoadingOverlay,
+} from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { Apps } from 'tabler-icons-react';
+import { useConfig } from '../../tools/state';
+import { ServiceTypeList } from '../../tools/types';
+import { AppShelfItemWrapper } from './AppShelfItemWrapper';
+
+export default function AddItemShelfItem(props: any) {
+  const [opened, setOpened] = useState(false);
+  return (
+    <>
+      <Modal
+        size="xl"
+        radius="lg"
+        opened={props.opened || opened}
+        onClose={() => setOpened(false)}
+        title="Add a service"
+      >
+        <AddAppShelfItemForm setOpened={setOpened} />
+      </Modal>
+      <AppShelfItemWrapper>
+        <Card.Section>
+          <Group position="center" mx="lg">
+            <Text
+              // TODO: #1 Remove this hack to get the text to be centered.
+              ml={15}
+              style={{
+                alignSelf: 'center',
+                alignContent: 'center',
+                alignItems: 'center',
+                justifyContent: 'center',
+                justifyItems: 'center',
+              }}
+              mt="sm"
+              weight={500}
+            >
+              Add a service
+            </Text>
+          </Group>
+        </Card.Section>
+        <Card.Section>
+          <AspectRatio ratio={5 / 3} m="xl">
+            <motion.i
+              whileHover={{
+                cursor: 'pointer',
+                scale: 1.1,
+              }}
+            >
+              <Apps style={{ cursor: 'pointer' }} onClick={() => setOpened(true)} size={60} />
+            </motion.i>
+          </AspectRatio>
+        </Card.Section>
+      </AppShelfItemWrapper>
+    </>
+  );
+}
+
+function MatchIcon(name: string, form: any) {
+  fetch(
+    `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
+      .replace(/\s+/g, '-')
+      .toLowerCase()}.png`
+  )
+    .then((res) => {
+      if (res.status === 200) {
+        form.setFieldValue('icon', res.url);
+      }
+    })
+    .catch(() => {
+      // Do nothing
+    });
+
+  return false;
+}
+
+export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
+  const { setOpened } = props;
+  const { config, setConfig } = useConfig();
+  const [isLoading, setLoading] = useState(false);
+
+  const form = useForm({
+    initialValues: {
+      type: props.type ?? 'Other',
+      name: props.name ?? '',
+      icon: props.icon ?? '',
+      url: props.url ?? '',
+      apiKey: props.apiKey ?? (undefined as unknown as string),
+    },
+    validate: {
+      apiKey: () => null,
+      // Validate icon with a regex
+      icon: (value: string) => {
+        if (!value.match(/^https?:\/\/.+\.(png|jpg|jpeg|gif)$/)) {
+          return 'Please enter a valid icon URL';
+        }
+        return null;
+      },
+      // Validate url with a regex http/https
+      url: (value: string) => {
+        if (!value.match(/^https?:\/\/.+\/$/)) {
+          return 'Please enter a valid URL (that ends with a /)';
+        }
+        return null;
+      },
+    },
+  });
+
+  return (
+    <>
+      <Center>
+        <Image height={120} width={120} src={form.values.icon} alt="Placeholder" withPlaceholder />
+      </Center>
+      <form
+        onSubmit={form.onSubmit(() => {
+          // If service already exists, update it.
+          if (config.services && config.services.find((s) => s.name === form.values.name)) {
+            setConfig({
+              ...config,
+              services: config.services.map((s) => {
+                if (s.name === form.values.name) {
+                  return {
+                    ...form.values,
+                  };
+                }
+                return s;
+              }),
+            });
+          } else {
+            setConfig({
+              ...config,
+              services: [...config.services, form.values],
+            });
+          }
+          setOpened(false);
+          form.reset();
+        })}
+      >
+        <Group direction="column" grow>
+          <TextInput
+            required
+            label="Service name"
+            placeholder="Plex"
+            value={form.values.name}
+            onChange={(event) => {
+              form.setFieldValue('name', event.currentTarget.value);
+              const match = MatchIcon(event.currentTarget.value, form);
+              if (match) {
+                form.setFieldValue('icon', match);
+              }
+            }}
+            error={form.errors.name && 'Invalid icon url'}
+          />
+
+          <TextInput
+            required
+            label="Icon url"
+            placeholder="https://i.gifer.com/ANPC.gif"
+            {...form.getInputProps('icon')}
+          />
+          <TextInput
+            required
+            label="Service url"
+            placeholder="http://localhost:8989"
+            {...form.getInputProps('url')}
+          />
+          <Select
+            label="Select the type of service (used for API calls)"
+            defaultValue="Other"
+            placeholder="Pick one"
+            required
+            searchable
+            data={ServiceTypeList}
+            {...form.getInputProps('type')}
+          />
+          <LoadingOverlay visible={isLoading} />
+          {(form.values.type === 'Sonarr' || form.values.type === 'Radarr') && (
+            <TextInput
+              required
+              label="API key"
+              placeholder="Your API key"
+              value={form.values.apiKey}
+              onChange={(event) => {
+                form.setFieldValue('apiKey', event.currentTarget.value);
+              }}
+              error={form.errors.apiKey && 'Invalid API key'}
+            />
+          )}
+        </Group>
+
+        <Group grow position="center" mt="xl">
+          <Button type="submit">{props.message ?? 'Add service'}</Button>
+        </Group>
+      </form>
+    </>
+  );
+}

src/components/AppShelf/AppShelf.story.tsx

@@ -0,0 +1,18 @@
+import AppShelf, { AppShelfItem } from './AppShelf';
+
+export default {
+  title: 'Item Shelf',
+  component: AppShelf,
+  args: {
+    service: {
+      name: 'qBittorrent',
+      url: 'http://',
+      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/qBittorrent/icon.png',
+      type: 'qBittorrent',
+      apiKey: '',
+    },
+  },
+};
+
+export const Default = (args: any) => <AppShelf {...args} />;
+export const One = (args: any) => <AppShelfItem {...args} />;

src/components/AppShelf/AppShelf.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Text, AspectRatio, SimpleGrid, Card, Image, Group, Space } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+import { serviceItem } from '../../tools/types';
+import AddItemShelfItem from './AddAppShelfItem';
+import { AppShelfItemWrapper } from './AppShelfItemWrapper';
+import AppShelfMenu from './AppShelfMenu';
+
+const AppShelf = () => {
+  const { config } = useConfig();
+
+  return (
+    <SimpleGrid m="xl" cols={5} spacing="xl">
+      {config.services.map((service) => (
+        <AppShelfItem key={service.name} service={service} />
+      ))}
+      <AddItemShelfItem />
+    </SimpleGrid>
+  );
+};
+
+export function AppShelfItem(props: any) {
+  const { service }: { service: serviceItem } = props;
+  const [hovering, setHovering] = useState(false);
+  return (
+    <motion.div
+      key={service.name}
+      onHoverStart={() => {
+        setHovering(true);
+      }}
+      onHoverEnd={() => {
+        setHovering(false);
+      }}
+    >
+      <AppShelfItemWrapper hovering={hovering}>
+        <Card.Section>
+          <Group position="apart" mx="lg">
+            <Space />
+            <Text
+              // TODO: #1 Remove this hack to get the text to be centered.
+              ml={15}
+              style={{
+                alignSelf: 'center',
+                alignContent: 'center',
+                alignItems: 'center',
+                justifyContent: 'center',
+                justifyItems: 'center',
+              }}
+              mt="sm"
+              weight={500}
+            >
+              {service.name}
+            </Text>
+            <motion.div
+              style={{
+                alignSelf: 'flex-end',
+              }}
+              animate={{
+                opacity: hovering ? 1 : 0,
+              }}
+            >
+              <AppShelfMenu service={service} />
+            </motion.div>
+          </Group>
+        </Card.Section>
+        <Card.Section>
+          <AspectRatio ratio={5 / 3} m="xl">
+            <motion.i
+              whileHover={{
+                cursor: 'pointer',
+                scale: 1.1,
+              }}
+            >
+              <Image
+                onClick={() => {
+                  window.open(service.url);
+                }}
+                style={{
+                  maxWidth: '50%',
+                  marginBottom: 10,
+                }}
+                src={service.icon}
+              />
+            </motion.i>
+          </AspectRatio>
+        </Card.Section>
+      </AppShelfItemWrapper>
+    </motion.div>
+  );
+}
+
+export default AppShelf;

src/components/AppShelf/AppShelfItemWrapper.tsx

@@ -0,0 +1,21 @@
+import { useMantineTheme, Card } from '@mantine/core';
+
+export function AppShelfItemWrapper(props: any) {
+  const { children, hovering } = props;
+  const theme = useMantineTheme();
+  return (
+    <Card
+      style={{
+        boxShadow: hovering ? '0px 0px 3px rgba(0, 0, 0, 0.5)' : '0px 0px 1px rgba(0, 0, 0, 0.5)',
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
+
+        //TODO: #3 Fix this temporary fix and make the width and height dynamic / responsive
+        width: 200,
+        height: 180,
+      }}
+      radius="md"
+    >
+      {children}
+    </Card>
+  );
+}

src/components/AppShelf/AppShelfMenu.tsx

@@ -0,0 +1,68 @@
+import { Menu, Modal, Text } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import { useState } from 'react';
+import { Check, Edit, Trash } from 'tabler-icons-react';
+import { useConfig } from '../../tools/state';
+import { AddAppShelfItemForm } from './AddAppShelfItem';
+
+export default function AppShelfMenu(props: any) {
+  const { service } = props;
+  const { config, setConfig } = useConfig();
+  const [opened, setOpened] = useState(false);
+  return (
+    <>
+      <Modal
+        size="xl"
+        radius="lg"
+        opened={props.opened || opened}
+        onClose={() => setOpened(false)}
+        title="Modify a service"
+      >
+        <AddAppShelfItemForm
+          setOpened={setOpened}
+          name={service.name}
+          type={service.type}
+          url={service.url}
+          icon={service.icon}
+          apiKey={service.apiKey}
+          message="Save service"
+        />
+      </Modal>
+      <Menu position="right">
+        <Menu.Label>Settings</Menu.Label>
+        <Menu.Item
+          color="primary"
+          icon={<Edit size={14} />}
+          // TODO: #2 Add the ability to edit the service.
+          onClick={() => setOpened(true)}
+        >
+          Edit
+        </Menu.Item>
+        <Menu.Label>Danger zone</Menu.Label>
+        <Menu.Item
+          color="red"
+          onClick={(e: any) => {
+            setConfig({
+              ...config,
+              services: config.services.filter((s) => s.name !== service.name),
+            });
+            showNotification({
+              autoClose: 5000,
+              title: (
+                <Text>
+                  Service <b>{service.name}</b> removed successfully
+                </Text>
+              ),
+              color: 'green',
+              icon: <Check />,
+              message: undefined,
+            });
+          }}
+          icon={<Trash size={14} />}
+        >
+          Delete
+        </Menu.Item>
+      </Menu>
+    </>
+  );
+}

src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { createStyles, Switch, Group, useMantineColorScheme } from '@mantine/core';
+import { Sun, MoonStars } from 'tabler-icons-react';
+
+const useStyles = createStyles((theme) => ({
+  root: {
+    position: 'relative',
+    '& *': {
+      cursor: 'pointer',
+    },
+  },
+
+  icon: {
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 1,
+    top: 3,
+  },
+
+  iconLight: {
+    left: 4,
+    color: theme.white,
+  },
+
+  iconDark: {
+    right: 4,
+    color: theme.colors.gray[6],
+  },
+}));
+
+export function ColorSchemeSwitch() {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  const { classes, cx } = useStyles();
+
+  return (
+    <Group>
+      <div className={classes.root}>
+        <Sun className={cx(classes.icon, classes.iconLight)} size={18} />
+        <MoonStars className={cx(classes.icon, classes.iconDark)} size={18} />
+        <Switch checked={colorScheme === 'dark'} onChange={() => toggleColorScheme()} size="md" />
+      </div>
+      Switch to {colorScheme === 'dark' ? 'light' : 'dark'} mode
+    </Group>
+  );
+}

src/components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -0,0 +1,28 @@
+import { Box, useMantineColorScheme } from '@mantine/core';
+import { Sun, MoonStars } from 'tabler-icons-react';
+import { motion } from 'framer-motion';
+
+export function ColorSchemeToggle() {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+
+  return (
+    <motion.div
+      whileHover={{ scale: 1.2, rotate: 90 }}
+      whileTap={{
+        scale: 0.8,
+        rotate: -90,
+        borderRadius: '100%',
+      }}
+    >
+      <Box
+        onClick={() => toggleColorScheme()}
+        sx={(theme) => ({
+          cursor: 'pointer',
+          color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6],
+        })}
+      >
+        {colorScheme === 'dark' ? <Sun size={24} /> : <MoonStars size={24} />}
+      </Box>
+    </motion.div>
+  );
+}

src/components/Config/ConfigChanger.tsx

@@ -0,0 +1,37 @@
+import { Center, Loader, Select, Tooltip } from '@mantine/core';
+import { setCookies } from 'cookies-next';
+import { useEffect, useState } from 'react';
+import { useConfig } from '../../tools/state';
+
+export default function ConfigChanger() {
+  const { config, loadConfig, setConfig, getConfigs } = useConfig();
+  const [configList, setConfigList] = useState([] as string[]);
+  useEffect(() => {
+    getConfigs().then((configs) => setConfigList(configs));
+    // setConfig(initialConfig);
+  }, [config]);
+  // If configlist is empty, return a loading indicator
+  if (configList.length === 0) {
+    return (
+      <Center>
+        <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
+          <Loader />
+        </Tooltip>
+      </Center>
+    );
+  }
+  return (
+    <Select
+      defaultValue={config.name}
+      label="Config loader"
+      onChange={(e) => {
+        loadConfig(e ?? 'default');
+        setCookies('config-name', e ?? 'default', { maxAge: 60 * 60 * 24 * 30 });
+      }}
+      data={
+        // If config list is empty, return the current config
+        configList.length === 0 ? [config.name] : configList
+      }
+    />
+  );
+}

src/components/Config/LoadConfig.tsx

@@ -0,0 +1,95 @@
+import { Group, Text, useMantineTheme, MantineTheme } from '@mantine/core';
+import { Upload, Photo, X, Icon as TablerIcon, Check } from 'tabler-icons-react';
+import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
+import { showNotification } from '@mantine/notifications';
+import { useRef } from 'react';
+import { useRouter } from 'next/router';
+import { setCookies } from 'cookies-next';
+import { useConfig } from '../../tools/state';
+import { Config } from '../../tools/types';
+
+function getIconColor(status: DropzoneStatus, theme: MantineTheme) {
+  return status.accepted
+    ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]
+    : status.rejected
+    ? theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]
+    : theme.colorScheme === 'dark'
+    ? theme.colors.dark[0]
+    : theme.colors.gray[7];
+}
+
+function ImageUploadIcon({
+  status,
+  ...props
+}: React.ComponentProps<TablerIcon> & { status: DropzoneStatus }) {
+  if (status.accepted) {
+    return <Upload {...props} />;
+  }
+
+  if (status.rejected) {
+    return <X {...props} />;
+  }
+
+  return <Photo {...props} />;
+}
+
+export const dropzoneChildren = (status: DropzoneStatus, theme: MantineTheme) => (
+  <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
+    <ImageUploadIcon status={status} style={{ color: getIconColor(status, theme) }} size={80} />
+
+    <div>
+      <Text size="xl" inline>
+        Drag images here or click to select files
+      </Text>
+      <Text size="sm" color="dimmed" inline mt={7}>
+        Attach as many files as you like, each file should not exceed 5mb
+      </Text>
+    </div>
+  </Group>
+);
+
+export default function LoadConfigComponent(props: any) {
+  const { setConfig } = useConfig();
+  const theme = useMantineTheme();
+  const router = useRouter();
+  const openRef = useRef<() => void>();
+
+  return (
+    <FullScreenDropzone
+      onDrop={(files) => {
+        files[0].text().then((e) => {
+          try {
+            JSON.parse(e) as Config;
+          } catch (e) {
+            showNotification({
+              autoClose: 5000,
+              title: <Text>Error</Text>,
+              color: 'red',
+              icon: <X />,
+              message: 'could not load your config. Invalid JSON format.',
+            });
+            return;
+          }
+          const newConfig: Config = JSON.parse(e);
+          showNotification({
+            autoClose: 5000,
+            radius: 'md',
+            title: (
+              <Text>
+                Config <b>{newConfig.name}</b> loaded successfully
+              </Text>
+            ),
+            color: 'green',
+            icon: <Check />,
+            message: undefined,
+          });
+          setCookies('config-name', newConfig.name, { maxAge: 60 * 60 * 24 * 30 });
+          setConfig(newConfig);
+        });
+      }}
+      accept={['application/json']}
+    >
+      {(status) => dropzoneChildren(status, theme)}
+    </FullScreenDropzone>
+  );
+}

src/components/Config/SaveConfig.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@mantine/core';
+import fileDownload from 'js-file-download';
+import { Download } from 'tabler-icons-react';
+import { useConfig } from '../../tools/state';
+
+export default function SaveConfigComponent(props: any) {
+  const { config } = useConfig();
+  function onClick(e: any) {
+    if (config) {
+      fileDownload(JSON.stringify(config, null, '\t'), `${config.name}.json`);
+    }
+  }
+  return (
+    <Button leftIcon={<Download />} variant="outline" onClick={onClick}>
+      Download your config
+    </Button>
+  );
+}

src/components/Config/SelectConfig.tsx

@@ -0,0 +1,16 @@
+import { Select } from '@mantine/core';
+import { useState } from 'react';
+
+export default function SelectConfig(props: any) {
+  const [value, setValue] = useState<string | null>('');
+  return (
+    <Select
+      value={value}
+      onChange={setValue}
+      data={[
+        { value: 'default', label: 'Default' },
+        { value: 'yourmom', label: 'Your mom' },
+      ]}
+    />
+  );
+}

src/components/SearchBar/SearchBar.story.tsx

@@ -0,0 +1,10 @@
+import SearchBar from './SearchBar';
+
+export default {
+  title: 'Search bar',
+  config: {
+    searchBar: false,
+  },
+};
+
+export const Default = (args: any) => <SearchBar {...args} />;

src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,90 @@
+import { TextInput, Text, Popover, Box } from '@mantine/core';
+import { useForm } from '@mantine/hooks';
+import { useState } from 'react';
+import { Search, BrandYoutube, Download } from 'tabler-icons-react';
+import { useConfig } from '../../tools/state';
+
+export default function SearchBar(props: any) {
+  const { config, setConfig } = useConfig();
+  const [opened, setOpened] = useState(false);
+  const [icon, setIcon] = useState(<Search />);
+  const querryUrl = config.settings.searchUrl || 'https://www.google.com/search?q=';
+
+  const form = useForm({
+    initialValues: {
+      querry: '',
+    },
+  });
+
+  if (config.settings.searchBar === false) {
+    return null;
+  }
+
+  return (
+    <Box
+      style={{
+        width: '100%',
+      }}
+    >
+      <form
+        onChange={() => {
+          // If querry contains !yt or !t add "Searching on YouTube" or "Searching torrent"
+          const querry = form.values.querry.trim();
+          const isYoutube = querry.startsWith('!yt');
+          const isTorrent = querry.startsWith('!t');
+          if (isYoutube) {
+            setIcon(<BrandYoutube size={22} />);
+          } else if (isTorrent) {
+            setIcon(<Download size={22} />);
+          } else {
+            setIcon(<Search size={22} />);
+          }
+        }}
+        onSubmit={form.onSubmit((values) => {
+          // Find if querry is prefixed by !yt or !t
+          const querry = values.querry.trim();
+          const isYoutube = querry.startsWith('!yt');
+          const isTorrent = querry.startsWith('!t');
+          if (isYoutube) {
+            window.open(`https://www.youtube.com/results?search_query=${querry.substring(3)}`);
+          } else if (isTorrent) {
+            window.open(`https://bitsearch.to/search?q=${querry.substring(3)}`);
+          } else {
+            window.open(`${querryUrl}${values.querry}`);
+          }
+        })}
+      >
+        <Popover
+          opened={opened}
+          style={{
+            width: '100%',
+          }}
+          position="bottom"
+          placement="start"
+          withArrow
+          trapFocus={false}
+          transition="pop-top-left"
+          onFocusCapture={() => setOpened(true)}
+          onBlurCapture={() => setOpened(false)}
+          target={
+            <TextInput
+              variant="filled"
+              color="blue"
+              icon={icon}
+              radius="md"
+              size="md"
+              placeholder="Search the web"
+              {...props}
+              {...form.getInputProps('querry')}
+            />
+          }
+        >
+          <Text>
+            tip: You can prefix your querry with <b>!yt</b> or <b>!t</b> to research on youtube or
+            for a torrent
+          </Text>
+        </Popover>
+      </form>
+    </Box>
+  );
+}

src/components/Settings/ModuleEnabler.tsx

@@ -0,0 +1,41 @@
+import { Group, Switch } from '@mantine/core';
+import * as Modules from '../modules';
+import { useConfig } from '../../tools/state';
+
+export default function ModuleEnabler(props: any) {
+  const { config, setConfig } = useConfig();
+  const modules = Object.values(Modules).map((module) => module);
+  const enabledModules = config.settings.enabledModules ?? [];
+  modules.filter((module) => enabledModules.includes(module.title));
+  return (
+    <Group direction="column">
+      {modules.map((module) => (
+        <Switch
+          key={module.title}
+          size="md"
+          checked={enabledModules.includes(module.title)}
+          label={`Enable ${module.title} module`}
+          onChange={(e) => {
+            if (e.currentTarget.checked) {
+              setConfig({
+                ...config,
+                settings: {
+                  ...config.settings,
+                  enabledModules: [...enabledModules, module.title],
+                },
+              });
+            } else {
+              setConfig({
+                ...config,
+                settings: {
+                  ...config.settings,
+                  enabledModules: enabledModules.filter((m) => m !== module.title),
+                },
+              });
+            }
+          }}
+        />
+      ))}
+    </Group>
+  );
+}

src/components/Settings/SettingsMenu.story.tsx

@@ -0,0 +1,10 @@
+import { SettingsMenuButton } from './SettingsMenu';
+
+export default {
+  title: ' menu',
+  args: {
+    opened: false,
+  },
+};
+
+export const Default = (args: any) => <SettingsMenuButton {...args} />;

src/components/Settings/SettingsMenu.tsx

@@ -0,0 +1,144 @@
+import {
+  ActionIcon,
+  Group,
+  Modal,
+  Switch,
+  Title,
+  Text,
+  Tooltip,
+  SegmentedControl,
+  Indicator,
+  Alert,
+} from '@mantine/core';
+import { useColorScheme } from '@mantine/hooks';
+import { useEffect, useState } from 'react';
+import { AlertCircle, Settings as SettingsIcon } from 'tabler-icons-react';
+import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
+import { useConfig } from '../../tools/state';
+import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
+import ConfigChanger from '../Config/ConfigChanger';
+import SaveConfigComponent from '../Config/SaveConfig';
+import ModuleEnabler from './ModuleEnabler';
+
+function SettingsMenu(props: any) {
+  const { config, setConfig } = useConfig();
+  const colorScheme = useColorScheme();
+  const { current, latest } = props;
+  const matches = [
+    { label: 'Google', value: 'https://google.com/search?q=' },
+    { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
+    { label: 'Bing', value: 'https://bing.com/search?q=' },
+  ];
+  return (
+    <Group direction="column" grow>
+      <Alert
+        icon={<AlertCircle size={16} />}
+        title="Update available"
+        radius="lg"
+        hidden={current === latest}
+      >
+        Version {latest} is available. Current : {current}
+      </Alert>
+      <Group>
+        <SegmentedControl
+          title="Search engine"
+          value={
+            // Match config.settings.searchUrl with a key in the matches array
+            matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Google'
+          }
+          onChange={
+            // Set config.settings.searchUrl to the value of the selected item
+            (e) =>
+              setConfig({
+                ...config,
+                settings: {
+                  ...config.settings,
+                  searchUrl: e,
+                },
+              })
+          }
+          data={matches}
+        />
+        <Text>Search engine</Text>
+      </Group>
+      <Group direction="column">
+        <Switch
+          size="md"
+          onChange={(e) =>
+            setConfig({
+              ...config,
+              settings: {
+                ...config.settings,
+                searchBar: e.currentTarget.checked,
+              },
+            })
+          }
+          checked={config.settings.searchBar}
+          label="Enable search bar"
+        />
+      </Group>
+      <ModuleEnabler />
+      <ColorSchemeSwitch />
+      <ConfigChanger />
+      <SaveConfigComponent />
+      <Text
+        style={{
+          alignSelf: 'center',
+          fontSize: '0.75rem',
+          textAlign: 'center',
+          color: '#a0aec0',
+        }}
+      >
+        tip: You can upload your config file by dragging and dropping it onto the page
+      </Text>
+    </Group>
+  );
+}
+
+export function SettingsMenuButton(props: any) {
+  const [update, setUpdate] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const [latestVersion, setLatestVersion] = useState(CURRENT_VERSION);
+  useEffect(() => {
+    // Fetch Data here when component first mounted
+    fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
+      res.json().then((data) => {
+        setLatestVersion(data.tag_name);
+        if (data.tag_name !== CURRENT_VERSION) {
+          setUpdate(true);
+        }
+      });
+    });
+  }, []);
+  return (
+    <>
+      <Modal
+        size="md"
+        title={<Title order={3}>Settings</Title>}
+        opened={props.opened || opened}
+        onClose={() => setOpened(false)}
+      >
+        <SettingsMenu current={CURRENT_VERSION} latest={latestVersion} />
+      </Modal>
+      <ActionIcon
+        variant="default"
+        radius="xl"
+        size="xl"
+        color="blue"
+        style={props.style}
+        onClick={() => setOpened(true)}
+      >
+        <Tooltip label="Settings">
+          <Indicator
+            size={12}
+            disabled={CURRENT_VERSION === latestVersion}
+            offset={-3}
+            position="top-end"
+          >
+            <SettingsIcon />
+          </Indicator>
+        </Tooltip>
+      </ActionIcon>
+    </>
+  );
+}

src/components/Welcome/Welcome.story.tsx

@@ -0,0 +1,7 @@
+import { Welcome } from './Welcome';
+
+export default {
+  title: 'Welcome',
+};
+
+export const Usage = () => <Welcome />;

src/components/Welcome/Welcome.styles.ts

@@ -0,0 +1,14 @@
+import { createStyles } from '@mantine/core';
+
+export default createStyles((theme) => ({
+  title: {
+    color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+    fontSize: 100,
+    fontWeight: 900,
+    letterSpacing: -2,
+
+    [theme.fn.smallerThan('md')]: {
+      fontSize: 50,
+    },
+  },
+}));

src/components/Welcome/Welcome.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react';
+import { Welcome } from './Welcome';
+
+describe('Welcome component', () => {
+  it('has correct Next.js theming section link', () => {
+    render(<Welcome />);
+    expect(screen.getByText('this guide')).toHaveAttribute(
+      'href',
+      'https://mantine.dev/theming/next/'
+    );
+  });
+});

src/components/Welcome/Welcome.tsx

@@ -0,0 +1,25 @@
+import { Title, Text, Anchor } from '@mantine/core';
+import useStyles from './Welcome.styles';
+
+export function Welcome() {
+  const { classes } = useStyles();
+
+  return (
+    <>
+      <Title className={classes.title} align="center" mt={100}>
+        Welcome to{' '}
+        <Text inherit variant="gradient" component="span">
+          Mantine
+        </Text>
+      </Title>
+      <Text color="dimmed" align="center" size="lg" sx={{ maxWidth: 580 }} mx="auto" mt="xl">
+        This starter Next.js project includes a minimal setup for server side rendering, if you want
+        to learn more on Mantine + Next.js integration follow{' '}
+        <Anchor href="https://mantine.dev/theming/next/" size="lg">
+          this guide
+        </Anchor>
+        . To get started edit index.tsx file.
+      </Text>
+    </>
+  );
+}

src/components/layout/Aside.tsx

@@ -0,0 +1,18 @@
+import { Aside as MantineAside } from '@mantine/core';
+import { CalendarModule } from '../modules/calendar/CalendarModule';
+import ModuleWrapper from '../modules/moduleWrapper';
+
+export default function Aside() {
+  return (
+    <MantineAside
+      height="100%"
+      hiddenBreakpoint="md"
+      hidden
+      width={{
+        base: 'auto',
+      }}
+    >
+      <ModuleWrapper module={CalendarModule} />
+    </MantineAside>
+  );
+}

src/components/layout/Footer.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { createStyles, Anchor, Text, Group, ActionIcon } from '@mantine/core';
+import { BrandGithub } from 'tabler-icons-react';
+
+const useStyles = createStyles((theme) => ({
+  footer: {
+    borderTop: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
+    }`,
+  },
+
+  inner: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: `${theme.spacing.md}px ${theme.spacing.md}px`,
+
+    [theme.fn.smallerThan('sm')]: {
+      flexDirection: 'column',
+    },
+  },
+
+  links: {
+    [theme.fn.smallerThan('sm')]: {
+      marginTop: theme.spacing.lg,
+      marginBottom: theme.spacing.sm,
+    },
+  },
+}));
+
+interface FooterCenteredProps {
+  links: { link: string; label: string }[];
+}
+
+export function Footer({ links }: FooterCenteredProps) {
+  const { classes } = useStyles();
+  const items = links.map((link) => (
+    <Anchor<'a'>
+      color="dimmed"
+      key={link.label}
+      href={link.link}
+      sx={{ lineHeight: 1 }}
+      onClick={(event) => event.preventDefault()}
+      size="sm"
+    >
+      {link.label}
+    </Anchor>
+  ));
+
+  return (
+    <Group
+      sx={{
+        position: 'fixed',
+        bottom: 0,
+        right: 15,
+      }}
+      direction="row"
+      align="center"
+      mb={15}
+    >
+      <Group className={classes.links}>{items}</Group>
+      <Group spacing="xs" position="right" noWrap>
+        <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
+          <BrandGithub size={18} />
+        </ActionIcon>
+      </Group>
+      <Text
+        style={{
+          fontSize: '0.75rem',
+          textAlign: 'center',
+          color: '#a0aec0',
+        }}
+      >
+        Made with ❤️ by @
+        <Anchor href="https://github.com/ajnart" style={{ color: 'inherit', fontStyle: 'inherit' }}>
+          ajnart
+        </Anchor>
+      </Text>
+    </Group>
+  );
+}

src/components/layout/Header.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import {
+  createStyles,
+  Header as Head,
+  Container,
+  Group,
+  Burger,
+  Drawer,
+  Center,
+} from '@mantine/core';
+import { useBooleanToggle } from '@mantine/hooks';
+import { NextLink } from '@mantine/next';
+import { Logo } from './Logo';
+import { SettingsMenuButton } from '../Settings/SettingsMenu';
+import CalendarComponent from '../modules/calendar/CalendarModule';
+
+const HEADER_HEIGHT = 60;
+
+const useStyles = createStyles((theme) => ({
+  root: {
+    position: 'relative',
+    zIndex: 1,
+  },
+
+  dropdown: {
+    position: 'absolute',
+    top: HEADER_HEIGHT,
+    left: 0,
+    right: 0,
+    zIndex: 0,
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+    borderTopWidth: 0,
+    overflow: 'hidden',
+
+    [theme.fn.largerThan('md')]: {
+      display: 'none',
+    },
+  },
+
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: '100%',
+  },
+
+  links: {
+    [theme.fn.smallerThan('md')]: {
+      display: 'none',
+    },
+  },
+
+  burger: {
+    [theme.fn.largerThan('md')]: {
+      display: 'none',
+    },
+  },
+
+  link: {
+    display: 'block',
+    lineHeight: 1,
+    padding: '8px 12px',
+    borderRadius: theme.radius.sm,
+    textDecoration: 'none',
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+    fontSize: theme.fontSizes.sm,
+    fontWeight: 500,
+
+    '&:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+    },
+
+    [theme.fn.smallerThan('sm')]: {
+      borderRadius: 0,
+      padding: theme.spacing.md,
+    },
+  },
+
+  linkActive: {
+    '&, &:hover': {
+      backgroundColor:
+        theme.colorScheme === 'dark'
+          ? theme.fn.rgba(theme.colors[theme.primaryColor][9], 0.25)
+          : theme.colors[theme.primaryColor][0],
+      color: theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 3 : 7],
+    },
+  },
+}));
+
+interface HeaderResponsiveProps {
+  links: { link: string; label: string }[];
+}
+
+export function Header({ links }: HeaderResponsiveProps) {
+  const [opened, toggleOpened] = useBooleanToggle(false);
+  const [active, setActive] = useState('/');
+  const { classes, cx } = useStyles();
+
+  const items = (
+    <>
+      {links.map((link) => (
+        <NextLink
+          key={link.label}
+          href={link.link}
+          className={cx(classes.link, { [classes.linkActive]: active === link.link })}
+          onClick={(event) => {
+            setActive(link.link);
+            toggleOpened(false);
+          }}
+        >
+          {link.label}
+        </NextLink>
+      ))}
+    </>
+  );
+  return (
+    <Head height={HEADER_HEIGHT} mb={10} className={classes.root}>
+      <Container className={classes.header}>
+        <Group>
+          <NextLink style={{ textDecoration: 'none' }} href="/">
+            <Logo style={{ fontSize: 22 }} />
+          </NextLink>
+        </Group>
+        <Group spacing={5} className={classes.links}>
+          {items}
+        </Group>
+        <Group>
+          <SettingsMenuButton />
+
+          <Burger
+            opened={opened}
+            onClick={() => toggleOpened()}
+            className={classes.burger}
+            size="sm"
+          />
+        </Group>
+
+        <Drawer
+          opened={opened}
+          overlayOpacity={0.55}
+          overlayBlur={3}
+          onClose={() => toggleOpened()}
+          position="right"
+        >
+          {opened ?? (
+            <Center>
+              <CalendarComponent />
+            </Center>
+          )}
+        </Drawer>
+      </Container>
+    </Head>
+  );
+}

src/components/layout/Layout.tsx

@@ -0,0 +1,36 @@
+import { AppShell, Center, createStyles } from '@mantine/core';
+import { Header } from './Header';
+import { Footer } from './Footer';
+import Aside from './Aside';
+import Navbar from './Navbar';
+
+const useStyles = createStyles((theme) => ({
+  main: {
+    [theme.fn.largerThan('md')]: {
+      width: 1200,
+    },
+  },
+}));
+
+export default function Layout({ children, style }: any) {
+  const { classes, cx } = useStyles();
+  return (
+    <AppShell
+      navbar={<Navbar />}
+      aside={<Aside />}
+      header={<Header links={[]} />}
+      footer={<Footer links={[]} />}
+    >
+      <Center>
+        <main
+          className={cx(classes.main)}
+          style={{
+            ...style,
+          }}
+        >
+          {children}
+        </main>
+      </Center>
+    </AppShell>
+  );
+}

src/components/layout/Logo.tsx

@@ -0,0 +1,15 @@
+import { Text } from '@mantine/core';
+import * as React from 'react';
+
+export function Logo({ style }: any) {
+  return (
+    <Text
+      sx={style}
+      weight="bold"
+      variant="gradient"
+      gradient={{ from: 'red', to: 'orange', deg: 145 }}
+    >
+      Homarr
+    </Text>
+  );
+}

src/components/layout/Navbar.tsx

@@ -0,0 +1,18 @@
+import { Navbar as MantineNavbar } from '@mantine/core';
+import { DateModule } from '../modules/date/DateModule';
+import ModuleWrapper from '../modules/moduleWrapper';
+
+export default function Navbar() {
+  return (
+    <MantineNavbar
+      height="100%"
+      hiddenBreakpoint="md"
+      hidden
+      width={{
+        base: 'auto',
+      }}
+    >
+      <ModuleWrapper module={DateModule} />
+    </MantineNavbar>
+  );
+}

src/components/modules/calendar/CalendarComponent.story.tsx

@@ -0,0 +1,7 @@
+import CalendarComponent from './CalendarModule';
+
+export default {
+  title: 'Calendar component',
+};
+
+export const Default = (args: any) => <CalendarComponent {...args} />;

src/components/modules/calendar/CalendarModule.tsx

@@ -0,0 +1,152 @@
+/* eslint-disable react/no-children-prop */
+import { Popover, Box, ScrollArea, Divider, Indicator } from '@mantine/core';
+import React, { useEffect, useState } from 'react';
+import { Calendar } from '@mantine/dates';
+import { showNotification } from '@mantine/notifications';
+import { Calendar as CalendarIcon, Check } from 'tabler-icons-react';
+import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
+import { useConfig } from '../../../tools/state';
+import { IModule } from '../modules';
+
+export const CalendarModule: IModule = {
+  title: 'Calendar',
+  description:
+    'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
+  icon: CalendarIcon,
+  component: CalendarComponent,
+};
+
+export default function CalendarComponent(props: any) {
+  const { config } = useConfig();
+  const [sonarrMedias, setSonarrMedias] = useState([] as any);
+  const [radarrMedias, setRadarrMedias] = useState([] as any);
+
+  useEffect(() => {
+    // Filter only sonarr and radarr services
+    const filtered = config.services.filter(
+      (service) => service.type === 'Sonarr' || service.type === 'Radarr'
+    );
+
+    // Get the url and apiKey for all Sonarr and Radarr services
+    const sonarrService = filtered.filter((service) => service.type === 'Sonarr').at(0);
+    const radarrService = filtered.filter((service) => service.type === 'Radarr').at(0);
+    const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
+    if (sonarrService && sonarrService.apiKey) {
+      fetch(
+        `${sonarrService?.url}api/calendar?apikey=${sonarrService?.apiKey}&end=${nextMonth}`
+      ).then((response) => {
+        response.ok &&
+          response.json().then((data) => {
+            setSonarrMedias(data);
+            showNotification({
+              title: 'Sonarr',
+              icon: <Check />,
+              color: 'green',
+              autoClose: 1500,
+              radius: 'md',
+              message: `Loaded ${data.length} releases`,
+            });
+          });
+      });
+    }
+    if (radarrService && radarrService.apiKey) {
+      fetch(
+        `${radarrService?.url}api/v3/calendar?apikey=${radarrService?.apiKey}&end=${nextMonth}`
+      ).then((response) => {
+        response.ok &&
+          response.json().then((data) => {
+            setRadarrMedias(data);
+            showNotification({
+              title: 'Radarr',
+              icon: <Check />,
+              color: 'green',
+              autoClose: 1500,
+              radius: 'md',
+              message: `Loaded ${data.length} releases`,
+            });
+          });
+      });
+    }
+  }, [config.services]);
+
+  if (sonarrMedias === undefined && radarrMedias === undefined) {
+    return <Calendar />;
+  }
+  return (
+    <Calendar
+      onChange={(day: any) => {}}
+      renderDay={(renderdate) => (
+        <DayComponent
+          renderdate={renderdate}
+          sonarrmedias={sonarrMedias}
+          radarrmedias={radarrMedias}
+        />
+      )}
+    />
+  );
+}
+
+function DayComponent(props: any) {
+  const {
+    renderdate,
+    sonarrmedias,
+    radarrmedias,
+  }: { renderdate: Date; sonarrmedias: []; radarrmedias: [] } = props;
+  const [opened, setOpened] = useState(false);
+
+  const day = renderdate.getDate();
+  // Itterate over the medias and filter the ones that are on the same day
+  const sonarrFiltered = sonarrmedias.filter((media: any) => {
+    const date = new Date(media.airDate);
+    // Return true if the date is renerdate without counting hours and minutes
+    return date.getDate() === day && date.getMonth() === renderdate.getMonth();
+  });
+  const radarrFiltered = radarrmedias.filter((media: any) => {
+    const date = new Date(media.inCinemas);
+    // Return true if the date is renerdate without counting hours and minutes
+    return date.getDate() === day && date.getMonth() === renderdate.getMonth();
+  });
+  if (sonarrFiltered.length === 0 && radarrFiltered.length === 0) {
+    return <div>{day}</div>;
+  }
+
+  return (
+    <Box
+      onClick={() => {
+        setOpened(true);
+      }}
+    >
+      {radarrFiltered.length > 0 && <Indicator size={7} color="yellow" children={null} />}
+      {sonarrFiltered.length > 0 && <Indicator size={7} offset={8} color="blue" children={null} />}
+      <Popover
+        position="left"
+        radius="lg"
+        shadow="xl"
+        transition="pop"
+        width={700}
+        onClose={() => setOpened(false)}
+        opened={opened}
+        // TODO: Fix this !! WTF ?
+        target={`‏ ${day}`}
+      >
+        <ScrollArea style={{ height: 400 }}>
+          {sonarrFiltered.map((media: any, index: number) => (
+            <React.Fragment key={index}>
+              <SonarrMediaDisplay media={media} />
+              {index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+            </React.Fragment>
+          ))}
+          {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
+            <Divider variant="dashed" my="xl" />
+          )}
+          {radarrFiltered.map((media: any, index: number) => (
+            <React.Fragment key={index}>
+              <RadarrMediaDisplay media={media} />
+              {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+            </React.Fragment>
+          ))}
+        </ScrollArea>
+      </Popover>
+    </Box>
+  );
+}

src/components/modules/calendar/MediaDisplay.story.tsx

@@ -0,0 +1,67 @@
+import { RadarrMediaDisplay } from './MediaDisplay';
+
+export default {
+  title: 'Media display component',
+  args: {
+    media: {
+      title: 'Doctor Strange in the Multiverse of Madness',
+      originalTitle: 'Doctor Strange in the Multiverse of Madness',
+      originalLanguage: {
+        id: 1,
+        name: 'English',
+      },
+      secondaryYearSourceId: 0,
+      sortTitle: 'doctor strange in multiverse madness',
+      sizeOnDisk: 0,
+      status: 'announced',
+      overview:
+        'Doctor Strange, with the help of mystical allies both old and new, traverses the mind-bending and dangerous alternate realities of the Multiverse to confront a mysterious new adversary.',
+      inCinemas: '2022-05-04T00:00:00Z',
+      images: [
+        {
+          coverType: 'poster',
+          url: 'https://image.tmdb.org/t/p/original/wRnbWt44nKjsFPrqSmwYki5vZtF.jpg',
+        },
+        {
+          coverType: 'fanart',
+          url: 'https://image.tmdb.org/t/p/original/ndCSoasjIZAMMDIuMxuGnNWu4DU.jpg',
+        },
+      ],
+      website: 'https://www.marvel.com/movies/doctor-strange-in-the-multiverse-of-madness',
+      year: 2022,
+      hasFile: false,
+      youTubeTrailerId: 'aWzlQ2N6qqg',
+      studio: 'Marvel Studios',
+      path: '/config/Doctor Strange in the Multiverse of Madness (2022)',
+      qualityProfileId: 1,
+      monitored: true,
+      minimumAvailability: 'announced',
+      isAvailable: true,
+      folderName: '/config/Doctor Strange in the Multiverse of Madness (2022)',
+      runtime: 126,
+      cleanTitle: 'doctorstrangeinmultiversemadness',
+      imdbId: 'tt9419884',
+      tmdbId: 453395,
+      titleSlug: '453395',
+      certification: 'PG-13',
+      genres: ['Fantasy', 'Action', 'Adventure'],
+      tags: [],
+      added: '2022-04-29T20:52:33Z',
+      ratings: {
+        tmdb: {
+          votes: 0,
+          value: 0,
+          type: 'user',
+        },
+      },
+      collection: {
+        name: 'Doctor Strange Collection',
+        tmdbId: 618529,
+        images: [],
+      },
+      id: 1,
+    },
+  },
+};
+
+export const Default = (args: any) => <RadarrMediaDisplay {...args} />;

src/components/modules/calendar/MediaDisplay.tsx

@@ -0,0 +1,100 @@
+import { Stack, Image, Group, Title, Badge, Text, ActionIcon, Anchor } from '@mantine/core';
+import { Link } from 'tabler-icons-react';
+
+export interface IMedia {
+  overview: string;
+  imdbId: any;
+  title: string;
+  poster: string;
+  genres: string[];
+  seasonNumber?: number;
+  episodeNumber?: number;
+}
+
+function MediaDisplay(props: { media: IMedia }) {
+  const { media }: { media: IMedia } = props;
+  return (
+    <Group noWrap align="self-start" mr={15}>
+      <Image
+        radius="md"
+        fit="cover"
+        src={media.poster}
+        alt={media.title}
+        width={300}
+        height={400}
+      />
+      <Stack
+        justify="space-between"
+        sx={(theme) => ({
+          height: 400,
+        })}
+      >
+        <Group direction="column">
+          <Group>
+            <Title order={3}>{media.title}</Title>
+            <Anchor href={`https://www.imdb.com/title/${media.imdbId}`} target="_blank">
+              <ActionIcon>
+                <Link />
+              </ActionIcon>
+            </Anchor>
+          </Group>
+          {media.episodeNumber && media.seasonNumber && (
+            <Text
+              style={{
+                textAlign: 'center',
+                color: '#a0aec0',
+              }}
+            >
+              Season {media.seasonNumber} episode {media.episodeNumber}
+            </Text>
+          )}
+          <Text align="justify">{media.overview}</Text>
+        </Group>
+        {/*Add the genres at the bottom of the poster*/}
+        <Group>
+          {media.genres.map((genre: string, i: number) => (
+            <Badge key={i}>{genre}</Badge>
+          ))}
+        </Group>
+      </Stack>
+    </Group>
+  );
+}
+
+export function RadarrMediaDisplay(props: any) {
+  const { media }: { media: any } = props;
+  // Find a poster CoverType
+  const poster = media.images.find((image: any) => image.coverType === 'poster');
+  // Return a movie poster containting the title and the description
+  return (
+    <MediaDisplay
+      media={{
+        imdbId: media.imdbId,
+        title: media.title,
+        overview: media.overview,
+        poster: poster.url,
+        genres: media.genres,
+      }}
+    />
+  );
+}
+
+export function SonarrMediaDisplay(props: any) {
+  const { media }: { media: any } = props;
+  // Find a poster CoverType
+  const poster = media.series.images.find((image: any) => image.coverType === 'poster');
+  // Return a movie poster containting the title and the description
+  return (
+    <MediaDisplay
+      media={{
+        imdbId: media.series.imdbId,
+        title: media.series.title,
+        overview: media.series.overview,
+        poster: poster.url,
+        genres: media.series.genres,
+        seasonNumber: media.seasonNumber,
+        episodeNumber: media.episodeNumber,
+      }}
+    />
+  );
+}

src/components/modules/calendar/index.ts

@@ -0,0 +1 @@
+export { CalendarModule } from './CalendarModule';

src/components/modules/calendar/mediaExample.ts

@@ -0,0 +1,408 @@
+export const medias = [
+  {
+    title: 'Doctor Strange in the Multiverse of Madness',
+    originalTitle: 'Doctor Strange in the Multiverse of Madness',
+    originalLanguage: {
+      id: 1,
+      name: 'English',
+    },
+    alternateTitles: [
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange 2',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 1,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Доктор Стрэндж 2',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 11,
+          name: 'Russian',
+        },
+        id: 2,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doutor Estranho 2',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 3,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange v multivesmíre šialenstva',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 4,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange 2: El multiverso de la locura',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 3,
+          name: 'Spanish',
+        },
+        id: 5,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doktor Strange Deliliğin Çoklu Evreninde',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 17,
+          name: 'Turkish',
+        },
+        id: 6,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'মহাবিশ্বের পাগলামিতে অদ্ভুত চিকিৎসক',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 7,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'จอมเวทย์มหากาฬ ในมัลติเวิร์สมหาภัย',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 28,
+          name: 'Thai',
+        },
+        id: 8,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: "Marvel Studios' Doctor Strange in the Multiverse of Madness",
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 9,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange en el Multiverso de la Locura de Marvel Studios',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 3,
+          name: 'Spanish',
+        },
+        id: 10,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doktors Streindžs neprāta multivisumā',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 11,
+      },
+    ],
+    secondaryYearSourceId: 0,
+    sortTitle: 'doctor strange in multiverse madness',
+    sizeOnDisk: 0,
+    status: 'announced',
+    overview:
+      'Doctor Strange, with the help of mystical allies both old and new, traverses the mind-bending and dangerous alternate realities of the Multiverse to confront a mysterious new adversary.',
+    inCinemas: '2022-05-04T00:00:00Z',
+    images: [
+      {
+        coverType: 'poster',
+        url: 'https://image.tmdb.org/t/p/original/wRnbWt44nKjsFPrqSmwYki5vZtF.jpg',
+      },
+      {
+        coverType: 'fanart',
+        url: 'https://image.tmdb.org/t/p/original/ndCSoasjIZAMMDIuMxuGnNWu4DU.jpg',
+      },
+    ],
+    website: 'https://www.marvel.com/movies/doctor-strange-in-the-multiverse-of-madness',
+    year: 2022,
+    hasFile: false,
+    youTubeTrailerId: 'aWzlQ2N6qqg',
+    studio: 'Marvel Studios',
+    path: '/config/Doctor Strange in the Multiverse of Madness (2022)',
+    qualityProfileId: 1,
+    monitored: true,
+    minimumAvailability: 'announced',
+    isAvailable: true,
+    folderName: '/config/Doctor Strange in the Multiverse of Madness (2022)',
+    runtime: 126,
+    cleanTitle: 'doctorstrangeinmultiversemadness',
+    imdbId: 'tt9419884',
+    tmdbId: 453395,
+    titleSlug: '453395',
+    certification: 'PG-13',
+    genres: ['Fantasy', 'Action', 'Adventure'],
+    tags: [],
+    added: '2022-04-29T20:52:33Z',
+    ratings: {
+      tmdb: {
+        votes: 0,
+        value: 0,
+        type: 'user',
+      },
+    },
+    collection: {
+      name: 'Doctor Strange Collection',
+      tmdbId: 618529,
+      images: [],
+    },
+    id: 1,
+  },
+  {
+    title: 'Doctor Strange in the Multiverse of Madness',
+    originalTitle: 'Doctor Strange in the Multiverse of Madness',
+    originalLanguage: {
+      id: 1,
+      name: 'English',
+    },
+    alternateTitles: [
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange 2',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 1,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Доктор Стрэндж 2',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 11,
+          name: 'Russian',
+        },
+        id: 2,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doutor Estranho 2',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 3,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange v multivesmíre šialenstva',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 4,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange 2: El multiverso de la locura',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 3,
+          name: 'Spanish',
+        },
+        id: 5,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doktor Strange Deliliğin Çoklu Evreninde',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 17,
+          name: 'Turkish',
+        },
+        id: 6,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'মহাবিশ্বের পাগলামিতে অদ্ভুত চিকিৎসক',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 7,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'จอมเวทย์มหากาฬ ในมัลติเวิร์สมหาภัย',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 28,
+          name: 'Thai',
+        },
+        id: 8,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: "Marvel Studios' Doctor Strange in the Multiverse of Madness",
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 9,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange en el Multiverso de la Locura de Marvel Studios',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 3,
+          name: 'Spanish',
+        },
+        id: 10,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doktors Streindžs neprāta multivisumā',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 11,
+      },
+    ],
+    secondaryYearSourceId: 0,
+    sortTitle: 'doctor strange in multiverse madness',
+    sizeOnDisk: 0,
+    status: 'announced',
+    overview:
+      'Doctor Strange, with the help of mystical allies both old and new, traverses the mind-bending and dangerous alternate realities of the Multiverse to confront a mysterious new adversary.',
+    inCinemas: '2022-05-05T00:00:00Z',
+    images: [
+      {
+        coverType: 'poster',
+        url: 'https://image.tmdb.org/t/p/original/wRnbWt44nKjsFPrqSmwYki5vZtF.jpg',
+      },
+      {
+        coverType: 'fanart',
+        url: 'https://image.tmdb.org/t/p/original/ndCSoasjIZAMMDIuMxuGnNWu4DU.jpg',
+      },
+    ],
+    website: 'https://www.marvel.com/movies/doctor-strange-in-the-multiverse-of-madness',
+    year: 2022,
+    hasFile: false,
+    youTubeTrailerId: 'aWzlQ2N6qqg',
+    studio: 'Marvel Studios',
+    path: '/config/Doctor Strange in the Multiverse of Madness (2022)',
+    qualityProfileId: 1,
+    monitored: true,
+    minimumAvailability: 'announced',
+    isAvailable: true,
+    folderName: '/config/Doctor Strange in the Multiverse of Madness (2022)',
+    runtime: 126,
+    cleanTitle: 'doctorstrangeinmultiversemadness',
+    imdbId: 'tt9419884',
+    tmdbId: 453395,
+    titleSlug: '453395',
+    certification: 'PG-13',
+    genres: ['Fantasy', 'Action', 'Adventure'],
+    tags: [],
+    added: '2022-04-29T20:52:33Z',
+    ratings: {
+      tmdb: {
+        votes: 0,
+        value: 0,
+        type: 'user',
+      },
+    },
+    collection: {
+      name: 'Doctor Strange Collection',
+      tmdbId: 618529,
+      images: [],
+    },
+    id: 2,
+  },
+];

src/components/modules/date/DateModule.story.tsx

@@ -0,0 +1,7 @@
+import DateComponent from './DateModule';
+
+export default {
+  title: 'Date module',
+};
+
+export const Default = (args: any) => <DateComponent {...args} />;

src/components/modules/date/DateModule.tsx

@@ -0,0 +1,41 @@
+import { Group, Text, Title } from '@mantine/core';
+import dayjs from 'dayjs';
+import { useEffect, useState } from 'react';
+import { Clock } from 'tabler-icons-react';
+import { IModule } from '../modules';
+
+export const DateModule: IModule = {
+  title: 'Date',
+  description: 'Show the current time and date in a card',
+  icon: Clock,
+  component: DateComponent,
+};
+
+export default function DateComponent(props: any) {
+  const [date, setDate] = useState(new Date());
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+
+  // Change date on minute change
+  // Note: Using 10 000ms instead of 1000ms to chill a little :)
+  useEffect(() => {
+    setInterval(() => {
+      setDate(new Date());
+    }, 10000);
+  }, []);
+
+  return (
+    <Group p="sm" direction="column">
+      <Title>
+        {hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes}
+      </Title>
+      <Text size="xl">
+        {
+          // Use dayjs to format the date
+          // https://day.js.org/en/getting-started/installation/
+          dayjs(date).format('dddd, MMMM D')
+        }
+      </Text>
+    </Group>
+  );
+}

src/components/modules/date/index.ts

@@ -0,0 +1 @@
+export { DateModule } from './DateModule';

src/components/modules/index.ts

@@ -0,0 +1,2 @@
+export * from './date';
+export * from './calendar';

src/components/modules/moduleWrapper.tsx

@@ -0,0 +1,29 @@
+import { Card, useMantineTheme } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+import { IModule } from './modules';
+
+export default function ModuleWrapper(props: any) {
+  const { module }: { module: IModule } = props;
+  const { config } = useConfig();
+  const enabledModules = config.settings.enabledModules ?? [];
+  // Remove 'Module' from enabled modules titles
+  const isShown = enabledModules.includes(module.title);
+  const theme = useMantineTheme();
+  if (!isShown) {
+    return null;
+  }
+  return (
+    <Card
+      hidden={!isShown}
+      mx="sm"
+      radius="lg"
+      shadow="sm"
+      style={{
+        // Make background color of the card depend on the theme
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : 'white',
+      }}
+    >
+      <module.component />
+    </Card>
+  );
+}

src/components/modules/modules.tsx

@@ -0,0 +1,11 @@
+// This interface is to be used in all the modules of the project
+// Each module should have its own interface and call the following function:
+// TODO: Add a function to register a module
+// Note: Maybe use context to keep track of the modules
+export interface IModule {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  component: React.ComponentType;
+  props?: any;
+}

src/components/modules/readme.md

@@ -0,0 +1,9 @@
+**Each module has a set of rules:** 
+- Exported Typed IModule element (Unique Name, description, component, ...) 
+- Needs to be in a new folder
+- Needs to be exported in the modules/newmodule/index.tsx of the new folder
+- Needs to be imported in the modules/index.tsx file
+- Needs to look good when wrapped with the modules/ModuleWrapper component
+- Needs to be put somewhere fitting in the app (While waiting for the big AppStore overhall) 
+- Any API Calls need to be safe and done on the widget itself (via useEffect or similar)
+- You can't add a package (unless there is a very specific need for it. Contact [@Ajnart](ajnart@pm.me) or make a [Discussion](https://github.com/ajnart/homarr/discussions/new).