🚑 Merge pull request #301 from ajnart/dev

🚑 Hotfix Docker image with new NextJS version

.dockerignore

@@ -2,5 +2,8 @@ Dockerfile
 .dockerignore
 node_modules
 npm-debug.log
-README.md
+*.md
 .git
+.github
+LICENSE
+docs/

.eslintrc.js

@@ -3,7 +3,6 @@ module.exports = {
     'mantine',
     'plugin:@next/next/recommended',
     'plugin:jest/recommended',
-    'plugin:storybook/recommended',
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended"

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -22,13 +22,3 @@ body:
         - High (App breaking feature)
     validations:
       required: true
-  - type: checkboxes
-    id: idiot-check
-    attributes:
-      label: Please tick the boxes
-      description: Before submitting, please ensure that
-      options:
-        - label: You've read the [docs](https://github.com/ajnart/homarr#readme)
-          required: true
-        - label: You've checked for [duplicate issues](https://github.com/ajnart/homarr/issues)
-          required: true

.github/pull_request_template.md

@@ -14,10 +14,3 @@
 
 ### Screenshot _(if applicable)_
 > If you've introduced any significant UI changes, please include a screenshot.
-
-### Code Quality Checklist _(Please complete)_
-- [ ] All changes are backwards compatible
-- [ ] There are no (new) build warnings or errors
-- [ ] _(If a new config option is added)_ Attribute is outlined in the schema and documented
-- [ ] _(If a new dependency is added)_ Package is essential, and has been checked out for security or performance
-- [ ] Bumps version, if new feature added

.github/workflows/docker.yml

@@ -1,6 +1,8 @@
-name: Master docker CI
-# Workflow to build and publish docker image
-
+name: Master CI
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
 on:
   push:
     branches: [master]
@@ -22,72 +24,46 @@ jobs:
   # Push image to GitHub Packages.
   # See also https://docs.docker.com/docker-hub/builds/
   yarn_install_and_build:
-    # Will run yarn install && yarn build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Setup
-        uses: actions/setup-node@v3
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Get yarn cache directory path
-      # to help speed up build times
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Yarn cache
-      # to help speed up build times
-        uses: actions/cache@v3
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-
-      - name: Nextjs cache
-        uses: actions/cache@v2
-        with:
-        # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
-          path: |
-            ~/.npm
-            ${{ github.workspace }}/.next/cache
-          # Generate a new cache whenever packages or source files change.
-          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 --immutable
-      - run: yarn build
-      - name: Cache build output
-      # to copy needed files to docker build job
-        uses: actions/cache@v2
-        id: restore-build
-        with:
-          path: |
-             ./next.config.js
-             ./pages/
-             ./public/
-             ./.next/static/
-             ./.next/standalone/
-             ./packages.json
-          key: ${{ github.sha }}
-
-  docker_image_build_and_push:
-    needs: [yarn_install_and_build]
     runs-on: ubuntu-latest
     permissions:
       packages: write
       contents: read
     steps:
+
+      - name: Setup
+        uses: actions/setup-node@v3
+
       - name: Checkout
-        uses: actions/checkout@v2
-      - uses: actions/cache@v2
-        id: restore-build
+        uses: actions/checkout@v3
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+      
+      - uses: actions/cache@v3
+        id: yarn-cache
         with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Restore NextJS cache
+        uses: actions/cache@v2
+        with:
+          # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
           path: |
-             ./next.config.js
-             ./pages/
-             ./public/
-             ./.next/static/
-             ./.next/standalone/
-             ./packages.json
-          key: ${{ github.sha }}
+            ${{ github.workspace }}/.next/cache
+          # Generate a new cache whenever packages or source files change.
+          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 --immutable
+
+      - run: yarn build
+
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v4
@@ -98,10 +74,13 @@ jobs:
           tags: |
             type=raw,value=latest
             type=pep440,pattern={{version}}
+
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v2
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
+
       - name: Login to GHCR
         uses: docker/login-action@v2
         with:
@@ -117,3 +96,5 @@ jobs:
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/docker_dev.yml

@@ -16,7 +16,7 @@ on:
   workflow_dispatch:
     inputs:
       tags:
-        requierd: true
+        required: true
         description: 'Tags to deploy to'
 
 env:
@@ -30,6 +30,9 @@ jobs:
   # See also https://docs.docker.com/docker-hub/builds/
   yarn_install_and_build:
     runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
     steps:
 
       - name: Setup
@@ -40,67 +43,32 @@ jobs:
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Yarn cache
-        uses: actions/cache@v3
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+      
+      - uses: actions/cache@v3
+        id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
-      - name: Nextjs cache
+      - name: Restore NextJS cache
         uses: actions/cache@v2
         with:
-        # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
+          # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
           path: |
-            ~/.npm
             ${{ github.workspace }}/.next/cache
           # Generate a new cache whenever packages or source files change.
           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') }}-
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
 
       - run: yarn install --immutable
+
       - run: yarn build
 
-      - name: Cache build output
-        uses: actions/cache@v2
-        id: restore-build
-        with:
-          path: |
-             ./next.config.js
-             ./pages/
-             ./public/
-             ./.next/static/
-             ./.next/standalone/
-             ./packages.json
-          key: ${{ github.sha }}
-
-  docker_image_build_and_push:
-    needs: [yarn_install_and_build]
-    runs-on: ubuntu-latest
-    permissions:
-      packages: write
-      contents: read
-    steps:
-
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - uses: actions/cache@v2
-        id: restore-build
-        with:
-          path: |
-             ./next.config.js
-             ./pages/
-             ./public/
-             ./.next/static/
-             ./.next/standalone/
-             ./packages.json
-          key: ${{ github.sha }}
-
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v4
@@ -134,3 +102,5 @@ jobs:
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.storybook/main.js

@@ -1,30 +0,0 @@
-module.exports = {
-  stories: ['../src/components/**/*.story.mdx', '../src/components/**/*.story.*'],
-  addons: [
-    '@storybook/addon-links',
-    'storybook-addon-mock/register',
-    '@storybook/addon-essentials',
-  ],
-  typescript: {
-    check: false,
-    reactDocgen: false,
-  },
-  framework: '@storybook/react',
-  features: { emotionAlias: false },
-  webpackFinal: async (config, { configType }) => {
-    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-    // You can change the configuration based on that.
-    // 'PRODUCTION' is used when building the static version of storybook.
-
-    // https://github.com/polkadot-js/extension/issues/621#issuecomment-759341776
-    // framer-motion uses the .mjs notation and we need to include it so that webpack will
-    // transpile it for us correctly (enables using a CJS module inside an ESM).
-    config.module.rules.push({
-      test: /\.mjs$/,
-      include: /node_modules/,
-      type: 'javascript/auto',
-    });
-    // Return the altered config
-    return config;
-  },
-};

.storybook/preview.tsx

@@ -1,16 +0,0 @@
-import { MantineProvider, ColorSchemeProvider } from '@mantine/core';
-import { NotificationsProvider } from '@mantine/notifications';
-
-export const parameters = { layout: 'fullscreen' };
-
-function ThemeWrapper(props: { children: React.ReactNode }) {
-  return (
-    <ColorSchemeProvider colorScheme="light" toggleColorScheme={() => {}}>
-      <MantineProvider withGlobalStyles withNormalizeCSS>
-        <NotificationsProvider>{props.children}</NotificationsProvider>
-      </MantineProvider>
-    </ColorSchemeProvider>
-  );
-}
-
-export const decorators = [(renderStory: Function) => <ThemeWrapper>{renderStory()}</ThemeWrapper>];

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Next.js: debug server-side",
+			"type": "node-terminal",
+			"request": "launch",
+			"command": "yarn dev"
+		},
+		{
+			"name": "Next.js: debug client-side",
+			"type": "chrome",
+			"request": "launch",
+			"url": "http://localhost:3000"
+		},
+		{
+			"name": "Next.js: debug full stack",
+			"type": "node-terminal",
+			"request": "launch",
+			"command": "yarn dev",
+			"serverReadyAction": {
+				"pattern": "started server on .+, url: (https?://.+)",
+				"uriFormat": "%s",
+				"action": "debugWithChrome"
+			}
+		}
+	]
+}

Dockerfile

@@ -1,13 +1,23 @@
 FROM node:16-alpine
 WORKDIR /app
+
+RUN apk add tzdata
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
 ENV NODE_ENV production
-COPY /next.config.js ./
-COPY  /public ./public
-COPY /package.json ./package.json
-# Automatically leverage output traces to reduce image size. https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY /.next/standalone ./
-COPY /.next/static ./.next/static
+
+COPY next.config.js ./
+COPY public ./public
+COPY package.json ./package.json
+
+# Automatically leverage output traces to reduce image size 
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY .next/standalone ./
+COPY .next/static ./.next/static
+
 EXPOSE 7575
+
 ENV PORT 7575
-VOLUME /app/data/configs
+
 CMD ["node", "server.js"]

README.md

@@ -33,7 +33,7 @@ Homarr is a simple and lightweight homepage for your server, that helps you easi
 
 It integrates with the services you use to display information on the homepage (E.g. Show upcoming Sonarr/Radarr releases).
 
-For a full list of integrations look at: [wiki/integrations](#).
+For a full list of integrations look at: [wiki/integrations](https://github.com/ajnart/homarr/wiki/Integrations)
 
 If you have any questions about Homarr or want to share information with us, please go to one of the following places:
 
@@ -198,7 +198,4 @@ SOFTWARE.
   <i>Thank you for visiting! <b>For more information <a href="https://github.com/ajnart/homarr/wiki">read the wiki!</a></b></i>
   <br/>
   <br/>
-  <a href="https://trackgit.com">
-    <img src="https://us-central1-trackgit-analytics.cloudfunctions.net/token/ping/l3khzc3a3pexzw5w5whl" alt="trackgit-views" />
-  </a>
 </p>

data/configs/default.json

@@ -18,6 +18,9 @@
     },
     "Date": {
       "enabled": false
+    },
+    "Docker": {
+      "enabled": true
     }
   }
 }

data/constants.ts

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

next.config.js

@@ -6,11 +6,5 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 
 module.exports = withBundleAnalyzer({
   reactStrictMode: false,
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  experimental: {
-    outputStandalone: true,
-  },
-  basePath: env.BASE_URL,
+  output: 'standalone',
 });

package.json

@@ -1,7 +1,8 @@
 {
 	"name": "homarr",
-	"version": "0.6.0",
+	"version": "0.8.2",
 	"description": "Homarr - A homepage for your server.",
+	"license": "MIT",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/ajnart/homarr"
@@ -19,69 +20,63 @@
 		"prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
 		"prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
 		"test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
-		"storybook": "start-storybook -p 7001",
-		"storybook:build": "build-storybook",
 		"ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
 	},
 	"dependencies": {
-		"@ctrl/deluge": "^4.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",
+		"@ctrl/deluge": "^4.1.0",
+		"@ctrl/qbittorrent": "^4.1.0",
+		"@ctrl/shared-torrent": "^4.1.1",
+		"@ctrl/transmission": "^4.1.1",
+		"@dnd-kit/core": "^6.0.5",
+		"@dnd-kit/sortable": "^7.0.1",
 		"@dnd-kit/utilities": "^3.2.0",
-		"@mantine/core": "^4.2.6",
-		"@mantine/dates": "^4.2.6",
-		"@mantine/dropzone": "^4.2.6",
-		"@mantine/form": "^4.2.6",
-		"@mantine/hooks": "^4.2.6",
-		"@mantine/next": "^4.2.6",
-		"@mantine/notifications": "^4.2.6",
-		"@mantine/prism": "^4.2.6",
+		"@mantine/core": "^4.2.12",
+		"@mantine/dates": "^4.2.12",
+		"@mantine/dropzone": "^4.2.12",
+		"@mantine/form": "^4.2.12",
+		"@mantine/hooks": "^4.2.12",
+		"@mantine/next": "^4.2.12",
+		"@mantine/notifications": "^4.2.12",
+		"@mantine/prism": "^4.2.12",
 		"@nivo/core": "^0.79.0",
 		"@nivo/line": "^0.79.1",
-		"@tabler/icons": "^1.68.0",
+		"@tabler/icons": "^1.76.0",
 		"axios": "^0.27.2",
-		"cookies-next": "^2.0.4",
-		"dayjs": "^1.11.2",
-		"framer-motion": "^6.3.1",
+		"cookies-next": "^2.1.1",
+		"dayjs": "^1.11.4",
+		"dockerode": "^3.3.2",
+		"framer-motion": "^6.5.1",
 		"js-file-download": "^0.4.12",
-		"next": "12.1.6",
-		"prism-react-renderer": "^1.3.1",
-		"react": "^17.0.1",
-		"react-dom": "^17.0.1",
-		"systeminformation": "^5.11.16",
+		"next": "12.2.0",
+		"prism-react-renderer": "^1.3.5",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"systeminformation": "^5.12.1",
 		"uuid": "^8.3.2"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.17.8",
-		"@next/bundle-analyzer": "^12.1.4",
-		"@next/eslint-plugin-next": "^12.1.4",
-		"@storybook/react": "^6.5.4",
-		"@types/node": "^17.0.23",
-		"@types/react": "17.0.43",
+		"@next/bundle-analyzer": "12.2.0",
+		"@next/eslint-plugin-next": "12.2.0",
+		"@types/dockerode": "^3.3.9",
+		"@types/node": "^18.0.6",
+		"@types/react": "^18.0.15",
 		"@types/uuid": "^8.3.4",
-		"@typescript-eslint/eslint-plugin": "^5.16.0",
-		"@typescript-eslint/parser": "^5.16.0",
-		"eslint": "^8.11.0",
+		"@typescript-eslint/eslint-plugin": "^5.30.7",
+		"@typescript-eslint/parser": "^5.30.7",
+		"eslint": "^8.20.0",
 		"eslint-config-airbnb": "^19.0.4",
-		"eslint-config-airbnb-typescript": "^16.1.0",
-		"eslint-config-mantine": "1.1.0",
-		"eslint-plugin-import": "^2.25.4",
-		"eslint-plugin-jest": "^26.1.3",
-		"eslint-plugin-jsx-a11y": "^6.5.1",
-		"eslint-plugin-react": "^7.29.4",
-		"eslint-plugin-react-hooks": "^4.3.0",
-		"eslint-plugin-storybook": "^0.5.11",
-		"eslint-plugin-testing-library": "^5.2.0",
+		"eslint-config-airbnb-typescript": "^17.0.0",
+		"eslint-config-mantine": "^2.0.0",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-jest": "^26.6.0",
+		"eslint-plugin-jsx-a11y": "^6.6.1",
+		"eslint-plugin-react": "^7.30.1",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"eslint-plugin-testing-library": "^5.5.1",
 		"eslint-plugin-unused-imports": "^2.0.0",
-		"jest": "^28.1.0",
-		"prettier": "^2.6.2",
-		"require-from-string": "^2.0.2",
-		"typescript": "4.6.4"
-	},
-	"resolutions": {
-		"@types/react": "17.0.30"
+		"jest": "^28.1.3",
+		"prettier": "^2.7.1",
+		"typescript": "^4.7.4"
 	},
 	"packageManager": "yarn@3.2.1"
 }

src/components/AppShelf/AddAppShelfItem.tsx

@@ -1,24 +1,29 @@
 import {
-  Modal,
+  ActionIcon,
+  Anchor,
+  Button,
   Center,
   Group,
-  TextInput,
   Image,
-  Button,
-  Select,
   LoadingOverlay,
-  ActionIcon,
-  Tooltip,
+  Modal,
+  MultiSelect,
+  ScrollArea,
+  Select,
+  Switch,
+  Tabs,
+  TextInput,
   Title,
-  Anchor,
-  Text,
+  Tooltip,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { useState } from 'react';
+import { useDebouncedValue } from '@mantine/hooks';
 import { IconApps as Apps } from '@tabler/icons';
+import { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList } from '../../tools/types';
+import { tryMatchPort, ServiceTypeList, StatusCodes } from '../../tools/types';
+import Tip from '../layout/Tip';
 
 export function AddItemShelfButton(props: any) {
   const [opened, setOpened] = useState(false);
@@ -49,11 +54,13 @@ export function AddItemShelfButton(props: any) {
   );
 }
 
-function MatchIcon(name: string, form: any) {
+function MatchIcon(name: string | undefined, form: any) {
+  if (name === undefined || name === '') return null;
   fetch(
     `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
       .replace(/\s+/g, '-')
-      .toLowerCase()}.png`
+      .toLowerCase()
+      .replace(/^dash\.$/, 'dashdot')}.png`
   ).then((res) => {
     if (res.ok) {
       form.setFieldValue('icon', res.url);
@@ -64,28 +71,13 @@ function MatchIcon(name: string, form: any) {
 }
 
 function MatchService(name: string, form: any) {
-  const service = ServiceTypeList.find((s) => s === name);
+  const service = ServiceTypeList.find((s) => s.toLowerCase() === name.toLowerCase());
   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}`);
-  }
-}
+const DEFAULT_ICON = '/favicon.svg';
 
 export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
   const { setOpened } = props;
@@ -106,22 +98,21 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       type: props.type ?? 'Other',
       category: props.category ?? undefined,
       name: props.name ?? '',
