Changes

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

src/components/app-shell.tsx

@@ -1,6 +1,9 @@
 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,
@@ -17,6 +20,11 @@ import type { ReactNode } from "react";
 import { useBubbleCounts } from "@/lib/use-bubble-counts";
 import { NotificationBell } from "@/components/notifications/notification-bell";
 
+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;
@@ -49,6 +57,33 @@ export function AppShell({ children }: { children: ReactNode }) {
   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}`)
+      .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();