🚀 v0.7.0 : Theming, Password protection, Autocompletion, Transmission, Mobile responsiveness! This is a big upgrade 👀

.dockerignore

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

.eslintrc.js

@@ -3,6 +3,7 @@ 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,3 +22,13 @@ 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/workflows/docker.yml

@@ -1,8 +1,6 @@
-name: Master CI
+name: Master docker CI
-# This workflow uses actions that are not certified by GitHub.
+# Workflow to build and publish docker image
-# They are provided by a third-party and are governed by
+
-# separate terms of service, privacy policy, and support
-# documentation.
 on:
   push:
     branches: [master]
@@ -24,46 +22,72 @@ 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@v3
+        uses: actions/checkout@v2
-
+      - uses: actions/cache@v2
-      - name: Get yarn cache directory path
+        id: restore-build
-        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: |
-            ${{ github.workspace }}/.next/cache
+             ./next.config.js
-          # Generate a new cache whenever packages or source files change.
+             ./pages/
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+             ./public/
-          # If source files changed but packages didn't, rebuild from a prior cache.
+             ./.next/static/
-          restore-keys: |
+             ./.next/standalone/
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+             ./packages.json
-
+          key: ${{ github.sha }}
-      - run: yarn install --immutable
-
-      - run: yarn build
-
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v4
@@ -74,13 +98,10 @@ 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:
@@ -96,5 +117,3 @@ 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

@@ -30,9 +30,6 @@ 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
@@ -43,32 +40,67 @@ jobs:
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+        run: echo "::set-output name=dir::$(yarn cache dir)"
-      
+
-      - uses: actions/cache@v3
+      - name: Yarn cache
-        id: yarn-cache
+        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: |
+          restore-keys: ${{ runner.os }}-yarn-
-            ${{ runner.os }}-yarn-
 
-      - name: Restore NextJS cache
+      - 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
+        # 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: |
+          restore-keys: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
-            ${{ 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
@@ -102,5 +134,3 @@ 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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -1,28 +0,0 @@
-{
-	"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,23 +1,14 @@
 FROM node:16-alpine
 WORKDIR /app
-
-RUN apk add tzdata
-
-ENV NEXT_TELEMETRY_DISABLED 1
-
 ENV NODE_ENV production
-
+COPY /next.config.js ./
-COPY next.config.js ./
+COPY  /public ./public
-COPY public ./public
+COPY /package.json ./package.json
-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 ./
-# Automatically leverage output traces to reduce image size 
+COPY /.next/static ./.next/static
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY .next/standalone ./
-COPY .next/static ./.next/static
-
 EXPOSE 7575
-
 ENV PORT 7575
-
+RUN apk add tzdata
+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](https://github.com/ajnart/homarr/wiki/Integrations)
+For a full list of integrations look at: [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,4 +198,7 @@ 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,9 +18,6 @@
     },
     "Date": {
       "enabled": false
-    },
-    "Docker": {
-      "enabled": true
     }
   }
 }

data/constants.ts

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

next.config.js

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

package.json

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

src/components/AppShelf/AddAppShelfItem.tsx

@@ -1,29 +1,25 @@
 import {
-  ActionIcon,
+  Modal,
-  Anchor,
-  Button,
   Center,
   Group,
-  Image,
-  LoadingOverlay,
-  Modal,
-  MultiSelect,
-  ScrollArea,
-  Select,
-  Switch,
-  Tabs,
   TextInput,
-  Title,
+  Image,
+  Button,
+  Select,
+  LoadingOverlay,
+  ActionIcon,
   Tooltip,
+  Title,
+  Anchor,
+  Text,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { useDebouncedValue } from '@mantine/hooks';
-import { IconApps as Apps } from '@tabler/icons';
 import { useEffect, useState } from 'react';
+import { IconApps as Apps } from '@tabler/icons';
 import { v4 as uuidv4 } from 'uuid';
+import { useDebouncedValue } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
-import { tryMatchPort, ServiceTypeList, StatusCodes } from '../../tools/types';
+import { ServiceTypeList } from '../../tools/types';
-import Tip from '../layout/Tip';
 
 export function AddItemShelfButton(props: any) {
   const [opened, setOpened] = useState(false);
@@ -54,13 +50,11 @@ export function AddItemShelfButton(props: any) {
   );
 }
 
-function MatchIcon(name: string | undefined, form: any) {
+function MatchIcon(name: string, form: any) {
-  if (name === undefined || name === '') return null;
   fetch(
     `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
       .replace(/\s+/g, '-')
-      .toLowerCase()
+      .toLowerCase()}.png`
-      .replace(/^dash\.$/, 'dashdot')}.png`
   ).then((res) => {
     if (res.ok) {
       form.setFieldValue('icon', res.url);
@@ -77,7 +71,22 @@ function MatchService(name: string, form: any) {
   }
 }
 
-const DEFAULT_ICON = '/favicon.svg';
+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.toLowerCase());
+  if (port) {
+    form.setFieldValue('url', `http://localhost:${port.value}`);
+  }
+}
 
 export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
   const { setOpened } = props;
@@ -98,21 +107,23 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       type: props.type ?? 'Other',
       category: props.category ?? undefined,
       name: props.name ?? '',
-      icon: props.icon ?? DEFAULT_ICON,
+      icon: props.icon ?? '/favicon.svg',
       url: props.url ?? '',
       apiKey: props.apiKey ?? (undefined as unknown as string),
       username: props.username ?? (undefined as unknown as string),
       password: props.password ?? (undefined as unknown as string),
       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) =>
+      icon: (value: string) => {
-        // Disable matching to allow any values
+        // Regex to match everything that ends with and icon extension
-        null,
+        if (!value.match(/\.(png|jpg|jpeg|gif|svg)$/)) {
+          return 'Please enter a valid icon URL';
+        }
+        return null;
+      },
       // Validate url with a regex http/https
       url: (value: string) => {
         try {
@@ -122,21 +133,15 @@ 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;
+    if (form.values.name !== debounced || props.name || props.type) return;
     MatchIcon(form.values.name, form);
     MatchService(form.values.name, form);
-    tryMatchPort(form.values.name, form);
+    MatchPort(form.values.name, form);
   }, [debounced]);
 
   // Try to set const hostname to new URL(form.values.url).hostname)
@@ -162,12 +167,6 @@ 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({
@@ -192,171 +191,131 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           form.reset();
         })}
       >
