🔀 Merge Mantine v5.0 into Overseerr-integaration

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,18 +40,18 @@ export function AddItemShelfButton(props: any) {
       >
         <AddAppShelfItemForm setOpened={setOpened} />
       </Modal>
-      <ActionIcon
-        variant="default"
-        radius="md"
-        size="xl"
-        color="blue"
-        style={props.style}
-        onClick={() => setOpened(true)}
-      >
-        <Tooltip label="Add a service">
-          <Apps />
-        </Tooltip>
-      </ActionIcon>
+      <Tooltip withinPortal label="Add a service">
+        <ActionIcon
+          variant="default"
+          radius="md"
+          size="xl"
+          color="blue"
+          style={props.style}
+          onClick={() => setOpened(true)}
+        >
+          <IconApps />
+        </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),
-      username: props.username ?? (undefined as unknown as string),
-      password: props.password ?? (undefined as unknown as string),
-      openedUrl: props.openedUrl ?? (undefined as unknown as string),
+      apiKey: props.apiKey ?? undefined,
+      username: props.username ?? undefined,
+      password: props.password ?? undefined,
+      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'])) {
-            form.values.status = undefined;
-          }
-          if (form.values.newTab === true) {
-            form.values.newTab = undefined;
+          const newForm = { ...form.values };
+          if (newForm.newTab === true) newForm.newTab = undefined;
+          if (newForm.category === null) newForm.category = undefined;
+          if (newForm.status.length === 1 && newForm.status[0] === '200') {
+            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,159 +188,160 @@ 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.Tab label="Options">
-            <ScrollArea style={{ height: 500 }} scrollbarSize={4}>
-              <Group direction="column" grow>
-                <TextInput
-                  required
-                  label="Service name"
-                  placeholder="Plex"
-                  {...form.getInputProps('name')}
-                />
-
-                <TextInput
-                  required
-                  label="Icon URL"
-                  placeholder={DEFAULT_ICON}
-                  {...form.getInputProps('icon')}
-                />
-                <TextInput
-                  required
-                  label="Service URL"
-                  placeholder="http://localhost:7575"
-                  {...form.getInputProps('url')}
-                />
-                <TextInput
-                  label="On Click URL"
-                  placeholder="http://sonarr.example.com"
-                  {...form.getInputProps('openedUrl')}
-                />
-                <Select
-                  label="Service type"
-                  defaultValue="Other"
-                  placeholder="Pick one"
-                  required
-                  searchable
-                  data={ServiceTypeList}
-                  {...form.getInputProps('type')}
-                />
-                <Select
-                  label="Category"
-                  data={categoryList}
-                  placeholder="Select a category or create a new one"
-                  nothingFound="Nothing found"
-                  searchable
-                  clearable
-                  creatable
-                  onClick={(e) => {
-                    e.preventDefault();
-                  }}
-                  getCreateLabel={(query) => `+ Create "${query}"`}
-                  onCreate={(query) => {}}
-                  {...form.getInputProps('category')}
-                />
-                <LoadingOverlay visible={isLoading} />
-                {(form.values.type === 'Sonarr' ||
-                  form.values.type === 'Radarr' ||
-                  form.values.type === 'Lidarr' ||
-                  form.values.type === 'Overseerr' ||
-                  form.values.type === 'Readarr') && (
-                  <>
-                    <TextInput
-                      required
-                      label="API key"
-                      placeholder="Your API key"
-                      value={form.values.apiKey}
-                      onChange={(event) => {
-                        form.setFieldValue('apiKey', event.currentTarget.value);
-                      }}
-                      error={form.errors.apiKey && 'Invalid API key'}
-                    />
-                    <Tip>
-                      Get your API key{' '}
-                      <Anchor
-                        target="_blank"
-                        weight="bold"
-                        style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
-                        href={`${hostname}/settings/general`}
-                      >
-                        here.
-                      </Anchor>
-                    </Tip>
-                  </>
-                )}
-                {form.values.type === 'qBittorrent' && (
-                  <>
-                    <TextInput
-                      required
-                      label="Username"
-                      placeholder="admin"
-                      value={form.values.username}
-                      onChange={(event) => {
-                        form.setFieldValue('username', event.currentTarget.value);
-                      }}
-                      error={form.errors.username && 'Invalid username'}
-                    />
-                    <TextInput
-                      required
-                      label="Password"
-                      placeholder="adminadmin"
-                      value={form.values.password}
-                      onChange={(event) => {
-                        form.setFieldValue('password', event.currentTarget.value);
-                      }}
-                      error={form.errors.password && 'Invalid password'}
-                    />
-                  </>
-                )}
-                {form.values.type === 'Deluge' && (
-                  <>
-                    <TextInput
-                      label="Password"
-                      placeholder="password"
-                      value={form.values.password}
-                      onChange={(event) => {
-                        form.setFieldValue('password', event.currentTarget.value);
-                      }}
-                      error={form.errors.password && 'Invalid password'}
-                    />
-                  </>
-                )}
-                {form.values.type === 'Transmission' && (
-                  <>
-                    <TextInput
-                      label="Username"
-                      placeholder="admin"
-                      value={form.values.username}
-                      onChange={(event) => {
-                        form.setFieldValue('username', event.currentTarget.value);
-                      }}
-                      error={form.errors.username && 'Invalid username'}
-                    />
-                    <TextInput
-                      label="Password"
-                      placeholder="adminadmin"
-                      value={form.values.password}
-                      onChange={(event) => {
-                        form.setFieldValue('password', event.currentTarget.value);
-                      }}
-                      error={form.errors.password && 'Invalid password'}
-                    />
-                  </>
-                )}
-              </Group>
-            </ScrollArea>
-          </Tabs.Tab>
-          <Tabs.Tab label="Advanced Options">
-            <Group direction="column" grow>
+        <Tabs defaultValue="Options">
+          <Tabs.List grow>
+            <Tabs.Tab value="Options">Options</Tabs.Tab>
+            <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"
+                placeholder={DEFAULT_ICON}
+                {...form.getInputProps('icon')}
+              />
+              <TextInput
+                required
+                label="Service URL"
+                placeholder="http://localhost:7575"
+                {...form.getInputProps('url')}
+              />
+              <TextInput
+                label="On Click URL"
+                placeholder="http://sonarr.example.com"
+                {...form.getInputProps('openedUrl')}
+              />
+              <Select
+                label="Service type"
+                defaultValue="Other"
+                placeholder="Pick one"
+                required
+                searchable
+                data={ServiceTypeList}
+                {...form.getInputProps('type')}
+              />
+              <Select
+                label="Category"
+                data={categories}
+                placeholder="Select a category or create a new one"
+                nothingFound="Nothing found"
+                searchable
+                clearable
+                creatable
+                onCreate={(query) => {
+                  const item = { value: query, label: query };
+                  setCategories([...InitialCategories, query]);
+                  return item;
+                }}
+                getCreateLabel={(query) => `+ Create "${query}"`}
+                {...form.getInputProps('category')}
+              />
+              <LoadingOverlay visible={isLoading} />
+              {(form.values.type === 'Sonarr' ||
+                form.values.type === 'Radarr' ||
+                form.values.type === 'Lidarr' ||
+                form.values.type === 'Readarr') && (
+                <>
+                  <TextInput
+                    required
+                    label="API key"
+                    placeholder="Your API key"
+                    value={form.values.apiKey}
+                    onChange={(event) => {
+                      form.setFieldValue('apiKey', event.currentTarget.value);
+                    }}
+                    error={form.errors.apiKey && 'Invalid API key'}
+                  />
+                  <Tip>
+                    Get your API key{' '}
+                    <Anchor
+                      target="_blank"
+                      weight="bold"
+                      style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
+                      href={`${hostname}/settings/general`}
+                    >
+                      here.
+                    </Anchor>
+                  </Tip>
+                </>
+              )}
+              {form.values.type === 'qBittorrent' && (
+                <>
+                  <TextInput
+                    required
+                    label="Username"
+                    placeholder="admin"
+                    value={form.values.username}
+                    onChange={(event) => {
+                      form.setFieldValue('username', event.currentTarget.value);
+                    }}
+                    error={form.errors.username && 'Invalid username'}
+                  />
+                  <PasswordInput
+                    required
+                    label="Password"
+                    placeholder="adminadmin"
+                    value={form.values.password}
+                    onChange={(event) => {
+                      form.setFieldValue('password', event.currentTarget.value);
+                    }}
+                    error={form.errors.password && 'Invalid password'}
+                  />
+                </>
+              )}
+              {form.values.type === 'Deluge' && (
+                <>
+                  <PasswordInput
+                    label="Password"
+                    placeholder="password"
+                    value={form.values.password}
+                    onChange={(event) => {
+                      form.setFieldValue('password', event.currentTarget.value);
+                    }}
+                    error={form.errors.password && 'Invalid password'}
+                  />
+                </>
+              )}
+              {form.values.type === 'Transmission' && (
+                <>
+                  <TextInput
+                    label="Username"
+                    placeholder="admin"
+                    value={form.values.username}
+                    onChange={(event) => {
+                      form.setFieldValue('username', event.currentTarget.value);
+                    }}
+                    error={form.errors.username && 'Invalid username'}
+                  />
+                  <PasswordInput
+                    label="Password"
+                    placeholder="adminadmin"
+                    value={form.values.password}
+                    onChange={(event) => {
+                      form.setFieldValue('password', event.currentTarget.value);
+                    }}
+                    error={form.errors.password && 'Invalid password'}
+                  />
+                </>
+              )}
+            </Stack>
+          </Tabs.Panel>
+          <Tabs.Panel value="Advanced Options">
+            <Stack>
               <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>
-          </Tabs.Tab>
+            </Stack>
+          </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 [toggledCategories, settoggledCategories] = useLocalStorage({
+  const { config, setConfig } = useConfig();
+  // 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
-    defaultValue: { 0: true, 1: true, 2: true, 3: true, 4: true } as Record<string, boolean>,
+    // This is a bit of a hack to toggle the categories on the first load, return a string[] of the categories
+    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
-      <Group grow direction="column">
+      // TODO: Style accordion so that the bar is transparent to the user settings
+      <Stack>
         <Accordion
-          disableIconRotation
-          classNames={classes}
+          variant="separated"
+          radius="lg"
           order={2}
-          iconPosition="right"
           multiple
-          initialState={toggledCategories}
-          onChange={(idx) => settoggledCategories(idx)}
+          value={toggledCategories}
+          onChange={(state) => {
+            setToggledCategories(state);
+          }}
         >
           {categoryList.map((category, idx) => (
-            <Accordion.Item key={category} label={category}>
-              {item(category)}
+            <Accordion.Item key={category} value={idx.toString()}>
+              <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">
-              {item()}
+            <Accordion.Item key="Other" value="Other">
+              <Accordion.Control>Other</Accordion.Control>
+              <Accordion.Panel>{getItems()}</Accordion.Panel>
             </Accordion.Item>
           ) : null}
           {downloadEnabled ? (
-            <Accordion.Item key="Downloads" label="Your downloads">
-              <Paper
-                p="lg"
-                radius="lg"
-                style={{
-                  background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+            <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>
+                  }}
+                >
+                  <ModuleMenu module={DownloadsModule} />
+                  <DownloadComponent />
+                </Paper>
+              </Accordion.Panel>
             </Accordion.Item>
           ) : null}
         </Accordion>
-      </Group>
+      </Stack>
     );
   }
   return (
-    <Group grow direction="column">
-      {item()}
+    <Stack>
+      {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}
-                  fit="contain"
+                  src={`/api/imageproxy?url=${service.icon}`}
+                  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,49 +23,59 @@ export default function AppShelfMenu(props: any) {
         <AddAppShelfItemForm setOpened={setOpened} {...service} message="Save service" />
       </Modal>
       <Menu
-        position="right"
-        radius="md"
+        withinPortal
+        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.Label>Settings</Menu.Label>
-        <Menu.Item
-          color="primary"
-          icon={<Edit />}
-          // TODO: #2 Add the ability to edit the service.
-          onClick={() => setOpened(true)}
-        >
-          Edit
-        </Menu.Item>
-        <Menu.Label>Danger zone</Menu.Label>
-        <Menu.Item
-          color="red"
-          onClick={(e: any) => {
-            setConfig({
-              ...config,
-              services: config.services.filter((s) => s.id !== service.id),
-            });
-            showNotification({
-              autoClose: 5000,
-              title: (
-                <Text>
-                  Service <b>{service.name}</b> removed successfully!
-                </Text>
-              ),
-              color: 'green',
-              icon: <Check />,
-              message: undefined,
-            });
-          }}
-          icon={<Trash />}
-        >
-          Delete
-        </Menu.Item>
+        <Menu.Target>
+          <ActionIcon style={{}}>
+            <IconMenu />
+          </ActionIcon>
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Label>Settings</Menu.Label>
+          <Menu.Item
+            color="primary"
+            icon={<Edit />}
+            // TODO: #2 Add the ability to edit the service.
+            onClick={() => setOpened(true)}
+          >
+            Edit
+          </Menu.Item>
+          <Menu.Label>Danger zone</Menu.Label>
+          <Menu.Item
+            color="red"
+            onClick={(e: any) => {
+              setConfig({
+                ...config,
+                services: config.services.filter((s) => s.id !== service.id),
+              });
+              showNotification({
+                autoClose: 5000,
+                title: (
+                  <Text>
+                    Service <b>{service.name}</b> removed successfully!
+                  </Text>
+                ),
+                color: 'green',
+                icon: <Check />,
+                message: undefined,
+              });
+            }}
+            icon={<Trash />}
+          >
+            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."}>
+      <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
+        <Center>
           <Loader />
-        </Tooltip>
-      </Center>
+        </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 {
-  IconUpload as Upload,
-  IconPhoto as Photo,
-  IconX as X,
-  IconCheck as Check,
-  TablerIcon,
-} from '@tabler/icons';
-import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
+import { Group, Text, useMantineTheme } from '@mantine/core';
+import { IconX as X, IconCheck as Check, IconX, IconPhoto, IconUpload } from '@tabler/icons';
 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)}
-    </FullScreenDropzone>
+      <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
+        <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 }) => (
-    <ColorSwatch
-      component="button"
-      type="button"
-      onClick={() => setConfigColor(color)}
-      key={color}
-      color={swatch}
-      size={22}
-      style={{ color: theme.white, cursor: 'pointer' }}
-    />
+    <Grid.Col span={2} key={color}>
+      <ColorSwatch
+        component="button"
+        type="button"
+        onClick={() => setConfigColor(color)}
+        color={swatch}
+        size={22}
+        style={{ cursor: 'pointer' }}
+      />
+    </Grid.Col>
   ));
 
   return (
-    <Group direction="row" spacing={3}>
+    <Group>
       <Popover
+        width={250}
+        withinPortal
         opened={opened}
         onClose={() => setOpened(false)}
-        transitionDuration={0}
-        target={
+        position="left"
+        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' }}
           />
-        }
-        styles={{
-          root: {
-            marginRight: theme.spacing.xs,
-          },
-          body: {
-            width: 152,
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
-          },
-          arrow: {
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
-          },
-        }}
-        position="bottom"
-        placement="end"
-        withArrow
-        arrowSize={3}
-      >
-        <Group spacing="xs">{swatches}</Group>
+        </Popover.Target>
+        <Popover.Dropdown>
+          <Grid gutter="lg" columns={14}>
+            {swatches}
+          </Grid>
+        </Popover.Dropdown>
       </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">
-      <Group grow direction="column" spacing={0}>
+    <Stack mb="md" mr="sm">
+      <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.Tab data-autofocus label="Common">
+    <Tabs defaultValue="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.Tab label="Customizations">
+      </Tabs.Panel>
+      <Tabs.Panel value="Customizations">
         <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
           <AdvancedSettings />
         </ScrollArea>
-      </Tabs.Tab>
+      </Tabs.Panel>
     </Tabs>
   );
 }
