From be7135efdda864955476d99795fe34c305407878 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujit@lime-technology.com>
Date: Mon, 6 Jan 2025 10:54:42 -0500
Subject: [PATCH] feat(web): clear notifications indicator after opening
 sidebar

---
 web/components/Notifications/Indicator.vue |  6 +++---
 web/components/Notifications/Sidebar.vue   | 23 ++++++++++++++++++++--
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/web/components/Notifications/Indicator.vue b/web/components/Notifications/Indicator.vue
index 44bd99430..9012b8917 100644
--- a/web/components/Notifications/Indicator.vue
+++ b/web/components/Notifications/Indicator.vue
@@ -3,7 +3,7 @@ import { BellIcon, ExclamationTriangleIcon, ShieldExclamationIcon } from '@heroi
 import { cn } from '~/components/shadcn/utils';
 import { Importance, type OverviewQuery } from '~/composables/gql/graphql';
 
-const props = defineProps<{ overview?: OverviewQuery['notifications']['overview'] }>();
+const props = defineProps<{ overview?: OverviewQuery['notifications']['overview'], seen?: boolean }>();
 
 const indicatorLevel = computed(() => {
   if (!props.overview?.unread) {
@@ -42,12 +42,12 @@ const icon = computed<{ component: Component; color: string } | null>(() => {
   <div class="relative">
     <BellIcon class="w-6 h-6 text-header-text-primary" />
     <div
-      v-if="indicatorLevel === 'UNREAD'"
+      v-if="!seen && indicatorLevel === 'UNREAD'"
       class="absolute top-0 right-0 size-2.5 rounded-full border border-neutral-800 bg-unraid-green"
     />
     <component
       :is="icon.component"
-      v-else-if="icon && indicatorLevel"
+      v-else-if="!seen && icon && indicatorLevel"
       :class="cn('absolute -top-1 -right-1 size-4 rounded-full', icon.color)"
     />
   </div>
diff --git a/web/components/Notifications/Sidebar.vue b/web/components/Notifications/Sidebar.vue
index 120733bcf..86299d79f 100644
--- a/web/components/Notifications/Sidebar.vue
+++ b/web/components/Notifications/Sidebar.vue
@@ -39,13 +39,32 @@ const overview = computed(() => {
   }
   return result.value.notifications.overview;
 });
+
+/** whether user has viewed their notifications */
+const hasSeenNotifications = ref(false);
+
+// renews unseen state when new notifications arrive
+watch(
+  () => overview.value?.unread,
+  (newVal, oldVal) => {
+    if (!newVal || !oldVal) return;
+    if (newVal.total > oldVal.total) {
+      hasSeenNotifications.value = false;
+    }
+  }
+);
+
+const prepareToViewNotifications = () => {
+  determineTeleportTarget();
+  hasSeenNotifications.value = true;
+};
 </script>
 
 <template>
   <Sheet>
-    <SheetTrigger @click="determineTeleportTarget">
+    <SheetTrigger @click="prepareToViewNotifications">
       <span class="sr-only">Notifications</span>
-      <NotificationsIndicator :overview="overview" />
+      <NotificationsIndicator :overview="overview" :seen="hasSeenNotifications" />
     </SheetTrigger>
     <SheetContent
       :to="teleportTarget"