-      icon: props.icon ?? '/favicon.svg',
+      icon: props.icon ?? DEFAULT_ICON,
       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),
+      openedUrl: props.openedUrl ?? (undefined as unknown as string),
+      status: props.status ?? ['200'],
+      newTab: props.newTab ?? true,
     },
     validate: {
       apiKey: () => null,
       // Validate icon with a regex
-      icon: (value: string) => {
-        // Regex to match everything that ends with and icon extension
-        if (!value.match(/\.(png|jpg|jpeg|gif|svg)$/)) {
-          return 'Please enter a valid icon URL';
-        }
-        return null;
-      },
+      icon: (value: string) =>
+        // Disable matching to allow any values
+        null,
       // Validate url with a regex http/https
       url: (value: string) => {
         try {
@@ -131,9 +122,23 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
         }
         return null;
       },
+      status: (value: string[]) => {
+        if (!value.length) {
+          return 'Please select a status code';
+        }
+        return null;
+      },
     },
   });
 
+  const [debounced, cancel] = useDebouncedValue(form.values.name, 250);
+  useEffect(() => {
+    if (form.values.name !== debounced || form.values.icon !== DEFAULT_ICON) return;
+    MatchIcon(form.values.name, form);
+    MatchService(form.values.name, form);
+    tryMatchPort(form.values.name, form);
+  }, [debounced]);
+
   // 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;
