Code edited in Lovable Code Editor

Edited UI in Lovable

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

src/components/app-shell.tsx

@@ -1,102 +1,29 @@
 import { Link, useLocation, useNavigate } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
 import { useAuth } from "@/lib/auth";
 import { Button } from "@/components/ui/button";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { supabase } from "@/integrations/supabase/client";
-import {
-  Briefcase,
-  Users,
-  Receipt,
-  ShieldCheck,
-  LogOut,
-  Scale,
-  LayoutDashboard,
-  CheckSquare,
-  MessageSquare,
-  Activity,
-  DollarSign,
-  FileText,
-  FolderOpen,
-  Settings as SettingsIcon,
-} from "lucide-react";
+import { Briefcase, Users, FileText, Receipt, ShieldCheck, LogOut, Scale, LayoutDashboard } 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";
-import { DateCalculator } from "@/components/date-calculator";
-import { HeaderTimer } from "@/components/timer/header-timer";
-import { QuickAddTime, QuickAddExpense } from "@/components/quick-add/quick-add";
-
-function initials(name: string, email: string) {
-  const src = (name || email || "").trim();
-  return src.split(/\s+/).map((p) => p[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
-}
 
 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: "/status", label: "Status Updates", icon: Activity },
-  { to: "/collections", label: "Collections", icon: DollarSign },
-  { to: "/documents", label: "Documents", icon: FileText },
-  { to: "/files", label: "Files", icon: FolderOpen },
   { to: "/invoices", label: "Invoices", icon: Receipt },
-  { to: "/settings", label: "Settings", icon: SettingsIcon },
   { 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 [profile, setProfile] = useState<{ full_name: string; avatar_url: string | null } | null>(null);
-
-  useEffect(() => {
-    if (!user) return;
-    supabase
-      .from("profiles")
-      .select("full_name, avatar_url")
-      .eq("id", user.id)
-      .maybeSingle()
-      .then(({ data }) => {
-        if (data) setProfile({ full_name: data.full_name || "", avatar_url: (data as any).avatar_url ?? null });
-      });
-    const ch = supabase
-      .channel(`profile-self-${user.id}-${Math.random().toString(36).slice(2)}`)
-      .on(
-        "postgres_changes",
-        { event: "UPDATE", schema: "public", table: "profiles", filter: `id=eq.${user.id}` },
-        (payload) => {
-          const r = payload.new as any;
-          setProfile({ full_name: r.full_name || "", avatar_url: r.avatar_url ?? null });
-        },
-      )
-      .subscribe();
-    return () => {
-      supabase.removeChannel(ch);
-    };
-  }, [user]);
 
   const handleSignOut = async () => {
     await signOut();
@@ -111,8 +38,8 @@ 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 flex-1 min-w-0">
-            <div className="font-serif text-lg truncate">Stage Law Firm, PLLC</div>
+          <div className="leading-tight">
+            <div className="font-serif text-lg">Stage Law, PLLC</div>
             <div className="text-[10px] uppercase tracking-widest text-sidebar-foreground/60">Law Firm Suite</div>
           </div>
         </div>
@@ -121,7 +48,6 @@ export function AppShell({ children }: { children: ReactNode }) {
           {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}
@@ -135,32 +61,16 @@ export function AppShell({ children }: { children: ReactNode }) {
               >
                 <Icon className="h-4 w-4" />
                 {item.label}
-                <Bubble count={bubble} />
               </Link>
             );
           })}
         </nav>
 
         <div className="px-4 py-4 border-t border-sidebar-border">
-          <Link
-            to="/settings/profile"
-            className="flex items-center gap-2.5 mb-3 group rounded-md -mx-1 px-1 py-1 hover:bg-sidebar-accent/60"
-          >
-            <Avatar className="h-9 w-9">
-              {profile?.avatar_url ? <AvatarImage src={profile.avatar_url} alt="" /> : null}
-              <AvatarFallback className="text-[11px] bg-sidebar-accent text-sidebar-accent-foreground">
-                {initials(profile?.full_name || "", user?.email || "")}
-              </AvatarFallback>
-            </Avatar>
-            <div className="min-w-0 flex-1 leading-tight">
-              <div className="text-xs font-medium truncate text-sidebar-foreground group-hover:text-sidebar-accent-foreground">
-                {profile?.full_name || user?.email}
-              </div>
-              <div className="text-[10px] uppercase tracking-wider text-sidebar-foreground/50 truncate">
-                {roles.join(" · ") || "no role"}
-              </div>
-            </div>
-          </Link>
+          <div className="text-xs text-sidebar-foreground/70 truncate mb-0.5">{user?.email}</div>
+          <div className="text-[10px] uppercase tracking-wider text-sidebar-foreground/50 mb-3">
+            {roles.join(" · ") || "no role"}
+          </div>
           <Button
             variant="ghost"
             size="sm"
@@ -179,53 +89,29 @@ export function AppShell({ children }: { children: ReactNode }) {
           <Scale className="h-5 w-5" />
           <span className="font-serif text-lg">Counsel</span>
         </Link>
-        <div className="flex items-center gap-2">
-          <DateCalculator />
-          <NotificationBell />
-          <Button variant="ghost" size="sm" onClick={handleSignOut} className="text-sidebar-foreground">
-            <LogOut className="h-4 w-4" />
-          </Button>
-        </div>
+        <Button variant="ghost" size="sm" onClick={handleSignOut} className="text-sidebar-foreground">
+          <LogOut className="h-4 w-4" />
+        </Button>
       </div>
 
       <main className="flex-1 min-w-0 md:ml-0 mt-14 md:mt-0">
-        {/* Desktop top toolbar */}
-        <div className="hidden md:flex items-center gap-2 px-4 h-14 border-b bg-card">
-          <HeaderTimer />
-          <div className="flex-1" />
-          <QuickAddTime />
-          <QuickAddExpense />
-          <DateCalculator />
-          <NotificationBell />
-        </div>
         <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 relative",
+                  "px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap",
                   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>
             );
           })}
         </div>
-        <div className="md:hidden flex items-center gap-2 px-3 py-2 border-b bg-card overflow-x-auto">
-          <HeaderTimer />
-          <QuickAddTime />
-          <QuickAddExpense />
-        </div>
         {children}
       </main>
     </div>