feat: zap goals nip-75 (#174)

* feat: add NIP-75 Zap Goal rendering

Add feed and detail view rendering for kind 9041 (Zap Goals):

- GoalRenderer: Shows clickable title, description, and progress bar
  with target/raised amounts
- GoalDetailRenderer: Adds sorted contributor breakdown with
  individual contribution totals
- nip75-helpers: Helper functions for extracting goal metadata
  (amount, relays, deadline, beneficiaries)

Both views fetch and tally zaps from the goal's specified relays.

* fix: improve NIP-75 goal rendering

- Remove icons from goal renderers
- Remove "sats" suffixes from amounts
- Use muted text instead of destructive color for closed goals
- Content is the title, summary tag is the description
- Only show description if summary tag exists

* feat: add zap button to goal renderers

Show a 'Zap this Goal' button in both feed and detail views
when the goal is still open (not past its closed_at deadline).

* style: unify progress indicator styles

- Update user menu and welcome page progress indicators to match
  goal renderer style: bar on top, progress/total below with percentage
- Remove "sats" suffix from progress displays
- Make goal zap button primary variant and full-width

* fix: polish goal renderers for release

- Remove limit parameter from useTimeline (use whatever relays send)
- Add more spacing between "Support Grimoire" header and progress bar

* refactor: extract useGoalProgress hook for NIP-75 goals

- Create useGoalProgress hook with shared goal logic
- Handle relay selection: goal relays → user inbox → aggregators
- Calculate progress, contributors, and all metadata in one place
- Simplify both GoalRenderer and GoalDetailRenderer

---------

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

src/components/GrimoireWelcome.tsx

@@ -136,15 +136,20 @@ export function GrimoireWelcome({
                 {description}
               </div>
               {showProgress && (
-                <div className="mt-2 space-y-1">
-                  <div className="flex items-center justify-between text-[10px] text-muted-foreground">
-                    <span>Monthly goal</span>
-                    <span>
-                      {formatSats(monthlyDonations)} /{" "}
-                      {formatSats(MONTHLY_GOAL_SATS)} sats
+                <div className="mt-2 flex flex-col gap-1">
+                  <Progress value={goalProgress} className="h-1" />
+                  <div className="flex items-center justify-between text-[10px]">
+                    <span className="text-muted-foreground">
+                      <span className="text-foreground font-medium">
+                        {formatSats(monthlyDonations)}
+                      </span>
+                      {" / "}
+                      {formatSats(MONTHLY_GOAL_SATS)}
+                    </span>
+                    <span className="text-muted-foreground">
+                      {goalProgress.toFixed(0)}%
                     </span>
                   </div>
-                  <Progress value={goalProgress} className="h-1" />
                 </div>
               )}
             </button>

src/components/nostr/kinds/GoalDetailRenderer.tsx

@@ -0,0 +1,159 @@
+import { NostrEvent } from "@/types/nostr";
+import { Zap } from "lucide-react";
+import { useGoalProgress } from "@/hooks/useGoalProgress";
+import { formatTimestamp } from "@/hooks/useLocale";
+import { useGrimoire } from "@/core/state";
+import { Progress } from "@/components/ui/progress";
+import { Button } from "@/components/ui/button";
+import { UserName } from "../UserName";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Detail renderer for Kind 9041 - Zap Goals (NIP-75)
+ * Shows full goal info with sorted contributor breakdown
+ */
+export function GoalDetailRenderer({ event }: { event: NostrEvent }) {
+  const { locale, addWindow } = useGrimoire();
+  const {
+    title,
+    summary,
+    closedAt,
+    closed,
+    beneficiaries,
+    targetSats,
+    raisedSats,
+    progress,
+    contributors,
+    loading,
+  } = useGoalProgress(event);
+
+  const deadlineText = closedAt
+    ? formatTimestamp(closedAt, "absolute", locale.locale)
+    : null;
+
+  const handleZap = () => {
+    addWindow("zap", {
+      recipientPubkey: event.pubkey,
+      eventPointer: { id: event.id },
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-6 p-6 max-w-2xl mx-auto">
+      {/* Header */}
+      <div className="flex flex-col gap-4">
+        <h1 className="text-2xl font-bold text-foreground">{title}</h1>
+
+        {/* Description (summary tag only) */}
+        {summary && (
+          <p className="text-muted-foreground whitespace-pre-wrap">{summary}</p>
+        )}
+
+        {/* Deadline */}
+        {closedAt && (
+          <div className="text-sm text-muted-foreground">
+            {closed ? (
+              <span>Closed on {deadlineText}</span>
+            ) : (
+              <span>Ends {deadlineText}</span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Progress Section */}
+      {targetSats > 0 && (
+        <div className="flex flex-col gap-3 p-4 bg-muted/30 rounded-lg">
+          <div className="flex justify-between items-baseline">
+            <span className="text-3xl font-bold text-foreground">
+              {raisedSats.toLocaleString()}
+            </span>
+            <span className="text-muted-foreground">
+              of {targetSats.toLocaleString()}
+            </span>
+          </div>
+          <Progress value={progress} className="h-3" />
+          <div className="flex justify-between text-sm text-muted-foreground">
+            <span>{contributors.length} contributors</span>
+            <span className="font-medium text-foreground">
+              {progress.toFixed(1)}%
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Zap Button */}
+      {!closed && (
+        <Button onClick={handleZap} className="w-full">
+          <Zap className="size-4" />
+          Zap this Goal
+        </Button>
+      )}
+
+      {/* Beneficiaries */}
+      {beneficiaries.length > 0 && (
+        <div className="flex flex-col gap-2">
+          <h2 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
+            Beneficiaries
+          </h2>
+          <div className="flex flex-wrap gap-2">
+            {beneficiaries.map((pubkey) => (
+              <div key={pubkey} className="px-2 py-1 bg-muted rounded text-sm">
+                <UserName pubkey={pubkey} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Contributors */}
+      <div className="flex flex-col gap-3">
+        <h2 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
+          Contributors
+        </h2>
+
+        {loading && contributors.length === 0 ? (
+          <div className="flex flex-col gap-2">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="flex items-center justify-between py-2">
+                <Skeleton className="h-5 w-32" />
+                <Skeleton className="h-5 w-20" />
+              </div>
+            ))}
+          </div>
+        ) : contributors.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-4 text-center">
+            No contributions yet. Be the first to contribute!
+          </p>
+        ) : (
+          <div className="flex flex-col divide-y divide-border/50">
+            {contributors.map((contributor, index) => {
+              const amountSats = Math.floor(contributor.totalAmount / 1000);
+              return (
+                <div
+                  key={contributor.pubkey}
+                  className="flex items-center justify-between py-3"
+                >
+                  <div className="flex items-center gap-3">
+                    <span className="text-xs text-muted-foreground w-6 text-right">
+                      #{index + 1}
+                    </span>
+                    <UserName pubkey={contributor.pubkey} className="text-sm" />
+                    {contributor.zapCount > 1 && (
+                      <span className="text-xs text-muted-foreground">
+                        ({contributor.zapCount} zaps)
+                      </span>
+                    )}
+                  </div>
+                  <span className="font-mono text-sm font-medium">
+                    {amountSats.toLocaleString()}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/nostr/kinds/GoalRenderer.tsx

@@ -0,0 +1,106 @@
+import {
+  BaseEventProps,
+  BaseEventContainer,
+  ClickableEventTitle,
+} from "./BaseEventRenderer";
+import { Zap } from "lucide-react";
+import { useGoalProgress } from "@/hooks/useGoalProgress";
+import { formatTimestamp } from "@/hooks/useLocale";
+import { useGrimoire } from "@/core/state";
+import { Progress } from "@/components/ui/progress";
+import { Button } from "@/components/ui/button";
+
+/**
+ * Renderer for Kind 9041 - Zap Goals (NIP-75)
+ * Shows goal title, description, and funding progress
+ */
+export function GoalRenderer({ event }: BaseEventProps) {
+  const { locale, addWindow } = useGrimoire();
+  const {
+    title,
+    summary,
+    closedAt,
+    closed,
+    targetSats,
+    raisedSats,
+    progress,
+    loading,
+    zaps,
+  } = useGoalProgress(event);
+
+  const deadlineText = closedAt
+    ? formatTimestamp(closedAt, "absolute", locale.locale)
+    : null;
+
+  const handleZap = () => {
+    addWindow("zap", {
+      recipientPubkey: event.pubkey,
+      eventPointer: { id: event.id },
+    });
+  };
+
+  return (
+    <BaseEventContainer event={event}>
+      <div className="flex flex-col gap-3">
+        {/* Title */}
+        <ClickableEventTitle
+          event={event}
+          className="text-base font-semibold text-foreground leading-tight"
+        >
+          {title}
+        </ClickableEventTitle>
+
+        {/* Description (summary tag only) */}
+        {summary && (
+          <p className="text-sm text-muted-foreground line-clamp-2">
+            {summary}
+          </p>
+        )}
+
+        {/* Progress */}
+        {targetSats > 0 && (
+          <div className="flex flex-col gap-1.5">
+            <Progress value={progress} className="h-2" />
+            <div className="flex justify-between items-center text-xs">
+              <span className="text-muted-foreground">
+                {loading && zaps.length === 0 ? (
+                  "Loading..."
+                ) : (
+                  <>
+                    <span className="text-foreground font-medium">
+                      {raisedSats.toLocaleString()}
+                    </span>
+                    {" / "}
+                    {targetSats.toLocaleString()}
+                  </>
+                )}
+              </span>
+              <span className="text-muted-foreground">
+                {progress.toFixed(0)}%
+              </span>
+            </div>
+          </div>
+        )}
+
+        {/* Deadline */}
+        {closedAt && (
+          <div className="text-xs text-muted-foreground">
+            {closed ? (
+              <span>Closed on {deadlineText}</span>
+            ) : (
+              <span>Ends {deadlineText}</span>
+            )}
+          </div>
+        )}
+
+        {/* Zap Button */}
+        {!closed && (
+          <Button onClick={handleZap} className="w-full">
+            <Zap className="size-4" />
+            Zap this Goal
+          </Button>
+        )}
+      </div>
+    </BaseEventContainer>
+  );
+}

src/components/nostr/kinds/index.tsx

@@ -148,6 +148,8 @@ import { BadgeAwardRenderer } from "./BadgeAwardRenderer";
 import { BadgeAwardDetailRenderer } from "./BadgeAwardDetailRenderer";
 import { ProfileBadgesRenderer } from "./ProfileBadgesRenderer";
 import { ProfileBadgesDetailRenderer } from "./ProfileBadgesDetailRenderer";
+import { GoalRenderer } from "./GoalRenderer";
+import { GoalDetailRenderer } from "./GoalDetailRenderer";
 
 /**
  * Registry of kind-specific renderers
@@ -176,6 +178,7 @@ const kindRenderers: Record<number, React.ComponentType<BaseEventProps>> = {
   1617: PatchRenderer, // Patch (NIP-34)
   1618: PullRequestRenderer, // Pull Request (NIP-34)
   1621: IssueRenderer, // Issue (NIP-34)
+  9041: GoalRenderer, // Zap Goal (NIP-75)
   9735: Kind9735Renderer, // Zap Receipt
   9802: Kind9802Renderer, // Highlight
   8000: AddUserRenderer, // Add User (NIP-43)
@@ -281,6 +284,7 @@ const detailRenderers: Record<
   1617: PatchDetailRenderer, // Patch Detail (NIP-34)
   1618: PullRequestDetailRenderer, // Pull Request Detail (NIP-34)
   1621: IssueDetailRenderer, // Issue Detail (NIP-34)
+  9041: GoalDetailRenderer, // Zap Goal Detail (NIP-75)
   9802: Kind9802DetailRenderer, // Highlight Detail
   8000: AddUserDetailRenderer, // Add User Detail (NIP-43)
   8001: RemoveUserDetailRenderer, // Remove User Detail (NIP-43)

src/components/nostr/user-menu.tsx

@@ -430,18 +430,23 @@ export default function UserMenu() {
               className="px-2 py-2 cursor-crosshair hover:bg-accent/50 transition-colors"
               onClick={openDonate}
             >
-              <div className="flex items-center gap-2 mb-1.5">
+              <div className="flex items-center gap-2 mb-3">
                 <Zap className="size-4 text-yellow-500" />
                 <span className="text-sm font-medium">Support Grimoire</span>
               </div>
-              <div className="flex items-center justify-between text-xs mb-1">
-                <span className="text-muted-foreground">Monthly goal</span>
-                <span className="font-medium">
-                  {formatSats(monthlyDonations)} /{" "}
-                  {formatSats(MONTHLY_GOAL_SATS)} sats
+              <Progress value={goalProgress} className="h-1.5 mb-1" />
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">
+                  <span className="text-foreground font-medium">
+                    {formatSats(monthlyDonations)}
+                  </span>
+                  {" / "}
+                  {formatSats(MONTHLY_GOAL_SATS)}
+                </span>
+                <span className="text-muted-foreground">
+                  {goalProgress.toFixed(0)}%
                 </span>
               </div>
-              <Progress value={goalProgress} className="h-1.5" />
             </div>
           </DropdownMenuGroup>