From 398fa64a4f0352fcea1613efe619e63b8eb489ab Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 5 Jan 2026 16:27:40 +0000
Subject: [PATCH] feat: add avatar to user menu trigger and adjust badge
 spacing

- Add UserAvatar component back to user menu trigger button
- Show user's profile picture avatar when logged in
- Fall back to User icon when not logged in
- Remove space-between in AccountManager badge layout
- Keep space-between in user menu dropdown for better visual hierarchy
---
 src/components/AccountManager.tsx  |  2 +-
 src/components/nostr/user-menu.tsx | 22 +++++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/AccountManager.tsx b/src/components/AccountManager.tsx
index 595efc4..7399fdf 100644
--- a/src/components/AccountManager.tsx
+++ b/src/components/AccountManager.tsx
@@ -87,7 +87,7 @@ function AccountCard({
                 {isActive && (
                   <Check className="size-4 text-primary flex-shrink-0" />
                 )}
-                <div className="flex items-center justify-between gap-3 flex-1">
+                <div className="flex items-center gap-2 flex-1">
                   <div className="font-medium truncate">{displayName}</div>
                   {getAccountTypeBadge(account)}
                 </div>
diff --git a/src/components/nostr/user-menu.tsx b/src/components/nostr/user-menu.tsx
index 6f045be..a41390b 100644
--- a/src/components/nostr/user-menu.tsx
+++ b/src/components/nostr/user-menu.tsx
@@ -6,6 +6,7 @@ import { getDisplayName } from "@/lib/nostr-utils";
 import { useGrimoire } from "@/core/state";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -23,6 +24,21 @@ import { useState } from "react";
 import type { IAccount } from "applesauce-accounts";
 import type { ISigner } from "applesauce-signers";
 
+function UserAvatar({ pubkey }: { pubkey: string }) {
+  const profile = useProfile(pubkey);
+  return (
+    <Avatar className="size-4">
+      <AvatarImage
+        src={profile?.picture}
+        alt={getDisplayName(pubkey, profile)}
+      />
+      <AvatarFallback>
+        {getDisplayName(pubkey, profile).slice(0, 2).toUpperCase()}
+      </AvatarFallback>
+    </Avatar>
+  );
+}
+
 function getAccountTypeBadge(account: IAccount<ISigner, unknown, unknown>) {
   const accountType = (account.constructor as unknown as { type: string }).type;
 
@@ -116,7 +132,11 @@ export default function UserMenu() {
             variant="link"
             aria-label={account ? "User menu" : "Log in"}
           >
-            <User className="size-4 text-muted-foreground" />
+            {account ? (
+              <UserAvatar pubkey={account.pubkey} />
+            ) : (
+              <User className="size-4 text-muted-foreground" />
+            )}
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-80" align="start">