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

@@ -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>

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">