@@ -40,18 +44,18 @@ export function SettingsMenuButton(props: any) {
         <SettingsMenu />
         <Credits />
       </Drawer>
-      <ActionIcon
-        variant="default"
-        radius="md"
-        size="xl"
-        color="blue"
-        style={props.style}
-        onClick={() => setOpened(true)}
-      >
-        <Tooltip label="Settings">
+      <Tooltip label="Settings">
+        <ActionIcon
+          variant="default"
+          radius="md"
+          size="xl"
+          color="blue"
+          style={props.style}
+          onClick={() => setOpened(true)}
+        >
           <IconSettings />
-        </Tooltip>
-      </ActionIcon>
+        </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 }) => (
-    <ColorSwatch
-      component="button"
-      type="button"
-      onClick={() => setConfigShade(shade)}
-      key={Number(shade)}
-      color={swatch}
-      size={22}
-      style={{ color: theme.white, cursor: 'pointer' }}
-    />
+    <Grid.Col span={1} key={Number(shade)}>
+      <ColorSwatch
+        component="button"
+        type="button"
+        onClick={() => setConfigShade(shade)}
+        color={swatch}
+        size={22}
+        style={{ cursor: 'pointer' }}
+      />
+    </Grid.Col>
   ));
 
   const secondarySwatches = secondaryShades.map(({ swatch, shade }) => (
-    <ColorSwatch
-      component="button"
-      type="button"
-      onClick={() => setConfigShade(shade)}
-      key={Number(shade)}
-      color={swatch}
-      size={22}
-      style={{ color: theme.white, cursor: 'pointer' }}
-    />
+    <Grid.Col span={1} key={Number(shade)}>
+      <ColorSwatch
+        component="button"
+        type="button"
+        onClick={() => setConfigShade(shade)}
+        color={swatch}
+        size={22}
+        style={{ cursor: 'pointer' }}
+      />
+    </Grid.Col>
   ));
 
   return (
-    <Group direction="row" spacing={3}>
+    <Group>
       <Popover
+        width={350}
+        withinPortal
         opened={opened}
         onClose={() => setOpened(false)}
-        transitionDuration={0}
-        target={
+        position="left"
+        withArrow
+      >
+        <Popover.Target>
           <ColorSwatch
             component="button"
             type="button"
@@ -69,27 +84,15 @@ export function ShadeSelector() {
             size={22}
             style={{ display: 'block', cursor: 'pointer' }}
           />
-        }
-        styles={{
-          root: {
-            marginRight: theme.spacing.xs,
-          },
-          body: {
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
-          },
-          arrow: {
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
-          },
-        }}
-        position="bottom"
-        placement="end"
-        withArrow
-        arrowSize={3}
-      >
-        <Group direction="column" spacing="xs">
-          <Group spacing="xs">{primarySwatches}</Group>
-          <Group spacing="xs">{secondarySwatches}</Group>
-        </Group>
+        </Popover.Target>
+        <Popover.Dropdown>
+          <Stack spacing="xs">
+            <Grid gutter="lg" columns={10}>
+              {primarySwatches}
+              {secondarySwatches}
+            </Grid>
+          </Stack>
+        </Popover.Dropdown>
       </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>
   );
 }