From 323a4a17cfe8538fc6f0e1ee52059310789d88e1 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujitm2009@gmail.com>
Date: Wed, 30 Oct 2024 11:02:50 -0400
Subject: [PATCH] feat(web): add empty state to notifications list

---
 web/components/Notifications/List.vue    | 8 ++++++++
 web/components/Notifications/Sidebar.vue | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/components/Notifications/List.vue b/web/components/Notifications/List.vue
index 3d3367aaa..9c2c8c839 100644
--- a/web/components/Notifications/List.vue
+++ b/web/components/Notifications/List.vue
@@ -7,6 +7,7 @@ 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";
+import { CheckIcon } from "@heroicons/vue/24/solid";
 
 /**
  * Page size is the max amount of items fetched from the api in a single request.
@@ -63,6 +64,13 @@ async function onLoadMore() {
 </script>
 
 <template>
+  <div
+    v-if="notifications?.length === 0"
+    class="h-full flex flex-col items-center justify-center gap-3"
+  >
+  <CheckIcon class="h-10 text-green-600" />
+    No notifications to see here!
+  </div>
   <!-- The horizontal padding here adjusts for the scrollbar offset -->
   <div
     v-if="notifications?.length > 0"
diff --git a/web/components/Notifications/Sidebar.vue b/web/components/Notifications/Sidebar.vue
index 502eeff80..6a044270b 100644
--- a/web/components/Notifications/Sidebar.vue
+++ b/web/components/Notifications/Sidebar.vue
@@ -9,8 +9,8 @@ import {
 } from "@/components/shadcn/sheet";
 
 import { archiveAllNotifications } from "./graphql/notification.query";
-import type { Importance} from "~/composables/gql/graphql";
-import { NotificationType } from "~/composables/gql/graphql";
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports -- false positive :(
+import { Importance, NotificationType } from "~/composables/gql/graphql";
 import { useMutation } from "@vue/apollo-composable";
 
 const { mutate: archiveAll, loading: loadingArchiveAll } = useMutation(