✨Add improved settings button

src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import {
-  createStyles,
-  Switch,
-  Group,
-  useMantineColorScheme,
-  Kbd,
-  useMantineTheme,
-} from '@mantine/core';
-import { IconMoonStars, IconSun } from '@tabler/icons';
-import { useTranslation } from 'next-i18next';
-
-const useStyles = createStyles((theme) => ({
-  root: {
-    position: 'relative',
-    '& *': {
-      cursor: 'pointer',
-    },
-  },
-
-  icon: {
-    pointerEvents: 'none',
-    position: 'absolute',
-    zIndex: 1,
-    top: 3,
-  },
-
-  iconLight: {
-    left: 4,
-    color: theme.white,
-  },
-
-  iconDark: {
-    right: 4,
-    color: theme.colors.gray[6],
-  },
-}));
-
-export function ColorSchemeSwitch() {
-  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-  const { t } = useTranslation('settings/general/theme-selector');
-  const theme = useMantineTheme();
-  return (
-    <Group>
-      <Switch
-        checked={colorScheme === 'dark'}
-        onChange={() => toggleColorScheme()}
-        size="md"
-        onLabel={<IconSun color={theme.white} size={20} stroke={1.5} />}
-        offLabel={<IconMoonStars color={theme.colors.gray[6]} size={20} stroke={1.5} />}
-      />
-      {t('label', {
-        theme: colorScheme === 'dark' ? 'light' : 'dark',
-      })}
-      <Group spacing={2}>
-        <Kbd>Ctrl</Kbd>+<Kbd>J</Kbd>
-      </Group>
-    </Group>
-  );
-}

src/components/Config/ConfigChanger.tsx

@@ -15,7 +15,7 @@ export default function ConfigChanger() {
   const onConfigChange = (value: string) => {
     // TODO: check what should happen here with @manuel-rw
     // Wheter it should check for the current url and then load the new config only on index
-    // Or it should always load the selected config and open index or ?
+    // Or it should always load the selected config and open index or ? --> change url to page
     setActiveConfig(value);
     /*
         loadConfig(e ?? 'default');

src/components/Settings/Customization/MetaTitleChanger.tsx

@@ -8,6 +8,7 @@ interface MetaTitleChangerProps {
   defaultValue: string | undefined;
 }
 
+// TODO: change to pageTitle
 export const MetaTitleChanger = ({ defaultValue }: MetaTitleChangerProps) => {
   const { t } = useTranslation('settings/customization/page-appearance');
   const updateConfig = useConfigStore((x) => x.updateConfig);

src/components/Settings/Customization/PageTitleChanger.tsx

@@ -8,6 +8,7 @@ interface PageTitleChangerProps {
   defaultValue: string | undefined;
 }
 
+// TODO: change to dashboard title
 export const PageTitleChanger = ({ defaultValue }: PageTitleChangerProps) => {
   const { t } = useTranslation('settings/customization/page-appearance');
   const updateConfig = useConfigStore((x) => x.updateConfig);

src/components/Settings/SettingsDrawer.tsx

@@ -31,37 +31,25 @@ function SettingsMenu() {
   );
 }
 
-export function SettingsMenuButton(props: any) {
-  useHotkeys([['ctrl+L', () => setOpened(!opened)]]);
+interface SettingsDrawerProps {
+  opened: boolean;
+  closeDrawer: () => void;
+}
+
+export function SettingsDrawer({ opened, closeDrawer }: SettingsDrawerProps) {
   const { t } = useTranslation('settings/common');
 
-  const [opened, setOpened] = useState(false);
-
   return (
-    <>
     <Drawer
       size="xl"
       padding="lg"
       position="right"
       title={<Title order={5}>{t('title')}</Title>}
-        opened={props.opened || opened}
-        onClose={() => setOpened(false)}
+      opened={opened}
+      onClose={closeDrawer}
     >
       <SettingsMenu />
       <Credits />
     </Drawer>
-      <Tooltip label={t('tooltip')}>
-        <ActionIcon
-          variant="default"
-          radius="md"
-          size="xl"
-          color="blue"
-          style={props.style}
-          onClick={() => setOpened(true)}
-        >
-          <IconSettings />
-        </ActionIcon>
-      </Tooltip>
-    </>
   );
 }

src/components/layout/header/Header.tsx

@@ -4,9 +4,9 @@ import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
 
 import DockerMenuButton from '../../../modules/docker/DockerModule';
 import { Search } from './Search';
-import { SettingsMenuButton } from '../../Settings/SettingsMenu';
 import { Logo } from '../Logo';
 import { useCardStyles } from '../useCardStyles';
+import { SettingsMenu } from './SettingsMenu';
 
 export const HeaderHeight = 64;
 
@@ -23,7 +23,7 @@ export function Header(props: any) {
         <Group position="right" noWrap>
           <Search />
           <DockerMenuButton />
-          <SettingsMenuButton />
+          <SettingsMenu />
           <AddItemShelfButton />
         </Group>
       </Group>

src/components/layout/header/SettingsMenu.tsx

@@ -0,0 +1,34 @@
+import { ActionIcon, Menu, Tooltip } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons';
+import { SettingsDrawer } from '../../Settings/SettingsDrawer';
+import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';
+
+export const SettingsMenu = () => {
+  const [drawerOpened, drawer] = useDisclosure(false);
+
+  return (
+    <>
+      <Tooltip label="Open Menu">
+        <Menu width={250}>
+          <Menu.Target>
+            <ActionIcon variant="default" radius="md" size="xl" color="blue">
+              <IconMenu2 />
+            </ActionIcon>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <ColorSchemeSwitch />
+            <Menu.Divider />
+            <Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>
+              Homarr Settings
+            </Menu.Item>
+            <Menu.Item icon={<IconInfoCircle strokeWidth={1.2} size={18} />} onClick={() => {}}>
+              About
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      </Tooltip>
+      <SettingsDrawer opened={drawerOpened} closeDrawer={drawer.close} />
+    </>
+  );
+};

src/components/layout/header/SettingsMenu/ColorSchemeSwitch.tsx

@@ -0,0 +1,22 @@
+import { Menu, useMantineColorScheme, useMantineTheme } from '@mantine/core';
+import { IconMoonStars, IconSun } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+
+export const ColorSchemeSwitch = () => {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  const { t } = useTranslation('settings/general/theme-selector');
+
+  const Icon = colorScheme === 'dark' ? IconSun : IconMoonStars;
+
+  return (
+    <Menu.Item
+      closeMenuOnClick={false}
+      icon={<Icon strokeWidth={1.2} size={18} />}
+      onClick={() => toggleColorScheme()}
+    >
+      {t('label', {
+        theme: colorScheme === 'dark' ? 'light' : 'dark',
+      })}
+    </Menu.Item>
+  );
+};