🚀 v0.8.2 🐋 Docker fixes and quality of life changes

https://github.com/ajnart/homarr/compare/v0.8.0...v0.8.2

.github/ISSUE_TEMPLATE/feature-request.yml

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

.vscode/launch.json

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

data/configs/default.json

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

data/constants.ts

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

next.config.js

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

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "homarr",
-	"version": "0.8.0",
+	"version": "0.8.2",
 	"description": "Homarr - A homepage for your server.",
 	"repository": {
 		"type": "git",
@@ -25,66 +25,66 @@
 	},
 	"dependencies": {
 		"@ctrl/deluge": "^4.1.0",
-		"@ctrl/qbittorrent": "^4.0.0",
+		"@ctrl/qbittorrent": "^4.1.0",
-		"@ctrl/shared-torrent": "^4.1.0",
+		"@ctrl/shared-torrent": "^4.1.1",
 		"@ctrl/transmission": "^4.1.1",
-		"@dnd-kit/core": "^6.0.1",
+		"@dnd-kit/core": "^6.0.5",
-		"@dnd-kit/sortable": "^7.0.0",
+		"@dnd-kit/sortable": "^7.0.1",
 		"@dnd-kit/utilities": "^3.2.0",
-		"@mantine/core": "^4.2.8",
+		"@mantine/core": "^4.2.12",
-		"@mantine/dates": "^4.2.8",
+		"@mantine/dates": "^4.2.12",
-		"@mantine/dropzone": "^4.2.8",
+		"@mantine/dropzone": "^4.2.12",
-		"@mantine/form": "^4.2.8",
+		"@mantine/form": "^4.2.12",
-		"@mantine/hooks": "^4.2.8",
+		"@mantine/hooks": "^4.2.12",
-		"@mantine/next": "^4.2.8",
+		"@mantine/next": "^4.2.12",
-		"@mantine/notifications": "^4.2.8",
+		"@mantine/notifications": "^4.2.12",
-		"@mantine/prism": "^4.2.8",
+		"@mantine/prism": "^4.2.12",
 		"@nivo/core": "^0.79.0",
 		"@nivo/line": "^0.79.1",
-		"@tabler/icons": "^1.68.0",
+		"@tabler/icons": "^1.76.0",
+		"add": "^2.0.6",
 		"axios": "^0.27.2",
 		"cookies-next": "^2.1.1",
-		"dayjs": "^1.11.3",
+		"dayjs": "^1.11.4",
 		"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.2.3",
-		"prism-react-renderer": "^1.3.1",
+		"prism-react-renderer": "^1.3.5",
-		"react": "^17.0.1",
+		"react": "^18.2.0",
-		"react-dom": "^17.0.1",
+		"react-dom": "^18.2.0",
-		"systeminformation": "^5.11.16",
+		"systeminformation": "^5.12.1",
-		"uuid": "^8.3.2"
+		"uuid": "^8.3.2",
+		"yarn": "^1.22.19"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.17.8",
+		"@babel/core": "^7.18.9",
-		"@next/bundle-analyzer": "^12.2.0",
+		"@next/bundle-analyzer": "^12.2.3",
-		"@next/eslint-plugin-next": "^12.2.0",
+		"@next/eslint-plugin-next": "^12.2.3",
-		"@storybook/react": "^6.5.4",
+		"@storybook/react": "^6.5.9",
 		"@types/dockerode": "^3.3.9",
-		"@types/node": "^17.0.23",
+		"@types/node": "^18.0.6",
-		"@types/react": "17.0.43",
+		"@types/react": "^18.0.15",
 		"@types/uuid": "^8.3.4",
-		"@typescript-eslint/eslint-plugin": "^5.16.0",
+		"@typescript-eslint/eslint-plugin": "^5.30.7",
-		"@typescript-eslint/parser": "^5.16.0",
+		"@typescript-eslint/parser": "^5.30.7",
-		"eslint": "^8.11.0",
+		"eslint": "^8.20.0",
 		"eslint-config-airbnb": "^19.0.4",
-		"eslint-config-airbnb-typescript": "^16.1.0",
+		"eslint-config-airbnb-typescript": "^17.0.0",
-		"eslint-config-mantine": "1.1.0",
+		"eslint-config-mantine": "^2.0.0",
-		"eslint-plugin-import": "^2.25.4",
+		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-jest": "^26.1.3",
+		"eslint-plugin-jest": "^26.6.0",
-		"eslint-plugin-jsx-a11y": "^6.5.1",
+		"eslint-plugin-jsx-a11y": "^6.6.1",
-		"eslint-plugin-react": "^7.29.4",
+		"eslint-plugin-react": "^7.30.1",
-		"eslint-plugin-react-hooks": "^4.3.0",
+		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-storybook": "^0.5.11",
+		"eslint-plugin-storybook": "^0.6.1",
-		"eslint-plugin-testing-library": "^5.2.0",
+		"eslint-plugin-testing-library": "^5.5.1",
 		"eslint-plugin-unused-imports": "^2.0.0",
-		"jest": "^28.1.0",
+		"jest": "^28.1.3",
-		"prettier": "^2.6.2",
+		"prettier": "^2.7.1",
 		"require-from-string": "^2.0.2",
-		"typescript": "4.6.4"
+		"typescript": "^4.7.4",
-	},
+		"yarn-upgrade-all": "^0.7.1"
-	"resolutions": {
-		"@types/react": "17.0.30"
 	},
 	"packageManager": "yarn@3.2.1"
 }

