Add zap counts on notes (Phase 1 #2)

- fetchZapCount(eventId): fetches kind 9735 receipts for an event,
  parses millisat amounts from embedded zap request description tags,
  returns { count, totalSats }
- useZapCount hook: session-cached, same pattern as useReactionCount
- NoteCard: zap button shows "⚡ N sats" when total > 0, falls back
  to "⚡ zap" when no zaps yet; stats row shown for logged-out users
  displaying ♥ and ⚡ counts when non-zero

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/feed/NoteCard.tsx

@@ -2,6 +2,7 @@ import { useState, useRef } from "react";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { useProfile } from "../../hooks/useProfile";
 import { useReactionCount } from "../../hooks/useReactionCount";
+import { useZapCount } from "../../hooks/useZapCount";
 import { useUserStore } from "../../stores/user";
 import { useMuteStore } from "../../stores/mute";
 import { useUIStore } from "../../stores/ui";
@@ -34,6 +35,7 @@ export function NoteCard({ event }: NoteCardProps) {
   const [liked, setLiked] = useState(() => getLiked().has(event.id));
   const [liking, setLiking] = useState(false);
   const [reactionCount, adjustReactionCount] = useReactionCount(event.id);
+  const zapData = useZapCount(event.id);
   const [showReply, setShowReply] = useState(false);
   const [replyText, setReplyText] = useState("");
   const [replying, setReplying] = useState(false);
@@ -203,11 +205,25 @@ export function NoteCard({ event }: NoteCardProps) {
                 onClick={() => setShowZap(true)}
                 className="text-[11px] text-text-dim hover:text-zap transition-colors"
               >
-                ⚡ zap
+                {zapData && zapData.totalSats > 0
+                  ? `⚡ ${zapData.totalSats.toLocaleString()} sats`
+                  : "⚡ zap"}
               </button>
             </div>
           )}
 
+          {/* Stats visible when logged out */}
+          {!loggedIn && (reactionCount !== null && reactionCount > 0 || zapData !== null && zapData.totalSats > 0) && (
+            <div className="flex items-center gap-3 mt-1.5">
+              {reactionCount !== null && reactionCount > 0 && (
+                <span className="text-text-dim text-[11px]">♥ {reactionCount}</span>
+              )}
+              {zapData !== null && zapData.totalSats > 0 && (
+                <span className="text-zap text-[11px]">⚡ {zapData.totalSats.toLocaleString()} sats</span>
+              )}
+            </div>
+          )}
+
           {showZap && (
             <ZapModal
               target={{ type: "note", event, recipientPubkey: event.pubkey }}

src/hooks/useZapCount.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import { fetchZapCount } from "../lib/nostr";
+
+interface ZapData { count: number; totalSats: number; }
+
+const cache = new Map<string, ZapData>();
+
+export function useZapCount(eventId: string): ZapData | null {
+  const [data, setData] = useState<ZapData | null>(() => cache.get(eventId) ?? null);
+
+  useEffect(() => {
+    if (cache.has(eventId)) {
+      setData(cache.get(eventId)!);
+      return;
+    }
+    fetchZapCount(eventId).then((d) => {
+      cache.set(eventId, d);
+      setData(d);
+    });
+  }, [eventId]);
+
+  return data;
+}

src/lib/nostr/client.ts

@@ -282,6 +282,26 @@ export async function searchUsers(query: string, limit = 20): Promise<NDKEvent[]
   return Array.from(events);
 }
 
+export async function fetchZapCount(eventId: string): Promise<{ count: number; totalSats: number }> {
+  const instance = getNDK();
+  const filter: NDKFilter = { kinds: [NDKKind.Zap], "#e": [eventId] };
+  const events = await instance.fetchEvents(filter, {
+    cacheUsage: NDKSubscriptionCacheUsage.ONLY_RELAY,
+  });
+  let totalSats = 0;
+  for (const event of events) {
+    const desc = event.tags.find((t) => t[0] === "description")?.[1];
+    if (desc) {
+      try {
+        const zapReq = JSON.parse(desc) as { tags?: string[][] };
+        const amountTag = zapReq.tags?.find((t) => t[0] === "amount");
+        if (amountTag?.[1]) totalSats += Math.round(parseInt(amountTag[1]) / 1000);
+      } catch { /* malformed */ }
+    }
+  }
+  return { count: events.size, totalSats };
+}
+
 export async function fetchReactionCount(eventId: string): Promise<number> {
   const instance = getNDK();
   const filter: NDKFilter = {

src/lib/nostr/index.ts

@@ -1 +1 @@
-export { getNDK, connectToRelays, fetchGlobalFeed, fetchFollowFeed, fetchReplies, publishNote, publishArticle, publishProfile, publishReaction, publishRepost, publishQuote, publishReply, publishContactList, fetchReactionCount, fetchUserNotes, fetchProfile, fetchArticle, fetchAuthorArticles, fetchZapsReceived, fetchZapsSent, fetchDMConversations, fetchDMThread, sendDM, decryptDM, fetchMuteList, publishMuteList, getStoredRelayUrls, addRelay, removeRelay, searchNotes, searchUsers } from "./client";
+export { getNDK, connectToRelays, fetchGlobalFeed, fetchFollowFeed, fetchReplies, publishNote, publishArticle, publishProfile, publishReaction, publishRepost, publishQuote, publishReply, publishContactList, fetchReactionCount, fetchZapCount, fetchUserNotes, fetchProfile, fetchArticle, fetchAuthorArticles, fetchZapsReceived, fetchZapsSent, fetchDMConversations, fetchDMThread, sendDM, decryptDM, fetchMuteList, publishMuteList, getStoredRelayUrls, addRelay, removeRelay, searchNotes, searchUsers } from "./client";