@@ -157,6 +162,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       </Center>
       <form
         onSubmit={form.onSubmit(() => {
+          if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) {
+            form.values.status = undefined;
+          }
+          if (form.values.newTab === true) {
+            form.values.newTab = undefined;
+          }
           // If service already exists, update it.
           if (config.services && config.services.find((s) => s.id === form.values.id)) {
             setConfig({
@@ -181,133 +192,171 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           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);
-              MatchIcon(event.currentTarget.value, form);
-              MatchService(event.currentTarget.value, form);
-              MatchPort(event.currentTarget.value, form);
-            }}
-            error={form.errors.name && 'Invalid icon url'}
-          />
+        <Tabs grow>
+          <Tabs.Tab label="Options">
+            <ScrollArea style={{ height: 500 }} scrollbarSize={4}>
+              <Group direction="column" grow>
+                <TextInput
+                  required
+                  label="Service name"
+                  placeholder="Plex"
+                  {...form.getInputProps('name')}
+                />
 
-          <TextInput
-            required
-            label="Icon url"
-            placeholder="https://i.gifer.com/ANPC.gif"
-            {...form.getInputProps('icon')}
-          />
-          <TextInput
-            required
-            label="Service url"
-            placeholder="http://localhost:7575"
-            {...form.getInputProps('url')}
-          />
-          <Select
-            label="Service type"
-            defaultValue="Other"
-            placeholder="Pick one"
-            required
-            searchable
-            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
+                <TextInput
+                  required
+                  label="Icon URL"
+                  placeholder={DEFAULT_ICON}
+                  {...form.getInputProps('icon')}
+                />
+                <TextInput
+                  required
+                  label="Service URL"
+                  placeholder="http://localhost:7575"
+                  {...form.getInputProps('url')}
+                />
+                <TextInput
+                  label="On Click URL"
+                  placeholder="http://sonarr.example.com"
+                  {...form.getInputProps('openedUrl')}
+                />
+                <Select
+                  label="Service type"
+                  defaultValue="Other"
+                  placeholder="Pick one"
+                  required
+                  searchable
+                  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
+                      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'}
+                    />
+                    <Tip>
+                      Get your API key{' '}
+                      <Anchor
+                        target="_blank"
+                        weight="bold"
+                        style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
+                        href={`${hostname}/settings/general`}
+                      >
+                        here.
+                      </Anchor>
+                    </Tip>
+                  </>
+                )}
+                {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
+                      label="Password"
+                      placeholder="password"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+                {form.values.type === 'Transmission' && (
+                  <>
+                    <TextInput
+                      label="Username"
+                      placeholder="admin"
+                      value={form.values.username}
+                      onChange={(event) => {
+                        form.setFieldValue('username', event.currentTarget.value);
+                      }}
+                      error={form.errors.username && 'Invalid username'}
+                    />
+                    <TextInput
+                      label="Password"
+                      placeholder="adminadmin"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+              </Group>
+            </ScrollArea>
+          </Tabs.Tab>
+          <Tabs.Tab label="Advanced Options">
+            <Group direction="column" grow>
+              <MultiSelect
                 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'}
+                label="HTTP Status Codes"
+                data={StatusCodes}
+                placeholder="Select valid status codes"
+                clearButtonLabel="Clear selection"
+                nothingFound="Nothing found"
+                defaultValue={['200']}
+                clearable
+                searchable
+                {...form.getInputProps('status')}
               />
-              <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'}
+              <Switch
+                label="Open service in new tab"
+                defaultChecked={form.values.newTab}
+                {...form.getInputProps('newTab')}
               />
-              <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>
-
+            </Group>
+          </Tabs.Tab>
+        </Tabs>
         <Group grow position="center" mt="xl">
           <Button type="submit">{props.message ?? 'Add service'}</Button>
         </Group>

src/components/AppShelf/AppShelf.story.tsx

@@ -1,27 +0,0 @@
-import { SimpleGrid } from '@mantine/core';
-import AppShelf from './AppShelf';
-import { AppShelfItem } from './AppShelfItem';
-
-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} />;
-export const Ten = (args: any) => (
-  <SimpleGrid>
-    {Array.from(Array(10)).map((_, i) => (
-      <AppShelfItem {...args} key={i} />
-    ))}
-  </SimpleGrid>
-);

src/components/AppShelf/AppShelf.tsx

@@ -1,28 +1,74 @@
 import React, { useState } from 'react';
-import { Grid, Group, Title } from '@mantine/core';
+import { Accordion, createStyles, Grid, Group, Paper, useMantineColorScheme } from '@mantine/core';
 import {
   closestCenter,
   DndContext,
   DragOverlay,
   MouseSensor,
+  TouchSensor,
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
 import { arrayMove, SortableContext } from '@dnd-kit/sortable';
+import { useLocalStorage } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
 
 import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
-import { ModuleWrapper } from '../modules/moduleWrapper';
+import { ModuleMenu, ModuleWrapper } from '../modules/moduleWrapper';
 import { DownloadsModule } from '../modules';
+import DownloadComponent from '../modules/downloads/DownloadsModule';
+
+const useStyles = createStyles((theme, _params) => ({
+  item: {
+    overflow: 'hidden',
+    borderLeft: '3px solid transparent',
+    borderRight: '3px solid transparent',
+    borderBottom: '3px solid transparent',
+    borderRadius: '20px',
+    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    marginTop: theme.spacing.md,
+  },
+
+  control: {
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    borderRadius: theme.spacing.md,
+
+    '&:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    },
+  },
+
+  content: {
+    margin: theme.spacing.md,
+  },
+
+  label: {
+    overflow: 'visible',
+  },
+}));
 
 const AppShelf = (props: any) => {
+  const { classes, cx } = useStyles(props);
+  const [toggledCategories, settoggledCategories] = useLocalStorage({
+    key: 'app-shelf-toggled',
+    // This is a bit of a hack to get the 5 first categories to be toggled on by default
+    defaultValue: { 0: true, 1: true, 2: true, 3: true, 4: true } as Record<string, boolean>,
+  });
   const [activeId, setActiveId] = useState(null);
   const { config, setConfig } = useConfig();
+  const { colorScheme } = useMantineColorScheme();
+
   const sensors = useSensors(
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 500,
+        tolerance: 5,
+      },
+    }),
     useSensor(MouseSensor, {
       // Require the mouse to move by 10 pixels before activating
       activationConstraint: {
-        delay: 250,
+        delay: 500,
         tolerance: 5,
       },
     })
@@ -75,7 +121,14 @@ const AppShelf = (props: any) => {
         <SortableContext items={config.services}>
           <Grid gutter="xl" align="center">
             {filtered.map((service) => (
-              <Grid.Col key={service.id} span={6} xl={2} xs={4} sm={3} md={3}>
+              <Grid.Col
+                key={service.id}
+                span={6}
+                xl={config.settings.appCardWidth || 2}
+                xs={4}
+                sm={3}
+                md={3}
+              >
                 <SortableAppShelfItem service={service} key={service.id} id={service.id} />
               </Grid.Col>
             ))}
@@ -99,26 +152,49 @@ const AppShelf = (props: any) => {
     const noCategory = config.services.filter(
       (e) => e.category === undefined || e.category === null
     );
-
+    const downloadEnabled = config.modules?.[DownloadsModule.title]?.enabled ?? false;
+    // Create an item with 0: true, 1: true, 2: true... For each category
     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}
-        <ModuleWrapper mt="xl" module={DownloadsModule} />
+        <Accordion
+          disableIconRotation
+          classNames={classes}
+          order={2}
+          iconPosition="right"
+          multiple
+          initialState={toggledCategories}
+          onChange={(idx) => settoggledCategories(idx)}
+        >
+          {categoryList.map((category, idx) => (
+            <Accordion.Item key={category} label={category}>
+              {item(category)}
+            </Accordion.Item>
+          ))}
+          {/* Return the item for all services without category */}
+          {noCategory && noCategory.length > 0 ? (
+            <Accordion.Item key="Other" label="Other">
+              {item()}
+            </Accordion.Item>
+          ) : null}
+          {downloadEnabled ? (
+            <Accordion.Item key="Downloads" label="Your downloads">
+              <Paper
+                p="lg"
+                radius="lg"
+                style={{
+                  background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+                ${(config.settings.appOpacity || 100) / 100}`,
+                  borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+                ${(config.settings.appOpacity || 100) / 100}`,
+                }}
+              >
+                <ModuleMenu module={DownloadsModule} />
+                <DownloadComponent />
+              </Paper>
+            </Accordion.Item>
+          ) : null}
+        </Accordion>
       </Group>
     );
   }

src/components/AppShelf/AppShelfItem.tsx

@@ -1,4 +1,13 @@
-import { Text, Card, Anchor, AspectRatio, Image, Center, createStyles } from '@mantine/core';
+import {
+  Text,
+  Card,
+  Anchor,
+  AspectRatio,
+  Image,
+  Center,
+  createStyles,
+  useMantineColorScheme,
+} from '@mantine/core';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
@@ -6,6 +15,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { serviceItem } from '../../tools/types';
 import PingComponent from '../modules/ping/PingModule';
 import AppShelfMenu from './AppShelfMenu';
+import { useConfig } from '../../tools/state';
 
 const useStyles = createStyles((theme) => ({
   item: {
@@ -15,6 +25,9 @@ const useStyles = createStyles((theme) => ({
       boxShadow: `${theme.shadows.md} !important`,
       transform: 'scale(1.05)',
     },
+    [theme.fn.smallerThan('sm')]: {
+      WebkitUserSelect: 'none',
+    },
   },
 }));
 
@@ -38,7 +51,9 @@ export function SortableAppShelfItem(props: any) {
 export function AppShelfItem(props: any) {
   const { service }: { service: serviceItem } = props;
   const [hovering, setHovering] = useState(false);
-  const { classes, theme } = useStyles();
+  const { config } = useConfig();
+  const { colorScheme } = useMantineColorScheme();
+  const { classes } = useStyles();
   return (
     <motion.div
       animate={{
@@ -54,11 +69,22 @@ export function AppShelfItem(props: any) {
         setHovering(false);
       }}
     >
-      <Card withBorder radius="lg" shadow="md" className={classes.item}>
+      <Card
+        withBorder
+        radius="lg"
+        shadow="md"
+        className={classes.item}
+        style={{
+          background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+          borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+        }}
+      >
         <Card.Section>
           <Anchor
-            target="_blank"
-            href={service.url}
+            target={service.newTab === false ? '_top' : '_blank'}
+            href={service.openedUrl ? service.openedUrl : service.url}
             style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
           >
             <Text mt="sm" align="center" lineClamp={1} weight={550}>
@@ -101,12 +127,14 @@ export function AppShelfItem(props: any) {
                   src={service.icon}
                   fit="contain"
                   onClick={() => {
-                    window.open(service.url);
+                    if (service.openedUrl) {
+                      window.open(service.openedUrl, service.newTab === false ? '_top' : '_blank');
+                    } else window.open(service.url, service.newTab === false ? '_top' : '_blank');
                   }}
                 />
               </motion.i>
             </AspectRatio>
-            <PingComponent url={service.url} />
+            <PingComponent url={service.url} status={service.status} />
           </Card.Section>
         </Center>
       </Card>

src/components/AppShelf/AppShelfMenu.tsx

@@ -20,19 +20,7 @@ export default function AppShelfMenu(props: any) {
         onClose={() => setOpened(false)}
         title="Modify a service"
       >
-        <AddAppShelfItemForm
-          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"
-        />
+        <AddAppShelfItemForm setOpened={setOpened} {...service} message="Save service" />
       </Modal>
       <Menu
         position="right"

src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createStyles, Switch, Group, useMantineColorScheme, Kbd } from '@mantine/core';
 import { IconSun as Sun, IconMoonStars as MoonStars } from '@tabler/icons';
+import { useConfig } from '../../tools/state';
 
 const useStyles = createStyles((theme) => ({
   root: {
@@ -29,6 +30,7 @@ const useStyles = createStyles((theme) => ({
 }));
 
 export function ColorSchemeSwitch() {
+  const { config } = useConfig();
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
   const { classes, cx } = useStyles();
 

src/components/Config/ConfigChanger.tsx

@@ -1,5 +1,5 @@
 import { Center, Loader, Select, Tooltip } from '@mantine/core';
-import { setCookies } from 'cookies-next';
+import { setCookie } from 'cookies-next';
 import { useEffect, useState } from 'react';
 import { useConfig } from '../../tools/state';
 
@@ -26,7 +26,10 @@ export default function ConfigChanger() {
       label="Config loader"
       onChange={(e) => {
         loadConfig(e ?? 'default');
-        setCookies('config-name', e ?? 'default', { maxAge: 60 * 60 * 24 * 30 });
+        setCookie('config-name', e ?? 'default', {
+          maxAge: 60 * 60 * 24 * 30,
+          sameSite: 'strict',
+        });
       }}
       data={
         // If config list is empty, return the current config

src/components/Config/LoadConfig.tsx

@@ -10,7 +10,7 @@ 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 { setCookie } from 'cookies-next';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
 import { migrateToIdConfig } from '../../tools/migrate';
@@ -90,7 +90,10 @@ export default function LoadConfigComponent(props: any) {
             icon: <Check />,
             message: undefined,
           });
-          setCookies('config-name', newConfig.name, { maxAge: 60 * 60 * 24 * 30 });
+          setCookie('config-name', newConfig.name, {
+            maxAge: 60 * 60 * 24 * 30,
+            sameSite: 'strict',
+          });
           const migratedConfig = migrateToIdConfig(newConfig);
           setConfig(migratedConfig);
         });

src/components/Config/SaveConfig.tsx

@@ -27,7 +27,7 @@ export default function SaveConfigComponent(props: any) {
     }
   }
   return (
-    <Group>
+    <Group spacing="xs">
       <Modal
         radius="md"
         opened={opened}
@@ -59,10 +59,11 @@ export default function SaveConfigComponent(props: any) {
           </Group>
         </form>
       </Modal>
-      <Button leftIcon={<Download />} variant="outline" onClick={onClick}>
+      <Button size="xs" leftIcon={<Download />} variant="outline" onClick={onClick}>
         Download config
       </Button>
       <Button
+        size="xs"
         leftIcon={<Trash />}
         variant="outline"
         onClick={() => {
@@ -93,7 +94,7 @@ export default function SaveConfigComponent(props: any) {
       >
         Delete config
       </Button>
-      <Button leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
+      <Button size="xs" leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
         Save a copy
       </Button>
     </Group>

src/components/Settings/AdvancedSettings.tsx

@@ -0,0 +1,65 @@
+import { TextInput, Group, Button } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { useConfig } from '../../tools/state';
+import { ColorSelector } from './ColorSelector';
+import { OpacitySelector } from './OpacitySelector';
+import { AppCardWidthSelector } from './AppCardWidthSelector';
+import { ShadeSelector } from './ShadeSelector';
+
+export default function TitleChanger() {
+  const { config, setConfig } = useConfig();
+
+  const form = useForm({
+    initialValues: {
+      title: config.settings.title,
+      logo: config.settings.logo,
+      favicon: config.settings.favicon,
+      background: config.settings.background,
+    },
+  });
+
+  const saveChanges = (values: {
+    title?: string;
+    logo?: string;
+    favicon?: string;
+    background?: string;
+  }) => {
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        title: values.title,
+        logo: values.logo,
+        favicon: values.favicon,
+        background: values.background,
+      },
+    });
+  };
+
+  return (
+    <Group direction="column" grow mb="lg">
+      <form onSubmit={form.onSubmit((values) => saveChanges(values))}>
+        <Group grow direction="column">
+          <TextInput label="Page title" placeholder="Homarr 🦞" {...form.getInputProps('title')} />
+          <TextInput label="Logo" placeholder="/img/logo.png" {...form.getInputProps('logo')} />
+          <TextInput
+            label="Favicon"
+            placeholder="/favicon.svg"
+            {...form.getInputProps('favicon')}
+          />
+          <TextInput
+            label="Background"
+            placeholder="/img/background.png"
+            {...form.getInputProps('background')}
+          />
+          <Button type="submit">Save</Button>
+        </Group>
+      </form>
+      <ColorSelector type="primary" />
+      <ColorSelector type="secondary" />
+      <ShadeSelector />
+      <OpacitySelector />
+      <AppCardWidthSelector />
+    </Group>
+  );
+}

src/components/Settings/AppCardWidthSelector.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Group, Text, Slider } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function AppCardWidthSelector() {
+  const { config, setConfig } = useConfig();
+
+  const setappCardWidth = (appCardWidth: number) => {
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        appCardWidth,
+      },
+    });
+  };
+
+  return (
+    <Group direction="column" spacing="xs" grow>
+      <Text>App Width</Text>
+      <Slider
+        label={null}
+        defaultValue={config.settings.appCardWidth}
+        step={0.2}
+        min={0.8}
+        max={2}
+        styles={{ markLabel: { fontSize: 'xx-small' } }}
+        onChange={(value) => setappCardWidth(value)}
+      />
+    </Group>
+  );
+}

src/components/Settings/ColorSelector.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { ColorSwatch, Group, Popover, Text, useMantineTheme } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+import { useColorTheme } from '../../tools/color';
+
+interface ColorControlProps {
+  type: string;
+}
+
+export function ColorSelector({ type }: ColorControlProps) {
+  const { config, setConfig } = useConfig();
+  const [opened, setOpened] = useState(false);
+
+  const { primaryColor, secondaryColor, setPrimaryColor, setSecondaryColor } = useColorTheme();
+
+  const theme = useMantineTheme();
+  const colors = Object.keys(theme.colors).map((color) => ({
+    swatch: theme.colors[color][6],
+    color,
+  }));
+
+  const configColor = type === 'primary' ? primaryColor : secondaryColor;
+
+  const setConfigColor = (color: string) => {
+    if (type === 'primary') {
+      setPrimaryColor(color);
+      setConfig({
+        ...config,
+        settings: {
+          ...config.settings,
+          primaryColor: color,
+        },
+      });
+    } else {
+      setSecondaryColor(color);
+      setConfig({
+        ...config,
+        settings: {
+          ...config.settings,
+          secondaryColor: color,
+        },
+      });
+    }
+  };
+
+  const swatches = colors.map(({ color, swatch }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigColor(color)}
+      key={color}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  return (
+    <Group direction="row" spacing={3}>
+      <Popover
+        opened={opened}
+        onClose={() => setOpened(false)}
+        transitionDuration={0}
+        target={
+          <ColorSwatch
+            component="button"
+            type="button"
+            color={theme.colors[configColor][6]}
+            onClick={() => setOpened((o) => !o)}
+            size={22}
+            style={{ display: 'block', cursor: 'pointer' }}
+          />
+        }
+        styles={{
+          root: {
+            marginRight: theme.spacing.xs,
+          },
+          body: {
+            width: 152,
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+          arrow: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+        }}
+        position="bottom"
+        placement="end"
+        withArrow
+        arrowSize={3}
+      >
+        <Group spacing="xs">{swatches}</Group>
+      </Popover>
+      <Text>{type[0].toUpperCase() + type.slice(1)} color</Text>
+    </Group>
+  );
+}

src/components/Settings/CommonSettings.tsx

@@ -0,0 +1,86 @@
+import { Group, Text, SegmentedControl, TextInput } from '@mantine/core';
+import { useState } from 'react';
+import { useConfig } from '../../tools/state';
+import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
+import { WidgetsPositionSwitch } from '../WidgetsPositionSwitch/WidgetsPositionSwitch';
+import ConfigChanger from '../Config/ConfigChanger';
+import SaveConfigComponent from '../Config/SaveConfig';
+import ModuleEnabler from './ModuleEnabler';
+import Tip from '../layout/Tip';
+
+export default function CommonSettings(args: any) {
+  const { config, setConfig } = useConfig();
+
+  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=' },
+    { label: 'Custom', value: 'Custom' },
+  ];
+
+  const [customSearchUrl, setCustomSearchUrl] = useState(config.settings.searchUrl);
+  const [searchUrl, setSearchUrl] = useState(
+    matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom'
+  );
+
+  return (
+    <Group direction="column" grow mb="lg">
+      <Group grow direction="column" spacing={0}>
+        <Text>Search engine</Text>
+        <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.
+        </Tip>
+        <SegmentedControl
+          fullWidth
+          mb="sm"
+          title="Search engine"
+          value={
+            // Match config.settings.searchUrl with a key in the matches array
+            searchUrl
+          }
+          onChange={
+            // Set config.settings.searchUrl to the value of the selected item
+            (e) => {
+              setSearchUrl(e);
+              setConfig({
+                ...config,
+                settings: {
+                  ...config.settings,
+                  searchUrl: e,
+                },
+              });
+            }
+          }
+          data={matches}
+        />
+        {searchUrl === 'Custom' && (
+          <>
+            <Tip>%s can be used as a placeholder for the query.</Tip>
+            <TextInput
+              label="Query URL"
+              placeholder="Custom query URL"
+              value={customSearchUrl}
+              onChange={(event) => {
+                setCustomSearchUrl(event.currentTarget.value);
+                setConfig({
+                  ...config,
+                  settings: {
+                    ...config.settings,
+                    searchUrl: event.currentTarget.value,
+                  },
+                });
+              }}
+            />
+          </>
+        )}
+      </Group>
+      <ColorSchemeSwitch />
+      <WidgetsPositionSwitch />
+      <ModuleEnabler />
+      <ConfigChanger />
+      <SaveConfigComponent />
+      <Tip>Upload your config file by dragging and dropping it onto the page!</Tip>
+    </Group>
+  );
+}

src/components/Settings/Credits.tsx

@@ -0,0 +1,44 @@
+import { Group, ActionIcon, Anchor, Text } from '@mantine/core';
+import { IconBrandDiscord, IconBrandGithub } from '@tabler/icons';
+import { CURRENT_VERSION } from '../../../data/constants';
+
+export default function Credits(props: any) {
+  return (
+    <Group position="center" direction="row" mr="xs">
+      <Group spacing={0}>
+        <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
+          <IconBrandGithub size={18} />
+        </ActionIcon>
+        <Text
+          style={{
+            position: 'relative',
+            fontSize: '0.90rem',
+            color: 'gray',
+          }}
+        >
+          {CURRENT_VERSION}
+        </Text>
+      </Group>
+      <Group spacing={1}>
+        <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>
+        <ActionIcon<'a'> component="a" href="https://discord.gg/aCsmEV5RgA" size="lg">
+          <IconBrandDiscord size={18} />
+        </ActionIcon>
+      </Group>
+    </Group>
+  );
+}

src/components/Settings/ModuleEnabler.tsx

@@ -1,4 +1,4 @@
-import { Group, Switch } from '@mantine/core';
+import { Checkbox, Group, SimpleGrid, Title } from '@mantine/core';
 import * as Modules from '../modules';
 import { useConfig } from '../../tools/state';
 
@@ -7,26 +7,29 @@ export default function ModuleEnabler(props: any) {
   const modules = Object.values(Modules).map((module) => module);
   return (
     <Group direction="column">
-      {modules.map((module) => (
-        <Switch
-          key={module.title}
-          size="md"
-          checked={config.modules?.[module.title]?.enabled ?? false}
-          label={`Enable ${module.title}`}
-          onChange={(e) => {
-            setConfig({
-              ...config,
-              modules: {
-                ...config.modules,
-                [module.title]: {
-                  ...config.modules?.[module.title],
-                  enabled: e.currentTarget.checked,
+      <Title order={4}>Module enabler</Title>
+      <SimpleGrid cols={2} spacing="md">
+        {modules.map((module) => (
+          <Checkbox
+            key={module.title}
+            size="md"
+            checked={config.modules?.[module.title]?.enabled ?? false}
+            label={`${module.title}`}
+            onChange={(e) => {
+              setConfig({
+                ...config,
+                modules: {
+                  ...config.modules,
+                  [module.title]: {
+                    ...config.modules?.[module.title],
+                    enabled: e.currentTarget.checked,
+                  },
                 },
-              },
-            });
-          }}
-        />
-      ))}
+              });
+            }}
+          />
+        ))}
+      </SimpleGrid>
     </Group>
   );
 }

src/components/Settings/OpacitySelector.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Group, Text, Slider } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function OpacitySelector() {
+  const { config, setConfig } = useConfig();
+
+  const MARKS = [
+    { value: 10, label: '10' },
+    { value: 20, label: '20' },
+    { value: 30, label: '30' },
+    { value: 40, label: '40' },
+    { value: 50, label: '50' },
+    { value: 60, label: '60' },
+    { value: 70, label: '70' },
+    { value: 80, label: '80' },
+    { value: 90, label: '90' },
+    { value: 100, label: '100' },
+  ];
+
+  const setConfigOpacity = (opacity: number) => {
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        appOpacity: opacity,
+      },
+    });
+  };
+
+  return (
+    <Group direction="column" spacing="xs" grow>
+      <Text>App Opacity</Text>
+      <Slider
+        defaultValue={config.settings.appOpacity || 100}
+        step={10}
+        min={10}
+        marks={MARKS}
+        styles={{ markLabel: { fontSize: 'xx-small' } }}
+        onChange={(value) => setConfigOpacity(value)}
+      />
+    </Group>
+  );
+}

src/components/Settings/SettingsMenu.story.tsx

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

src/components/Settings/SettingsMenu.tsx

@@ -1,131 +1,25 @@
-import {
-  ActionIcon,
-  Group,
-  Title,
-  Text,
-  Tooltip,
-  SegmentedControl,
-  TextInput,
-  Drawer,
-  Anchor,
-} from '@mantine/core';
-import { useColorScheme, useHotkeys } from '@mantine/hooks';
+import { ActionIcon, Title, Tooltip, Drawer, Tabs, ScrollArea } from '@mantine/core';
+import { useHotkeys } from '@mantine/hooks';
 import { useState } from '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';
-import SaveConfigComponent from '../Config/SaveConfig';
-import ModuleEnabler from './ModuleEnabler';
+import { IconSettings } from '@tabler/icons';
+import AdvancedSettings from './AdvancedSettings';
+import CommonSettings from './CommonSettings';
+import Credits from './Credits';
 
 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=' },
-    { label: 'Custom', value: 'Custom' },
-  ];
-
-  const [customSearchUrl, setCustomSearchUrl] = useState(config.settings.searchUrl);
-  const [searchUrl, setSearchUrl] = useState(
-    matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom'
-  );
-
   return (
-    <Group direction="column" grow>
-      <Group grow direction="column" spacing={0}>
-        <Text>Search engine</Text>
-        <SegmentedControl
-          fullWidth
-          title="Search engine"
-          value={
-            // Match config.settings.searchUrl with a key in the matches array
-            searchUrl
-          }
-          onChange={
-            // Set config.settings.searchUrl to the value of the selected item
-            (e) => {
-              setSearchUrl(e);
-              setConfig({
-                ...config,
-                settings: {
-                  ...config.settings,
-                  searchUrl: e,
-                },
-              });
-            }
-          }
-          data={matches}
-        />
-        {searchUrl === 'Custom' && (
-          <TextInput
-            label="Query URL"
-            placeholder="Custom query url"
-            value={customSearchUrl}
-            onChange={(event) => {
-              setCustomSearchUrl(event.currentTarget.value);
-              setConfig({
-                ...config,
-                settings: {
-                  ...config.settings,
-                  searchUrl: event.currentTarget.value,
-                },
-              });
-            }}
-          />
-        )}
-      </Group>
-      <ModuleEnabler />
-      <ColorSchemeSwitch />
-      <ConfigChanger />
-      <SaveConfigComponent />
-      <Text
-        style={{
-          alignSelf: 'center',
-          fontSize: '0.75rem',
-          textAlign: 'center',
-          color: 'gray',
-        }}
-      >
-        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>
+    <Tabs grow>
+      <Tabs.Tab data-autofocus label="Common">
+        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
+          <CommonSettings />
+        </ScrollArea>
+      </Tabs.Tab>
+      <Tabs.Tab label="Customizations">
+        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
+          <AdvancedSettings />
+        </ScrollArea>
+      </Tabs.Tab>
+    </Tabs>
   );
 }
 
@@ -136,14 +30,15 @@ export function SettingsMenuButton(props: any) {
   return (
     <>
       <Drawer
-        size="auto"
-        padding="xl"
+        size="xl"
+        padding="lg"
         position="right"
-        title={<Title order={3}>Settings</Title>}
+        title={<Title order={5}>Settings</Title>}
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
       >
         <SettingsMenu />
+        <Credits />
       </Drawer>
       <ActionIcon
         variant="default"

src/components/Settings/ShadeSelector.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { ColorSwatch, Group, Popover, Text, useMantineTheme, MantineTheme } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+import { useColorTheme } from '../../tools/color';
+
+export function ShadeSelector() {
+  const { config, setConfig } = useConfig();
+  const [opened, setOpened] = useState(false);
+
+  const { primaryColor, secondaryColor, primaryShade, setPrimaryShade } = useColorTheme();
+
+  const theme = useMantineTheme();
+  const primaryShades = theme.colors[primaryColor].map((s, i) => ({
+    swatch: theme.colors[primaryColor][i],
+    shade: i as MantineTheme['primaryShade'],
+  }));
+  const secondaryShades = theme.colors[secondaryColor].map((s, i) => ({
+    swatch: theme.colors[secondaryColor][i],
+    shade: i as MantineTheme['primaryShade'],
+  }));
+
+  const setConfigShade = (shade: MantineTheme['primaryShade']) => {
+    setPrimaryShade(shade);
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        primaryShade: shade,
+      },
+    });
+  };
+
+  const primarySwatches = primaryShades.map(({ swatch, shade }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigShade(shade)}
+      key={Number(shade)}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  const secondarySwatches = secondaryShades.map(({ swatch, shade }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigShade(shade)}
+      key={Number(shade)}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  return (
+    <Group direction="row" spacing={3}>
+      <Popover
+        opened={opened}
+        onClose={() => setOpened(false)}
+        transitionDuration={0}
+        target={
+          <ColorSwatch
+            component="button"
+            type="button"
+            color={theme.colors[primaryColor][Number(primaryShade)]}
+            onClick={() => setOpened((o) => !o)}
+            size={22}
+            style={{ display: 'block', cursor: 'pointer' }}
+          />
+        }
+        styles={{
+          root: {
+            marginRight: theme.spacing.xs,
+          },
+          body: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+          arrow: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+        }}
+        position="bottom"
+        placement="end"
+        withArrow
+        arrowSize={3}
+      >
+        <Group direction="column" spacing="xs">
+          <Group spacing="xs">{primarySwatches}</Group>
+          <Group spacing="xs">{secondarySwatches}</Group>
+        </Group>
+      </Popover>
+      <Text>Shade</Text>
+    </Group>
+  );
+}

src/components/WidgetsPositionSwitch/WidgetsPositionSwitch.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { createStyles, Switch, Group } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+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 WidgetsPositionSwitch() {
+  const { config, setConfig } = useConfig();
+  const { classes, cx } = useStyles();
+  const defaultPosition = config?.settings?.widgetPosition || 'right';
+  const [widgetPosition, setWidgetPosition] = useState(defaultPosition);
+  const toggleWidgetPosition = () => {
+    const position = widgetPosition === 'right' ? 'left' : 'right';
+    setWidgetPosition(position);
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        widgetPosition: position,
+      },
+    });
+  };
+
+  return (
+    <Group>
+      <div className={classes.root}>
+        <Switch
+          checked={widgetPosition === 'left'}
+          onChange={() => toggleWidgetPosition()}
+          size="md"
+        />
+      </div>
+      Position widgets on left
+    </Group>
+  );
+}

src/components/layout/Aside.tsx

@@ -1,33 +1,36 @@
-import { Aside as MantineAside, Group } from '@mantine/core';
-import {
-  WeatherModule,
-  DateModule,
-  CalendarModule,
-  TotalDownloadsModule,
-  SystemModule,
-} from '../modules';
-import { ModuleWrapper } from '../modules/moduleWrapper';
+import { Aside as MantineAside, createStyles } from '@mantine/core';
+import Widgets from './Widgets';
+
+const useStyles = createStyles((theme) => ({
+  hide: {
+    [theme.fn.smallerThan('xs')]: {
+      display: 'none',
+    },
+  },
+  burger: {
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
+}));
 
 export default function Aside(props: any) {
+  const { classes, cx } = useStyles();
   return (
     <MantineAside
       pr="md"
-      hiddenBreakpoint="md"
+      hiddenBreakpoint="sm"
       hidden
+      className={cx(classes.hide)}
       style={{
         border: 'none',
+        background: 'none',
       }}
       width={{
         base: 'auto',
       }}
     >
-      <Group my="sm" grow direction="column" style={{ width: 300 }}>
-        <ModuleWrapper module={CalendarModule} />
-        <ModuleWrapper module={TotalDownloadsModule} />
-        <ModuleWrapper module={WeatherModule} />
-        <ModuleWrapper module={DateModule} />
-        <ModuleWrapper module={SystemModule} />
-      </Group>
+      <Widgets />
     </MantineAside>
   );
 }

src/components/layout/Background.tsx

@@ -0,0 +1,20 @@
+import { Global } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function Background() {
+  const { config } = useConfig();
+
+  return (
+    <Global
+      styles={{
+        body: {
+          minHeight: '100vh',
+          backgroundImage: `url('${config.settings.background}')` || '',
+          backgroundPosition: 'center center',
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+        },
+      }}
+    />
+  );
+}

src/components/layout/Footer.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { createStyles, Footer as FooterComponent } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
-import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
 import { IconAlertCircle as AlertCircle } from '@tabler/icons';
+import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
 
 const useStyles = createStyles((theme) => ({
   footer: {

src/components/layout/Header.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
-import { createStyles, Header as Head, Group, Box } from '@mantine/core';
-import { Logo } from './Logo';
-import SearchBar from '../modules/search/SearchModule';
+import { Box, createStyles, Group, Header as Head } from '@mantine/core';
+import { useBooleanToggle } from '@mantine/hooks';
 import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
+
+import DockerMenuButton from '../modules/docker/DockerModule';
+import SearchBar from '../modules/search/SearchModule';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
+import { Logo } from './Logo';
 
 const HEADER_HEIGHT = 60;
 
@@ -13,19 +15,27 @@ const useStyles = createStyles((theme) => ({
       display: 'none',
     },
   },
+  burger: {
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
 }));
 
 export function Header(props: any) {
+  const [opened, toggleOpened] = useBooleanToggle(false);
   const { classes, cx } = useStyles();
+  const [hidden, toggleHidden] = useBooleanToggle(true);
 
   return (
     <Head height="auto">
-      <Group m="xs" position="apart">
+      <Group p="xs" position="apart">
         <Box className={classes.hide}>
           <Logo style={{ fontSize: 22 }} />
         </Box>
         <Group noWrap>
           <SearchBar />
+          <DockerMenuButton />
           <SettingsMenuButton />
           <AddItemShelfButton />
         </Group>

src/components/layout/HeaderConfig.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Head from 'next/head';
+import { useConfig } from '../../tools/state';
+
+export function HeaderConfig(props: any) {
+  const { config } = useConfig();
+
+  return (
+    <Head>
+      <title>{config.settings.title || 'Homarr 🦞'}</title>
+      <link rel="shortcut icon" href={config.settings.favicon || '/favicon.svg'} />
+    </Head>
+  );
+}

src/components/layout/Layout.tsx

@@ -2,6 +2,10 @@ import { AppShell, createStyles } from '@mantine/core';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import Aside from './Aside';
+import Navbar from './Navbar';
+import { HeaderConfig } from './HeaderConfig';
+import { Background } from './Background';
+import { useConfig } from '../../tools/state';
 
 const useStyles = createStyles((theme) => ({
   main: {},
@@ -9,8 +13,18 @@ const useStyles = createStyles((theme) => ({
 
 export default function Layout({ children, style }: any) {
   const { classes, cx } = useStyles();
+  const { config } = useConfig();
+  const widgetPosition = config?.settings?.widgetPosition === 'left';
+
   return (
-    <AppShell aside={<Aside />} header={<Header />} footer={<Footer links={[]} />}>
+    <AppShell
+      header={<Header />}
+      navbar={widgetPosition ? <Navbar /> : undefined}
+      aside={widgetPosition ? undefined : <Aside />}
+      footer={<Footer links={[]} />}
+    >
+      <HeaderConfig />
+      <Background />
       <main
         className={cx(classes.main)}
         style={{

src/components/layout/Logo.tsx

@@ -1,33 +1,44 @@
 import { Group, Image, Text } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import * as React from 'react';
+import { useColorTheme } from '../../tools/color';
+import { useConfig } from '../../tools/state';
+
+export function Logo({ style, withoutText }: any) {
+  const { config } = useConfig();
+  const { primaryColor, secondaryColor } = useColorTheme();
 
-export function Logo({ style }: any) {
   return (
     <Group spacing="xs">
       <Image
         width={50}
-        src="/imgs/logo.png"
+        src={config.settings.logo || '/imgs/logo.png'}
         style={{
           position: 'relative',
         }}
       />
-      <NextLink
-        href="/"
-        style={{
-          textDecoration: 'none',
-          position: 'relative',
-        }}
-      >
-        <Text
-          sx={style}
-          weight="bold"
-          variant="gradient"
-          gradient={{ from: 'red', to: 'orange', deg: 145 }}
+      {withoutText ? null : (
+        <NextLink
+          href="/"
+          style={{
+            textDecoration: 'none',
+            position: 'relative',
+          }}
         >
-          Homarr
-        </Text>
-      </NextLink>
+          <Text
+            sx={style}
+            weight="bold"
+            variant="gradient"
+            gradient={{
+              from: primaryColor,
+              to: secondaryColor,
+              deg: 145,
+            }}
+          >
+            {config.settings.title || 'Homarr'}
+          </Text>
+        </NextLink>
+      )}
     </Group>
   );
 }

src/components/layout/Navbar.tsx

@@ -1,24 +1,37 @@
-import { Group, Navbar as MantineNavbar } from '@mantine/core';
-import { WeatherModule, DateModule } from '../modules';
-import { ModuleWrapper } from '../modules/moduleWrapper';
+import { createStyles, Navbar as MantineNavbar } from '@mantine/core';
+import Widgets from './Widgets';
+
+const useStyles = createStyles((theme) => ({
+  hide: {
+    [theme.fn.smallerThan('xs')]: {
+      display: 'none',
+    },
+  },
+  burger: {
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
+}));
 
 export default function Navbar() {
+  const { classes, cx } = useStyles();
+
   return (
     <MantineNavbar
-      hiddenBreakpoint="lg"
+      pl="md"
+      hiddenBreakpoint="sm"
       hidden
+      className={cx(classes.hide)}
       style={{
         border: 'none',
+        background: 'none',
       }}
       width={{
         base: 'auto',
       }}
     >
-      <Group mt="sm" direction="column" align="center">
-        <ModuleWrapper module={DateModule} />
-        <ModuleWrapper module={WeatherModule} />
-        <ModuleWrapper module={WeatherModule} />
-      </Group>
+      <Widgets />
     </MantineNavbar>
   );
 }

src/components/layout/Tip.tsx

@@ -0,0 +1,19 @@
+import { Text } from '@mantine/core';
+
+interface TipProps {
+  children: React.ReactNode;
+}
+
+export default function Tip(props: TipProps) {
+  return (
+    <Text
+      style={{
+        fontSize: '0.75rem',
+        color: 'gray',
+        marginBottom: '0.5rem',
+      }}
+    >
+      Tip: {props.children}
+    </Text>
+  );
+}

src/components/layout/Widgets.tsx

@@ -0,0 +1,16 @@
+import { Group } from '@mantine/core';
+import { CalendarModule, DateModule, TotalDownloadsModule, WeatherModule } from '../modules';
+import { DashdotModule } from '../modules/dash.';
+import { ModuleWrapper } from '../modules/moduleWrapper';
+
+export default function Widgets(props: any) {
+  return (
+    <Group my="sm" grow direction="column" style={{ width: 300 }}>
+      <ModuleWrapper module={CalendarModule} />
+      <ModuleWrapper module={TotalDownloadsModule} />
+      <ModuleWrapper module={WeatherModule} />
+      <ModuleWrapper module={DateModule} />
+      <ModuleWrapper module={DashdotModule} />
+    </Group>
+  );
+}

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

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

src/components/modules/calendar/CalendarModule.tsx

@@ -1,5 +1,13 @@
 /* eslint-disable react/no-children-prop */
-import { Box, Divider, Indicator, Popover, ScrollArea } from '@mantine/core';
+import {
+  Box,
+  Divider,
+  Indicator,
+  Popover,
+  ScrollArea,
+  createStyles,
+  useMantineTheme,
+} from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
 import { IconCalendar as CalendarIcon } from '@tabler/icons';
@@ -13,6 +21,7 @@ import {
   ReadarrMediaDisplay,
 } from '../common';
 import { serviceItem } from '../../../tools/types';
+import { useColorTheme } from '../../../tools/color';
 
 export const CalendarModule: IModule = {
   title: 'Calendar',
@@ -20,39 +29,125 @@ export const CalendarModule: IModule = {
     'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
   icon: CalendarIcon,
   component: CalendarComponent,
+  options: {
+    sundaystart: {
+      name: 'Start the week on Sunday',
+      value: false,
+    },
+  },
 };
 
 export default function CalendarComponent(props: any) {
   const { config } = useConfig();
+  const theme = useMantineTheme();
+  const { secondaryColor } = useColorTheme();
+  const useStyles = createStyles((theme) => ({
+    weekend: {
+      color: `${secondaryColor} !important`,
+    },
+  }));
+
   const [sonarrMedias, setSonarrMedias] = useState([] as 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);
+  const sonarrServices = config.services.filter((service) => service.type === 'Sonarr');
+  const radarrServices = config.services.filter((service) => service.type === 'Radarr');
+  const lidarrServices = config.services.filter((service) => service.type === 'Lidarr');
+  const readarrServices = config.services.filter((service) => service.type === 'Readarr');
+  const today = new Date();
+
+  const { classes, cx } = useStyles();
 
   function getMedias(service: serviceItem | undefined, type: string) {
     if (!service || !service.apiKey) {
       return Promise.resolve({ data: [] });
     }
-    return axios.post(`/api/modules/calendar?type=${type}`, { ...service });
+    return axios.post(`/api/modules/calendar?type=${type}`, { id: service.id });
   }
 
   useEffect(() => {
-    // Filter only sonarr and radarr services
-
-    // Get the url and apiKey for all Sonarr and Radarr services
-    getMedias(sonarrService, 'sonarr').then((res) => setSonarrMedias(res.data));
-    getMedias(radarrService, 'radarr').then((res) => setRadarrMedias(res.data));
-    getMedias(lidarrService, 'lidarr').then((res) => setLidarrMedias(res.data));
-    getMedias(readarrService, 'readarr').then((res) => setReadarrMedias(res.data));
+    // Create each Sonarr service and get the medias
+    const currentSonarrMedias: any[] = [];
+    Promise.all(
+      sonarrServices.map((service) =>
+        getMedias(service, 'sonarr')
+          .then((res) => {
+            currentSonarrMedias.push(...res.data);
+          })
+          .catch(() => {
+            currentSonarrMedias.push([]);
+          })
+      )
+    ).then(() => {
+      setSonarrMedias(currentSonarrMedias);
+    });
+    const currentRadarrMedias: any[] = [];
+    Promise.all(
+      radarrServices.map((service) =>
+        getMedias(service, 'radarr')
+          .then((res) => {
+            currentRadarrMedias.push(...res.data);
+          })
+          .catch(() => {
+            currentRadarrMedias.push([]);
+          })
+      )
+    ).then(() => {
+      setRadarrMedias(currentRadarrMedias);
+    });
+    const currentLidarrMedias: any[] = [];
+    Promise.all(
+      lidarrServices.map((service) =>
+        getMedias(service, 'lidarr')
+          .then((res) => {
+            currentLidarrMedias.push(...res.data);
+          })
+          .catch(() => {
+            currentLidarrMedias.push([]);
+          })
+      )
+    ).then(() => {
+      setLidarrMedias(currentLidarrMedias);
+    });
+    const currentReadarrMedias: any[] = [];
+    Promise.all(
+      readarrServices.map((service) =>
+        getMedias(service, 'readarr')
+          .then((res) => {
+            currentReadarrMedias.push(...res.data);
+          })
+          .catch(() => {
+            currentReadarrMedias.push([]);
+          })
+      )
+    ).then(() => {
+      setReadarrMedias(currentReadarrMedias);
+    });
   }, [config.services]);
 
+  const weekStartsAtSunday =
+    (config?.modules?.[CalendarModule.title]?.options?.sundaystart?.value as boolean) ?? false;
   return (
     <Calendar
+      firstDayOfWeek={weekStartsAtSunday ? 'sunday' : 'monday'}
       onChange={(day: any) => {}}
+      dayStyle={(date) =>
+        date.getDay() === today.getDay() && date.getDate() === today.getDate()
+          ? {
+              backgroundColor:
+                theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0],
+            }
+          : {}
+      }
+      styles={{
+        calendarHeader: {
+          marginRight: 15,
+          marginLeft: 15,
+        },
+      }}
+      allowLevelChange={false}
+      dayClassName={(date, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
       renderDay={(renderdate) => (
         <DayComponent
           renderdate={renderdate}
@@ -81,23 +176,20 @@ function DayComponent(props: any) {
 
   const readarrFiltered = readarrmedias.filter((media: any) => {
     const date = new Date(media.releaseDate);
-    return date.getDate() === day && date.getMonth() === renderdate.getMonth();
+    return date.toDateString() === renderdate.toDateString();
   });
 
   const lidarrFiltered = lidarrmedias.filter((media: any) => {
     const date = new Date(media.releaseDate);
-    // Return true if the date is renerdate without counting hours and minutes
-    return date.getDate() === day && date.getMonth() === renderdate.getMonth();
+    return date.toDateString() === renderdate.toDateString();
   });
   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 date = new Date(media.airDateUtc);
+    return date.toDateString() === renderdate.toDateString();
   });
   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();
+    return date.toDateString() === renderdate.toDateString();
   });
   if (
     sonarrFiltered.length === 0 &&
@@ -167,7 +259,7 @@ function DayComponent(props: any) {
         />
       )}
       <Popover
-        position="left"
+        position="bottom"
         radius="lg"
         shadow="xl"
         transition="pop"
@@ -176,7 +268,7 @@ function DayComponent(props: any) {
             boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.1), 0 14px 11px rgba(0, 0, 0, 0.1)',
           },
         }}
-        width={700}
+        width="auto"
         onClose={() => setOpened(false)}
         opened={opened}
         target={day}
@@ -197,12 +289,18 @@ function DayComponent(props: any) {
               {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
             </React.Fragment>
           ))}
+          {sonarrFiltered.length > 0 && lidarrFiltered.length > 0 && (
+            <Divider variant="dashed" my="xl" />
+          )}
           {lidarrFiltered.map((media: any, index: number) => (
             <React.Fragment key={index}>
               <LidarrMediaDisplay media={media} />
               {index < lidarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
             </React.Fragment>
           ))}
+          {lidarrFiltered.length > 0 && readarrFiltered.length > 0 && (
+            <Divider variant="dashed" my="xl" />
+          )}
           {readarrFiltered.map((media: any, index: number) => (
             <React.Fragment key={index}>
               <ReadarrMediaDisplay media={media} />

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

@@ -1,67 +0,0 @@
-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/common/MediaDisplay.tsx

@@ -1,4 +1,15 @@
-import { Image, Group, Title, Badge, Text, ActionIcon, Anchor, ScrollArea } from '@mantine/core';
+import {
+  Image,
+  Group,
+  Title,
+  Badge,
+  Text,
+  ActionIcon,
+  Anchor,
+  ScrollArea,
+  createStyles,
+} from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import { IconLink as Link } from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { serviceItem } from '../../../tools/types';
@@ -14,13 +25,25 @@ export interface IMedia {
   episodeNumber?: number;
 }
 
+const useStyles = createStyles((theme) => ({
+  overview: {
+    [theme.fn.largerThan('sm')]: {
+      width: 400,
+    },
+  },
+}));
+
 export function MediaDisplay(props: { media: IMedia }) {
   const { media }: { media: IMedia } = props;
+  const { classes, cx } = useStyles();
+  const phone = useMediaQuery('(min-width: 800px)');
   return (
     <Group position="apart">
       <Text>
         {media.poster && (
           <Image
+            width={phone ? 250 : 100}
+            height={phone ? 400 : 160}
             style={{
               float: 'right',
             }}
@@ -28,12 +51,10 @@ export function MediaDisplay(props: { media: IMedia }) {
             fit="cover"
             src={media.poster}
             alt={media.title}
-            width={250}
-            height={400}
           />
         )}
-        <Group direction="column">
-          <Group noWrap mr="sm" style={{ minWidth: 400 }}>
+        <Group direction="column" style={{ minWidth: phone ? 450 : '65vw' }}>
+          <Group noWrap mr="sm" className={classes.overview}>
             <Title order={3}>{media.title}</Title>
             {media.imdbId && (
               <Anchor href={`https://www.imdb.com/title/${media.imdbId}`} target="_blank">
@@ -65,9 +86,9 @@ export function MediaDisplay(props: { media: IMedia }) {
           )}
         </Group>
         <Group direction="column" position="apart">
-          <ScrollArea style={{ height: 250 }}>{media.overview}</ScrollArea>
+          <ScrollArea style={{ height: 280, maxWidth: 700 }}>{media.overview}</ScrollArea>
           <Group align="center" position="center" spacing="xs">
-            {media.genres.map((genre: string, i: number) => (
+            {media.genres.slice(-5).map((genre: string, i: number) => (
               <Badge size="sm" key={i}>
                 {genre}
               </Badge>

src/components/modules/dash./DashdotModule.tsx

@@ -0,0 +1,233 @@
+import { createStyles, useMantineColorScheme, useMantineTheme } from '@mantine/core';
+import { IconCalendar as CalendarIcon } from '@tabler/icons';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { useConfig } from '../../../tools/state';
+import { serviceItem } from '../../../tools/types';
+import { IModule } from '../modules';
+
+const asModule = <T extends IModule>(t: T) => t;
+export const DashdotModule = asModule({
+  title: 'Dash.',
+  description: 'A module for displaying the graphs of your running Dash. instance.',
+  icon: CalendarIcon,
+  component: DashdotComponent,
+  options: {
+    cpuMultiView: {
+      name: 'CPU Multi-Core View',
+      value: false,
+    },
+    storageMultiView: {
+      name: 'Storage Multi-Drive View',
+      value: false,
+    },
+    useCompactView: {
+      name: 'Use Compact View',
+      value: false,
+    },
+    graphs: {
+      name: 'Graphs',
+      value: ['CPU', 'RAM', 'Storage', 'Network'],
+      options: ['CPU', 'RAM', 'Storage', 'Network', 'GPU'],
+    },
+  },
+});
+
+const useStyles = createStyles((theme, _params) => ({
+  heading: {
+    marginTop: 0,
+    marginBottom: 10,
+  },
+  table: {
+    display: 'table',
+  },
+  tableRow: {
+    display: 'table-row',
+  },
+  tableLabel: {
+    display: 'table-cell',
+    paddingRight: 10,
+  },
+  tableValue: {
+    display: 'table-cell',
+    whiteSpace: 'pre-wrap',
+    paddingBottom: 5,
+  },
+  graphsContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    rowGap: 10,
+    columnGap: 10,
+  },
+  iframe: {
+    flex: '1 0 auto',
+    maxWidth: '100%',
+    height: '140px',
+    borderRadius: theme.radius.lg,
+  },
+}));
+
+const bpsPrettyPrint = (bits?: number) =>
+  !bits
+    ? '-'
+    : bits > 1000 * 1000 * 1000
+    ? `${(bits / 1000 / 1000 / 1000).toFixed(1)} Gb/s`
+    : bits > 1000 * 1000
+    ? `${(bits / 1000 / 1000).toFixed(1)} Mb/s`
+    : bits > 1000
+    ? `${(bits / 1000).toFixed(1)} Kb/s`
+    : `${bits.toFixed(1)} b/s`;
+
+const bytePrettyPrint = (byte: number): string =>
+  byte > 1024 * 1024 * 1024
+    ? `${(byte / 1024 / 1024 / 1024).toFixed(1)} GiB`
+    : byte > 1024 * 1024
+    ? `${(byte / 1024 / 1024).toFixed(1)} MiB`
+    : byte > 1024
+    ? `${(byte / 1024).toFixed(1)} KiB`
+    : `${byte.toFixed(1)} B`;
+
+const useJson = (service: serviceItem | undefined, url: string) => {
+  const [data, setData] = useState<any | undefined>();
+
+  const doRequest = async () => {
+    try {
+      const resp = await axios.get(url, { baseURL: service?.url });
+
+      setData(resp.data);
+      // eslint-disable-next-line no-empty
+    } catch (e) {}
+  };
+
+  useEffect(() => {
+    if (service?.url) {
+      doRequest();
+    }
+  }, [service?.url]);
+
+  return data;
+};
+
+export function DashdotComponent() {
+  const { config } = useConfig();
+  const theme = useMantineTheme();
+  const { classes } = useStyles();
+  const { colorScheme } = useMantineColorScheme();
+
+  const dashConfig = config.modules?.[DashdotModule.title]
+    .options as typeof DashdotModule['options'];
+  const isCompact = dashConfig?.useCompactView?.value ?? false;
+  const dashdotService = config.services.filter((service) => service.type === 'Dash.')[0];
+
+  const enabledGraphs = dashConfig?.graphs?.value ?? ['CPU', 'RAM', 'Storage', 'Network'];
+  const cpuEnabled = enabledGraphs.includes('CPU');
+  const storageEnabled = enabledGraphs.includes('Storage');
+  const ramEnabled = enabledGraphs.includes('RAM');
+  const networkEnabled = enabledGraphs.includes('Network');
+  const gpuEnabled = enabledGraphs.includes('GPU');
+
+  const info = useJson(dashdotService, '/info');
+  const storageLoad = useJson(dashdotService, '/load/storage');
+
+  const totalUsed =
+    (storageLoad?.layout as any[])?.reduce((acc, curr) => (curr.load ?? 0) + acc, 0) ?? 0;
+  const totalSize =
+    (info?.storage?.layout as any[])?.reduce((acc, curr) => (curr.size ?? 0) + acc, 0) ?? 0;
+
+  const graphs = [
+    {
+      name: 'CPU',
+      enabled: cpuEnabled,
+      params: {
+        multiView: dashConfig?.cpuMultiView?.value ?? false,
+      },
+    },
+    {
+      name: 'Storage',
+      enabled: storageEnabled && !isCompact,
+      params: {
+        multiView: dashConfig?.storageMultiView?.value ?? false,
+      },
+    },
+    {
+      name: 'RAM',
+      enabled: ramEnabled,
+    },
+    {
+      name: 'Network',
+      enabled: networkEnabled,
+      spanTwo: true,
+    },
+    {
+      name: 'GPU',
+      enabled: gpuEnabled,
+      spanTwo: true,
+    },
+  ].filter((g) => g.enabled);
+
+  return (
+    <div>
+      <h2 className={classes.heading}>Dash.</h2>
+
+      {!dashdotService ? (
+        <p>No dash. service found. Please add one to your Homarr dashboard.</p>
+      ) : !info ? (
+        <p>Cannot acquire information from dash. - are you running the latest version?</p>
+      ) : (
+        <div className={classes.graphsContainer}>
+          <div className={classes.table}>
+            {storageEnabled && isCompact && (
+              <div className={classes.tableRow}>
+                <p className={classes.tableLabel}>Storage:</p>
+                <p className={classes.tableValue}>
+                  {((100 * totalUsed) / (totalSize || 1)).toFixed(1)}%{'\n'}
+                  {bytePrettyPrint(totalUsed)} / {bytePrettyPrint(totalSize)}
+                </p>
+              </div>
+            )}
+            {networkEnabled && (
+              <div className={classes.tableRow}>
+                <p className={classes.tableLabel}>Network:</p>
+                <p className={classes.tableValue}>
+                  {bpsPrettyPrint(info?.network?.speedUp)} Up{'\n'}
+                  {bpsPrettyPrint(info?.network?.speedDown)} Down
+                </p>
+              </div>
+            )}
+          </div>
+
+          {graphs.map((graph) => (
+            <iframe
+              className={classes.iframe}
+              style={
+                isCompact
+                  ? {
+                      width: graph.spanTwo ? '100%' : 'calc(50% - 5px)',
+                    }
+                  : undefined
+              }
+              key={graph.name}
+              title={graph.name}
+              src={`${
+                dashdotService.url
+              }?singleGraphMode=true&graph=${graph.name.toLowerCase()}&theme=${colorScheme}&surface=${(colorScheme ===
+              'dark'
+                ? theme.colors.dark[7]
+                : theme.colors.gray[0]
+              ).substring(1)}${isCompact ? '&gap=10' : '&gap=5'}&innerRadius=${theme.radius.lg}${
+                graph.params
+                  ? `&${Object.entries(graph.params)
+                      .map(([key, value]) => `${key}=${value.toString()}`)
+                      .join('&')}`
+                  : ''
+              }`}
+              frameBorder="0"
+              allowTransparency
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/modules/dash./index.ts

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

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

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

src/components/modules/date/DateModule.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { IconClock as Clock } from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
+import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval';
 
 export const DateModule: IModule = {
   title: 'Date',
@@ -20,13 +21,14 @@ export const DateModule: IModule = {
 
 export default function DateComponent(props: any) {
   const [date, setDate] = useState(new Date());
+  const setSafeInterval = useSetSafeInterval();
   const { config } = useConfig();
-  const isFullTime = config?.modules?.[DateModule.title]?.options?.full?.value ?? false;
+  const isFullTime = config?.modules?.[DateModule.title]?.options?.full?.value ?? true;
   const formatString = isFullTime ? 'HH:mm' : 'h:mm A';
   // Change date on minute change
   // Note: Using 10 000ms instead of 1000ms to chill a little :)
   useEffect(() => {
-    setInterval(() => {
+    setSafeInterval(() => {
       setDate(new Date());
     }, 1000 * 60);
   }, []);

src/components/modules/docker/ContainerActionBar.tsx

@@ -0,0 +1,164 @@
+import { Button, Group, Modal, Title } from '@mantine/core';
+import { useBooleanToggle } from '@mantine/hooks';
+import { showNotification, updateNotification } from '@mantine/notifications';
+import {
+  IconCheck,
+  IconPlayerPlay,
+  IconPlayerStop,
+  IconPlus,
+  IconRefresh,
+  IconRotateClockwise,
+  IconTrash,
+} from '@tabler/icons';
+import axios from 'axios';
+import Dockerode from 'dockerode';
+import { tryMatchService } from '../../../tools/addToHomarr';
+import { AddAppShelfItemForm } from '../../AppShelf/AddAppShelfItem';
+
+function sendDockerCommand(
+  action: string,
+  containerId: string,
+  containerName: string,
+  reload: () => void
+) {
+  showNotification({
+    id: containerId,
+    loading: true,
+    title: `${action}ing container ${containerName}`,
+    message: undefined,
+    autoClose: false,
+    disallowClose: true,
+  });
+  axios
+    .get(`/api/docker/container/${containerId}?action=${action}`)
+    .then((res) => {
+      updateNotification({
+        id: containerId,
+        title: `Container ${containerName} ${action}ed`,
+        message: `Your container was successfully ${action}ed`,
+        icon: <IconCheck />,
+        autoClose: 2000,
+      });
+    })
+    .catch((err) => {
+      updateNotification({
+        id: containerId,
+        color: 'red',
+        title: 'There was an error',
+        message: err.response.data.reason,
+        autoClose: 2000,
+      });
+    })
+    .finally(() => {
+      reload();
+    });
+}
+
+export interface ContainerActionBarProps {
+  selected: Dockerode.ContainerInfo[];
+  reload: () => void;
+}
+
+export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
+  const [opened, setOpened] = useBooleanToggle(false);
+  return (
+    <Group>
+      <Modal
+        size="xl"
+        radius="md"
+        opened={opened}
+        onClose={() => setOpened(false)}
+        title="Add service"
+      >
+        <AddAppShelfItemForm
+          setOpened={setOpened}
+          {...tryMatchService(selected.at(0))}
+          message="Add service to homarr"
+        />
+      </Modal>
+      <Button
+        leftIcon={<IconRotateClockwise />}
+        onClick={() =>
+          Promise.all(
+            selected.map((container) =>
+              sendDockerCommand('restart', container.Id, container.Names[0].substring(1), reload)
+            )
+          )
+        }
+        variant="light"
+        color="orange"
+        radius="md"
+      >
+        Restart
+      </Button>
+      <Button
+        leftIcon={<IconPlayerStop />}
+        onClick={() =>
+          Promise.all(
+            selected.map((container) =>
+              sendDockerCommand('stop', container.Id, container.Names[0].substring(1), reload)
+            )
+          )
+        }
+        variant="light"
+        color="red"
+        radius="md"
+      >
+        Stop
+      </Button>
+      <Button
+        leftIcon={<IconPlayerPlay />}
+        onClick={() =>
+          Promise.all(
+            selected.map((container) =>
+              sendDockerCommand('start', container.Id, container.Names[0].substring(1), reload)
+            )
+          )
+        }
+        variant="light"
+        color="green"
+        radius="md"
+      >
+        Start
+      </Button>
+      <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" radius="md">
+        Refresh data
+      </Button>
+      <Button
+        leftIcon={<IconPlus />}
+        color="indigo"
+        variant="light"
+        radius="md"
+        onClick={() => {
+          if (selected.length !== 1) {
+            showNotification({
+              autoClose: 5000,
+              title: <Title order={5}>Please only add one service at a time!</Title>,
+              color: 'red',
+              message: undefined,
+            });
+          } else {
+            setOpened(true);
+          }
+        }}
+      >
+        Add to Homarr
+      </Button>
+      <Button
+        leftIcon={<IconTrash />}
+        color="red"
+        variant="light"
+        radius="md"
+        onClick={() =>
+          Promise.all(
+            selected.map((container) =>
+              sendDockerCommand('remove', container.Id, container.Names[0].substring(1), reload)
+            )
+          )
+        }
+      >
+        Remove
+      </Button>
+    </Group>
+  );
+}

src/components/modules/docker/ContainerState.tsx

@@ -0,0 +1,49 @@
+import { Badge, BadgeVariant, MantineSize } from '@mantine/core';
+import Dockerode from 'dockerode';
+
+export interface ContainerStateProps {
+  state: Dockerode.ContainerInfo['State'];
+}
+
+export default function ContainerState(props: ContainerStateProps) {
+  const { state } = props;
+  const options: {
+    size: MantineSize;
+    radius: MantineSize;
+    variant: BadgeVariant;
+  } = {
+    size: 'md',
+    radius: 'md',
+    variant: 'outline',
+  };
+  switch (state) {
+    case 'running': {
+      return (
+        <Badge color="green" {...options}>
+          Running
+        </Badge>
+      );
+    }
+    case 'created': {
+      return (
+        <Badge color="cyan" {...options}>
+          Created
+        </Badge>
+      );
+    }
+    case 'exited': {
+      return (
+        <Badge color="red" {...options}>
+          Stopped
+        </Badge>
+      );
+    }
+    default: {
+      return (
+        <Badge color="purple" {...options}>
+          Unknown
+        </Badge>
+      );
+    }
+  }
+}

src/components/modules/docker/DockerModule.tsx

@@ -0,0 +1,84 @@
+import { ActionIcon, Drawer, Group, LoadingOverlay, Text } from '@mantine/core';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import Docker from 'dockerode';
+import { IconBrandDocker, IconX } from '@tabler/icons';
+import { showNotification } from '@mantine/notifications';
+import ContainerActionBar from './ContainerActionBar';
+import DockerTable from './DockerTable';
+import { useConfig } from '../../../tools/state';
+import { IModule } from '../modules';
+
+export const DockerModule: IModule = {
+  title: 'Docker',
+  description: 'Allows you to easily manage your torrents',
+  icon: IconBrandDocker,
+  component: DockerMenuButton,
+};
+
+export default function DockerMenuButton(props: any) {
+  const [opened, setOpened] = useState(false);
+  const [containers, setContainers] = useState<Docker.ContainerInfo[]>([]);
+  const [selection, setSelection] = useState<Docker.ContainerInfo[]>([]);
+  const [visible, setVisible] = useState(false);
+  const { config } = useConfig();
+  const moduleEnabled = config.modules?.[DockerModule.title]?.enabled ?? false;
+
+  useEffect(() => {
+    reload();
+  }, [config.modules]);
+
+  function reload() {
+    if (!moduleEnabled) {
+      return;
+    }
+    setVisible(true);
+    setTimeout(() => {
+      axios
+        .get('/api/docker/containers')
+        .then((res) => {
+          setContainers(res.data);
+          setSelection([]);
+          setVisible(false);
+        })
+        .catch(() =>
+          // Send an Error notification
+          showNotification({
+            autoClose: 1500,
+            title: <Text>Docker integration failed</Text>,
+            color: 'red',
+            icon: <IconX />,
+            message: 'Did you forget to mount the docker socket ?',
+          })
+        );
+    }, 300);
+  }
+  const exists = config.modules?.[DockerModule.title]?.enabled ?? false;
+  if (!exists) {
+    return null;
+  }
+  // Check if the user has at least one container
+  if (containers.length < 1) return null;
+  return (
+    <>
+      <Drawer opened={opened} onClose={() => setOpened(false)} padding="xl" size="full">
+        <ContainerActionBar selected={selection} reload={reload} />
+        <div style={{ position: 'relative' }}>
+          <LoadingOverlay transitionDuration={500} visible={visible} />
+          <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
+        </div>
+      </Drawer>
+      <Group position="center">
+        <ActionIcon
+          variant="default"
+          radius="md"
+          size="xl"
+          color="blue"
+          onClick={() => setOpened(true)}
+        >
+          <IconBrandDocker />
+        </ActionIcon>
+      </Group>
+    </>
+  );
+}

src/components/modules/docker/DockerTable.tsx

@@ -0,0 +1,125 @@
+import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
+import { IconSearch } from '@tabler/icons';
+import Dockerode from 'dockerode';
+import { useEffect, useState } from 'react';
+import ContainerState from './ContainerState';
+
+const useStyles = createStyles((theme) => ({
+  rowSelected: {
+    backgroundColor:
+      theme.colorScheme === 'dark'
+        ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
+        : theme.colors[theme.primaryColor][0],
+  },
+}));
+
+export default function DockerTable({
+  containers,
+  selection,
+  setSelection,
+}: {
+  setSelection: any;
+  containers: Dockerode.ContainerInfo[];
+  selection: Dockerode.ContainerInfo[];
+}) {
+  const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
+  const { classes, cx } = useStyles();
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    setContainers(containers);
+  }, [containers]);
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.currentTarget;
+    setSearch(value);
+    setContainers(filterContainers(containers, value));
+  };
+
+  function filterContainers(data: Dockerode.ContainerInfo[], search: string) {
+    const query = search.toLowerCase().trim();
+    return data.filter((item) =>
+      item.Names.some((name) => name.toLowerCase().includes(query) || item.Image.includes(query))
+    );
+  }
+
+  const toggleRow = (container: Dockerode.ContainerInfo) =>
+    setSelection((current: Dockerode.ContainerInfo[]) =>
+      current.includes(container) ? current.filter((c) => c !== container) : [...current, container]
+    );
+  const toggleAll = () =>
+    setSelection((current: any) =>
+      current.length === usedContainers.length ? [] : usedContainers.map((c) => c)
+    );
+
+  const rows = usedContainers.map((element) => {
+    const selected = selection.includes(element);
+    return (
+      <tr key={element.Id} className={cx({ [classes.rowSelected]: selected })}>
+        <td>
+          <Checkbox
+            checked={selection.includes(element)}
+            onChange={() => toggleRow(element)}
+            transitionDuration={0}
+          />
+        </td>
+        <td>{element.Names[0].replace('/', '')}</td>
+        <td>{element.Image}</td>
+        <td>
+          <Group>
+            {element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
+              // Remove duplicates with filter function
+              .filter(
+                (port, index, self) =>
+                  index === self.findIndex((t) => t.PrivatePort === port.PrivatePort)
+              )
+              .slice(-3)
+              .map((port) => (
+                <Badge key={port.PrivatePort} variant="outline">
+                  {port.PrivatePort}:{port.PublicPort}
+                </Badge>
+              ))}
+            {element.Ports.length > 3 && (
+              <Badge variant="filled">{element.Ports.length - 3} more</Badge>
+            )}
+          </Group>
+        </td>
+        <td>
+          <ContainerState state={element.State} />
+        </td>
+      </tr>
+    );
+  });
+
+  return (
+    <ScrollArea style={{ height: '80vh' }}>
+      <TextInput
+        placeholder="Search by container or image name"
+        mt="md"
+        icon={<IconSearch size={14} />}
+        value={search}
+        onChange={handleSearchChange}
+      />
+      <Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
+        <caption>your docker containers</caption>
+        <thead>
+          <tr>
+            <th style={{ width: 40 }}>
+              <Checkbox
+                onChange={toggleAll}
+                checked={selection.length === usedContainers.length}
+                indeterminate={selection.length > 0 && selection.length !== usedContainers.length}
+                transitionDuration={0}
+              />
+            </th>
+            <th>Name</th>
+            <th>Image</th>
+            <th>Ports</th>
+            <th>State</th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </Table>
+    </ScrollArea>
+  );
+}

src/components/modules/docker/index.ts

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

src/components/modules/downloads/DownloadsModule.tsx

@@ -1,11 +1,26 @@
-import { Table, Text, Tooltip, Title, Group, Progress, Skeleton, ScrollArea } from '@mantine/core';
+import {
+  Table,
+  Text,
+  Tooltip,
+  Title,
+  Group,
+  Progress,
+  Skeleton,
+  ScrollArea,
+  Center,
+  Image,
+} 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 { useViewportSize } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
 import { IModule } from '../modules';
 import { useConfig } from '../../../tools/state';
 import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
+import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval';
+import { humanFileSize } from '../../../tools/humanFileSize';
 
 export const DownloadsModule: IModule = {
   title: 'Torrent',
@@ -22,36 +37,50 @@ export const DownloadsModule: IModule = {
 
 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 { height, width } = useViewportSize();
+  const downloadServices =
+    config.services.filter(
+      (service) =>
+        service.type === 'qBittorrent' ||
+        service.type === 'Transmission' ||
+        service.type === 'Deluge'
+    ) ?? [];
   const hideComplete: boolean =
     (config?.modules?.[DownloadsModule.title]?.options?.hidecomplete?.value as boolean) ?? false;
-
-  const [delugeTorrents, setDelugeTorrents] = useState<NormalizedTorrent[]>([]);
-  const [qBittorrentTorrents, setqBittorrentTorrents] = useState<NormalizedTorrent[]>([]);
-
+  const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
+  const setSafeInterval = useSetSafeInterval();
+  const [isLoading, setIsLoading] = useState(true);
   useEffect(() => {
-    if (qBittorrentService) {
-      setInterval(() => {
-        axios
-          .post('/api/modules/downloads?dlclient=qbit', { ...qBittorrentService })
-          .then((res) => {
-            setqBittorrentTorrents(res.data.torrents);
+    setIsLoading(true);
+    if (downloadServices.length === 0) return;
+    const interval = setInterval(() => {
+      // Send one request with each download service inside
+      axios
+        .post('/api/modules/downloads')
+        .then((response) => {
+          setTorrents(response.data);
+          setIsLoading(false);
+        })
+        .catch((error) => {
+          setTorrents([]);
+          // eslint-disable-next-line no-console
+          console.error('Error while fetching torrents', error.response.data);
+          setIsLoading(false);
+          showNotification({
+            title: 'Error fetching torrents',
+            autoClose: 1000,
+            disallowClose: true,
+            id: 'fail-torrent-downloads-module',
+            color: 'red',
+            message:
+              'Please check your config for any potential errors, check the console for more info',
           });
-      }, 3000);
-    }
-    if (delugeService) {
-      setInterval(() => {
-        axios.post('/api/modules/downloads?dlclient=deluge', { ...delugeService }).then((res) => {
-          setDelugeTorrents(res.data.torrents);
+          clearInterval(interval);
         });
-      }, 3000);
-    }
-  }, [config.modules]);
+    }, 5000);
+  }, []);
 
-  if (!qBittorrentService && !delugeService) {
+  if (downloadServices.length === 0) {
     return (
       <Group direction="column">
         <Title order={3}>No supported download clients found!</Title>
@@ -63,7 +92,7 @@ export default function DownloadComponent() {
     );
   }
 
-  if (qBittorrentTorrents.length === 0 && delugeTorrents.length === 0) {
+  if (isLoading) {
     return (
       <>
         <Skeleton height={40} mt={10} />
@@ -74,68 +103,106 @@ export default function DownloadComponent() {
       </>
     );
   }
-
+  const DEVICE_WIDTH = 576;
   const ths = (
     <tr>
       <th>Name</th>
-      <th>Download</th>
-      <th>Upload</th>
+      <th>Size</th>
+      {width > 576 ? <th>Down</th> : ''}
+      {width > 576 ? <th>Up</th> : ''}
+      <th>ETA</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 [];
+  // Convert Seconds to readable format.
+  function calculateETA(givenSeconds: number) {
+    // If its superior than one day return > 1 day
+    if (givenSeconds > 86400) {
+      return '> 1 day';
     }
-    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>
-    );
-  });
+    // Transform the givenSeconds into a readable format. e.g. 1h 2m 3s
+    const hours = Math.floor(givenSeconds / 3600);
+    const minutes = Math.floor((givenSeconds % 3600) / 60);
+    const seconds = Math.floor(givenSeconds % 60);
+    // Only show hours if it's greater than 0.
+    const hoursString = hours > 0 ? `${hours}h ` : '';
+    const minutesString = minutes > 0 ? `${minutes}m ` : '';
+    const secondsString = seconds > 0 ? `${seconds}s` : '';
+    return `${hoursString}${minutesString}${secondsString}`;
+  }
+  // Loop over qBittorrent torrents merging with deluge torrents
+  const rows = torrents
+    .filter((torrent) => !(torrent.progress === 1 && hideComplete))
+    .map((torrent) => {
+      const downloadSpeed = torrent.downloadSpeed / 1024 / 1024;
+      const uploadSpeed = torrent.uploadSpeed / 1024 / 1024;
+      const size = torrent.totalSelected;
+      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">{humanFileSize(size)}</Text>
+          </td>
+          {width > 576 ? (
+            <td>
+              <Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
+            </td>
+          ) : (
+            ''
+          )}
+          {width > 576 ? (
+            <td>
+              <Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
+            </td>
+          ) : (
+            ''
+          )}
+          <td>
+            <Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
+          </td>
+          <td>
+            <Text>{(torrent.progress * 100).toFixed(1)}%</Text>
+            <Progress
+              radius="lg"
+              color={
+                torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'
+              }
+              value={torrent.progress * 100}
+              size="lg"
+            />
+          </td>
+        </tr>
+      );
+    });
+
+  const easteregg = (
+    <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <Image fit="cover" height={300} src="https://danjohnvelasco.github.io/images/empty.png" />
+    </Center>
+  );
   return (
-    <Group noWrap grow direction="column">
-      <Title order={4}>Your torrents</Title>
+    <Group noWrap grow direction="column" mt="xl">
       <ScrollArea sx={{ height: 300 }}>
-        <Table highlightOnHover>
-          <thead>{ths}</thead>
-          <tbody>{rows}</tbody>
-        </Table>
+        {rows.length > 0 ? (
+          <Table highlightOnHover>
+            <thead>{ths}</thead>
+            <tbody>{rows}</tbody>
+          </Table>
+        ) : (
+          easteregg
+        )}
       </ScrollArea>
     </Group>
   );

src/components/modules/downloads/TotalDownloadsModule.tsx

@@ -6,41 +6,12 @@ import { NormalizedTorrent } from '@ctrl/shared-torrent';
 import { linearGradientDef } from '@nivo/core';
 import { Datum, ResponsiveLine } from '@nivo/line';
 import { useListState } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
 import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
 import { useConfig } from '../../../tools/state';
+import { humanFileSize } from '../../../tools/humanFileSize';
 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]}`;
-}
+import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval';
 
 export const TotalDownloadsModule: IModule = {
   title: 'Download Speed',
@@ -56,42 +27,46 @@ interface torrentHistory {
 }
 
 export default function TotalDownloadsComponent() {
+  const setSafeInterval = useSetSafeInterval();
   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 downloadServices =
+    config.services.filter(
+      (service) =>
+        service.type === 'qBittorrent' ||
+        service.type === 'Transmission' ||
+        service.type === 'Deluge'
+    ) ?? [];
 
-  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 [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
 
   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);
+    const interval = setSafeInterval(() => {
+      // Send one request with each download service inside
+      axios
+        .post('/api/modules/downloads')
+        .then((response) => {
+          setTorrents(response.data);
+        })
+        .catch((error) => {
+          setTorrents([]);
+          // eslint-disable-next-line no-console
+          console.error('Error while fetching torrents', error.response.data);
+          showNotification({
+            title: 'Torrent speed module failed to fetch torrents',
+            autoClose: 1000,
+            disallowClose: true,
+            id: 'fail-torrent-speed-module',
+            color: 'red',
+            message:
+              'Error fetching torrents, please check your config for any potential errors, check the console for more info',
           });
-        if (delugeService) {
-          axios.post('/api/modules/downloads?dlclient=deluge', { ...delugeService }).then((res) => {
-            setDelugeTorrents(res.data.torrents);
-          });
-        }
-      }
+          clearInterval(interval);
+        });
     }, 1000);
-  }, [config.modules]);
+  }, [config.services]);
 
   useEffect(() => {
     torrentHistoryHandlers.append({
@@ -101,7 +76,7 @@ export default function TotalDownloadsComponent() {
     });
   }, [totalDownloadSpeed, totalUploadSpeed]);
 
-  if (!qBittorrentService && !delugeService) {
+  if (downloadServices.length === 0) {
     return (
       <Group direction="column">
         <Title order={4}>No supported download clients found!</Title>

src/components/modules/index.ts

@@ -1,7 +1,8 @@
-export * from './date';
 export * from './calendar';
-export * from './search';
-export * from './ping';
-export * from './weather';
+export * from './dash.';
+export * from './date';
 export * from './downloads';
-export * from './system';
+export * from './ping';
+export * from './search';
+export * from './weather';
+export * from './docker';

src/components/modules/moduleWrapper.tsx

@@ -1,10 +1,18 @@
-import { Button, Card, Group, Menu, Switch, TextInput, useMantineTheme } from '@mantine/core';
+import {
+  Button,
+  Card,
+  Group,
+  Menu,
+  MultiSelect,
+  Switch,
+  TextInput,
+  useMantineColorScheme,
+} from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { IModule } from './modules';
 
 function getItems(module: IModule) {
   const { config, setConfig } = useConfig();
-  const enabledModules = config.modules ?? {};
   const items: JSX.Element[] = [];
   if (module.options) {
     const keys = Object.keys(module.options);
@@ -15,6 +23,38 @@ function getItems(module: IModule) {
     types.forEach((type, index) => {
       const optionName = `${module.title}.${keys[index]}`;
       const moduleInConfig = config.modules?.[module.title];
+      if (type === 'object') {
+        items.push(
+          <MultiSelect
+            label={module.options?.[keys[index]].name}
+            data={module.options?.[keys[index]].options ?? []}
+            defaultValue={
+              (moduleInConfig?.options?.[keys[index]]?.value as string[]) ??
+              (values[index].value as string[]) ??
+              []
+            }
+            searchable
+            onChange={(value) => {
+              setConfig({
+                ...config,
+                modules: {
+                  ...config.modules,
+                  [module.title]: {
+                    ...moduleInConfig,
+                    options: {
+                      ...moduleInConfig?.options,
+                      [keys[index]]: {
+                        ...moduleInConfig?.options?.[keys[index]],
+                        value,
+                      },
+                    },
+                  },
+                },
+              });
+            }}
+          />
+        );
+      }
       if (type === 'string') {
         items.push(
           <form
@@ -44,7 +84,11 @@ function getItems(module: IModule) {
                 id={optionName}
                 name={optionName}
                 label={values[index].name}
-                defaultValue={(moduleInConfig?.options?.[keys[index]]?.value as string) ?? ''}
+                defaultValue={
+                  (moduleInConfig?.options?.[keys[index]]?.value as string) ??
+                  (values[index].value as string) ??
+                  ''
+                }
                 onChange={(e) => {}}
               />
 
@@ -59,7 +103,9 @@ function getItems(module: IModule) {
           <Switch
             defaultChecked={
               // Set default checked to the value of the option if it exists
-              (moduleInConfig?.options?.[keys[index]]?.value as boolean) ?? false
+              (moduleInConfig?.options?.[keys[index]]?.value as boolean) ??
+              (values[index].value as boolean) ??
+              false
             }
             key={keys[index]}
             onClick={(e) => {
@@ -91,18 +137,50 @@ function getItems(module: IModule) {
 
 export function ModuleWrapper(props: any) {
   const { module }: { module: IModule } = props;
+  const { colorScheme } = useMantineColorScheme();
   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 {...props} hidden={!isShown} withBorder radius="lg" shadow="sm">
+    <Card
+      {...props}
+      hidden={!isShown}
+      withBorder
+      radius="lg"
+      shadow="sm"
+      style={{
+        background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+        borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+      }}
+    >
+      <ModuleMenu
+        module={module}
+        styles={{
+          root: {
+            position: 'absolute',
+            top: 12,
+            right: 12,
+          },
+        }}
+      />
+      <module.component />
+    </Card>
+  );
+}
+
+export function ModuleMenu(props: any) {
+  const { module, styles } = props;
+  const items: JSX.Element[] = getItems(module);
+  return (
+    <>
       {module.options && (
         <Menu
           size="lg"
@@ -112,9 +190,7 @@ export function ModuleWrapper(props: any) {
           position="left"
           styles={{
             root: {
-              position: 'absolute',
-              top: 15,
-              right: 15,
+              ...props?.styles?.root,
             },
             body: {
               // Add shadow and elevation to the body
@@ -128,7 +204,6 @@ export function ModuleWrapper(props: any) {
           ))}
         </Menu>
       )}
-      <module.component />
-    </Card>
+    </>
   );
 }

src/components/modules/modules.tsx

@@ -1,11 +1,14 @@
 // 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
+
+import { TablerIcon } from '@tabler/icons';
+
 // Note: Maybe use context to keep track of the modules
 export interface IModule {
   title: string;
   description: string;
-  icon: React.ReactNode;
+  icon: TablerIcon;
   component: React.ComponentType;
   options?: Option;
 }
@@ -16,5 +19,6 @@ interface Option {
 
 export interface OptionValues {
   name: string;
-  value: boolean | string;
+  value: boolean | string | string[];
+  options?: string[];
 }

src/components/modules/ping/PingModule.story.tsx

@@ -1,16 +0,0 @@
-import { serviceItem } from '../../../tools/types';
-import PingComponent from './PingModule';
-
-export default {
-  title: 'Modules/Search bar',
-};
-
-const service: serviceItem = {
-  id: '1',
-  type: 'Other',
-  name: 'YouTube',
-  icon: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png',
-  url: 'https://youtube.com/',
-};
-
-export const Default = (args: any) => <PingComponent service={service} />;

src/components/modules/ping/PingModule.tsx

@@ -1,5 +1,5 @@
 import { Indicator, Tooltip } from '@mantine/core';
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { IconPlug as Plug } from '@tabler/icons';
@@ -19,20 +19,39 @@ export default function PingComponent(props: any) {
 
   const { url }: { url: string } = props;
   const [isOnline, setOnline] = useState<State>('loading');
+  const [response, setResponse] = useState(500);
   const exists = config.modules?.[PingModule.title]?.enabled ?? false;
+
+  function statusCheck(response: AxiosResponse) {
+    const { status }: { status: string[] } = props;
+    //Default Status
+    let acceptableStatus = ['200'];
+    if (status !== undefined && status.length) {
+      acceptableStatus = status;
+    }
+    // Checks if reported status is in acceptable status array
+    if (acceptableStatus.indexOf(response.status.toString()) >= 0) {
+      setOnline('online');
+      setResponse(response.status);
+    } else {
+      setOnline('down');
+      setResponse(response.status);
+    }
+  }
+
   useEffect(() => {
     if (!exists) {
       return;
     }
     axios
       .get('/api/modules/ping', { params: { url } })
-      .then(() => {
-        setOnline('online');
+      .then((response) => {
+        statusCheck(response);
       })
-      .catch(() => {
-        setOnline('down');
+      .catch((error) => {
+        statusCheck(error.response);
       });
-  }, []);
+  }, [config.modules?.[PingModule.title]?.enabled]);
   if (!exists) {
     return null;
   }
@@ -40,7 +59,13 @@ export default function PingComponent(props: any) {
     <Tooltip
       radius="lg"
       style={{ position: 'absolute', bottom: 20, right: 20 }}
-      label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'}
+      label={
+        isOnline === 'loading'
+          ? 'Loading...'
+          : isOnline === 'online'
+          ? `Online - ${response}`
+          : `Offline - ${response}`
+      }
     >
       <motion.div
         animate={{

src/components/modules/search/SearchModule.story.tsx

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

src/components/modules/search/SearchModule.tsx

@@ -1,11 +1,12 @@
-import { TextInput, Kbd, createStyles, Text, Popover } from '@mantine/core';
-import { useForm, useHotkeys } from '@mantine/hooks';
-import { useRef, useState } from 'react';
+import { Kbd, createStyles, Autocomplete } from '@mantine/core';
+import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
+import { useEffect, useRef, useState } from 'react';
 import {
   IconSearch as Search,
   IconBrandYoutube as BrandYoutube,
   IconDownload as Download,
 } from '@tabler/icons';
+import axios from 'axios';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 
@@ -32,8 +33,22 @@ export default function SearchBar(props: any) {
   const [icon, setIcon] = useState(<Search />);
   const queryUrl = config.settings.searchUrl ?? 'https://www.google.com/search?q=';
   const textInput = useRef<HTMLInputElement>();
-  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
+  // Find a service with the type of 'Overseerr'
+  const form = useForm({
+    initialValues: {
+      query: '',
+    },
+  });
 
+  const [debounced, cancel] = useDebouncedValue(form.values.query, 250);
+  const [results, setResults] = useState<any[]>([]);
+  useEffect(() => {
+    if (form.values.query !== debounced || form.values.query === '') return;
+    axios
+      .get(`/api/modules/search?q=${form.values.query}`)
+      .then((res) => setResults(res.data ?? []));
+  }, [debounced]);
+  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
   const { classes, cx } = useStyles();
   const rightSection = (
     <div className={classes.hide}>
@@ -43,12 +58,6 @@ export default function SearchBar(props: any) {
     </div>
   );
 
-  const form = useForm({
-    initialValues: {
-      query: '',
-    },
-  });
-
   // If enabled modules doesn't contain the module, return null
   // If module in enabled
 
@@ -57,6 +66,10 @@ export default function SearchBar(props: any) {
     return null;
   }
 
+  const autocompleteData = results.map((result) => ({
+    label: result.phrase,
+    value: result.phrase,
+  }));
   return (
     <form
       onChange={() => {
@@ -83,43 +96,32 @@ export default function SearchBar(props: any) {
           } else if (isTorrent) {
             window.open(`https://bitsearch.to/search?q=${query.substring(3)}`);
           } else {
-            window.open(`${queryUrl}${values.query}`);
+            window.open(
+              `${
+                queryUrl.includes('%s')
+                  ? queryUrl.replace('%s', values.query)
+                  : queryUrl + values.query
+              }`
+            );
           }
         }, 20);
       })}
     >
-      <Popover
-        opened={opened}
-        position="bottom"
-        placement="start"
-        width={260}
-        withArrow
+      <Autocomplete
+        autoFocus
+        variant="filled"
+        data={autocompleteData}
+        icon={icon}
+        ref={textInput}
+        rightSectionWidth={90}
+        rightSection={rightSection}
         radius="md"
-        trapFocus={false}
-        transition="pop-bottom-right"
-        onFocusCapture={() => setOpened(true)}
-        onBlurCapture={() => setOpened(false)}
-        target={
-          <TextInput
-            variant="filled"
-            icon={icon}
-            ref={textInput}
-            rightSectionWidth={90}
-            rightSection={rightSection}
-            radius="md"
-            size="md"
-            styles={{ rightSection: { pointerEvents: 'none' } }}
-            placeholder="Search the web..."
-            {...props}
-            {...form.getInputProps('query')}
-          />
-        }
-      >
-        <Text>
-          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>
+        size="md"
+        styles={{ rightSection: { pointerEvents: 'none' } }}
+        placeholder="Search the web..."
+        {...props}
+        {...form.getInputProps('query')}
+      />
     </form>
   );
 }

src/components/modules/system/SystemModule.tsx

@@ -1,16 +1,11 @@
-import {
-  Center,
-  Group,
-  RingProgress,
-  Title,
-  useMantineTheme,
-} from '@mantine/core';
+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';
+import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval';
 
 export const SystemModule: IModule = {
   title: 'System info',
@@ -28,13 +23,13 @@ interface ApiResponse {
 
 export default function SystemInfo(args: any) {
   const [data, setData] = useState<ApiResponse>();
-
+  const setSafeInterval = useSetSafeInterval();
   // Refresh data every second
   useEffect(() => {
-    setInterval(() => {
+    setSafeInterval(() => {
       axios.get('/api/modules/systeminfo').then((res) => setData(res.data));
     }, 1000);
-  }, [args]);
+  }, []);
 
   // Update data every time data changes
   const [cpuLoadHistory, cpuLoadHistoryHandlers] =

src/components/modules/weather/WeatherModule.tsx

@@ -1,4 +1,4 @@
-import { Group, Space, Title, Tooltip } from '@mantine/core';
+import { Group, Space, Title, Tooltip, Skeleton } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import {
@@ -18,7 +18,7 @@ import { IModule } from '../modules';
 import { WeatherResponse } from './WeatherInterface';
 
 export const WeatherModule: IModule = {
-  title: 'Weather (beta)',
+  title: 'Weather',
   description: 'Look up the current weather in your location',
   icon: Sun,
   component: WeatherComponent,
@@ -29,7 +29,7 @@ export const WeatherModule: IModule = {
     },
     location: {
       name: 'Current location',
-      value: '',
+      value: 'Paris',
     },
   },
 };
@@ -135,7 +135,7 @@ export default function WeatherComponent(props: any) {
   const { config } = useConfig();
   const [weather, setWeather] = useState({} as WeatherResponse);
   const cityInput: string =
-    (config?.modules?.[WeatherModule.title]?.options?.location?.value as string) ?? '';
+    (config?.modules?.[WeatherModule.title]?.options?.location?.value as string) ?? 'Paris';
   const isFahrenheit: boolean =
     (config?.modules?.[WeatherModule.title]?.options?.freedomunit?.value as boolean) ?? false;
 
@@ -157,10 +157,21 @@ export default function WeatherComponent(props: any) {
       });
   }, [cityInput]);
   if (!weather.current_weather) {
-    return null;
+    return (
+      <>
+        <Skeleton height={40} width={100} mb="xl" />
+        <Group noWrap direction="row">
+          <Skeleton height={50} circle />
+          <Group>
+            <Skeleton height={25} width={70} mr="lg" />
+            <Skeleton height={25} width={70} />
+          </Group>
+        </Group>
+      </>
+    );
   }
   function usePerferedUnit(value: number): string {
-    return isFahrenheit ? `${(value * (9 / 5)).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
+    return isFahrenheit ? `${(value * (9 / 5) + 32).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
   }
   return (
     <Group p="sm" spacing="xs" direction="column">

src/middleware.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+// eslint-disable-next-line consistent-return
+export function middleware(request: NextRequest) {
+  // const cookie = request.cookies.get('password');
+  // const isPasswordCorrect = cookie === process.env.PASSWORD;
+  // if (
+  //   !isPasswordCorrect &&
+  //   request.nextUrl.pathname !== '/login' &&
+  //   request.nextUrl.pathname !== '/api/configs/trylogin'
+  // ) {
+  //   return NextResponse.redirect('/login');
+  // }
+}

src/pages/404.tsx

@@ -58,7 +58,7 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
-export function Illustration(props: React.ComponentPropsWithoutRef<'svg'>) {
+function Illustration(props: React.ComponentPropsWithoutRef<'svg'>) {
   const theme = useMantineTheme();
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362 145" {...props}>
@@ -70,7 +70,7 @@ export function Illustration(props: React.ComponentPropsWithoutRef<'svg'>) {
   );
 }
 
-export default function NothingFoundBackground() {
+export default function Custom404() {
   const { classes } = useStyles();
 
   return (

src/pages/[slug].tsx

@@ -6,6 +6,7 @@ import AppShelf from '../components/AppShelf/AppShelf';
 import LoadConfigComponent from '../components/Config/LoadConfig';
 import { Config } from '../tools/types';
 import { useConfig } from '../tools/state';
+import Layout from '../components/layout/Layout';
 
 export async function getServerSideProps(
   context: GetServerSidePropsContext
@@ -46,9 +47,9 @@ export default function HomePage(props: any) {
     setConfig(initialConfig);
   }, [initialConfig]);
   return (
-    <>
+    <Layout>
       <AppShelf />
       <LoadConfigComponent />
-    </>
+    </Layout>
   );
 }

src/pages/_app.tsx

@@ -1,55 +1,67 @@
 import { GetServerSidePropsContext } from 'next';
 import { useState } from 'react';
 import { AppProps } from 'next/app';
-import { getCookie, setCookies } from 'cookies-next';
+import { getCookie, setCookie } from 'cookies-next';
 import Head from 'next/head';
-import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
+import { MantineProvider, ColorScheme, ColorSchemeProvider, MantineTheme } from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
 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';
+import { ColorTheme } from '../tools/color';
 
-export default function App(props: AppProps & { colorScheme: ColorScheme }) {
+export default function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
   const { Component, pageProps } = props;
   const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
 
+  const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>('red');
+  const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>('orange');
+  const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(6);
+  const colorTheme = {
+    primaryColor,
+    secondaryColor,
+    setPrimaryColor,
+    setSecondaryColor,
+    primaryShade,
+    setPrimaryShade,
+  };
+
   const toggleColorScheme = (value?: ColorScheme) => {
     const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
     setColorScheme(nextColorScheme);
-    setCookies('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
+    setCookie('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
   };
   useHotkeys([['mod+J', () => toggleColorScheme()]]);
 
   return (
     <>
       <Head>
-        <title>Homarr 🦞</title>
         <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
-        <link rel="shortcut icon" href="/favicon.svg" />
       </Head>
 
       <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-        <MantineProvider
-          theme={{
-            ...theme,
-            colorScheme,
-          }}
-          styles={{
-            ...styles,
-          }}
-          withGlobalStyles
-          withNormalizeCSS
-        >
-          <NotificationsProvider limit={4} position="bottom-left">
-            <ConfigProvider>
-              <Layout>
+        <ColorTheme.Provider value={colorTheme}>
+          <MantineProvider
+            theme={{
+              ...theme,
+              primaryColor,
+              primaryShade,
+              colorScheme,
+            }}
+            styles={{
+              ...styles,
+            }}
+            withGlobalStyles
+            withNormalizeCSS
+          >
+            <NotificationsProvider limit={4} position="bottom-left">
+              <ConfigProvider>
                 <Component {...pageProps} />
-              </Layout>
-            </ConfigProvider>
-          </NotificationsProvider>
-        </MantineProvider>
+              </ConfigProvider>
+            </NotificationsProvider>
+          </MantineProvider>
+        </ColorTheme.Provider>
       </ColorSchemeProvider>
     </>
   );

src/pages/api/configs/tryPassword.tsx

@@ -0,0 +1,25 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+function Post(req: NextApiRequest, res: NextApiResponse) {
+  const { tried } = req.body;
+  // Try to match the password with the PASSWORD env variable
+  if (tried === process.env.PASSWORD) {
+    return res.status(200).json({
+      success: true,
+    });
+  }
+  return res.status(200).json({
+    success: false,
+  });
+}
+
+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/docker/container/[id].tsx

@@ -0,0 +1,60 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import Docker from 'dockerode';
+
+const docker = new Docker();
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  // Get the slug of the request
+  const { id } = req.query as { id: string };
+  const { action } = req.query;
+  // Get the action on the request (start, stop, restart)
+  if (action !== 'start' && action !== 'stop' && action !== 'restart' && action !== 'remove') {
+    return res.status(400).json({
+      statusCode: 400,
+      message: 'Invalid action',
+    });
+  }
+  if (!id) {
+    return res.status(400).json({
+      message: 'Missing ID',
+    });
+  }
+  // Get the container with the ID
+  const container = docker.getContainer(id);
+  const startAction = async () => {
+    switch (action) {
+      case 'remove':
+        return container.remove();
+      case 'start':
+        return container.start();
+      case 'stop':
+        return container.stop();
+      case 'restart':
+        return container.restart();
+      default:
+        return Promise;
+    }
+  };
+  try {
+    await startAction();
+    return res.status(200).json({
+      statusCode: 200,
+      message: `Container ${id} ${action}ed`,
+    });
+  } catch (err) {
+    return res.status(500).json(
+      err,
+    );
+  }
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a Put or a GET
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/api/docker/containers.tsx

@@ -0,0 +1,24 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import Docker from 'dockerode';
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const docker = new Docker();
+    const containers = await docker.listContainers({ all: true });
+    res.status(200).json(containers);
+  } catch (err) {
+    res.status(500).json({ err });
+  }
+}
+
+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/api/modules/calendar.ts

@@ -1,9 +1,24 @@
 import axios from 'axios';
+import { getCookie } from 'cookies-next';
 import { NextApiRequest, NextApiResponse } from 'next';
-import { serviceItem } from '../../../tools/types';
+import { getConfig } from '../../../tools/getConfig';
+import { Config } from '../../../tools/types';
 
 async function Post(req: NextApiRequest, res: NextApiResponse) {
   // Parse req.body as a ServiceItem
+  const { id } = req.body;
+  const { type } = req.query;
+  const configName = getCookie('config-name', { req });
+  const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
+  // Find service with serviceId in config
+  const service = config.services.find((service) => service.id === id);
+  if (!service) {
+    return res.status(500).json({
+      statusCode: 500,
+      message: 'Missing service',
+    });
+  }
+
   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 }[] = [
@@ -24,8 +39,6 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
       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',
@@ -44,12 +57,15 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
     });
   }
   // Get the origin URL
-  const { origin } = new URL(service.url);
+  let { href: origin } = new URL(service.url);
+  if (origin.endsWith('/')) {
+    origin = origin.slice(0, -1);
+  }
   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);
+  return axios
+    .get(`${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`)
+    .then((response) => res.status(200).json(response.data))
+    .catch((e) => res.status(500).json(e));
   // // Make a request to the URL
   // const response = await axios.get(url);
   // // Return the response

src/pages/api/modules/downloads.ts

@@ -1,42 +1,66 @@
 import { Deluge } from '@ctrl/deluge';
 import { QBittorrent } from '@ctrl/qbittorrent';
+import { NormalizedTorrent } from '@ctrl/shared-torrent';
+import { Transmission } from '@ctrl/transmission';
+import { getCookie } from 'cookies-next';
 import { NextApiRequest, NextApiResponse } from 'next';
+import { getConfig } from '../../../tools/getConfig';
+import { Config } from '../../../tools/types';
 
 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',
+  const configName = getCookie('config-name', { req });
+  const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
+  const qBittorrentServices = config.services.filter((service) => service.type === 'qBittorrent');
+  const delugeServices = config.services.filter((service) => service.type === 'Deluge');
+  const transmissionServices = config.services.filter((service) => service.type === 'Transmission');
+
+  const torrents: NormalizedTorrent[] = [];
+
+  if (!qBittorrentServices && !delugeServices && !transmissionServices) {
+    return res.status(500).json({
+      statusCode: 500,
+      message: 'Missing services',
     });
   }
-  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',
-      });
+  try {
+    await Promise.all(
+      qBittorrentServices.map((service) =>
+        new QBittorrent({
+          baseUrl: service.url,
+          username: service.username,
+          password: service.password,
+        })
+          .getAllData()
+          .then((e) => torrents.push(...e.torrents))
+      )
+    );
+    await Promise.all(
+      delugeServices.map((service) =>
+        new Deluge({
+          baseUrl: service.url,
+          password: 'password' in service ? service.password : '',
+        })
+          .getAllData()
+          .then((e) => torrents.push(...e.torrents))
+      )
+    );
+    // Map transmissionServices
+    await Promise.all(
+      transmissionServices.map((service) =>
+        new Transmission({
+          baseUrl: service.url,
+          username: 'username' in service ? service.username : '',
+          password: 'password' in service ? service.password : '',
+        })
+          .getAllData()
+          .then((e) => torrents.push(...e.torrents))
+      )
+    );
+  } catch (e: any) {
+    return res.status(401).json(e);
   }
-  const data = await client.getAllData();
-  res.status(200).json({
-    torrents: data.torrents,
-  });
+  return res.status(200).json(torrents);
 }
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {

src/pages/api/modules/ping.ts

@@ -7,10 +7,14 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
   await axios
     .get(url as string)
     .then((response) => {
-      res.status(200).json(response.data);
+      res.status(response.status).json(response.statusText);
     })
     .catch((error) => {
-      res.status(500).json(error);
+      if (error.response) {
+        res.status(error.response.status).json(error.response.statusText);
+      } else {
+        res.status(500).json('Server Error');
+      }
     });
   // // Make a request to the URL
   // const response = await axios.get(url);

src/pages/api/modules/search.ts

@@ -0,0 +1,19 @@
+import axios from 'axios';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  const { q } = req.query;
+  const response = await axios.get(`https://duckduckgo.com/ac/?q=${q}`);
+  res.status(200).json(response.data);
+}
+
+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,4 +1,4 @@
-import { getCookie, setCookies } from 'cookies-next';
+import { getCookie, setCookie } from 'cookies-next';
 import { GetServerSidePropsContext } from 'next';
 import { useEffect } from 'react';
 import AppShelf from '../components/AppShelf/AppShelf';
@@ -7,6 +7,8 @@ import { Config } from '../tools/types';
 import { useConfig } from '../tools/state';
 import { migrateToIdConfig } from '../tools/migrate';
 import { getConfig } from '../tools/getConfig';
+import { useColorTheme } from '../tools/color';
+import Layout from '../components/layout/Layout';
 
 export async function getServerSideProps({
   req,
@@ -14,7 +16,7 @@ export async function getServerSideProps({
 }: GetServerSidePropsContext): Promise<{ props: { config: Config } }> {
   let cookie = getCookie('config-name', { req, res });
   if (!cookie) {
-    setCookies('config-name', 'default', {
+    setCookie('config-name', 'default', {
       req,
       res,
       maxAge: 60 * 60 * 24 * 30,
@@ -28,14 +30,17 @@ export async function getServerSideProps({
 export default function HomePage(props: any) {
   const { config: initialConfig }: { config: Config } = props;
   const { setConfig } = useConfig();
+  const { setPrimaryColor, setSecondaryColor } = useColorTheme();
   useEffect(() => {
     const migratedConfig = migrateToIdConfig(initialConfig);
+    setPrimaryColor(migratedConfig.settings.primaryColor || 'red');
+    setSecondaryColor(migratedConfig.settings.secondaryColor || 'orange');
     setConfig(migratedConfig);
   }, [initialConfig]);
   return (
-    <>
+    <Layout>
       <AppShelf />
       <LoadConfigComponent />
-    </>
+    </Layout>
   );
 }

src/pages/login.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { PasswordInput, Anchor, Paper, Title, Text, Container, Group, Button } from '@mantine/core';
+import { setCookie } from 'cookies-next';
+import { useForm } from '@mantine/hooks';
+import { showNotification, updateNotification } from '@mantine/notifications';
+import axios from 'axios';
+import { IconCheck, IconX } from '@tabler/icons';
+import { Logo } from '../components/layout/Logo';
+
+// TODO: Add links to the wiki articles about the login process.
+export default function AuthenticationTitle() {
+  const form = useForm({
+    initialValues: {
+      password: '',
+    },
+  });
+  return (
+    <Container
+      size="lg"
+      style={{
+        height: '100vh',
+        display: 'flex',
+        width: '100%',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Group>
+        <Title
+          align="center"
+          sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })}
+        >
+          Welcome back!
+        </Title>
+        <Logo withoutText />
+      </Group>
+
+      <Text color="dimmed" size="sm" align="center" mt={5}>
+        Please enter the{' '}
+        <Anchor<'a'> href="#" size="sm" onClick={(event) => event.preventDefault()}>
+          password
+        </Anchor>
+      </Text>
+
+      <Paper
+        withBorder
+        shadow="md"
+        p={30}
+        mt={30}
+        radius="md"
+        style={{ width: '100%', maxWidth: 420 }}
+      >
+        <form
+          onSubmit={form.onSubmit((values) => {
+            setCookie('password', values.password, {
+              maxAge: 60 * 60 * 24 * 30,
+              sameSite: 'lax',
+            });
+            showNotification({
+              id: 'load-data',
+              loading: true,
+              title: 'Checking your password',
+              message: 'Your password is being checked...',
+              autoClose: false,
+              disallowClose: true,
+            });
+            axios
+              .post('/api/configs/tryPassword', {
+                tried: values.password,
+              })
+              .then((res) => {
+                setTimeout(() => {
+                  if (res.data.success === true) {
+                    updateNotification({
+                      id: 'load-data',
+                      color: 'teal',
+                      title: 'Password correct',
+                      message: undefined,
+                      icon: <IconCheck />,
+                      autoClose: 300,
+                      onClose: () => {
+                        window.location.reload();
+                      },
+                    });
+                  }
+                  if (res.data.success === false) {
+                    updateNotification({
+                      id: 'load-data',
+                      color: 'red',
+                      title: 'Password is wrong, please try again.',
+                      message: undefined,
+                      icon: <IconX />,
+                      autoClose: 2000,
+                    });
+                  }
+                }, 500);
+              });
+          })}
+        >
+          <PasswordInput
+            id="password"
+            label="Password"
+            placeholder="Your password"
+            required
+            autoFocus
+            mt="md"
+            {...form.getInputProps('password')}
+          />
+          <Button fullWidth type="submit" mt="xl">
+            Sign in
+          </Button>
+        </form>
+      </Paper>
+    </Container>
+  );
+}

src/tools/addToHomarr.ts

@@ -0,0 +1,57 @@
+import Dockerode from 'dockerode';
+import { Config, MatchingImages, ServiceType, tryMatchPort } from './types';
+
+async function MatchIcon(name: string) {
+  const res = await fetch(
+    `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
+      .replace(/\s+/g, '-')
+      .toLowerCase()}.png`
+  );
+  return res.ok ? res.url : '/favicon.svg';
+}
+
+function tryMatchType(imageName: string): ServiceType {
+  // Try to find imageName inside MatchingImages
+
+  const match = MatchingImages.find(({ image }) => imageName.includes(image));
+  if (match) {
+    return match.type;
+  }
+  return 'Other';
+}
+
+export function tryMatchService(container: Dockerode.ContainerInfo | undefined) {
+  if (container === undefined) return {};
+  const name = container.Names[0].substring(1);
+  const type = tryMatchType(container.Image);
+  const port = tryMatchPort(type.toLowerCase());
+  return {
+    name,
+    id: container.Id,
+    type: tryMatchType(container.Image),
+    url: `localhost${port ? `:${port.value}` : ''}`,
+    icon: `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
+      .replace(/\s+/g, '-')
+      .toLowerCase()}.png`,
+  };
+}
+
+export default async function addToHomarr(
+  container: Dockerode.ContainerInfo,
+  config: Config,
+  setConfig: (newconfig: Config) => void
+) {
+  setConfig({
+    ...config,
+    services: [
+      ...config.services,
+      {
+        name: container.Names[0].substring(1),
+        id: container.Id,
+        type: tryMatchType(container.Image),
+        url: `localhost:${container.Ports.at(0)?.PublicPort}`,
+        icon: await MatchIcon(container.Names[0].substring(1)),
+      },
+    ],
+  });
+}

src/tools/color.ts

@@ -0,0 +1,28 @@
+import { createContext, useContext } from 'react';
+import { MantineTheme } from '@mantine/core';
+
+type colorThemeContextType = {
+  primaryColor: MantineTheme['primaryColor'];
+  secondaryColor: MantineTheme['primaryColor'];
+  primaryShade: MantineTheme['primaryShade'];
+  setPrimaryColor: (color: MantineTheme['primaryColor']) => void;
+  setSecondaryColor: (color: MantineTheme['primaryColor']) => void;
+  setPrimaryShade: (shade: MantineTheme['primaryShade']) => void;
+};
+
+export const ColorTheme = createContext<colorThemeContextType>({
+  primaryColor: 'red',
+  secondaryColor: 'orange',
+  primaryShade: 6,
+  setPrimaryColor: () => {},
+  setSecondaryColor: () => {},
+  setPrimaryShade: () => {},
+});
+
+export function useColorTheme() {
+  const context = useContext(ColorTheme);
+  if (context === undefined) {
+    throw new Error('useColorTheme must be used within a ColorTheme.Provider');
+  }
+  return context;
+}

src/tools/getConfig.ts

@@ -14,7 +14,11 @@ export function getConfig(name: string) {
           settings: {
             searchUrl: 'https://www.google.com/search?q=',
           },
-          modules: {},
+          modules: {
+            'Search Bar': {
+              enabled: true,
+            },
+          },
         },
       },
     };

src/tools/hooks/useSetSafeInterval.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+
+export function useSetSafeInterval() {
+  const timers = useRef<NodeJS.Timer[]>([]);
+
+  function setSafeInterval(callback: () => void, delay: number) {
+    const newInterval = setInterval(callback, delay);
+    timers.current.push(newInterval);
+    return newInterval;
+  }
+
+  useEffect(
+    () => () => {
+      timers.current.forEach((t) => {
+        clearInterval(t);
+      });
+    },
+    []
+  );
+
+  return setSafeInterval;
+}

src/tools/humanFileSize.ts

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+export 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]}`;
+}

src/tools/theme.ts

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

src/tools/types.ts

@@ -1,7 +1,18 @@
+import { MantineTheme } from '@mantine/core';
 import { OptionValues } from '../components/modules/modules';
 
 export interface Settings {
   searchUrl: string;
+  title?: string;
+  logo?: string;
+  favicon?: string;
+  primaryColor?: MantineTheme['primaryColor'];
+  secondaryColor?: MantineTheme['primaryColor'];
+  primaryShade?: MantineTheme['primaryShade'];
+  background?: string;
+  appOpacity?: number;
+  widgetPosition?: string;
+  appCardWidth?: number;
 }
 
 export interface Config {
@@ -21,27 +32,134 @@ interface ConfigModule {
   };
 }
 
+export const StatusCodes = [
+  { value: '200', label: '200 - OK', group: 'Sucessful responses' },
+  { value: '204', label: '204 - No Content', group: 'Sucessful responses' },
+  { value: '301', label: '301 - Moved Permanently', group: 'Redirection responses' },
+  { value: '302', label: '302 - Found / Moved Temporarily', group: 'Redirection responses' },
+  { value: '304', label: '304 - Not Modified', group: 'Redirection responses' },
+  { value: '307', label: '307 - Temporary Redirect', group: 'Redirection responses' },
+  { value: '308', label: '308 - Permanent Redirect', group: 'Redirection responses' },
+  { value: '400', label: '400 - Bad Request', group: 'Client error responses' },
+  { value: '401', label: '401 - Unauthorized', group: 'Client error responses' },
+  { value: '403', label: '403 - Forbidden', group: 'Client error responses' },
+  { value: '404', label: '404 - Not Found', group: 'Client error responses' },
+  { value: '408', label: '408 - Request Timeout', group: 'Client error responses' },
+  { value: '410', label: '410 - Gone', group: 'Client error responses' },
+  { value: '429', label: '429 - Too Many Requests', group: 'Client error responses' },
+  { value: '500', label: '500 - Internal Server Error', group: 'Server error responses' },
+  { value: '502', label: '502 - Bad Gateway', group: 'Server error responses' },
+  { value: '503', label: '503 - Service Unavailable', group: 'Server error responses' },
+  { value: '054', label: '504 - Gateway Timeout Error', group: 'Server error responses' },
+];
+
+export const Targets = [
+  { value: '_blank', label: 'New Tab' },
+  { value: '_top', label: 'Same Window' },
+];
+
 export const ServiceTypeList = [
   'Other',
-  'Emby',
+  'Dash.',
   'Deluge',
+  'Emby',
   'Lidarr',
   'Plex',
+  'qBittorrent',
   'Radarr',
   'Readarr',
   'Sonarr',
-  'qBittorrent',
+  'Transmission',
 ];
 export type ServiceType =
   | 'Other'
-  | 'Emby'
+  | 'Dash.'
   | 'Deluge'
+  | 'Emby'
   | 'Lidarr'
   | 'Plex'
+  | 'qBittorrent'
   | 'Radarr'
   | 'Readarr'
   | 'Sonarr'
-  | 'qBittorrent';
+  | 'Transmission';
+
+export function tryMatchPort(name: string, form?: any) {
+  // Match name with portmap key
+  const port = portmap.find((p) => p.name === name.toLowerCase());
+  if (form && port) {
+    form.setFieldValue('url', `http://localhost:${port.value}`);
+  }
+  return port;
+}
+
+export const portmap = [
+  { name: 'qbittorrent', value: '8080' },
+  { name: 'sonarr', value: '8989' },
+  { name: 'radarr', value: '7878' },
+  { name: 'lidarr', value: '8686' },
+  { name: 'readarr', value: '8787' },
+  { name: 'deluge', value: '8112' },
+  { name: 'transmission', value: '9091' },
+  { name: 'dash.', value: '3001' },
+];
+
+export const MatchingImages: {
+  image: string;
+  type: ServiceType;
+}[] = [
+  //Official images
+  { image: 'mauricenino/dashdot', type: 'Dash.' },
+  { image: 'emby/embyserver', type: 'Emby' },
+  { image: 'plexinc/pms-docker', type: 'Plex' },
+  //Lidarr images
+  { image: 'hotio/lidarr', type: 'Lidarr' },
+  { image: 'ghcr.io/hotio/lidarr', type: 'Lidarr' },
+  { image: 'cr.hotio.dev/hotio/lidarr', type: 'Lidarr' },
+  // Plex
+  { image: 'hotio/plex', type: 'Plex' },
+  { image: 'ghcr.io/hotio/plex', type: 'Plex' },
+  { image: 'cr.hotio.dev/hotio/plex', type: 'Plex' },
+  // qbittorrent
+  { image: 'hotio/qbittorrent', type: 'qBittorrent' },
+  { image: 'ghcr.io/hotio/qbittorrent', type: 'qBittorrent' },
+  { image: 'cr.hotio.dev/hotio/qbittorrent', type: 'qBittorrent' },
+  // Radarr
+  { image: 'hotio/radarr', type: 'Radarr' },
+  { image: 'ghcr.io/hotio/radarr', type: 'Radarr' },
+  { image: 'cr.hotio.dev/hotio/radarr', type: 'Radarr' },
+  // Readarr
+  { image: 'hotio/readarr', type: 'Readarr' },
+  { image: 'ghcr.io/hotio/readarr', type: 'Readarr' },
+  { image: 'cr.hotio.dev/hotio/readarr', type: 'Readarr' },
+  // Sonarr
+  { image: 'hotio/sonarr', type: 'Sonarr' },
+  { image: 'ghcr.io/hotio/sonarr', type: 'Sonarr' },
+  { image: 'cr.hotio.dev/hotio/sonarr', type: 'Sonarr' },
+  //LinuxServer images
+  { image: 'lscr.io/linuxserver/deluge', type: 'Deluge' },
+  { image: 'lscr.io/linuxserver/emby', type: 'Emby' },
+  { image: 'lscr.io/linuxserver/lidarr', type: 'Lidarr' },
+  { image: 'lscr.io/linuxserver/plex', type: 'Plex' },
+  { image: 'lscr.io/linuxserver/qbittorrent', type: 'qBittorrent' },
+  { image: 'lscr.io/linuxserver/radarr', type: 'Radarr' },
+  { image: 'lscr.io/linuxserver/readarr', type: 'Readarr' },
+  { image: 'lscr.io/linuxserver/sonarr', type: 'Sonarr' },
+  { image: 'lscr.io/linuxserver/transmission', type: 'Transmission' },
+  // LinuxServer but on Docker Hub
+  { image: 'linuxserver/deluge', type: 'Deluge' },
+  { image: 'linuxserver/emby', type: 'Emby' },
+  { image: 'linuxserver/lidarr', type: 'Lidarr' },
+  { image: 'linuxserver/plex', type: 'Plex' },
+  { image: 'linuxserver/qbittorrent', type: 'qBittorrent' },
+  { image: 'linuxserver/radarr', type: 'Radarr' },
+  { image: 'linuxserver/readarr', type: 'Readarr' },
+  { image: 'linuxserver/sonarr', type: 'Sonarr' },
+  { image: 'linuxserver/transmission', type: 'Transmission' },
+  //High usage
+  { image: 'markusmcnugen/qbittorrentvpn', type: 'qBittorrent' },
+  { image: 'haugene/transmission-openvpn', type: 'Transmission' },
+];
 
 export interface serviceItem {
   id: string;
@@ -53,4 +171,7 @@ export interface serviceItem {
   apiKey?: string;
   password?: string;
   username?: string;
+  openedUrl?: string;
+  newTab?: boolean;
+  status?: string[];
 }