collection drawer ui fix

components/site-bottom-nav.tsx

@@ -10,6 +10,7 @@
  * Hidden on md+ — desktop uses SiteSidebar.
  */
 
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Home, Search, User as UserIcon } from "lucide-react";
@@ -58,7 +59,24 @@ export function SiteBottomNav() {
     {
       href: user ? "/u/me" : "/login",
       label: user ? "You" : "Sign in",
-      icon: <UserIcon className="size-5" />,
+      // Show the user's uploaded avatar when available so the nav
+      // feels personalized. Falls back to the generic person glyph
+      // for anonymous viewers and signed-in users who haven't
+      // uploaded a picture yet. The avatar circle is slightly larger
+      // (size-6 vs the size-5 icons elsewhere) so it reads as an
+      // identifying glyph rather than fading in with the other tabs.
+      icon: user?.avatar_url ? (
+        <Image
+          src={user.avatar_url}
+          alt=""
+          width={28}
+          height={28}
+          className="size-7 rounded-full object-cover ring-1 ring-foreground/10"
+          unoptimized
+        />
+      ) : (
+        <UserIcon className="size-5" />
+      ),
       matchPrefixes: ["/u/me", "/login", "/signup"],
     },
   ];