-        <Tabs grow>
+        <Group direction="column" grow>
-          <Tabs.Tab label="Options">
+          <TextInput
-            <ScrollArea style={{ height: 500 }} scrollbarSize={4}>
+            required
-              <Group direction="column" grow>
+            label="Service name"
-                <TextInput
+            placeholder="Plex"
-                  required
+            {...form.getInputProps('name')}
-                  label="Service name"
+          />
-                  placeholder="Plex"
-                  {...form.getInputProps('name')}
-                />
 
-                <TextInput
+          <TextInput
-                  required
+            required
-                  label="Icon URL"
+            label="Icon URL"
-                  placeholder={DEFAULT_ICON}
+            placeholder="/favicon.svg"
-                  {...form.getInputProps('icon')}
+            {...form.getInputProps('icon')}
-                />
+          />
-                <TextInput
+          <TextInput
-                  required
+            required
-                  label="Service URL"
+            label="Service URL"
-                  placeholder="http://localhost:7575"
+            placeholder="http://localhost:7575"
-                  {...form.getInputProps('url')}
+            {...form.getInputProps('url')}
-                />
+          />
-                <TextInput
+          <TextInput
-                  label="On Click URL"
+            label="New tab URL"
-                  placeholder="http://sonarr.example.com"
+            placeholder="http://sonarr.example.com"
-                  {...form.getInputProps('openedUrl')}
+            {...form.getInputProps('openedUrl')}
-                />
+          />
-                <Select
+          <Select
-                  label="Service type"
+            label="Service type"
-                  defaultValue="Other"
+            defaultValue="Other"
-                  placeholder="Pick one"
+            placeholder="Pick one"
-                  required
+            required
-                  searchable
+            searchable
-                  data={ServiceTypeList}
+            data={ServiceTypeList}
-                  {...form.getInputProps('type')}
+            {...form.getInputProps('type')}
-                />
+          />
-                <Select
+          <Select
-                  label="Category"
+            label="Category"
-                  data={categoryList}
+            data={categoryList}
-                  placeholder="Select a category or create a new one"
+            placeholder="Select a category or create a new one"
-                  nothingFound="Nothing found"
+            nothingFound="Nothing found"
-                  searchable
+            searchable
-                  clearable
+            clearable
-                  creatable
+            creatable
-                  onClick={(e) => {
+            onClick={(e) => {
-                    e.preventDefault();
+              e.preventDefault();
-                  }}
+            }}
-                  getCreateLabel={(query) => `+ Create "${query}"`}
+            getCreateLabel={(query) => `+ Create "${query}"`}
-                  onCreate={(query) => {}}
+            onCreate={(query) => {}}
-                  {...form.getInputProps('category')}
+            {...form.getInputProps('category')}
-                />
+          />
-                <LoadingOverlay visible={isLoading} />
+          <LoadingOverlay visible={isLoading} />
-                {(form.values.type === 'Sonarr' ||
+          {(form.values.type === 'Sonarr' ||
-                  form.values.type === 'Radarr' ||
+            form.values.type === 'Radarr' ||
-                  form.values.type === 'Lidarr' ||
+            form.values.type === 'Lidarr' ||
-                  form.values.type === 'Readarr') && (
+            form.values.type === 'Readarr') && (
-                  <>
+            <>
-                    <TextInput
+              <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="HTTP Status Codes"
+                label="API key"
-                data={StatusCodes}
+                placeholder="Your API key"
-                placeholder="Select valid status codes"
+                value={form.values.apiKey}
-                clearButtonLabel="Clear selection"
+                onChange={(event) => {
-                nothingFound="Nothing found"
+                  form.setFieldValue('apiKey', event.currentTarget.value);
-                defaultValue={['200']}
+                }}
-                clearable
+                error={form.errors.apiKey && 'Invalid API key'}
-                searchable
-                {...form.getInputProps('status')}
               />
-              <Switch
+              <Text
-                label="Open service in new tab"
+                style={{
-                defaultChecked={form.values.newTab}
+                  alignSelf: 'center',
-                {...form.getInputProps('newTab')}
+                  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'}
               />
-            </Group>
+              <TextInput
-          </Tabs.Tab>
+                required
-        </Tabs>
+                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' || form.values.type === 'Transmission') && (
+            <>
+              <TextInput
+                required
+                label="Password"
+                placeholder="password"
+                value={form.values.password}
+                onChange={(event) => {
+                  form.setFieldValue('password', event.currentTarget.value);
+                }}
+                error={form.errors.password && 'Invalid password'}
+              />
+            </>
+          )}
+        </Group>
+
         <Group grow position="center" mt="xl">
           <Button type="submit">{props.message ?? 'Add service'}</Button>
         </Group>

src/components/AppShelf/AppShelf.story.tsx

@@ -0,0 +1,27 @@
+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

@@ -20,30 +20,15 @@ import DownloadComponent from '../modules/downloads/DownloadsModule';
 
 const useStyles = createStyles((theme, _params) => ({
   item: {
+    borderBottom: 0,
     overflow: 'hidden',
-    borderLeft: '3px solid transparent',
+    border: '1px solid transparent',
-    borderRight: '3px solid transparent',
+    borderRadius: theme.radius.lg,
-    borderBottom: '3px solid transparent',
-    borderRadius: '20px',
-    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
     marginTop: theme.spacing.md,
   },
 
-  control: {
+  itemOpened: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[3],
-    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',
   },
 }));
 
@@ -59,16 +44,11 @@ const AppShelf = (props: any) => {
   const { colorScheme } = useMantineColorScheme();
 
   const sensors = useSensors(
-    useSensor(TouchSensor, {
+    useSensor(TouchSensor, {}),
-      activationConstraint: {
-        delay: 500,
-        tolerance: 5,
-      },
-    }),
     useSensor(MouseSensor, {
       // Require the mouse to move by 10 pixels before activating
       activationConstraint: {
-        delay: 500,
+        delay: 250,
         tolerance: 5,
       },
     })
@@ -121,14 +101,7 @@ const AppShelf = (props: any) => {
         <SortableContext items={config.services}>
           <Grid gutter="xl" align="center">
             {filtered.map((service) => (
-              <Grid.Col
+              <Grid.Col key={service.id} span={6} xl={2} xs={4} sm={3} md={3}>
-                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>
             ))}
@@ -152,7 +125,6 @@ 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
@@ -163,6 +135,11 @@ const AppShelf = (props: any) => {
           order={2}
           iconPosition="right"
           multiple
+          styles={{
+            item: {
+              borderRadius: '20px',
+            },
+          }}
           initialState={toggledCategories}
           onChange={(idx) => settoggledCategories(idx)}
         >
@@ -177,23 +154,21 @@ const AppShelf = (props: any) => {
               {item()}
             </Accordion.Item>
           ) : null}
-          {downloadEnabled ? (
+          <Accordion.Item key="Downloads" label="Your downloads">
-            <Accordion.Item key="Downloads" label="Your downloads">
+            <Paper
-              <Paper
+              p="lg"
-                p="lg"
+              radius="lg"
-                radius="lg"
+              style={{
-                style={{
+                background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
-                  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,'} \
+                borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
                 ${(config.settings.appOpacity || 100) / 100}`,
-                }}
+              }}
-              >
+            >
-                <ModuleMenu module={DownloadsModule} />
+              <ModuleMenu module={DownloadsModule} />
-                <DownloadComponent />
+              <DownloadComponent />
-              </Paper>
+            </Paper>
-            </Accordion.Item>
+          </Accordion.Item>
-          ) : null}
         </Accordion>
       </Group>
     );

src/components/AppShelf/AppShelfItem.tsx

@@ -83,8 +83,8 @@ export function AppShelfItem(props: any) {
       >
         <Card.Section>
           <Anchor
-            target={service.newTab === false ? '_top' : '_blank'}
+            target="_blank"
-            href={service.openedUrl ? service.openedUrl : service.url}
+            href={service.url}
             style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
           >
             <Text mt="sm" align="center" lineClamp={1} weight={550}>
@@ -127,14 +127,13 @@ export function AppShelfItem(props: any) {
                   src={service.icon}
                   fit="contain"
                   onClick={() => {
-                    if (service.openedUrl) {
+                    if (service.openedUrl) window.open(service.openedUrl, '_blank');
-                      window.open(service.openedUrl, service.newTab === false ? '_top' : '_blank');
+                    else window.open(service.url);
-                    } else window.open(service.url, service.newTab === false ? '_top' : '_blank');
                   }}
                 />
               </motion.i>
             </AspectRatio>
-            <PingComponent url={service.url} status={service.status} />
+            <PingComponent url={service.url} />
           </Card.Section>
         </Center>
       </Card>

src/components/AppShelf/AppShelfMenu.tsx

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

src/components/Config/ConfigChanger.tsx

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

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

src/components/Settings/AdvancedSettings.tsx

@@ -3,7 +3,6 @@ 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() {
@@ -37,7 +36,7 @@ export default function TitleChanger() {
   };
 
   return (
-    <Group direction="column" grow mb="lg">
+    <Group direction="column" grow>
       <form onSubmit={form.onSubmit((values) => saveChanges(values))}>
         <Group grow direction="column">
           <TextInput label="Page title" placeholder="Homarr 🦞" {...form.getInputProps('title')} />
@@ -59,7 +58,6 @@ export default function TitleChanger() {
       <ColorSelector type="secondary" />
       <ShadeSelector />
       <OpacitySelector />
-      <AppCardWidthSelector />
     </Group>
   );
 }

src/components/Settings/AppCardWidthSelector.tsx

@@ -1,32 +0,0 @@
-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/CommonSettings.tsx

@@ -1,12 +1,13 @@
-import { Group, Text, SegmentedControl, TextInput } from '@mantine/core';
+import { ActionIcon, Group, Text, SegmentedControl, TextInput, Anchor } from '@mantine/core';
 import { useState } from 'react';
+import { IconBrandGithub as BrandGithub } from '@tabler/icons';
+import { CURRENT_VERSION } from '../../../data/constants';
 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();
@@ -24,16 +25,11 @@ export default function CommonSettings(args: any) {
   );
 
   return (
-    <Group direction="column" grow mb="lg">
+    <Group direction="column" grow>
       <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
@@ -55,24 +51,21 @@ export default function CommonSettings(args: any) {
           data={matches}
         />
         {searchUrl === 'Custom' && (
-          <>
+          <TextInput
-            <Tip>%s can be used as a placeholder for the query.</Tip>
+            label="Query URL"
-            <TextInput
+            placeholder="Custom query url"
-              label="Query URL"
+            value={customSearchUrl}
-              placeholder="Custom query URL"
+            onChange={(event) => {
-              value={customSearchUrl}
+              setCustomSearchUrl(event.currentTarget.value);
-              onChange={(event) => {
+              setConfig({
-                setCustomSearchUrl(event.currentTarget.value);
+                ...config,
-                setConfig({
+                settings: {
-                  ...config,
+                  ...config.settings,
-                  settings: {
+                  searchUrl: event.currentTarget.value,
-                    ...config.settings,
+                },
-                    searchUrl: event.currentTarget.value,
+              });
-                  },
+            }}
-                });
+          />
-              }}
-            />
-          </>
         )}
       </Group>
       <ColorSchemeSwitch />
@@ -80,7 +73,47 @@ export default function CommonSettings(args: any) {
       <ModuleEnabler />
       <ConfigChanger />
       <SaveConfigComponent />
-      <Tip>Upload your config file by dragging and dropping it onto the page!</Tip>
+      <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>
   );
 }

src/components/Settings/Credits.tsx

@@ -1,44 +0,0 @@
-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/SettingsMenu.story.tsx

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

src/components/Settings/SettingsMenu.tsx

@@ -1,23 +1,18 @@
-import { ActionIcon, Title, Tooltip, Drawer, Tabs, ScrollArea } from '@mantine/core';
+import { ActionIcon, Title, Tooltip, Drawer, Tabs } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';
 import { useState } from 'react';
 import { IconSettings } from '@tabler/icons';
 import AdvancedSettings from './AdvancedSettings';
 import CommonSettings from './CommonSettings';
-import Credits from './Credits';
 
 function SettingsMenu(props: any) {
   return (
     <Tabs grow>
       <Tabs.Tab data-autofocus label="Common">
-        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
+        <CommonSettings />
-          <CommonSettings />
-        </ScrollArea>
       </Tabs.Tab>
       <Tabs.Tab label="Customizations">
-        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
+        <AdvancedSettings />
-          <AdvancedSettings />
-        </ScrollArea>
       </Tabs.Tab>
     </Tabs>
   );
@@ -31,14 +26,13 @@ export function SettingsMenuButton(props: any) {
     <>
       <Drawer
         size="xl"
-        padding="lg"
+        padding="xl"
         position="right"
-        title={<Title order={5}>Settings</Title>}
+        title={<Title order={3}>Settings</Title>}
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
       >
         <SettingsMenu />
-        <Credits />
       </Drawer>
       <ActionIcon
         variant="default"

src/components/layout/Header.tsx

@@ -1,11 +1,23 @@
-import { Box, createStyles, Group, Header as Head } from '@mantine/core';
+import React from 'react';
+import {
+  createStyles,
+  Header as Head,
+  Group,
+  Box,
+  Burger,
+  Drawer,
+  Title,
+  ScrollArea,
+  ActionIcon,
+  Transition,
+} 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';
+import SearchBar from '../modules/search/SearchModule';
+import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
+import { SettingsMenuButton } from '../Settings/SettingsMenu';
+import { ModuleWrapper } from '../modules/moduleWrapper';
+import { CalendarModule, TotalDownloadsModule, WeatherModule, DateModule } from '../modules';
 
 const HEADER_HEIGHT = 60;
 
@@ -35,9 +47,49 @@ export function Header(props: any) {
         </Box>
         <Group noWrap>
           <SearchBar />
-          <DockerMenuButton />
           <SettingsMenuButton />
           <AddItemShelfButton />
+          <ActionIcon className={classes.burger} variant="default" radius="md" size="xl">
+            <Burger
+              opened={!hidden}
+              onClick={(_) => {
+                toggleHidden();
+                toggleOpened();
+              }}
+            />
+          </ActionIcon>
+          <Drawer
+            size="auto"
+            padding="xl"
+            position="right"
+            hidden={hidden}
+            title={<Title order={3}>Modules</Title>}
+            opened
+            onClose={() => {
+              toggleHidden();
+            }}
+          >
+            <Transition
+              mounted={opened}
+              transition="pop-top-right"
+              duration={300}
+              timingFunction="ease"
+              onExit={() => toggleOpened()}
+            >
+              {(styles) => (
+                <div style={styles}>
+                  <ScrollArea style={{ height: '90vh' }}>
+                    <Group my="sm" grow direction="column" style={{ width: 300 }}>
+                      <ModuleWrapper module={CalendarModule} />
+                      <ModuleWrapper module={TotalDownloadsModule} />
+                      <ModuleWrapper module={WeatherModule} />
+                      <ModuleWrapper module={DateModule} />
+                    </Group>
+                  </ScrollArea>
+                </div>
+              )}
+            </Transition>
+          </Drawer>
         </Group>
       </Group>
     </Head>

src/components/layout/Layout.tsx

@@ -19,8 +19,8 @@ export default function Layout({ children, style }: any) {
   return (
     <AppShell
       header={<Header />}
-      navbar={widgetPosition ? <Navbar /> : undefined}
+      navbar={widgetPosition ? <Navbar /> : <></>}
-      aside={widgetPosition ? undefined : <Aside />}
+      aside={widgetPosition ? <></> : <Aside />}
       footer={<Footer links={[]} />}
     >
       <HeaderConfig />

src/components/layout/Logo.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useColorTheme } from '../../tools/color';
 import { useConfig } from '../../tools/state';
 
-export function Logo({ style, withoutText }: any) {
+export function Logo({ style }: any) {
   const { config } = useConfig();
   const { primaryColor, secondaryColor } = useColorTheme();
 
@@ -17,28 +17,26 @@ export function Logo({ style, withoutText }: any) {
           position: 'relative',
         }}
       />
-      {withoutText ? null : (
+      <NextLink
-        <NextLink
+        href="/"
-          href="/"
+        style={{
-          style={{
+          textDecoration: 'none',
-            textDecoration: 'none',
+          position: 'relative',
-            position: 'relative',
+        }}
+      >
+        <Text
+          sx={style}
+          weight="bold"
+          variant="gradient"
+          gradient={{
+            from: primaryColor,
+            to: secondaryColor,
+            deg: 145,
           }}
         >
-          <Text
+          {config.settings.title || 'Homarr'}
-            sx={style}
+        </Text>
-            weight="bold"
+      </NextLink>
-            variant="gradient"
-            gradient={{
-              from: primaryColor,
-              to: secondaryColor,
-              deg: 145,
-            }}
-          >
-            {config.settings.title || 'Homarr'}
-          </Text>
-        </NextLink>
-      )}
     </Group>
   );
 }

src/components/layout/Tip.tsx

@@ -1,19 +0,0 @@
-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

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

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

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

src/components/modules/calendar/CalendarModule.tsx

@@ -29,12 +29,6 @@ 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) {
@@ -63,74 +57,55 @@ export default function CalendarComponent(props: any) {
     if (!service || !service.apiKey) {
       return Promise.resolve({ data: [] });
     }
-    return axios.post(`/api/modules/calendar?type=${type}`, { id: service.id });
+    return axios.post(`/api/modules/calendar?type=${type}`, { ...service });
   }
 
   useEffect(() => {
     // Create each Sonarr service and get the medias
-    const currentSonarrMedias: any[] = [];
+    const currentSonarrMedias: any[] = [...sonarrMedias];
     Promise.all(
       sonarrServices.map((service) =>
-        getMedias(service, 'sonarr')
+        getMedias(service, 'sonarr').then((res) => {
-          .then((res) => {
+          currentSonarrMedias.push(...res.data);
-            currentSonarrMedias.push(...res.data);
+        })
-          })
-          .catch(() => {
-            currentSonarrMedias.push([]);
-          })
       )
     ).then(() => {
       setSonarrMedias(currentSonarrMedias);
     });
-    const currentRadarrMedias: any[] = [];
+    const currentRadarrMedias: any[] = [...radarrMedias];
     Promise.all(
       radarrServices.map((service) =>
-        getMedias(service, 'radarr')
+        getMedias(service, 'radarr').then((res) => {
-          .then((res) => {
+          currentRadarrMedias.push(...res.data);
-            currentRadarrMedias.push(...res.data);
+        })
-          })
-          .catch(() => {
-            currentRadarrMedias.push([]);
-          })
       )
     ).then(() => {
       setRadarrMedias(currentRadarrMedias);
     });
-    const currentLidarrMedias: any[] = [];
+    const currentLidarrMedias: any[] = [...lidarrMedias];
     Promise.all(
       lidarrServices.map((service) =>
-        getMedias(service, 'lidarr')
+        getMedias(service, 'lidarr').then((res) => {
-          .then((res) => {
+          currentLidarrMedias.push(...res.data);
-            currentLidarrMedias.push(...res.data);
+        })
-          })
-          .catch(() => {
-            currentLidarrMedias.push([]);
-          })
       )
     ).then(() => {
       setLidarrMedias(currentLidarrMedias);
     });
-    const currentReadarrMedias: any[] = [];
+    const currentReadarrMedias: any[] = [...readarrMedias];
     Promise.all(
       readarrServices.map((service) =>
-        getMedias(service, 'readarr')
+        getMedias(service, 'readarr').then((res) => {
-          .then((res) => {
+          currentReadarrMedias.push(...res.data);
-            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()
@@ -140,13 +115,6 @@ export default function CalendarComponent(props: any) {
             }
           : {}
       }
-      styles={{
-        calendarHeader: {
-          marginRight: 15,
-          marginLeft: 15,
-        },
-      }}
-      allowLevelChange={false}
       dayClassName={(date, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
       renderDay={(renderdate) => (
         <DayComponent

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

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

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

@@ -1,233 +0,0 @@
-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

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

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

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

src/components/modules/date/DateModule.tsx

@@ -23,7 +23,7 @@ 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 ?? true;
+  const isFullTime = config?.modules?.[DateModule.title]?.options?.full?.value ?? false;
   const formatString = isFullTime ? 'HH:mm' : 'h:mm A';
   // Change date on minute change
   // Note: Using 10 000ms instead of 1000ms to chill a little :)

src/components/modules/docker/ContainerActionBar.tsx

@@ -1,164 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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

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

src/components/modules/downloads/DownloadsModule.tsx

@@ -15,7 +15,6 @@ 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';
@@ -53,32 +52,14 @@ export default function DownloadComponent() {
   useEffect(() => {
     setIsLoading(true);
     if (downloadServices.length === 0) return;
-    const interval = setInterval(() => {
+    setSafeInterval(() => {
       // Send one request with each download service inside
-      axios
+      axios.post('/api/modules/downloads', { config }).then((response) => {
-        .post('/api/modules/downloads')
+        setTorrents(response.data);
-        .then((response) => {
+        setIsLoading(false);
-          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',
-          });
-          clearInterval(interval);
-        });
     }, 5000);
-  }, []);
+  }, [config.services]);
 
   if (downloadServices.length === 0) {
     return (
@@ -177,7 +158,7 @@ export default function DownloadComponent() {
             <Progress
               radius="lg"
               color={
-                torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'
+                torrent.state === 'paused' ? 'yellow' : torrent.progress === 1 ? 'green' : 'blue'
               }
               value={torrent.progress * 100}
               size="lg"

src/components/modules/downloads/TotalDownloadsModule.tsx

@@ -6,7 +6,6 @@ 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';
@@ -43,28 +42,11 @@ export default function TotalDownloadsComponent() {
   const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
   const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
   useEffect(() => {
-    const interval = setSafeInterval(() => {
+    if (downloadServices.length === 0) return;
-      // Send one request with each download service inside
+    setSafeInterval(() => {
-      axios
+      axios.post('/api/modules/downloads', { config }).then((response) => {
-        .post('/api/modules/downloads')
+        setTorrents(response.data);
-        .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',
-          });
-          clearInterval(interval);
-        });
     }, 1000);
   }, [config.services]);
 

src/components/modules/index.ts

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

src/components/modules/moduleWrapper.tsx

@@ -1,18 +1,10 @@
-import {
+import { Button, Card, Group, Menu, Switch, TextInput, useMantineColorScheme } from '@mantine/core';
-  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);
@@ -23,38 +15,6 @@ 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
@@ -84,11 +44,7 @@ function getItems(module: IModule) {
                 id={optionName}
                 name={optionName}
                 label={values[index].name}
-                defaultValue={
+                defaultValue={(moduleInConfig?.options?.[keys[index]]?.value as string) ?? ''}
-                  (moduleInConfig?.options?.[keys[index]]?.value as string) ??
-                  (values[index].value as string) ??
-                  ''
-                }
                 onChange={(e) => {}}
               />
 
@@ -103,9 +59,7 @@ 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) ??
+              (moduleInConfig?.options?.[keys[index]]?.value as boolean) ?? false
-              (values[index].value as boolean) ??
-              false
             }
             key={keys[index]}
             onClick={(e) => {
@@ -166,8 +120,8 @@ export function ModuleWrapper(props: any) {
         styles={{
           root: {
             position: 'absolute',
-            top: 12,
+            top: 15,
-            right: 12,
+            right: 15,
           },
         }}
       />

src/components/modules/modules.tsx

@@ -1,14 +1,11 @@
 // This interface is to be used in all the modules of the project
 // Each module should have its own interface and call the following function:
 // TODO: Add a function to register a module
-
-import { TablerIcon } from '@tabler/icons';
-
 // Note: Maybe use context to keep track of the modules
 export interface IModule {
   title: string;
   description: string;
-  icon: TablerIcon;
+  icon: React.ReactNode;
   component: React.ComponentType;
   options?: Option;
 }
@@ -19,6 +16,5 @@ interface Option {
 
 export interface OptionValues {
   name: string;
-  value: boolean | string | string[];
+  value: boolean | string;
-  options?: string[];
 }

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

@@ -0,0 +1,16 @@
+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, { AxiosResponse } from 'axios';
+import axios from 'axios';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { IconPlug as Plug } from '@tabler/icons';
@@ -19,37 +19,18 @@ 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((response) => {
+      .then(() => {
-        statusCheck(response);
+        setOnline('online');
       })
-      .catch((error) => {
+      .catch(() => {
-        statusCheck(error.response);
+        setOnline('down');
       });
   }, [config.modules?.[PingModule.title]?.enabled]);
   if (!exists) {
@@ -59,13 +40,7 @@ export default function PingComponent(props: any) {
     <Tooltip
       radius="lg"
       style={{ position: 'absolute', bottom: 20, right: 20 }}
-      label={
+      label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'}
-        isOnline === 'loading'
-          ? 'Loading...'
-          : isOnline === 'online'
-          ? `Online - ${response}`
-          : `Offline - ${response}`
-      }
     >
       <motion.div
         animate={{

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

@@ -0,0 +1,10 @@
+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,4 +1,4 @@
-import { Kbd, createStyles, Autocomplete } from '@mantine/core';
+import { Kbd, createStyles, Text, Popover, Autocomplete } from '@mantine/core';
 import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
 import { useEffect, useRef, useState } from 'react';
 import {
@@ -96,32 +96,44 @@ export default function SearchBar(props: any) {
           } else if (isTorrent) {
             window.open(`https://bitsearch.to/search?q=${query.substring(3)}`);
           } else {
-            window.open(
+            window.open(`${queryUrl}${values.query}`);
-              `${
-                queryUrl.includes('%s')
-                  ? queryUrl.replace('%s', values.query)
-                  : queryUrl + values.query
-              }`
-            );
           }
         }, 20);
       })}
     >
-      <Autocomplete
+      <Popover
-        autoFocus
+        opened={opened}
-        variant="filled"
+        position="bottom"
-        data={autocompleteData}
+        placement="start"
-        icon={icon}
+        width={260}
-        ref={textInput}
+        withArrow
-        rightSectionWidth={90}
-        rightSection={rightSection}
         radius="md"
-        size="md"
+        trapFocus={false}
-        styles={{ rightSection: { pointerEvents: 'none' } }}
+        transition="pop-bottom-right"
-        placeholder="Search the web..."
+        onFocusCapture={() => setOpened(true)}
-        {...props}
+        onBlurCapture={() => setOpened(false)}
-        {...form.getInputProps('query')}
+        target={
-      />
+          <Autocomplete
+            variant="filled"
+            data={autocompleteData}
+            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>
     </form>
   );
 }

src/components/modules/weather/WeatherModule.tsx

@@ -1,4 +1,4 @@
-import { Group, Space, Title, Tooltip, Skeleton } from '@mantine/core';
+import { Group, Space, Title, Tooltip } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import {
@@ -29,7 +29,7 @@ export const WeatherModule: IModule = {
     },
     location: {
       name: 'Current location',
-      value: 'Paris',
+      value: '',
     },
   },
 };
@@ -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) ?? 'Paris';
+    (config?.modules?.[WeatherModule.title]?.options?.location?.value as string) ?? '';
   const isFahrenheit: boolean =
     (config?.modules?.[WeatherModule.title]?.options?.freedomunit?.value as boolean) ?? false;
 
@@ -157,18 +157,7 @@ export default function WeatherComponent(props: any) {
       });
   }, [cityInput]);
   if (!weather.current_weather) {
-    return (
+    return null;
-      <>
-        <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) + 32).toFixed(1)}°F` : `${value.toFixed(1)}°C`;

src/middleware.ts

@@ -1,15 +0,0 @@
-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) => ({
   },
 }));
 
-function Illustration(props: React.ComponentPropsWithoutRef<'svg'>) {
+export 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 @@ function Illustration(props: React.ComponentPropsWithoutRef<'svg'>) {
   );
 }
 
-export default function Custom404() {
+export default function NothingFoundBackground() {
   const { classes } = useStyles();
 
   return (

src/pages/_app.tsx

@@ -1,7 +1,7 @@
 import { GetServerSidePropsContext } from 'next';
 import { useState } from 'react';
 import { AppProps } from 'next/app';
-import { getCookie, setCookie } from 'cookies-next';
+import { getCookie, setCookies } from 'cookies-next';
 import Head from 'next/head';
 import { MantineProvider, ColorScheme, ColorSchemeProvider, MantineTheme } from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
@@ -30,7 +30,7 @@ export default function App(this: any, props: AppProps & { colorScheme: ColorSch
   const toggleColorScheme = (value?: ColorScheme) => {
     const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
     setColorScheme(nextColorScheme);
-    setCookie('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
+    setCookies('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
   };
   useHotkeys([['mod+J', () => toggleColorScheme()]]);
 

src/pages/_middleware.ts

@@ -0,0 +1,15 @@
+import { NextFetchEvent, NextRequest, NextResponse } from 'next/server';
+
+export function middleware(req: NextRequest, ev: NextFetchEvent) {
+  const ok = req.cookies.password === process.env.PASSWORD;
+  const url = req.nextUrl.clone();
+  if (
+    !ok &&
+    url.pathname !== '/login' &&
+    process.env.PASSWORD &&
+    url.pathname !== '/api/configs/tryPassword'
+  ) {
+    url.pathname = '/login';
+  }
+  return NextResponse.rewrite(url);
+}

src/pages/api/docker/container/[id].tsx

@@ -1,60 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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,24 +1,9 @@
 import axios from 'axios';
-import { getCookie } from 'cookies-next';
 import { NextApiRequest, NextApiResponse } from 'next';
-import { getConfig } from '../../../tools/getConfig';
+import { serviceItem } from '../../../tools/types';
-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 }[] = [
@@ -39,6 +24,8 @@ 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',
@@ -57,15 +44,12 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
     });
   }
   // Get the origin URL
-  let { href: origin } = new URL(service.url);
+  const { 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}`;
-  return axios
+  const data = await axios.get(
-    .get(`${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`)
+    `${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));
+  return res.status(200).json(data.data);
   // // Make a request to the URL
   // const response = await axios.get(url);
   // // Return the response

src/pages/api/modules/downloads.ts

@@ -2,65 +2,59 @@ 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 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[] = [];
-
+  const { config }: { config: Config } = req.body;
-  if (!qBittorrentServices && !delugeServices && !transmissionServices) {
+  const qBittorrentService = config.services
+    .filter((service) => service.type === 'qBittorrent')
+    .at(0);
+  const delugeService = config.services.filter((service) => service.type === 'Deluge').at(0);
+  const transmissionService = config.services
+    .filter((service) => service.type === 'Transmission')
+    .at(0);
+  if (!qBittorrentService && !delugeService && !transmissionService) {
     return res.status(500).json({
       statusCode: 500,
-      message: 'Missing services',
+      message: 'Missing service',
     });
   }
-  try {
+  if (qBittorrentService) {
-    await Promise.all(
+    torrents.push(
-      qBittorrentServices.map((service) =>
+      ...(
-        new QBittorrent({
+        await new QBittorrent({
-          baseUrl: service.url,
+          baseUrl: qBittorrentService.url,
-          username: service.username,
+          username: qBittorrentService.username,
-          password: service.password,
+          password: qBittorrentService.password,
-        })
+        }).getAllData()
-          .getAllData()
+      ).torrents
-          .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);
   }
-  return res.status(200).json(torrents);
+  if (delugeService) {
+    torrents.push(
+      ...(
+        await new Deluge({
+          baseUrl: delugeService.url,
+          password: delugeService.password,
+        }).getAllData()
+      ).torrents
+    );
+  }
+  if (transmissionService) {
+    torrents.push(
+      ...(
+        await new Transmission({
+          baseUrl: transmissionService.url,
+          username: transmissionService.username,
+          password: transmissionService.password,
+        }).getAllData()
+      ).torrents
+    );
+  }
+  res.status(200).json(torrents);
 }
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {

src/pages/api/modules/ping.ts

@@ -7,14 +7,10 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
   await axios
     .get(url as string)
     .then((response) => {
-      res.status(response.status).json(response.statusText);
+      res.status(200).json(response.data);
     })
     .catch((error) => {
-      if (error.response) {
+      res.status(500).json(error);
-        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/index.tsx

@@ -1,4 +1,4 @@
-import { getCookie, setCookie } from 'cookies-next';
+import { getCookie, setCookies } from 'cookies-next';
 import { GetServerSidePropsContext } from 'next';
 import { useEffect } from 'react';
 import AppShelf from '../components/AppShelf/AppShelf';
@@ -16,7 +16,7 @@ export async function getServerSideProps({
 }: GetServerSidePropsContext): Promise<{ props: { config: Config } }> {
   let cookie = getCookie('config-name', { req, res });
   if (!cookie) {
-    setCookie('config-name', 'default', {
+    setCookies('config-name', 'default', {
       req,
       res,
       maxAge: 60 * 60 * 24 * 30,

src/pages/login.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { PasswordInput, Anchor, Paper, Title, Text, Container, Group, Button } from '@mantine/core';
-import { setCookie } from 'cookies-next';
+import { setCookies } 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() {
@@ -16,26 +15,22 @@ export default function AuthenticationTitle() {
   });
   return (
     <Container
-      size="lg"
+      size={420}
       style={{
         height: '100vh',
         display: 'flex',
-        width: '100%',
+        width: 420,
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
       }}
     >
-      <Group>
+      <Title
-        <Title
+        align="center"
-          align="center"
+        sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })}
-          sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })}
+      >
-        >
+        Welcome back!
-          Welcome back!
+      </Title>
-        </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()}>
@@ -43,17 +38,10 @@ export default function AuthenticationTitle() {
         </Anchor>
       </Text>
 
-      <Paper
+      <Paper withBorder shadow="md" p={30} mt={30} radius="md" style={{ width: 420 }}>
-        withBorder
-        shadow="md"
-        p={30}
-        mt={30}
-        radius="md"
-        style={{ width: '100%', maxWidth: 420 }}
-      >
         <form
           onSubmit={form.onSubmit((values) => {
-            setCookie('password', values.password, {
+            setCookies('password', values.password, {
               maxAge: 60 * 60 * 24 * 30,
               sameSite: 'lax',
             });
@@ -76,7 +64,8 @@ export default function AuthenticationTitle() {
                       id: 'load-data',
                       color: 'teal',
                       title: 'Password correct',
-                      message: undefined,
+                      message:
+                        'Notification will close in 2 seconds, you can close this notification now',
                       icon: <IconCheck />,
                       autoClose: 300,
                       onClose: () => {
@@ -89,7 +78,8 @@ export default function AuthenticationTitle() {
                       id: 'load-data',
                       color: 'red',
                       title: 'Password is wrong, please try again.',
-                      message: undefined,
+                      message:
+                        'Notification will close in 2 seconds, you can close this notification now',
                       icon: <IconX />,
                       autoClose: 2000,
                     });
@@ -103,10 +93,14 @@ export default function AuthenticationTitle() {
             label="Password"
             placeholder="Your password"
             required
-            autoFocus
             mt="md"
             {...form.getInputProps('password')}
           />
+          <Group position="apart" mt="md">
+            <Anchor<'a'> onClick={(event) => event.preventDefault()} href="#" size="sm">
+              Forgot password?
+            </Anchor>
+          </Group>
           <Button fullWidth type="submit" mt="xl">
             Sign in
           </Button>

src/tools/addToHomarr.ts

@@ -1,57 +0,0 @@
-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/getConfig.ts

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

src/tools/types.ts

@@ -12,7 +12,6 @@ export interface Settings {
   background?: string;
   appOpacity?: number;
   widgetPosition?: string;
-  appCardWidth?: number;
 }
 
 export interface Config {
@@ -32,135 +31,30 @@ 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',
-  'Dash.',
-  'Deluge',
   'Emby',
+  'Deluge',
   'Lidarr',
   'Plex',
-  'qBittorrent',
   'Radarr',
   'Readarr',
   'Sonarr',
+  'qBittorrent',
   'Transmission',
 ];
 export type ServiceType =
   | 'Other'
-  | 'Dash.'
-  | 'Deluge'
   | 'Emby'
+  | 'Deluge'
   | '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;
   name: string;
@@ -172,6 +66,4 @@ export interface serviceItem {
   password?: string;
   username?: string;
   openedUrl?: string;
-  newTab?: boolean;
-  status?: string[];
 }