feat(web): add count labels to notification tabs

web/components/Notifications/Indicator.vue

@@ -4,9 +4,9 @@ import { useQuery } from '@vue/apollo-composable';
 import { cn } from '~/components/shadcn/utils';
 import { Importance } from '~/composables/gql/graphql';
 import { onWatcherCleanup } from 'vue';
-import { unreadOverview } from './graphql/notification.query';
+import { notificationsOverview } from './graphql/notification.query';
 
-const { result } = useQuery(unreadOverview, null, {
+const { result } = useQuery(notificationsOverview, null, {
   pollInterval: 2_000, // 2 seconds
 });
 

web/components/Notifications/Sidebar.vue

@@ -50,10 +50,7 @@ const confirmAndDeleteAll = async () => {
         <!-- which means they won't shrink below the height of their content, even if you use flex-1 or other flex properties. -->
         <Tabs default-value="unread" class="flex-1 flex flex-col min-h-0" activation-mode="manual">
           <div class="flex flex-row justify-between items-center flex-wrap gap-5 px-6">
-            <TabsList class="ml-[1px]">
-              <TabsTrigger value="unread"> Unread </TabsTrigger>
-              <TabsTrigger value="archived"> Archived </TabsTrigger>
-            </TabsList>
+            <NotificationsTabList />
             <TabsContent value="unread">
               <Button
                 :disabled="loadingArchiveAll"

web/components/Notifications/TabList.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useQuery } from '@vue/apollo-composable';
+import { notificationsOverview } from './graphql/notification.query';
+
+const { result } = useQuery(notificationsOverview);
+
+const overview = computed(() => {
+  if (!result.value) {
+    return;
+  }
+  return result.value.notifications.overview;
+});
+</script>
+
+<template>
+  <TabsList>
+    <TabsTrigger value="unread">
+      Unread <span v-if="overview">({{ overview.unread.total }})</span>
+    </TabsTrigger>
+    <TabsTrigger value="archived">
+      Archived <span v-if="overview">({{ overview.archive.total }})</span>
+    </TabsTrigger>
+  </TabsList>
+</template>

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

@@ -81,9 +81,10 @@ export const deleteAllNotifications = graphql(/* GraphQL */ `
   }
 `);
 
-export const unreadOverview = graphql(/* GraphQL */ `
+export const notificationsOverview = graphql(/* GraphQL */ `
   query Overview {
     notifications {
+      id
       overview {
         unread {
           info
@@ -91,6 +92,9 @@ export const unreadOverview = graphql(/* GraphQL */ `
           alert
           total
         }
+        archive {
+          total
+        }
       }
     }
   }