Display user's blossom servers in menu (#90)

* feat: Display blossom servers in user menu with caching

Implements caching and display of user's blossom server lists (kind 10063) in the user menu dropdown.

**Key Changes:**

1. **Database Schema (db.ts)**:
   - Added `CachedBlossomServerList` interface
   - Added `blossomServers` table to Dexie v15
   - Indexed by pubkey and updatedAt for efficient querying

2. **Caching Service (blossom-server-cache.ts)**:
   - Dual-layer caching: LRU memory cache (100 entries) + Dexie persistent cache
   - 24-hour TTL to reduce network requests
   - Auto-caches kind:10063 events from EventStore
   - Mirrors relay-list-cache pattern for consistency

3. **Sync Hooks**:
   - `useBlossomServerCacheSync`: Subscribes to EventStore for auto-caching kind:10063 events
   - `useAccountSync`: Extended to fetch and watch active account's blossom servers

4. **State Management**:
   - Added `blossomServers` field to `activeAccount` in GrimoireState
   - Created `setActiveAccountBlossomServers` pure function and callback
   - Reactive updates when user's server list changes

5. **User Menu UI (user-menu.tsx)**:
   - Added blossom servers section with HardDrive icon
   - Shows server count badge (e.g., "3 servers")
   - Clickable links open servers in new tabs
   - Displays only when user has configured servers

**Architecture:**
- Follows existing relay list caching pattern for consistency
- Reactive: UI auto-updates when kind:10063 events arrive
- Incremental sync: Fetches on login, caches for 24h
- Performance: Memory cache for <1ms lookups, Dexie for persistence

**Testing:**
- Build: ✓ No TypeScript errors
- Tests: ✓ All 838 tests passing

* feat: Open blossom server file lists directly from menus

**User Menu & Profile Viewer Improvements:**

1. **Enhanced Click Behavior**:
   - Clicking a blossom server now opens the file list for that server
   - Shows blobs uploaded by the user (user menu) or profile owner (profile viewer)
   - Pre-selects the clicked server in the dropdown

2. **UX Improvements**:
   - Removed server count from user menu label (cleaner UI)
   - Added `cursor-crosshair` to blossom server items (consistent with other clickable items)
   - Removed external link icon (not opening external URL anymore)

3. **Technical Changes**:
   - Updated `ListBlobsView` to accept optional `serverUrl` prop for pre-selection
   - User menu: Opens `blossom list` with `serverUrl` for active user
   - Profile viewer: Opens `blossom list` with both `pubkey` and `serverUrl`

**Flow:**
- User menu → Click server → Opens files for active user on that server
- Profile viewer → Click server → Opens files for viewed user on that server

* fix: Properly fetch blossom servers for any profile view

**Problem:**
Blossom servers were only visible for the logged-in user's profile,
not for other users' profiles being viewed.

**Solution:**
Enhanced ProfileViewer blossom server fetching with multi-layer approach:

1. **Cache-first loading**: Check blossomServerCache for instant display
2. **EventStore check**: Use existing cached event if available
3. **Reactive subscription**: Subscribe to EventStore for real-time updates
4. **Network fetch**: Use addressLoader to fetch latest from relays
5. **Auto-caching**: Update cache when new events arrive

**Benefits:**
- Blossom servers now display for ANY user's profile
- Instant display from cache (< 1ms)
- Reactive updates when data changes
- Proper cache hydration for future visits
- Consistent with relay list fetching pattern

**Technical:**
- Imported and integrated blossomServerCache service
- Added cache check before network fetch
- Separated EventStore subscription from network fetch
- Added cache updates on event arrival

---------

Co-authored-by: Claude <noreply@anthropic.com>

src/components/BlossomViewer.tsx

