feat(web): implement notification filtering

Author: pujitm

web/components/Notifications/List.vue

@@ -3,7 +3,7 @@ import {
   getNotifications,
   NOTIFICATION_FRAGMENT,
 } from "./graphql/notification.query";
-import type { NotificationType } from "~/composables/gql/graphql";
+import type { Importance, NotificationType } from "~/composables/gql/graphql";
 import { useFragment } from "~/composables/gql/fragment-masking";
 import { useQuery } from "@vue/apollo-composable";
 import { vInfiniteScroll } from "@vueuse/components";
@@ -15,19 +15,22 @@ const props = withDefaults(
   defineProps<{
     type: NotificationType;
     pageSize?: number;
+    importance?: Importance;
   }>(),
   {
     pageSize: 15,
+    importance: undefined,
   }
 );
 
-const { result, error, fetchMore } = useQuery(getNotifications, {
+const { result, error, fetchMore } = useQuery(getNotifications, () => ({
   filter: {
     offset: 0,
     limit: props.pageSize,
     type: props.type,
+    importance: props.importance,
   },
-});
+}));
 
 watch(error, (newVal) => {
   console.log("[getNotifications] error:", newVal);
@@ -52,6 +55,7 @@ async function onLoadMore() {
         offset: notifications.value.length,
         limit: props.pageSize,
         type: props.type,
+        importance: props.importance,
       },
     },
   });

web/components/Notifications/Sidebar.vue

@@ -9,13 +9,15 @@ import {
 } from "@/components/shadcn/sheet";
 
 import { archiveAllNotifications } from "./graphql/notification.query";
+import type { Importance} from "~/composables/gql/graphql";
 import { NotificationType } from "~/composables/gql/graphql";
 import { useMutation } from "@vue/apollo-composable";
 
 const { mutate: archiveAll, loading: loadingArchiveAll } = useMutation(
   archiveAllNotifications
 );
 const { teleportTarget, determineTeleportTarget } = useTeleport();
+const importance = ref<Importance | undefined>(undefined);
 </script>
 
 <template>
@@ -57,7 +59,9 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
               Archive All
             </Button>
 
-            <Select>
+            <Select
+              @update:model-value="(val) => {importance = val as Importance}"
+            >
               <SelectTrigger class="bg-secondary border-0 h-auto">
                 <SelectValue
                   class="text-muted-foreground"
@@ -67,20 +71,26 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
               <SelectContent :to="teleportTarget">
                 <SelectGroup>
                   <SelectLabel>Notification Types</SelectLabel>
-                  <SelectItem value="alert">Alert</SelectItem>
-                  <SelectItem value="info">Info</SelectItem>
-                  <SelectItem value="warning">Warning</SelectItem>
+                  <SelectItem :value="Importance.Alert">Alert</SelectItem>
+                  <SelectItem :value="Importance.Info">Info</SelectItem>
+                  <SelectItem :value="Importance.Warning">Warning</SelectItem>
                 </SelectGroup>
               </SelectContent>
             </Select>
           </div>
 
           <TabsContent value="unread" class="flex-1 min-h-0 mt-3">
-            <NotificationsList :type="NotificationType.Unread" />
+            <NotificationsList
+              :importance="importance"
+              :type="NotificationType.Unread"
+            />
           </TabsContent>
 
           <TabsContent value="archived" class="flex-1 min-h-0 mt-3">
-            <NotificationsList :type="NotificationType.Archive" />
+            <NotificationsList
+              :importance="importance"
+              :type="NotificationType.Archive"
+            />
           </TabsContent>
         </Tabs>
       </div>

web/composables/gql/graphql.ts

@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
@@ -821,6 +821,7 @@ export type Node = {
 export type Notification = Node & {
   __typename?: 'Notification';
   description: Scalars['String']['output'];
+  formattedTimestamp?: Maybe<Scalars['String']['output']>;
   id: Scalars['ID']['output'];
   importance: Importance;
   link?: Maybe<Scalars['String']['output']>;