src/components/AppShelf/AddAppShelfItem.tsx

@@ -12,7 +12,6 @@ import {
   Select,
   Switch,
   Tabs,
-  Text,
   TextInput,
   Title,
   Tooltip,
@@ -23,7 +22,7 @@ import { IconApps as Apps } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList, StatusCodes } from '../../tools/types';
+import { tryMatchPort, ServiceTypeList, StatusCodes } from '../../tools/types';
 import Tip from '../layout/Tip';
 
 export function AddItemShelfButton(props: any) {
@@ -55,7 +54,8 @@ export function AddItemShelfButton(props: any) {
   );
 }
 
-function MatchIcon(name: string, form: any) {
+function MatchIcon(name: string | undefined, form: any) {
+  if (name === undefined || name === '') return null;
   fetch(
     `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
       .replace(/\s+/g, '-')
@@ -77,24 +77,6 @@ function MatchService(name: string, form: any) {
   }
 }
 
-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: '8787' },
-    { name: 'deluge', value: '8112' },
-    { name: 'transmission', value: '9091' },
-    { name: 'dash.', value: '3001' },
-  ];
-  // Match name with portmap key
-  const port = portmap.find((p) => p.name === name.toLowerCase());
-  if (port) {
-    form.setFieldValue('url', `http://localhost:${port.value}`);
-  }
-}
-
 const DEFAULT_ICON = '/favicon.svg';
 
 export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
@@ -154,7 +136,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
     if (form.values.name !== debounced || form.values.icon !== DEFAULT_ICON) return;
     MatchIcon(form.values.name, form);
     MatchService(form.values.name, form);
-    MatchPort(form.values.name, form);
+    tryMatchPort(form.values.name, form);
   }, [debounced]);
 
   // Try to set const hostname to new URL(form.values.url).hostname)

src/components/AppShelf/AppShelf.tsx

