v0.6.0 ✨ Categories and current download graphs ! 🥳

System info

.github/workflows/docker.yml

@@ -52,7 +52,7 @@ jobs:
           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
           # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
-      - run: yarn install --frozen-lockfile
+      - run: yarn install --immutable
       - run: yarn build
       - name: Cache build output
       # to copy needed files to docker build job

.github/workflows/docker_dev.yml

@@ -62,7 +62,7 @@ jobs:
           # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
 
-      - run: yarn install --frozen-lockfile
+      - run: yarn install --immutable
       - run: yarn build
 
       - name: Cache build output

.gitignore

@@ -37,3 +37,13 @@ yarn-error.log*
 # storybook
 storybook-static
 data/configs
+
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+# Yarn v2
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.22.19.cjs"

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.2.1.cjs

README.md

@@ -21,7 +21,7 @@
 <i>Join the discord! — Don't forget to star the repo if you are enjoying the project!</i>
 </p>
 <p align="center">
-<a href="https://homarr.netlify.app/"><strong> Demo ↗️ </strong></a> • <a href="#-installation"><strong> Install ➡️ </strong></a> • <a href="https://github.com/ajnart/homarr/wiki"><strong> Read the Wiki 📄 </strong></a>
+<a href="https://homarr.ajnart.fr/"><strong> Demo ↗️ </strong></a> • <a href="#-installation"><strong> Install ➡️ </strong></a> • <a href="https://github.com/ajnart/homarr/wiki"><strong> Read the Wiki 📄 </strong></a>
 </p>
 
 ---
