Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/components/app-shell.tsx

@@ -1,29 +1,54 @@
 import { Link, useLocation, useNavigate } from "@tanstack/react-router";
 import { useAuth } from "@/lib/auth";
 import { Button } from "@/components/ui/button";
-import { Briefcase, Users, FileText, Receipt, ShieldCheck, LogOut, Scale, LayoutDashboard } from "lucide-react";
+import {
+  Briefcase,
+  Users,
+  Receipt,
+  ShieldCheck,
+  LogOut,
+  Scale,
+  LayoutDashboard,
+  CheckSquare,
+  MessageSquare,
+} from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { ReactNode } from "react";
+import { useBubbleCounts } from "@/lib/use-bubble-counts";
+import { NotificationBell } from "@/components/notifications/notification-bell";
 
 interface NavItem {
   to: string;
   label: string;
   icon: typeof Briefcase;
   adminOnly?: boolean;
+  bubbleKey?: "messages" | "tasks";
 }
 
 const NAV: NavItem[] = [
   { to: "/", label: "Dashboard", icon: LayoutDashboard },
   { to: "/clients", label: "Clients", icon: Users },
   { to: "/cases", label: "Cases", icon: Briefcase },
+  { to: "/tasks", label: "Tasks", icon: CheckSquare, bubbleKey: "tasks" },
+  { to: "/messages", label: "Messages", icon: MessageSquare, bubbleKey: "messages" },
   { to: "/invoices", label: "Invoices", icon: Receipt },
   { to: "/admin/users", label: "Users", icon: ShieldCheck, adminOnly: true },
 ];
 
+function Bubble({ count }: { count: number }) {
+  if (!count) return null;
+  return (
+    <span className="ml-auto h-5 min-w-5 px-1.5 rounded-full bg-destructive text-destructive-foreground text-[10px] font-bold flex items-center justify-center">
+      {count > 99 ? "99+" : count}
+    </span>
+  );
+}
+
 export function AppShell({ children }: { children: ReactNode }) {
   const { user, signOut, isAdmin, roles } = useAuth();
   const location = useLocation();
   const navigate = useNavigate();
+  const counts = useBubbleCounts();
 
   const handleSignOut = async () => {
     await signOut();
@@ -38,16 +63,18 @@ export function AppShell({ children }: { children: ReactNode }) {
           <div className="h-9 w-9 rounded-md bg-sidebar-primary flex items-center justify-center">
             <Scale className="h-5 w-5 text-sidebar-primary-foreground" />
           </div>
-          <div className="leading-tight">
-            <div className="font-serif text-lg">Stage Law Firm, PLLC</div>
+          <div className="leading-tight flex-1 min-w-0">
+            <div className="font-serif text-lg truncate">Stage Law Firm, PLLC</div>
             <div className="text-[10px] uppercase tracking-widest text-sidebar-foreground/60">Law Firm Suite</div>
           </div>
+          <NotificationBell />
         </div>
 
         <nav className="flex-1 px-3 py-4 space-y-0.5">
           {NAV.filter((n) => !n.adminOnly || isAdmin).map((item) => {
             const active = item.to === "/" ? location.pathname === "/" : location.pathname.startsWith(item.to);
             const Icon = item.icon;
+            const bubble = item.bubbleKey ? counts[item.bubbleKey] : 0;
             return (
               <Link
                 key={item.to}
@@ -61,6 +88,7 @@ export function AppShell({ children }: { children: ReactNode }) {
               >
                 <Icon className="h-4 w-4" />
                 {item.label}
+                <Bubble count={bubble} />
               </Link>
             );
           })}
@@ -89,25 +117,34 @@ export function AppShell({ children }: { children: ReactNode }) {
           <Scale className="h-5 w-5" />
           <span className="font-serif text-lg">Counsel</span>
         </Link>
-        <Button variant="ghost" size="sm" onClick={handleSignOut} className="text-sidebar-foreground">
-          <LogOut className="h-4 w-4" />
-        </Button>
+        <div className="flex items-center gap-2">
+          <NotificationBell />
+          <Button variant="ghost" size="sm" onClick={handleSignOut} className="text-sidebar-foreground">
+            <LogOut className="h-4 w-4" />
+          </Button>
+        </div>
       </div>
 
       <main className="flex-1 min-w-0 md:ml-0 mt-14 md:mt-0">
         <div className="md:hidden flex overflow-x-auto gap-1 px-3 py-2 border-b bg-card">
           {NAV.filter((n) => !n.adminOnly || isAdmin).map((item) => {
             const active = item.to === "/" ? location.pathname === "/" : location.pathname.startsWith(item.to);
+            const bubble = item.bubbleKey ? counts[item.bubbleKey] : 0;
             return (
               <Link
                 key={item.to}
                 to={item.to}
                 className={cn(
-                  "px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap",
+                  "px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap relative",
                   active ? "bg-primary text-primary-foreground" : "text-muted-foreground",
                 )}
               >
                 {item.label}
+                {bubble > 0 && (
+                  <span className="ml-1 inline-flex h-4 min-w-4 px-1 rounded-full bg-destructive text-destructive-foreground text-[9px] font-bold items-center justify-center">
+                    {bubble > 99 ? "99+" : bubble}
+                  </span>
+                )}
               </Link>
             );
           })}