@@ -178,21 +178,21 @@ const AppShelf = (props: any) => {
             </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/Config/ConfigChanger.tsx

@@ -1,5 +1,5 @@
 import { Center, Loader, Select, Tooltip } from '@mantine/core';
-import { setCookies } from 'cookies-next';
+import { setCookie } from 'cookies-next';
 import { useEffect, useState } from 'react';
 import { useConfig } from '../../tools/state';
 
@@ -26,7 +26,7 @@ export default function ConfigChanger() {
       label="Config loader"
       onChange={(e) => {
         loadConfig(e ?? 'default');
-        setCookies('config-name', e ?? 'default', {
+        setCookie('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 { setCookies } from 'cookies-next';
+import { setCookie } from 'cookies-next';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
 import { migrateToIdConfig } from '../../tools/migrate';
@@ -90,7 +90,7 @@ export default function LoadConfigComponent(props: any) {
             icon: <Check />,
             message: undefined,
           });
-          setCookies('config-name', newConfig.name, {
+          setCookie('config-name', newConfig.name, {
             maxAge: 60 * 60 * 24 * 30,
             sameSite: 'strict',
           });

src/components/Docker/DockerMenu.tsx

@@ -1,91 +0,0 @@
-import { Menu, Text, useMantineTheme } from '@mantine/core';
-import { showNotification, updateNotification } from '@mantine/notifications';
-import {
-  IconCheck,
-  IconCodePlus,
-  IconPlayerPlay,
-  IconPlayerStop,
-  IconRotateClockwise,
-  IconX,
-} from '@tabler/icons';
-import axios from 'axios';
-import Dockerode from 'dockerode';
-
-function sendNotification(action: string, containerId: string, containerName: string) {
-  showNotification({
-    id: 'load-data',
-    loading: true,
-    title: `${action}ing container ${containerName}`,
-    message: 'Your password is being checked...',
-    autoClose: false,
-    disallowClose: true,
-  });
-  axios.get(`/api/docker/container/${containerId}?action=${action}`).then((res) => {
-    setTimeout(() => {
-      if (res.data.success === true) {
-        updateNotification({
-          id: 'load-data',
-          title: 'Container restarted',
-          message: 'Your container was successfully restarted',
-          icon: <IconCheck />,
-          autoClose: 2000,
-        });
-      }
-      if (res.data.success === false) {
-        updateNotification({
-          id: 'load-data',
-          color: 'red',
-          title: 'There was an error restarting your container.',
-          message: 'Your container has encountered issues while restarting.',
-          icon: <IconX />,
-          autoClose: 2000,
-        });
-      }
-    }, 500);
-  });
-}
-
-function restart(container: Dockerode.ContainerInfo) {
-  sendNotification('restart', container.Id, container.Names[0]);
-}
-function stop(container: Dockerode.ContainerInfo) {
-  console.log('stoping container', container.Id);
-}
-function start(container: Dockerode.ContainerInfo) {
-  console.log('starting container', container.Id);
-}
-
-export default function DockerMenu(props: any) {
-  const { container }: { container: Dockerode.ContainerInfo } = props;
-  const theme = useMantineTheme();
-  if (container === undefined) {
-    return null;
-  }
-  return (
-    <Menu shadow="lg" radius="md">
-      <Menu.Label>Actions</Menu.Label>
-      <Menu.Item icon={<IconRotateClockwise color="orange" />} onClick={() => restart(container)}>
-        <Text>Restart</Text>
-      </Menu.Item>
-      {container.State === 'running' ? (
-        <Menu.Item icon={<IconPlayerStop color="red" />}>
-          <Text>Stop</Text>
-        </Menu.Item>
-      ) : (
-        <Menu.Item icon={<IconPlayerPlay color="green" />}>
-          <Text>Start</Text>
-        </Menu.Item>
-      )}
-      {/* <Menu.Item icon={<IconDownload color="blue" />}>
-        <Text>Pull latest image </Text>
-      </Menu.Item>
-      <Menu.Item icon={<IconFileText color="grey" />}>
-        <Text>Logs</Text>
-      </Menu.Item> */}
-      <Menu.Label>Homarr</Menu.Label>
-      <Menu.Item icon={<IconCodePlus color={theme.primaryColor} />}>
-        <Text>Add to Homarr</Text>
-      </Menu.Item>
-    </Menu>
-  );
-}

src/components/Docker/DockerTable.tsx

@@ -1,90 +0,0 @@
-import { Table, Checkbox, Group, Badge, createStyles } from '@mantine/core';
-import Dockerode from 'dockerode';
-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 { classes, cx } = useStyles();
-
-  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 === containers.length ? [] : containers.map((c) => c)
-    );
-
-  const rows = containers.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)
-              .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 (
-    <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 === containers.length}
-              indeterminate={selection.length > 0 && selection.length !== containers.length}
-              transitionDuration={0}
-            />
-          </th>
-          <th>Name</th>
-          <th>Image</th>
-          <th>Ports</th>
-          <th>State</th>
-        </tr>
-      </thead>
-      <tbody>{rows}</tbody>
-    </Table>
-  );
-}

src/components/layout/Header.tsx

@@ -1,26 +1,8 @@
-import {
+import { Box, createStyles, Group, Header as Head } from '@mantine/core';
-  ActionIcon,
-  Box,
-  Burger,
-  createStyles,
-  Drawer,
-  Group,
-  Header as Head,
-  ScrollArea,
-  Title,
-  Transition,
-} from '@mantine/core';
 import { useBooleanToggle } from '@mantine/hooks';
 import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
-import {
+
-  CalendarModule,
+import DockerMenuButton from '../modules/docker/DockerModule';
-  DateModule,
-  TotalDownloadsModule,
-  WeatherModule,
-  DashdotModule,
-} from '../modules';
-import { ModuleWrapper } from '../modules/moduleWrapper';
-import DockerDrawer from '../Docker/DockerDrawer';
 import SearchBar from '../modules/search/SearchModule';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
 import { Logo } from './Logo';
@@ -53,51 +35,9 @@ export function Header(props: any) {
         </Box>
         <Group noWrap>
           <SearchBar />
-          <DockerDrawer />
+          <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 offsetScrollbars style={{ height: '90vh' }}>
-                    <Group my="sm" grow direction="column" style={{ width: 300 }}>
-                      <ModuleWrapper module={CalendarModule} />
-                      <ModuleWrapper module={TotalDownloadsModule} />
-                      <ModuleWrapper module={WeatherModule} />
-                      <ModuleWrapper module={DateModule} />
-                      <ModuleWrapper module={DashdotModule} />
-                    </Group>
-                  </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 /> : <></>}
+      navbar={widgetPosition ? <Navbar /> : undefined}
-      aside={widgetPosition ? <></> : <Aside />}
+      aside={widgetPosition ? undefined : <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 }: any) {
+export function Logo({ style, withoutText }: any) {
   const { config } = useConfig();
   const { primaryColor, secondaryColor } = useColorTheme();
 
@@ -17,26 +17,28 @@ export function Logo({ style }: any) {
           position: 'relative',
         }}
       />
-      <NextLink
+      {withoutText ? null : (
-        href="/"
+        <NextLink
-        style={{
+          href="/"
-          textDecoration: 'none',
+          style={{
-          position: 'relative',
+            textDecoration: 'none',
-        }}
+            position: 'relative',
-      >
-        <Text
-          sx={style}
-          weight="bold"
-          variant="gradient"
-          gradient={{
-            from: primaryColor,
-            to: secondaryColor,
-            deg: 145,
           }}
         >
-          {config.settings.title || 'Homarr'}
+          <Text
-        </Text>
+            sx={style}
-      </NextLink>
+            weight="bold"
+            variant="gradient"
+            gradient={{
+              from: primaryColor,
+              to: secondaryColor,
+              deg: 145,
+            }}
+          >
+            {config.settings.title || 'Homarr'}
+          </Text>
+        </NextLink>
+      )}
     </Group>
   );
 }

src/components/layout/Widgets.tsx

@@ -1,23 +1,16 @@
 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 }}>
-      {matches && (
+      <ModuleWrapper module={CalendarModule} />
-        <Group my="sm" grow direction="column" style={{ width: 300 }}>
+      <ModuleWrapper module={TotalDownloadsModule} />
-          <ModuleWrapper module={CalendarModule} />
+      <ModuleWrapper module={WeatherModule} />
-          <ModuleWrapper module={TotalDownloadsModule} />
+      <ModuleWrapper module={DateModule} />
-          <ModuleWrapper module={WeatherModule} />
+      <ModuleWrapper module={DashdotModule} />
-          <ModuleWrapper module={DateModule} />
+    </Group>
-          <ModuleWrapper module={DashdotModule} />
-        </Group>
-      )}
-    </>
   );
 }

