Changes

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

src/components/app-shell.tsx

@@ -130,10 +130,25 @@ export function AppShell({ children }: { children: ReactNode }) {
         </nav>
 
         <div className="px-4 py-4 border-t border-sidebar-border">
-          <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>
+          <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>
           <Button
             variant="ghost"
             size="sm"