feat(web): enhance notifications indicator in UPC

api/src/graphql/generated/client/gql.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import * as types from './graphql.js';
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 

api/src/graphql/generated/client/validators.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import { z } from 'zod'
 import { AccessUrlInput, ArrayCapacityBytesInput, ArrayCapacityInput, ClientType, ConfigErrorState, DashboardAppsInput, DashboardArrayInput, DashboardCaseInput, DashboardConfigInput, DashboardDisplayInput, DashboardInput, DashboardOsInput, DashboardServiceInput, DashboardServiceUptimeInput, DashboardTwoFactorInput, DashboardTwoFactorLocalInput, DashboardTwoFactorRemoteInput, DashboardVarsInput, DashboardVersionsInput, DashboardVmsInput, EventType, Importance, NetworkInput, NotificationInput, NotificationStatus, PingEventSource, RegistrationState, RemoteAccessEventActionType, RemoteAccessInput, RemoteGraphQLClientInput, RemoteGraphQLEventType, RemoteGraphQLServerInput, ServerStatus, URL_TYPE, UpdateType } from '@app/graphql/generated/client/graphql'
 

api/src/unraid-api/graph/resolvers/notifications/notifications.resolver.ts

@@ -11,10 +11,11 @@ import { NotificationsService } from './notifications.service';
 import { Importance } from '@app/graphql/generated/client/graphql';
 import { AppError } from '@app/core/errors/app-error';
 import { formatTimestamp } from '@app/utils';
