From ecfc797e7d576b51b65c980f9285878872376478 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujitm2009@gmail.com>
Date: Thu, 14 Nov 2024 09:43:41 -0500
Subject: [PATCH] fix(web): stop opening notification sidebar to archive tab

---
 web/components/Notifications/Sidebar.vue | 51 ++++++++----------------
 1 file changed, 16 insertions(+), 35 deletions(-)

diff --git a/web/components/Notifications/Sidebar.vue b/web/components/Notifications/Sidebar.vue
index 08aed5af2..9373e2eb2 100644
--- a/web/components/Notifications/Sidebar.vue
+++ b/web/components/Notifications/Sidebar.vue
@@ -1,20 +1,11 @@
 <script setup lang="ts">
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/shadcn/sheet";
-
-import { archiveAllNotifications } from "./graphql/notification.query";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/shadcn/sheet';
+import { useMutation } from '@vue/apollo-composable';
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports -- false positive :(
-import { Importance, NotificationType } from "~/composables/gql/graphql";
-import { useMutation } from "@vue/apollo-composable";
+import { Importance, NotificationType } from '~/composables/gql/graphql';
+import { archiveAllNotifications } from './graphql/notification.query';
 
-const { mutate: archiveAll, loading: loadingArchiveAll } = useMutation(
-  archiveAllNotifications
-);
+const { mutate: archiveAll, loading: loadingArchiveAll } = useMutation(archiveAllNotifications);
 const { teleportTarget, determineTeleportTarget } = useTeleport();
 const importance = ref<Importance | undefined>(undefined);
 </script>
@@ -27,10 +18,7 @@ const importance = ref<Importance | undefined>(undefined);
     </SheetTrigger>
 
     <!-- We remove the horizontal padding from the container to keep the NotificationList's scrollbar in the right place -->
-    <SheetContent
-      :to="teleportTarget"
-      class="w-full sm:max-w-[540px] h-screen px-0"
-    >
+    <SheetContent :to="teleportTarget" class="w-full sm:max-w-[540px] h-screen px-0">
       <div class="flex flex-col h-full gap-3">
         <SheetHeader class="ml-1 px-6">
           <SheetTitle>Notifications</SheetTitle>
@@ -39,10 +27,8 @@ const importance = ref<Importance | undefined>(undefined);
         <!-- min-h-0 prevents the flex container from expanding beyond its containing bounds. -->
         <!-- this is necessary because flex items have a default min-height: auto, -->
         <!-- 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">
-          <div
-            class="flex flex-row justify-between items-center flex-wrap gap-2 px-6"
-          >
+        <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-2 px-6">
             <TabsList class="ml-[1px]">
               <TabsTrigger value="unread"> Unread </TabsTrigger>
               <TabsTrigger value="archived"> Archived </TabsTrigger>
@@ -59,13 +45,14 @@ const importance = ref<Importance | undefined>(undefined);
             </Button>
 
             <Select
-              @update:model-value="(val) => {importance = val as Importance}"
+              @update:model-value="
+                (val) => {
+                  importance = val as Importance;
+                }
+              "
             >
               <SelectTrigger class="bg-secondary border-0 h-auto">
-                <SelectValue
-                  class="text-muted-foreground"
-                  placeholder="Filter"
-                />
+                <SelectValue class="text-muted-foreground" placeholder="Filter" />
               </SelectTrigger>
               <SelectContent :to="teleportTarget">
                 <SelectGroup>
@@ -79,17 +66,11 @@ const importance = ref<Importance | undefined>(undefined);
           </div>
 
           <TabsContent value="unread" class="flex-1 min-h-0 mt-3">
-            <NotificationsList
-              :importance="importance"
-              :type="NotificationType.Unread"
-            />
+            <NotificationsList :importance="importance" :type="NotificationType.Unread" />
           </TabsContent>
 
           <TabsContent value="archived" class="flex-1 min-h-0 mt-3">
-            <NotificationsList
-              :importance="importance"
-              :type="NotificationType.Archive"
-            />
+            <NotificationsList :importance="importance" :type="NotificationType.Archive" />
           </TabsContent>
         </Tabs>
       </div>