From 3dba18d31fa2744e8153eceb28bf58bb46dd6f79 Mon Sep 17 00:00:00 2001
From: Nitika Nirwani <nitikanirwani@gmail.com>
Date: Mon, 6 Jul 2026 19:45:37 +0530
Subject: [PATCH] feat: add empty state for notifications

---
 frontend/src/routes/_app.notifications.tsx | 45 ++++++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/frontend/src/routes/_app.notifications.tsx b/frontend/src/routes/_app.notifications.tsx
index 95991e19..1c51f77e 100644
--- a/frontend/src/routes/_app.notifications.tsx
+++ b/frontend/src/routes/_app.notifications.tsx
@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { notificationsService } from "@/services";
 import { Card } from "@/components/shared/primitives";
 import { cn } from "@/lib/utils";
+import { Bell } from "lucide-react";
 
 export const Route = createFileRoute("/_app/notifications")({
   head: () => ({
@@ -15,7 +16,10 @@ export const Route = createFileRoute("/_app/notifications")({
 });
 
 function NotificationsPage() {
-  const { data = [] } = useQuery({ queryKey: ["notifications"], queryFn: notificationsService.list });
+  const { data = [] } = useQuery({
+    queryKey: ["notifications"],
+    queryFn: notificationsService.list,
+  });
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
@@ -29,13 +33,38 @@ function NotificationsPage() {
       </div>
       <Card>
         <ul className="divide-y divide-border">
-          {data.map((n) => (
-            <li key={n.id} className={cn("flex items-center gap-3 px-4 py-3", n.unread && "bg-primary-soft/30")}>
-              <span className={cn("h-2 w-2 shrink-0 rounded-full", n.unread ? "bg-primary" : "bg-transparent")} />
-              <p className="min-w-0 flex-1 text-[13px] text-foreground">{n.text}</p>
-              <span className="text-[11px] text-muted-foreground">{n.ago}</span>
-            </li>
-          ))}
+          {data.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <Bell className="mb-4 h-12 w-12 text-muted-foreground" />
+              <h3 className="text-lg font-semibold">No notifications yet</h3>
+              <p className="mt-2 text-sm text-muted-foreground">
+                You're all caught up! New notifications will appear here.
+              </p>
+            </div>
+          ) : (
+            data.map((n) => (
+              <li
+                key={n.id}
+                className={cn(
+                  "flex items-center gap-3 px-4 py-3",
+                  n.unread && "bg-primary-soft/30"
+                )}
+              >
+                <span
+                  className={cn(
+                    "h-2 w-2 shrink-0 rounded-full",
+                    n.unread ? "bg-primary" : "bg-transparent"
+                  )}
+                />
+                <p className="min-w-0 flex-1 text-[13px] text-foreground">
+                  {n.text}
+                </p>
+                <span className="text-[11px] text-muted-foreground">
+                  {n.ago}
+                </span>
+              </li>
+            ))
+          )}
         </ul>
       </Card>
     </div>