+import {Inject} from "@nestjs/common";
 
 @Resolver('Notifications')
 export class NotificationsResolver {
-    constructor(readonly notificationsService: NotificationsService) {}
+    constructor(@Inject('NOTIFICATIONS_SERVICE') readonly notificationsService: NotificationsService) {}
 
     /**============================================
      *               Queries

api/src/unraid-api/graph/resolvers/resolvers.module.ts

@@ -33,7 +33,7 @@ import { NotificationsService } from './notifications/notifications.service';
         ServerResolver,
         VarsResolver,
         VmsResolver,
-        NotificationsService,
+        { provide: 'NOTIFICATIONS_SERVICE', useClass: NotificationsService },
     ],
 })
 export class ResolversModule {}

web/components/Notifications/Indicator.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { useQuery } from "@vue/apollo-composable";
+import { unreadOverview } from "./graphql/notification.query";
+import { Importance } from "~/composables/gql/graphql";
+import {
+  BellIcon,
+  ExclamationTriangleIcon,
+  ShieldExclamationIcon,
+} from "@heroicons/vue/24/solid";
+import { cn } from '~/components/shadcn/utils'
+import { onWatcherCleanup } from "vue";
+
+const { result } = useQuery(unreadOverview, null, {
+  pollInterval: 2_000, // 2 seconds
+});
+
+const overview = computed(() => {
+  if (!result.value) {
+    return;
+  }
+  return result.value.notifications.overview.unread;
+});
+
+const indicatorLevel = computed(() => {
+  if (!overview.value) {
+    return undefined;
+  }
+  switch (true) {
+    case overview.value.alert > 0:
+      return Importance.Alert;
+    case overview.value.warning > 0:
+      return Importance.Warning;
+    case overview.value.total > 0:
+      return "UNREAD";
+    default:
+      return undefined;
+  }
+});
+
+const icon = computed<{ component: Component; color: string } | null>(() => {
+  switch (indicatorLevel.value) {
+    case Importance.Warning:
+      return {
+        component: ExclamationTriangleIcon,
+        color: "text-yellow-500 translate-y-0.5",
+      };
+    case Importance.Alert:
+      return {
+        component: ShieldExclamationIcon,
+        color: "text-red-500",
+      };
+  }
+  return null;
+});
+
+/** whether new notifications ocurred */
+const hasNewNotifications = ref(false);
+// watch for new notifications, set a temporary indicator when they're reveived
+watch(overview, (newVal, oldVal) => {
+  if (!newVal || !oldVal) {
+    return;
+  }
+  hasNewNotifications.value = newVal.total > oldVal.total;
+  // lifetime of 'new notification' state
+  const msToLive = 30_000;
+  const timeout = setTimeout(() => {
+    hasNewNotifications.value = false;
+  }, msToLive);
+  onWatcherCleanup(() => clearTimeout(timeout));
+});
+</script>
+
+<template>
+  <div class="flex items-end gap-1">
+    <div class="relative">
+      <BellIcon class="w-6 h-6" />
+      <div
+        v-if="indicatorLevel"
+        :class="
+          cn('absolute top-0 right-0 size-2.5 rounded-full', {
+            'bg-unraid-red': indicatorLevel === Importance.Alert,
+            'bg-yellow-500': indicatorLevel === Importance.Warning,
+            'bg-green-500': indicatorLevel === 'UNREAD',
+          })
+        "
+      />
+      <div
+        v-if="hasNewNotifications || indicatorLevel === Importance.Alert"
+        class="absolute top-0 right-0 size-2.5 rounded-full bg-unraid-red animate-ping"
+      />
+    </div>
+    <component
+      :is="icon.component"
+      v-if="icon"
+      :class="cn('size-6', icon.color)"
+    />
+  </div>
+</template>

web/components/Notifications/Sidebar.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BellIcon } from "@heroicons/vue/24/solid";
 import {
   Sheet,
   SheetContent,
@@ -24,7 +23,7 @@ const importance = ref<Importance | undefined>(undefined);
   <Sheet>
     <SheetTrigger @click="determineTeleportTarget">
       <span class="sr-only">Notifications</span>
-      <BellIcon class="w-6 h-6" />
+      <NotificationsIndicator />
     </SheetTrigger>
 
     <!-- We remove the horizontal padding from the container to keep the NotificationList's scrollbar in the right place -->

web/components/Notifications/graphql/notification.query.ts

@@ -13,6 +13,15 @@ export const NOTIFICATION_FRAGMENT = graphql(/* GraphQL */ `
   }
 `);
 
+export const NOTIFICATION_COUNT_FRAGMENT = graphql(/* GraphQL */ `
+  fragment NotificationCountFragment on NotificationCounts {
+    total
+    info
+    warning
+    alert
+  }
+`);
+
 export const getNotifications = graphql(/* GraphQL */ `
   query Notifications($filter: NotificationFilter!) {
     notifications {
@@ -57,3 +66,18 @@ export const deleteNotification = graphql(/* GraphQL */ `
     }
   }
 `);
+
+export const unreadOverview = graphql(/* GraphQL */ `
+  query Overview {
+    notifications {
+      overview {
+        unread {
+          info
+          warning
+          alert
+          total
+        }
+      }
+    }
+  }
+`);

web/composables/gql/fragment-masking.ts

@@ -20,25 +20,45 @@ export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
   fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
 ): TType;
+// return nullable if `fragmentType` is undefined
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | undefined
+): TType | undefined;
 // return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null
+): TType | null;
+// return nullable if `fragmentType` is nullable or undefined
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
   fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
 ): TType | null | undefined;
 // return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>>
+): Array<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): Array<TType> | null | undefined;
+// return readonly array of non-nullable if `fragmentType` is array of non-nullable
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
   fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
 ): ReadonlyArray<TType>;
-// return array of nullable if `fragmentType` is array of nullable
+// return readonly array of nullable if `fragmentType` is array of nullable
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
   fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
 ): ReadonlyArray<TType> | null | undefined;
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
-): TType | ReadonlyArray<TType> | null | undefined {
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | Array<FragmentType<DocumentTypeDecoration<TType, any>>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): TType | Array<TType> | ReadonlyArray<TType> | null | undefined {
   return fragmentType as any;
 }
 

web/composables/gql/gql.ts

@@ -11,13 +11,16 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
     "\n  fragment NotificationFragment on Notification {\n    id\n    title\n    subject\n    description\n    importance\n    link\n    type\n    timestamp\n  }\n": types.NotificationFragmentFragmentDoc,
+    "\n  fragment NotificationCountFragment on NotificationCounts {\n    total\n    info\n    warning\n    alert\n  }\n": types.NotificationCountFragmentFragmentDoc,
     "\n  query Notifications($filter: NotificationFilter!) {\n    notifications {\n      id\n      list(filter: $filter) {\n        ...NotificationFragment\n      }\n    }\n  }\n": types.NotificationsDocument,
     "\n  mutation ArchiveNotification($id: String!) {\n    archiveNotification(id: $id) {\n      ...NotificationFragment\n    }\n  }\n": types.ArchiveNotificationDocument,
     "\n  mutation ArchiveAllNotifications {\n    archiveAll {\n      unread {\n        total\n      }\n      archive {\n        info\n        warning\n        alert\n        total\n      }\n    }\n  }\n": types.ArchiveAllNotificationsDocument,
     "\n  mutation DeleteNotification($id: String!, $type: NotificationType!) {\n    deleteNotification(id: $id, type: $type) {\n      archive {\n        total\n      }\n    }\n  }\n": types.DeleteNotificationDocument,
+    "\n  query Overview {\n    notifications {\n      overview {\n        unread {\n          info\n          warning\n          alert\n          total\n        }\n      }\n    }\n  }\n": types.OverviewDocument,
     "\n  mutation ConnectSignIn($input: ConnectSignInInput!) {\n    connectSignIn(input: $input)\n  }\n": types.ConnectSignInDocument,
     "\n  mutation SignOut {\n    connectSignOut\n  }\n": types.SignOutDocument,
     "\n  fragment PartialCloud on Cloud {\n    error\n    apiKey {\n      valid\n      error\n    }\n    cloud {\n      status\n      error\n    }\n    minigraphql {\n      status\n      error\n    }\n    relay {\n      status\n      error\n    }\n  }\n": types.PartialCloudFragmentDoc,
@@ -46,6 +49,10 @@ export function graphql(source: string): unknown;
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  fragment NotificationFragment on Notification {\n    id\n    title\n    subject\n    description\n    importance\n    link\n    type\n    timestamp\n  }\n"): (typeof documents)["\n  fragment NotificationFragment on Notification {\n    id\n    title\n    subject\n    description\n    importance\n    link\n    type\n    timestamp\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment NotificationCountFragment on NotificationCounts {\n    total\n    info\n    warning\n    alert\n  }\n"): (typeof documents)["\n  fragment NotificationCountFragment on NotificationCounts {\n    total\n    info\n    warning\n    alert\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -62,6 +69,10 @@ export function graphql(source: "\n  mutation ArchiveAllNotifications {\n    arc
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  mutation DeleteNotification($id: String!, $type: NotificationType!) {\n    deleteNotification(id: $id, type: $type) {\n      archive {\n        total\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation DeleteNotification($id: String!, $type: NotificationType!) {\n    deleteNotification(id: $id, type: $type) {\n      archive {\n        total\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query Overview {\n    notifications {\n      overview {\n        unread {\n          info\n          warning\n          alert\n          total\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query Overview {\n    notifications {\n      overview {\n        unread {\n          info\n          warning\n          alert\n          total\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */