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>

package.json

@@ -1,6 +1,7 @@
 {
   "name": "homarr",
   "private": true,
+  "version": "1.0.0",
   "scripts": {
     "build": "cross-env CI=true turbo build",
     "clean": "git clean -xdf node_modules",

packages/api/src/root.ts

@@ -13,6 +13,7 @@ import { logRouter } from "./router/log";
 import { mediaRouter } from "./router/medias/media-router";
 import { searchEngineRouter } from "./router/search-engine/search-engine-router";
 import { serverSettingsRouter } from "./router/serverSettings";
+import { updateCheckerRouter } from "./router/update-checker";
 import { userRouter } from "./router/user";
 import { widgetRouter } from "./router/widgets";
 import { createTRPCRouter } from "./trpc";
@@ -35,6 +36,7 @@ export const appRouter = createTRPCRouter({
   cronJobs: cronJobsRouter,
   apiKeys: apiKeysRouter,
   media: mediaRouter,
+  updateChecker: updateCheckerRouter,
 });
 
 // export type definition of API

packages/api/src/router/update-checker.ts

@@ -0,0 +1,11 @@
+import { updateCheckerRequestHandler } from "@homarr/request-handler/update-checker";
+
+import { createTRPCRouter, protectedProcedure } from "../trpc";
+
+export const updateCheckerRouter = createTRPCRouter({
+  getAvailableUpdates: protectedProcedure.query(async () => {
+    const handler = updateCheckerRequestHandler.handler({});
+    const data = await handler.getCachedOrUpdatedDataAsync({});
+    return data.data.availableUpdates;
+  }),
+});

packages/cron-jobs/package.json

@@ -38,7 +38,8 @@
     "@homarr/request-handler": "workspace:^0.1.0",
     "@homarr/server-settings": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
-    "@homarr/validation": "workspace:^0.1.0"
+    "@homarr/validation": "workspace:^0.1.0",
+    "semver-parser": "^4.1.7"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",

packages/cron-jobs/src/index.ts

@@ -12,6 +12,7 @@ import { pingJob } from "./jobs/ping";
 import type { RssFeed } from "./jobs/rss-feeds";
 import { rssFeedsJob } from "./jobs/rss-feeds";
 import { sessionCleanupJob } from "./jobs/session-cleanup";
+import { updateCheckerJob } from "./jobs/update-checker";
 import { createCronJobGroup } from "./lib";
 
 export const jobGroup = createCronJobGroup({
@@ -29,6 +30,7 @@ export const jobGroup = createCronJobGroup({
   indexerManager: indexerManagerJob,
   healthMonitoring: healthMonitoringJob,
   sessionCleanup: sessionCleanupJob,
+  updateChecker: updateCheckerJob,
 });
 
 export type JobGroupKeys = ReturnType<(typeof jobGroup)["getKeys"]>[number];

packages/cron-jobs/src/jobs/update-checker.ts

@@ -0,0 +1,13 @@
+import { EVERY_HOUR } from "@homarr/cron-jobs-core/expressions";
+import { updateCheckerRequestHandler } from "@homarr/request-handler/update-checker";
+
+import { createCronJob } from "../lib";
+
+export const updateCheckerJob = createCronJob("updateChecker", EVERY_HOUR, {
+  runOnStart: true,
+}).withCallback(async () => {
+  const handler = updateCheckerRequestHandler.handler({});
+  await handler.getCachedOrUpdatedDataAsync({
+    forceUpdate: true,
+  });
+});

packages/redis/src/index.ts

@@ -7,6 +7,7 @@ export {
   createIntegrationOptionsChannel,
   createChannelWithLatestAndEvents,
   handshakeAsync,
+  createSubPubChannel,
 } from "./lib/channel";
 
 export const exampleChannel = createSubPubChannel<{ message: string }>("example");

packages/request-handler/package.json

@@ -29,6 +29,7 @@
     "@homarr/log": "workspace:^0.1.0",
     "@homarr/redis": "workspace:^0.1.0",
     "dayjs": "^1.11.13",
+    "octokit": "^4.0.2",
     "pretty-print-error": "^1.1.2",
     "superjson": "2.2.2"
   },

packages/request-handler/src/update-checker.ts

@@ -0,0 +1,59 @@
+import dayjs from "dayjs";
+import { Octokit } from "octokit";
+import { compareSemVer, isValidSemVer } from "semver-parser";
+
+import { logger } from "@homarr/log";
+import { createChannelWithLatestAndEvents } from "@homarr/redis";
+import { createCachedRequestHandler } from "@homarr/request-handler/lib/cached-request-handler";
+
+import packageJson from "../../../package.json";
+
+export const updateCheckerRequestHandler = createCachedRequestHandler({
+  queryKey: "homarr-update-checker",
+  cacheDuration: dayjs.duration(1, "hour"),
+  async requestAsync(_) {
+    const octokit = new Octokit();
+    const releases = await octokit.rest.repos.listReleases({
+      owner: "homarr-labs",
+      repo: "homarr",
+    });
+
+    const currentVersion = (packageJson as { version: string }).version;
+    const availableReleases = [];
+
+    for (const release of releases.data) {
+      if (!isValidSemVer(release.tag_name)) {
+        logger.warn(`Unable to parse semantic tag '${release.tag_name}'. Update check might not work.`);
+        continue;
+      }
+
+      availableReleases.push(release);
+    }
+
+    const availableNewerReleases = availableReleases
+      .filter((release) => compareSemVer(release.tag_name, currentVersion) > 0)
+      .sort((releaseA, releaseB) => compareSemVer(releaseB.tag_name, releaseA.tag_name));
+    if (availableReleases.length > 0) {
+      logger.info(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        `Update checker found a new available version: ${availableReleases[0]!.tag_name}. Current version is ${currentVersion}`,
+      );
+    } else {
+      logger.debug(`Update checker did not find any available updates. Current version is ${currentVersion}`);
+    }
+
+    return {
+      availableUpdates: availableNewerReleases.map((release) => ({
+        name: release.name,
+        contentHtml: release.body_html,
+        url: release.html_url,
+        tagName: release.tag_name,
+      })),
+    };
+  },
+  createRedisChannel() {
+    return createChannelWithLatestAndEvents<{
+      availableUpdates: { name: string | null; contentHtml?: string; url: string; tagName: string }[];
+    }>("homarr:update");
+  },
+});

packages/translation/src/lang/en.json

@@ -733,7 +733,8 @@
         "logout": "Logout",
         "login": "Login",
         "homeBoard": "Your home board",
-        "loggedOut": "Logged out"
+        "loggedOut": "Logged out",
+        "updateAvailable": "{countUpdates} updates available: {tag}"
       }
     },
     "dangerZone": "Danger zone",
@@ -2153,6 +2154,9 @@
             },
             "sessionCleanup": {
               "label": "Session Cleanup"
+            },
+            "updateChecker": {
+              "label": "Update checker"
             }
           }
         },