Merge branch 'dev' into add-umami

src/components/layout/Background/PolkaElement.tsx

@@ -17,7 +17,7 @@ export const PolkaElement = ({
     <Box
       style={{
         transform: `rotate(${rotation}deg)`,
-        pointerEvents: 'none'
+        pointerEvents: 'none',
       }}
       className="polka"
       pos="absolute"

src/components/layout/Common/Logo.tsx

@@ -1,7 +1,7 @@
 import { Group, Image, Text } from '@mantine/core';
+import { useConfigContext } from '~/config/provider';
 import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 
-import { useConfigContext } from '~/config/provider';
 import { usePrimaryGradient } from './useGradient';
 
 interface LogoProps {

src/components/layout/Common/useCardStyles.ts

@@ -1,5 +1,4 @@
 import { createStyles } from '@mantine/core';
-
 import { useConfigContext } from '~/config/provider';
 
 export const useCardStyles = (isCategory: boolean) => {

src/components/layout/Common/useGradient.tsx

@@ -1,5 +1,4 @@
 import { MantineGradient } from '@mantine/core';
-
 import { useColorTheme } from '~/tools/color';
 
 export const usePrimaryGradient = () => {

src/components/layout/Meta/BoardHeadOverride.tsx

@@ -1,8 +1,7 @@
 import Head from 'next/head';
 import React from 'react';
-import { firstUpperCase } from '~/tools/shared/strings';
-
 import { useConfigContext } from '~/config/provider';
+import { firstUpperCase } from '~/tools/shared/strings';
 
 export const BoardHeadOverride = () => {
   const { config, name } = useConfigContext();

src/components/layout/Templates/ManageLayout.tsx

@@ -112,7 +112,13 @@ export const ManageLayout = ({ children }: ManageLayoutProps) => {
           {children}
         </Paper>
       </AppShell>
-      <Drawer opened={burgerMenuOpen} onClose={closeBurgerMenu}>
+      <Drawer
+        opened={burgerMenuOpen}
+        onClose={closeBurgerMenu}
+        transitionProps={{
+          transition: 'slide-right',
+        }}
+      >
         {navigationLinkComponents}
       </Drawer>
     </>

src/components/layout/header/About/AboutModal.tsx

@@ -7,8 +7,8 @@ import {
   Grid,
   Group,
   HoverCard,
-  Kbd,
   Image,
+  Kbd,
   Modal,
   Table,
   Text,
@@ -31,11 +31,11 @@ import { motion } from 'framer-motion';
 import { InitOptions } from 'i18next';
 import { Trans, i18n, useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
-
 import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
 import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
 import { useColorTheme } from '~/tools/color';
+
 import { usePrimaryGradient } from '../../Common/useGradient';
 import Credits from './Credits';
 import Tip from './Tip';
@@ -75,13 +75,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
       opened={opened}
       title={
         <Group spacing="sm">
-          <Image
-            alt="Homarr logo"
-            src="/imgs/logo/logo.png"
-            width={30}
-            height={30}
-            fit="contain"
-          />
+          <Image alt="Homarr logo" src="/imgs/logo/logo.png" width={30} height={30} fit="contain" />
           <Title order={3} variant="gradient" gradient={colorGradiant}>
             {t('about')} Homarr
           </Title>
@@ -271,13 +265,17 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
                   transition={{ duration: 0.8, ease: 'easeInOut' }}
                 >
                   <Badge color="green" variant="filled">
-                    {t('version.new',{ newVersion: newVersionAvailable})}
+                    {t('version.new', { newVersion: newVersionAvailable })}
                   </Badge>
                 </motion.div>
               </HoverCard.Target>
               <HoverCard.Dropdown>
                 <Text>
-                  {t('version.dropdown', {currentVersion: attributes.packageVersion}).split('{{newVersion}}')[0]}
+                  {
+                    t('version.dropdown', { currentVersion: attributes.packageVersion }).split(
+                      '{{newVersion}}'
+                    )[0]
+                  }
                   <b>
                     <Anchor
                       target="_blank"
@@ -286,7 +284,11 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
                       {newVersionAvailable}
                     </Anchor>
                   </b>
-                  {t('version.dropdown', {currentVersion: attributes.packageVersion}).split('{{newVersion}}')[1]}
+                  {
+                    t('version.dropdown', { currentVersion: attributes.packageVersion }).split(
+                      '{{newVersion}}'
+                    )[1]
+                  }
                 </Text>
               </HoverCard.Dropdown>
             </HoverCard>

src/components/layout/header/About/Credits.tsx

@@ -1,7 +1,6 @@
 import { Anchor, Box, Collapse, Flex, Table, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
-
 import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
 
 export default function Credits() {

src/components/layout/header/AvatarMenu.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Badge, Menu, UnstyledButton, useMantineTheme } from '@mantine/core';
+import { Avatar, Badge, Indicator, Menu, UnstyledButton, useMantineTheme } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import {
   IconDashboard,
@@ -38,10 +38,17 @@ export const AvatarMenu = () => {
       <UnstyledButton>
         <Menu width={256}>
           <Menu.Target>
-            <CurrentUserAvatar user={sessionData?.user ?? null} />
+            <CurrentUserAvatar
+              newVersionAvailable={newVersionAvailable ? true : false}
+              user={sessionData?.user ?? null}
+            />
           </Menu.Target>
           <Menu.Dropdown>
-            <Menu.Item closeMenuOnClick={false} icon={<Icon size="1rem" />} onClick={toggleColorScheme}>
+            <Menu.Item
+              closeMenuOnClick={false}
+              icon={<Icon size="1rem" />}
+              onClick={toggleColorScheme}
+            >
               {t('actions.avatar.switchTheme')}
             </Menu.Item>
             {sessionData?.user && (
@@ -113,13 +120,24 @@ export const AvatarMenu = () => {
 };
 
 type CurrentUserAvatarProps = {
+  newVersionAvailable: boolean;
   user: User | null;
 };
 
 const CurrentUserAvatar = forwardRef<HTMLDivElement, CurrentUserAvatarProps>(
-  ({ user, ...others }, ref) => {
+  ({ user, newVersionAvailable, ...others }, ref) => {
     const { primaryColor } = useMantineTheme();
     if (!user) return <Avatar ref={ref} {...others} />;
+
+    if (newVersionAvailable)
+      return (
+        <Indicator withBorder offset={2} color="blue" processing size={15}>
+          <Avatar ref={ref} color={primaryColor} {...others}>
+            {user.name?.slice(0, 2).toUpperCase()}
+          </Avatar>
+        </Indicator>
+      );
+
     return (
       <Avatar ref={ref} color={primaryColor} {...others}>
         {user.name?.slice(0, 2).toUpperCase()}