src/components/modules/calendar/CalendarModule.tsx

@@ -63,7 +63,7 @@ export default function CalendarComponent(props: any) {
     if (!service || !service.apiKey) {
       return Promise.resolve({ data: [] });
     }
-    return axios.post(`/api/modules/calendar?type=${type}`, { ...service });
+    return axios.post(`/api/modules/calendar?type=${type}`, { id: service.id });
   }
 
   useEffect(() => {

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

@@ -181,7 +181,7 @@ export function DashdotComponent() {
               <div className={classes.tableRow}>
                 <p className={classes.tableLabel}>Storage:</p>
                 <p className={classes.tableValue}>
-                  {(totalUsed / (totalSize || 1)).toFixed(1)}%{'\n'}
+                  {((100 * totalUsed) / (totalSize || 1)).toFixed(1)}%{'\n'}
                   {bytePrettyPrint(totalUsed)} / {bytePrettyPrint(totalSize)}
                 </p>
               </div>

src/components/modules/docker/ContainerActionBar.tsx

@@ -9,46 +9,49 @@ import {
   IconRefresh,
   IconRotateClockwise,
   IconTrash,
-  IconX,
 } from '@tabler/icons';
 import axios from 'axios';
 import Dockerode from 'dockerode';
-import { tryMatchService } from '../../tools/addToHomarr';
+import { tryMatchService } from '../../../tools/addToHomarr';
-import { useConfig } from '../../tools/state';
+import { AddAppShelfItemForm } from '../../AppShelf/AddAppShelfItem';
-import { AddAppShelfItemForm } from '../AppShelf/AddAppShelfItem';
 
-function sendDockerCommand(action: string, containerId: string, containerName: string) {
+function sendDockerCommand(
+  action: string,
+  containerId: string,
+  containerName: string,
+  reload: () => void
+) {
   showNotification({
     id: containerId,
     loading: true,
-    title: `${action}ing container ${containerName.substring(1)}`,
+    title: `${action}ing container ${containerName}`,
     message: undefined,
     autoClose: false,
     disallowClose: true,
   });
-  axios.get(`/api/docker/container/${containerId}?action=${action}`).then((res) => {
+  axios
-    setTimeout(() => {
+    .get(`/api/docker/container/${containerId}?action=${action}`)
-      if (res.data.success === true) {
+    .then((res) => {
-        updateNotification({
+      updateNotification({
-          id: containerId,
+        id: containerId,
-          title: `Container ${containerName} ${action}ed`,
+        title: `Container ${containerName} ${action}ed`,
-          message: `Your container was successfully ${action}ed`,
+        message: `Your container was successfully ${action}ed`,
-          icon: <IconCheck />,
+        icon: <IconCheck />,
-          autoClose: 2000,
+        autoClose: 2000,
-        });
+      });
-      }
+    })
-      if (res.data.success === false) {
+    .catch((err) => {
-        updateNotification({
+      updateNotification({
-          id: containerId,
+        id: containerId,
-          color: 'red',
+        color: 'red',
-          title: 'There was an error with your container.',
+        title: 'There was an error',
-          message: undefined,
+        message: err.response.data.reason,
-          icon: <IconX />,
+        autoClose: 2000,
-          autoClose: 2000,
+      });
-        });
+    })
-      }
+    .finally(() => {
-    }, 500);
+      reload();
-  });
+    });
 }
 
 export interface ContainerActionBarProps {
@@ -57,7 +60,6 @@ export interface ContainerActionBarProps {
 }
 
 export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
-  const { config, setConfig } = useConfig();
   const [opened, setOpened] = useBooleanToggle(false);
   return (
     <Group>
@@ -79,9 +81,9 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         onClick={() =>
           Promise.all(
             selected.map((container) =>
-              sendDockerCommand('restart', container.Id, container.Names[0].substring(1))
+              sendDockerCommand('restart', container.Id, container.Names[0].substring(1), reload)
             )
-          ).then(() => reload())
+          )
         }
         variant="light"
         color="orange"
@@ -93,22 +95,10 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         leftIcon={<IconPlayerStop />}
         onClick={() =>
           Promise.all(
-            selected.map((container) => {
+            selected.map((container) =>
-              if (
+              sendDockerCommand('stop', container.Id, container.Names[0].substring(1), reload)
-                container.State === 'stopped' ||
+            )
-                container.State === 'created' ||
+          )
-                container.State === 'exited'
-              ) {
-                return showNotification({
-                  id: container.Id,
-                  title: `Failed to stop ${container.Names[0].substring(1)}`,
-                  message: "You can't stop a stopped container",
-                  autoClose: 1000,
-                });
-              }
-              return sendDockerCommand('stop', container.Id, container.Names[0].substring(1));
-            })
-          ).then(() => reload())
         }
         variant="light"
         color="red"
@@ -121,9 +111,9 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         onClick={() =>
           Promise.all(
             selected.map((container) =>
-              sendDockerCommand('start', container.Id, container.Names[0].substring(1))
+              sendDockerCommand('start', container.Id, container.Names[0].substring(1), reload)
             )
-          ).then(() => reload())
+          )
         }
         variant="light"
         color="green"
@@ -143,7 +133,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
           if (selected.length !== 1) {
             showNotification({
               autoClose: 5000,
-              title: <Title order={4}>Please only add one service at a time!</Title>,
+              title: <Title order={5}>Please only add one service at a time!</Title>,
               color: 'red',
               message: undefined,
             });
@@ -161,18 +151,10 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         radius="md"
         onClick={() =>
           Promise.all(
-            selected.map((container) => {
+            selected.map((container) =>
-              if (container.State === 'running') {
+              sendDockerCommand('remove', container.Id, container.Names[0].substring(1), reload)
-                return showNotification({
+            )
-                  id: container.Id,
+          )
-                  title: `Failed to delete ${container.Names[0].substring(1)}`,
-                  message: "You can't delete a running container",
-                  autoClose: 1000,
-                });
-              }
-              return sendDockerCommand('remove', container.Id, container.Names[0].substring(1));
-            })
-          ).then(() => reload())
         }
       >
         Remove

src/components/modules/docker/DockerModule.tsx

@@ -1,31 +1,58 @@
-import { ActionIcon, Drawer, Group, LoadingOverlay } from '@mantine/core';
+import { ActionIcon, Drawer, Group, LoadingOverlay, Text } from '@mantine/core';
-import { IconBrandDocker } from '@tabler/icons';
 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 default function DockerDrawer(props: any) {
+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();
-  function reload() {
-    setVisible(true);
-    setTimeout(() => {
-      axios.get('/api/docker/containers').then((res) => {
-        setContainers(res.data);
-        setSelection([]);
-        setVisible(false);
-      });
-    }, 300);
-  }
 
   useEffect(() => {
     reload();
   }, []);
+
+  function reload() {
+    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 (

src/components/modules/docker/DockerTable.tsx

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

src/components/modules/docker/index.ts

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

src/components/modules/downloads/DownloadsModule.tsx

@@ -15,6 +15,7 @@ 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';
@@ -52,12 +53,30 @@ export default function DownloadComponent() {
   useEffect(() => {
     setIsLoading(true);
     if (downloadServices.length === 0) return;
-    setSafeInterval(() => {
+    const interval = setInterval(() => {
       // Send one request with each download service inside
-      axios.post('/api/modules/downloads', { config }).then((response) => {
+      axios
-        setTorrents(response.data);
+        .post('/api/modules/downloads')
-        setIsLoading(false);
+        .then((response) => {
-      });
+          setTorrents(response.data);
+          setIsLoading(false);
+        })
+        .catch((error) => {
+          setTorrents([]);
+          // eslint-disable-next-line no-console
+          console.error('Error while fetching torrents', error.response.data);
+          setIsLoading(false);
+          showNotification({
+            title: 'Error fetching torrents',
+            autoClose: 1000,
+            disallowClose: true,
+            id: 'fail-torrent-downloads-module',
+            color: 'red',
+            message:
+              'Please check your config for any potential errors, check the console for more info',
+          });
+          clearInterval(interval);
+        });
     }, 5000);
   }, []);
 

src/components/modules/downloads/TotalDownloadsModule.tsx

@@ -6,6 +6,7 @@ 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';
@@ -42,11 +43,28 @@ 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(() => {
-    if (downloadServices.length === 0) return;
+    const interval = setSafeInterval(() => {
-    setSafeInterval(() => {
+      // Send one request with each download service inside
-      axios.post('/api/modules/downloads', { config }).then((response) => {
+      axios
-        setTorrents(response.data);
+        .post('/api/modules/downloads')
-      });
+        .then((response) => {
+          setTorrents(response.data);
+        })
+        .catch((error) => {
+          setTorrents([]);
+          // eslint-disable-next-line no-console
+          console.error('Error while fetching torrents', error.response.data);
+          showNotification({
+            title: 'Torrent speed module failed to fetch torrents',
+            autoClose: 1000,
+            disallowClose: true,
+            id: 'fail-torrent-speed-module',
+            color: 'red',
+            message:
+              'Error fetching torrents, please check your config for any potential errors, check the console for more info',
+          });
+          clearInterval(interval);
+        });
     }, 1000);
   }, [config.services]);
 

src/components/modules/index.ts

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

src/components/modules/modules.tsx

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

src/components/modules/search/SearchModule.tsx

@@ -1,4 +1,4 @@
-import { Kbd, createStyles, Text, Popover, Autocomplete, Tooltip } from '@mantine/core';
+import { Kbd, createStyles, Autocomplete } from '@mantine/core';
 import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
 import { useEffect, useRef, useState } from 'react';
 import {

src/components/modules/weather/WeatherModule.tsx

@@ -157,7 +157,7 @@ export default function WeatherComponent(props: any) {
       });
   }, [cityInput]);
   if (!weather.current_weather) {
-        return (
+    return (
       <>
         <Skeleton height={40} width={100} mb="xl" />
         <Group noWrap direction="row">

src/middleware.ts

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

src/pages/404.tsx

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

src/pages/_app.tsx

@@ -1,7 +1,7 @@
 import { GetServerSidePropsContext } from 'next';
 import { useState } from 'react';
 import { AppProps } from 'next/app';
-import { getCookie, setCookies } from 'cookies-next';
+import { getCookie, setCookie } from 'cookies-next';
 import Head from 'next/head';
 import { MantineProvider, ColorScheme, ColorSchemeProvider, 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);
-    setCookies('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
+    setCookie('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
   };
   useHotkeys([['mod+J', () => toggleColorScheme()]]);
 

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

@@ -21,37 +21,31 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
   }
   // Get the container with the ID
   const container = docker.getContainer(id);
-  // Get the container info
+  const startAction = async () => {
-  container.inspect((err, data) => {
-    if (err) {
-      res.status(500).json({
-        message: err,
-      });
-    }
-  });
-  try {
     switch (action) {
       case 'remove':
-        await container.remove();
+        return container.remove();
-        break;
       case 'start':
-        container.start();
+        return container.start();
-        break;
       case 'stop':
-        container.stop();
+        return container.stop();
-        break;
       case 'restart':
-        container.restart();
+        return container.restart();
-        break;
+      default:
+        return Promise;
     }
-  } catch (err) {
+  };
-    res.status(500).json({
+  try {
-      message: err,
+    await startAction();
+    return res.status(200).json({
+      statusCode: 200,
+      message: `Container ${id} ${action}ed`,
     });
+  } catch (err) {
+    return res.status(500).json(
+      err,
+    );
   }
-  return res.status(200).json({
-    success: true,
-  });
 }
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {

src/pages/api/docker/containers.tsx

@@ -2,11 +2,14 @@ import { NextApiRequest, NextApiResponse } from 'next';
 
 import Docker from 'dockerode';
 
-const docker = new Docker();
-
 async function Get(req: NextApiRequest, res: NextApiResponse) {
-  const containers = await docker.listContainers({ all: true });
+  try {
-  return res.status(200).json(containers);
+    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) => {

src/pages/api/modules/calendar.ts

@@ -1,9 +1,24 @@
 import axios from 'axios';
+import { getCookie } from 'cookies-next';
 import { NextApiRequest, NextApiResponse } from 'next';
-import { serviceItem } from '../../../tools/types';
+import { getConfig } from '../../../tools/getConfig';
+import { Config } from '../../../tools/types';
 
 async function Post(req: NextApiRequest, res: NextApiResponse) {
   // Parse req.body as a ServiceItem
+  const { id } = req.body;
+  const { type } = req.query;
+  const configName = getCookie('config-name', { req });
+  const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
+  // Find service with serviceId in config
+  const service = config.services.find((service) => service.id === id);
+  if (!service) {
+    return res.status(500).json({
+      statusCode: 500,
+      message: 'Missing service',
+    });
+  }
+
   const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
   const lastMonth = new Date(new Date().setMonth(new Date().getMonth() - 2)).toISOString();
   const TypeToUrl: { service: string; url: string }[] = [
@@ -24,8 +39,6 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
       url: '/api/v1/calendar',
     },
   ];
-  const service: serviceItem = req.body;
-  const { type } = req.query;
   if (!type) {
     return res.status(400).json({
       message: 'Missing required parameter in url: type',
@@ -49,10 +62,10 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
     origin = origin.slice(0, -1);
   }
   const pined = `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`;
-  const data = await axios.get(
+  return axios
-    `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`
+    .get(`${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`)
-  );
+    .then((response) => res.status(200).json(response.data))
-  return res.status(200).json(data.data);
+    .catch((e) => res.status(500).json(e));
   // // Make a request to the URL
   // const response = await axios.get(url);
   // // Return the response

src/pages/api/modules/downloads.ts

@@ -2,12 +2,15 @@ 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 { config }: { config: Config } = req.body;
+  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');
@@ -20,40 +23,44 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
       message: 'Missing services',
     });
   }
-  await Promise.all(
+  try {
-    qBittorrentServices.map((service) =>
+    await Promise.all(
-      new QBittorrent({
+      qBittorrentServices.map((service) =>
-        baseUrl: service.url,
+        new QBittorrent({
-        username: service.username,
+          baseUrl: service.url,
-        password: service.password,
+          username: service.username,
-      })
+          password: service.password,
-        .getAllData()
+        })
-        .then((e) => torrents.push(...e.torrents))
+          .getAllData()
-    )
+          .then((e) => torrents.push(...e.torrents))
-  );
+      )
-  await Promise.all(
+    );
-    delugeServices.map((service) =>
+    await Promise.all(
-      new Deluge({
+      delugeServices.map((service) =>
-        baseUrl: service.url,
+        new Deluge({
-        password: 'password' in service ? service.password : '',
+          baseUrl: service.url,
-      })
+          password: 'password' in service ? service.password : '',
-        .getAllData()
+        })
-        .then((e) => torrents.push(...e.torrents))
+          .getAllData()
-    )
+          .then((e) => torrents.push(...e.torrents))
-  );
+      )
-  // Map transmissionServices
+    );
-  await Promise.all(
+    // Map transmissionServices
-    transmissionServices.map((service) =>
+    await Promise.all(
-      new Transmission({
+      transmissionServices.map((service) =>
-        baseUrl: service.url,
+        new Transmission({
-        username: 'username' in service ? service.username : '',
+          baseUrl: service.url,
-        password: 'password' in service ? service.password : '',
+          username: 'username' in service ? service.username : '',
-      })
+          password: 'password' in service ? service.password : '',
-        .getAllData()
+        })
-        .then((e) => torrents.push(...e.torrents))
+          .getAllData()
-    )
+          .then((e) => torrents.push(...e.torrents))
-  );
+      )
-  res.status(200).json(torrents);
+    );
+  } catch (e: any) {
+    return res.status(401).json(e);
+  }
+  return res.status(200).json(torrents);
 }
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {

src/pages/index.tsx

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

src/pages/login.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { PasswordInput, Anchor, Paper, Title, Text, Container, Group, Button } from '@mantine/core';
-import { setCookies } from 'cookies-next';
+import { setCookie } from 'cookies-next';
 import { useForm } from '@mantine/hooks';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import axios from 'axios';
 import { IconCheck, IconX } from '@tabler/icons';
+import { Logo } from '../components/layout/Logo';
 
 // TODO: Add links to the wiki articles about the login process.
 export default function AuthenticationTitle() {
@@ -15,22 +16,26 @@ export default function AuthenticationTitle() {
   });
   return (
     <Container
-      size={420}
+      size="lg"
       style={{
         height: '100vh',
         display: 'flex',
-        width: 420,
+        width: '100%',
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
       }}
     >
-      <Title
+      <Group>
-        align="center"
+        <Title
-        sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })}
+          align="center"
-      >
+          sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })}
-        Welcome back!
+        >
-      </Title>
+          Welcome back!
+        </Title>
+        <Logo withoutText />
+      </Group>
+
       <Text color="dimmed" size="sm" align="center" mt={5}>
         Please enter the{' '}
         <Anchor<'a'> href="#" size="sm" onClick={(event) => event.preventDefault()}>
@@ -38,10 +43,17 @@ export default function AuthenticationTitle() {
         </Anchor>
       </Text>
 
-      <Paper withBorder shadow="md" p={30} mt={30} radius="md" style={{ width: 420 }}>
+      <Paper
+        withBorder
+        shadow="md"
+        p={30}
+        mt={30}
+        radius="md"
+        style={{ width: '100%', maxWidth: 420 }}
+      >
         <form
           onSubmit={form.onSubmit((values) => {
-            setCookies('password', values.password, {
+            setCookie('password', values.password, {
               maxAge: 60 * 60 * 24 * 30,
               sameSite: 'lax',
             });
@@ -64,8 +76,7 @@ export default function AuthenticationTitle() {
                       id: 'load-data',
                       color: 'teal',
                       title: 'Password correct',
-                      message:
+                      message: undefined,
-                        'Notification will close in 2 seconds, you can close this notification now',
                       icon: <IconCheck />,
                       autoClose: 300,
                       onClose: () => {
@@ -78,8 +89,7 @@ export default function AuthenticationTitle() {
                       id: 'load-data',
                       color: 'red',
                       title: 'Password is wrong, please try again.',
-                      message:
+                      message: undefined,
-                        'Notification will close in 2 seconds, you can close this notification now',
                       icon: <IconX />,
                       autoClose: 2000,
                     });
@@ -93,14 +103,10 @@ 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,5 +1,5 @@
 import Dockerode from 'dockerode';
-import { Config, MatchingImages, ServiceType } from './types';
+import { Config, MatchingImages, ServiceType, tryMatchPort } from './types';
 
 async function MatchIcon(name: string) {
   const res = await fetch(
@@ -23,11 +23,13 @@ function tryMatchType(imageName: string): ServiceType {
 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: `${container.Ports.at(0)?.IP}:${container.Ports.at(0)?.PublicPort}`,
+    url: `localhost${port ? `:${port.value}` : ''}`,
     icon: `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
       .replace(/\s+/g, '-')
       .toLowerCase()}.png`,

src/tools/getConfig.ts

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

src/tools/types.ts

@@ -60,34 +60,105 @@ export const Targets = [
 
 export const ServiceTypeList = [
   'Other',
-  'Emby',
   'Dash.',
   'Deluge',
+  'Emby',
   'Lidarr',
   'Plex',
+  'qBittorrent',
   'Radarr',
   'Readarr',
   'Sonarr',
-  'qBittorrent',
   'Transmission',
 ];
 export type ServiceType =
   | 'Other'
-  | 'Emby'
   | 'Dash.'
   | 'Deluge'
+  | 'Emby'
   | 'Lidarr'
   | 'Plex'
+  | 'qBittorrent'
   | 'Radarr'
   | 'Readarr'
   | 'Sonarr'
-  | 'qBittorrent'
   | 'Transmission';
 
-export const MatchingImages: { image: string; type: ServiceType }[] = [
+export function tryMatchPort(name: string, form?: any) {
-  { image: 'lscr.io/linuxserver/radarr', type: 'Radarr' },
+  // Match name with portmap key
-  { image: 'lscr.io/linuxserver/sonarr', type: 'Sonarr' },
+  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 {