@@ -72,7 +72,7 @@ export function BlossomViewer({
     case "upload":
       return <UploadView />;
     case "list":
-      return <ListBlobsView pubkey={pubkey} />;
+      return <ListBlobsView pubkey={pubkey} serverUrl={serverUrl} />;
     case "blob":
       return <BlobDetailView sha256={sha256!} serverUrl={serverUrl} />;
     case "mirror":
@@ -753,7 +753,13 @@ function formatSize(bytes: number): string {
 /**
  * ListBlobsView - List blobs for a user
  */
-function ListBlobsView({ pubkey }: { pubkey?: string }) {
+function ListBlobsView({
+  pubkey,
+  serverUrl,
+}: {
+  pubkey?: string;
+  serverUrl?: string;
+}) {
   const { state } = useGrimoire();
   const eventStore = useEventStore();
   const accountPubkey = state.activeAccount?.pubkey;
@@ -762,7 +768,9 @@ function ListBlobsView({ pubkey }: { pubkey?: string }) {
   const [servers, setServers] = useState<string[]>([]);
   const [blobs, setBlobs] = useState<BlobDescriptor[]>([]);
   const [loading, setLoading] = useState(true);
-  const [selectedServer, setSelectedServer] = useState<string | null>(null);
+  const [selectedServer, setSelectedServer] = useState<string | null>(
+    serverUrl || null,
+  );
   const [selectedBlob, setSelectedBlob] = useState<BlobDescriptor | null>(null);
 
   // Fetch servers for the target pubkey
@@ -780,7 +788,8 @@ function ListBlobsView({ pubkey }: { pubkey?: string }) {
     if (event) {
       const s = getServersFromEvent(event);
       setServers(s);
-      if (s.length > 0 && !selectedServer) {
+      // Only set default server if no serverUrl was provided and no server is selected
+      if (s.length > 0 && !selectedServer && !serverUrl) {
         setSelectedServer(s[0]);
       }
     }
@@ -799,7 +808,8 @@ function ListBlobsView({ pubkey }: { pubkey?: string }) {
         if (e) {
           const s = getServersFromEvent(e);
           setServers(s);
-          if (s.length > 0 && !selectedServer) {
+          // Only set default server if no serverUrl was provided and no server is selected
+          if (s.length > 0 && !selectedServer && !serverUrl) {
             setSelectedServer(s[0]);
           }
         }

src/components/ProfileViewer.tsx

@@ -10,7 +10,6 @@ import {
   Send,
   Wifi,
   HardDrive,
-  ExternalLink,
 } from "lucide-react";
 import { kinds, nip19 } from "nostr-tools";
 import { useEventStore, use$ } from "applesauce-react/hooks";
@@ -33,6 +32,7 @@ import { useEffect, useState } from "react";
 import type { Subscription } from "rxjs";
 import { useGrimoire } from "@/core/state";
 import { USER_SERVER_LIST_KIND, getServersFromEvent } from "@/services/blossom";
+import blossomServerCache from "@/services/blossom-server-cache";
 
 export interface ProfileViewerProps {
   pubkey: string;
@@ -43,7 +43,7 @@ export interface ProfileViewerProps {
  * Shows profile metadata, inbox/outbox relays, and raw JSON
  */
 export function ProfileViewer({ pubkey }: ProfileViewerProps) {
-  const { state } = useGrimoire();
+  const { state, addWindow } = useGrimoire();
   const accountPubkey = state.activeAccount?.pubkey;
 
   // Resolve $me alias
@@ -129,40 +129,55 @@ export function ProfileViewer({ pubkey }: ProfileViewerProps) {
 
   // Fetch Blossom server list (kind 10063)
   useEffect(() => {
-    if (!resolvedPubkey) return;
+    if (!resolvedPubkey) {
+      setBlossomServers([]);
+      return;
+    }
 
-    let subscription: Subscription | null = null;
+    // First, check cache for instant display
+    blossomServerCache.getServers(resolvedPubkey).then((cachedServers) => {
+      if (cachedServers && cachedServers.length > 0) {
+        setBlossomServers(cachedServers);
+      }
+    });
 
-    // Check if we already have the event in store
+    // Check if we already have the event in EventStore
     const existingEvent = eventStore.getReplaceable(
       USER_SERVER_LIST_KIND,
       resolvedPubkey,
       "",
     );
     if (existingEvent) {
-      setBlossomServers(getServersFromEvent(existingEvent));
+      const servers = getServersFromEvent(existingEvent);
+      setBlossomServers(servers);
+      // Also update cache
+      blossomServerCache.set(existingEvent);
     }
 
-    // Also fetch from network
-    subscription = addressLoader({
+    // Subscribe to EventStore for reactive updates
+    const storeSubscription = eventStore
+      .replaceable(USER_SERVER_LIST_KIND, resolvedPubkey, "")
+      .subscribe((event) => {
+        if (event) {
+          const servers = getServersFromEvent(event);
+          setBlossomServers(servers);
+          // Also update cache
+          blossomServerCache.set(event);
+        } else {
+          setBlossomServers([]);
+        }
+      });
+
+    // Also fetch from network to get latest data
+    const networkSubscription = addressLoader({
       kind: USER_SERVER_LIST_KIND,
       pubkey: resolvedPubkey,
       identifier: "",
-    }).subscribe({
-      next: () => {
-        const event = eventStore.getReplaceable(
-          USER_SERVER_LIST_KIND,
-          resolvedPubkey,
-          "",
-        );
-        if (event) {
-          setBlossomServers(getServersFromEvent(event));
-        }
-      },
-    });
+    }).subscribe();
 
     return () => {
-      subscription?.unsubscribe();
+      storeSubscription.unsubscribe();
+      networkSubscription.unsubscribe();
     };
   }, [resolvedPubkey, eventStore]);
 
@@ -336,14 +351,25 @@ export function ProfileViewer({ pubkey }: ProfileViewerProps) {
                 {blossomServers.map((url) => (
                   <DropdownMenuItem
                     key={url}
-                    className="flex items-center justify-between gap-2"
-                    onClick={() => window.open(url, "_blank")}
+                    className="flex items-center justify-between gap-2 cursor-crosshair"
+                    onClick={() => {
+                      if (resolvedPubkey) {
+                        addWindow(
+                          "blossom",
+                          {
+                            subcommand: "list",
+                            pubkey: resolvedPubkey,
+                            serverUrl: url,
+                          },
+                          `Files on ${url}`,
+                        );
+                      }
+                    }}
                   >
                     <div className="flex items-center gap-1.5 flex-1 min-w-0">
                       <HardDrive className="size-3 text-muted-foreground flex-shrink-0" />
                       <span className="font-mono text-xs truncate">{url}</span>
                     </div>
-                    <ExternalLink className="size-3 text-muted-foreground flex-shrink-0" />
                   </DropdownMenuItem>
                 ))}
               </DropdownMenuContent>

src/components/layouts/AppShell.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, ReactNode } from "react";
 import { Terminal } from "lucide-react";
 import { useAccountSync } from "@/hooks/useAccountSync";
 import { useRelayListCacheSync } from "@/hooks/useRelayListCacheSync";
+import { useBlossomServerCacheSync } from "@/hooks/useBlossomServerCacheSync";
 import { useRelayState } from "@/hooks/useRelayState";
 import relayStateManager from "@/services/relay-state-manager";
 import { TabBar } from "../TabBar";
@@ -25,6 +26,9 @@ export function AppShell({ children, hideBottomBar = false }: AppShellProps) {
   // Auto-cache kind:10002 relay lists from EventStore to Dexie
   useRelayListCacheSync();
 
+  // Auto-cache kind:10063 blossom server lists from EventStore to Dexie
+  useBlossomServerCacheSync();
+
   // Initialize global relay state manager
   useEffect(() => {
     relayStateManager.initialize().catch((err) => {

src/components/nostr/user-menu.tsx

@@ -1,4 +1,4 @@
-import { User } from "lucide-react";
+import { User, HardDrive } from "lucide-react";
 import accounts from "@/services/accounts";
 import { useProfile } from "@/hooks/useProfile";
 import { use$ } from "applesauce-react/hooks";
@@ -54,6 +54,7 @@ export default function UserMenu() {
   const account = use$(accounts.active$);
   const { state, addWindow } = useGrimoire();
   const relays = state.activeAccount?.relays;
+  const blossomServers = state.activeAccount?.blossomServers;
   const [showSettings, setShowSettings] = useState(false);
   const [showLogin, setShowLogin] = useState(false);
 
@@ -123,6 +124,34 @@ export default function UserMenu() {
                 </>
               )}
 
+              {blossomServers && blossomServers.length > 0 && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel className="text-xs text-muted-foreground font-normal flex items-center gap-1.5">
+                      <HardDrive className="size-3.5" />
+                      <span>Blossom Servers</span>
+                    </DropdownMenuLabel>
+                    {blossomServers.map((server) => (
+                      <DropdownMenuItem
+                        key={server}
+                        className="cursor-crosshair"
+                        onClick={() => {
+                          addWindow(
+                            "blossom",
+                            { subcommand: "list", serverUrl: server },
+                            `Files on ${server}`,
+                          );
+                        }}
+                      >
+                        <HardDrive className="size-4 text-muted-foreground mr-2" />
+                        <span className="text-sm truncate">{server}</span>
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuGroup>
+                </>
+              )}
+
               <DropdownMenuSeparator />
               {/* <DropdownMenuItem
                 onClick={() => setShowSettings(true)}