@@ -99,8 +99,14 @@ _Requirements_:
 - [Docker](https://docs.docker.com/get-docker/)
 
 **Standard Docker Install**
-```sh
+```bash
-docker run --name homarr --restart unless-stopped -p 7575:7575 -v /data/docker/homarr:/app/data/configs -d ghcr.io/ajnart/homarr:latest
+docker run  \
+  --name homarr \
+  --restart unless-stopped \
+  -p 7575:7575 \
+  -v ./homarr/configs:/app/data/configs \
+  -v ./homarr/icons:/app/public/icons \
+  -d ghcr.io/ajnart/homarr:latest
 ```
 
 **Docker Compose**
@@ -116,7 +122,8 @@ services:
     image: ghcr.io/ajnart/homarr:latest
     restart: unless-stopped
     volumes:
-      - /data/docker/homarr:/app/data/configs
+      - ./homarr/configs:/app/data/configs
+      - ./homarr/icons:/app/public/icons
     ports:
       - '7575:7575'
 ```

crowdin.yml

@@ -0,0 +1,3 @@
+files:
+  - source: /public/locales/en/*.json
+    translation: /public/locales/%two_letters_code%/%original_file_name%.json

data/configs/default.json

@@ -10,6 +10,14 @@
     }
   ],
   "settings": {
-    "searchUrl": "https://bing.com/search?q="
+    "searchUrl": "https://google.com/search?q="
+  },
+  "modules": {
+    "Search Bar": {
+      "enabled": true
+    },
+    "Date": {
+      "enabled": false
+    }
   }
 }

data/constants.ts

@@ -1,2 +1,2 @@
 export const REPO_URL = 'ajnart/homarr';
-export const CURRENT_VERSION = 'v0.5.1';
+export const CURRENT_VERSION = 'v0.6.0';

package.json

@@ -1,7 +1,6 @@
 {
 	"name": "homarr",
-	"version": "0.5.1",
+	"version": "0.6.0",
-	"private": "false",
 	"description": "Homarr - A homepage for your server.",
 	"repository": {
 		"type": "git",
@@ -25,8 +24,12 @@
 		"ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
 	},
 	"dependencies": {
-    "@dnd-kit/core": "^6.0.1",
+		"@ctrl/deluge": "^4.0.0",
-    "@dnd-kit/sortable": "^7.0.0",
+		"@ctrl/qbittorrent": "^4.0.0",
+		"@ctrl/shared-torrent": "^4.1.0",
+		"@dnd-kit/core": "^6.0.1",
+		"@dnd-kit/sortable": "^7.0.0",
+		"@dnd-kit/utilities": "^3.2.0",
 		"@mantine/core": "^4.2.6",
 		"@mantine/dates": "^4.2.6",
 		"@mantine/dropzone": "^4.2.6",
@@ -35,6 +38,9 @@
 		"@mantine/next": "^4.2.6",
 		"@mantine/notifications": "^4.2.6",
 		"@mantine/prism": "^4.2.6",
+		"@nivo/core": "^0.79.0",
+		"@nivo/line": "^0.79.1",
+		"@tabler/icons": "^1.68.0",
 		"axios": "^0.27.2",
 		"cookies-next": "^2.0.4",
 		"dayjs": "^1.11.2",
@@ -44,7 +50,7 @@
 		"prism-react-renderer": "^1.3.1",
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
-		"tabler-icons-react": "^1.46.0",
+		"systeminformation": "^5.11.16",
 		"uuid": "^8.3.2"
 	},
 	"devDependencies": {
@@ -76,5 +82,6 @@
 	},
 	"resolutions": {
 		"@types/react": "17.0.30"
-	}
+	},
+	"packageManager": "yarn@3.2.1"
 }

src/components/AppShelf/AddAppShelfItem.tsx

@@ -10,10 +10,12 @@ import {
   ActionIcon,
   Tooltip,
   Title,
+  Anchor,
+  Text,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useState } from 'react';
-import { Apps } from 'tabler-icons-react';
+import { IconApps as Apps } from '@tabler/icons';
 import { v4 as uuidv4 } from 'uuid';
 import { useConfig } from '../../tools/state';
 import { ServiceTypeList } from '../../tools/types';
@@ -61,19 +63,54 @@ function MatchIcon(name: string, form: any) {
   return false;
 }
 
+function MatchService(name: string, form: any) {
+  const service = ServiceTypeList.find((s) => s === name);
+  if (service) {
+    form.setFieldValue('type', service);
+  }
+}
+
+function MatchPort(name: string, form: any) {
+  const portmap = [
+    { name: 'qBittorrent', value: '8080' },
+    { name: 'Sonarr', value: '8989' },
+    { name: 'Radarr', value: '7878' },
+    { name: 'Lidarr', value: '8686' },
+    { name: 'Readarr', value: '8686' },
+    { name: 'Deluge', value: '8112' },
+    { name: 'Transmission', value: '9091' },
+  ];
+  // Match name with portmap key
+  const port = portmap.find((p) => p.name === name);
+  if (port) {
+    form.setFieldValue('url', `http://localhost:${port.value}`);
+  }
+}
+
 export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
   const { setOpened } = props;
   const { config, setConfig } = useConfig();
   const [isLoading, setLoading] = useState(false);
 
+  // Extract all the categories from the services in config
+  const categoryList = config.services.reduce((acc, cur) => {
+    if (cur.category && !acc.includes(cur.category)) {
+      acc.push(cur.category);
+    }
+    return acc;
+  }, [] as string[]);
+
   const form = useForm({
     initialValues: {
       id: props.id ?? uuidv4(),
       type: props.type ?? 'Other',
+      category: props.category ?? undefined,
       name: props.name ?? '',
       icon: props.icon ?? '/favicon.svg',
       url: props.url ?? '',
       apiKey: props.apiKey ?? (undefined as unknown as string),
+      username: props.username ?? (undefined as unknown as string),
+      password: props.password ?? (undefined as unknown as string),
     },
     validate: {
       apiKey: () => null,
@@ -97,6 +134,15 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
     },
   });
 
+  // Try to set const hostname to new URL(form.values.url).hostname)
+  // If it fails, set it to the form.values.url
+  let hostname = form.values.url;
+  try {
+    hostname = new URL(form.values.url).origin;
+  } catch (e) {
+    // Do nothing
+  }
+
   return (
     <>
       <Center>
@@ -143,10 +189,9 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
             value={form.values.name}
             onChange={(event) => {
               form.setFieldValue('name', event.currentTarget.value);
-              const match = MatchIcon(event.currentTarget.value, form);
+              MatchIcon(event.currentTarget.value, form);
-              if (match) {
+              MatchService(event.currentTarget.value, form);
-                form.setFieldValue('icon', match);
+              MatchPort(event.currentTarget.value, form);
-              }
             }}
             error={form.errors.name && 'Invalid icon url'}
           />
@@ -164,7 +209,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
             {...form.getInputProps('url')}
           />
           <Select
-            label="Select the type of service (used for API calls)"
+            label="Service type"
             defaultValue="Other"
             placeholder="Pick one"
             required
@@ -172,21 +217,94 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
             data={ServiceTypeList}
             {...form.getInputProps('type')}
           />
+          <Select
+            label="Category"
+            data={categoryList}
+            placeholder="Select a category or create a new one"
+            nothingFound="Nothing found"
+            searchable
+            clearable
+            creatable
+            onClick={(e) => {
+              e.preventDefault();
+            }}
+            getCreateLabel={(query) => `+ Create "${query}"`}
+            onCreate={(query) => {}}
+            {...form.getInputProps('category')}
+          />
           <LoadingOverlay visible={isLoading} />
           {(form.values.type === 'Sonarr' ||
             form.values.type === 'Radarr' ||
             form.values.type === 'Lidarr' ||
             form.values.type === 'Readarr') && (
-            <TextInput
+            <>
-              required
+              <TextInput
-              label="API key"
+                required
-              placeholder="Your API key"
+                label="API key"
-              value={form.values.apiKey}
+                placeholder="Your API key"
-              onChange={(event) => {
+                value={form.values.apiKey}
-                form.setFieldValue('apiKey', event.currentTarget.value);
+                onChange={(event) => {
-              }}
+                  form.setFieldValue('apiKey', event.currentTarget.value);
-              error={form.errors.apiKey && 'Invalid API key'}
+                }}
-            />
+                error={form.errors.apiKey && 'Invalid API key'}
+              />
+              <Text
+                style={{
+                  alignSelf: 'center',
+                  fontSize: '0.75rem',
+                  textAlign: 'center',
+                  color: 'gray',
+                }}
+              >
+                Tip: Get your API key{' '}
+                <Anchor
+                  target="_blank"
+                  weight="bold"
+                  style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
+                  href={`${hostname}/settings/general`}
+                >
+                  here.
+                </Anchor>
+              </Text>
+            </>
+          )}
+          {form.values.type === 'qBittorrent' && (
+            <>
+              <TextInput
+                required
+                label="Username"
+                placeholder="admin"
+                value={form.values.username}
+                onChange={(event) => {
+                  form.setFieldValue('username', event.currentTarget.value);
+                }}
+                error={form.errors.username && 'Invalid username'}
+              />
+              <TextInput
+                required
+                label="Password"
+                placeholder="adminadmin"
+                value={form.values.password}
+                onChange={(event) => {
+                  form.setFieldValue('password', event.currentTarget.value);
+                }}
+                error={form.errors.password && 'Invalid password'}
+              />
+            </>
+          )}
+          {form.values.type === 'Deluge' && (
+            <>
+              <TextInput
+                required
+                label="Password"
+                placeholder="deluge"
+                value={form.values.password}
+                onChange={(event) => {
+                  form.setFieldValue('password', event.currentTarget.value);
+                }}
+                error={form.errors.password && 'Invalid password'}
+              />
+            </>
           )}
         </Group>
 

src/components/AppShelf/AppShelf.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Grid } from '@mantine/core';
+import { Grid, Group, Title } from '@mantine/core';
 import {
   closestCenter,
   DndContext,
@@ -12,6 +12,8 @@ import { arrayMove, SortableContext } from '@dnd-kit/sortable';
 import { useConfig } from '../../tools/state';
 
 import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
+import { ModuleWrapper } from '../modules/moduleWrapper';
+import { DownloadsModule } from '../modules';
 
 const AppShelf = (props: any) => {
   const [activeId, setActiveId] = useState(null);
@@ -45,34 +47,86 @@ const AppShelf = (props: any) => {
 
     setActiveId(null);
   }
+  // Extract all the categories from the services in config
+  const categoryList = config.services.reduce((acc, cur) => {
+    if (cur.category && !acc.includes(cur.category)) {
+      acc.push(cur.category);
+    }
+    return acc;
+  }, [] as string[]);
 
-  return (
+  const item = (filter?: string) => {
-    <DndContext
+    // If filter is not set, return all the services without a category or a null category
-      sensors={sensors}
+    let filtered = config.services;
-      collisionDetection={closestCenter}
+    if (!filter) {
-      onDragStart={handleDragStart}
+      filtered = config.services.filter((e) => !e.category || e.category === null);
-      onDragEnd={handleDragEnd}
+    }
-    >
+    if (filter) {
-      <SortableContext items={config.services}>
+      filtered = config.services.filter((e) => e.category === filter);
-        <Grid gutter="xl" align="center">
+    }
-          {config.services.map((service) => (
+
-            <Grid.Col key={service.id} span={6} xl={2} xs={4} sm={3} md={3}>
+    return (
-              <SortableAppShelfItem service={service} key={service.id} id={service.id} />
+      <DndContext
-            </Grid.Col>
+        sensors={sensors}
-          ))}
+        collisionDetection={closestCenter}
-        </Grid>
+        onDragStart={handleDragStart}
-      </SortableContext>
+        onDragEnd={handleDragEnd}
-      <DragOverlay
-        style={{
-          // Add a shadow to the drag overlay
-          boxShadow: '0 0 10px rgba(0, 0, 0, 0.5)',
-        }}
       >
-        {activeId ? (
+        <SortableContext items={config.services}>
-          <AppShelfItem service={config.services.find((e) => e.id === activeId)} id={activeId} />
+          <Grid gutter="xl" align="center">
+            {filtered.map((service) => (
+              <Grid.Col key={service.id} span={6} xl={2} xs={4} sm={3} md={3}>
+                <SortableAppShelfItem service={service} key={service.id} id={service.id} />
+              </Grid.Col>
+            ))}
+          </Grid>
+        </SortableContext>
+        <DragOverlay
+          style={{
+            // Add a shadow to the drag overlay
+            boxShadow: '0 0 10px rgba(0, 0, 0, 0.5)',
+          }}
+        >
+          {activeId ? (
+            <AppShelfItem service={config.services.find((e) => e.id === activeId)} id={activeId} />
+          ) : null}
+        </DragOverlay>
+      </DndContext>
+    );
+  };
+
+  if (categoryList.length > 0) {
+    const noCategory = config.services.filter(
+      (e) => e.category === undefined || e.category === null
+    );
+
+    return (
+      // Return one item for each category
+      <Group grow direction="column">
+        {categoryList.map((category) => (
+          <>
+            <Title order={3} key={category}>
+              {category}
+            </Title>
+            {item(category)}
+          </>
+        ))}
+        {/* Return the item for all services without category */}
+        {noCategory && noCategory.length > 0 ? (
+          <>
+            <Title order={3}>Other</Title>
+            {item()}
+          </>
         ) : null}
-      </DragOverlay>
+        <ModuleWrapper mt="xl" module={DownloadsModule} />
-    </DndContext>
+      </Group>
+    );
+  }
+  return (
+    <Group grow direction="column">
+      {item()}
+      <ModuleWrapper mt="xl" module={DownloadsModule} />
+    </Group>
   );
 };
 

src/components/AppShelf/AppShelfItem.tsx

