🔀 Merge Mantine v5.0 into Overseerr-integaration

Dockerfile

@@ -1,8 +1,6 @@
-FROM node:16-alpine
+FROM ghcr.io/linuxserver/baseimage-alpine:3.16
 WORKDIR /app
 
-RUN apk add tzdata
-
 ENV NEXT_TELEMETRY_DISABLED 1
 
 ENV NODE_ENV production

README.md

@@ -64,9 +64,9 @@ If you have any questions about Homarr or want to share information with us, ple
 
 ## ✨ Features
 - Integrates with services you use.
-- Search the web direcetly from your homepage.
+- Search the web directly from your homepage.
 - Real-time status indicator for every service.
-- Automatically finds icons while you type the name of a serivce.
+- Automatically finds icons while you type the name of a service.
 - Widgets that can display all types of information.
 - Easy deployment with Docker.
 - Very light-weight and fast.

next.config.js

@@ -5,6 +5,9 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 });
 
 module.exports = withBundleAnalyzer({
+  images: {
+    domains: ['cdn.jsdelivr.net'],
+  },
   reactStrictMode: false,
   experimental: {
     outputStandalone: true,

package.json

@@ -30,31 +30,36 @@
 		"@dnd-kit/core": "^6.0.5",
 		"@dnd-kit/sortable": "^7.0.1",
 		"@dnd-kit/utilities": "^3.2.0",
-		"@mantine/core": "^4.2.12",
+		"@emotion/react": "^11.10.0",
-		"@mantine/dates": "^4.2.12",
+		"@emotion/server": "^11.10.0",
-		"@mantine/dropzone": "^4.2.12",
+		"@mantine/carousel": "^5.0.0",
-		"@mantine/form": "^4.2.12",
+		"@mantine/core": "^5.0.2",
-		"@mantine/hooks": "^4.2.12",
+		"@mantine/dates": "^5.0.2",
-		"@mantine/modals": "^5.0.3",
+		"@mantine/dropzone": "^5.0.2",
-		"@mantine/next": "^4.2.12",
+		"@mantine/form": "^5.0.2",
-		"@mantine/notifications": "^4.2.12",
+		"@mantine/hooks": "^5.0.2",
-		"@mantine/prism": "^4.2.12",
+		"@mantine/next": "^5.0.2",
+		"@mantine/notifications": "^5.0.2",
+		"@mantine/prism": "^5.0.0",
 		"@nivo/core": "^0.79.0",
 		"@nivo/line": "^0.79.1",
 		"@tabler/icons": "^1.78.0",
+		"add": "^2.0.6",
 		"axios": "^0.27.2",
 		"consola": "^2.15.3",
 		"cookies-next": "^2.1.1",
 		"dayjs": "^1.11.4",
 		"dockerode": "^3.3.2",
+		"embla-carousel-react": "^7.0.0-rc05",
 		"framer-motion": "^6.5.1",
 		"js-file-download": "^0.4.12",
 		"next": "12.1.6",
 		"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.12.1",
-		"uuid": "^8.3.2"
+		"uuid": "^8.3.2",
+		"yarn": "^1.22.19"
 	},
 	"devDependencies": {
 		"@next/bundle-analyzer": "^12.1.4",

src/components/AppShelf/AddAppShelfItem.tsx

@@ -8,8 +8,9 @@ import {
   LoadingOverlay,
   Modal,
   MultiSelect,
-  ScrollArea,
+  PasswordInput,
   Select,
+  Stack,
   Switch,
   Tabs,
   TextInput,
@@ -17,7 +18,8 @@ import {
   Tooltip,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { IconApps as Apps } from '@tabler/icons';
+import { useDebouncedValue } from '@mantine/hooks';
+import { IconApps } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedValue } from '@mantine/hooks';
@@ -38,6 +40,7 @@ export function AddItemShelfButton(props: any) {
       >
         <AddAppShelfItemForm setOpened={setOpened} />
       </Modal>
+      <Tooltip withinPortal label="Add a service">
         <ActionIcon
           variant="default"
           radius="md"
@@ -46,10 +49,9 @@ export function AddItemShelfButton(props: any) {
           style={props.style}
           onClick={() => setOpened(true)}
         >
-        <Tooltip label="Add a service">
+          <IconApps />
-          <Apps />
-        </Tooltip>
         </ActionIcon>
+      </Tooltip>
     </>
   );
 }
@@ -85,25 +87,26 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
   const [isLoading, setLoading] = useState(false);
 
   // Extract all the categories from the services in config
-  const categoryList = config.services.reduce((acc, cur) => {
+  const InitialCategories = config.services.reduce((acc, cur) => {
     if (cur.category && !acc.includes(cur.category)) {
       acc.push(cur.category);
     }
     return acc;
   }, [] as string[]);
+  const [categories, setCategories] = useState<string[]>(InitialCategories);
 
   const form = useForm({
     initialValues: {
       id: props.id ?? uuidv4(),
       type: props.type ?? 'Other',
-      category: props.category ?? undefined,
+      category: props.category ?? null,
       name: props.name ?? '',
       icon: props.icon ?? DEFAULT_ICON,
       url: props.url ?? '',
-      apiKey: props.apiKey ?? (undefined as unknown as string),
+      apiKey: props.apiKey ?? undefined,
-      username: props.username ?? (undefined as unknown as string),
+      username: props.username ?? undefined,
-      password: props.password ?? (undefined as unknown as string),
+      password: props.password ?? undefined,
-      openedUrl: props.openedUrl ?? (undefined as unknown as string),
+      openedUrl: props.openedUrl ?? undefined,
       status: props.status ?? ['200'],
       newTab: props.newTab ?? true,
     },
@@ -162,21 +165,21 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       </Center>
       <form
         onSubmit={form.onSubmit(() => {
-          if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) {
+          const newForm = { ...form.values };
-            form.values.status = undefined;
+          if (newForm.newTab === true) newForm.newTab = undefined;
-          }
+          if (newForm.category === null) newForm.category = undefined;
-          if (form.values.newTab === true) {
+          if (newForm.status.length === 1 && newForm.status[0] === '200') {
-            form.values.newTab = undefined;
+            delete newForm.status;
           }
           // If service already exists, update it.
-          if (config.services && config.services.find((s) => s.id === form.values.id)) {
+          if (config.services && config.services.find((s) => s.id === newForm.id)) {
             setConfig({
               ...config,
               // replace the found item by matching ID
               services: config.services.map((s) => {
-                if (s.id === form.values.id) {
+                if (s.id === newForm.id) {
                   return {
-                    ...form.values,
+                    ...newForm,
                   };
                 }
                 return s;
@@ -185,24 +188,26 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           } else {
             setConfig({
               ...config,
-              services: [...config.services, form.values],
+              services: [...config.services, newForm],
             });
           }
           setOpened(false);
           form.reset();
         })}
       >
-        <Tabs grow>
+        <Tabs defaultValue="Options">
-          <Tabs.Tab label="Options">
+          <Tabs.List grow>
-            <ScrollArea style={{ height: 500 }} scrollbarSize={4}>
+            <Tabs.Tab value="Options">Options</Tabs.Tab>
-              <Group direction="column" grow>
+            <Tabs.Tab value="Advanced Options">Advanced options</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel value="Options">
+            <Stack>
               <TextInput
                 required
                 label="Service name"
                 placeholder="Plex"
                 {...form.getInputProps('name')}
               />
-
               <TextInput
                 required
                 label="Icon URL"
@@ -231,24 +236,24 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
               />
               <Select
                 label="Category"
-                  data={categoryList}
+                data={categories}
                 placeholder="Select a category or create a new one"
                 nothingFound="Nothing found"
                 searchable
                 clearable
                 creatable
-                  onClick={(e) => {
+                onCreate={(query) => {
-                    e.preventDefault();
+                  const item = { value: query, label: query };
+                  setCategories([...InitialCategories, query]);
+                  return item;
                 }}
                 getCreateLabel={(query) => `+ Create "${query}"`}
-                  onCreate={(query) => {}}
                 {...form.getInputProps('category')}
               />
               <LoadingOverlay visible={isLoading} />
               {(form.values.type === 'Sonarr' ||
                 form.values.type === 'Radarr' ||
                 form.values.type === 'Lidarr' ||
-                  form.values.type === 'Overseerr' ||
                 form.values.type === 'Readarr') && (
                 <>
                   <TextInput
@@ -286,7 +291,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                     }}
                     error={form.errors.username && 'Invalid username'}
                   />
-                    <TextInput
+                  <PasswordInput
                     required
                     label="Password"
                     placeholder="adminadmin"
@@ -300,7 +305,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
               )}
               {form.values.type === 'Deluge' && (
                 <>
-                    <TextInput
+                  <PasswordInput
                     label="Password"
                     placeholder="password"
                     value={form.values.password}
@@ -322,7 +327,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                     }}
                     error={form.errors.username && 'Invalid username'}
                   />
-                    <TextInput
+                  <PasswordInput
                     label="Password"
                     placeholder="adminadmin"
                     value={form.values.password}
@@ -333,11 +338,10 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                   />
                 </>
               )}
-              </Group>
+            </Stack>
-            </ScrollArea>
+          </Tabs.Panel>
-          </Tabs.Tab>
+          <Tabs.Panel value="Advanced Options">
-          <Tabs.Tab label="Advanced Options">
+            <Stack>
-            <Group direction="column" grow>
               <MultiSelect
                 required
                 label="HTTP Status Codes"
@@ -355,8 +359,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                 defaultChecked={form.values.newTab}
                 {...form.getInputProps('newTab')}
               />
-            </Group>
+            </Stack>
-          </Tabs.Tab>
+          </Tabs.Panel>
         </Tabs>
         <Group grow position="center" mt="xl">
           <Button type="submit">{props.message ?? 'Add service'}</Button>

src/components/AppShelf/AppShelf.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Accordion, createStyles, Grid, Group, Paper, useMantineColorScheme } from '@mantine/core';
+import { Accordion, Grid, Paper, Stack, useMantineColorScheme } from '@mantine/core';
 import {
   closestCenter,
   DndContext,
@@ -18,44 +18,22 @@ import { ModuleMenu, ModuleWrapper } from '../../modules/moduleWrapper';
 import { DownloadsModule } from '../../modules';
 import DownloadComponent from '../../modules/downloads/DownloadsModule';
 
-const useStyles = createStyles((theme, _params) => ({
-  item: {
-    overflow: 'hidden',
-    borderLeft: '3px solid transparent',
-    borderRight: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-    borderRadius: '20px',
-    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-    marginTop: theme.spacing.md,
-  },
-
-  control: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-    borderRadius: theme.spacing.md,
-
-    '&:hover': {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-    },
-  },
-
-  content: {
-    margin: theme.spacing.md,
-  },
-
-  label: {
-    overflow: 'visible',
-  },
-}));
-
 const AppShelf = (props: any) => {
-  const { classes, cx } = useStyles(props);
+  const { config, setConfig } = useConfig();
-  const [toggledCategories, settoggledCategories] = useLocalStorage({
+  // Extract all the categories from the services in config
+  const categoryList = config.services.reduce((acc, cur) => {
+    if (cur.category && !acc.includes(cur.category)) {
+      acc.push(cur.category);
+    }
+    return acc;
+  }, [] as string[]);
+
+  const [toggledCategories, setToggledCategories] = useLocalStorage({
     key: 'app-shelf-toggled',
-    // This is a bit of a hack to get the 5 first categories to be toggled on by default
+    // This is a bit of a hack to toggle the categories on the first load, return a string[] of the categories
-    defaultValue: { 0: true, 1: true, 2: true, 3: true, 4: true } as Record<string, boolean>,
+    defaultValue: categoryList,
   });
   const [activeId, setActiveId] = useState(null);
-  const { config, setConfig } = useConfig();
   const { colorScheme } = useMantineColorScheme();
 
   const sensors = useSensors(
@@ -93,15 +71,8 @@ const AppShelf = (props: any) => {
 
     setActiveId(null);
   }
-  // Extract all the categories from the services in config
-  const categoryList = config.services.reduce((acc, cur) => {
-    if (cur.category && !acc.includes(cur.category)) {
-      acc.push(cur.category);
-    }
-    return acc;
-  }, [] as string[]);
 
-  const item = (filter?: string) => {
+  const getItems = (filter?: string) => {
     // If filter is not set, return all the services without a category or a null category
     let filtered = config.services;
     if (!filter) {
@@ -155,54 +126,62 @@ const AppShelf = (props: any) => {
     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
+      // TODO: Style accordion so that the bar is transparent to the user settings
-      <Group grow direction="column">
+      <Stack>
         <Accordion
-          disableIconRotation
+          variant="separated"
-          classNames={classes}
+          radius="lg"
           order={2}
-          iconPosition="right"
           multiple
-          initialState={toggledCategories}
+          value={toggledCategories}
-          onChange={(idx) => settoggledCategories(idx)}
+          onChange={(state) => {
+            setToggledCategories(state);
+          }}
         >
           {categoryList.map((category, idx) => (
-            <Accordion.Item key={category} label={category}>
+            <Accordion.Item key={category} value={idx.toString()}>
-              {item(category)}
+              <Accordion.Control>{category}</Accordion.Control>
+              <Accordion.Panel>{getItems(category)}</Accordion.Panel>
             </Accordion.Item>
           ))}
           {/* Return the item for all services without category */}
           {noCategory && noCategory.length > 0 ? (
-            <Accordion.Item key="Other" label="Other">
+            <Accordion.Item key="Other" value="Other">
-              {item()}
+              <Accordion.Control>Other</Accordion.Control>
+              <Accordion.Panel>{getItems()}</Accordion.Panel>
             </Accordion.Item>
           ) : null}
           {downloadEnabled ? (
-            <Accordion.Item key="Downloads" label="Your downloads">
+            <Accordion.Item key="Downloads" value="Your downloads">
+              <Accordion.Control>Your downloads</Accordion.Control>
+              <Accordion.Panel>
                 <Paper
                   p="lg"
                   radius="lg"
                   style={{
                     background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
                 ${(config.settings.appOpacity || 100) / 100}`,
-                  borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+                    borderColor: `rgba(${
+                      colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'
+                    } \
                 ${(config.settings.appOpacity || 100) / 100}`,
                   }}
                 >
                   <ModuleMenu module={DownloadsModule} />
                   <DownloadComponent />
                 </Paper>
+              </Accordion.Panel>
             </Accordion.Item>
           ) : null}
         </Accordion>
-      </Group>
+      </Stack>
     );
   }
   return (
-    <Group grow direction="column">
+    <Stack>
-      {item()}
+      {getItems()}
       <ModuleWrapper mt="xl" module={DownloadsModule} />
-    </Group>
+    </Stack>
   );
 };
 

src/components/AppShelf/AppShelfItem.tsx

@@ -3,7 +3,6 @@ import {
   Card,
   Anchor,
   AspectRatio,
-  Image,
   Center,
   createStyles,
   useMantineColorScheme,
@@ -12,6 +11,7 @@ import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import Image from 'next/image';
 import { serviceItem } from '../../tools/types';
 import PingComponent from '../../modules/ping/PingModule';
 import AppShelfMenu from './AppShelfMenu';
@@ -121,11 +121,13 @@ export function AppShelfItem(props: any) {
                 }}
               >
                 <Image
-                  styles={{ root: { cursor: 'pointer' } }}
+                  style={{
+                    cursor: 'pointer',
+                  }}
                   width={80}
                   height={80}
-                  src={service.icon}
+                  src={`/api/imageproxy?url=${service.icon}`}
-                  fit="contain"
+                  objectFit="contain"
                   onClick={() => {
                     if (service.openedUrl) {
                       window.open(service.openedUrl, service.newTab === false ? '_top' : '_blank');

src/components/AppShelf/AppShelfMenu.tsx

@@ -1,7 +1,7 @@
-import { Menu, Modal, Text, useMantineTheme } from '@mantine/core';
+import { ActionIcon, Menu, Modal, Text, useMantineTheme } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
-import { IconCheck as Check, IconEdit as Edit, IconTrash as Trash } from '@tabler/icons';
+import { IconCheck as Check, IconEdit as Edit, IconMenu, IconTrash as Trash } from '@tabler/icons';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import { AddAppShelfItemForm } from './AddAppShelfItem';
@@ -23,16 +23,25 @@ export default function AppShelfMenu(props: any) {
         <AddAppShelfItemForm setOpened={setOpened} {...service} message="Save service" />
       </Modal>
       <Menu
-        position="right"
+        withinPortal
-        radius="md"
+        width={150}
         shadow="xl"
+        withArrow
+        radius="md"
+        position="right"
         styles={{
-          body: {
+          dropdown: {
             // Add shadow and elevation to the body
             boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.05)',
           },
         }}
       >
+        <Menu.Target>
+          <ActionIcon style={{}}>
+            <IconMenu />
+          </ActionIcon>
+        </Menu.Target>
+        <Menu.Dropdown>
           <Menu.Label>Settings</Menu.Label>
           <Menu.Item
             color="primary"
@@ -66,6 +75,7 @@ export default function AppShelfMenu(props: any) {
           >
             Delete
           </Menu.Item>
+        </Menu.Dropdown>
       </Menu>
     </>
   );

src/components/Config/ConfigChanger.tsx

@@ -5,25 +5,27 @@ import { useConfig } from '../../tools/state';
 
 export default function ConfigChanger() {
   const { config, loadConfig, setConfig, getConfigs } = useConfig();
-  const [configList, setConfigList] = useState([] as string[]);
+  const [configList, setConfigList] = useState<string[]>([]);
+  const [value, setValue] = useState(config.name);
   useEffect(() => {
     getConfigs().then((configs) => setConfigList(configs));
-    // setConfig(initialConfig);
   }, [config]);
   // If configlist is empty, return a loading indicator
   if (configList.length === 0) {
     return (
-      <Center>
       <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
+        <Center>
           <Loader />
-        </Tooltip>
         </Center>
+      </Tooltip>
     );
   }
+  // return <Select data={[{ value: '1', label: '1' },]} onChange={(e) => console.log(e)} value="1" />;
   return (
     <Select
-      defaultValue={config.name}
       label="Config loader"
+      value={value}
+      defaultValue={config.name}
       onChange={(e) => {
         loadConfig(e ?? 'default');
         setCookie('config-name', e ?? 'default', {

src/components/Config/LoadConfig.tsx

@@ -1,68 +1,18 @@
-import { Group, Text, useMantineTheme, MantineTheme } from '@mantine/core';
+import { Group, Text, useMantineTheme } from '@mantine/core';
-import {
+import { IconX as X, IconCheck as Check, IconX, IconPhoto, IconUpload } from '@tabler/icons';
-  IconUpload as Upload,
-  IconPhoto as Photo,
-  IconX as X,
-  IconCheck as Check,
-  TablerIcon,
-} from '@tabler/icons';
-import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
-import { useRef } from 'react';
-import { useRouter } from 'next/router';
 import { setCookie } from 'cookies-next';
+import { Dropzone } from '@mantine/dropzone';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
 import { migrateToIdConfig } from '../../tools/migrate';
 
-function getIconColor(status: DropzoneStatus, theme: MantineTheme) {
-  return status.accepted
-    ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]
-    : status.rejected
-    ? theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]
-    : theme.colorScheme === 'dark'
-    ? theme.colors.dark[0]
-    : theme.colors.gray[7];
-}
-
-function ImageUploadIcon({
-  status,
-  ...props
-}: React.ComponentProps<TablerIcon> & { status: DropzoneStatus }) {
-  if (status.accepted) {
-    return <Upload {...props} />;
-  }
-
-  if (status.rejected) {
-    return <X {...props} />;
-  }
-
-  return <Photo {...props} />;
-}
-
-export const dropzoneChildren = (status: DropzoneStatus, theme: MantineTheme) => (
-  <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
-    <ImageUploadIcon status={status} style={{ color: getIconColor(status, theme) }} size={80} />
-
-    <div>
-      <Text size="xl" inline>
-        Drag images here or click to select files
-      </Text>
-      <Text size="sm" color="dimmed" inline mt={7}>
-        Attach as many files as you like, each file should not exceed 5mb
-      </Text>
-    </div>
-  </Group>
-);
-
 export default function LoadConfigComponent(props: any) {
   const { setConfig } = useConfig();
   const theme = useMantineTheme();
-  const router = useRouter();
-  const openRef = useRef<() => void>();
 
   return (
-    <FullScreenDropzone
+    <Dropzone.FullScreen
       onDrop={(files) => {
         files[0].text().then((e) => {
           try {
@@ -100,7 +50,31 @@ export default function LoadConfigComponent(props: any) {
       }}
       accept={['application/json']}
     >
-      {(status) => dropzoneChildren(status, theme)}
+      <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
-    </FullScreenDropzone>
+        <Dropzone.Accept>
+          <Text size="xl" inline>
+            <IconUpload
+              size={50}
+              stroke={1.5}
+              color={theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]}
+            />
+            Drag files here to upload a config. Support for JSON only.
+          </Text>
+        </Dropzone.Accept>
+        <Dropzone.Reject>
+          <Text size="xl" inline>
+            <IconX
+              size={50}
+              stroke={1.5}
+              color={theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]}
+            />
+            This file format is not supported. Please only upload JSON.
+          </Text>
+        </Dropzone.Reject>
+        <Dropzone.Idle>
+          <IconPhoto size={50} stroke={1.5} />
+        </Dropzone.Idle>
+      </Group>
+    </Dropzone.FullScreen>
   );
 }

src/components/Settings/AdvancedSettings.tsx

@@ -1,4 +1,4 @@
-import { TextInput, Group, Button } from '@mantine/core';
+import { TextInput, Button, Stack } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useConfig } from '../../tools/state';
 import { ColorSelector } from './ColorSelector';
@@ -37,9 +37,9 @@ export default function TitleChanger() {
   };
 
   return (
-    <Group direction="column" grow mb="lg">
+    <Stack mb="md" mr="sm" mt="xs">
       <form onSubmit={form.onSubmit((values) => saveChanges(values))}>
-        <Group grow direction="column">
+        <Stack>
           <TextInput label="Page title" placeholder="Homarr 🦞" {...form.getInputProps('title')} />
           <TextInput label="Logo" placeholder="/img/logo.png" {...form.getInputProps('logo')} />
           <TextInput
@@ -53,13 +53,13 @@ export default function TitleChanger() {
             {...form.getInputProps('background')}
           />
           <Button type="submit">Save</Button>
-        </Group>
+        </Stack>
       </form>
       <ColorSelector type="primary" />
       <ColorSelector type="secondary" />
       <ShadeSelector />
       <OpacitySelector />
       <AppCardWidthSelector />
-    </Group>
+    </Stack>
   );
 }

src/components/Settings/AppCardWidthSelector.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Group, Text, Slider } from '@mantine/core';
+import { Text, Slider, Stack } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 
 export function AppCardWidthSelector() {
@@ -16,7 +16,7 @@ export function AppCardWidthSelector() {
   };
 
   return (
-    <Group direction="column" spacing="xs" grow>
+    <Stack spacing="xs">
       <Text>App Width</Text>
       <Slider
         label={null}
@@ -27,6 +27,6 @@ export function AppCardWidthSelector() {
         styles={{ markLabel: { fontSize: 'xx-small' } }}
         onChange={(value) => setappCardWidth(value)}
       />
-    </Group>
+    </Stack>
   );
 }

src/components/Settings/ColorSelector.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ColorSwatch, Group, Popover, Text, useMantineTheme } from '@mantine/core';
+import { ColorSwatch, Grid, Group, Popover, Text, useMantineTheme } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { useColorTheme } from '../../tools/color';
 
@@ -44,51 +44,43 @@ export function ColorSelector({ type }: ColorControlProps) {
   };
 
   const swatches = colors.map(({ color, swatch }) => (
+    <Grid.Col span={2} key={color}>
       <ColorSwatch
         component="button"
         type="button"
         onClick={() => setConfigColor(color)}
-      key={color}
         color={swatch}
         size={22}
-      style={{ color: theme.white, cursor: 'pointer' }}
+        style={{ cursor: 'pointer' }}
       />
+    </Grid.Col>
   ));
 
   return (
-    <Group direction="row" spacing={3}>
+    <Group>
       <Popover
+        width={250}
+        withinPortal
         opened={opened}
         onClose={() => setOpened(false)}
-        transitionDuration={0}
+        position="left"
-        target={
+        withArrow
+      >
+        <Popover.Target>
           <ColorSwatch
             component="button"
             type="button"
             color={theme.colors[configColor][6]}
             onClick={() => setOpened((o) => !o)}
             size={22}
-            style={{ display: 'block', cursor: 'pointer' }}
+            style={{ cursor: 'pointer' }}
           />
-        }
+        </Popover.Target>
-        styles={{
+        <Popover.Dropdown>
-          root: {
+          <Grid gutter="lg" columns={14}>
-            marginRight: theme.spacing.xs,
+            {swatches}
-          },
+          </Grid>
-          body: {
+        </Popover.Dropdown>
-            width: 152,
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
-          },
-          arrow: {
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
-          },
-        }}
-        position="bottom"
-        placement="end"
-        withArrow
-        arrowSize={3}
-      >
-        <Group spacing="xs">{swatches}</Group>
       </Popover>
       <Text>{type[0].toUpperCase() + type.slice(1)} color</Text>
     </Group>

src/components/Settings/CommonSettings.tsx

@@ -1,4 +1,4 @@
-import { Group, Text, SegmentedControl, TextInput } from '@mantine/core';
+import { Text, SegmentedControl, TextInput, Stack } from '@mantine/core';
 import { useState } from 'react';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
@@ -24,8 +24,8 @@ export default function CommonSettings(args: any) {
   );
 
   return (
-    <Group direction="column" grow mb="lg">
+    <Stack mb="md" mr="sm">
-      <Group grow direction="column" spacing={0}>
+      <Stack spacing={0} mt="xs">
         <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
@@ -74,13 +74,13 @@ export default function CommonSettings(args: any) {
             />
           </>
         )}
-      </Group>
+      </Stack>
       <ColorSchemeSwitch />
       <WidgetsPositionSwitch />
       <ModuleEnabler />
       <ConfigChanger />
       <SaveConfigComponent />
       <Tip>Upload your config file by dragging and dropping it onto the page!</Tip>
-    </Group>
+    </Stack>
   );
 }

src/components/Settings/Credits.tsx

@@ -4,7 +4,7 @@ import { CURRENT_VERSION } from '../../../data/constants';
 
 export default function Credits(props: any) {
   return (
-    <Group position="center" direction="row" mr="xs">
+    <Group position="center" mt="xs">
       <Group spacing={0}>
         <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
           <IconBrandGithub size={18} />

src/components/Settings/ModuleEnabler.tsx

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

src/components/Settings/OpacitySelector.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Group, Text, Slider } from '@mantine/core';
+import { Text, Slider, Stack } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 
 export function OpacitySelector() {
@@ -29,7 +29,7 @@ export function OpacitySelector() {
   };
 
   return (
-    <Group direction="column" spacing="xs" grow>
+    <Stack spacing="xs">
       <Text>App Opacity</Text>
       <Slider
         defaultValue={config.settings.appOpacity || 100}
@@ -39,6 +39,6 @@ export function OpacitySelector() {
         styles={{ markLabel: { fontSize: 'xx-small' } }}
         onChange={(value) => setConfigOpacity(value)}
       />
-    </Group>
+    </Stack>
   );
 }

src/components/Settings/SettingsMenu.tsx

@@ -8,17 +8,21 @@ import Credits from './Credits';
 
 function SettingsMenu(props: any) {
   return (
-    <Tabs grow>
+    <Tabs defaultValue="Common">
-      <Tabs.Tab data-autofocus label="Common">
+      <Tabs.List grow>
+        <Tabs.Tab value="Common">Common</Tabs.Tab>
+        <Tabs.Tab value="Customizations">Customizations</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel data-autofocus value="Common">
         <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
           <CommonSettings />
         </ScrollArea>
-      </Tabs.Tab>
+      </Tabs.Panel>
-      <Tabs.Tab label="Customizations">
+      <Tabs.Panel value="Customizations">
         <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
           <AdvancedSettings />
         </ScrollArea>
-      </Tabs.Tab>
+      </Tabs.Panel>
     </Tabs>
   );
 }
@@ -40,6 +44,7 @@ export function SettingsMenuButton(props: any) {
         <SettingsMenu />
         <Credits />
       </Drawer>
+      <Tooltip label="Settings">
         <ActionIcon
           variant="default"
           radius="md"
@@ -48,10 +53,9 @@ export function SettingsMenuButton(props: any) {
           style={props.style}
           onClick={() => setOpened(true)}
         >
-        <Tooltip label="Settings">
           <IconSettings />
-        </Tooltip>
         </ActionIcon>
+      </Tooltip>
     </>
   );
 }

src/components/Settings/ShadeSelector.tsx

@@ -1,5 +1,14 @@
 import React, { useState } from 'react';
-import { ColorSwatch, Group, Popover, Text, useMantineTheme, MantineTheme } from '@mantine/core';
+import {
+  ColorSwatch,
+  Group,
+  Popover,
+  Text,
+  useMantineTheme,
+  MantineTheme,
+  Stack,
+  Grid,
+} from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { useColorTheme } from '../../tools/color';
 
@@ -31,36 +40,42 @@ export function ShadeSelector() {
   };
 
   const primarySwatches = primaryShades.map(({ swatch, shade }) => (
+    <Grid.Col span={1} key={Number(shade)}>
       <ColorSwatch
         component="button"
         type="button"
         onClick={() => setConfigShade(shade)}
-      key={Number(shade)}
         color={swatch}
         size={22}
-      style={{ color: theme.white, cursor: 'pointer' }}
+        style={{ cursor: 'pointer' }}
       />
+    </Grid.Col>
   ));
 
   const secondarySwatches = secondaryShades.map(({ swatch, shade }) => (
+    <Grid.Col span={1} key={Number(shade)}>
       <ColorSwatch
         component="button"
         type="button"
         onClick={() => setConfigShade(shade)}
-      key={Number(shade)}
         color={swatch}
         size={22}
-      style={{ color: theme.white, cursor: 'pointer' }}
+        style={{ cursor: 'pointer' }}
       />
+    </Grid.Col>
   ));
 
   return (
-    <Group direction="row" spacing={3}>
+    <Group>
       <Popover
+        width={350}
+        withinPortal
         opened={opened}
         onClose={() => setOpened(false)}
-        transitionDuration={0}
+        position="left"
-        target={
+        withArrow
+      >
+        <Popover.Target>
           <ColorSwatch
             component="button"
             type="button"
@@ -69,27 +84,15 @@ export function ShadeSelector() {
             size={22}
             style={{ display: 'block', cursor: 'pointer' }}
           />
-        }
+        </Popover.Target>
-        styles={{
+        <Popover.Dropdown>
-          root: {
+          <Stack spacing="xs">
-            marginRight: theme.spacing.xs,
+            <Grid gutter="lg" columns={10}>
-          },
+              {primarySwatches}
-          body: {
+              {secondarySwatches}
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+            </Grid>
-          },
+          </Stack>
-          arrow: {
+        </Popover.Dropdown>
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
-          },
-        }}
-        position="bottom"
-        placement="end"
-        withArrow
-        arrowSize={3}
-      >
-        <Group direction="column" spacing="xs">
-          <Group spacing="xs">{primarySwatches}</Group>
-          <Group spacing="xs">{secondarySwatches}</Group>
-        </Group>
       </Popover>
       <Text>Shade</Text>
     </Group>

src/components/layout/Header.tsx

@@ -1,5 +1,4 @@
 import { Box, createStyles, Group, Header as Head } from '@mantine/core';
-import { useBooleanToggle } from '@mantine/hooks';
 import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
 
 import DockerMenuButton from '../../modules/docker/DockerModule';
@@ -23,9 +22,7 @@ const useStyles = createStyles((theme) => ({
 }));
 
 export function Header(props: any) {
-  const [opened, toggleOpened] = useBooleanToggle(false);
   const { classes, cx } = useStyles();
-  const [hidden, toggleHidden] = useBooleanToggle(true);
 
   return (
     <Head height="auto">

src/components/layout/Layout.tsx

@@ -18,6 +18,7 @@ export default function Layout({ children, style }: any) {
 
   return (
     <AppShell
+      fixed={false}
       header={<Header />}
       navbar={widgetPosition ? <Navbar /> : undefined}
       aside={widgetPosition ? undefined : <Aside />}

src/components/layout/Widgets.tsx

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

src/modules/calendar/CalendarModule.tsx

@@ -260,19 +260,23 @@ function DayComponent(props: any) {
       )}
       <Popover
         position="bottom"
+        withinPortal
         radius="lg"
         shadow="xl"
         transition="pop"
         styles={{
-          body: {
+          dropdown: {
             boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.1), 0 14px 11px rgba(0, 0, 0, 0.1)',
           },
         }}
         width="auto"
         onClose={() => setOpened(false)}
         opened={opened}
-        target={day}
       >
+        <Popover.Target>
+          <div>{day}</div>
+        </Popover.Target>
+        <Popover.Dropdown>
           <ScrollArea style={{ height: 400 }}>
             {sonarrFiltered.map((media: any, index: number) => (
               <React.Fragment key={index}>
@@ -308,6 +312,7 @@ function DayComponent(props: any) {
               </React.Fragment>
             ))}
           </ScrollArea>
+        </Popover.Dropdown>
       </Popover>
     </Box>
   );

src/modules/common/MediaDisplay.tsx

@@ -8,8 +8,7 @@ import {
   Anchor,
   ScrollArea,
   createStyles,
-  Tooltip,
+  Stack,
-  Button,
 } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { IconLink } from '@tabler/icons';
@@ -58,15 +57,8 @@ export function MediaDisplay(props: { media: IMedia }) {
             alt={media.title}
           />
         )}
-        <Group
+        <Stack style={{ minWidth: phone ? 450 : '65vw' }}>
-          style={{ minWidth: phone ? 450 : '65vw' }}
+          <Group noWrap mr="sm" className={classes.overview}>
-          noWrap
-          mr="md"
-          my="sm"
-          position="apart"
-          className={classes.overview}
-        >
-          <Group direction="column" spacing={0}>
             <Title order={3}>{media.title}</Title>
             {media.artist && <Text color="gray">New release from {media.artist}</Text>}
             {(media.episodeNumber || media.seasonNumber) && (
@@ -101,8 +93,8 @@ export function MediaDisplay(props: { media: IMedia }) {
               </ActionIcon>
             </Anchor>
           )}
-        </Group>
+        </Stack>
-        <Group direction="column" position="apart">
+        <Stack>
           <ScrollArea style={{ height: 280, maxWidth: 700 }}>{media.overview}</ScrollArea>
           <Group align="center" position="center" spacing="xs">
             {media.genres.slice(-5).map((genre: string, i: number) => (
@@ -111,7 +103,7 @@ export function MediaDisplay(props: { media: IMedia }) {
               </Badge>
             ))}
           </Group>
-        </Group>
+        </Stack>
       </Text>
     </Group>
   );

src/modules/dashdot/DashdotModule.tsx

@@ -13,6 +13,10 @@ export const DashdotModule = asModule({
   icon: CalendarIcon,
   component: DashdotComponent,
   options: {
+    url: {
+      name: 'Dash. URL',
+      value: '',
+    },
     cpuMultiView: {
       name: 'CPU Multi-Core View',
       value: false,
@@ -88,12 +92,12 @@ const bytePrettyPrint = (byte: number): string =>
     ? `${(byte / 1024).toFixed(1)} KiB`
     : `${byte.toFixed(1)} B`;
 
-const useJson = (service: serviceItem | undefined, url: string) => {
+const useJson = (targetUrl: string, url: string) => {
   const [data, setData] = useState<any | undefined>();
 
   const doRequest = async () => {
     try {
-      const resp = await axios.get(url, { baseURL: service?.url });
+      const resp = await axios.get(`/api/modules/dashdot?url=${url}&base=${targetUrl}`);
 
       setData(resp.data);
       // eslint-disable-next-line no-empty
@@ -101,10 +105,10 @@ const useJson = (service: serviceItem | undefined, url: string) => {
   };
 
   useEffect(() => {
-    if (service?.url) {
+    if (targetUrl) {
       doRequest();
     }
-  }, [service?.url]);
+  }, [targetUrl]);
 
   return data;
 };
@@ -118,8 +122,10 @@ export function DashdotComponent() {
   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 dashdotService: serviceItem | undefined = config.services.filter(
-
+    (service) => service.type === 'Dash.'
+  )[0];
+  const dashdotUrl = dashdotService?.url ?? dashConfig?.url?.value ?? '';
   const enabledGraphs = dashConfig?.graphs?.value ?? ['CPU', 'RAM', 'Storage', 'Network'];
   const cpuEnabled = enabledGraphs.includes('CPU');
   const storageEnabled = enabledGraphs.includes('Storage');
@@ -127,8 +133,8 @@ export function DashdotComponent() {
   const networkEnabled = enabledGraphs.includes('Network');
   const gpuEnabled = enabledGraphs.includes('GPU');
 
-  const info = useJson(dashdotService, '/info');
+  const info = useJson(dashdotUrl, '/info');
-  const storageLoad = useJson(dashdotService, '/load/storage');
+  const storageLoad = useJson(dashdotUrl, '/load/storage');
 
   const totalUsed =
     (storageLoad?.layout as any[])?.reduce((acc, curr) => (curr.load ?? 0) + acc, 0) ?? 0;
@@ -166,13 +172,23 @@ export function DashdotComponent() {
     },
   ].filter((g) => g.enabled);
 
+  if (dashdotUrl === '') {
+    return (
+      <div>
+        <h2 className={classes.heading}>Dash.</h2>
+        <p>
+          No dash. service found. Please add one to your Homarr dashboard or set a dashdot URL in
+          the module options
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div>
       <h2 className={classes.heading}>Dash.</h2>
 
-      {!dashdotService ? (
+      {!info ? (
-        <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}>
@@ -209,9 +225,7 @@ export function DashdotComponent() {
               }
               key={graph.name}
               title={graph.name}
-              src={`${
+              src={`${dashdotUrl}?singleGraphMode=true&graph=${graph.name.toLowerCase()}&theme=${colorScheme}&surface=${(colorScheme ===
-                dashdotService.url
-              }?singleGraphMode=true&graph=${graph.name.toLowerCase()}&theme=${colorScheme}&surface=${(colorScheme ===
               'dark'
                 ? theme.colors.dark[7]
                 : theme.colors.gray[0]

src/modules/date/DateModule.tsx

@@ -34,9 +34,9 @@ export default function DateComponent(props: any) {
   }, []);
 
   return (
-    <Group p="sm" spacing="xs" direction="column">
+    <Group p="sm" spacing="xs">
       <Title>{dayjs(date).format(formatString)}</Title>
-      <Text size="xl">{dayjs(date).format('dddd, MMMM D')}</Text>
+      <Text size="lg">{dayjs(date).format('dddd, MMMM D')}</Text>
     </Group>
   );
 }

src/modules/docker/ContainerActionBar.tsx

@@ -1,5 +1,4 @@
 import { Button, Group, Modal, Title } from '@mantine/core';
-import { useBooleanToggle } from '@mantine/hooks';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import {
   IconCheck,
@@ -14,6 +13,7 @@ import axios from 'axios';
 import Dockerode from 'dockerode';
 import { tryMatchService } from '../../tools/addToHomarr';
 import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
+import { useState } from 'react';
 
 function sendDockerCommand(
   action: string,
@@ -60,7 +60,7 @@ export interface ContainerActionBarProps {
 }
 
 export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
-  const [opened, setOpened] = useBooleanToggle(false);
+  const [opened, setOpened] = useState<boolean>(false);
   return (
     <Group>
       <Modal

src/modules/docker/DockerModule.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Drawer, Group, LoadingOverlay, Text } from '@mantine/core';
+import { ActionIcon, Drawer, Group, LoadingOverlay, Text, Tooltip } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import Docker from 'dockerode';
@@ -20,7 +20,6 @@ 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;
 
@@ -32,14 +31,12 @@ export default function DockerMenuButton(props: any) {
     if (!moduleEnabled) {
       return;
     }
-    setVisible(true);
     setTimeout(() => {
       axios
         .get('/api/docker/containers')
         .then((res) => {
           setContainers(res.data);
           setSelection([]);
-          setVisible(false);
         })
         .catch(() =>
           // Send an Error notification
@@ -61,14 +58,16 @@ export default function DockerMenuButton(props: any) {
   if (containers.length < 1) return null;
   return (
     <>
-      <Drawer opened={opened} onClose={() => setOpened(false)} padding="xl" size="full">
+      <Drawer
-        <ContainerActionBar selected={selection} reload={reload} />
+        opened={opened}
-        <div style={{ position: 'relative' }}>
+        onClose={() => setOpened(false)}
-          <LoadingOverlay transitionDuration={500} visible={visible} />
+        padding="xl"
+        size="full"
+        title={<ContainerActionBar selected={selection} reload={reload} />}
+      >
         <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
-        </div>
       </Drawer>
-      <Group position="center">
+      <Tooltip label="Docker">
         <ActionIcon
           variant="default"
           radius="md"
@@ -78,7 +77,7 @@ export default function DockerMenuButton(props: any) {
         >
           <IconBrandDocker />
         </ActionIcon>
-      </Group>
+      </Tooltip>
     </>
   );
 }

src/modules/docker/DockerTable.tsx

@@ -101,7 +101,6 @@ export default function DockerTable({
         onChange={handleSearchChange}
       />
       <Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
-        <caption>your docker containers</caption>
         <thead>
           <tr>
             <th style={{ width: 40 }}>

src/modules/downloads/DownloadsModule.tsx

@@ -9,6 +9,7 @@ import {
   ScrollArea,
   Center,
   Image,
+  Stack,
 } from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
@@ -82,10 +83,10 @@ export default function DownloadComponent() {
 
   if (downloadServices.length === 0) {
     return (
-      <Group direction="column">
+      <Group>
         <Title order={3}>No supported download clients found!</Title>
         <Group>
-          <Text>Add a download service to view your current downloads...</Text>
+          <Text>Add a download service to view your current downloads</Text>
           <AddItemShelfButton />
         </Group>
       </Group>
@@ -187,13 +188,8 @@ export default function DownloadComponent() {
       );
     });
 
-  const easteregg = (
-    <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-      <Image fit="cover" height={300} src="https://danjohnvelasco.github.io/images/empty.png" />
-    </Center>
-  );
   return (
-    <Group noWrap grow direction="column" mt="xl">
+    <Stack mt="xl">
       <ScrollArea sx={{ height: 300 }}>
         {rows.length > 0 ? (
           <Table highlightOnHover>
@@ -201,9 +197,15 @@ export default function DownloadComponent() {
             <tbody>{rows}</tbody>
           </Table>
         ) : (
-          easteregg
+          <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Image
+              fit="cover"
+              height={300}
+              src="https://danjohnvelasco.github.io/images/empty.png"
+            />
+          </Center>
         )}
       </ScrollArea>
-    </Group>
+    </Stack>
   );
 }

src/modules/downloads/TotalDownloadsModule.tsx

@@ -1,4 +1,4 @@
-import { Text, Title, Group, useMantineTheme, Box, Card, ColorSwatch } from '@mantine/core';
+import { Text, Title, Group, useMantineTheme, Box, Card, ColorSwatch, Stack } from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
@@ -43,6 +43,7 @@ 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(() => {
       // Send one request with each download service inside
       axios
@@ -78,12 +79,16 @@ export default function TotalDownloadsComponent() {
 
   if (downloadServices.length === 0) {
     return (
-      <Group direction="column">
+      <Group>
         <Title order={4}>No supported download clients found!</Title>
-        <Group noWrap>
+        <div>
-          <Text>Add a download service to view your current downloads...</Text>
+          <AddItemShelfButton
-          <AddItemShelfButton />
+            style={{
-        </Group>
+              float: 'inline-end',
+            }}
+          />
+          Add a download service to view your current downloads
+        </div>
       </Group>
     );
   }
@@ -101,9 +106,9 @@ export default function TotalDownloadsComponent() {
   })) as Datum[];
 
   return (
-    <Group noWrap direction="column" grow>
+    <Stack>
       <Title order={4}>Current download speed</Title>
-      <Group direction="column">
+      <Stack>
         <Group>
           <ColorSwatch size={12} color={theme.colors.green[5]} />
           <Text>Download: {humanFileSize(totalDownloadSpeed)}/s</Text>
@@ -112,7 +117,7 @@ export default function TotalDownloadsComponent() {
           <ColorSwatch size={12} color={theme.colors.blue[5]} />
           <Text>Upload: {humanFileSize(totalUploadSpeed)}/s</Text>
         </Group>
-      </Group>
+      </Stack>
       <Box
         style={{
           height: 200,
@@ -133,7 +138,7 @@ export default function TotalDownloadsComponent() {
               <Card p="sm" radius="md" withBorder>
                 <Text size="md">{roundedSeconds} seconds ago</Text>
                 <Card.Section p="sm">
-                  <Group direction="column">
+                  <Stack>
                     <Group>
                       <ColorSwatch size={10} color={theme.colors.green[5]} />
                       <Text size="md">Download: {humanFileSize(Download)}</Text>
@@ -142,7 +147,7 @@ export default function TotalDownloadsComponent() {
                       <ColorSwatch size={10} color={theme.colors.blue[5]} />
                       <Text size="md">Upload: {humanFileSize(Upload)}</Text>
                     </Group>
-                  </Group>
+                  </Stack>
                 </Card.Section>
               </Card>
             );
@@ -181,6 +186,6 @@ export default function TotalDownloadsComponent() {
           ]}
         />
       </Box>
-    </Group>
+    </Stack>
   );
 }

src/modules/moduleWrapper.tsx

@@ -1,4 +1,6 @@
 import {
+  ActionIcon,
+  Box,
   Button,
   Card,
   Group,
@@ -8,6 +10,9 @@ import {
   TextInput,
   useMantineColorScheme,
 } from '@mantine/core';
+import { useHover } from '@mantine/hooks';
+import { IconAdjustments } from '@tabler/icons';
+import { motion } from 'framer-motion';
 import { useConfig } from '../tools/state';
 import { IModule } from './ModuleTypes';
 
@@ -142,6 +147,8 @@ export function ModuleWrapper(props: any) {
   const enabledModules = config.modules ?? {};
   // Remove 'Module' from enabled modules titles
   const isShown = enabledModules[module.title]?.enabled ?? false;
+  //TODO: fix the hover problem
+  const { hovered, ref } = useHover();
 
   if (!isShown) {
     return null;
@@ -150,6 +157,8 @@ export function ModuleWrapper(props: any) {
   return (
     <Card
       {...props}
+      key={module.title}
+      ref={ref}
       hidden={!isShown}
       withBorder
       radius="lg"
@@ -161,47 +170,56 @@ export function ModuleWrapper(props: any) {
           ${(config.settings.appOpacity || 100) / 100}`,
       }}
     >
-      <ModuleMenu
+      <Group position="apart">
-        module={module}
+        <ModuleMenu module={module} hovered={hovered} />
-        styles={{
-          root: {
-            position: 'absolute',
-            top: 12,
-            right: 12,
-          },
-        }}
-      />
         <module.component />
+      </Group>
     </Card>
   );
 }
 
 export function ModuleMenu(props: any) {
-  const { module, styles } = props;
+  const { module, styles, hovered } = props;
   const items: JSX.Element[] = getItems(module);
   return (
     <>
       {module.options && (
         <Menu
-          size="lg"
+          withinPortal
+          width="lg"
           shadow="xl"
+          withArrow
           closeOnItemClick={false}
           radius="md"
           position="left"
           styles={{
-            root: {
+            dropdown: {
-              ...props?.styles?.root,
-            },
-            body: {
               // Add shadow and elevation to the body
               boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.05)',
             },
           }}
         >
+          <Menu.Target>
+            <Box
+              style={{
+                position: 'absolute',
+                top: 12,
+                right: 12,
+              }}
+            >
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: hovered ? 1 : 0 }}>
+                <ActionIcon>
+                  <IconAdjustments />
+                </ActionIcon>
+              </motion.div>
+            </Box>
+          </Menu.Target>
+          <Menu.Dropdown>
             <Menu.Label>Settings</Menu.Label>
             {items.map((item) => (
               <Menu.Item key={item.key}>{item}</Menu.Item>
             ))}
+          </Menu.Dropdown>
         </Menu>
       )}
     </>

src/modules/ping/PingModule.tsx

@@ -56,9 +56,16 @@ export default function PingComponent(props: any) {
     return null;
   }
   return (
-    <Tooltip
+    <motion.div
-      radius="lg"
       style={{ position: 'absolute', bottom: 20, right: 20 }}
+      animate={{
+        scale: isOnline === 'online' ? [1, 0.8, 1] : 1,
+      }}
+      transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
+    >
+      <Tooltip
+        withinPortal
+        radius="lg"
         label={
           isOnline === 'loading'
             ? 'Loading...'
@@ -66,12 +73,6 @@ export default function PingComponent(props: any) {
             ? `Online - ${response}`
             : `Offline - ${response}`
         }
-    >
-      <motion.div
-        animate={{
-          scale: isOnline === 'online' ? [1, 0.8, 1] : 1,
-        }}
-        transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
       >
         <Indicator
           size={13}
@@ -79,7 +80,7 @@ export default function PingComponent(props: any) {
         >
           {null}
         </Indicator>
-      </motion.div>
       </Tooltip>
+    </motion.div>
   );
 }

src/modules/search/SearchModule.tsx

@@ -1,6 +1,7 @@
-import { Kbd, createStyles, Autocomplete, ScrollArea, Popover, Divider } from '@mantine/core';
+import { Kbd, createStyles, Autocomplete } from '@mantine/core';
-import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
+import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
-import React, { useEffect, useRef, useState } from 'react';
+import { useForm } from '@mantine/form';
+import { useEffect, useRef, useState } from 'react';
 import {
   IconSearch as Search,
   IconBrandYoutube as BrandYoutube,

src/modules/weather/WeatherModule.tsx

@@ -1,4 +1,4 @@
-import { Group, Space, Title, Tooltip, Skeleton } from '@mantine/core';
+import { Group, Space, Title, Tooltip, Skeleton, Stack, Box } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import {
@@ -124,8 +124,10 @@ export function WeatherIcon(props: any) {
     }
   }
   return (
-    <Tooltip label={data.name}>
+    <Tooltip withinPortal withArrow label={data.name}>
+      <Box>
         <data.icon size={50} />
+      </Box>
     </Tooltip>
   );
 }
@@ -160,7 +162,7 @@ export default function WeatherComponent(props: any) {
     return (
       <>
         <Skeleton height={40} width={100} mb="xl" />
-        <Group noWrap direction="row">
+        <Group noWrap>
           <Skeleton height={50} circle />
           <Group>
             <Skeleton height={25} width={70} mr="lg" />
@@ -174,7 +176,7 @@ export default function WeatherComponent(props: any) {
     return isFahrenheit ? `${(value * (9 / 5) + 32).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
   }
   return (
-    <Group p="sm" spacing="xs" direction="column">
+    <Stack p="sm" spacing="xs">
       <Title>{usePerferedUnit(weather.current_weather.temperature)}</Title>
       <Group spacing={0}>
         <WeatherIcon code={weather.current_weather.weathercode} />
@@ -185,6 +187,6 @@ export default function WeatherComponent(props: any) {
         <span>{usePerferedUnit(weather.daily.temperature_2m_min[0])}</span>
         <ArrowDownRight size={16} />
       </Group>
-    </Group>
+    </Stack>
   );
 }

src/pages/_app.tsx

@@ -9,7 +9,6 @@ import { useHotkeys } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
 import { ConfigProvider } from '../tools/state';
 import { theme } from '../tools/theme';
-import { styles } from '../tools/styles';
 import { ColorTheme } from '../tools/color';
 
 export default function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
@@ -50,9 +49,6 @@ export default function App(this: any, props: AppProps & { colorScheme: ColorSch
               primaryShade,
               colorScheme,
             }}
-            styles={{
-              ...styles,
-            }}
             withGlobalStyles
             withNormalizeCSS
           >

src/pages/_document.tsx

@@ -1,21 +1,20 @@
-import Document, { DocumentContext } from 'next/document';
+import { createGetInitialProps } from '@mantine/next';
-import { ServerStyles, createStylesServer } from '@mantine/next';
+import Document, { Head, Html, Main, NextScript } from 'next/document';
 
-const stylesServer = createStylesServer();
+const getInitialProps = createGetInitialProps();
 
 export default class _Document extends Document {
-  static async getInitialProps(ctx: DocumentContext) {
+  static getInitialProps = getInitialProps;
-    const initialProps = await Document.getInitialProps(ctx);
-    // Add your app specific logic here
 
-    return {
+  render() {
-      ...initialProps,
+    return (
-      styles: (
+      <Html>
-        <>
+        <Head />
-          {initialProps.styles}
+        <body>
-          <ServerStyles html={initialProps.html} server={stylesServer} />
+          <Main />
-        </>
+          <NextScript />
-      ),
+        </body>
-    };
+      </Html>
+    );
   }
 }

src/pages/api/imageproxy.ts

@@ -0,0 +1,10 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  const url = decodeURIComponent(req.query.url as string);
+  const result = await fetch(url);
+  const body = await result.body;
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  body.pipe(res);
+};

src/pages/api/modules/dashdot.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  // Extract url from req.query as string
+  const { url, base } = req.query;
+
+  // If no url is provided, return an error
+  if (!url || !base) {
+    return res.status(400).json({
+      message: 'Missing required parameter in url',
+    });
+  }
+  // Get the origin URL
+  const response = await axios.get(url as string, { baseURL: base as string });
+  // Return the response
+  return res.status(200).json(response.data);
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/login.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { PasswordInput, Anchor, Paper, Title, Text, Container, Group, Button } from '@mantine/core';
 import { setCookie } from 'cookies-next';
-import { useForm } from '@mantine/hooks';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import axios from 'axios';
 import { IconCheck, IconX } from '@tabler/icons';
 import { useRouter } from 'next/router';
+import { useForm } from '@mantine/form';
 
 // TODO: Add links to the wiki articles about the login process.
 export default function AuthenticationTitle() {

src/tools/styles.ts

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

src/tools/types.ts

@@ -86,7 +86,10 @@ export type ServiceType =
   | 'Overseerr'
   | 'Transmission';
 
-export function tryMatchPort(name: string, form?: any) {
+export function tryMatchPort(name: string | undefined, form?: any) {
+  if (!name) {
+    return undefined;
+  }
   // Match name with portmap key
   const port = portmap.find((p) => p.name === name.toLowerCase());
   if (form && port) {