feat: add update indicator (#1626)

apps/nextjs/src/components/layout/header/user.tsx

@@ -1,13 +1,21 @@
-import { UnstyledButton } from "@mantine/core";
+import { Indicator, UnstyledButton } from "@mantine/core";
+
+import { api } from "@homarr/api/server";
+import { auth } from "@homarr/auth/next";
 
 import { CurrentUserAvatar } from "~/components/user-avatar";
 import { UserAvatarMenu } from "~/components/user-avatar-menu";
 
-export const UserButton = () => {
+export const UserButton = async () => {
+  const data = await api.updateChecker.getAvailableUpdates();
+  const session = await auth();
+  const isAdmin = session?.user.permissions.includes("admin");
   return (
-    <UserAvatarMenu>
+    <UserAvatarMenu availableUpdates={isAdmin ? data : undefined}>
       <UnstyledButton>
-        <CurrentUserAvatar size="md" />
+        <Indicator disabled={data.length === 0 || !isAdmin} size={15} processing withBorder>
+          <CurrentUserAvatar size="md" />
+        </Indicator>
       </UnstyledButton>
     </UserAvatarMenu>
   );

apps/nextjs/src/components/user-avatar-menu.tsx

@@ -7,6 +7,7 @@ import { useRouter } from "next/navigation";
 import { Center, Menu, Stack, Text, useMantineColorScheme } from "@mantine/core";
 import { useHotkeys, useTimeout } from "@mantine/hooks";
 import {
+  IconBellRinging,
   IconCheck,
   IconHome,
   IconLogin,
@@ -23,14 +24,17 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import "flag-icons/css/flag-icons.min.css";
 
+import type { RouterOutputs } from "@homarr/api";
+
 import { useAuthContext } from "~/app/[locale]/_client-providers/session";
 import { CurrentLanguageCombobox } from "./language/current-language-combobox";
 
 interface UserAvatarMenuProps {
   children: ReactNode;
+  availableUpdates?: RouterOutputs["updateChecker"]["getAvailableUpdates"];
 }
 
-export const UserAvatarMenu = ({ children }: UserAvatarMenuProps) => {
+export const UserAvatarMenu = ({ children, availableUpdates }: UserAvatarMenuProps) => {
   const t = useScopedI18n("common.userAvatar.menu");
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
   useHotkeys([["mod+J", toggleColorScheme]]);
@@ -64,6 +68,21 @@ export const UserAvatarMenu = ({ children }: UserAvatarMenuProps) => {
     // We use keepMounted so we can add event listeners to prevent navigating away without saving the board
     <Menu width={300} withArrow withinPortal keepMounted>
       <Menu.Dropdown>
+        {availableUpdates && availableUpdates.length > 0 && availableUpdates[0] && (
+          <>
+            <Menu.Item
+              component={"a"}
+              href={availableUpdates[0].url}
+              target="_blank"
+              leftSection={<IconBellRinging size="1rem" />}
+            >
+              <Text fw="bold" size="sm">
+                {t("updateAvailable", { countUpdates: availableUpdates.length, tag: availableUpdates[0].tagName })}
+              </Text>
+            </Menu.Item>
+            <Menu.Divider />
+          </>
+        )}
         <Menu.Item onClick={toggleColorScheme} leftSection={<ColorSchemeIcon size="1rem" />}>
           {colorSchemeText}
         </Menu.Item>