@@ -91,11 +91,11 @@ export function AppShelfItem(props: any) {
             >
               <motion.i
                 whileHover={{
-                  cursor: 'pointer',
                   scale: 1.1,
                 }}
               >
                 <Image
+                  styles={{ root: { cursor: 'pointer' } }}
                   width={80}
                   height={80}
                   src={service.icon}

src/components/AppShelf/AppShelfMenu.tsx

@@ -1,12 +1,13 @@
 import { Menu, Modal, Text, useMantineTheme } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
-import { Check, Edit, Trash } from 'tabler-icons-react';
+import { IconCheck as Check, IconEdit as Edit, IconTrash as Trash } from '@tabler/icons';
 import { useConfig } from '../../tools/state';
+import { serviceItem } from '../../tools/types';
 import { AddAppShelfItemForm } from './AddAppShelfItem';
 
 export default function AppShelfMenu(props: any) {
-  const { service } = props;
+  const { service }: { service: serviceItem } = props;
   const { config, setConfig } = useConfig();
   const theme = useMantineTheme();
   const [opened, setOpened] = useState(false);
@@ -23,27 +24,31 @@ export default function AppShelfMenu(props: any) {
           setOpened={setOpened}
           name={service.name}
           id={service.id}
+          category={service.category}
           type={service.type}
           url={service.url}
           icon={service.icon}
           apiKey={service.apiKey}
+          username={service.username}
+          password={service.password}
           message="Save service"
         />
       </Modal>
       <Menu
         position="right"
         radius="md"
+        shadow="xl"
         styles={{
           body: {
-            backgroundColor:
+            // Add shadow and elevation to the body
-              theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+            boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.05)',
           },
         }}
       >
         <Menu.Label>Settings</Menu.Label>
         <Menu.Item
           color="primary"
-          icon={<Edit size={14} />}
+          icon={<Edit />}
           // TODO: #2 Add the ability to edit the service.
           onClick={() => setOpened(true)}
         >
@@ -61,7 +66,7 @@ export default function AppShelfMenu(props: any) {
               autoClose: 5000,
               title: (
                 <Text>
-                  Service <b>{service.name}</b> removed successfully
+                  Service <b>{service.name}</b> removed successfully!
                 </Text>
               ),
               color: 'green',
@@ -69,7 +74,7 @@ export default function AppShelfMenu(props: any) {
               message: undefined,
             });
           }}
-          icon={<Trash size={14} />}
+          icon={<Trash />}
         >
           Delete
         </Menu.Item>

