♻️ Improve avatar menu, add avatar menu to manage pages, add default dashboard to user settings schema

prisma/schema.prisma

@@ -74,6 +74,7 @@ model UserSettings {
     userId               String
     colorScheme          String  @default("environment") // environment, light, dark
     language             String  @default("en")
+    defaultDashboard     String  @default("default")
     searchTemplate       String  @default("https://google.com/search?q=%s")
     openSearchInNewTab   Boolean @default(true)
     disablePingPulse     Boolean @default(false)

src/components/layout/admin/main-admin.layout.tsx

@@ -44,6 +44,7 @@ import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
 
 import { Logo } from '../Logo';
+import { MainHeader } from '../new-header/Header';
 
 interface MainLayoutProps {
   children: ReactNode;
@@ -56,7 +57,8 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
 
   const screenLargerThanMd = useScreenLargerThan('md');
 
-  const [burgerMenuOpen, { toggle: toggleBurgerMenu, close: closeBurgerMenu }] = useDisclosure(false);
+  const [burgerMenuOpen, { toggle: toggleBurgerMenu, close: closeBurgerMenu }] =
+    useDisclosure(false);
 
   const navigationLinks = (
     <>
@@ -141,53 +143,7 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
             </Navbar.Section>
           </Navbar>
         }
-        header={
+        header={<MainHeader showExperimental logoHref="/manage" />}
-          <Header height={60 + 30} pb="sm" pt={0}>
-            <Box bg="red" h={30} p={3} px={6}>
-              <Flex h="100%" align="center" columnGap={7}>
-                <IconAlertTriangle color="white" size="1rem" />
-                <Text color="white" lineClamp={1}>
-                  This is an experimental feature of Homarr. Please report any issues to the
-                  official Homarr team.
-                </Text>
-              </Flex>
-            </Box>
-            <Group spacing="xl" mt="xs" px="md" position="apart" noWrap>
-              <Group noWrap>
-                {!screenLargerThanMd && (
-                  <Burger opened={burgerMenuOpen} onClick={toggleBurgerMenu} />
-                )}
-                <UnstyledButton component={Link} href="/manage">
-                  <Logo />
-                </UnstyledButton>
-              </Group>
-              <TextInput radius="xl" w={400} placeholder="Search..." variant="filled" />
-
-              <Group noWrap>
-                <UnstyledButton>
-                  <Menu>
-                    <Menu.Target>
-                      <Avatar />
-                    </Menu.Target>
-                    <Menu.Dropdown>
-                      <Menu.Item icon={<IconSun size="1rem" />}>Switch theme</Menu.Item>
-                      <Menu.Item icon={<IconUserSearch size="1rem" />}>View Profile</Menu.Item>
-                      <Menu.Item icon={<IconDashboard size="1rem" />}>Default Dashboard</Menu.Item>
-                      <Menu.Divider />
-                      <Menu.Item
-                        icon={<IconLogout size="1rem" />}
-                        color="red"
-                        onClick={() => signOut()}
-                      >
-                        Logout
-                      </Menu.Item>
-                    </Menu.Dropdown>
-                  </Menu>
-                </UnstyledButton>
-              </Group>
-            </Group>
-          </Header>
-        }
         footer={
           <Footer height={25}>
             <Group position="apart" px="md">

src/components/layout/new-header/AvatarMenu.tsx

@@ -7,7 +7,7 @@ import {
   IconLogout,
   IconMoonStars,
   IconSun,
-  IconUserSearch,
+  IconUserCog,
 } from '@tabler/icons-react';
 import { User } from 'next-auth';
 import { signOut, useSession } from 'next-auth/react';
@@ -37,8 +37,16 @@ export const AvatarMenu = () => {
             </Menu.Item>
             {sessionData?.user && (
               <>
-                <Menu.Item icon={<IconUserSearch size="1rem" />}>View Profile</Menu.Item>
+                <Menu.Item
-                <Menu.Item icon={<IconDashboard size="1rem" />}>Default Dashboard</Menu.Item>
+                  component={Link}
+                  href="/manage/preferences"
+                  icon={<IconUserCog size="1rem" />}
+                >
+                  Settings
+                </Menu.Item>
+                <Menu.Item component={Link} href="/board" icon={<IconDashboard size="1rem" />}>
+                  Default Dashboard
+                </Menu.Item>
                 <Menu.Divider />
               </>
             )}