src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createStyles, Switch, Group, useMantineColorScheme, Kbd } from '@mantine/core';
-import { Sun, MoonStars } from 'tabler-icons-react';
+import { IconSun as Sun, IconMoonStars as MoonStars } from '@tabler/icons';
 
 const useStyles = createStyles((theme) => ({
   root: {

src/components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -1,5 +1,5 @@
 import { Box, useMantineColorScheme } from '@mantine/core';
-import { Sun, MoonStars } from 'tabler-icons-react';
+import { IconSun as Sun, IconMoonStars as MoonStars } from '@tabler/icons';
 import { motion } from 'framer-motion';
 
 export function ColorSchemeToggle() {

src/components/Config/ConfigChanger.tsx

@@ -9,7 +9,7 @@ export default function ConfigChanger() {
   useEffect(() => {
     getConfigs().then((configs) => setConfigList(configs));
     // setConfig(initialConfig);
-  }, [config.name]);
+  }, [config]);
   // If configlist is empty, return a loading indicator
   if (configList.length === 0) {
     return (

src/components/Config/LoadConfig.tsx

@@ -1,5 +1,11 @@
 import { Group, Text, useMantineTheme, MantineTheme } from '@mantine/core';
-import { Upload, Photo, X, Icon as TablerIcon, Check } from 'tabler-icons-react';
+import {
+  IconUpload as Upload,
+  IconPhoto as Photo,
+  IconX as X,
+  IconCheck as Check,
+  TablerIcon,
+} from '@tabler/icons';
 import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
 import { useRef } from 'react';

src/components/Config/SaveConfig.tsx

@@ -4,7 +4,13 @@ import { showNotification } from '@mantine/notifications';
 import axios from 'axios';
 import fileDownload from 'js-file-download';
 import { useState } from 'react';
-import { Check, Download, Plus, Trash, X } from 'tabler-icons-react';
+import {
+  IconCheck as Check,
+  IconDownload as Download,
+  IconPlus as Plus,
+  IconTrash as Trash,
+  IconX as X,
+} from '@tabler/icons';
 import { useConfig } from '../../tools/state';
 
 export default function SaveConfigComponent(props: any) {
@@ -44,7 +50,6 @@ export default function SaveConfigComponent(props: any) {
         >
           <TextInput
             required
-            defaultValue={config.name}
             label="Config name"
             placeholder="Your new config name"
             {...form.getInputProps('configName')}
@@ -55,7 +60,7 @@ export default function SaveConfigComponent(props: any) {
         </form>
       </Modal>
       <Button leftIcon={<Download />} variant="outline" onClick={onClick}>
-        Download your config
+        Download config
       </Button>
       <Button
         leftIcon={<Trash />}
@@ -86,10 +91,10 @@ export default function SaveConfigComponent(props: any) {
           setConfig({ ...config, name: 'default' });
         }}
       >
-        Delete current config
+        Delete config
       </Button>
       <Button leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
-        Save a copy of your config
+        Save a copy
       </Button>
     </Group>
   );

src/components/Config/SelectConfig.tsx

@@ -1,16 +0,0 @@
-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/Settings/ModuleEnabler.tsx

@@ -12,7 +12,7 @@ export default function ModuleEnabler(props: any) {
           key={module.title}
           size="md"
           checked={config.modules?.[module.title]?.enabled ?? false}
-          label={`Enable ${module.title} module`}
+          label={`Enable ${module.title}`}
           onChange={(e) => {
             setConfig({
               ...config,

src/components/Settings/SettingsMenu.tsx

@@ -7,10 +7,12 @@ import {
   SegmentedControl,
   TextInput,
   Drawer,
+  Anchor,
 } from '@mantine/core';
 import { useColorScheme, useHotkeys } from '@mantine/hooks';
 import { useState } from 'react';
-import { Settings as SettingsIcon } from 'tabler-icons-react';
+import { IconBrandGithub as BrandGithub, IconSettings } from '@tabler/icons';
+import { CURRENT_VERSION } from '../../../data/constants';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import ConfigChanger from '../Config/ConfigChanger';
@@ -87,11 +89,42 @@ function SettingsMenu(props: any) {
           alignSelf: 'center',
           fontSize: '0.75rem',
           textAlign: 'center',
-          color: '#a0aec0',
+          color: 'gray',
         }}
       >
-        tip: You can upload your config file by dragging and dropping it onto the page
+        Tip: You can upload your config file by dragging and dropping it onto the page!
       </Text>
+      <Group position="center" direction="row" mr="xs">
+        <Group spacing={0}>
+          <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
+            <BrandGithub size={18} />
+          </ActionIcon>
+          <Text
+            style={{
+              position: 'relative',
+              fontSize: '0.90rem',
+              color: 'gray',
+            }}
+          >
+            {CURRENT_VERSION}
+          </Text>
+        </Group>
+        <Text
+          style={{
+            fontSize: '0.90rem',
+            textAlign: 'center',
+            color: 'gray',
+          }}
+        >
+          Made with ❤️ by @
+          <Anchor
+            href="https://github.com/ajnart"
+            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
+          >
+            ajnart
+          </Anchor>
+        </Text>
+      </Group>
     </Group>
   );
 }
@@ -121,7 +154,7 @@ export function SettingsMenuButton(props: any) {
         onClick={() => setOpened(true)}
       >
         <Tooltip label="Settings">
-          <SettingsIcon />
+          <IconSettings />
         </Tooltip>
       </ActionIcon>
     </>

src/components/layout/Aside.tsx

@@ -1,10 +1,17 @@
 import { Aside as MantineAside, Group } from '@mantine/core';
-import { WeatherModule, DateModule, CalendarModule } from '../modules';
+import {
+  WeatherModule,
+  DateModule,
+  CalendarModule,
+  TotalDownloadsModule,
+  SystemModule,
+} from '../modules';
 import { ModuleWrapper } from '../modules/moduleWrapper';
 
 export default function Aside(props: any) {
   return (
     <MantineAside
+      pr="md"
       hiddenBreakpoint="md"
       hidden
       style={{
@@ -14,10 +21,12 @@ export default function Aside(props: any) {
         base: 'auto',
       }}
     >
-      <Group mt="sm" grow direction="column">
+      <Group my="sm" grow direction="column" style={{ width: 300 }}>
         <ModuleWrapper module={CalendarModule} />
-        <ModuleWrapper module={DateModule} />
+        <ModuleWrapper module={TotalDownloadsModule} />
         <ModuleWrapper module={WeatherModule} />
+        <ModuleWrapper module={DateModule} />
+        <ModuleWrapper module={SystemModule} />
       </Group>
     </MantineAside>
   );

src/components/layout/Footer.tsx

@@ -1,16 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
-import {
+import { createStyles, Footer as FooterComponent } from '@mantine/core';
-  createStyles,
+import { showNotification } from '@mantine/notifications';
-  Anchor,
-  Text,
-  Group,
-  ActionIcon,
-  Footer as FooterComponent,
-  Alert,
-  useMantineTheme,
-} from '@mantine/core';
-import { AlertCircle, BrandGithub } from 'tabler-icons-react';
 import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
+import { IconAlertCircle as AlertCircle } from '@tabler/icons';
 
 const useStyles = createStyles((theme) => ({
   footer: {
@@ -43,31 +35,26 @@ interface FooterCenteredProps {
 }
 
 export function Footer({ links }: FooterCenteredProps) {
-  const [update, setUpdate] = useState(false);
-  const theme = useMantineTheme();
-  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>
-  ));
-
-  const [latestVersion, setLatestVersion] = useState(CURRENT_VERSION);
-  const [isOpen, setOpen] = useState(true);
   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) {
-        if (data.tag_name !== CURRENT_VERSION) {
+          showNotification({
-          setUpdate(true);
+            color: 'yellow',
+            autoClose: false,
+            title: 'New version available',
+            icon: <AlertCircle />,
+            message: `Version ${data.tag_name} is available, update now!`,
+          });
+        } else if (data.tag_name < CURRENT_VERSION) {
+          showNotification({
+            color: 'orange',
+            autoClose: 5000,
+            title: 'You are using a development version',
+            icon: <AlertCircle />,
+            message: 'This version of Homarr is still in development! Bugs are expected 🐛',
+          });
         }
       });
     });
@@ -75,69 +62,13 @@ export function Footer({ links }: FooterCenteredProps) {
 
   return (
     <FooterComponent
-      p={5}
       height="auto"
       style={{
         background: 'none',
         border: 'none',
         clear: 'both',
       }}
-    >
+      children={undefined}
-      <Group position="apart" direction="row" style={{ alignItems: 'end' }} mr="xs" mb="xs">
+    />
-        <Group position="left">
-          <Alert
-            // onClick open latest release page
-            onClose={() => setOpen(false)}
-            icon={<AlertCircle size={16} />}
-            title={`Updated version: ${latestVersion} is available. Current version: ${CURRENT_VERSION}`}
-            withCloseButton
-            radius="lg"
-            hidden={CURRENT_VERSION === latestVersion || !isOpen}
-            variant="outline"
-            styles={{
-              root: {
-                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
-              },
-
-              closeButton: {
-                marginLeft: '5px',
-              },
-            }}
-            children={undefined}
-          />
-        </Group>
-        <Group position="right">
-          <Group spacing={0}>
-            <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
-              <BrandGithub size={18} />
-            </ActionIcon>
-            <Text
-              style={{
-                position: 'relative',
-                fontSize: '0.90rem',
-                color: 'gray',
-              }}
-            >
-              {CURRENT_VERSION}
-            </Text>
-          </Group>
-          <Text
-            style={{
-              fontSize: '0.90rem',
-              textAlign: 'center',
-              color: '#a0aec0',
-            }}
-          >
-            Made with ❤️ by @
-            <Anchor
-              href="https://github.com/ajnart"
-              style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
-            >
-              ajnart
-            </Anchor>
-          </Text>
-        </Group>
-      </Group>
-    </FooterComponent>
   );
 }

src/components/layout/Logo.tsx

@@ -13,11 +13,11 @@ export function Logo({ style }: any) {
         }}
       />
       <NextLink
+        href="/"
         style={{
           textDecoration: 'none',
           position: 'relative',
         }}
-        href="/"
       >
         <Text
           sx={style}

src/components/modules/calendar/CalendarModule.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/no-children-prop */
-import { Box, Divider, Indicator, Popover, ScrollArea, useMantineTheme } from '@mantine/core';
+import { Box, Divider, Indicator, Popover, ScrollArea } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
-import { showNotification } from '@mantine/notifications';
+import { IconCalendar as CalendarIcon } from '@tabler/icons';
-import { Calendar as CalendarIcon, Check } from 'tabler-icons-react';
+import axios from 'axios';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 import {
@@ -11,7 +11,8 @@ import {
   RadarrMediaDisplay,
   LidarrMediaDisplay,
   ReadarrMediaDisplay,
-} from './MediaDisplay';
+} from '../common';
+import { serviceItem } from '../../../tools/types';
 
 export const CalendarModule: IModule = {
   title: 'Calendar',
@@ -27,104 +28,28 @@ export default function CalendarComponent(props: any) {
   const [lidarrMedias, setLidarrMedias] = useState([] as any);
   const [radarrMedias, setRadarrMedias] = useState([] as any);
   const [readarrMedias, setReadarrMedias] = useState([] as any);
+  const sonarrService = config.services.filter((service) => service.type === 'Sonarr').at(0);
+  const radarrService = config.services.filter((service) => service.type === 'Radarr').at(0);
+  const lidarrService = config.services.filter((service) => service.type === 'Lidarr').at(0);
+  const readarrService = config.services.filter((service) => service.type === 'Readarr').at(0);
+
+  function getMedias(service: serviceItem | undefined, type: string) {
+    if (!service || !service.apiKey) {
+      return Promise.resolve({ data: [] });
+    }
+    return axios.post(`/api/modules/calendar?type=${type}`, { ...service });
+  }
 
   useEffect(() => {
     // Filter only sonarr and radarr services
-    const filtered = config.services.filter(
-      (service) =>
-        service.type === 'Sonarr' ||
-        service.type === 'Radarr' ||
-        service.type === 'Lidarr' ||
-        service.type === 'Readarr'
-    );
 
     // Get the url and apiKey for all Sonarr and Radarr services
-    const sonarrService = filtered.filter((service) => service.type === 'Sonarr').at(0);
+    getMedias(sonarrService, 'sonarr').then((res) => setSonarrMedias(res.data));
-    const radarrService = filtered.filter((service) => service.type === 'Radarr').at(0);
+    getMedias(radarrService, 'radarr').then((res) => setRadarrMedias(res.data));
-    const lidarrService = filtered.filter((service) => service.type === 'Lidarr').at(0);
+    getMedias(lidarrService, 'lidarr').then((res) => setLidarrMedias(res.data));
-    const readarrService = filtered.filter((service) => service.type === 'Readarr').at(0);
+    getMedias(readarrService, 'readarr').then((res) => setReadarrMedias(res.data));
-    const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
-    if (sonarrService && sonarrService.apiKey) {
-      const baseUrl = new URL(sonarrService.url).origin;
-      fetch(`${baseUrl}/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) {
-      const baseUrl = new URL(radarrService.url).origin;
-      fetch(`${baseUrl}/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`,
-              });
-            });
-        }
-      );
-    }
-    if (lidarrService && lidarrService.apiKey) {
-      const baseUrl = new URL(lidarrService.url).origin;
-      fetch(`${baseUrl}/api/v1/calendar?apikey=${lidarrService?.apiKey}&end=${nextMonth}`).then(
-        (response) => {
-          response.ok &&
-            response.json().then((data) => {
-              setLidarrMedias(data);
-              showNotification({
-                title: 'Lidarr',
-                icon: <Check />,
-                color: 'green',
-                autoClose: 1500,
-                radius: 'md',
-                message: `Loaded ${data.length} releases`,
-              });
-            });
-        }
-      );
-    }
-    if (readarrService && readarrService.apiKey) {
-      const baseUrl = new URL(readarrService.url).origin;
-      fetch(`${baseUrl}/api/v1/calendar?apikey=${readarrService?.apiKey}&end=${nextMonth}`).then(
-        (response) => {
-          response.ok &&
-            response.json().then((data) => {
-              setReadarrMedias(data);
-              showNotification({
-                title: 'Readarr',
-                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) => {}}
@@ -151,7 +76,6 @@ function DayComponent(props: any) {
   }: { renderdate: Date; sonarrmedias: []; radarrmedias: []; lidarrmedias: []; readarrmedias: [] } =
     props;
   const [opened, setOpened] = useState(false);
-  const theme = useMantineTheme();
 
   const day = renderdate.getDate();
 
@@ -247,6 +171,11 @@ function DayComponent(props: any) {
         radius="lg"
         shadow="xl"
         transition="pop"
+        styles={{
+          body: {
+            boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.1), 0 14px 11px rgba(0, 0, 0, 0.1)',
+          },
+        }}
         width={700}
         onClose={() => setOpened(false)}
         opened={opened}

src/components/modules/common/MediaDisplay.tsx

@@ -1,5 +1,5 @@
 import { Image, Group, Title, Badge, Text, ActionIcon, Anchor, ScrollArea } from '@mantine/core';
-import { Link } from 'tabler-icons-react';
+import { IconLink as Link } from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { serviceItem } from '../../../tools/types';
 
@@ -14,7 +14,7 @@ export interface IMedia {
   episodeNumber?: number;
 }
 
-function MediaDisplay(props: { media: IMedia }) {
+export function MediaDisplay(props: { media: IMedia }) {
   const { media }: { media: IMedia } = props;
   return (
     <Group position="apart">
@@ -32,24 +32,22 @@ function MediaDisplay(props: { media: IMedia }) {
             height={400}
           />
         )}
-        <Group direction="row">
+        <Group direction="column">
-          <Title order={3}>{media.title}</Title>
+          <Group noWrap mr="sm" style={{ minWidth: 400 }}>
-          {media.imdbId && (
+            <Title order={3}>{media.title}</Title>
-            <Anchor
+            {media.imdbId && (
-              href={`https://www.imdb.com/title/${media.imdbId}`}
+              <Anchor href={`https://www.imdb.com/title/${media.imdbId}`} target="_blank">
-              target="_blank"
+                <ActionIcon>
-              rel="noopener noreferrer"
+                  <Link />
-            >
+                </ActionIcon>
-              <ActionIcon>
+              </Anchor>
-                <Link />
+            )}
-              </ActionIcon>
+          </Group>
-            </Anchor>
-          )}
           {media.artist && (
             <Text
               style={{
                 textAlign: 'center',
-                color: '#a0aec0',
+                color: 'gray',
               }}
             >
               New release from {media.artist}
@@ -59,7 +57,7 @@ function MediaDisplay(props: { media: IMedia }) {
             <Text
               style={{
                 textAlign: 'center',
-                color: '#a0aec0',
+                color: 'gray',
               }}
             >
               Season {media.seasonNumber} episode {media.episodeNumber}
@@ -93,7 +91,6 @@ export function ReadarrMediaDisplay(props: any) {
   }
   const baseUrl = new URL(readarr.url).origin;
   // Remove '/' from the end of the lidarr url
-  console.log(poster);
   const fullLink = `${baseUrl}${poster.url}`;
   // Return a movie poster containting the title and the description
   return (
@@ -121,7 +118,7 @@ export function LidarrMediaDisplay(props: any) {
   }
   const baseUrl = new URL(lidarr.url).origin;
   // Remove '/' from the end of the lidarr url
-  const fullLink = `${baseUrl}${poster.url}`;
+  const fullLink = poster ? `${baseUrl}${poster.url}` : undefined;
   // Return a movie poster containting the title and the description
   return (
     <MediaDisplay

src/components/modules/common/index.ts

@@ -0,0 +1 @@
+export * from './MediaDisplay';

src/components/modules/date/DateModule.tsx

@@ -1,7 +1,7 @@
 import { Group, Text, Title } from '@mantine/core';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
-import { Clock } from 'tabler-icons-react';
+import { IconClock as Clock } from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 
@@ -32,7 +32,7 @@ export default function DateComponent(props: any) {
   }, []);
 
   return (
-    <Group p="sm" direction="column">
+    <Group p="sm" spacing="xs" direction="column">
       <Title>{dayjs(date).format(formatString)}</Title>
       <Text size="xl">{dayjs(date).format('dddd, MMMM D')}</Text>
     </Group>

src/components/modules/downloads/DownloadsModule.tsx

@@ -0,0 +1,142 @@
+import { Table, Text, Tooltip, Title, Group, Progress, Skeleton, ScrollArea } from '@mantine/core';
+import { IconDownload as Download } from '@tabler/icons';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { NormalizedTorrent } from '@ctrl/shared-torrent';
+import { IModule } from '../modules';
+import { useConfig } from '../../../tools/state';
+import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
+
+export const DownloadsModule: IModule = {
+  title: 'Torrent',
+  description: 'Show the current download speed of supported services',
+  icon: Download,
+  component: DownloadComponent,
+  options: {
+    hidecomplete: {
+      name: 'Hide completed torrents',
+      value: false,
+    },
+  },
+};
+
+export default function DownloadComponent() {
+  const { config } = useConfig();
+  const qBittorrentService = config.services
+    .filter((service) => service.type === 'qBittorrent')
+    .at(0);
+  const delugeService = config.services.filter((service) => service.type === 'Deluge').at(0);
+  const hideComplete: boolean =
+    (config?.modules?.[DownloadsModule.title]?.options?.hidecomplete?.value as boolean) ?? false;
+
+  const [delugeTorrents, setDelugeTorrents] = useState<NormalizedTorrent[]>([]);
+  const [qBittorrentTorrents, setqBittorrentTorrents] = useState<NormalizedTorrent[]>([]);
+
+  useEffect(() => {
+    if (qBittorrentService) {
+      setInterval(() => {
+        axios
+          .post('/api/modules/downloads?dlclient=qbit', { ...qBittorrentService })
+          .then((res) => {
+            setqBittorrentTorrents(res.data.torrents);
+          });
+      }, 3000);
+    }
+    if (delugeService) {
+      setInterval(() => {
+        axios.post('/api/modules/downloads?dlclient=deluge', { ...delugeService }).then((res) => {
+          setDelugeTorrents(res.data.torrents);
+        });
+      }, 3000);
+    }
+  }, [config.modules]);
+
+  if (!qBittorrentService && !delugeService) {
+    return (
+      <Group direction="column">
+        <Title order={3}>No supported download clients found!</Title>
+        <Group>
+          <Text>Add a download service to view your current downloads...</Text>
+          <AddItemShelfButton />
+        </Group>
+      </Group>
+    );
+  }
+
+  if (qBittorrentTorrents.length === 0 && delugeTorrents.length === 0) {
+    return (
+      <>
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+      </>
+    );
+  }
+
+  const ths = (
+    <tr>
+      <th>Name</th>
+      <th>Download</th>
+      <th>Upload</th>
+      <th>Progress</th>
+    </tr>
+  );
+  // Loop over qBittorrent torrents merging with deluge torrents
+  const torrents: NormalizedTorrent[] = [];
+  delugeTorrents.forEach((delugeTorrent) =>
+    torrents.push({ ...delugeTorrent, progress: delugeTorrent.progress / 100 })
+  );
+  qBittorrentTorrents.forEach((torrent) => torrents.push(torrent));
+  const rows = torrents.map((torrent) => {
+    if (torrent.progress === 1 && hideComplete) {
+      return [];
+    }
+    const downloadSpeed = torrent.downloadSpeed / 1024 / 1024;
+    const uploadSpeed = torrent.uploadSpeed / 1024 / 1024;
+    return (
+      <tr key={torrent.id}>
+        <td>
+          <Tooltip position="top" label={torrent.name}>
+            <Text
+              style={{
+                maxWidth: '30vw',
+              }}
+              size="xs"
+              lineClamp={1}
+            >
+              {torrent.name}
+            </Text>
+          </Tooltip>
+        </td>
+        <td>
+          <Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
+        </td>
+        <td>
+          <Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
+        </td>
+        <td>
+          <Text>{(torrent.progress * 100).toFixed(1)}%</Text>
+          <Progress
+            radius="lg"
+            color={torrent.progress === 1 ? 'green' : 'blue'}
+            value={torrent.progress * 100}
+            size="lg"
+          />
+        </td>
+      </tr>
+    );
+  });
+  return (
+    <Group noWrap grow direction="column">
+      <Title order={4}>Your torrents</Title>
+      <ScrollArea sx={{ height: 300 }}>
+        <Table highlightOnHover>
+          <thead>{ths}</thead>
+          <tbody>{rows}</tbody>
+        </Table>
+      </ScrollArea>
+    </Group>
+  );
+}

src/components/modules/downloads/TotalDownloadsModule.tsx

@@ -0,0 +1,211 @@
+import { Text, Title, Group, useMantineTheme, Box, Card, ColorSwatch } from '@mantine/core';
+import { IconDownload as Download } from '@tabler/icons';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { NormalizedTorrent } from '@ctrl/shared-torrent';
+import { linearGradientDef } from '@nivo/core';
+import { Datum, ResponsiveLine } from '@nivo/line';
+import { useListState } from '@mantine/hooks';
+import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
+import { useConfig } from '../../../tools/state';
+import { IModule } from '../modules';
+
+/**
+ * Format bytes as human-readable text.
+ *
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ *
+ * @return Formatted string.
+ */
+function humanFileSize(initialBytes: number, si = true, dp = 1) {
+  const thresh = si ? 1000 : 1024;
+  let bytes = initialBytes;
+
+  if (Math.abs(bytes) < thresh) {
+    return `${bytes} B`;
+  }
+
+  const units = si
+    ? ['kb', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+    : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+  let u = -1;
+  const r = 10 ** dp;
+
+  do {
+    bytes /= thresh;
+    u += 1;
+  } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+
+  return `${bytes.toFixed(dp)} ${units[u]}`;
+}
+
+export const TotalDownloadsModule: IModule = {
+  title: 'Download Speed',
+  description: 'Show the current download speed of supported services',
+  icon: Download,
+  component: TotalDownloadsComponent,
+};
+
+interface torrentHistory {
+  x: number;
+  up: number;
+  down: number;
+}
+
+export default function TotalDownloadsComponent() {
+  const { config } = useConfig();
+  const qBittorrentService = config.services
+    .filter((service) => service.type === 'qBittorrent')
+    .at(0);
+  const delugeService = config.services.filter((service) => service.type === 'Deluge').at(0);
+
+  const [delugeTorrents, setDelugeTorrents] = useState<NormalizedTorrent[]>([]);
+  const [torrentHistory, torrentHistoryHandlers] = useListState<torrentHistory>([]);
+  const [qBittorrentTorrents, setqBittorrentTorrents] = useState<NormalizedTorrent[]>([]);
+
+  const torrents: NormalizedTorrent[] = [];
+  delugeTorrents.forEach((delugeTorrent) =>
+    torrents.push({ ...delugeTorrent, progress: delugeTorrent.progress / 100 })
+  );
+  qBittorrentTorrents.forEach((torrent) => torrents.push(torrent));
+
+  const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
+  const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      // Get the current download speed of qBittorrent.
+      if (qBittorrentService) {
+        axios
+          .post('/api/modules/downloads?dlclient=qbit', { ...qBittorrentService })
+          .then((res) => {
+            setqBittorrentTorrents(res.data.torrents);
+          });
+        if (delugeService) {
+          axios.post('/api/modules/downloads?dlclient=deluge', { ...delugeService }).then((res) => {
+            setDelugeTorrents(res.data.torrents);
+          });
+        }
+      }
+    }, 1000);
+  }, [config.modules]);
+
+  useEffect(() => {
+    torrentHistoryHandlers.append({
+      x: Date.now(),
+      down: totalDownloadSpeed,
+      up: totalUploadSpeed,
+    });
+  }, [totalDownloadSpeed, totalUploadSpeed]);
+
+  if (!qBittorrentService && !delugeService) {
+    return (
+      <Group direction="column">
+        <Title order={4}>No supported download clients found!</Title>
+        <Group noWrap>
+          <Text>Add a download service to view your current downloads...</Text>
+          <AddItemShelfButton />
+        </Group>
+      </Group>
+    );
+  }
+
+  const theme = useMantineTheme();
+  // Load the last 10 values from the history
+  const history = torrentHistory.slice(-10);
+  const chartDataUp = history.map((load, i) => ({
+    x: load.x,
+    y: load.up,
+  })) as Datum[];
+  const chartDataDown = history.map((load, i) => ({
+    x: load.x,
+    y: load.down,
+  })) as Datum[];
+
+  return (
+    <Group noWrap direction="column" grow>
+      <Title order={4}>Current download speed</Title>
+      <Group direction="column">
+        <Group>
+          <ColorSwatch size={12} color={theme.colors.green[5]} />
+          <Text>Download: {humanFileSize(totalDownloadSpeed)}/s</Text>
+        </Group>
+        <Group>
+          <ColorSwatch size={12} color={theme.colors.blue[5]} />
+          <Text>Upload: {humanFileSize(totalUploadSpeed)}/s</Text>
+        </Group>
+      </Group>
+      <Box
+        style={{
+          height: 200,
+          width: '100%',
+        }}
+      >
+        <ResponsiveLine
+          isInteractive
+          enableSlices="x"
+          sliceTooltip={({ slice }) => {
+            const Download = slice.points[0].data.y as number;
+            const Upload = slice.points[1].data.y as number;
+            // Get the number of seconds since the last update.
+            const seconds = (Date.now() - (slice.points[0].data.x as number)) / 1000;
+            // Round to the nearest second.
+            const roundedSeconds = Math.round(seconds);
+            return (
+              <Card p="sm" radius="md" withBorder>
+                <Text size="md">{roundedSeconds} seconds ago</Text>
+                <Card.Section p="sm">
+                  <Group direction="column">
+                    <Group>
+                      <ColorSwatch size={10} color={theme.colors.green[5]} />
+                      <Text size="md">Download: {humanFileSize(Download)}</Text>
+                    </Group>
+                    <Group>
+                      <ColorSwatch size={10} color={theme.colors.blue[5]} />
+                      <Text size="md">Upload: {humanFileSize(Upload)}</Text>
+                    </Group>
+                  </Group>
+                </Card.Section>
+              </Card>
+            );
+          }}
+          data={[
+            {
+              id: 'downloads',
+              data: chartDataUp,
+            },
+            {
+              id: 'uploads',
+              data: chartDataDown,
+            },
+          ]}
+          curve="monotoneX"
+          yFormat=" >-.2f"
+          axisTop={null}
+          axisRight={null}
+          enablePoints={false}
+          animate={false}
+          enableGridX={false}
+          enableGridY={false}
+          enableArea
+          defs={[
+            linearGradientDef('gradientA', [
+              { offset: 0, color: 'inherit' },
+              { offset: 100, color: 'inherit', opacity: 0 },
+            ]),
+          ]}
+          fill={[{ match: '*', id: 'gradientA' }]}
+          colors={[
+            // Blue
+            theme.colors.blue[5],
+            // Green
+            theme.colors.green[5],
+          ]}
+        />
+      </Box>
+    </Group>
+  );
+}

src/components/modules/downloads/index.ts

@@ -0,0 +1,2 @@
+export { DownloadsModule } from './DownloadsModule';
+export { TotalDownloadsModule } from './TotalDownloadsModule';

src/components/modules/index.ts

@@ -3,3 +3,5 @@ export * from './calendar';
 export * from './search';
 export * from './ping';
 export * from './weather';
+export * from './downloads';
+export * from './system';

src/components/modules/moduleWrapper.tsx

@@ -2,13 +2,9 @@ import { Button, Card, Group, Menu, Switch, TextInput, useMantineTheme } from '@
 import { useConfig } from '../../tools/state';
 import { IModule } from './modules';
 
-export function ModuleWrapper(props: any) {
+function getItems(module: IModule) {
-  const { module }: { module: IModule } = props;
   const { config, setConfig } = useConfig();
   const enabledModules = config.modules ?? {};
-  // Remove 'Module' from enabled modules titles
-  const isShown = enabledModules[module.title]?.enabled ?? false;
-  const theme = useMantineTheme();
   const items: JSX.Element[] = [];
   if (module.options) {
     const keys = Object.keys(module.options);
@@ -33,7 +29,7 @@ export function ModuleWrapper(props: any) {
                     options: {
                       ...config.modules[module.title].options,
                       [keys[index]]: {
-                        ...config.modules[module.title].options[keys[index]],
+                        ...config.modules[module.title].options?.[keys[index]],
                         value: (e.target as any)[0].value,
                       },
                     },
@@ -90,11 +86,23 @@ export function ModuleWrapper(props: any) {
       }
     });
   }
+  return items;
+}
+
+export function ModuleWrapper(props: any) {
+  const { module }: { module: IModule } = props;
+  const { config, setConfig } = useConfig();
+  const enabledModules = config.modules ?? {};
+  // Remove 'Module' from enabled modules titles
+  const isShown = enabledModules[module.title]?.enabled ?? false;
+  const theme = useMantineTheme();
+  const items: JSX.Element[] = getItems(module);
+
   if (!isShown) {
     return null;
   }
   return (
-    <Card hidden={!isShown} mx="sm" withBorder radius="lg" shadow="sm">
+    <Card {...props} hidden={!isShown} withBorder radius="lg" shadow="sm">
       {module.options && (
         <Menu
           size="lg"
@@ -109,8 +117,8 @@ export function ModuleWrapper(props: any) {
               right: 15,
             },
             body: {
-              backgroundColor:
+              // Add shadow and elevation to the body
-                theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+              boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.05)',
             },
           }}
         >

src/components/modules/ping/PingModule.tsx

@@ -2,7 +2,7 @@ import { Indicator, Tooltip } from '@mantine/core';
 import axios from 'axios';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
-import { Plug } from 'tabler-icons-react';
+import { IconPlug as Plug } from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 

src/components/modules/search/SearchModule.tsx

@@ -1,7 +1,11 @@
 import { TextInput, Kbd, createStyles, Text, Popover } from '@mantine/core';
 import { useForm, useHotkeys } from '@mantine/hooks';
 import { useRef, useState } from 'react';
-import { Search, BrandYoutube, Download } from 'tabler-icons-react';
+import {
+  IconSearch as Search,
+  IconBrandYoutube as BrandYoutube,
+  IconDownload as Download,
+} from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 
@@ -112,7 +116,7 @@ export default function SearchBar(props: any) {
         }
       >
         <Text>
-          tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube
+          Tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube
           or for a Torrent respectively.
         </Text>
       </Popover>

src/components/modules/system/SystemModule.tsx

@@ -0,0 +1,64 @@
+import {
+  Center,
+  Group,
+  RingProgress,
+  Title,
+  useMantineTheme,
+} from '@mantine/core';
+import { IconCpu } from '@tabler/icons';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import si from 'systeminformation';
+import { useListState } from '@mantine/hooks';
+import { IModule } from '../modules';
+
+export const SystemModule: IModule = {
+  title: 'System info',
+  description: 'Show the current CPU usage and memory usage',
+  icon: IconCpu,
+  component: SystemInfo,
+};
+
+interface ApiResponse {
+  cpu: si.Systeminformation.CpuData;
+  os: si.Systeminformation.OsData;
+  memory: si.Systeminformation.MemData;
+  load: si.Systeminformation.CurrentLoadData;
+}
+
+export default function SystemInfo(args: any) {
+  const [data, setData] = useState<ApiResponse>();
+
+  // Refresh data every second
+  useEffect(() => {
+    setInterval(() => {
+      axios.get('/api/modules/systeminfo').then((res) => setData(res.data));
+    }, 1000);
+  }, [args]);
+
+  // Update data every time data changes
+  const [cpuLoadHistory, cpuLoadHistoryHandlers] =
+    useListState<si.Systeminformation.CurrentLoadData>([]);
+
+  // useEffect(() => {
+
+  // }, [data]);
+
+  const theme = useMantineTheme();
+  const currentLoad = data?.load?.currentLoad ?? 0;
+
+  return (
+    <Center>
+      <Group p="sm" direction="column" align="center">
+        <Title order={3}>Current CPU load</Title>
+        <RingProgress
+          size={150}
+          label={<Center>{`${currentLoad.toFixed(2)}%`}</Center>}
+          thickness={15}
+          roundCaps
+          sections={[{ value: currentLoad ?? 0, color: 'cyan' }]}
+        />
+      </Group>
+    </Center>
+  );
+}

src/components/modules/system/index.ts

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

src/components/modules/weather/WeatherModule.tsx

@@ -2,17 +2,17 @@ import { Group, Space, Title, Tooltip } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import {
-  ArrowDownRight,
+  IconArrowDownRight as ArrowDownRight,
-  ArrowUpRight,
+  IconArrowUpRight as ArrowUpRight,
-  Cloud,
+  IconCloud as Cloud,
-  CloudFog,
+  IconCloudFog as CloudFog,
-  CloudRain,
+  IconCloudRain as CloudRain,
-  CloudSnow,
+  IconCloudSnow as CloudSnow,
-  CloudStorm,
+  IconCloudStorm as CloudStorm,
-  QuestionMark,
+  IconQuestionMark as QuestionMark,
-  Snowflake,
+  IconSnowflake as Snowflake,
-  Sun,
+  IconSun as Sun,
-} from 'tabler-icons-react';
+} from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 import { WeatherResponse } from './WeatherInterface';
@@ -163,7 +163,7 @@ export default function WeatherComponent(props: any) {
     return isFahrenheit ? `${(value * (9 / 5)).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
   }
   return (
-    <Group position="left" direction="column">
+    <Group p="sm" spacing="xs" direction="column">
       <Title>{usePerferedUnit(weather.current_weather.temperature)}</Title>
       <Group spacing={0}>
         <WeatherIcon code={weather.current_weather.weathercode} />

src/pages/_app.tsx

@@ -9,6 +9,7 @@ import { useHotkeys } from '@mantine/hooks';
 import Layout from '../components/layout/Layout';
 import { ConfigProvider } from '../tools/state';
 import { theme } from '../tools/theme';
+import { styles } from '../tools/styles';
 
 export default function App(props: AppProps & { colorScheme: ColorScheme }) {
   const { Component, pageProps } = props;
@@ -35,10 +36,13 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
             ...theme,
             colorScheme,
           }}
+          styles={{
+            ...styles,
+          }}
           withGlobalStyles
           withNormalizeCSS
         >
-          <NotificationsProvider limit={4} position="top-right">
+          <NotificationsProvider limit={4} position="bottom-left">
             <ConfigProvider>
               <Layout>
                 <Component {...pageProps} />

src/pages/api/modules/calendar.ts

@@ -0,0 +1,67 @@
+import axios from 'axios';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { serviceItem } from '../../../tools/types';
+
+async function Post(req: NextApiRequest, res: NextApiResponse) {
+  // Parse req.body as a ServiceItem
+  const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
+  const lastMonth = new Date(new Date().setMonth(new Date().getMonth() - 2)).toISOString();
+  const TypeToUrl: { service: string; url: string }[] = [
+    {
+      service: 'sonarr',
+      url: '/api/calendar',
+    },
+    {
+      service: 'radarr',
+      url: '/api/v3/calendar',
+    },
+    {
+      service: 'lidarr',
+      url: '/api/v1/calendar',
+    },
+    {
+      service: 'readarr',
+      url: '/api/v1/calendar',
+    },
+  ];
+  const service: serviceItem = req.body;
+  const { type } = req.query;
+  if (!type) {
+    return res.status(400).json({
+      message: 'Missing required parameter in url: type',
+    });
+  }
+  if (!service) {
+    return res.status(400).json({
+      message: 'Missing required parameter in body: service',
+    });
+  }
+  // Match the type to the correct url
+  const url = TypeToUrl.find((x) => x.service === type);
+  if (!url) {
+    return res.status(400).json({
+      message: 'Invalid type',
+    });
+  }
+  // Get the origin URL
+  const { origin } = new URL(service.url);
+  const pined = `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`;
+  const data = await axios.get(
+    `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`
+  );
+  return res.status(200).json(data.data);
+  // // Make a request to the URL
+  // const response = await axios.get(url);
+  // // Return the response
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'POST') {
+    return Post(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/api/modules/downloads.ts

@@ -0,0 +1,51 @@
+import { Deluge } from '@ctrl/deluge';
+import { QBittorrent } from '@ctrl/qbittorrent';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+async function Post(req: NextApiRequest, res: NextApiResponse) {
+  // Get the type of service from the request url
+  const { dlclient } = req.query;
+  const { body } = req;
+  // Get login, password and url from the body
+  const { username, password, url } = body;
+  if (!dlclient || (!username && !password) || !url) {
+    return res.status(400).json({
+      error: 'Wrong request',
+    });
+  }
+  let client: Deluge | QBittorrent;
+  switch (dlclient) {
+    case 'qbit':
+      client = new QBittorrent({
+        baseUrl: new URL(url).origin,
+        username,
+        password,
+      });
+      break;
+    case 'deluge':
+      client = new Deluge({
+        baseUrl: new URL(url).origin,
+        password,
+      });
+      break;
+    default:
+      return res.status(400).json({
+        error: 'Wrong request',
+      });
+  }
+  const data = await client.getAllData();
+  res.status(200).json({
+    torrents: data.torrents,
+  });
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'POST') {
+    return Post(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/api/modules/systeminfo.ts

@@ -0,0 +1,30 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import si from 'systeminformation';
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  const [osInfo, cpuInfo, memInfo, cpuLoad] = await Promise.all([
+    si.osInfo(),
+    si.cpu(),
+    si.mem(),
+    si.currentLoad(),
+  ]);
+
+  const sysinfo = {
+    cpu: cpuInfo,
+    os: osInfo,
+    mem: memInfo,
+    load: cpuLoad,
+  };
+  res.status(200).json(sysinfo);
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/index.tsx

@@ -1,13 +1,12 @@
 import { getCookie, setCookies } from 'cookies-next';
 import { GetServerSidePropsContext } from 'next';
-import path from 'path';
-import fs from 'fs';
 import { useEffect } from 'react';
 import AppShelf from '../components/AppShelf/AppShelf';
 import LoadConfigComponent from '../components/Config/LoadConfig';
 import { Config } from '../tools/types';
 import { useConfig } from '../tools/state';
 import { migrateToIdConfig } from '../tools/migrate';
+import { getConfig } from '../tools/getConfig';
 
 export async function getServerSideProps({
   req,
@@ -15,38 +14,20 @@ export async function getServerSideProps({
 }: GetServerSidePropsContext): Promise<{ props: { config: Config } }> {
   let cookie = getCookie('config-name', { req, res });
   if (!cookie) {
-    setCookies('config-name', 'default', { req, res, maxAge: 60 * 60 * 24 * 30 });
+    setCookies('config-name', 'default', {
+      req,
+      res,
+      maxAge: 60 * 60 * 24 * 30,
+      sameSite: 'strict',
+    });
     cookie = 'default';
   }
-  // Check if the config file exists
+  return getConfig(cookie as string);
-  const configPath = path.join(process.cwd(), 'data/configs', `${cookie}.json`);
-  if (!fs.existsSync(configPath)) {
-    return {
-      props: {
-        config: {
-          name: cookie.toString(),
-          services: [],
-          settings: {
-            searchUrl: 'https://www.google.com/search?q=',
-          },
-          modules: {},
-        },
-      },
-    };
-  }
-
-  const config = fs.readFileSync(configPath, 'utf8');
-  // Print loaded config
-  return {
-    props: {
-      config: JSON.parse(config),
-    },
-  };
 }
 
 export default function HomePage(props: any) {
   const { config: initialConfig }: { config: Config } = props;
-  const { config, loadConfig, setConfig, getConfigs } = useConfig();
+  const { setConfig } = useConfig();
   useEffect(() => {
     const migratedConfig = migrateToIdConfig(initialConfig);
     setConfig(migratedConfig);

src/tools/getConfig.ts

@@ -0,0 +1,31 @@
+import path from 'path';
+import fs from 'fs';
+
+export function getConfig(name: string) {
+  // Check if the config file exists
+  const configPath = path.join(process.cwd(), 'data/configs', `${name}.json`);
+  if (!fs.existsSync(configPath)) {
+    return {
+      props: {
+        configName: name,
+        config: {
+          name: name.toString(),
+          services: [],
+          settings: {
+            searchUrl: 'https://www.google.com/search?q=',
+          },
+          modules: {},
+        },
+      },
+    };
+  }
+
+  const config = fs.readFileSync(configPath, 'utf8');
+  // Print loaded config
+  return {
+    props: {
+      configName: name,
+      config: JSON.parse(config),
+    },
+  };
+}

src/tools/state.tsx

@@ -2,7 +2,7 @@
 import { showNotification } from '@mantine/notifications';
 import axios from 'axios';
 import { createContext, ReactNode, useContext, useState } from 'react';
-import { Check, X } from 'tabler-icons-react';
+import { IconCheck as Check, IconX as X } from '@tabler/icons';
 import { Config } from './types';
 
 type configContextType = {
@@ -51,7 +51,7 @@ export function ConfigProvider({ children }: Props) {
   async function loadConfig(configName: string) {
     try {
       const response = await axios.get(`/api/configs/${configName}`);
-      setConfigInternal(response.data);
+      setConfigInternal(JSON.parse(response.data));
       showNotification({
         title: 'Config',
         icon: <Check />,

src/tools/styles.ts

@@ -0,0 +1,12 @@
+import { MantineProviderProps } from '@mantine/core';
+
+export const styles: MantineProviderProps['styles'] = {
+  Checkbox: {
+    input: { cursor: 'pointer' },
+    label: { cursor: 'pointer' },
+  },
+  Switch: {
+    input: { cursor: 'pointer' },
+    label: { cursor: 'pointer' },
+  },
+};

src/tools/theme.ts

@@ -1,3 +1,6 @@
 import { MantineProviderProps } from '@mantine/core';
 
-export const theme: MantineProviderProps['theme'] = {};
+export const theme: MantineProviderProps['theme'] = {
+  primaryColor: 'red',
+  primaryShade: 6,
+};

src/tools/types.ts

@@ -24,6 +24,7 @@ interface ConfigModule {
 export const ServiceTypeList = [
   'Other',
   'Emby',
+  'Deluge',
   'Lidarr',
   'Plex',
   'Radarr',
@@ -34,6 +35,7 @@ export const ServiceTypeList = [
 export type ServiceType =
   | 'Other'
   | 'Emby'
+  | 'Deluge'
   | 'Lidarr'
   | 'Plex'
   | 'Radarr'
@@ -47,5 +49,8 @@ export interface serviceItem {
   type: string;
   url: string;
   icon: string;
+  category?: string;
   apiKey?: string;
+  password?: string;
+  username?: string;
 }

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -15,6 +19,13 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.js"],
+  "include": [
-  "exclude": ["node_modules"]
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "next.config.js"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }