Hoist three duplicated discovery helpers to shared modules

Three small extractions that consolidate hand-rolled copies in the
discovery surfaces. No behavior change.

- getPledgeCoord → src/lib/pledges.ts. Was defined three times
  (PledgesDiscoverySection, ActionsPage, ActionShareMenu), each with
  the same '36639:<pubkey>:<d>' template. Lifted into the existing
  pledges lib and typed structurally on { pubkey, id } so the lib
  layer doesn't take a hook dep on Action.

- parseSort + toQuerySort → exported from useDiscoveryFilters and
  useAllCampaigns respectively. AllCampaignsPage was carrying its own
  copy of both with an apologetic comment ('mirroring the one in
  useDiscoveryFilters'); CampaignsDiscoverySection had its own
  toQuerySort. One source of truth each now, with the pages and the
  section importing from the same module as the hook that consumes
  the result.

- PledgeCardSkeleton → exported from PledgeCard. Replaces two
  byte-identical ActionSkeleton components in PledgesDiscoverySection
  and ActionsPage. Naming matches the existing CampaignCardSkeleton /
  CommunityMiniCardSkeleton convention of placing the skeleton next
  to its card.

.env.example

@@ -7,5 +7,8 @@ VITE_NOSTR_PUSH_PUBKEY=""
 # Primarily useful for native (Capacitor) builds, where window.location.origin is capacitor://localhost.
 # Example: VITE_SHARE_ORIGIN="https://agora.spot"
 VITE_SHARE_ORIGIN=""
+# DeepL-backed translation worker for user-generated content.
+# Example: VITE_TRANSLATE_WORKER_URL="https://agora-translate.<your-subdomain>.workers.dev"
+VITE_TRANSLATE_WORKER_URL="https://agora-translate.lemonknowsall.workers.dev/"
 # Set to "*" to allow any host in the Vite dev server (eg. when proxying through a custom domain)
-# ALLOWED_HOSTS="*"
+# ALLOWED_HOSTS="*"

.gitlab-ci.yml

@@ -37,6 +37,12 @@ deploy-web:
     - if: $CI_COMMIT_TAG
       when: never
     - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH && $DEPLOY_SSH_KEY && $DEPLOY_TARGET
+  variables:
+    # Vite inlines VITE_* env vars at build time. Sourced from GitLab CI/CD
+    # variables so values can be rotated without a code change.
+    VITE_TRANSLATE_WORKER_URL: $VITE_TRANSLATE_WORKER_URL
+    VITE_PLAUSIBLE_DOMAIN: $VITE_PLAUSIBLE_DOMAIN
+    VITE_PLAUSIBLE_ENDPOINT: $VITE_PLAUSIBLE_ENDPOINT
   script:
     # Build the web app
     - npm ci

AGENTS.md

@@ -260,6 +260,21 @@ Routes live in `AppRouter.tsx`. To add one:
 
 The router provides automatic scroll-to-top on navigation and a 404 `NotFound` page.
 
+## Internationalization
+
+All user-facing strings live in `src/locales/<lang>.json`. `en.json` is the source of truth; ten other locales ship alongside it: `ar`, `es`, `fa`, `fr`, `km`, `ps`, `pt`, `ru`, `sn`, `zh`.
+
+**When you edit, add, or remove a translated string, update every locale in the same change — not just `en.json`.** Leaving the other locales stale ships an inconsistent app: users in other languages either see outdated copy or get an English fallback in the middle of a localized screen. This applies to FAQ entries, guide bodies, button labels, error messages — every value reachable through `t()`.
+
+Concrete rules:
+
+- **Edits to an existing key** — change the value in `en.json` first, then update the corresponding key in all ten other locales. Translate the new content into each language; don't paste English. Preserve `{{interpolation}}` placeholders, markdown links, and technical tokens (`sp1…`, `BIP-352`, kind numbers, etc.) verbatim.
+- **New keys** — add to `en.json` first, then add the same key with a translated value in every other locale. `src/test/locales.test.ts` fails the build if any locale ships a key that doesn't exist in `en.json`, but the inverse (a key missing from a non-English locale) is allowed and falls back to English at runtime — which is exactly the user-visible mess you're trying to avoid.
+- **Removed keys** — delete from `en.json` and every other locale together. Leftover keys are dead translations and clutter future diffs.
+- **Parallelize the translation work** — when updating one English string across all ten locales, dispatch the per-language edits to subagents in parallel rather than translating ten files sequentially. Provide each subagent the new English source, the existing translation snippet (so it matches established voice), and explicit instructions to preserve placeholders and technical tokens.
+
+Always run `npm run test` after locale changes — `locales.test.ts` catches structural drift, and the wider suite catches any `t()` calls that referenced a key you renamed.
+
 ## Development Practices
 
 - React Query for data fetching and caching

NIP.md

@@ -12,7 +12,7 @@
 
 | Kind  | Name                       | Description                                                    |
 |-------|----------------------------|----------------------------------------------------------------|
-| 30223 | Campaign                   | Fundraising campaign with a list of on-chain Bitcoin recipients |
+| 33863 | Campaign                   | Self-authored fundraising campaign with a single Bitcoin wallet endpoint (`bc1...` or `sp1...`) |
 | 30385 | Community Stats Snapshot   | Pre-computed per-country / global community leaderboards       |
 | 36639 | Pledge                     | Donor pledge for concrete submissions, stored as sats           |
 
@@ -22,7 +22,55 @@
 |--------------------------|-----------------------------------------|-----------------------------------------------------------------|
 | Flat Communities | 34550, 30009, 8, 1111, 1984 | One-level badge membership with explicit moderators (NIP-72 ext) |
 | Community Chat | 34550, 1311 | Realtime member chat scoped to a NIP-72 community |
-| Campaign Moderation | 30223, 1985, 39089 | Homepage curation (approved / hidden / featured axes) via moderator-signed labels in the `agora.moderation` namespace, gated by a follow-pack moderator roster |
+| Campaign Moderation | 33863, 34550, 36639, 1985, 39089 | Discovery curation (approved / hidden / featured axes) via moderator-signed labels in the `agora.moderation` namespace, gated by a follow-pack moderator roster. Covers campaigns (all three axes), organizations (hidden + featured), and pledges (hidden + featured). |
+| HD Wallet Derivation | — | BIP-39 mnemonic deterministically derived from the user's nsec via HKDF; seeds a BIP-86 Taproot + BIP-352 silent-payment wallet importable into any BIP-39-compatible wallet (see [Agora HD Wallet](#agora-hd-wallet-derivation) below). |
+
+### Agora Content Marker
+
+Every event Agora publishes that represents a first-class Agora object carries the single-letter tag `["t", "agora"]`. This marker enables the Agora activity feed to filter strictly server-side via the relay-indexed `#t` filter (multi-letter tags like the NIP-89 `client` tag are not indexed by relays and are therefore unsuitable for this purpose).
+
+#### Tagged kinds
+
+| Kind  | Object              | Where tagged                                                  |
+|-------|---------------------|---------------------------------------------------------------|
+| 1     | Note (top-level, reply, quote) | `ComposeBox` default for top-level kind 1 publishes |
+| 1111  | NIP-22 comment      | `usePostComment` (all comments authored in Agora)             |
+| 8333  | Onchain zap         | `useOnchainZap`, `useDonateCampaign`, `SendBitcoinDialog`     |
+| 9041  | Zap goal            | `CreateGoalDialog`                                            |
+| 33863 | Campaign            | `CreateCampaignPage`                                          |
+| 31922 | Date calendar event | `CreateEventPage`, `CreateCommunityEventDialog`               |
+| 31923 | Time calendar event | `CreateEventPage`, `CreateCommunityEventDialog`               |
+| 34550 | Community           | `CreateCommunityPage`                                         |
+| 36639 | Pledge              | `CreateActionPage`                                            |
+
+The tag is added at publish time via the `withAgoraTag` helper in `src/lib/agoraNoteTags.ts`, which dedupes against any user-supplied `t:agora` tag.
+
+#### Untagged kinds (intentional)
+
+Reactions, reposts, follow lists, profile metadata, lists, settings, badges, vanish requests, encrypted DMs, and live chat are user-state or response events rather than first-class Agora content. Tagging them would pollute `#agora` hashtag surfaces without adding value to the activity feed.
+
+Untagged on purpose: 0, 3, 6, 7, 8, 16, 62, 1311, 30009, 10000-series, 30078, and any NIP-04 / NIP-44 encrypted kind.
+
+#### Querying
+
+The Agora activity feed combines a `t:agora`-strict layer with an intentionally cross-client world layer:
+
+```json
+[
+  { "kinds": [33863, 36639, 34550, 8333], "#t": ["agora", "Agora"] },
+  { "kinds": [1111], "#t": ["agora", "Agora"], "#K": ["33863", "36639", "34550"] },
+  { "kinds": [1111, 1068], "#k": ["iso3166", "geo"] },
+  { "kinds": [1], "#t": ["agora", "Agora"] }
+]
+```
+
+The first two filters surface only Agora-created content. The third surfaces all country/geo-rooted comments and polls regardless of origin — the world layer is intentionally cross-client. The fourth captures any kind 1 note carrying `#agora` (including hashtags users type themselves), which preserves viral / opt-in discovery.
+
+Clients filter both case variants (`agora` and `Agora`) because Nostr `t` tags are conventionally lowercase but some clients normalize hashtags to title case.
+
+#### Backward compatibility
+
+Events published before this marker was adopted do not carry `t:agora` and therefore do not appear in the Agora activity feed. They remain reachable by direct link and via kind-specific directories (e.g. the moderator-curated `/campaigns/all`). Authors who wish to surface a legacy event in the feed can republish it (any edit through the Agora UI will add the marker automatically).
 
 ### Community Chat
 
@@ -89,26 +137,45 @@ Single-recipient zap (the common case — tipping a post or profile):
 }
 ```
 
-Multi-recipient zap (one transaction paying multiple recipients — campaign donations, community splits):
+Multi-recipient zap (one transaction paying multiple recipients — community splits):
 
 ```json
 {
   "kind": 8333,
   "pubkey": "<sender-pubkey>",
-  "content": "Great campaign!",
+  "content": "Great community!",
   "tags": [
     ["i", "bitcoin:tx:<txid>"],
     ["p", "<recipient-1-pubkey>"],
     ["p", "<recipient-2-pubkey>"],
     ["p", "<recipient-3-pubkey>"],
     ["amount", "<total-sats-paid-to-all-listed-recipients>"],
-    ["a", "30223:<campaign-author>:<campaign-d-tag>"],
-    ["K", "30223"],
+    ["a", "34550:<community-author>:<community-d-tag>"],
+    ["K", "34550"],
     ["alt", "Donation: 75000 sats across 3 recipients"]
   ]
 }
 ```
 
+Campaign donation (one transaction paying a single campaign wallet — see Kind 33863 below):
+
+```json
+{
+  "kind": 8333,
+  "pubkey": "<donor-pubkey>",
+  "content": "Keep up the good work.",
+  "tags": [
+    ["i", "bitcoin:tx:<txid>"],
+    ["amount", "<sats-paid-to-campaign-wallet>"],
+    ["a", "33863:<campaign-author>:<campaign-d-tag>"],
+    ["K", "33863"],
+    ["alt", "Donation to Save the Last Bookstore: 25000 sats"]
+  ]
+}
+```
+
+Campaign donation receipts MUST NOT include `p` tags — campaigns no longer have Nostr-identity recipients, only a `w` wallet endpoint. Verification matches tx outputs against the campaign's declared `w` address rather than derived Taproot addresses (see *Verification* and Kind 33863 below).
+
 ### Content
 
 The `content` field is a human-readable comment from the sender (may be empty). It is NOT a zap request JSON (unlike NIP-57 kind 9735).
@@ -165,13 +232,25 @@ For addressable events, use `"#a": ["<kind>:<pubkey>:<d-tag>"]` instead. For pro
 
 **Verification (REQUIRED before trusting amounts):**
 
-Clients MUST verify a kind 8333 event on-chain before counting it toward a zap total or displaying its amount. The `amount` tag is self-reported by the sender and would otherwise be trivially spoofable. To verify:
+Clients MUST verify a kind 8333 event on-chain before counting it toward a zap total or displaying its amount. The `amount` tag is self-reported by the sender and would otherwise be trivially spoofable. Verification has two modes depending on the event shape:
+
+*Identity-recipient mode* (the event has `p` tags — profile zaps, event zaps, community splits):
 
 1. Extract the txid from the `i` tag.
 2. Fetch the transaction from a Bitcoin data source (e.g. a mempool.space-compatible Esplora API).
 3. For each `p` tag, derive the recipient's expected Taproot address.
 4. Sum the values of all outputs in the transaction that pay any of the derived recipient addresses. This is the **verified amount**. Change outputs paying back to the **sender's** derived Taproot address MUST NOT be counted toward the verified amount — only outputs to listed recipients.
-5. If the verified amount is 0 (no listed recipient received anything in the tx), the event SHOULD be discarded.
+
+*Campaign-wallet mode* (the event has an `a` tag pointing at a kind 33863 campaign and no `p` tags):
+
+1. Extract the txid from the `i` tag and the campaign coordinate from the `a` tag.
+2. Fetch the campaign event and read its `w` tag to get the campaign's declared bech32(m) wallet address. Reject the receipt if `w` is missing, malformed, or starts with `sp1` (silent-payment campaigns do not publish receipts; see Kind 33863).
+3. Fetch the transaction from a Bitcoin data source.
+4. Sum the values of all outputs in the transaction that pay the campaign's `w` address. This is the **verified amount**.
+
+In both modes:
+
+5. If the verified amount is 0, the event SHOULD be discarded.
 6. If the sender's `amount` tag exceeds the verified amount, clients MAY discard the event or MAY display the smaller verified amount (capping). Clients MUST NOT display or count the claimed amount when it exceeds the verified amount.
 7. Unconfirmed transactions MAY be displayed as pending; clients MAY require confirmation before counting them toward public totals. Because unconfirmed transactions can be evicted (RBF, double-spend), clients SHOULD either exclude them from aggregate zap totals or clearly label them as pending.
 
@@ -199,139 +278,235 @@ The two zap kinds are complementary. Clients SHOULD sum verified amounts from bo
 
 ---
 
-## Kind 30223: Campaign
+## Kind 33863: Campaign
 
 ### Summary
 
-Addressable event representing a **fundraising campaign**. A campaign carries the marketing-style metadata you would expect on GoFundMe, Kickstarter, or GiveSendGo (title, summary, cover image, story, category, goal, optional deadline, and recommended country), and — most importantly — a list of recipient pubkeys (`p` tags) that share the proceeds of any donation.
+Addressable event representing a **self-authored fundraising campaign**. A campaign carries marketing-style metadata (title, summary, banner image, markdown story, optional goal, optional deadline, optional country) and one or two Bitcoin wallet endpoints declared in `w` tags. Each wallet endpoint is either a public on-chain bech32(m) address (`bc1q…`, `bc1p…`) or a silent-payment code (`sp1…`, per BIP-352). The mode of each endpoint is inferred from the prefix — the client renders a QR code that combines the present endpoints and adjusts the donation-progress UI accordingly. A campaign MAY declare **at most one** endpoint per mode (at most one on-chain address and at most one silent-payment code).
 
-Donations are sent as a **single Bitcoin on-chain transaction** with one output per recipient. The donor's wallet derives each recipient's Taproot address from their pubkey via BIP-340/BIP-341 (the same scheme used by kind 8333 onchain zaps), so the campaign event itself does not need to carry Bitcoin addresses. After broadcasting the funding tx, the donor's client publishes one kind 8333 event referencing the `txid`, listing every campaign recipient under its own `p` tag, and tagging the campaign via `a` / `K`. The donation then shows up in the campaign's totals and in each recipient's profile zap history (the `#p` filter matches every listed recipient).
+The author of the event is also the beneficiary. Campaigns are never authored on behalf of someone else; the event creator owns the wallet declared in `w` and receives the donations. To stop accepting donations, the creator publishes a NIP-09 kind 5 deletion request referencing the campaign's `a` coordinate.
 
-The kind is addressable so the creator can edit the story, image, goal, deadline, and recipient list over the life of the campaign without minting new identifiers. The `d` tag is the campaign's slug.
+The kind is addressable so the creator can edit the story, banner, goal, deadline, and wallet over the life of the campaign without minting new identifiers. The `d` tag is the campaign's slug.
 
 ### Event Structure
 
 ```json
 {
-  "kind": 30223,
+  "kind": 33863,
   "pubkey": "<creator-pubkey>",
   "content": "<markdown story>",
   "tags": [
-    ["d", "save-the-bookstore"],
+    ["d", "save-the-last-bookstore"],
+
     ["title", "Save the Last Bookstore"],
     ["summary", "Help our 40-year-old neighborhood bookstore make rent through winter."],
-    ["image", "https://example.com/cover.jpg"],
-    ["t", "human-rights"],
-    ["t", "legal-defense"],
-    ["goal", "10000000"],
+    ["banner", "https://blossom.example/abc123.jpg"],
+    ["imeta",
+      "url https://blossom.example/abc123.jpg",
+      "m image/jpeg",
+      "x abc123def456...",
+      "dim 1600x900",
+      "blurhash LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      "alt Storefront of the Last Bookstore at dusk"
+    ],
+    ["alt", "Fundraising campaign: Save the Last Bookstore"],
+
+    ["w", "bc1p7w2k3xq9...xyz"],
+    ["w", "sp1qq...verylongsilentpaymentcode..."],
+
+    ["goal", "25000"],
     ["deadline", "1735689600"],
-    ["i", "iso3166:VE"],
+
+    ["i", "iso3166:US"],
     ["k", "iso3166"],
-    ["p", "<recipient-1-hex-pubkey>", "wss://relay.example", "2"],
-    ["p", "<recipient-2-hex-pubkey>", "wss://relay.example", "1"],
-    ["p", "<recipient-3-hex-pubkey>"],
-    ["alt", "Fundraising campaign: Save the Last Bookstore"]
+    ["t", "legal-defense"],
+    ["t", "mutual-aid"]
   ]
 }
 ```
 
+A silent-payment-only campaign omits the `bc1…` `w` tag and carries only the `sp1…`:
+
+```json
+["w", "sp1qq...verylongsilentpaymentcode..."]
+```
+
+An on-chain-only campaign omits the `sp1…` `w` tag and carries only the `bc1…`:
+
+```json
+["w", "bc1p7w2k3xq9...xyz"]
+```
+
 ### Content
 
 The `content` field is the **campaign story**, formatted as Markdown. Clients SHOULD render it with the same Markdown renderer they use for NIP-23 long-form content. Empty content is permitted (e.g. for a campaign that lives entirely in its summary).
 
 ### Tags
 
-| Tag        | Required | Description                                                                                                                                                       |
-|------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `d`        | Yes      | Campaign slug, unique per author. Forms the addressable coordinate `30223:<pubkey>:<d>`.                                                                          |
-| `title`    | Yes      | Display title of the campaign (plain text, max ~200 chars).                                                                                                       |
-| `summary`  | Recommended | Short one-paragraph tagline shown in feed cards and previews.                                                                                                  |
-| `image`    | Recommended | HTTPS URL of the cover image (jpg/png/webp). Clients MUST sanitize and verify the URL before rendering.                                                       |
-| `t`        | Recommended | Topic tag for discovery and filtering (e.g. `human-rights`, `legal-defense`, `independent-media`). Multiple `t` tags MAY be used. Clients SHOULD normalize user-entered tag labels by removing a leading `#`, lowercasing, and replacing whitespace with hyphens. |
-| `goal`     | Recommended | Fundraising goal in **satoshis** (decimal integer). Omit if the campaign has no fixed goal.                                                                       |
-| `deadline` | Optional | Unix timestamp (seconds) at which the campaign closes. After the deadline, clients SHOULD show the campaign as ended but MAY still accept donations.              |
-| `i`        | Recommended | NIP-73 country identifier for sorting and discovery. SHOULD be `iso3166:<code>` with an uppercase ISO 3166-1 alpha-2 country code (e.g. `iso3166:VE`).              |
-| `k`        | Recommended if `i` is present | NIP-73 external content kind. For country identifiers this SHOULD be `iso3166`.                                                        |
-| `location` | Legacy | Human-readable location string used by older campaign events. New events SHOULD prefer `i` + `k` country tags. Clients MAY display this as a fallback only.          |
-| `status`   | Optional | Lifecycle status. The only defined value is `archived`, which marks the campaign closed without deleting it. Other values SHOULD be ignored. See *Closing & archiving* below. |
-| `p`        | Yes (≥1) | Recipient pubkey. The 2nd element is the hex pubkey; the 3rd (optional) is a relay hint; the 4th (optional) is a positive decimal **weight** for split allocation. |
-| `alt`      | Recommended | NIP-31 human-readable fallback.                                                                                                                                   |
+| Tag       | Required | Description                                                                                                                                                                                                                  |
+|-----------|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `d`       | Yes      | Campaign slug, unique per author. Forms the addressable coordinate `33863:<pubkey>:<d>`.                                                                                                                                     |
+| `title`   | Yes      | Display title of the campaign (plain text, max ~200 chars).                                                                                                                                                                  |
+| `w`       | Yes      | Bitcoin wallet endpoint. The 2nd element is a single bech32(m) string: a mainnet on-chain address starting with `bc1q` (P2WPKH/P2WSH) or `bc1p` (P2TR), **or** a silent-payment code starting with `sp1` per BIP-352. A campaign MUST carry at least one `w` tag and MAY carry up to two — at most one per mode (on-chain and silent payment). |
+| `summary` | Recommended | Short one-paragraph tagline shown in feed cards and previews.                                                                                                                                                              |
+| `banner`  | Recommended | HTTPS URL of the wide banner image. Clients MUST sanitize the URL (see `sanitizeUrl()` in `nostr-security`) before rendering, and SHOULD pair the URL with a NIP-92 `imeta` tag for dimensions, blurhash, MIME type, and SHA-256. |
+| `imeta`   | Recommended | NIP-92 media metadata for the banner. The first `url <value>` pair MUST match the `banner` URL; clients SHOULD ignore an `imeta` whose URL does not match.                                                                  |
+| `goal`    | Optional | Fundraising goal in **integer US Dollars** (no unit suffix, no decimals). Clients MAY display an estimated sat-equivalent at view time using a live exchange rate.                                                          |
+| `deadline`| Optional | Unix timestamp (seconds) at which the campaign closes for new donations. After the deadline, clients SHOULD show the campaign as ended but MAY still accept donations.                                                       |
+| `i`       | Recommended | NIP-73 country identifier. SHOULD be `iso3166:<code>` with an uppercase ISO 3166-1 alpha-2 country code (e.g. `iso3166:VE`).                                                                                          |
+| `k`       | Recommended if `i` is present | NIP-73 external content kind. For country identifiers this SHOULD be `iso3166`.                                                                                                              |
+| `t`       | Optional | User-entered discovery/category tags. Agora also adds `t:agora` as the app marker; other `t` values are freeform topics such as `legal-defense` or `mutual-aid`. |
+| `alt`     | Recommended | NIP-31 human-readable fallback.                                                                                                                                                                                            |
 
-### Recipient Split Rules
+### Wallet Modes
 
-When a donor sends an amount `T` in satoshis to a campaign:
+The prefix of each `w` value selects one of two donation modes. Clients MUST detect the mode from the prefix; the event carries no other mode discriminator. When a campaign carries both an on-chain and a silent-payment endpoint, the client SHOULD present a single combined QR (see "Combined QR" below) so a scan offers the donor's wallet whichever endpoint it supports, while still rendering on-chain aggregate UI from the on-chain endpoint and the silent-payment privacy notice from the silent-payment endpoint.
 
-1. Read all `p` tags from the campaign event.
-2. Parse the weight of each `p` tag from the 4th element. If absent, malformed, or non-positive, the weight defaults to **1**.
-3. Compute each recipient's share as `floor(T * weight_i / sum_of_weights)` satoshis.
-4. Any remainder from rounding (at most N−1 sats) MAY be appended to the largest share or kept by the donor as change — clients SHOULD prefer appending the remainder to the largest share so the full amount reaches the campaign.
-5. If any computed share is below the Bitcoin dust limit (546 sats for P2TR), the donor's client MUST refuse the donation and surface a minimum-amount error.
+| Prefix              | Mode      | Description                                                                                                                              |
+|---------------------|-----------|------------------------------------------------------------------------------------------------------------------------------------------|
+| `bc1q…` / `bc1p…`   | On-chain  | Public mainnet bech32(m) address. Donations are traceable; clients show a progress bar, total raised, and donation list.                |
+| `sp1…`              | Silent payment | BIP-352 silent-payment code. Donations are **unlinkable by design**. Clients MUST hide all aggregate totals and progress UI (see below). |
 
-Equal splits are the default: omit the weight on every `p` tag, and all recipients receive `floor(T / N)` sats each.
+Other prefixes (`tb1…`, `bcrt1…`, `tsp1…`, lightning invoices, etc.) MUST be rejected at parse time; the campaign does not render. A campaign carrying two `w` tags of the same mode (e.g., two `bc1…` addresses) is invalid and MUST NOT render — only one endpoint per mode is permitted.
 
-### Donation Flow
+Clients SHOULD validate the bech32(m) checksum of each `w` value, not just its prefix.
 
-1. Donor opens the campaign and chooses an amount in sats (preset or custom).
-2. Donor's client computes per-recipient amounts using the split rules above.
-3. Donor's client builds a **single PSBT** with one output per recipient (paying each recipient's derived Taproot address) plus a change output back to the donor.
-4. Donor signs the PSBT with their Nostr key (Taproot key-path spend) and broadcasts the resulting transaction.
-5. Donor's client publishes **one kind 8333 event for the whole transaction**, listing every recipient under its own `p` tag. The event MUST include:
+### Combined QR
+
+When a campaign declares both endpoints, clients SHOULD render a single BIP-21 URI that combines them:
+
+```
+bitcoin:<bc1-address>?sp=<sp1-code>
+```
+
+BIP-352-aware wallets pick the `sp=` parameter and use the silent-payment flow; legacy wallets fall back to the on-chain address. Clients MAY also surface each endpoint's raw string as a copyable affordance so donors who prefer one over the other can choose explicitly. A single-endpoint campaign uses the standard form: `bitcoin:<bc1-address>` (on-chain only) or `bitcoin:?sp=<sp1-code>` (silent payment only).
+
+### Client Behavior by Mode
+
+Each endpoint type drives its own UI elements independently. A dual-endpoint campaign shows the on-chain aggregate UI (computed from the on-chain endpoint) **and** the silent-payment privacy notice (because at least some donations may flow through the SP endpoint and not be visible in any aggregate).
+
+| UI element                  | On-chain (`bc1`) present                                        | Silent payment (`sp1`) present                        |
+|-----------------------------|-----------------------------------------------------------------|-------------------------------------------------------|
+| QR code                     | bech32(m) address in BIP-21 `bitcoin:` URI                      | SP code in BIP-21 `?sp=` extension (combined with on-chain address when both are present) |
+| "Raised X" / progress bar   | Shown, computed from cumulative `chain_stats.funded_txo_sum` on the on-chain `w` address via an Esplora endpoint (default mempool.space). Kind 8333 receipts are **not** the source of this total — donors paying the BIP-21 QR with a native wallet would otherwise be missed. | **Not contributed.** When the on-chain endpoint is absent, aggregate UI is hidden entirely. |
+| Donor / recent-donation list| Shown, populated from verified kind 8333 receipts against the on-chain address (attribution only — these do not feed the headline total). | **Not contributed.**                                   |
+| Goal display                | Shown as USD target with optional sat-equivalent estimate       | Shown as USD target; no progress computation when on-chain endpoint is absent |
+| Donation receipt published  | Donor's client publishes a kind 8333 receipt against the on-chain endpoint (see below) | **No receipt published.** Publishing one would defeat SP unlinkability and is forbidden. |
+
+For campaigns with **only** a silent-payment endpoint (no on-chain endpoint), clients MUST NOT attempt to scan the chain, MUST NOT publish receipts, and MUST NOT display any aggregate that could leak donation activity. For dual-endpoint campaigns, the on-chain aggregate UI is permitted but clients SHOULD render a privacy notice indicating that silent-payment donations are not reflected in the totals.
+
+### Donation Flow — On-chain (`bc1`)
+
+1. Donor opens the campaign and chooses an amount.
+2. Donor's client constructs and broadcasts a Bitcoin transaction paying the campaign's `w` address.
+3. After broadcast, the donor's client publishes a single kind 8333 receipt:
 
    ```json
    [
      ["i", "bitcoin:tx:<txid>"],
-     ["p", "<recipient-1-pubkey>"],
-     ["p", "<recipient-2-pubkey>"],
-     ["p", "<recipient-3-pubkey>"],
-     ["amount", "<total-sats-paid-to-all-recipients>"],
-     ["a", "30223:<campaign-author-pubkey>:<campaign-d-tag>"],
-     ["K", "30223"],
+     ["amount", "<sats-paid-to-campaign-wallet>"],
+     ["a", "33863:<campaign-author-pubkey>:<campaign-d-tag>"],
+     ["K", "33863"],
      ["alt", "Donation to <campaign-title>: <total-amount> sats"]
    ]
    ```
 
-   The `amount` tag is the sum of the outputs paying the listed recipients (i.e. the full donation, excluding the donor's change). Per-recipient amounts are not encoded in the event; clients that need them recompute them from the on-chain transaction by matching each recipient's derived Taproot address against the tx outputs.
+   The receipt MUST NOT carry `p` tags — campaigns are not Nostr-identity recipients. The `amount` tag is the sum of tx outputs paying the campaign's `w` address (excluding the donor's change output).
 
-This mirrors the community batch-zap pattern documented in the kind 8333 section above, with the campaign's addressable coordinate replacing the community coordinate.
+4. The receipt is published **after** the tx is broadcast; the txid is already final at that point. A receipt-publish failure does not roll back the donation — the on-chain transaction stands.
+
+### Donation Flow — Silent Payment (`sp1`)
+
+1. Donor opens the campaign and chooses an amount.
+2. Donor's client uses the campaign's SP code to derive a fresh, one-time Taproot output script per BIP-352.
+3. Donor broadcasts a Bitcoin transaction paying that derived output.
+4. **No Nostr event is published.** The campaign owner discovers the donation by scanning the chain locally with their SP private key.
+
+Silent-payment unlinkability is the entire point of this mode. Clients MUST NOT publish receipts, MUST NOT advertise the donation in any other Nostr event (replies, mentions, etc.) on the donor's behalf, and MUST NOT correlate the donor's pubkey with the campaign in any persisted client telemetry.
 
 ### Querying
 
 **List campaigns (newest first):**
 
 ```json
-{ "kinds": [30223], "limit": 50 }
-```
-
-**Filter by category:**
-
-```json
-{ "kinds": [30223], "#t": ["medical"], "limit": 50 }
+{ "kinds": [33863], "limit": 50 }
 ```
 
 **Fetch a specific campaign:**
 
 ```json
-{ "kinds": [30223], "authors": ["<creator-pubkey>"], "#d": ["<slug>"], "limit": 1 }
+{ "kinds": [33863], "authors": ["<creator-pubkey>"], "#d": ["<slug>"], "limit": 1 }
 ```
 
-**Aggregate donations for a campaign:**
+**Compute the "raised" total:**
+
+The headline "raised" amount for an on-chain campaign MUST be sourced **directly from the campaign's on-chain `w` address**, not by aggregating kind 8333 receipts. Specifically, clients SHOULD query a mempool.space-compatible Esplora endpoint for the address and use the cumulative `chain_stats.funded_txo_sum` (plus `mempool_stats.funded_txo_sum` if surfacing pending donations) as the total raised.
+
+This is the source of truth for three reasons:
+
+1. **Completeness.** Donors who pay the BIP-21 QR with a native wallet do not publish a kind 8333 receipt. Aggregating receipts would undercount the campaign.
+2. **Forgery resistance.** A single Esplora `GET /address/<addr>` call cannot be spoofed by Nostr publishers, whereas verifying 500+ receipts against the chain is slower and more brittle (relay availability, pagination, replay attempts).
+3. **Stability.** `funded_txo_sum` is cumulative — it does not regress when the beneficiary spends from the address.
+
+**List individual donations (for the recent-donations sidebar):**
 
 ```json
-{ "kinds": [8333], "#a": ["30223:<creator-pubkey>:<slug>"], "limit": 500 }
+{ "kinds": [8333], "#a": ["33863:<creator-pubkey>:<slug>"], "limit": 500 }
 ```
 
-Clients MUST verify each kind 8333 event on-chain before counting it toward the campaign total, per the verification rules in the kind 8333 section.
+Kind 8333 receipts are used **only** to attribute individual donations to Nostr identities (donor pubkey, comment, timestamp) — not to compute the campaign total. Clients MUST still verify each receipt on-chain per the *Campaign-wallet mode* verification rules in the kind 8333 section before displaying it.
+
+**Filter by country:**
+
+```json
+{ "kinds": [33863], "#i": ["iso3166:VE"], "limit": 50 }
+```
+
+**Fetch pinned event comments:**
+
+Event owners MAY pin important comments or activity feed events with a NIP-78 app-specific data event (`kind: 30078`) authored by the root event owner. The `d` tag is scoped to the root event coordinate. Agora uses this for campaigns (`33863`), pledges (`36639`), organizations (`34550`), and calendar events (`31922` / `31923`).
+
+```json
+{
+  "kind": 30078,
+  "pubkey": "<root-event-author-pubkey>",
+  "content": "{\"pinnedEvents\":[\"<event-id-2>\",\"<event-id-1>\"]}",
+  "tags": [
+    ["d", "agora-pinned-comments:<kind>:<root-event-author-pubkey>:<d-tag>"],
+    ["a", "<kind>:<root-event-author-pubkey>:<d-tag>"],
+    ["k", "<kind>"],
+    ["alt", "Pinned event comments"]
+  ]
+}
+```
+
+Clients SHOULD query the pin list with:
+
+```json
+{ "kinds": [30078], "authors": ["<root-event-author-pubkey>"], "#d": ["agora-pinned-comments:<kind>:<root-event-author-pubkey>:<d-tag>"], "limit": 1 }
+```
+
+The `pinnedEvents` array is ordered newest pin first. Pinning an already-pinned event removes it. Clients SHOULD ignore pin lists not authored by the root event owner.
 
 ### Client Behavior
 
-- **Recipient validity:** clients SHOULD reject `p` tag entries whose pubkey is not 64 hex characters and SHOULD ignore weights that are not positive finite decimals.
-- **Dust protection:** when a donor enters an amount that would assign any recipient less than the dust limit, the client MUST block the donation and either suggest the minimum viable total or prompt the donor to remove recipients.
-- **Editability:** the creator MAY republish the same `(kind, pubkey, d)` triple to update the campaign. Clients SHOULD keep `published_at` from the first publish on subsequent edits (NIP-23 convention).
-- **Closing & archiving:** the creator MAY soft-close a campaign by republishing it with a `["status", "archived"]` tag. Clients SHOULD hide archived campaigns from discovery feeds and disable the donate flow, but MUST keep them reachable by direct link so existing donors can still find them and donation history is preserved. The creator can reopen the campaign by republishing without the status tag (or with any other status value). For a hard delete, the creator MAY publish a NIP-09 kind 5 deletion request referencing the campaign's `a` coordinate; clients SHOULD continue to render past donations against the campaign even after deletion.
+- **Wallet validity:** clients MUST reject events that carry no `w` tag, that carry more than one `w` tag of the same mode (e.g., two `bc1…` addresses), or whose `w` values fail bech32(m) checksum validation for one of the supported prefixes. Invalid campaigns do not render.
+- **Editability:** the creator MAY republish the same `(33863, pubkey, d)` triple to update any field, including the `w` wallet endpoint. Clients SHOULD keep `published_at` from the first publish on subsequent edits (NIP-23 convention).
+- **Closing a campaign:** there is no `status` tag. To stop accepting donations, the creator publishes a NIP-09 kind 5 deletion request referencing the campaign's `a` coordinate. Clients SHOULD honor the deletion by removing the campaign from discovery feeds. Historical kind 8333 receipts MAY still be rendered against the (now-deleted) campaign coordinate so donors can find their past donations.
+- **Categories:** clients MAY use user-entered `t` tags for topic filtering and discovery. Agora reserves `t:agora` as its app marker but does not reserve any other topic namespace.
+- **Migration:** kind 33863 has no relationship to any earlier campaign kind. Clients MUST NOT read, merge, or migrate events of any other kind into the kind 33863 namespace.
 
-### Campaign Moderation Labels
+### Agora Moderation Labels
 
-Agora curates which kind 30223 campaigns appear on the homepage (`/`) and on Discover (`/discover`) via moderator-signed NIP-32 label events (kind 1985) in a dedicated label namespace. The campaign event itself is never modified — surfacing is purely a client-side rollup of label events.
+Agora curates which kind 33863 campaigns appear on the homepage (`/`) and on the Support directory (`/campaigns/all`), which kind 34550 organizations appear in the Featured shelf on `/communities`, and which kind 36639 pledges appear in the discovery surfaces on `/pledges`, via moderator-signed NIP-32 label events (kind 1985) in a dedicated label namespace. The labeled event itself is never modified — surfacing is purely a client-side rollup of label events.
+
+Campaigns, organizations, and pledges share a single label namespace and a single moderator pack (Team Soapbox); the only thing distinguishing the three streams is the kind prefix on the `a` tag of each label:
+
+- `33863:<author-pubkey>:<d>` — campaign (kind 33863, see "Open Campaigns" above).
+- `34550:<author-pubkey>:<d>` — organization (kind 34550, NIP-72 community definition).
+- `36639:<author-pubkey>:<d>` — pledge (kind 36639, see "Pledge" below).
+
+A client surfacing campaigns MUST filter folded labels to those whose `a` tag starts with `33863:`. A client surfacing organizations MUST filter to `34550:`. A client surfacing pledges MUST filter to `36639:`. Mixing the streams would let a moderator's `featured` label on a campaign appear to feature an unrelated pledge with the same `d` tag, or any other cross-surface bleed.
 
 #### Namespace
 
@@ -346,22 +521,39 @@ Each label event carries the namespace twice, per NIP-32:
 
 #### Label values
 
-Three independent axes; the newest moderator-signed label per axis per campaign wins.
+Three independent axes are defined; the newest moderator-signed label per axis per coordinate wins. **Campaigns** use all three axes (`approval`, `hide`, `featured`). **Organizations** and **pledges** use only two — `hide` and `featured` — because every Agora-tagged organization or pledge is publicly visible by default; there is no approval gate. Moderators MUST NOT publish `approved` or `unapproved` labels against kind 34550 or kind 36639 coordinates, and clients MUST ignore any such labels they receive.
 
-| Axis     | Values                    | Meaning                                                                 |
-|----------|---------------------------|-------------------------------------------------------------------------|
-| approval | `approved`, `unapproved`  | `approved` allows the campaign on `/` and Discover. `unapproved` retracts a previous approval. |
-| hide     | `hidden`, `unhidden`      | `hidden` suppresses the campaign everywhere it would otherwise appear. `unhidden` retracts a previous hide. |
-| featured | `featured`, `unfeatured`  | `featured` places the campaign in the hand-picked Featured row on `/`. `unfeatured` retracts. |
+| Axis     | Values                    | Surfaces                           | Meaning                                                                 |
+|----------|---------------------------|------------------------------------|-------------------------------------------------------------------------|
+| approval | `approved`, `unapproved`  | campaigns only                     | `approved` allows the campaign on its discovery surfaces. `unapproved` retracts a previous approval. |
+| hide     | `hidden`, `unhidden`      | campaigns, organizations, pledges  | `hidden` suppresses the target everywhere it would otherwise appear. `unhidden` retracts a previous hide. |
+| featured | `featured`, `unfeatured`  | campaigns, organizations, pledges  | `featured` places the target in a hand-picked Featured row. `unfeatured` retracts. |
 
 Surfacing rules (hide always wins):
 
+**Campaigns**
+
 - **Featured row on `/`** — iff the latest featured label is `featured` AND the latest hide label is not `hidden`. Ordered newest-`created_at`-of-`featured`-label first. Featured is independent of Approved at the protocol level; a campaign may be featured without being approved (the home page treats Featured and Approved as deduplicated bins, with Featured taking precedence).
 - **Community Campaigns grid on `/`** — iff approved, not hidden, and not featured (featured campaigns get their own row above).
 - **Discover shelf** — iff approved AND not hidden.
 - **Moderator-only "Pending"** — iff neither approved nor hidden.
 - **Moderator-only "Hidden"** — iff hidden.
 
+**Organizations**
+
+- **Featured shelf on `/communities`** — iff the latest featured label is `featured` AND the latest hide label is not `hidden`. Ordered newest-`created_at`-of-`featured`-label first.
+- **"My organizations" shelf on `/communities`** — intentionally ignores all moderation labels. A user's own founded, moderated, or followed organizations always render regardless of label state.
+- **Moderator-only "Needs review"** — iff `t:agora` AND not featured AND not hidden. Surfaces orgs minted through Agora's create flow that haven't been triaged into Featured or Hidden yet.
+- **Moderator-only "Hidden"** — iff hidden.
+- **Hide enforcement on other organization discovery surfaces** — clients SHOULD suppress `hidden` organizations from any future "All organizations" / browse surface for non-moderators. Moderators MAY see hidden organizations with a "Hidden" treatment so they can unhide.
+
+**Pledges**
+
+- **Discovery surfaces on `/pledges`** — non-moderators MUST NOT see `hidden` pledges in the active / upcoming / past sections, the search results grid, or any future browse surface. Moderators MAY opt-in to seeing hidden pledges via a Show-hidden toggle so they can unhide.
+- **Author-own surfaces** — a pledge author's own pledges in their profile always render regardless of moderation state. Moderation governs public discovery, not authorship.
+- **Direct-URL access** — a pledge's detail page (`/<naddr>`) renders regardless of moderation state. Hidden pledges remain reachable by anyone who has the link; moderation only governs which surfaces enumerate them.
+- **Featured** — reserved for a future curated pledge shelf. The `featured` axis is defined for symmetry with campaigns/organizations, and clients MAY use it when implementing such a shelf.
+
 #### Event Structure
 
 ```json
@@ -371,20 +563,48 @@ Surfacing rules (hide always wins):
   "tags": [
     ["L", "agora.moderation"],
     ["l", "approved", "agora.moderation"],
-    ["a", "30223:<author-pubkey>:<campaign-d-tag>"],
+    ["a", "33863:<author-pubkey>:<campaign-d-tag>"],
     ["alt", "Campaign moderation: approved"]
   ]
 }
 ```
 
-A `featured` label has the same shape with `["l", "featured", "agora.moderation"]` and `["alt", "Campaign moderation: featured"]`.
+An organization label has the same shape with a kind 34550 `a` tag:
+
+```json
+{
+  "kind": 1985,
+  "content": "",
+  "tags": [
+    ["L", "agora.moderation"],
+    ["l", "featured", "agora.moderation"],
+    ["a", "34550:<author-pubkey>:<organization-d-tag>"],
+    ["alt", "Organization moderation: featured"]
+  ]
+}
+```
+
+A pledge label has the same shape with a kind 36639 `a` tag:
+
+```json
+{
+  "kind": 1985,
+  "content": "",
+  "tags": [
+    ["L", "agora.moderation"],
+    ["l", "hidden", "agora.moderation"],
+    ["a", "36639:<author-pubkey>:<pledge-d-tag>"],
+    ["alt", "Pledge moderation: hidden"]
+  ]
+}
+```
 
 Required tags:
 
 - `L` set to `agora.moderation`.
 - `l` with the label value as the 2nd element and `agora.moderation` as the 3rd.
-- `a` referencing the campaign coordinate `30223:<pubkey>:<d>`.
-- `alt` (NIP-31) — clients without label support will display this string.
+- `a` referencing the target coordinate (`33863:<pubkey>:<d>` for a campaign, `34550:<pubkey>:<d>` for an organization, `36639:<pubkey>:<d>` for a pledge).
+- `alt` (NIP-31) — clients without label support will display this string. The `alt` value SHOULD identify the surface (e.g. `Campaign moderation: featured`, `Organization moderation: featured`, or `Pledge moderation: hidden`) so non-Agora clients can read it.
 
 #### Trust Model
 
@@ -396,12 +616,14 @@ pubkey:     932614571afcbad4d17a191ee281e39eebbb41b93fac8fd87829622aeb112f4d
 d-tag:      k4p5w0n22suf
 ```
 
-The pack `p` tags are the authoritative moderator list. Anyone may publish a kind 1985 event in the `agora.moderation` namespace, but events from non-pack authors are silently ignored at the relay-filter layer (`authors:` is pinned to the pack `p` tags). This means:
+The pack `p` tags are the authoritative moderator list. Clients MUST pin `authors:` on their label REQ to the pack `p` tags; events from non-pack authors MUST be ignored. This means:
 
 - Self-approval is impossible unless the pack author has added you.
-- A moderator removed from the pack immediately loses moderation authority — campaigns kept alive only by their labels return to "pending" until another moderator approves them.
+- A moderator removed from the pack immediately loses moderation authority — campaigns/organizations kept alive only by their labels return to "pending" until another moderator approves them.
 - The pack author (single signer) can reset the entire moderator roster by republishing the pack.
 
+The same moderator set governs both campaign and organization labels. Carving out per-surface moderator subsets is out of scope; clients that need that distinction would have to introduce a second follow pack and a second label namespace.
+
 #### Querying
 
 Step 1 — fetch the pack:
@@ -426,13 +648,14 @@ Step 2 — fetch label events from pack members in the namespace:
 }
 ```
 
-Step 3 — fold by `(campaign-coord, axis)`, latest-`created_at`-wins. Then fetch only the approved-and-not-hidden campaign coordinates with one filter per author (bundled in a single REQ).
+Step 3 — fold by `(coord, axis)`, latest-`created_at`-wins, filtering to the relevant kind prefix (`33863:` for campaigns or `34550:` for organizations). Then fetch the targeted events themselves — one filter per author (bundled in a single REQ) keyed by their d-tags.
 
 #### Client Behavior
 
-- Clients SHOULD render approve/hide controls only for users whose pubkey appears in the pack.
-- Clients MAY display "Hidden" badges on hidden campaigns when viewed by a moderator, and SHOULD NOT render them at all to non-moderators.
+- Clients SHOULD render approve/hide/feature controls only for users whose pubkey appears in the pack.
+- Clients MAY display "Hidden" badges on hidden campaigns/organizations when viewed by a moderator, and SHOULD NOT render them at all to non-moderators.
 - Non-moderator authors viewing the homepage SHOULD see their own pending campaigns in a separate explained section so they understand why their campaign isn't yet on the homepage. The campaign URL remains live and donatable regardless of moderation state.
+- Organization authors are not shown an equivalent "pending" surface today — organizations are visible at their NIP-19 route regardless of moderation, and the only moderation surface is the Featured shelf.
 
 ---
 
@@ -805,6 +1028,9 @@ A kind `34550` event defines the community, extending [NIP-72](https://github.co
 | `image` | No | Image URL. |
 | `a` | Yes (1) | Member badge definition reference with role marker `"member"`. |
 | `p` | No | Moderator pubkeys. The 4th element SHOULD be `"moderator"`. |
+| `i` | No | Agora extension: NIP-73 country identifier (`iso3166:XX`) for country-scoped group discovery. This is not part of NIP-72. |
+| `k` | Recommended if `i` is present | Agora extension: external content kind hint. Use `iso3166` for country identifiers. |
+| `t` | No | Agora extension: user-entered discovery/category tags. Agora also adds `t:agora` as the app marker. |
 | `relay` | No | Recommended relay URL for community content (per [NIP-72](https://github.com/nostr-protocol/nips/blob/master/72.md)). |
 | `alt` | No | [NIP-31](https://github.com/nostr-protocol/nips/blob/master/31.md) description. |
 
@@ -830,6 +1056,10 @@ The fourth element is a strict protocol marker, not a display label. Communities
     ["image", "https://example.com/clan-banner.jpg"],
     ["a", "30009:<founder-pubkey>:a1b2c3d4-...-member", "", "member"],
     ["p", "<co-moderator-pubkey>", "", "moderator"],
+    ["i", "iso3166:US"],
+    ["k", "iso3166"],
+    ["t", "local-news"],
+    ["t", "mutual-aid"],
     ["relay", "wss://relay.example.com"],
     ["alt", "Community: The Arbiter's Guard"]
   ]
@@ -1317,3 +1547,85 @@ Albums are represented as kind 34139 playlist events with a `["t", "album"]` tag
 - Albums display release date and label information when available
 - Track ordering follows the order of `a` tags in the event
 - The same detail view, playback, and commenting features apply to both albums and playlists
+
+---
+
+## Agora HD Wallet Derivation
+
+### Summary
+
+Agora's Bitcoin wallet is hierarchical-deterministic and derived from the user's Nostr secret key (`nsec`). The user backs up either the nsec or the 24-word BIP-39 mnemonic — the mnemonic is a deterministic, one-way function of the nsec, so anyone with the nsec can regenerate the mnemonic at will.
+
+This specification covers two derivation generations:
+
+- **v2 (current)** — nsec → HKDF → BIP-39 24-word mnemonic → PBKDF2 → BIP-32 master seed. The resulting mnemonic imports into any BIP-39-compatible wallet (Sparrow, Electrum, Trezor, Ledger, BlueWallet, Phoenix, …) at the standard BIP-86 / BIP-352 paths.
+- **v1 (legacy, migration-only)** — nsec used directly as the BIP-32 master seed (`HDKey.fromMasterSeed(nsec_bytes)`). v1 and v2 produce different addresses for the same nsec.
+
+### v2 Derivation
+
+The v2 pipeline turns a 32-byte nsec into a 64-byte BIP-32 master seed in three steps:
+
+```
+entropy  = HKDF-SHA256(ikm = nsec_bytes,
+                       salt = "" (default per RFC 5869),
+                       info = "agora/v1",
+                       length = 32 bytes)
+mnemonic = BIP-39 encoding of (entropy || SHA256(entropy)[0])      // 24 words
+seed     = PBKDF2-HMAC-SHA512(password = mnemonic,
+                              salt = "mnemonic",
+                              iterations = 2048,
+                              dkLen = 64)
+master   = HDKey.fromMasterSeed(seed)                              // BIP-32 root
+```
+
+The `"agora/v1"` HKDF info string is a versioning hook: changing it would derive a completely independent wallet from the same nsec. The `"mnemonic"` PBKDF2 salt is the literal BIP-39 default (no user passphrase).
+
+#### Properties
+
+- **Deterministic** — the same nsec always produces the same mnemonic, seed, and BIP-32 master.
+- **One-way** — the mnemonic is a hash of the nsec; an attacker who learns the mnemonic learns only the wallet, not the Nostr identity.
+- **Interoperable** — the resulting 24-word phrase is a standard BIP-39 mnemonic. Any BIP-39-compatible wallet can import it at the BIP-86 / BIP-352 paths and recover the same on-chain addresses.
+
+### Address Derivation
+
+Once the BIP-32 master is in hand, addresses derive at the standard paths:
+
+#### BIP-86 (Taproot single-key, key-path-only)
+
+```
+m/86'/0'/0'/<chain>/<index>
+```
+
+- `chain ∈ {0, 1}` — `0` = receive, `1` = change.
+- `index` — advanced per receive (no address reuse).
+
+Output script is P2TR with the derived x-only pubkey as `internalPubkey` (no tapscript tree).
+
+#### BIP-352 (Silent Payments)
+
+```
+m/352'/0'/0'/0'/0    // spend keypair
+m/352'/0'/0'/1'/0    // scan keypair
+```
+
+The silent-payment address (`sp1q…`) is the bech32m encoding of `(scan_pubkey || spend_pubkey)` with version `0` and HRP `sp`. The address is **static** — a user publishes one `sp1q…` and reuses it; each sender derives a fresh, unlinkable Taproot output per payment.
+
+### v1 → v2 Migration
+
+The v1 derivation (`HDKey.fromMasterSeed(nsec_bytes)`) produces a different BIP-32 master than v2 for the same nsec, so a user upgrading from v1 to v2 has funds at addresses that the v2 wallet never scans. Agora ships a one-shot migration page (`/wallet/migrate-v1`) that:
+
+1. Detects v1 funds by scanning the v1 xpub against the configured Blockbook indexer and reading the v1 silent-payment UTXO doc from the user's relays (NIP-78 d-tag `${appId}/hdwallet/sp-utxos`).
+2. If any v1 funds exist, builds a single sweep PSBT consuming every v1 BIP-86 UTXO + every v1 SP UTXO, with one output (`total − fee`) at the v2 wallet's first BIP-86 receive address.
+3. Signs every input using v1-derived keys (`HDKey.fromMasterSeed(nsec_bytes)`) and broadcasts via Blockbook.
+
+The v1 derivation code is retained indefinitely so users can migrate at any time. New scans, sends, and receives always run against v2.
+
+### NIP-78 Storage
+
+Agora stores per-wallet auxiliary state as a NIP-78 encrypted addressable event (kind 30078, NIP-44 to the user's own pubkey). The v2 d-tag suffix is `hdwallet/sp-utxos/v2`; the legacy v1 d-tag is `hdwallet/sp-utxos`. The two are independent: v2 never writes to the v1 tag, and the v1 tag is read only by the migration sweep.
+
+### Security Notes
+
+- The nsec is both the Nostr identity secret and the wallet seed source. Anyone with the nsec controls both. The 24-word mnemonic is the wallet half of that secret and is safer to share with Bitcoin-side tools (it can't impersonate the user on Nostr).
+- The wallet is gated to nsec logins. Browser-extension (NIP-07) and remote-signer (NIP-46) logins do not expose the raw secret key, so the wallet cannot derive child keys and surfaces an "unsupported" state.
+- Spend signing happens locally in the browser using the derived BIP-32 leaves. The nsec never leaves the device.

NOSTR_WEBXDC.md

@@ -1,116 +0,0 @@
-NIP-DC
-======
-
-Nostr Webxdc
-------------
-
-`draft` `optional`
-
-This NIP defines how to share and run [webxdc](https://webxdc.org/) apps over Nostr. Webxdc apps are `.xdc` (ZIP) files containing sandboxed HTML5 applications. They are attached to regular Nostr events using `imeta` tags (NIP-92), and state is coordinated through a unique identifier.
-
-This spec covers public webxdc communication only. Private communication may be addressed in a future update.
-
-## Attachment
-
-A webxdc app is attached to any event by including the `.xdc` file URL in the content and an `imeta` tag with MIME type `application/x-webxdc`.
-
-The `imeta` tag SHOULD include a `webxdc` property with a randomly generated unique string. This serves as the coordination identifier for state updates and realtime channels. If omitted, the app can still run but state won't work.
-
-```json
-{
-  "kind": 1,
-  "content": "Let's play chess! https://blossom.example.com/abc123.xdc",
-  "tags": [
-    ["imeta",
-      "url https://blossom.example.com/abc123.xdc",
-      "m application/x-webxdc",
-      "x a1b2c3d4e5f6...",
-      "webxdc 9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d"
-    ]
-  ]
-}
-```
-
-A webxdc MAY also be published as a kind `1063` (NIP-94) file metadata event:
-
-```json
-{
-  "kind": 1063,
-  "content": "A collaborative chess game. Play with friends over Nostr!",
-  "tags": [
-    ["url", "https://blossom.example.com/abc123.xdc"],
-    ["m", "application/x-webxdc"],
-    ["x", "a1b2c3d4e5f6..."],
-    ["alt", "Webxdc app: Chess"],
-    ["webxdc", "9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d"]
-  ]
-}
-```
-
-## Kind `4932`: State Update
-
-A regular event carrying a state update, mapping to the webxdc [`sendUpdate()`](https://webxdc.org/docs/spec/sendUpdate.html) API. Updates are ordered by `created_at` and assigned serial numbers by the client.
-
-### Tags
-
-- `i`: The `webxdc` identifier from the originating event (required)
-- `alt`: NIP-31 human-readable description (required)
-- `info`: Short info message, max ~50 chars (optional)
-- `document`: Document name being edited (optional)
-- `summary`: Short summary text, e.g. "8 votes" (optional)
-
-The optional tags correspond to fields in the webxdc `sendUpdate()` API.
-
-### Content
-
-JSON-serialized payload from `sendUpdate()`.
-
-```json
-{
-  "kind": 4932,
-  "content": "{\"move\":\"e2e4\",\"player\":\"white\"}",
-  "tags": [
-    ["i", "9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d"],
-    ["alt", "Webxdc update"],
-    ["info", "White played e2-e4"]
-  ]
-}
-```
-
-## Kind `20932`: Realtime Data (Ephemeral)
-
-An ephemeral event carrying realtime data, mapping to the webxdc [`joinRealtimeChannel`](https://webxdc.org/docs/spec/joinRealtimeChannel.html) API. Relays forward these to active subscribers but do not store them.
-
-### Tags
-
-- `i`: The `webxdc` identifier from the originating event (required)
-
-### Content
-
-Base64-encoded `Uint8Array` payload (max 128,000 bytes raw).
-
-```json
-{
-  "kind": 20932,
-  "content": "SGVsbG8gZnJvbSBucHViMWFiYy4uLg==",
-  "tags": [
-    ["i", "9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d"]
-  ]
-}
-```
-
-## Flow
-
-1. A user uploads a `.xdc` file (e.g. to Blossom) and publishes an event with the URL in content and an `imeta` tag. The `imeta` SHOULD include a `webxdc` property.
-2. A client detects the `imeta` tag, downloads the `.xdc`, extracts it, and runs `index.html` in a sandboxed iframe or webview.
-3. `sendUpdate()` publishes a kind `4932` event with the `webxdc` identifier in an `i` tag.
-4. The client subscribes to kind `4932` events with `#i` matching the identifier and delivers them via `setUpdateListener()`.
-5. `joinRealtimeChannel()` subscribes to kind `20932` events with `#i` matching the identifier. `send()` publishes ephemeral kind `20932` events. `leave()` closes the subscription.
-6. `selfAddr` and `selfName` MAY map to the user's npub and display name, or any other values.
-
-## Security Considerations
-
-- Webxdc apps MUST be sandboxed with no network access, per the [webxdc spec](https://webxdc.org/docs/spec/messenger.html).
-- Clients SHOULD verify the `.xdc` file hash (`x` tag) before running it.
-- All communication in this spec is public. Webxdc apps designed for private chats or small groups may not work as expected.
-- Webxdc apps have no access to Nostr signatures or identity verification. Any participant can claim to be anyone within the app. Apps should not rely on `selfAddr` or `selfName` for trust decisions.

android/app/src/main/AndroidManifest.xml

@@ -60,4 +60,6 @@
     <uses-permission android:name="android.permission.WAKE_LOCK" />
     <uses-permission android:name="android.permission.RECORD_AUDIO" />
     <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-feature android:name="android.hardware.camera" android:required="false" />
 </manifest>

index.html

@@ -9,7 +9,7 @@
     <!-- Open Graph -->
     <meta property="og:title" content="Agora" />
     <meta property="og:description" content="Power to the people." />
-    <meta property="og:image" content="https://agora.spot/og-image.png" />
+    <meta property="og:image" content="https://agora.spot/og-image.jpg" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta property="og:image:type" content="image/jpeg" />
@@ -21,9 +21,9 @@
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Agora" />
     <meta name="twitter:description" content="Power to the people." />
-    <meta name="twitter:image" content="https://agora.spot/og-image.png" />
+    <meta name="twitter:image" content="https://agora.spot/og-image.jpg" />
 
-    <meta http-equiv="content-security-policy" content="default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self' https:; base-uri 'self'; manifest-src 'self'; connect-src 'self' blob: https: wss:; img-src 'self' data: blob: https:; media-src 'self' blob: https:">
+    <meta http-equiv="content-security-policy" content="default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; worker-src 'self' blob:; child-src 'self' blob:; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self' https:; base-uri 'self'; manifest-src 'self'; connect-src 'self' blob: https: wss:; img-src 'self' data: blob: https:; media-src 'self' blob: https:">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">

ios/App/App/Info.plist

@@ -50,7 +50,7 @@
 	<key>NSPhotoLibraryUsageDescription</key>
 	<string>Agora needs access to your photo library to upload images to your posts and profile.</string>
 	<key>NSCameraUsageDescription</key>
-	<string>Agora needs camera access to take photos and videos for your posts.</string>
+	<string>Agora needs camera access to take photos and videos for your posts, and to scan QR codes when sending Bitcoin.</string>
 	<key>NSMicrophoneUsageDescription</key>
 	<string>Agora needs access to your microphone to record voice messages.</string>
 	<key>ITSAppUsesNonExemptEncryption</key>

package.json

@@ -15,7 +15,6 @@
     "node": ">=22"
   },
   "dependencies": {
-    "@bitcoinerlab/secp256k1": "^1.2.0",
     "@breeztech/breez-sdk-spark": "^0.10.0",
     "@capacitor/app": "^8.0.0",
     "@capacitor/barcode-scanner": "^3.0.2",
@@ -31,30 +30,18 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
-    "@fontsource-variable/comfortaa": "^5.2.8",
-    "@fontsource-variable/dm-sans": "^5.2.8",
     "@fontsource-variable/fredoka": "^5.2.10",
     "@fontsource-variable/inter": "^5.2.6",
-    "@fontsource-variable/jetbrains-mono": "^5.2.8",
-    "@fontsource-variable/lora": "^5.2.8",
-    "@fontsource-variable/merriweather": "^5.2.6",
-    "@fontsource-variable/montserrat": "^5.2.8",
     "@fontsource-variable/nunito": "^5.2.7",
-    "@fontsource-variable/outfit": "^5.2.8",
     "@fontsource-variable/playfair-display": "^5.2.8",
-    "@fontsource/bungee-shade": "^5.2.7",
+    "@fontsource/bebas-neue": "^5.2.7",
     "@fontsource/caveat": "^5.2.8",
-    "@fontsource/cherry-bomb-one": "^5.2.7",
-    "@fontsource/comic-neue": "^5.2.7",
-    "@fontsource/comic-relief": "^5.2.2",
-    "@fontsource/courier-prime": "^5.2.8",
     "@fontsource/creepster": "^5.2.7",
-    "@fontsource/luckiest-guy": "^5.2.8",
     "@fontsource/noto-sans-nushu": "^5.2.6",
+    "@fontsource/noto-sans-tc": "^5.2.9",
     "@fontsource/pacifico": "^5.2.7",
     "@fontsource/permanent-marker": "^5.2.7",
     "@fontsource/pirata-one": "^5.2.8",
-    "@fontsource/press-start-2p": "^5.2.7",
     "@fontsource/silkscreen": "^5.2.8",
     "@fontsource/special-elite": "^5.2.8",
     "@getalby/sdk": "^5.1.1",
@@ -78,17 +65,13 @@
     "@plausible-analytics/tracker": "^0.4.4",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
-    "@radix-ui/react-aspect-ratio": "^1.1.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
@@ -103,14 +86,15 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@scure/base": "^1.1.1",
+    "@scure/bip32": "^2.2.0",
     "@scure/bip39": "^1.6.0",
+    "@scure/btc-signer": "^2.2.0",
     "@sentry/react": "^10.42.0",
     "@tanstack/react-query": "^5.56.2",
     "@unhead/addons": "^2.1.13",
     "@unhead/react": "^2.1.13",
-    "bitcoinjs-lib": "^7.0.1",
     "blurhash": "^2.0.5",
-    "buffer": "^6.0.3",
     "capacitor-secure-storage-plugin": "^0.13.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -119,37 +103,29 @@
     "d3-scale": "^4.0.2",
     "date-fns": "^3.6.0",
     "dompurify": "^3.3.3",
-    "ecpair": "^3.0.1",
     "embla-carousel-react": "^8.3.0",
     "emoji-mart": "^5.6.0",
-    "fflate": "^0.8.2",
     "hls.js": "^1.6.15",
-    "html-to-image": "^1.11.13",
     "i18next": "^26.0.5",
     "i18next-browser-languagedetector": "^8.2.1",
     "idb": "^8.0.3",
-    "input-otp": "^1.2.4",
     "iso-3166": "^4.4.0",
-    "leaflet": "^1.9.4",
     "lucide-react": "^1.8.0",
     "nostr-tools": "^2.13.0",
+    "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.4",
     "react": "^19.2.4",
     "react-blurhash": "^0.3.0",
-    "react-day-picker": "^9.14.0",
     "react-dom": "^19.2.4",
     "react-easy-crop": "^5.5.6",
     "react-hook-form": "^7.71.1",
     "react-i18next": "^17.0.4",
     "react-intersection-observer": "^9.16.0",
-    "react-leaflet": "^4.2.1",
     "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^2.1.3",
     "react-router-dom": "^6.26.2",
     "recharts": "^2.12.7",
     "rehype-sanitize": "^6.0.0",
     "slugify": "^1.6.8",
-    "smol-toml": "^1.6.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "uri-templates": "^0.2.0",
@@ -169,14 +145,12 @@
     "@testing-library/react": "^16.3.2",
     "@types/d3-scale": "^4.0.9",
     "@types/dompurify": "^3.0.5",
-    "@types/leaflet": "^1.9.21",
     "@types/node": "^22.5.5",
     "@types/qrcode": "^1.5.5",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "@webbtc/webln-types": "^3.0.0",
-    "@webxdc/types": "^2.1.2",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",

public/manifest.webmanifest

@@ -38,56 +38,6 @@
       "purpose": "any"
     }
   ],
-  "screenshots": [
-    {
-      "src": "https://blossom.ditto.pub/47fcb3bdc414ced245fbba53b0456d9bfdf112d711ecf5cc628361a47002392a.png",
-      "sizes": "1080x1920",
-      "type": "image/png",
-      "form_factor": "narrow"
-    },
-    {
-      "src": "https://blossom.ditto.pub/e387a4c4566545c650477cee66e638131eb874a90761cf0a371e5abf1e2c7af2.png",
-      "sizes": "1080x1920",
-      "type": "image/png",
-      "form_factor": "narrow"
-    },
-    {
-      "src": "https://blossom.ditto.pub/73585c9547868da215a91f8a13543251a20967a74f6e8329231544add50e3dee.png",
-      "sizes": "1080x1920",
-      "type": "image/png",
-      "form_factor": "narrow"
-    },
-    {
-      "src": "https://blossom.ditto.pub/4216d18d5854444c64b482dbbac9e077a453f85a9d72d91bc6adf89fd1f42c36.png",
-      "sizes": "1080x1920",
-      "type": "image/png",
-      "form_factor": "narrow"
-    },
-    {
-      "src": "https://blossom.ditto.pub/a7521e652d625c57cf66fd97ea92c66b8559bcedcb805aaf375bc047415625a3.png",
-      "sizes": "1080x1920",
-      "type": "image/png",
-      "form_factor": "narrow"
-    },
-    {
-      "src": "https://blossom.ditto.pub/daf008f146391f0172b89595500f640b84eac4e146b2e081db80791819443fa0.png",
-      "sizes": "1080x1920",
-      "type": "image/png",
-      "form_factor": "narrow"
-    },
-    {
-      "src": "https://blossom.ditto.pub/22c144a792e32559a838c8f69fbb4ae22264f47ff3d04341e656748d264064bc.png",
-      "sizes": "1080x1920",
-      "type": "image/png",
-      "form_factor": "narrow"
-    },
-    {
-      "src": "https://blossom.ditto.pub/fa609e4a03e984063fbc6c474bd8a73bb088666b7c0e5561f993264f372c90ef.png",
-      "sizes": "1080x1920",
-      "type": "image/png",
-      "form_factor": "narrow"
-    }
-  ],
   "related_applications": [
     {
       "platform": "play",

public/theme.js

@@ -1,58 +1,33 @@
 // Reads the saved theme from localStorage and applies it to <html> and the
 // preloader background before first paint. Runs as a blocking <script> so
 // there's no flash of the wrong theme.
+//
+// Agora's colors are hardcoded in src/index.css via :root {} and .dark {}
+// blocks. There is no custom-theme branch; the only thing this script
+// does is set the right class on <html> and paint the preloader with the
+// matching background + primary color so the page doesn't flash white
+// in dark mode (or vice versa) before the React bundle boots.
+//
+// The colors below MUST stay in sync with the values in src/index.css.
 (function () {
-  // Builtin themes — must match builtinThemes in src/themes.ts
   var builtins = {
-    dark:  { bg: 'hsl(0 0% 10%)', primary: 'hsl(15 90% 52%)' },
-    light: { bg: 'hsl(0 0% 100%)', primary: 'hsl(15 90% 48%)' }
+    dark:  { bg: 'hsl(0 0% 10%)',  primary: 'hsl(24 100% 50%)' },
+    light: { bg: 'hsl(0 0% 100%)', primary: 'hsl(24 100% 50%)' }
   };
 
-  var theme = 'dark';
-  var colors = builtins.dark;
-  var cfg;
+  var theme = 'system';
   try {
-    cfg = JSON.parse(localStorage.getItem('nostr:app-config') || '{}');
-    if (cfg.theme) theme = cfg.theme;
+    var cfg = JSON.parse(localStorage.getItem('nostr:app-config') || '{}');
+    if (cfg.theme === 'dark' || cfg.theme === 'light' || cfg.theme === 'system') {
+      theme = cfg.theme;
+    }
   } catch (e) {}
 
-  // Resolve "system" to light or dark based on OS preference
   if (theme === 'system') {
     theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
 
-  if (theme === 'custom') {
-    // Custom theme: read colors from customTheme.colors (ThemeConfig format)
-    try {
-      var ct = cfg && cfg.customTheme;
-      if (ct && ct.colors) {
-        var bg = ct.colors.background;
-        var pr = ct.colors.primary;
-        if (bg && pr) {
-          colors = { bg: 'hsl(' + bg + ')', primary: 'hsl(' + pr + ')' };
-        }
-      }
-    } catch (e) {}
-  } else if (theme === 'light' || theme === 'dark') {
-    // Check for configured theme overrides (ThemesConfig in cfg.themes)
-    try {
-      var themes = cfg && cfg.themes;
-      if (themes && themes[theme] && themes[theme].colors) {
-        var tc = themes[theme].colors;
-        if (tc.background && tc.primary) {
-          colors = { bg: 'hsl(' + tc.background + ')', primary: 'hsl(' + tc.primary + ')' };
-        } else {
-          colors = builtins[theme];
-        }
-      } else {
-        colors = builtins[theme];
-      }
-    } catch (e) {
-      colors = builtins[theme];
-    }
-  } else {
-    colors = builtins.dark;
-  }
+  var colors = builtins[theme] || builtins.dark;
 
   document.documentElement.className = theme;
   document.body.style.background = colors.bg;

scripts/derive_vectors.mjs

@@ -0,0 +1,50 @@
+import { hkdf } from '@noble/hashes/hkdf.js';
+import { sha256 } from '@noble/hashes/sha2.js';
+import { entropyToMnemonic, mnemonicToSeedSync } from '@scure/bip39';
+import { wordlist } from '@scure/bip39/wordlists/english';
+import { HDKey } from '@scure/bip32';
+import { bech32m, hex } from '@scure/base';
+import * as btc from '@scure/btc-signer';
+
+// Test vector 1: all-zero nsec
+const nsec1 = new Uint8Array(32);
+
+// Test vector 2: nsec from a deterministic source — all 0x01s
+const nsec2 = new Uint8Array(32).fill(0x01);
+
+// Test vector 3: an actual realistic nsec
+const nsec3 = hex.decode('67dea2ed018072d675f5415ecfaed7d2597555e202d85b3d65ea4e58d2d92ffa');
+
+function deriveAll(nsec, label) {
+  const entropy = hkdf(sha256, nsec, undefined, 'agora/v1', 32);
+  const mnemonic = entropyToMnemonic(entropy, wordlist);
+  const seed = mnemonicToSeedSync(mnemonic);
+  const root = HDKey.fromMasterSeed(seed);
+  const account = root.derive("m/86'/0'/0'");
+  const receive0 = account.deriveChild(0).deriveChild(0);
+  const xonly = receive0.publicKey.slice(1, 33);
+  const { address } = btc.p2tr(xonly, undefined, btc.NETWORK);
+
+  const spendNode = root.derive("m/352'/0'/0'/0'/0");
+  const scanNode = root.derive("m/352'/0'/0'/1'/0");
+  const spendPub = spendNode.publicKey;
+  const scanPub = scanNode.publicKey;
+  const payload = new Uint8Array(66);
+  payload.set(scanPub, 0);
+  payload.set(spendPub, 33);
+  const words = [0, ...bech32m.toWords(payload)];
+  const spAddress = bech32m.encode('sp', words, 1023);
+
+  console.log(`\n--- ${label} ---`);
+  console.log(`nsec hex:  ${hex.encode(nsec)}`);
+  console.log(`entropy:   ${hex.encode(entropy)}`);
+  console.log(`mnemonic:  ${mnemonic}`);
+  console.log(`seed:      ${hex.encode(seed)}`);
+  console.log(`xpub:      ${account.publicExtendedKey}`);
+  console.log(`addr 0/0:  ${address}`);
+  console.log(`sp addr:   ${spAddress}`);
+}
+
+deriveAll(nsec1, 'all-zero nsec');
+deriveAll(nsec2, 'all-0x01 nsec');
+deriveAll(nsec3, 'realistic nsec');

scripts/generate-favicons.sh

@@ -0,0 +1,113 @@
+#!/bin/bash
+# Regenerate the web tab favicon assets from public/logo.svg.
+#
+# Why this script exists:
+#   The 16x16 favicon edge antialiasing must survive small-size rendering.
+#   Saving as palette/indexed PNG or 8bpp ICO bakes the editor's background
+#   into the antialiased edge pixels, producing the "ugly outline" halo
+#   you see in browser tab strips. We render at high resolution, downsample
+#   with Lanczos, and force full 32-bit RGBA output.
+#
+# Outputs (overwrites in place):
+#   public/favicon-16.png       — 16x16 RGBA
+#   public/favicon-32.png       — 32x32 RGBA
+#   public/favicon.ico          — multi-size ICO, every frame 32bpp
+#   public/apple-touch-icon.png — 180x180 RGBA
+set -e
+
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m'
+
+# Pick an SVG renderer (inkscape preferred, rsvg-convert fallback)
+if command -v inkscape &> /dev/null; then
+    SVG_RENDERER="inkscape"
+elif command -v rsvg-convert &> /dev/null; then
+    SVG_RENDERER="rsvg"
+else
+    echo -e "${YELLOW}Error: install inkscape or rsvg-convert.${NC}" >&2
+    exit 1
+fi
+
+# ImageMagick: v7 uses `magick`, v6 uses `convert`.
+if command -v magick &> /dev/null; then
+    MAGICK="magick"
+elif command -v convert &> /dev/null; then
+    MAGICK="convert"
+else
+    echo -e "${YELLOW}Error: install ImageMagick.${NC}" >&2
+    exit 1
+fi
+
+SOURCE_SVG="public/logo.svg"
+if [ ! -f "$SOURCE_SVG" ]; then
+    echo -e "${YELLOW}Error: $SOURCE_SVG not found.${NC}" >&2
+    exit 1
+fi
+
+# Agora brand orange. Keep in sync with the preloader / theme.
+LOGO_COLOR="#FF6600"
+
+TMPDIR=$(mktemp -d)
+trap 'rm -rf "$TMPDIR"' EXIT
+
+COLORED_SVG="$TMPDIR/logo_colored.svg"
+RAW_PNG="$TMPDIR/raw.png"
+MASTER_PNG="$TMPDIR/master.png"
+
+# Recolor the SVG's black fill to the brand color, on transparent background.
+sed 's/fill="black"/fill="'"$LOGO_COLOR"'"/g' "$SOURCE_SVG" > "$COLORED_SVG"
+
+# The SVG's viewBox is 720x880 (taller than wide). Render at its native
+# aspect ratio first so we don't squish the logo horizontally.
+MASTER_BOX=512        # final square canvas size
+MASTER_H=$MASTER_BOX  # render the longer side at full size
+MASTER_W=$(( MASTER_BOX * 720 / 880 ))  # preserve 720:880 aspect
+
+echo "Rendering ${MASTER_W}x${MASTER_H} from $SOURCE_SVG (preserving 720:880 aspect)..."
+if [ "$SVG_RENDERER" = "inkscape" ]; then
+    inkscape --export-type=png --export-filename="$RAW_PNG" \
+        -w "$MASTER_W" -h "$MASTER_H" --export-background-opacity=0 \
+        "$COLORED_SVG" 2>/dev/null
+else
+    rsvg-convert -w "$MASTER_W" -h "$MASTER_H" -b none "$COLORED_SVG" -o "$RAW_PNG"
+fi
+
+# Centre the rendered logo on a transparent square canvas so downstream
+# square targets (favicons, apple-touch-icon) don't restretch it.
+$MAGICK -size "${MASTER_BOX}x${MASTER_BOX}" "xc:none" \
+    "$RAW_PNG" -gravity center -compose over -composite \
+    "$MASTER_PNG"
+
+# Downsample to a target size with a quality filter, forcing RGBA output.
+# `png:color-type=6` is PNG RGBA (8 bits per channel, with alpha).
+# `-strip` removes metadata to keep files small.
+render_png() {
+    local size=$1
+    local dest=$2
+    $MAGICK "$MASTER_PNG" \
+        -filter Lanczos \
+        -resize "${size}x${size}" \
+        -background none -alpha on \
+        -define png:color-type=6 \
+        -strip \
+        "$dest"
+    echo -e "  ${GREEN}✓${NC} $dest ($(file -b "$dest" | head -c 80))"
+}
+
+echo "Generating PNG variants..."
+render_png 16 public/favicon-16.png
+render_png 32 public/favicon-32.png
+render_png 180 public/apple-touch-icon.png
+
+# Multi-size ICO. Building from the high-res master with auto-resize keeps
+# every frame 32bpp RGBA. Verified with `file public/favicon.ico`.
+echo "Generating multi-size favicon.ico (16, 32, 48)..."
+$MAGICK "$MASTER_PNG" \
+    -filter Lanczos \
+    -background none -alpha on \
+    -define icon:auto-resize=16,32,48 \
+    public/favicon.ico
+echo -e "  ${GREEN}✓${NC} public/favicon.ico ($(file -b public/favicon.ico | head -c 120))"
+
+echo -e "\n${GREEN}Favicons regenerated.${NC}"

src/App.tsx

@@ -18,6 +18,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { useNsecPasteGuard } from "@/hooks/useNsecPasteGuard";
 import type { AppConfig } from "@/contexts/AppContext";
 import { NWCProvider } from "@/contexts/NWCContext";
+import { OnboardingProvider } from "@/contexts/OnboardingProvider";
 import { BuildConfigSchema, type BuildConfig } from "@/lib/schemas";
 import { secureStorage } from "@/lib/secureStorage";
 import AppRouter from "./AppRouter";
@@ -43,7 +44,6 @@ const hardcodedConfig: AppConfig = {
   shareOrigin: import.meta.env.VITE_SHARE_ORIGIN || undefined,
   homePage: "campaigns",
   client: "naddr1qvzqqqru7cpzq7q6z5ns2hm5c8msyv83qwzxpxe52j8c4d4q5m92wsp9sflelkh9qqzkg6t5w3hswjl4yp",
-  magicMouse: false,
   theme: "system",
   useAppRelays: true,
   useUserRelays: false,
@@ -57,48 +57,46 @@ const hardcodedConfig: AppConfig = {
     feedIncludeReposts: true,
     feedIncludeGenericReposts: true,
     feedIncludeReactions: false,
-    feedIncludeZaps: false,
+    feedIncludeZaps: true,
     feedIncludeArticles: true,
     showArticles: true,
     showHighlights: true,
-    feedIncludeHighlights: false,
+    feedIncludeHighlights: true,
     showEvents: true,
     feedIncludeEvents: true,
-    showVines: true,
+    showVines: false,
     showPolls: true,
-    showTreasures: true,
-    showTreasureGeocaches: true,
-    showTreasureFoundLogs: true,
-    showColors: true,
+    showTreasures: false,
+    showTreasureGeocaches: false,
+    showTreasureFoundLogs: false,
+    showColors: false,
     showPeopleLists: true,
-    feedIncludeVines: true,
+    feedIncludeVines: false,
     feedIncludePolls: true,
-    feedIncludeTreasureGeocaches: true,
-    feedIncludeTreasureFoundLogs: true,
-    feedIncludeColors: true,
+    feedIncludeTreasureGeocaches: false,
+    feedIncludeTreasureFoundLogs: false,
+    feedIncludeColors: false,
     feedIncludePeopleLists: true,
-    showDecks: true,
-    feedIncludeDecks: true,
-    showWebxdc: true,
-    feedIncludeWebxdc: true,
+    showDecks: false,
+    feedIncludeDecks: false,
     showPhotos: true,
     feedIncludePhotos: true,
     showVideos: true,
     feedIncludeNormalVideos: true,
     feedIncludeShortVideos: true,
     feedIncludeVoiceMessages: true,
-    showEmojiPacks: true,
-    feedIncludeEmojiPacks: true,
-    showCustomEmojis: true,
-    showUserStatuses: true,
-    showMusic: true,
-    feedIncludeMusicTracks: true,
-    feedIncludeMusicPlaylists: true,
-    showPodcasts: true,
-    feedIncludePodcastEpisodes: true,
-    feedIncludePodcastTrailers: true,
-    showDevelopment: true,
-    feedIncludeDevelopment: true,
+    showEmojiPacks: false,
+    feedIncludeEmojiPacks: false,
+    showCustomEmojis: false,
+    showUserStatuses: false,
+    showMusic: false,
+    feedIncludeMusicTracks: false,
+    feedIncludeMusicPlaylists: false,
+    showPodcasts: false,
+    feedIncludePodcastEpisodes: false,
+    feedIncludePodcastTrailers: false,
+    showDevelopment: false,
+    feedIncludeDevelopment: false,
     showCommunities: true,
     feedIncludeCommunities: true,
     showBadges: true,
@@ -109,10 +107,10 @@ const hardcodedConfig: AppConfig = {
     feedIncludeProfileBadges: true,
     feedIncludeBadgeAwards: true,
     feedIncludeVanish: true,
-    showBirdstar: true,
-    feedIncludeBirdDetections: true,
-    feedIncludeBirdex: true,
-    feedIncludeConstellations: true,
+    showBirdstar: false,
+    feedIncludeBirdDetections: false,
+    feedIncludeBirdex: false,
+    feedIncludeConstellations: false,
     followsFeedShowReplies: true,
   },
   sidebarOrder: [
@@ -145,9 +143,16 @@ const hardcodedConfig: AppConfig = {
   savedFeeds: [],
   autoplayVideos: false,
   imageQuality: 'compressed',
+  imageProxy: 'https://wsrv.nl',
+  lowBandwidthMode: false,
   curatorPubkey: '932614571afcbad4d17a191ee281e39eebbb41b93fac8fd87829622aeb112f4d',
-  sandboxDomain: 'iframe.diy',
-  esploraBaseUrl: 'https://mempool.space/api',
+  esploraApis: [
+    'https://mempool.emzy.de/api',
+    'https://mempool.space/api',
+    'https://blockstream.info/api',
+  ],
+  blockbookBaseUrl: 'https://btc.trezor.io',
+  bip352IndexerUrl: 'https://silentpayments.dev/blindbit/mainnet',
   sidebarWidgets: [
     { id: 'trends' },
     { id: 'hot-posts' },
@@ -203,9 +208,11 @@ export function App() {
                   <NativeNotifications />
 
                     <NWCProvider>
-                      <TooltipProvider>
-                        <AppRouter />
-                      </TooltipProvider>
+                      <OnboardingProvider>
+                        <TooltipProvider>
+                          <AppRouter />
+                        </TooltipProvider>
+                      </OnboardingProvider>
                   </NWCProvider>
                 </NostrProvider>
               </NostrLoginProvider>

src/AppRouter.tsx

@@ -1,32 +1,23 @@
-import { lazy, Suspense, useState } from "react";
-import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
-import { AudioNavigationGuard } from "@/components/AudioNavigationGuard";
-import { DeepLinkHandler } from "@/components/DeepLinkHandler";
-import { MinimizedAudioBar } from "@/components/MinimizedAudioBar";
-import { AudioPlayerProvider } from "@/contexts/AudioPlayerContext";
-import { sidebarItemIcon } from "@/lib/sidebarItems";
+import { lazy, Suspense } from "react";
+import { BrowserRouter, Link, Navigate, Outlet, Route, Routes } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Loader2 } from "lucide-react";
 import { Toaster } from "./components/ui/toaster";
-import { FundraiserLayout } from "./components/FundraiserLayout";
+import { TopNav } from "./components/TopNav";
+import { OnboardingGate } from "./components/OnboardingGate";
 import { ScrollToTop } from "./components/ScrollToTop";
 import { VersionCheck } from "./components/VersionCheck";
 import { useCurrentUser } from "./hooks/useCurrentUser";
 import { useProfileUrl } from "./hooks/useProfileUrl";
-import { getExtraKindDef } from "./lib/extraKinds";
+import { cn } from "@/lib/utils";
+import { openUrl } from "@/lib/downloadFile";
 
 // Critical-path pages: eagerly loaded (landing + fallback)
 import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
-import MessagesPage from "./pages/Messages";
-
-// Lazy-loaded compose modal (pulls in emoji-mart ~620K)
-const ReplyComposeModal = lazy(() => import("@/components/ReplyComposeModal").then(m => ({ default: m.ReplyComposeModal })));
-
-// Lazy-loaded emoji pack dialog
-const EmojiPackDialog = lazy(() => import("@/components/EmojiPackDialog").then(m => ({ default: m.EmojiPackDialog })));
 
 // Campaigns: home + create. (Campaign detail is dispatched from NIP19Page
-// when an naddr resolves to kind 30223.) The campaigns list IS the homepage;
-// the configurable HomePage delegation from the Twitter-era app is gone.
+// when an naddr resolves to kind 33863.)
 const CampaignsPage = lazy(() => import("./pages/CampaignsPage").then(m => ({ default: m.CampaignsPage })));
 const CreateCampaignPage = lazy(() => import("./pages/CreateCampaignPage").then(m => ({ default: m.CreateCampaignPage })));
 const AllCampaignsPage = lazy(() => import("./pages/AllCampaignsPage").then(m => ({ default: m.AllCampaignsPage })));
@@ -35,115 +26,38 @@ const AllCampaignsPage = lazy(() => import("./pages/AllCampaignsPage").then(m =>
 const ActionsPage = lazy(() => import("./pages/ActionsPage"));
 const CreateActionPage = lazy(() => import("./pages/CreateActionPage").then(m => ({ default: m.CreateActionPage })));
 const AdvancedSettingsPage = lazy(() => import("./pages/AdvancedSettingsPage").then(m => ({ default: m.AdvancedSettingsPage })));
-const AIChatPage = lazy(() => import("./pages/AIChatPage").then(m => ({ default: m.AIChatPage })));
 const AppearanceSettingsPage = lazy(() => import("./pages/AppearanceSettingsPage").then(m => ({ default: m.AppearanceSettingsPage })));
-const ArchivePage = lazy(() => import("./pages/ArchivePage").then(m => ({ default: m.ArchivePage })));
-const ArticleEditorPage = lazy(() => import("./pages/ArticleEditorPage").then(m => ({ default: m.ArticleEditorPage })));
-const BadgesPage = lazy(() => import("./pages/BadgesPage").then(m => ({ default: m.BadgesPage })));
-const BlueskyPage = lazy(() => import("./pages/BlueskyPage").then(m => ({ default: m.BlueskyPage })));
-const BookmarksPage = lazy(() => import("./pages/BookmarksPage").then(m => ({ default: m.BookmarksPage })));
-const BooksPage = lazy(() => import("./pages/BooksPage").then(m => ({ default: m.BooksPage })));
 const ChangelogPage = lazy(() => import("./pages/ChangelogPage").then(m => ({ default: m.ChangelogPage })));
 const CommunitiesPage = lazy(() => import("./pages/CommunitiesPage").then(m => ({ default: m.CommunitiesPage })));
 const CreateCommunityPage = lazy(() => import("./pages/CreateCommunityPage").then(m => ({ default: m.CreateCommunityPage })));
 const CreateEventPage = lazy(() => import("./pages/CreateEventPage").then(m => ({ default: m.CreateEventPage })));
-const ContentPage = lazy(() => import("./pages/ContentPage").then(m => ({ default: m.ContentPage })));
-const ContentSettingsPage = lazy(() => import("./pages/ContentSettingsPage").then(m => ({ default: m.ContentSettingsPage })));
 const CSAEPolicyPage = lazy(() => import("./pages/CSAEPolicyPage").then(m => ({ default: m.CSAEPolicyPage })));
-const DiscoverPage = lazy(() => import("./pages/DiscoverPage").then(m => ({ default: m.DiscoverPage })));
-const DomainFeedPage = lazy(() => import("./pages/DomainFeedPage").then(m => ({ default: m.DomainFeedPage })));
-const EventsFeedPage = lazy(() => import("./pages/EventsFeedPage").then(m => ({ default: m.EventsFeedPage })));
 const ExternalContentPage = lazy(() => import("./pages/ExternalContentPage").then(m => ({ default: m.ExternalContentPage })));
 const GeotagPage = lazy(() => import("./pages/GeotagPage").then(m => ({ default: m.GeotagPage })));
 const HashtagPage = lazy(() => import("./pages/HashtagPage").then(m => ({ default: m.HashtagPage })));
-const HelpPage = lazy(() => import("./pages/HelpPage").then(m => ({ default: m.HelpPage })));
+const MyDashboardPage = lazy(() => import("./pages/MyDashboardPage").then(m => ({ default: m.MyDashboardPage })));
+const AboutPage = lazy(() => import("./pages/AboutPage").then(m => ({ default: m.AboutPage })));
 const DonorGuidePage = lazy(() => import("./pages/DonorGuidePage").then(m => ({ default: m.DonorGuidePage })));
 const ActivistGuidePage = lazy(() => import("./pages/ActivistGuidePage").then(m => ({ default: m.ActivistGuidePage })));
-const KindFeedPage = lazy(() => import("./pages/KindFeedPage").then(m => ({ default: m.KindFeedPage })));
-const LetterComposePage = lazy(() => import("./pages/LetterComposePage").then(m => ({ default: m.LetterComposePage })));
-const LetterPreferencesPage = lazy(() => import("./pages/LetterPreferencesPage").then(m => ({ default: m.LetterPreferencesPage })));
-const LettersPage = lazy(() => import("./pages/LettersPage").then(m => ({ default: m.LettersPage })));
-const MagicSettingsPage = lazy(() => import("./pages/MagicSettingsPage").then(m => ({ default: m.MagicSettingsPage })));
-const MusicPage = lazy(() => import("./pages/MusicPage").then(m => ({ default: m.MusicPage })));
+const LanguageSettingsPage = lazy(() => import("./pages/LanguageSettingsPage").then(m => ({ default: m.LanguageSettingsPage })));
 const NetworkSettingsPage = lazy(() => import("./pages/NetworkSettingsPage").then(m => ({ default: m.NetworkSettingsPage })));
 const NIP19Page = lazy(() => import("./pages/NIP19Page").then(m => ({ default: m.NIP19Page })));
 const NotificationSettings = lazy(() => import("./pages/NotificationSettings").then(m => ({ default: m.NotificationSettings })));
 const NotificationsPage = lazy(() => import("./pages/NotificationsPage").then(m => ({ default: m.NotificationsPage })));
 const OrganizersPage = lazy(() => import("./pages/OrganizersPage").then(m => ({ default: m.OrganizersPage })));
 const EventDashboardPage = lazy(() => import("./pages/EventDashboardPage").then(m => ({ default: m.EventDashboardPage })));
-const PhotosFeedPage = lazy(() => import("./pages/PhotosFeedPage").then(m => ({ default: m.PhotosFeedPage })));
-const PodcastsFeedPage = lazy(() => import("./pages/PodcastsFeedPage").then(m => ({ default: m.PodcastsFeedPage })));
 const PrivacyPolicyPage = lazy(() => import("./pages/PrivacyPolicyPage").then(m => ({ default: m.PrivacyPolicyPage })));
 const ProfileSettings = lazy(() => import("./pages/ProfileSettings").then(m => ({ default: m.ProfileSettings })));
-const RelayPage = lazy(() => import("./pages/RelayPage").then(m => ({ default: m.RelayPage })));
 const SearchPage = lazy(() => import("./pages/SearchPage").then(m => ({ default: m.SearchPage })));
 const SettingsPage = lazy(() => import("./pages/SettingsPage").then(m => ({ default: m.SettingsPage })));
-const TreasuresPage = lazy(() => import("./pages/TreasuresPage").then(m => ({ default: m.TreasuresPage })));
-const TrendsPage = lazy(() => import("./pages/TrendsPage").then(m => ({ default: m.TrendsPage })));
-const UserListsPage = lazy(() => import("./pages/UserListsPage").then(m => ({ default: m.UserListsPage })));
-const VerifiedPage = lazy(() => import("./pages/VerifiedPage").then(m => ({ default: m.VerifiedPage })));
-const VideosFeedPage = lazy(() => import("./pages/VideosFeedPage").then(m => ({ default: m.VideosFeedPage })));
-const VinesFeedPage = lazy(() => import("./pages/VinesFeedPage").then(m => ({ default: m.VinesFeedPage })));
 const WalletPage = lazy(() => import("./pages/WalletPage").then(m => ({ default: m.WalletPage })));
+const WalletMigrateV1Page = lazy(() => import("./pages/WalletMigrateV1Page").then(m => ({ default: m.WalletMigrateV1Page })));
+const WalletDoubleTweakFixPage = lazy(() => import("./pages/WalletDoubleTweakFixPage").then(m => ({ default: m.WalletDoubleTweakFixPage })));
 const WalletRecoveryPage = lazy(() => import("./pages/WalletRecoveryPage").then(m => ({ default: m.WalletRecoveryPage })));
 const WalletSettingsPage = lazy(() => import("./pages/WalletSettingsPage").then(m => ({ default: m.WalletSettingsPage })));
-const WebxdcFeedPage = lazy(() => import("./pages/WebxdcFeedPage").then(m => ({ default: m.WebxdcFeedPage })));
-const WikipediaPage = lazy(() => import("./pages/WikipediaPage").then(m => ({ default: m.WikipediaPage })));
-const WorldPage = lazy(() => import("./pages/WorldPage").then(m => ({ default: m.WorldPage })));
-const FollowPage = lazy(() => import("./pages/FollowPage").then(m => ({ default: m.FollowPage })));
-const ReceivePage = lazy(() => import("./pages/ReceivePage").then(m => ({ default: m.ReceivePage })));
-const ClaimPage = lazy(() => import("./pages/ClaimPage").then(m => ({ default: m.ClaimPage })));
+const LegacyWalletRecoveryPage = lazy(() => import("./pages/LegacyWalletRecoveryPage").then(m => ({ default: m.LegacyWalletRecoveryPage })));
 const RemoteLoginSuccessPage = lazy(() => import("./pages/RemoteLoginSuccessPage").then(m => ({ default: m.RemoteLoginSuccessPage })));
 
-const pollsDef = getExtraKindDef("polls")!;
-const colorsDef = getExtraKindDef("colors")!;
-const packsDef = getExtraKindDef("packs")!;
-const articlesDef = getExtraKindDef("articles")!;
-const decksDef = getExtraKindDef("decks")!;
-const emojisDef = getExtraKindDef("emojis")!;
-const developmentDef = getExtraKindDef("development")!;
-const highlightsDef = getExtraKindDef("highlights")!;
-
-/** Polls feed page with a FAB that opens the compose modal (poll mode via + menu). */
-function PollsFeedPage() {
-  const [composeOpen, setComposeOpen] = useState(false);
-  return (
-    <>
-      <KindFeedPage
-        kind={pollsDef.kind}
-        title={pollsDef.label}
-        icon={sidebarItemIcon("polls", "size-5")}
-        onFabClick={() => setComposeOpen(true)}
-      />
-      {composeOpen && (
-        <Suspense fallback={null}>
-          <ReplyComposeModal open={composeOpen} onOpenChange={setComposeOpen} initialMode="poll" />
-        </Suspense>
-      )}
-    </>
-  );
-}
-
-/** Emoji feed page with a FAB that opens the emoji pack creation dialog. */
-function EmojiFeedPage() {
-  const [composeOpen, setComposeOpen] = useState(false);
-  return (
-    <>
-      <KindFeedPage
-        kind={emojisDef.kind}
-        title={emojisDef.label}
-        icon={sidebarItemIcon("emojis", "size-5")}
-        onFabClick={() => setComposeOpen(true)}
-      />
-      {composeOpen && (
-        <Suspense fallback={null}>
-          <EmojiPackDialog open={composeOpen} onOpenChange={setComposeOpen} />
-        </Suspense>
-      )}
-    </>
-  );
-}
-
 /** Redirects /profile to the user's canonical profile URL (nip05 or npub). */
 function ProfileRedirect() {
   const { user, metadata } = useCurrentUser();
@@ -152,187 +66,154 @@ function ProfileRedirect() {
   return <Navigate to={profileUrl} replace />;
 }
 
+function PageSkeleton() {
+  // Shown briefly while a route's lazy chunk is being fetched. A skeleton
+  // tuned to one page's shape (`max-w-6xl` with hero + paragraph blocks)
+  // ends up wrong-shaped on every other page — narrow settings pages,
+  // small wallet screens, etc. A neutral centered spinner is honest about
+  // "loading" without misleading the eye with content-shaped boxes that
+  // never appear.
+  return (
+    <div className="flex items-center justify-center py-24">
+      <Loader2 className="size-6 animate-spin text-muted-foreground" />
+    </div>
+  );
+}
+
+function SiteFooter() {
+  const { t } = useTranslation();
+  return (
+    <footer className="bg-background mt-auto pt-12">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 py-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-muted-foreground">
+        <button
+          type="button"
+          onClick={() => void openUrl("https://gitlab.com/soapbox-pub/agora")}
+          className="hover:text-foreground motion-safe:transition-colors"
+        >
+          {t('nav.sourceCode')}
+        </button>
+        <nav className="flex items-center gap-5">
+          <Link to="/about" className="hover:text-foreground motion-safe:transition-colors">{t('nav.about')}</Link>
+          <Link to="/privacy" className="hover:text-foreground motion-safe:transition-colors">{t('nav.privacy')}</Link>
+          <Link to="/safety" className="hover:text-foreground motion-safe:transition-colors">{t('nav.safety')}</Link>
+          <Link to="/changelog" className="hover:text-foreground motion-safe:transition-colors">{t('nav.changelog')}</Link>
+        </nav>
+      </div>
+    </footer>
+  );
+}
+
+/**
+ * Persistent app shell. GoFundMe-style top-nav-only chrome wrapping the route
+ * outlet. The width of the center column is decided by the layout variant
+ * picked in the route tree below — narrow (default, `max-w-3xl`) for
+ * form/prose-style pages, wide (full width) for landing / dashboard / detail
+ * pages that render their own internal layout.
+ */
+function FundraiserLayout({ narrow }: { narrow: boolean }) {
+  return (
+    <div className="min-h-dvh flex flex-col bg-background">
+      <TopNav />
+      <Suspense fallback={<PageSkeleton />}>
+        <div
+          className={cn("flex-1 min-w-0 w-full mx-auto", narrow && "max-w-3xl")}
+        >
+          <Outlet />
+        </div>
+      </Suspense>
+      <SiteFooter />
+    </div>
+  );
+}
+
 export function AppRouter() {
   return (
-    <AudioPlayerProvider>
-      <BrowserRouter>
-        <Toaster />
-        <VersionCheck />
-        <MinimizedAudioBar />
-        <AudioNavigationGuard />
-        <DeepLinkHandler />
-        <ScrollToTop />
+    <BrowserRouter>
+      <Toaster />
+      <VersionCheck />
+      <ScrollToTop />
+      <OnboardingGate>
         <Routes>
-          {/* Auto-follow deep link: fullscreen immersive (no sidebars/nav) */}
-          <Route path="/follow/:npub" element={<FollowPage />} />
-          <Route path="/receive" element={<ReceivePage />} />
-          <Route path="/claim" element={<ClaimPage />} />
+        {/* Narrow layout — `max-w-3xl` center column. The default for
+            form/prose-style pages. */}
+        <Route element={<FundraiserLayout narrow />}>
+          <Route path="/feed" element={<Index />} />
+          <Route path="/my-dashboard" element={<MyDashboardPage />} />
+          <Route path="/notifications" element={<NotificationsPage />} />
+          <Route path="/search" element={<SearchPage />} />
+          <Route path="/profile" element={<ProfileRedirect />} />
+          <Route path="/t/:tag" element={<HashtagPage />} />
+          <Route path="/g/:geohash" element={<GeotagPage />} />
+          <Route path="/settings" element={<SettingsPage />} />
+          <Route path="/settings/appearance" element={<AppearanceSettingsPage />} />
+          <Route path="/settings/language" element={<LanguageSettingsPage />} />
+          <Route path="/settings/profile" element={<ProfileSettings />} />
+          <Route path="/settings/wallet" element={<WalletSettingsPage />} />
+          <Route path="/settings/notifications" element={<NotificationSettings />} />
+          <Route path="/settings/advanced" element={<AdvancedSettingsPage />} />
+          <Route path="/settings/network" element={<NetworkSettingsPage />} />
+          <Route path="/wallet" element={<WalletPage />} />
+          <Route path="/wallet/legacy" element={<LegacyWalletRecoveryPage />} />
+          {/* Old nested paths kept as redirects so any existing links / muscle
+              memory still land on the right page. `/wallet/settings` was an
+              intermediate hub that has been replaced by an overflow menu on
+              `/wallet`, so it redirects to the wallet home. `/wallet/backup`
+              is now an in-page dialog opened from that menu, so it also
+              redirects home. */}
+          <Route path="/wallet/settings" element={<Navigate to="/wallet" replace />} />
+          <Route path="/wallet/backup" element={<Navigate to="/wallet" replace />} />
+          <Route path="/wallet/settings/backup" element={<Navigate to="/wallet" replace />} />
+          <Route path="/wallet/settings/legacy" element={<Navigate to="/wallet/legacy" replace />} />
+          <Route path="/wallet/recovery" element={<WalletRecoveryPage />} />
+          <Route path="/wallet/migrate-v1" element={<WalletMigrateV1Page />} />
+          <Route path="/wallet/double-tweak-fix" element={<WalletDoubleTweakFixPage />} />
+          <Route path="/bitcoin" element={<Navigate to="/wallet" replace />} />
+          {/* Legacy /help routes redirect to /about so existing links keep
+              working. The About page and the two guides themselves live
+              under the wide layout below. */}
+          <Route path="/help" element={<Navigate to="/about" replace />} />
+          <Route path="/help/donors" element={<Navigate to="/about/donors" replace />} />
+          <Route path="/help/activists" element={<Navigate to="/about/activists" replace />} />
+          <Route path="/privacy" element={<PrivacyPolicyPage />} />
+          <Route path="/safety" element={<CSAEPolicyPage />} />
+          <Route path="/changelog" element={<ChangelogPage />} />
+          <Route path="/organizers" element={<OrganizersPage />} />
+          {/* Callback target for remote signers (e.g. Amber, Primal) after NIP-46 approval */}
+          <Route path="/remoteloginsuccess" element={<RemoteLoginSuccessPage />} />
+        </Route>
 
-          {/* All routes share the persistent FundraiserLayout (top nav + footer) */}
-          <Route element={<FundraiserLayout />}>
-            <Route path="/" element={<CampaignsPage />} />
-            <Route path="/discover" element={<DiscoverPage />} />
-            <Route path="/feed" element={<Index />} />
-            <Route path="/campaigns" element={<Navigate to="/" replace />} />
-            <Route path="/campaigns/new" element={<CreateCampaignPage />} />
-            <Route path="/campaigns/all" element={<AllCampaignsPage />} />
-            <Route path="/notifications" element={<NotificationsPage />} />
-            <Route path="/messages" element={<MessagesPage />} />
-            <Route path="/search" element={<SearchPage />} />
-            <Route path="/trends" element={<TrendsPage />} />
-            <Route path="/profile" element={<ProfileRedirect />} />
-             <Route path="/t/:tag" element={<HashtagPage />} />
-             <Route path="/g/:geohash" element={<GeotagPage />} />
-            <Route path="/feed/:domain" element={<DomainFeedPage />} />
-            <Route path="/settings" element={<SettingsPage />} />
-            <Route path="/settings/appearance" element={<AppearanceSettingsPage />} />
-            <Route path="/settings/profile" element={<ProfileSettings />} />
-            <Route path="/settings/feed" element={<ContentSettingsPage />} />
-            <Route path="/settings/content" element={<ContentPage />} />
-            <Route path="/settings/wallet" element={<WalletSettingsPage />} />
-            <Route
-              path="/settings/notifications"
-              element={<NotificationSettings />}
-            />
-            <Route
-              path="/settings/advanced"
-              element={<AdvancedSettingsPage />}
-            />
-            <Route path="/settings/magic" element={<MagicSettingsPage />} />
-            <Route path="/settings/network" element={<NetworkSettingsPage />} />
-            <Route path="/lists" element={<UserListsPage />} />
-            <Route path="/events" element={<EventsFeedPage />} />
-            <Route path="/events/new" element={<CreateEventPage />} />
-            <Route path="/photos" element={<PhotosFeedPage />} />
-            <Route path="/videos" element={<VideosFeedPage />} />
-            {/* /streams redirects to /videos for backward compatibility */}
-            <Route
-              path="/streams"
-              element={<Navigate to="/videos" replace />}
-            />
-            <Route path="/vines" element={<VinesFeedPage />} />
-            <Route path="/music" element={<MusicPage />} />
-            <Route path="/podcasts" element={<PodcastsFeedPage />} />
-            <Route path="/polls" element={<PollsFeedPage />} />
-            <Route path="/treasures" element={<TreasuresPage />} />
-            <Route
-              path="/colors"
-              element={
-                <KindFeedPage
-                  kind={colorsDef.kind}
-                  title={colorsDef.label}
-                  icon={sidebarItemIcon("colors", "size-5")}
-                />
-              }
-            />
-            <Route
-              path="/packs"
-              element={
-                <KindFeedPage
-                  kind={packsDef.kind}
-                  title={packsDef.label}
-                  icon={sidebarItemIcon("packs", "size-5")}
-                />
-              }
-            />
-            <Route path="/webxdc" element={<WebxdcFeedPage />} />
-            <Route path="/articles/new" element={<ArticleEditorPage />} />
-            <Route path="/articles/edit/:naddr" element={<ArticleEditorPage />} />
-            <Route
-              path="/articles"
-              element={
-                <KindFeedPage
-                  kind={articlesDef.kind}
-                  title={articlesDef.label}
-                  icon={sidebarItemIcon("articles", "size-5")}
-                  fabHref="/articles/new"
-                />
-              }
-            />
-            <Route
-              path="/highlights"
-              element={
-                <KindFeedPage
-                  kind={highlightsDef.kind}
-                  title={highlightsDef.label}
-                  icon={sidebarItemIcon("highlights", "size-5")}
-                  showFAB={false}
-                />
-              }
-            />
-            <Route
-              path="/decks"
-              element={
-                <KindFeedPage
-                  kind={decksDef.kind}
-                  title={decksDef.label}
-                  icon={sidebarItemIcon("decks", "size-5")}
-                />
-              }
-            />
-            <Route path="/emojis" element={<EmojiFeedPage />} />
-            <Route
-              path="/development"
-              element={
-                <KindFeedPage
-                  kind={[
-                    developmentDef.kind,
-                    ...(developmentDef.extraFeedKinds ?? []),
-                  ]}
-                  title={developmentDef.label}
-                  icon={sidebarItemIcon("development", "size-5")}
-                  showFAB={false}
-                />
-              }
-            />
-            <Route path="/wallet" element={<WalletPage />} />
-            <Route path="/wallet/recovery" element={<WalletRecoveryPage />} />
-            <Route path="/bitcoin" element={<Navigate to="/wallet" replace />} />
-            <Route path="/bookmarks" element={<BookmarksPage />} />
-            <Route path="/ai-chat" element={<AIChatPage />} />
-            <Route path="/verified" element={<VerifiedPage />} />
-            <Route path="/world" element={<WorldPage />} />
-            <Route path="/badges" element={<BadgesPage />} />
-            <Route path="/books" element={<BooksPage />} />
-            <Route path="/archive" element={<ArchivePage />} />
-            <Route path="/bluesky" element={<BlueskyPage />} />
-            <Route path="/wikipedia" element={<WikipediaPage />} />
-            <Route path="/communities" element={<CommunitiesPage />} />
-            <Route path="/communities/new" element={<CreateCommunityPage />} />
-            <Route path="/letters" element={<LettersPage />} />
-            <Route path="/letters/compose" element={<LetterComposePage />} />
-            <Route path="/settings/letters" element={<LetterPreferencesPage />} />
-            <Route path="/help" element={<HelpPage />} />
-            <Route path="/help/donors" element={<DonorGuidePage />} />
-            <Route path="/help/activists" element={<ActivistGuidePage />} />
-            <Route path="/privacy" element={<PrivacyPolicyPage />} />
-            <Route path="/safety" element={<CSAEPolicyPage />} />
-            <Route path="/changelog" element={<ChangelogPage />} />
-            <Route path="/r/*" element={<RelayPage />} />
-            <Route
-              path="/settings/lists"
-              element={<Navigate to="/lists" replace />}
-            />
-            <Route path="/i/*" element={<ExternalContentPage />} />
-            <Route path="/actions" element={<ActionsPage />} />
-            <Route path="/actions/new" element={<CreateActionPage />} />
-            <Route path="/pledges" element={<ActionsPage />} />
-            <Route path="/pledges/new" element={<CreateActionPage />} />
-            <Route path="/agent" element={<AIChatPage />} />
-            <Route path="/organizers" element={<OrganizersPage />} />
-            <Route path="/dashboard" element={<EventDashboardPage />} />
-            <Route path="/event-dashboard" element={<Navigate to="/dashboard" replace />} />
-
-            {/* Callback target for remote signers (e.g. Amber, Primal) after NIP-46 approval */}
-            <Route path="/remoteloginsuccess" element={<RemoteLoginSuccessPage />} />
-            {/* NIP-19 route for npub1, note1, naddr1, nevent1, nprofile1 */}
-            <Route path="/:nip19" element={<NIP19Page />} />
-            {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
-            <Route path="*" element={<NotFound />} />
-          </Route>
+        {/* Wide layout — no max-width on the center column. Used by landing /
+            list / detail pages that render their own internal width
+            constraints. */}
+        <Route element={<FundraiserLayout narrow={false} />}>
+          <Route path="/" element={<CampaignsPage />} />
+          <Route path="/campaigns" element={<Navigate to="/" replace />} />
+          <Route path="/campaigns/new" element={<CreateCampaignPage />} />
+          <Route path="/campaigns/all" element={<AllCampaignsPage />} />
+          <Route path="/groups" element={<CommunitiesPage />} />
+          <Route path="/groups/new" element={<CreateCommunityPage />} />
+          <Route path="/events/new" element={<CreateEventPage />} />
+          <Route path="/pledges" element={<ActionsPage />} />
+          <Route path="/pledges/new" element={<CreateActionPage />} />
+          <Route path="/dashboard" element={<EventDashboardPage />} />
+          <Route path="/i/*" element={<ExternalContentPage />} />
+          {/* About page + Donor / Activist guides. Full-bleed landing-style
+              layouts that render their own internal max-widths. */}
+          <Route path="/about" element={<AboutPage />} />
+          <Route path="/about/donors" element={<DonorGuidePage />} />
+          <Route path="/about/activists" element={<ActivistGuidePage />} />
+          {/* NIP-19 route for npub1, note1, naddr1, nevent1, nprofile1.
+              Goes through the wide layout because the dispatch may resolve to
+              a profile, campaign, action, or community page — all of which
+              render their own internal layout. PostDetailPage / ListDetailPage
+              also work edge-to-edge. */}
+          <Route path="/:nip19" element={<NIP19Page />} />
+          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+          <Route path="*" element={<NotFound />} />
+        </Route>
         </Routes>
-      </BrowserRouter>
-    </AudioPlayerProvider>
+      </OnboardingGate>
+    </BrowserRouter>
   );
 }
 export default AppRouter;

src/components/AcceptBadgeButton.tsx

@@ -8,7 +8,7 @@ import { useProfileBadges } from '@/hooks/useProfileBadges';
 import { BADGE_DEFINITION_KIND } from '@/lib/badgeUtils';
 import { cn } from '@/lib/utils';
 
-export interface AcceptBadgeButtonProps {
+interface AcceptBadgeButtonProps {
   /** The kind 8 badge award event. */
   awardEvent: NostrEvent;
   /** Prominent pill style (large, rounded-full, colored). Otherwise compact outline variant. */

src/components/ActionShareMenu.tsx

@@ -0,0 +1,193 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQueryClient } from '@tanstack/react-query';
+import { nip19 } from 'nostr-tools';
+import {
+  Check,
+  Link as LinkIcon,
+  Loader2,
+  MoreHorizontal,
+  Trash2,
+} from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ModerationMenuItems } from '@/components/moderation';
+import { useCampaignModerators } from '@/hooks/useCampaignModerators';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useShareOrigin } from '@/hooks/useShareOrigin';
+import { useToast } from '@/hooks/useToast';
+import { getPledgeCoord } from '@/lib/pledges';
+import type { Action } from '@/hooks/useActions';
+
+/**
+ * Per-card kebab menu for pledges. Surfaces:
+ *   • Delete (owner only) — NIP-09 with both `e` and `a` tags so
+ *     relays that ignore a-tag-only deletions still drop the event.
+ *   • Copy link — naddr1 URL on the current share origin.
+ *   • Moderation actions (mods only) — hide / feature, under a
+ *     separator that only renders when the viewer is a moderator.
+ *
+ * Lives outside `ActionsPage` so both the page and the reusable
+ * `PledgesDiscoverySection` can pin it to the card's `topRight` slot
+ * without duplicating the logic.
+ */
+export function ActionShareMenu({
+  action,
+  displayTitle,
+}: {
+  action: Action;
+  displayTitle: string;
+}) {
+  const { t } = useTranslation();
+  const { user } = useCurrentUser();
+  const { data: moderators } = useCampaignModerators();
+  const { mutateAsync: createEvent } = useNostrPublish();
+  const { toast } = useToast();
+  const shareOrigin = useShareOrigin();
+  const queryClient = useQueryClient();
+  const [copied, setCopied] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const isOwner = user?.pubkey === action.pubkey;
+  // Moderator gate is identical to the one in `ModerationMenuItems`,
+  // duplicated here so we can decide whether to render the trailing
+  // separator that introduces the moderator section.
+  // `ModerationMenuItems` returns `null` for non-mods, so without
+  // this check we'd render an orphaned separator at the bottom of
+  // the dropdown.
+  const isMod = !!user && !!moderators && moderators.includes(user.pubkey);
+
+  const naddr = nip19.naddrEncode({
+    kind: 36639,
+    pubkey: action.pubkey,
+    identifier: action.id,
+  });
+
+  const actionUrl = `${shareOrigin}/${naddr}`;
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(actionUrl);
+      setCopied(true);
+      toast({ title: t('pledges.card.linkCopied') });
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('Failed to copy link:', error);
+      toast({ title: t('pledges.card.linkCopyFailed'), variant: 'destructive' });
+    }
+  };
+
+  const handleDelete = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!user || !isOwner) return;
+
+    const confirmed = window.confirm(t('pledges.card.confirmDelete'));
+    if (!confirmed) return;
+
+    setIsDeleting(true);
+    try {
+      // NIP-09 deletion. Include both 'e' and 'a' tags — some relays don't
+      // honour a-tag-only deletions for addressable events.
+      await createEvent({
+        kind: 5,
+        content: t('pledges.card.deletedContent'),
+        tags: [
+          ['e', action.event.id],
+          ['a', getPledgeCoord(action)],
+        ],
+      });
+      // Extract any organization `A` tag the pledge was associated with so
+      // the org's activity shelf and community feeds refresh too.
+      const orgATag = action.event.tags.find(([n]) => n === 'A')?.[1];
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['agora-actions'] }),
+        queryClient.invalidateQueries({ queryKey: ['agora-action'] }),
+        ...(orgATag
+          ? [
+              queryClient.invalidateQueries({
+                queryKey: ['organization-activity', orgATag],
+              }),
+              queryClient.invalidateQueries({
+                queryKey: ['community-actions', orgATag],
+              }),
+              queryClient.invalidateQueries({
+                predicate: (q) => {
+                  const [root, aTagsKey] = q.queryKey;
+                  return (
+                    root === 'community-activity-feed' &&
+                    typeof aTagsKey === 'string' &&
+                    aTagsKey.split(',').includes(orgATag)
+                  );
+                },
+              }),
+            ]
+          : []),
+      ]);
+      toast({ title: t('pledges.card.deleted') });
+    } catch (error) {
+      console.error('Failed to delete pledge:', error);
+      toast({ title: t('pledges.card.deleteFailed'), variant: 'destructive' });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild onClick={(e) => e.preventDefault()}>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={t('pledges.card.actionsAriaLabel')}
+          className="h-8 w-8 bg-background/80 backdrop-blur text-muted-foreground hover:text-foreground"
+        >
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
+        {isOwner && (
+          <>
+            <DropdownMenuItem onClick={handleDelete} disabled={isDeleting}>
+              {isDeleting ? (
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              ) : (
+                <Trash2 className="h-4 w-4 mr-2" />
+              )}
+              {t('pledges.card.deletePledge')}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        <DropdownMenuItem onClick={handleCopyLink}>
+          {copied ? (
+            <Check className="h-4 w-4 mr-2 text-primary" />
+          ) : (
+            <LinkIcon className="h-4 w-4 mr-2" />
+          )}
+          {t('pledges.card.copyLink')}
+        </DropdownMenuItem>
+        {/* Moderator actions appear under a separator when the viewer
+            is a Team Soapbox moderator. `ModerationMenuItems` returns
+            null for non-mods, so we gate the trailing separator on
+            the same `isMod` check to avoid an orphan separator at
+            the bottom of non-mod dropdowns. */}
+        {isMod && <DropdownMenuSeparator />}
+        <ModerationMenuItems
+          coord={getPledgeCoord(action)}
+          entityTitle={displayTitle}
+          surface="pledge"
+          axes={['hide', 'featured']}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/components/AddMembersDialog.tsx

@@ -126,7 +126,7 @@ export function AddMembersDialog({ open, onOpenChange, listId, listPubkeys }: Ad
         <div ref={listRef} className="overflow-y-auto flex-1">
           {!query.trim() ? (
             <div className="py-12 text-center text-muted-foreground text-sm">
-              <UserPlus className="size-8 mx-auto mb-2 opacity-50" />
+              <UserPlus className="size-8 mx-auto mb-2" />
               Search for people to add to this list.
             </div>
           ) : isLoading && !searchResults ? (

src/components/AddToListDialog.tsx

@@ -143,7 +143,7 @@ export function AddToListDialog({ pubkey, displayName, open, onOpenChange }: Add
             </div>
           ) : !hasAny ? (
             <div className="py-8 px-4 text-center text-sm text-muted-foreground">
-              <List className="size-8 mx-auto mb-2 text-muted-foreground/40" />
+              <List className="size-8 mx-auto mb-2 text-muted-foreground" />
               No lists or packs yet. Create one below.
             </div>
           ) : (

src/components/AgoraInlinePreview.tsx

@@ -0,0 +1,208 @@
+import type { NostrEvent } from '@nostrify/nostrify';
+import type { ReactNode } from 'react';
+import { CalendarClock, HandHeart, MapPin, Megaphone, ShieldCheck, Users } from 'lucide-react';
+import { nip19 } from 'nostr-tools';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+import { useBtcPrice } from '@/hooks/useBtcPrice';
+import { useCampaignDonations } from '@/hooks/useCampaignDonations';
+import { useAuthor } from '@/hooks/useAuthor';
+import { parseAction } from '@/hooks/useActions';
+import { getGeoDisplayName } from '@/lib/countries';
+import { parseCampaign, getCampaignCountryLabel } from '@/lib/campaign';
+import { parseCommunityEvent } from '@/lib/communityUtils';
+import { formatCampaignAmount, formatUsdGoal, satsToUsd } from '@/lib/formatCampaignAmount';
+import { formatCompactPledgeDeadline, formatPledgeAmount } from '@/lib/pledges';
+import { sanitizeUrl } from '@/lib/sanitizeUrl';
+import { cn } from '@/lib/utils';
+
+function getDeadlineLabel(unixSeconds: number): { label: string; isPast: boolean } {
+  const now = Math.floor(Date.now() / 1000);
+  const diff = unixSeconds - now;
+  if (diff <= 0) return { label: 'Ended', isPast: true };
+  const days = Math.ceil(diff / 86_400);
+  if (days <= 1) return { label: 'Ends today', isPast: false };
+  if (days < 30) return { label: `${days} days left`, isPast: false };
+  const months = Math.round(days / 30);
+  return { label: `${months} mo left`, isPast: false };
+}
+
+function InlineShell({
+  image,
+  fallbackIcon,
+  title,
+  description,
+  meta,
+}: {
+  image?: string;
+  fallbackIcon: ReactNode;
+  title: string;
+  description?: string;
+  meta?: ReactNode;
+}) {
+  return (
+    <div className="mt-3 space-y-3">
+      <div className="overflow-hidden rounded-xl bg-gradient-to-br from-primary/15 via-primary/5 to-secondary">
+        {image ? (
+          <img src={image} alt="" loading="lazy" className="aspect-[16/7] w-full object-cover" />
+        ) : (
+          <div className="flex aspect-[16/7] items-center justify-center text-primary/45">
+            {fallbackIcon}
+          </div>
+        )}
+      </div>
+      <div className="space-y-2">
+        <h3 className="text-base font-bold leading-tight tracking-tight line-clamp-2">{title}</h3>
+        {description?.trim() ? (
+          <p className="text-sm leading-relaxed text-muted-foreground line-clamp-3">{description}</p>
+        ) : null}
+        {meta}
+      </div>
+    </div>
+  );
+}
+
+export function CampaignInlinePreview({ event }: { event: NostrEvent }) {
+  const campaign = parseCampaign(event);
+  const { data: btcPrice } = useBtcPrice();
+  const { data: stats } = useCampaignDonations(campaign ?? undefined);
+  const author = useAuthor(event.pubkey);
+  if (!campaign) return null;
+
+  const authorMetadata = author.data?.metadata;
+  const cover = sanitizeUrl(campaign.banner)
+    ?? sanitizeUrl(authorMetadata?.banner)
+    ?? sanitizeUrl(authorMetadata?.picture);
+  const naddr = nip19.naddrEncode({ kind: event.kind, pubkey: event.pubkey, identifier: campaign.identifier });
+  const countryLabel = getCampaignCountryLabel(campaign);
+  const deadline = campaign.deadline ? getDeadlineLabel(campaign.deadline) : undefined;
+  const isSilentPayment = !campaign.wallets.onchain;
+  const goalLabel = campaign.goalUsd && campaign.goalUsd > 0 ? formatUsdGoal(campaign.goalUsd) : undefined;
+  const raisedSats = stats?.totalSats ?? 0;
+  const raisedLabel = isSilentPayment ? undefined : formatCampaignAmount(raisedSats, btcPrice);
+  const raisedUsd = isSilentPayment ? undefined : satsToUsd(raisedSats, btcPrice);
+  const progress = campaign.goalUsd && raisedUsd !== undefined
+    ? Math.min(100, Math.round((raisedUsd / campaign.goalUsd) * 100))
+    : 0;
+
+  return (
+    <Link to={`/${naddr}`} onClick={(e) => e.stopPropagation()} className="block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background">
+      <InlineShell
+        image={cover}
+        fallbackIcon={<HandHeart className="size-12" />}
+        title={campaign.title}
+        description={campaign.story}
+        meta={(
+          <div className="space-y-2 pt-1">
+            {campaign.goalUsd && !isSilentPayment ? (
+              <div className="h-1.5 overflow-hidden rounded-full bg-foreground/15">
+                <div className="h-full rounded-full bg-primary" style={{ width: `${progress}%` }} />
+              </div>
+            ) : null}
+            <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground">
+              {isSilentPayment ? (
+                <span className="inline-flex items-center gap-1.5">
+                  <ShieldCheck className="size-3.5" />
+                  {goalLabel ?? 'Private campaign'}
+                </span>
+              ) : (
+                <span className="font-semibold text-foreground">
+                  {raisedLabel}<span className="font-normal text-muted-foreground"> {goalLabel ? `/ ${goalLabel}` : 'raised'}</span>
+                </span>
+              )}
+              {countryLabel && (
+                <span className="inline-flex items-center gap-1.5">
+                  <MapPin className="size-3.5" />
+                  {countryLabel}
+                </span>
+              )}
+              {deadline && (
+                <span className={cn('inline-flex items-center gap-1.5', deadline.isPast && 'text-destructive')}>
+                  <CalendarClock className="size-3.5" />
+                  {deadline.label}
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+      />
+    </Link>
+  );
+}
+
+export function PledgeInlinePreview({ event }: { event: NostrEvent }) {
+  const { t } = useTranslation();
+  const pledge = parseAction(event);
+  const { data: btcPrice } = useBtcPrice();
+  if (!pledge) return null;
+
+  const naddr = nip19.naddrEncode({ kind: 36639, pubkey: pledge.pubkey, identifier: pledge.id });
+  const countryLabel = pledge.countryCode ? getGeoDisplayName(pledge.countryCode) : undefined;
+  const deadline = pledge.deadline ? formatCompactPledgeDeadline(pledge.deadline) : undefined;
+
+  return (
+    <Link to={`/${naddr}`} onClick={(e) => e.stopPropagation()} className="block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background">
+      <InlineShell
+        image={pledge.image}
+        fallbackIcon={<Megaphone className="size-12" />}
+        title={pledge.title}
+        description={pledge.description}
+        meta={(
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 pt-1 text-xs text-muted-foreground">
+            <span className="inline-flex items-baseline gap-1.5">
+              <span className="font-semibold uppercase tracking-wide text-primary">{t('pledges.card.pledged')}</span>
+              <span className="text-sm font-bold text-foreground">{formatPledgeAmount(pledge.bounty, btcPrice)}</span>
+            </span>
+            {countryLabel && (
+              <span className="inline-flex items-center gap-1.5">
+                <MapPin className="size-3.5" />
+                {countryLabel}
+              </span>
+            )}
+            {deadline && (
+              <span className={cn('inline-flex items-center gap-1.5', deadline.isPast && 'text-destructive')}>
+                <CalendarClock className="size-3.5" />
+                {deadline.label}
+              </span>
+            )}
+          </div>
+        )}
+      />
+    </Link>
+  );
+}
+
+export function GroupInlinePreview({ event }: { event: NostrEvent }) {
+  const { t } = useTranslation();
+  const group = parseCommunityEvent(event);
+  if (!group) return null;
+
+  const naddr = nip19.naddrEncode({ kind: event.kind, pubkey: event.pubkey, identifier: group.dTag });
+  const countryLabel = group.countryCode ? getGeoDisplayName(group.countryCode) : undefined;
+
+  return (
+    <Link to={`/${naddr}`} onClick={(e) => e.stopPropagation()} className="block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background">
+      <InlineShell
+        image={group.image}
+        fallbackIcon={<Users className="size-12" />}
+        title={group.name}
+        description={group.description}
+        meta={(
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 pt-1 text-xs text-muted-foreground">
+            <span className="inline-flex items-center gap-1.5">
+              <Users className="size-3.5" />
+              {t('groups.create.moderatorsCount', { count: group.moderatorPubkeys.length })}
+            </span>
+            {countryLabel && (
+              <span className="inline-flex items-center gap-1.5">
+                <MapPin className="size-3.5" />
+                {countryLabel}
+              </span>
+            )}
+          </div>
+        )}
+      />
+    </Link>
+  );
+}

src/components/AgoraLogo.tsx

@@ -1,53 +0,0 @@
-import { cn } from '@/lib/utils';
-
-interface AgoraLogoProps {
-  className?: string;
-  size?: number;
-}
-
-function LightningBolt({ size }: { size: number }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden
-    >
-      <path
-        d="M13 2L3 14h8l-1 8 10-12h-8l1-8z"
-        fill="white"
-        stroke="white"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-/** Agora badge icon used across app chrome. */
-export function AgoraLogo({ className, size = 40 }: AgoraLogoProps) {
-  const boltSize = Math.max(12, Math.round(size * 0.56));
-
-  return (
-    <div
-      role="img"
-      aria-label="Agora"
-      style={{
-        width: size,
-        height: size,
-      }}
-      className={cn(
-        'relative rounded-full bg-gradient-to-br from-primary to-primary/80 shadow-lg flex items-center justify-center',
-        className,
-      )}
-    >
-      <div className="absolute inset-0 rounded-full bg-primary/25 blur-md" aria-hidden />
-      <div className="relative">
-        <LightningBolt size={boltSize} />
-      </div>
-    </div>
-  );
-}

src/components/AppHandlerContent.tsx

@@ -1,14 +1,12 @@
 import type { NostrEvent, NostrMetadata } from '@nostrify/nostrify';
-import { ExternalLink, GitFork, Package, Play } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { ExternalLink, GitFork, Package } from 'lucide-react';
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { Button } from '@/components/ui/button';
 import { ExternalFavicon } from '@/components/ExternalFavicon';
-import { NsitePreviewDialog } from '@/components/NsitePreviewDialog';
-import { Skeleton } from '@/components/ui/skeleton';
-import { useAddrEvent } from '@/hooks/useEvent';
 import { NostrURI } from '@/lib/NostrURI';
+import { hexToBase36 } from '@/lib/nsiteSubdomain';
 import { sanitizeUrl } from '@/lib/sanitizeUrl';
 import { cn } from '@/lib/utils';
 
@@ -93,6 +91,15 @@ function getNsiteRef(tags: string[][]): NsiteRef | undefined {
   return undefined;
 }
 
+/**
+ * Build the canonical nsite URL for a kind 35128 reference. Mirrors the rule
+ * used by NsiteCard / nsiteSubdomain.ts: `<pubkeyB36><dTag>.nsite.lol`.
+ */
+function nsiteUrl(ref: NsiteRef): string {
+  const pubkeyB36 = hexToBase36(ref.pubkey);
+  return `https://${pubkeyB36}${ref.identifier}.nsite.lol`;
+}
+
 interface AppHandlerContentProps {
   event: NostrEvent;
   /** If true, show compact preview (used in NoteCard feed). */
@@ -115,17 +122,13 @@ export function AppHandlerContent({ event, compact }: AppHandlerContentProps) {
   const hashtags = getAllTags(event.tags, 't');
 
   const shakespeareUrl = useMemo(() => getShakespeareUrl(event.tags), [event.tags]);
-  const nsiteRef = useMemo(() => getNsiteRef(event.tags), [event.tags]);
-  const [previewOpen, setPreviewOpen] = useState(false);
-
-  // Fetch the actual nsite event so we can serve files directly from Blossom.
-  const { data: nsiteEvent } = useAddrEvent(
-    nsiteRef ? { kind: 35128, pubkey: nsiteRef.pubkey, identifier: nsiteRef.identifier } : undefined,
-  );
+  const nsiteOpenUrl = useMemo(() => {
+    const ref = getNsiteRef(event.tags);
+    return ref ? nsiteUrl(ref) : undefined;
+  }, [event.tags]);
 
   if (compact) {
     return (
-      <>
       <div className="mt-2">
         <div className="rounded-xl border border-border overflow-hidden transition-all duration-300 hover:shadow-md hover:border-primary/20">
           {/* Banner hero */}
@@ -156,7 +159,7 @@ export function AppHandlerContent({ event, compact }: AppHandlerContentProps) {
                 />
               ) : (
                 <div className="size-14 rounded-xl bg-primary/10 flex items-center justify-center shrink-0 border-3 border-background shadow-sm">
-                  <Package className="size-6 text-primary/50" />
+                  <Package className="size-6 text-primary" />
                 </div>
               )}
             </div>
@@ -195,19 +198,16 @@ export function AppHandlerContent({ event, compact }: AppHandlerContentProps) {
 
             {/* Actions */}
             <div className="flex items-center gap-2">
-              {nsiteRef && (
-                <Button
-                  size="sm"
-                  className="h-7 text-xs"
-                  disabled={!nsiteEvent}
-                  onClick={(e) => { e.stopPropagation(); setPreviewOpen(true); }}
-                >
-                  <Play className="size-3 mr-1" />
-                  Run
+              {nsiteOpenUrl && (
+                <Button asChild size="sm" className="h-7 text-xs">
+                  <a href={nsiteOpenUrl} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
+                    Open Site
+                    <ExternalLink className="size-3 ml-1.5" />
+                  </a>
                 </Button>
               )}
               {websiteUrl && (
-                <Button asChild size="sm" variant={nsiteRef ? 'secondary' : 'default'} className="h-7 text-xs">
+                <Button asChild size="sm" variant={nsiteOpenUrl ? 'secondary' : 'default'} className="h-7 text-xs">
                   <a href={websiteUrl} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
                     Open App
                     <ExternalLink className="size-3 ml-1.5" />
@@ -226,17 +226,6 @@ export function AppHandlerContent({ event, compact }: AppHandlerContentProps) {
           </div>
         </div>
       </div>
-
-      {nsiteRef && nsiteEvent && (
-         <NsitePreviewDialog
-           event={nsiteEvent}
-           appName={name}
-           appPicture={picture}
-           open={previewOpen}
-           onOpenChange={setPreviewOpen}
-         />
-       )}
-       </>
      );
   }
 
@@ -275,7 +264,7 @@ export function AppHandlerContent({ event, compact }: AppHandlerContentProps) {
               />
             ) : (
               <div className="size-20 rounded-2xl bg-primary/10 flex items-center justify-center shrink-0 border-4 border-background shadow-sm">
-                <Package className="size-8 text-primary/50" />
+                <Package className="size-8 text-primary" />
               </div>
             )}
           </div>
@@ -314,18 +303,16 @@ export function AppHandlerContent({ event, compact }: AppHandlerContentProps) {
 
           {/* Actions */}
           <div className="flex items-center gap-2 pt-1">
-            {nsiteRef && (
-              <Button
-                size="sm"
-                disabled={!nsiteEvent}
-                onClick={(e) => { e.stopPropagation(); setPreviewOpen(true); }}
-              >
-                <Play className="size-3.5 mr-1.5" />
-                Run
+            {nsiteOpenUrl && (
+              <Button asChild size="sm">
+                <a href={nsiteOpenUrl} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
+                  Open Site
+                  <ExternalLink className="size-3.5 ml-1.5" />
+                </a>
               </Button>
             )}
             {websiteUrl && (
-              <Button asChild size="sm" variant={nsiteRef ? 'secondary' : 'default'}>
+              <Button asChild size="sm" variant={nsiteOpenUrl ? 'secondary' : 'default'}>
                 <a href={websiteUrl} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
                   Open App
                   <ExternalLink className="size-3 ml-1.5" />
@@ -343,40 +330,6 @@ export function AppHandlerContent({ event, compact }: AppHandlerContentProps) {
           </div>
         </div>
       </div>
-
-      {nsiteRef && nsiteEvent && (
-        <NsitePreviewDialog
-          event={nsiteEvent}
-          appName={name}
-          appPicture={picture}
-          open={previewOpen}
-          onOpenChange={setPreviewOpen}
-        />
-      )}
-    </div>
-  );
-}
-
-/** Skeleton loading state for AppHandlerContent. */
-export function AppHandlerSkeleton() {
-  return (
-    <div className="mt-3">
-      <div className="rounded-xl border border-border overflow-hidden">
-        <Skeleton className="aspect-[2/1] w-full" />
-        <div className="px-4 pb-4 space-y-3">
-          <div className="-mt-10">
-            <Skeleton className="size-20 rounded-2xl border-4 border-background" />
-          </div>
-          <div className="space-y-1.5">
-            <Skeleton className="h-5 w-32" />
-            <Skeleton className="h-3 w-24" />
-          </div>
-          <div className="space-y-1.5">
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-4/5" />
-          </div>
-        </div>
-      </div>
     </div>
   );
 }

src/components/AppProvider.tsx

@@ -1,10 +1,8 @@
-import { ReactNode, useLayoutEffect, useEffect, useRef } from 'react';
+import { ReactNode, useLayoutEffect } from 'react';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { AppContext, type AppConfig, type AppContextType, type Theme } from '@/contexts/AppContext';
-import { builtinThemes, buildThemeCssFromCore, resolveTheme, resolveThemeConfig, type ThemeConfig, type ThemesConfig } from '@/themes';
+import { resolveTheme } from '@/themes';
 import { AppConfigSchema } from '@/lib/schemas';
-import { loadAndApplyFont, loadAndApplyTitleFont } from '@/lib/fontLoader';
-import { hslToRgb, parseHsl, rgbToHex } from '@/lib/colorUtils';
 import { z } from 'zod';
 
 interface AppProviderProps {
@@ -84,11 +82,8 @@ export function AppProvider(props: AppProviderProps) {
     updateConfig,
   };
 
-  // Apply theme effects to document
-  useApplyTheme(config.theme, config.customTheme, config.themes);
-  useApplyFonts(config.theme, config.customTheme, config.themes);
-  useApplyBackground(config.theme, config.customTheme, config.themes);
-  useApplyFavicon(config.theme, config.customTheme, config.themes);
+  // Keep the .dark class on <html> in sync with the active theme.
+  useApplyTheme(config.theme);
 
   return (
     <AppContext.Provider value={appContextValue}>
@@ -98,197 +93,32 @@ export function AppProvider(props: AppProviderProps) {
 }
 
 /**
- * Hook to apply theme changes to the document root via an injected <style> tag.
- * When theme is "system", resolves to "light" or "dark" based on OS preference
- * and listens for changes to prefers-color-scheme.
- * When theme is "custom", uses the provided customTheme colors (derived to full tokens).
- * When theme is "light" or "dark", uses configured themes if available, otherwise builtin themes.
+ * Hook to apply the active theme to `<html>` by setting its className.
+ *
+ * Colors are defined statically in `src/index.css` — this hook only flips
+ * the `.dark` class so the right block wins. When the user picks
+ * `"system"`, we also subscribe to `prefers-color-scheme` changes so the
+ * app follows the OS in real time.
+ *
+ * There is no runtime CSS-variable injection, no font loading from event
+ * data, no background image, no recolored favicon. Anything that could
+ * paint untrusted strings into the document has been removed.
  */
-function useApplyTheme(theme: Theme, customTheme: ThemeConfig | undefined, themes: ThemesConfig | undefined) {
+function useApplyTheme(theme: Theme) {
   useLayoutEffect(() => {
     function apply() {
-      const resolved = resolveTheme(theme);
-      let css: string;
-
-      if (resolved === 'custom') {
-        // Use custom theme colors, falling back to dark if not yet set
-        const colors = customTheme?.colors ?? builtinThemes.dark;
-        css = buildThemeCssFromCore(colors);
-      } else {
-        css = buildThemeCssFromCore(resolveThemeConfig(resolved, themes).colors);
-      }
-
-      let el = document.getElementById('theme-vars') as HTMLStyleElement | null;
-      if (!el) {
-        el = document.createElement('style');
-        el.id = 'theme-vars';
-        document.head.appendChild(el);
-      }
-      el.textContent = css;
-      document.documentElement.className = resolved;
-      // Now that CSS variables are set, the inline body background from
-      // theme.js is no longer needed — bg-background will resolve correctly.
+      document.documentElement.className = resolveTheme(theme);
+      // The inline body background set by public/theme.js before React
+      // mounted is no longer needed once Tailwind's bg-background kicks in.
       document.body.removeAttribute('style');
     }
 
     apply();
 
-    // When theme is "system", listen for OS color scheme changes
     if (theme === 'system') {
       const mq = window.matchMedia('(prefers-color-scheme: dark)');
       mq.addEventListener('change', apply);
       return () => mq.removeEventListener('change', apply);
     }
-  }, [theme, customTheme, themes]);
-}
-
-/**
- * Hook to load and apply custom fonts when the theme config changes.
- * Applies fonts from custom themes, or from configured light/dark themes if available.
- */
-function useApplyFonts(theme: Theme, customTheme: ThemeConfig | undefined, themes: ThemesConfig | undefined) {
-  const resolved = resolveTheme(theme);
-  const activeConfig = resolved === 'custom' ? customTheme : resolveThemeConfig(resolved, themes);
-  const fontFamily = activeConfig?.font?.family;
-  const fontUrl = activeConfig?.font?.url;
-  const titleFontFamily = activeConfig?.titleFont?.family;
-  const titleFontUrl = activeConfig?.titleFont?.url;
-
-  useEffect(() => {
-    if (fontFamily) {
-      loadAndApplyFont({ family: fontFamily, url: fontUrl });
-    } else {
-      // Clear any custom font overrides when no font is configured
-      loadAndApplyFont(undefined);
-    }
-  }, [theme, fontFamily, fontUrl]);
-
-  useEffect(() => {
-    if (titleFontFamily) {
-      loadAndApplyTitleFont({ family: titleFontFamily, url: titleFontUrl });
-    } else {
-      // Clear any custom title font overrides when no title font is configured
-      loadAndApplyTitleFont(undefined);
-    }
-  }, [theme, titleFontFamily, titleFontUrl]);
-}
-
-/** Style element ID for background image CSS. */
-const BG_STYLE_ID = 'theme-background';
-
-/**
- * Hook to apply or remove a background image when the theme config changes.
- * Supports backgrounds from custom themes and configured light/dark themes.
- */
-function useApplyBackground(theme: Theme, customTheme: ThemeConfig | undefined, themes: ThemesConfig | undefined) {
-  const resolved = resolveTheme(theme);
-  const activeConfig = resolved === 'custom' ? customTheme : resolveThemeConfig(resolved, themes);
-  const bgUrl = activeConfig?.background?.url;
-  const bgMode = activeConfig?.background?.mode ?? 'cover';
-
-  useEffect(() => {
-    let style = document.getElementById(BG_STYLE_ID) as HTMLStyleElement | null;
-
-    if (!bgUrl) {
-      style?.remove();
-      return;
-    }
-
-    if (!style) {
-      style = document.createElement('style');
-      style.id = BG_STYLE_ID;
-      document.head.appendChild(style);
-    }
-
-    let css: string;
-    if (bgMode === 'tile') {
-      css = `body { background-image: url("${bgUrl}"); background-repeat: repeat; background-size: auto; }`;
-    } else {
-      css = `body { background-image: url("${bgUrl}"); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; }`;
-    }
-
-    style.textContent = css;
-
-    return () => {
-      document.getElementById(BG_STYLE_ID)?.remove();
-    };
-  }, [theme, bgUrl, bgMode]);
-}
-
-/**
- * Hook to dynamically recolor the favicon to match the current primary color.
- * Uses a mask approach with /logo.svg: loads the SVG, draws it as a mask
- * on a canvas filled with the primary color, and sets the result as the favicon.
- */
-function useApplyFavicon(theme: Theme, customTheme: ThemeConfig | undefined, themes: ThemesConfig | undefined) {
-  const resolved = resolveTheme(theme);
-  const colors = resolved === 'custom'
-    ? (customTheme?.colors ?? builtinThemes.dark)
-    : resolveThemeConfig(resolved, themes).colors;
-  const primary = colors.primary;
-
-  // Cache the loaded SVG blob URL across renders.
-  const svgBlobUrlRef = useRef<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function updateFavicon() {
-      // Load the SVG once and cache it as a blob URL for canvas use.
-      if (!svgBlobUrlRef.current) {
-        try {
-          const resp = await fetch('/logo.svg');
-          const text = await resp.text();
-          const blob = new Blob([text], { type: 'image/svg+xml' });
-          svgBlobUrlRef.current = URL.createObjectURL(blob);
-        } catch {
-          return; // Silently fail if SVG can't be loaded
-        }
-      }
-
-      if (cancelled) return;
-
-      const size = 128;
-      const canvas = document.createElement('canvas');
-      canvas.width = size;
-      canvas.height = size;
-      const ctx = canvas.getContext('2d');
-      if (!ctx) return;
-
-      const img = new Image();
-      img.src = svgBlobUrlRef.current!;
-
-      await new Promise<void>((resolve, reject) => {
-        img.onload = () => resolve();
-        img.onerror = () => reject();
-      });
-
-      if (cancelled) return;
-
-      // Fill the canvas with the primary color.
-      const { h, s, l } = parseHsl(primary);
-      const [r, g, b] = hslToRgb(h, s, l);
-      ctx.fillStyle = rgbToHex(r, g, b);
-      ctx.fillRect(0, 0, size, size);
-
-      // Use the SVG as a mask (destination-in keeps only the logo shape).
-      ctx.globalCompositeOperation = 'destination-in';
-      ctx.drawImage(img, 0, 0, size, size);
-
-      const dataUrl = canvas.toDataURL('image/png');
-
-      // Update the favicon link element.
-      const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
-      if (link) {
-        link.type = 'image/png';
-        link.href = dataUrl;
-      }
-    }
-
-    updateFavicon();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [primary]);
+  }, [theme]);
 }

src/components/ArcBackground.tsx

@@ -1,10 +1,10 @@
 import { cn } from '@/lib/utils';
 
 /** Arc overhang for the downward arc (top bar / sub-header). */
-export const ARC_OVERHANG_PX = 20;
+const ARC_OVERHANG_PX = 20;
 
 /** Larger overhang for the upward arc (bottom nav) so the harsher curve isn't clipped. */
-export const ARC_UP_OVERHANG_PX = 28;
+const ARC_UP_OVERHANG_PX = 28;
 
 /** SVG path for a downward angled bar (used by top bar and sub-header bar).
  *  Bottom edge slopes from each corner down to a center apex, forming an

src/components/AudioKindContent.tsx

@@ -11,6 +11,7 @@ import { useAudioPlayer } from '@/contexts/audioPlayerContextDef';
 import { parseMusicTrack, parseMusicPlaylist, toAudioTrack } from '@/lib/musicHelpers';
 import { parsePodcastEpisode, parsePodcastTrailer, episodeToAudioTrack, trailerToAudioTrack } from '@/lib/podcastHelpers';
 import { useAuthor } from '@/hooks/useAuthor';
+import { useImageProxy } from '@/hooks/useImageProxy';
 import { getDisplayName } from '@/lib/getDisplayName';
 import { formatTime } from '@/lib/formatTime';
 import { cn } from '@/lib/utils';
@@ -50,6 +51,7 @@ export function MusicTrackContent({ event }: { event: NostrEvent }) {
   const player = useAudioPlayer();
   const parsed = useMemo(() => parseMusicTrack(event), [event]);
   const author = useAuthor(event.pubkey);
+  const proxy = useImageProxy();
 
   if (!parsed) return null;
 
@@ -79,14 +81,14 @@ export function MusicTrackContent({ event }: { event: NostrEvent }) {
       {/* Cover artwork — clicking anywhere here plays/pauses */}
       {parsed.artwork ? (
         <div className="relative aspect-square max-h-[280px] w-full overflow-hidden cursor-pointer" onClick={handlePlay}>
-          <img src={parsed.artwork} alt={parsed.title} className="w-full h-full object-cover" loading="lazy" />
+          <img src={proxy(parsed.artwork, 600)} alt={parsed.title} className="w-full h-full object-cover" loading="lazy" />
           <div className="absolute inset-0 flex items-center justify-center bg-black/0 hover:bg-black/10 transition-colors">
             <PlayButton isPlaying={player.isPlaying} isActive={isNowPlaying} onClick={handlePlay} size="lg" />
           </div>
         </div>
       ) : (
         <div className="relative flex items-center justify-center bg-gradient-to-br from-primary/10 via-primary/5 to-transparent h-[140px] cursor-pointer" onClick={handlePlay}>
-          <Music className="size-10 text-primary/20" />
+          <Music className="size-10 text-primary" />
           <div className="absolute inset-0 flex items-center justify-center">
             <PlayButton isPlaying={player.isPlaying} isActive={isNowPlaying} onClick={handlePlay} size="lg" />
           </div>
@@ -112,6 +114,7 @@ export function MusicTrackContent({ event }: { event: NostrEvent }) {
 
 export function MusicPlaylistContent({ event }: { event: NostrEvent }) {
   const parsed = useMemo(() => parseMusicPlaylist(event), [event]);
+  const proxy = useImageProxy();
 
   if (!parsed) return null;
 
@@ -122,11 +125,11 @@ export function MusicPlaylistContent({ event }: { event: NostrEvent }) {
       {/* Cover artwork — clicks bubble up to NoteCard for navigation */}
       {parsed.artwork ? (
         <div className="aspect-video max-h-[200px] w-full overflow-hidden">
-          <img src={parsed.artwork} alt={parsed.title} className="w-full h-full object-cover" loading="lazy" />
+          <img src={proxy(parsed.artwork, 600)} alt={parsed.title} className="w-full h-full object-cover" loading="lazy" />
         </div>
       ) : (
         <div className="flex items-center justify-center bg-gradient-to-br from-primary/10 via-primary/5 to-transparent h-[100px]">
-          <ListMusic className="size-10 text-primary/20" />
+          <ListMusic className="size-10 text-primary" />
         </div>
       )}
 
@@ -151,6 +154,7 @@ export function PodcastEpisodeContent({ event }: { event: NostrEvent }) {
   const player = useAudioPlayer();
   const parsed = useMemo(() => parsePodcastEpisode(event), [event]);
   const author = useAuthor(event.pubkey);
+  const proxy = useImageProxy();
   const displayName = getDisplayName(author.data?.metadata, event.pubkey);
 
   if (!parsed) return null;
@@ -182,14 +186,14 @@ export function PodcastEpisodeContent({ event }: { event: NostrEvent }) {
       {/* Cover artwork — clicking anywhere here plays/pauses */}
       {parsed.artwork ? (
         <div className="relative aspect-square max-h-[280px] w-full overflow-hidden cursor-pointer" onClick={handlePlay}>
-          <img src={parsed.artwork} alt={parsed.title} className="w-full h-full object-cover" loading="lazy" />
+          <img src={proxy(parsed.artwork, 600)} alt={parsed.title} className="w-full h-full object-cover" loading="lazy" />
           <div className="absolute inset-0 flex items-center justify-center bg-black/0 hover:bg-black/10 transition-colors">
             <PlayButton isPlaying={player.isPlaying} isActive={isNowPlaying} onClick={handlePlay} size="lg" />
           </div>
         </div>
       ) : (
         <div className="relative flex items-center justify-center bg-gradient-to-br from-primary/10 via-primary/5 to-transparent h-[140px] cursor-pointer" onClick={handlePlay}>
-          <Podcast className="size-10 text-primary/20" />
+          <Podcast className="size-10 text-primary" />
           <div className="absolute inset-0 flex items-center justify-center">
             <PlayButton isPlaying={player.isPlaying} isActive={isNowPlaying} onClick={handlePlay} size="lg" />
           </div>
@@ -248,7 +252,7 @@ export function PodcastTrailerContent({ event }: { event: NostrEvent }) {
     >
       {/* Compact header — clicking anywhere here plays/pauses */}
       <div className="flex items-center justify-center bg-gradient-to-br from-primary/10 via-primary/5 to-transparent h-[100px] relative cursor-pointer" onClick={handlePlay}>
-        <Podcast className="size-8 text-primary/20" />
+        <Podcast className="size-8 text-primary" />
         <div className="absolute inset-0 flex items-center justify-center">
           <PlayButton isPlaying={player.isPlaying} isActive={isNowPlaying} onClick={handlePlay} size="lg" />
         </div>

src/components/AudioNavigationGuard.tsx

@@ -1,25 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useLocation } from 'react-router-dom';
-import { useAudioPlayer } from '@/contexts/audioPlayerContextDef';
-
-/**
- * Auto-minimizes the audio player when the user navigates to a different page.
- * No dialog — audio just keeps playing in the floating mini-bar.
- */
-export function AudioNavigationGuard() {
-  const { currentTrack, minimized, minimize } = useAudioPlayer();
-  const location = useLocation();
-  const prevPath = useRef(location.pathname);
-
-  useEffect(() => {
-    if (location.pathname !== prevPath.current) {
-      // Route changed — minimize if playing and expanded
-      if (currentTrack && !minimized) {
-        minimize();
-      }
-      prevPath.current = location.pathname;
-    }
-  }, [location.pathname, currentTrack, minimized, minimize]);
-
-  return null;
-}

src/components/AuthorByline.tsx

@@ -0,0 +1,143 @@
+import { Trans } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useProfileUrl } from '@/hooks/useProfileUrl';
+import { getDisplayName } from '@/lib/genUserName';
+import { sanitizeUrl } from '@/lib/sanitizeUrl';
+import { cn } from '@/lib/utils';
+
+/**
+ * Unified author display used by every card and detail page that
+ * surfaces the human behind an event. Standardizes:
+ *
+ *  - Avatar component (shadcn `Avatar` + initials fallback).
+ *  - Display-name resolution via `getDisplayName` (display_name → name → "Anonymous").
+ *  - Link target via `useProfileUrl` (nip05 path when verified, npub otherwise).
+ *  - i18n: the "by {name}" label uses the shared `common.byAuthor`
+ *    key so every surface ships the same translated string in every
+ *    locale.
+ *  - Click semantics inside a card: when `insideLink` is true the
+ *    byline renders as a `<button>` that calls `navigate()` and stops
+ *    propagation, so an outer `<Link>` keeps wrapping the whole card
+ *    without nesting `<a>` inside `<a>` (invalid HTML, React Router
+ *    warns).
+ *
+ * Two visual variants:
+ *
+ *  - `card` (default): muted text, 20px avatar, sized for the
+ *    bottom row of a feed card.
+ *  - `hero`: white text with drop-shadow, 32px avatar with a soft
+ *    ring; for use on top of dark scrims in detail-page heroes.
+ */
+interface AuthorBylineProps {
+  pubkey: string;
+  /** Visual variant. `card` is the small inline footer style; `hero` is large white-on-dark. */
+  variant?: 'card' | 'hero';
+  /**
+   * True when this byline is rendered inside another `<Link>` (cards
+   * wrap themselves in one). Renders the byline as a `<button>` that
+   * navigates and stops propagation, avoiding nested anchors.
+   */
+  insideLink?: boolean;
+  className?: string;
+}
+
+export function AuthorByline({
+  pubkey,
+  variant = 'card',
+  insideLink = false,
+  className,
+}: AuthorBylineProps) {
+  const navigate = useNavigate();
+  const author = useAuthor(pubkey);
+  const metadata = author.data?.metadata;
+  const displayName = getDisplayName(metadata, pubkey);
+  const profileUrl = useProfileUrl(pubkey, metadata);
+  const picture = sanitizeUrl(metadata?.picture);
+  const initials = displayName.slice(0, 2).toUpperCase();
+
+  const isHero = variant === 'hero';
+
+  const wrapperClass = cn(
+    'inline-flex items-center gap-2 min-w-0 text-left group/byline',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-full',
+    'motion-safe:transition-colors',
+    isHero
+      ? 'text-white/90 hover:text-white text-sm sm:text-base gap-2.5'
+      : 'text-xs text-muted-foreground hover:text-foreground',
+    className,
+  );
+
+  const avatarClass = cn(
+    isHero ? 'size-8 sm:size-9 ring-2 ring-white/30 shrink-0' : 'size-5 shrink-0',
+  );
+
+  const fallbackClass = cn(
+    'text-[10px]',
+    isHero ? 'bg-white/15 text-white text-xs' : 'bg-secondary text-secondary-foreground',
+  );
+
+  const labelClass = cn(
+    'truncate min-w-0',
+    isHero && '[text-shadow:0_1px_3px_rgba(0,0,0,0.7)]',
+  );
+
+  const nameClass = cn(
+    isHero
+      ? 'font-semibold underline-offset-4 group-hover/byline:underline'
+      : 'font-medium text-foreground',
+  );
+
+  const inner = (
+    <>
+      <Avatar className={avatarClass}>
+        {picture && <AvatarImage src={picture} alt="" />}
+        <AvatarFallback className={fallbackClass}>{initials}</AvatarFallback>
+      </Avatar>
+      <span className={labelClass}>
+        <Trans
+          i18nKey="common.byAuthor"
+          values={{ name: displayName }}
+          components={{ 0: <span className={nameClass} /> }}
+        />
+      </span>
+    </>
+  );
+
+  if (insideLink) {
+    return (
+      <button
+        type="button"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          navigate(profileUrl);
+        }}
+        className={wrapperClass}
+        aria-label={displayName}
+      >
+        {inner}
+      </button>
+    );
+  }
+
+  return (
+    <a
+      href={profileUrl}
+      onClick={(e) => {
+        // Use SPA navigation; preserve modifier-clicks for new tabs.
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+        e.preventDefault();
+        e.stopPropagation();
+        navigate(profileUrl);
+      }}
+      className={wrapperClass}
+      aria-label={displayName}
+    >
+      {inner}
+    </a>
+  );
+}
+

src/components/AwardBadgeDialog.tsx

@@ -128,7 +128,7 @@ export function AwardBadgeDialog({ open, onOpenChange, badgeATag, badgeName }: A
                       </AvatarFallback>
                     </Avatar>
                     <span className="max-w-[100px] truncate">{name}</span>
-                    <X className="size-3 opacity-60" />
+                    <X className="size-3" />
                   </button>
                 );
               })}
@@ -154,12 +154,12 @@ export function AwardBadgeDialog({ open, onOpenChange, badgeATag, badgeName }: A
             </div>
           ) : query.trim().length > 0 ? (
             <div className="flex flex-col items-center justify-center py-10 text-muted-foreground text-sm">
-              <Search className="size-8 mb-2 opacity-30" />
+              <Search className="size-8 mb-2" />
               No users found
             </div>
           ) : (
             <div className="flex flex-col items-center justify-center py-10 text-muted-foreground text-sm">
-              <Search className="size-8 mb-2 opacity-30" />
+              <Search className="size-8 mb-2" />
               Search to find users
             </div>
           )}

src/components/BackgroundPicker.tsx

@@ -1,174 +0,0 @@
-import { useRef } from 'react';
-import { ImagePlus, X, Loader2 } from 'lucide-react';
-
-import { useTheme } from '@/hooks/useTheme';
-import { useUploadFile } from '@/hooks/useUploadFile';
-import { useToast } from '@/hooks/useToast';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import { resizeImage } from '@/lib/resizeImage';
-import type { ThemeBackground } from '@/themes';
-
-/**
- * Background image picker for theme customization.
- *
- * Supports two modes:
- * - **Uncontrolled** (default): reads/writes via `useTheme().applyCustomTheme()`
- * - **Controlled**: pass `value` and `onChange` props to manage state externally
- */
-export function BackgroundPicker({ value, onChange }: {
-  /** Controlled value — overrides useTheme() when provided. */
-  value?: ThemeBackground | undefined;
-  /** Controlled onChange — called instead of applyCustomTheme() when provided. */
-  onChange?: (bg: ThemeBackground | undefined) => void;
-} = {}) {
-  const { theme, customTheme, applyCustomTheme } = useTheme();
-  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
-  const { toast } = useToast();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const controlled = onChange !== undefined;
-
-  const currentBg: ThemeBackground | undefined = controlled
-    ? value
-    : (theme === 'custom' ? customTheme?.background : undefined);
-
-  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    e.target.value = '';
-
-    if (!file.type.startsWith('image/')) {
-      toast({ title: 'Invalid file', description: 'Please select an image file.', variant: 'destructive' });
-      return;
-    }
-
-    try {
-      // Resize & convert to JPEG before uploading for better performance.
-      const { file: optimized, dimensions } = await resizeImage(file);
-
-      const tags = await uploadFile(optimized);
-      const url = tags[0][1];
-
-      const bg: ThemeBackground = {
-        url,
-        mode: 'cover',
-        mimeType: optimized.type,
-        dimensions,
-      };
-
-      if (controlled) {
-        onChange(bg);
-      } else {
-        const currentColors = customTheme?.colors ?? {
-          background: '228 20% 10%',
-          text: '210 40% 98%',
-          primary: '258 70% 60%',
-        };
-        applyCustomTheme({
-          ...customTheme,
-          colors: currentColors,
-          background: bg,
-        });
-      }
-    } catch (error) {
-      console.error('Failed to upload background:', error);
-      toast({ title: 'Upload failed', description: 'Could not upload the image.', variant: 'destructive' });
-    }
-  };
-
-  const handleRemove = () => {
-    if (controlled) {
-      onChange(undefined);
-      return;
-    }
-    if (!customTheme) return;
-    applyCustomTheme({
-      ...customTheme,
-      background: undefined,
-    });
-  };
-
-  const handleModeChange = (mode: 'cover' | 'tile') => {
-    if (controlled) {
-      if (!value) return;
-      onChange({ ...value, mode });
-      return;
-    }
-    if (!customTheme?.background) return;
-    applyCustomTheme({
-      ...customTheme,
-      background: { ...customTheme.background, mode },
-    });
-  };
-
-  return (
-    <div className="space-y-2">
-      <span className="text-xs font-medium text-muted-foreground">
-        Background
-      </span>
-
-      {currentBg ? (
-        <div className="space-y-2">
-          <div className="relative rounded-lg overflow-hidden border border-border">
-            <img
-              src={currentBg.url}
-              alt="Theme background"
-              className="w-full h-24 object-cover"
-            />
-            <Button
-              variant="secondary"
-              size="icon"
-              className="absolute top-1.5 right-1.5 size-6 rounded-full bg-background/80 backdrop-blur-sm hover:bg-background"
-              onClick={handleRemove}
-            >
-              <X className="size-3.5" />
-            </Button>
-          </div>
-
-          {/* Mode toggle */}
-          <div className="flex gap-1 rounded-lg border border-border p-0.5 w-fit">
-            {(['cover', 'tile'] as const).map((mode) => (
-              <button
-                key={mode}
-                onClick={() => handleModeChange(mode)}
-                className={cn(
-                  'px-3 py-1 rounded-md text-xs font-medium transition-colors',
-                  (currentBg.mode ?? 'cover') === mode
-                    ? 'bg-primary text-primary-foreground'
-                    : 'text-muted-foreground hover:text-foreground',
-                )}
-              >
-                {mode === 'cover' ? 'Cover' : 'Tile'}
-              </button>
-            ))}
-          </div>
-        </div>
-      ) : (
-        <button
-          onClick={() => inputRef.current?.click()}
-          disabled={isUploading}
-          className="w-full h-20 rounded-lg border-2 border-dashed border-border hover:border-primary/40 transition-colors flex flex-col items-center justify-center gap-1.5 text-muted-foreground hover:text-foreground disabled:opacity-50"
-        >
-          {isUploading ? (
-            <Loader2 className="size-4 animate-spin" />
-          ) : (
-            <>
-              <ImagePlus className="size-4" />
-              <span className="text-xs">Upload image</span>
-            </>
-          )}
-        </button>
-      )}
-
-      <input
-        ref={inputRef}
-        type="file"
-        accept="image/*"
-        className="hidden"
-        onChange={handleFileChange}
-      />
-    </div>
-  );
-}
-
-

src/components/BadgeAwardCard.tsx

@@ -152,7 +152,7 @@ function BadgeShowcaseFallback({
   const body = (
     <div className="mt-3 rounded-2xl border border-dashed border-border py-10 px-6 flex flex-col items-center gap-3">
       <div className="size-20 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-transparent flex items-center justify-center">
-        <Award className="size-8 text-primary/40" />
+        <Award className="size-8 text-primary" />
       </div>
       {name ? (
         <p className="text-sm font-semibold text-center">{name}</p>

src/components/BadgeContent.tsx

@@ -1,8 +1,9 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { Award } from 'lucide-react';
 import type { NostrEvent } from '@nostrify/nostrify';
 
 import { useCardTilt } from '@/hooks/useCardTilt';
+import { useImageProxy } from '@/hooks/useImageProxy';
 import { parseBadgeDefinition } from '@/lib/parseBadgeDefinition';
 
 interface BadgeContentProps {
@@ -76,10 +77,19 @@ const INTERACT_PAD = 48;
 function BadgeImageTilt({ heroImage, badgeName }: { heroImage?: string; badgeName: string }) {
   const tilt = useCardTilt(25, 1.08);
   const glareRef = useRef<HTMLDivElement>(null);
+  const proxy = useImageProxy();
+  const [proxyFailed, setProxyFailed] = useState(false);
 
-  const imageMask: React.CSSProperties | undefined = heroImage ? {
-    maskImage: `url(${heroImage})`,
-    WebkitMaskImage: `url(${heroImage})`,
+  // Proxy the hero at 256 (the rendered `size-28` ≈ 112px, 2× DPR). The
+  // `<img>` and the CSS `mask-image` must use the same URL, otherwise the
+  // glare overlay would mask against a different image than the visible one.
+  const proxied = heroImage ? proxy(heroImage, 256) : heroImage;
+  const usingProxy = proxied !== heroImage;
+  const displaySrc = proxyFailed || !usingProxy ? heroImage : proxied;
+
+  const imageMask: React.CSSProperties | undefined = displaySrc ? {
+    maskImage: `url(${displaySrc})`,
+    WebkitMaskImage: `url(${displaySrc})`,
     maskSize: 'cover',
     WebkitMaskSize: 'cover',
     maskRepeat: 'no-repeat',
@@ -132,21 +142,24 @@ function BadgeImageTilt({ heroImage, badgeName }: { heroImage?: string; badgeNam
       onPointerLeave={handlePointerLeave}
       className="relative z-[1] select-none"
     >
-      {heroImage ? (
+      {displaySrc ? (
         <img
-          src={heroImage}
+          src={displaySrc}
           alt={badgeName}
           className="size-28 rounded-2xl object-cover drop-shadow-lg"
           loading="lazy"
           decoding="async"
+          onError={() => {
+            if (usingProxy && !proxyFailed) setProxyFailed(true);
+          }}
         />
       ) : (
         <div className="size-28 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-transparent flex items-center justify-center">
-          <Award className="size-12 text-primary/30" />
+          <Award className="size-12 text-primary" />
         </div>
       )}
       {/* Specular glare overlay */}
-      {heroImage && imageMask && (
+      {displaySrc && imageMask && (
         <div
           ref={glareRef}
           className="absolute pointer-events-none"

src/components/BadgeDetailContent.tsx

@@ -28,6 +28,7 @@ import { genUserName } from '@/lib/genUserName';
 import { VerifiedNip05Text } from '@/components/Nip05Badge';
 import { parseBadgeDefinition } from '@/lib/parseBadgeDefinition';
 import { useCardTilt } from '@/hooks/useCardTilt';
+import { useImageProxy } from '@/hooks/useImageProxy';
 import { useProfileUrl } from '@/hooks/useProfileUrl';
 import { AwardBadgeDialog } from '@/components/AwardBadgeDialog';
 import { NoteMoreMenu } from '@/components/NoteMoreMenu';
@@ -130,7 +131,7 @@ export function BadgeDetailContent({ event }: { event: NostrEvent }) {
         <BadgeHero heroImage={heroImage} badgeName={badge.name} />
       ) : (
         <div className="flex items-center justify-center h-[180px]">
-          <Award className="size-16 text-primary/20" />
+          <Award className="size-16 text-primary" />
         </div>
       )}
 
@@ -285,7 +286,7 @@ function AwardedToTab({ awardedPubkeys, previewPubkeys, membersMap, membersLoadi
   if (awardedPubkeys.length === 0) {
     return (
       <div className="py-16 flex flex-col items-center gap-3 text-center px-8">
-        <Users className="size-8 text-muted-foreground/30" />
+        <Users className="size-8 text-muted-foreground" />
         <p className="text-sm text-muted-foreground">No one has been awarded this badge yet.</p>
       </div>
     );
@@ -386,7 +387,7 @@ function HoldersFeedTab({ awardedPubkeys, awardsLoading }: {
   if (awardedPubkeys.length === 0) {
     return (
       <div className="py-16 flex flex-col items-center gap-3 text-center px-8">
-        <Newspaper className="size-8 text-muted-foreground/30" />
+        <Newspaper className="size-8 text-muted-foreground" />
         <p className="text-sm text-muted-foreground">No one has been awarded this badge yet, so there's no feed to show.</p>
       </div>
     );
@@ -395,7 +396,7 @@ function HoldersFeedTab({ awardedPubkeys, awardsLoading }: {
   if (feedEvents.length === 0) {
     return (
       <div className="py-16 flex flex-col items-center gap-3 text-center px-8">
-        <Newspaper className="size-8 text-muted-foreground/30" />
+        <Newspaper className="size-8 text-muted-foreground" />
         <p className="text-sm text-muted-foreground">No posts from badge holders yet.</p>
       </div>
     );
@@ -435,7 +436,7 @@ function CommentsTab({ event, orderedReplies, commentsLoading }: {
         <FlatThreadedReplyList replies={orderedReplies} />
       ) : (
         <div className="py-16 flex flex-col items-center gap-3 text-center px-8">
-          <MessageCircle className="size-8 text-muted-foreground/30" />
+          <MessageCircle className="size-8 text-muted-foreground" />
           <p className="text-sm text-muted-foreground">No comments yet. Be the first to comment on this badge.</p>
         </div>
       )}
@@ -497,12 +498,21 @@ function BadgeHero({ heroImage, badgeName }: { heroImage: string; badgeName: str
   const tilt = useCardTilt(30, 1.06);
   const glareRef = useRef<HTMLDivElement>(null);
   const glareFadeTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const proxy = useImageProxy();
+  const [proxyFailed, setProxyFailed] = useState(false);
+
+  // Proxy at 320 — rendered `size-36` is 144px, 2× DPR = 288. Round up.
+  // Mask URL and <img> src must match; both follow the same fallback path
+  // so the glare overlay always clips to the visible image.
+  const proxied = proxy(heroImage, 320);
+  const usingProxy = proxied !== heroImage;
+  const displaySrc = proxyFailed || !usingProxy ? heroImage : proxied;
 
   // Mask string that clips overlays to the badge image's visible pixels.
   // This ensures glare and edge effects don't paint over transparent areas.
   const imageMask: React.CSSProperties = {
-    maskImage: `url(${heroImage})`,
-    WebkitMaskImage: `url(${heroImage})`,
+    maskImage: `url(${displaySrc})`,
+    WebkitMaskImage: `url(${displaySrc})`,
     maskSize: 'cover',
     WebkitMaskSize: 'cover',
     maskRepeat: 'no-repeat',
@@ -614,11 +624,14 @@ function BadgeHero({ heroImage, badgeName }: { heroImage: string; badgeName: str
         className="relative select-none"
       >
         <img
-          src={heroImage}
+          src={displaySrc}
           alt={badgeName}
           className="size-36 object-cover drop-shadow-lg"
           loading="lazy"
           draggable={false}
+          onError={() => {
+            if (usingProxy && !proxyFailed) setProxyFailed(true);
+          }}
         />
         {/* Specular glare overlay — masked to the image's alpha channel */}
         <div

src/components/BadgeRecoveryDialog.tsx

@@ -1,388 +0,0 @@
-import { useState, useMemo } from 'react';
-import { useNostr } from '@nostrify/react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import type { NostrEvent, NostrFilter } from '@nostrify/nostrify';
-
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
-import { BadgeThumbnail } from '@/components/BadgeThumbnail';
-import { parseBadgeDefinition, type BadgeData } from '@/lib/parseBadgeDefinition';
-import { parseProfileBadges } from '@/lib/parseProfileBadges';
-import { useCurrentUser } from '@/hooks/useCurrentUser';
-import { useNostrPublish } from '@/hooks/useNostrPublish';
-import { useToast } from '@/hooks/useToast';
-import { BADGE_PROFILE_KIND, BADGE_PROFILE_KIND_LEGACY, BADGE_DEFINITION_KIND } from '@/lib/badgeUtils';
-import { cn } from '@/lib/utils';
-import { Award, Check, Loader2, RotateCcw } from 'lucide-react';
-
-/**
- * Query all events matching a filter using `req()` instead of `query()`.
- * This bypasses NSet deduplication in NPool.query(), which discards older
- * versions of replaceable events. We need all historical versions for recovery.
- */
-async function queryAllEvents(
-  nostr: { req(filters: NostrFilter[], opts?: { signal?: AbortSignal }): AsyncIterable<['EVENT', string, NostrEvent] | ['EOSE', string] | ['CLOSED', string, string]> },
-  filters: NostrFilter[],
-  signal: AbortSignal,
-): Promise<NostrEvent[]> {
-  const events: NostrEvent[] = [];
-  const seen = new Set<string>();
-
-  for await (const msg of nostr.req(filters, { signal })) {
-    if (msg[0] === 'EOSE' || msg[0] === 'CLOSED') break;
-    if (msg[0] === 'EVENT') {
-      const event = msg[2];
-      if (!seen.has(event.id)) {
-        seen.add(event.id);
-        events.push(event);
-      }
-    }
-  }
-
-  return events;
-}
-
-interface BadgeRecoveryDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-/** Format a unix timestamp into a human-readable date string. */
-function formatDate(timestamp: number): string {
-  return new Date(timestamp * 1000).toLocaleDateString(undefined, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-}
-
-/** Summary of badges parsed from a snapshot. */
-interface BadgeSummary {
-  count: number;
-  /** Parsed badge refs with their a-tag and identifier. */
-  refs: { aTag: string; pubkey: string; identifier: string }[];
-}
-
-/** Parse all badge refs from a profile badges event. */
-function parseBadgeSnapshot(event: NostrEvent): BadgeSummary {
-  const refs = parseProfileBadges(event);
-  return {
-    count: refs.length,
-    refs: refs.map((r) => ({ aTag: r.aTag, pubkey: r.pubkey, identifier: r.identifier })),
-  };
-}
-
-// ─── Badge Snapshot Card ──────────────────────────────────────────────
-
-function BadgeSnapshotCard({
-  summary,
-  event,
-  isCurrent,
-  onRestore,
-  isRestoring,
-  badgeMap,
-}: {
-  summary: BadgeSummary;
-  event: NostrEvent;
-  isCurrent: boolean;
-  onRestore: () => void;
-  isRestoring: boolean;
-  badgeMap: Map<string, BadgeData>;
-}) {
-  /** Show up to 5 badge thumbnails in the preview. */
-  const previewRefs = summary.refs.slice(0, 5);
-  const remaining = Math.max(0, summary.count - previewRefs.length);
-
-  return (
-    <div
-      className={cn(
-        'group relative rounded-xl border p-4 transition-all',
-        isCurrent
-          ? 'border-primary/40 bg-primary/5'
-          : 'border-border hover:border-primary/20 hover:bg-secondary/30',
-      )}
-    >
-      {isCurrent && (
-        <div className="absolute top-3 right-3 flex items-center gap-1 text-xs font-medium text-primary">
-          <Check className="size-3.5" />
-          Current
-        </div>
-      )}
-
-      <div className="flex items-center gap-3">
-        <div className="flex items-center justify-center size-11 shrink-0 rounded-full bg-primary/10">
-          <Award className="size-5 text-primary" />
-        </div>
-
-        <div className="min-w-0 flex-1 space-y-1.5">
-          <div className="font-semibold text-sm">
-            {summary.count.toLocaleString()} {summary.count === 1 ? 'badge' : 'badges'}
-          </div>
-
-          {/* Badge thumbnail previews */}
-          {previewRefs.length > 0 && (
-            <div className="flex items-center gap-1.5 flex-wrap">
-              {previewRefs.map((ref) => {
-                const badge = badgeMap.get(ref.aTag);
-                return badge ? (
-                  <BadgeThumbnail key={ref.aTag} badge={badge} size={24} className="shrink-0" />
-                ) : (
-                  <div
-                    key={ref.aTag}
-                    className="size-6 rounded border border-border bg-secondary/30 flex items-center justify-center shrink-0"
-                  >
-                    <Award className="size-3 text-muted-foreground" />
-                  </div>
-                );
-              })}
-              {remaining > 0 && (
-                <span className="text-[11px] text-muted-foreground">
-                  +{remaining}
-                </span>
-              )}
-            </div>
-          )}
-
-          <div className="text-[11px] text-muted-foreground/70 pt-0.5">
-            {formatDate(event.created_at)}
-          </div>
-        </div>
-      </div>
-
-      {!isCurrent && (
-        <div className="mt-3 flex justify-end">
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-8 text-xs rounded-lg gap-1.5"
-            onClick={onRestore}
-            disabled={isRestoring}
-          >
-            {isRestoring ? (
-              <Loader2 className="size-3.5 animate-spin" />
-            ) : (
-              <RotateCcw className="size-3.5" />
-            )}
-            Restore
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── Empty State ──────────────────────────────────────────────────────
-
-function EmptyState() {
-  return (
-    <div className="flex flex-col items-center justify-center py-12 text-center">
-      <p className="text-sm text-muted-foreground">
-        No badge list history found. Your relay may not store historical events.
-      </p>
-    </div>
-  );
-}
-
-// ─── Loading Skeleton ─────────────────────────────────────────────────
-
-function SnapshotSkeleton() {
-  return (
-    <div className="space-y-3">
-      {[1, 2, 3].map((i) => (
-        <div key={i} className="rounded-xl border p-4 space-y-3">
-          <div className="flex items-center gap-3">
-            <Skeleton className="size-11 rounded-full shrink-0" />
-            <div className="space-y-2 flex-1">
-              <Skeleton className="h-4 w-28" />
-              <Skeleton className="h-3 w-40" />
-              <Skeleton className="h-3 w-20" />
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// ─── Badge History Content ────────────────────────────────────────────
-
-function BadgeHistoryContent({ onClose }: { onClose: () => void }) {
-  const { nostr } = useNostr();
-  const { user } = useCurrentUser();
-  const { mutateAsync: publishEvent } = useNostrPublish();
-  const { toast } = useToast();
-  const queryClient = useQueryClient();
-  const [restoringId, setRestoringId] = useState<string | null>(null);
-
-  const pubkey = user?.pubkey;
-
-  // Fetch all historical kind 10008 and legacy 30008 events
-  const badgeHistory = useQuery<NostrEvent[]>({
-    queryKey: ['badge-recovery', 'history', pubkey],
-    queryFn: async () => {
-      if (!pubkey) return [];
-      const events = await queryAllEvents(
-        nostr,
-        [
-          { kinds: [BADGE_PROFILE_KIND], authors: [pubkey] },
-          { kinds: [BADGE_PROFILE_KIND_LEGACY], authors: [pubkey], '#d': ['profile_badges'] },
-        ],
-        AbortSignal.timeout(10000),
-      );
-      return events.sort((a, b) => b.created_at - a.created_at);
-    },
-    enabled: !!pubkey,
-    staleTime: 30_000,
-  });
-
-  // Parse all snapshots
-  const parsedSnapshots = useMemo(() => {
-    if (!badgeHistory.data) return new Map<string, BadgeSummary>();
-    const results = new Map<string, BadgeSummary>();
-    for (const event of badgeHistory.data) {
-      results.set(event.id, parseBadgeSnapshot(event));
-    }
-    return results;
-  }, [badgeHistory.data]);
-
-  // Collect all unique badge definition refs across all snapshots for thumbnail fetching
-  const allBadgeRefs = useMemo(() => {
-    const seen = new Set<string>();
-    const refs: { pubkey: string; identifier: string; aTag: string }[] = [];
-    for (const summary of parsedSnapshots.values()) {
-      for (const ref of summary.refs) {
-        if (!seen.has(ref.aTag)) {
-          seen.add(ref.aTag);
-          refs.push(ref);
-        }
-      }
-    }
-    return refs;
-  }, [parsedSnapshots]);
-
-  // Fetch badge definitions for thumbnails
-  const badgeDefsQuery = useQuery({
-    queryKey: ['badge-recovery', 'definitions', allBadgeRefs.map((r) => r.aTag).join(',')],
-    queryFn: async ({ signal }) => {
-      if (allBadgeRefs.length === 0) return [];
-      const filters = allBadgeRefs.map((ref) => ({
-        kinds: [BADGE_DEFINITION_KIND as number],
-        authors: [ref.pubkey],
-        '#d': [ref.identifier],
-        limit: 1,
-      }));
-      return nostr.query(filters, { signal });
-    },
-    enabled: allBadgeRefs.length > 0,
-    staleTime: 5 * 60_000,
-  });
-
-  // Build badge data map for thumbnails
-  const badgeMap = useMemo(() => {
-    const map = new Map<string, BadgeData>();
-    if (!badgeDefsQuery.data) return map;
-    for (const event of badgeDefsQuery.data) {
-      const parsed = parseBadgeDefinition(event);
-      if (!parsed) continue;
-      const aTag = `${BADGE_DEFINITION_KIND}:${event.pubkey}:${parsed.identifier}`;
-      map.set(aTag, parsed);
-    }
-    return map;
-  }, [badgeDefsQuery.data]);
-
-  const badgeEvents = badgeHistory.data ?? [];
-  const currentBadgeId = badgeEvents[0]?.id;
-
-  const handleRestore = async (event: NostrEvent) => {
-    setRestoringId(event.id);
-    try {
-      // Re-publish as kind 10008 (always write to the new kind),
-      // stripping any legacy `d` tag from kind 30008 events.
-      const tags = event.tags.filter(([n, v]) => !(n === 'd' && v === 'profile_badges'));
-
-      await publishEvent({
-        kind: BADGE_PROFILE_KIND,
-        content: event.content,
-        tags,
-        created_at: Math.floor(Date.now() / 1000),
-      });
-
-      toast({
-        title: 'Badge list restored',
-        description: `Successfully restored from ${formatDate(event.created_at)}.`,
-      });
-
-      queryClient.invalidateQueries({ queryKey: ['badge-recovery', 'history', pubkey] });
-      queryClient.invalidateQueries({ queryKey: ['profile-badges', pubkey] });
-
-      onClose();
-    } catch (error) {
-      console.error('Failed to restore badge list:', error);
-      toast({
-        title: 'Restore failed',
-        description: 'Could not republish the badge list. Please try again.',
-        variant: 'destructive',
-      });
-    } finally {
-      setRestoringId(null);
-    }
-  };
-
-  if (badgeHistory.isLoading) {
-    return <SnapshotSkeleton />;
-  }
-
-  if (badgeEvents.length === 0) {
-    return <EmptyState />;
-  }
-
-  return (
-    <>
-      {badgeEvents.map((event) => {
-        const summary = parsedSnapshots.get(event.id);
-        if (!summary) return null;
-
-        return (
-          <BadgeSnapshotCard
-            key={event.id}
-            event={event}
-            summary={summary}
-            isCurrent={event.id === currentBadgeId}
-            onRestore={() => handleRestore(event)}
-            isRestoring={restoringId === event.id}
-            badgeMap={badgeMap}
-          />
-        );
-      })}
-    </>
-  );
-}
-
-// ─── Main Dialog ──────────────────────────────────────────────────────
-
-export function BadgeRecoveryDialog({ open, onOpenChange }: BadgeRecoveryDialogProps) {
-  const close = () => onOpenChange(false);
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-lg p-0 gap-0 rounded-2xl overflow-hidden">
-        <DialogHeader className="px-6 pt-6 pb-4">
-          <DialogTitle className="text-lg font-bold">Badge List Recovery</DialogTitle>
-          <p className="text-sm text-muted-foreground mt-1">
-            Browse and restore previous versions of your accepted badges.
-          </p>
-        </DialogHeader>
-
-        <ScrollArea className="h-[420px]">
-          <div className="p-4 space-y-3">
-            <BadgeHistoryContent onClose={close} />
-          </div>
-        </ScrollArea>
-      </DialogContent>
-    </Dialog>
-  );
-}

src/components/BadgeThumbnail.tsx

@@ -1,8 +1,9 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { Award } from 'lucide-react';
 
 import type { BadgeData } from '@/lib/parseBadgeDefinition';
 import { useCardTilt } from '@/hooks/useCardTilt';
+import { useImageProxy } from '@/hooks/useImageProxy';
 import { cn } from '@/lib/utils';
 
 interface BadgeThumbnailProps {
@@ -21,6 +22,8 @@ interface BadgeThumbnailProps {
  */
 export function BadgeThumbnail({ badge, size = 48, className }: BadgeThumbnailProps) {
   const thumbUrl = pickThumb(badge, size);
+  const proxy = useImageProxy();
+  const [proxyFailed, setProxyFailed] = useState(false);
   // Tight perspective relative to the small thumbnail makes the 3D rotation
   // clearly visible even on 28-48px elements.
   const tilt = useCardTilt(35, 1.15, size * 3);
@@ -46,6 +49,14 @@ export function BadgeThumbnail({ badge, size = 48, className }: BadgeThumbnailPr
     touchAction: 'auto',
   };
 
+  // Proxy at 2× the rendered size (retina), with a floor of 128 so the smallest
+  // 28px callouts still get a reasonable image. wsrv.nl won't upscale below
+  // the source's natural size.
+  const proxyWidth = Math.max(size * 2, 128);
+  const proxied = thumbUrl ? proxy(thumbUrl, proxyWidth) : thumbUrl;
+  const usingProxy = proxied !== thumbUrl;
+  const finalSrc = proxyFailed || !usingProxy ? thumbUrl : proxied;
+
   return (
     <div
       ref={tilt.ref}
@@ -53,14 +64,17 @@ export function BadgeThumbnail({ badge, size = 48, className }: BadgeThumbnailPr
       onPointerMove={handlePointerMove}
       onPointerLeave={handlePointerLeave}
     >
-      {thumbUrl ? (
+      {finalSrc ? (
         <img
-          src={thumbUrl}
+          src={finalSrc}
           alt={badge.name}
           className={cn('rounded-lg object-cover', className)}
           style={{ width: size, height: size }}
           loading="lazy"
           decoding="async"
+          onError={() => {
+            if (usingProxy && !proxyFailed) setProxyFailed(true);
+          }}
         />
       ) : (
         <div
@@ -70,7 +84,7 @@ export function BadgeThumbnail({ badge, size = 48, className }: BadgeThumbnailPr
           )}
           style={{ width: size, height: size }}
         >
-          <Award className="text-primary/30" style={{ width: size * 0.5, height: size * 0.5 }} />
+          <Award className="text-primary" style={{ width: size * 0.5, height: size * 0.5 }} />
         </div>
       )}
     </div>

src/components/BanConfirmDialog.tsx

@@ -64,23 +64,40 @@ export function BanConfirmDialog({
       });
 
       // Invalidate community queries so the moderation overlay updates
-      // immediately (removes banned content without a page refresh).
-      await queryClient.invalidateQueries({ queryKey: ['community-members', communityATag] });
+      // immediately (removes banned content without a page refresh). The
+      // activity feed's key is `['community-activity-feed', <aTagsKey>]`
+      // where aTagsKey is a comma-joined list of the viewer's subscribed A
+      // tags. Predicate-match any feed whose aTagsKey contains this
+      // communityATag so the banned post disappears immediately.
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['community-members', communityATag] }),
+        queryClient.invalidateQueries({
+          predicate: (q) => {
+            const [root, aTagsKey] = q.queryKey;
+            return root === 'community-activity-feed'
+              && typeof aTagsKey === 'string'
+              && aTagsKey.split(',').includes(communityATag);
+          },
+        }),
+        // Also refresh the organization-activity feed shown on the org
+        // detail page (used by the pledge/campaign shelves).
+        queryClient.invalidateQueries({ queryKey: ['organization-activity', communityATag] }),
+      ]);
 
-      toast({ title: 'Post removed from organization' });
+      toast({ title: 'Post removed from group' });
       setReason('');
       onOpenChange(false);
     } catch {
-      toast({ title: 'Failed to remove post from organization', variant: 'destructive' });
+      toast({ title: 'Failed to remove post from group', variant: 'destructive' });
     }
   };
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-md rounded-2xl flex flex-col overflow-hidden">
-        <DialogTitle>Remove from organization</DialogTitle>
+        <DialogTitle>Remove from group</DialogTitle>
         <DialogDescription className="text-sm text-muted-foreground">
-          This will hide the post from canonical organization views.
+          This will hide the post from canonical group views.
         </DialogDescription>
 
         <div className="space-y-2">

src/components/BeneficiaryDonateDialog.tsx

@@ -1,190 +0,0 @@
-import { useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { AlertTriangle, Check, Copy, ExternalLink } from 'lucide-react';
-
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { BitcoinPublicDisclaimer } from '@/components/BitcoinPublicDisclaimer';
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Label } from '@/components/ui/label';
-import { QRCodeCanvas } from '@/components/ui/qrcode';
-import { useAuthor } from '@/hooks/useAuthor';
-import { useProfileUrl } from '@/hooks/useProfileUrl';
-import { useToast } from '@/hooks/useToast';
-import { nostrPubkeyToBitcoinAddress } from '@/lib/bitcoin';
-import { genUserName } from '@/lib/genUserName';
-import { sanitizeUrl } from '@/lib/sanitizeUrl';
-
-interface BeneficiaryDonatePanelProps {
-  /** Hex pubkey of the beneficiary. */
-  pubkey: string;
-}
-
-/**
- * Inline panel rendering a beneficiary's Taproot address as a scannable
- * BIP-21 QR code, a copyable string, and an "Open in wallet" button.
- *
- * Used both by `BeneficiaryDonateDialog` (modal context) and embedded
- * directly into the campaign page when there's a single beneficiary.
- *
- * Always shows the beneficiary's profile preview (avatar + name) as a
- * link to their Nostr profile — even when the surrounding page also
- * identifies a campaign organizer, the beneficiary is a distinct party
- * (the organizer may be running the campaign on someone else's behalf).
- *
- * Intentionally minimal: no amount input, no PSBT/in-app wallet flow —
- * that's `DonateDialog`'s job.
- */
-export function BeneficiaryDonatePanel({
-  pubkey,
-}: BeneficiaryDonatePanelProps) {
-  const { toast } = useToast();
-  const [copied, setCopied] = useState(false);
-
-  const author = useAuthor(pubkey);
-  const metadata = author.data?.metadata;
-  const displayName =
-    metadata?.display_name || metadata?.name || genUserName(pubkey);
-  const picture = sanitizeUrl(metadata?.picture);
-  const profileUrl = useProfileUrl(pubkey, metadata);
-
-  const address = useMemo(
-    () => nostrPubkeyToBitcoinAddress(pubkey),
-    [pubkey],
-  );
-  // BIP-21 URI: most wallets recognize the `bitcoin:` scheme when scanning.
-  // No amount field — donor picks one in their wallet.
-  const bip21 = address ? `bitcoin:${address}` : '';
-
-  const copyAddress = async () => {
-    if (!address) return;
-    try {
-      await navigator.clipboard.writeText(address);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-      toast({ title: 'Address copied' });
-    } catch {
-      toast({
-        title: 'Copy failed',
-        description: 'Select and copy the address manually.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  if (!address) {
-    return (
-      <div className="flex items-center gap-2 text-sm">
-        <AlertTriangle className="size-5 text-orange-500 shrink-0" />
-        <span>We couldn't derive a Bitcoin address for this beneficiary.</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      <Link
-        to={profileUrl}
-        className="flex items-center gap-3 rounded-md -mx-2 px-2 py-1.5 motion-safe:transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <Avatar className="size-10 ring-1 ring-border">
-          {picture && <AvatarImage src={picture} alt="" />}
-          <AvatarFallback className="bg-primary/20 text-primary text-sm">
-            {displayName.slice(0, 2).toUpperCase()}
-          </AvatarFallback>
-        </Avatar>
-        <div className="min-w-0">
-          <div className="font-medium truncate">{displayName}</div>
-        </div>
-      </Link>
-
-      {/* QR code */}
-      <div className="flex justify-center">
-        <div className="rounded-2xl bg-white p-4 shadow-sm">
-          <QRCodeCanvas value={bip21} size={200} level="M" />
-        </div>
-      </div>
-
-      {/* Copyable address */}
-      <div className="space-y-2">
-        <Label className="text-xs text-muted-foreground uppercase tracking-wide">
-          Bitcoin address
-        </Label>
-        <button
-          type="button"
-          onClick={copyAddress}
-          className="w-full flex items-center justify-between gap-2 rounded-lg border bg-muted/40 px-3 py-2.5 font-mono text-xs break-all text-left hover:bg-muted/60 motion-safe:transition-colors"
-          aria-label="Copy Bitcoin address"
-        >
-          <span className="break-all">{address}</span>
-          {copied ? (
-            <Check className="size-4 text-green-500 shrink-0" />
-          ) : (
-            <Copy className="size-4 text-muted-foreground shrink-0" />
-          )}
-        </button>
-      </div>
-
-      {/* Privacy notice — informational only. Bitcoin is a public
-          ledger, so the donation can be traced back to the donor's
-          wallet. */}
-      <BitcoinPublicDisclaimer
-        tone="soft"
-        includeCashOutAdvice={false}
-        leadText="Donations are public and can be traced back to you."
-      />
-
-      {/* Open in wallet — relies on the `bitcoin:` URI handler. */}
-      <Button asChild className="w-full">
-        <a href={bip21}>
-          <ExternalLink className="size-4 mr-1.5" />
-          Open in wallet
-        </a>
-      </Button>
-    </div>
-  );
-}
-
-interface BeneficiaryDonateDialogProps {
-  /** Hex pubkey of the beneficiary. */
-  pubkey: string;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-/**
- * Modal wrapper around `BeneficiaryDonatePanel` for places that still want
- * the dialog UX (e.g. multi-beneficiary campaigns, where each row's
- * "Donate" button opens this dialog).
- */
-export function BeneficiaryDonateDialog({
-  pubkey,
-  open,
-  onOpenChange,
-}: BeneficiaryDonateDialogProps) {
-  const author = useAuthor(pubkey);
-  const metadata = author.data?.metadata;
-  const displayName =
-    metadata?.display_name || metadata?.name || genUserName(pubkey);
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Donate to {displayName}</DialogTitle>
-          <DialogDescription className="sr-only">
-            Scan the QR code or copy the Bitcoin address below to donate.
-          </DialogDescription>
-        </DialogHeader>
-
-        <BeneficiaryDonatePanel pubkey={pubkey} />
-      </DialogContent>
-    </Dialog>
-  );
-}

src/components/BirdDetectionContent.tsx

@@ -1,208 +0,0 @@
-import { useMemo } from 'react';
-import { Bird } from 'lucide-react';
-import { Link } from 'react-router-dom';
-import type { NostrEvent } from '@nostrify/nostrify';
-
-import { BirdSongPlayer } from '@/components/BirdSongPlayer';
-import { Skeleton } from '@/components/ui/skeleton';
-import { useWikidataEntity } from '@/hooks/useWikidataEntity';
-import { useWikipediaSummary } from '@/hooks/useWikipediaSummary';
-import { sanitizeUrl } from '@/lib/sanitizeUrl';
-import { cn } from '@/lib/utils';
-
-/**
- * Birdstar kind 2473 — Bird Detection.
- *
- * The species is identified by a NIP-73 `i`/`k` pair pointing at a Wikidata
- * entity URI (e.g. `https://www.wikidata.org/entity/Q26825`). We resolve it
- * through Wikidata → English Wikipedia to get a display name, a short
- * summary, and a thumbnail image.
- *
- * Structured data lives in tags; `content` is an optional freeform note.
- */
-
-const WIKIDATA_URL_RE = /^https:\/\/www\.wikidata\.org\/entity\/(Q\d+)$/;
-
-interface BirdDetectionContentProps {
-  event: NostrEvent;
-  className?: string;
-}
-
-function extractWikidata(tags: string[][]): { id: string; url: string } | null {
-  // A valid detection pairs an `i` tag with `k: web`. There may be multiple
-  // i/k pairs in principle; we take the first `i` whose URL matches.
-  for (const tag of tags) {
-    if (tag[0] !== 'i') continue;
-    const value = tag[1];
-    if (typeof value !== 'string') continue;
-    const m = value.match(WIKIDATA_URL_RE);
-    if (m) return { id: m[1], url: value };
-  }
-  return null;
-}
-
-/** Pull a species label from the `alt` tag: "Bird detection: American Robin (Turdus migratorius)". */
-function extractAltSpecies(tags: string[][]): { common?: string; scientific?: string } | null {
-  const alt = tags.find(([n]) => n === 'alt')?.[1];
-  if (!alt) return null;
-  // Match "Bird detection: <Common> (<Scientific>)" — keep the parser loose
-  // so subtly different NIP-31 prefixes still yield a usable label.
-  const m = alt.match(/^[^:]*:\s*([^()]+?)\s*(?:\(([^)]+)\))?\s*$/);
-  if (!m) return { common: alt };
-  return { common: m[1]?.trim(), scientific: m[2]?.trim() };
-}
-
-/** Extract the scientific name from the `n` tag (Birdstar NIP §"Kind 2473" — the
- * authoritative scientific-name field, added so clients can label a detection
- * without round-tripping Wikidata). Falls through to parsing the `alt` tag for
- * older events authored before `n` was part of the NIP. */
-function extractScientificName(
-  tags: string[][],
-  altScientific: string | undefined,
-): string | undefined {
-  const n = tags.find(([name]) => name === 'n')?.[1];
-  if (typeof n === 'string' && n.trim()) return n.trim();
-  return altScientific;
-}
-
-export function BirdDetectionContent({ event, className }: BirdDetectionContentProps) {
-  const wikidata = useMemo(() => extractWikidata(event.tags), [event.tags]);
-  const altSpecies = useMemo(() => extractAltSpecies(event.tags), [event.tags]);
-  const scientificName = useMemo(
-    () => extractScientificName(event.tags, altSpecies?.scientific),
-    [event.tags, altSpecies?.scientific],
-  );
-  const note = event.content.trim();
-
-  // Resolve Wikidata → English Wikipedia title, then fetch the Wikipedia
-  // summary (extract + thumbnail) for the title.
-  const { data: entity, isLoading: entityLoading } = useWikidataEntity(wikidata?.id ?? null);
-  const wikipediaTitle = entity?.wikipediaTitle ?? null;
-  const { data: summary, isLoading: summaryLoading } = useWikipediaSummary(wikipediaTitle);
-
-  const isLoading = entityLoading || summaryLoading;
-
-  // Prefer the Wikipedia page title for the display name when available,
-  // but fall back to the species parsed from the `alt` tag so the card is
-  // still meaningful while the Wikipedia fetch is in flight (or has failed).
-  const commonName = summary?.title ?? altSpecies?.common ?? 'Unknown species';
-  const extract = summary?.extract;
-  const thumbnail = sanitizeUrl(summary?.thumbnail?.source);
-
-  // The whole card routes to Ditto's external-content page for this
-  // species' Wikidata URL. Other users' kind 2473 detections and
-  // NIP-22 comments both attach to the same `i`-tag identifier, so
-  // the discussion thread aggregates naturally across clients.
-  const discussPath = wikidata ? `/i/${encodeURIComponent(wikidata.url)}` : undefined;
-
-  // When the user's own freeform note exists we show it above the
-  // Wikipedia-derived summary. `content` can be empty per the NIP.
-  const timeStr = new Date(event.created_at * 1000).toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-
-  if (!wikidata) {
-    // Shouldn't happen for a valid kind 2473 (the NIP requires the i tag),
-    // but render something useful rather than silently dropping the event.
-    return (
-      <div className={cn('mt-2 rounded-xl border border-dashed border-border p-4 text-sm text-muted-foreground', className)}>
-        Bird detection with no species reference.
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn('mt-2', className)}>
-      <Link
-        to={discussPath ?? '#'}
-        onClick={(e) => e.stopPropagation()}
-        className="block overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-shadow hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <div className="flex">
-          {/* Thumbnail panel */}
-          <div className="relative w-32 shrink-0 bg-gradient-to-br from-emerald-100 via-sky-100 to-amber-100 sm:w-40 dark:from-indigo-950 dark:via-indigo-900 dark:to-amber-900/40">
-            {isLoading ? (
-              <Skeleton className="h-full w-full" />
-            ) : thumbnail ? (
-              <img
-                src={thumbnail}
-                alt={commonName}
-                className="h-full w-full object-cover"
-                loading="lazy"
-              />
-            ) : (
-              <div className="flex h-full w-full items-center justify-center">
-                <Bird
-                  aria-hidden
-                  strokeWidth={1.5}
-                  className="size-10 text-emerald-700/60 dark:text-amber-300/60"
-                />
-              </div>
-            )}
-            <div className="pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-black/40 to-transparent" />
-            <div className="absolute bottom-1.5 left-2 font-mono text-[10px] uppercase tracking-wider text-white/85">
-              {timeStr}
-            </div>
-          </div>
-
-          {/* Text panel */}
-          <div className="flex min-w-0 flex-1 items-start gap-3 p-3.5">
-            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
-              <div className="min-w-0">
-                <h3 className="truncate text-[15px] font-semibold leading-tight">
-                  {commonName}
-                </h3>
-                {scientificName && (
-                  <p className="mt-0.5 truncate text-xs italic text-muted-foreground">
-                    {scientificName}
-                  </p>
-                )}
-              </div>
-
-              {isLoading ? (
-                <div className="space-y-1.5 pt-0.5">
-                  <Skeleton className="h-3 w-full" />
-                  <Skeleton className="h-3 w-5/6" />
-                  <Skeleton className="h-3 w-2/3" />
-                </div>
-              ) : extract ? (
-                <p className="line-clamp-3 text-[13px] leading-relaxed text-muted-foreground">
-                  {extract}
-                </p>
-              ) : (
-                <p className="text-xs italic text-muted-foreground/70">
-                  Heard at {new Date(event.created_at * 1000).toLocaleString()}.
-                </p>
-              )}
-            </div>
-
-            {/* Reference recording from Wikipedia/Commons, when available.
-             *  `BirdSongPlayer` returns null when the article has no
-             *  usable audio, so the right-hand column collapses
-             *  cleanly and the text reflows across the full card.
-             *  The click handler stops propagation so toggling
-             *  playback doesn't also navigate to `/i/...`. */}
-            {wikipediaTitle && (
-              <div
-                onClick={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                }}
-                className="shrink-0"
-              >
-                <BirdSongPlayer title={wikipediaTitle} ariaLabel={`${commonName} recording`} />
-              </div>
-            )}
-          </div>
-        </div>
-      </Link>
-
-      {note && (
-        <p className="mt-2 text-[15px] leading-relaxed whitespace-pre-wrap break-words">
-          {note}
-        </p>
-      )}
-    </div>
-  );
-}

src/components/BirdSongPlayer.tsx

@@ -1,181 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { Play } from 'lucide-react';
-
-import { Skeleton } from '@/components/ui/skeleton';
-import { useBirdSong, type BirdSong } from '@/hooks/useBirdSong';
-import { cn } from '@/lib/utils';
-
-/**
- * Inline bird-song play button for Wikipedia species pages.
- *
- * Looks up a reference recording from the article (via
- * `useBirdSong` → Wikipedia/Commons) and renders a circular
- * toggle. Clicking plays the song on loop; the play triangle is
- * replaced by an animated equaliser so the single control both
- * triggers and indicates playback. The `<audio>` element is rendered
- * hidden inside the component — callers don't need to thread it
- * through the tree.
- *
- * Returns `null` when no usable recording exists, so the caller can
- * spread it into a header/title row without worrying about a
- * disabled/broken state.
- *
- * Adapted from Birdstar's BirdInfoDialog `useSongPlayer` (see
- * `~/Projects/birdstar/src/components/BirdInfoDialog.tsx`). The
- * iNaturalist fallback from the original is deliberately omitted —
- * per the user's request Ditto only uses Wikipedia/Commons.
- */
-
-interface BirdSongPlayerProps {
-  /**
-   * Wikipedia article title. We resolve it to an audio file on
-   * Wikimedia Commons.
-   */
-  title: string | null;
-  className?: string;
-  /** Rendered in a surrounding flex row; supply a label for a11y when
-   *  the surrounding header doesn't already describe the subject. */
-  ariaLabel?: string;
-}
-
-export function BirdSongPlayer({ title, className, ariaLabel }: BirdSongPlayerProps) {
-  const { data: song, isLoading } = useBirdSong(title);
-
-  if (isLoading) {
-    return (
-      <Skeleton
-        className={cn('size-10 shrink-0 rounded-full', className)}
-        aria-hidden
-      />
-    );
-  }
-
-  if (!song) return null;
-
-  return (
-    <BirdSongButton song={song} className={className} ariaLabel={ariaLabel} />
-  );
-}
-
-function BirdSongButton({
-  song,
-  className,
-  ariaLabel,
-}: {
-  song: BirdSong;
-  className?: string;
-  ariaLabel?: string;
-}) {
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-
-  // When the song source changes (user navigates to a different
-  // species while one is playing), reset to the paused state — the
-  // previous <audio> element unmounts, and we don't want the button
-  // inheriting a stale `isPlaying=true`.
-  useEffect(() => {
-    setIsPlaying(false);
-  }, [song.audioUrl]);
-
-  const toggle = () => {
-    const el = audioRef.current;
-    if (!el) return;
-    if (isPlaying) {
-      el.pause();
-      setIsPlaying(false);
-    } else {
-      // `play()` returns a Promise that rejects when autoplay is
-      // blocked or the source fails to load. Swallow the rejection —
-      // the button stays in the paused state and the user can retry.
-      el.play().then(
-        () => setIsPlaying(true),
-        () => setIsPlaying(false),
-      );
-    }
-  };
-
-  return (
-    <>
-      <button
-        type="button"
-        onClick={toggle}
-        aria-label={
-          isPlaying
-            ? `Pause ${ariaLabel ?? 'reference recording'}`
-            : `Play ${ariaLabel ?? 'reference recording'}`
-        }
-        aria-pressed={isPlaying}
-        title={song.attribution}
-        className={cn(
-          'group inline-flex size-10 shrink-0 items-center justify-center rounded-full',
-          'bg-emerald-500 text-white shadow-md ring-1 ring-emerald-400/40',
-          'transition-[transform,background-color,box-shadow] duration-200',
-          'hover:bg-emerald-600 hover:shadow-lg active:scale-95',
-          'focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 focus-visible:ring-offset-2',
-          'focus-visible:ring-offset-background',
-          'dark:bg-emerald-400 dark:text-emerald-950 dark:hover:bg-emerald-300',
-          className,
-        )}
-      >
-        {isPlaying ? (
-          <EqualiserBars />
-        ) : (
-          // Nudge the play triangle right by 1px — its centroid sits
-          // left of its bounding box and would otherwise look
-          // off-center inside the circle.
-          <Play className="size-4 translate-x-px fill-current" aria-hidden />
-        )}
-      </button>
-
-      <audio
-        ref={audioRef}
-        src={song.audioUrl}
-        preload="none"
-        // Loop the reference recording. Commons bird songs are
-        // typically a few seconds of a single phrase, and users want
-        // to hear it repeatedly to compare with what they heard in
-        // the field. The button (same hit region as the equaliser)
-        // is the explicit stop.
-        loop
-        onPause={() => setIsPlaying(false)}
-        onPlay={() => setIsPlaying(true)}
-        className="hidden"
-      >
-        Your browser does not support embedded audio.
-      </audio>
-    </>
-  );
-}
-
-/**
- * Four vertical bars bouncing with staggered CSS animations,
- * rendered inside the button while playback is active. Color is
- * `currentColor` so it inherits the button's text colour — white on
- * the emerald background in light mode, emerald-950 (matching
- * foreground) in dark mode. Respects `prefers-reduced-motion` via
- * Tailwind's `motion-reduce:` variant so the bars freeze rather
- * than bouncing for users who've asked for less motion.
- */
-function EqualiserBars() {
-  const delays = ['0ms', '120ms', '60ms', '180ms'];
-  return (
-    <span className="flex h-4 items-end gap-[2px]" aria-hidden>
-      {delays.map((delay, i) => (
-        <span
-          key={i}
-          className={cn(
-            'block w-[2px] rounded-full bg-current',
-            // `origin-bottom` keeps the scaleY transform anchored to
-            // the baseline so the bar "grows up" rather than
-            // expanding from its center.
-            'h-full origin-bottom motion-safe:animate-equaliser-bar',
-            // Static midpoint height when motion is reduced, so the
-            // UI still conveys "audio is playing" without movement.
-            'motion-reduce:scale-y-75',
-          )}
-          style={{ animationDelay: delay }}
-        />
-      ))}
-    </span>
-  );
-}

src/components/BirdexChorusButton.tsx

@@ -1,279 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { Play } from 'lucide-react';
-
-import { Skeleton } from '@/components/ui/skeleton';
-import { useBirdSong } from '@/hooks/useBirdSong';
-import { useWikidataEntity } from '@/hooks/useWikidataEntity';
-import { cn } from '@/lib/utils';
-
-/**
- * Chorus play/pause button for a Birdex (kind 12473) life list.
- *
- * A single control that fires every species' reference recording from
- * Wikipedia/Commons *at the same time*, producing an overlapping
- * dawn-chorus effect. Each recording loops independently so the
- * chorus sustains until the user hits pause.
- *
- * Architecture: the parent owns a single `isPlaying` flag. It renders
- * one `BirdexChorusVoice` per species, each of which:
- *   1. Resolves its Wikidata ID → Wikipedia title → Commons audio URL
- *      via the same hooks the tile thumbnails already call (so the
- *      title-resolution round-trips are cache hits).
- *   2. Owns a hidden `<audio loop>` element.
- *   3. Reacts to `isPlaying` by calling `play()` or `pause()` on its
- *      element, and reports ready-state / error-state back up so the
- *      button knows when to show a spinner and whether there's
- *      anything audible to play at all.
- *
- * Voices that fail to resolve audio (species whose Wikipedia article
- * has no usable field recording) are silently skipped — the chorus
- * plays whatever subset has audio. If nothing at all has audio the
- * button hides itself rather than rendering a dead control.
- *
- * Note: every species' audio URL is fetched eagerly on mount. The
- * cost is bounded by the number of species the user already sees as
- * tiles, and every request is cached for 24h via TanStack Query, so
- * a second visit is free.
- */
-
-export interface BirdexChorusSpecies {
-  /** Wikidata entity ID, e.g. "Q26825". */
-  entityId: string;
-}
-
-interface BirdexChorusButtonProps {
-  species: BirdexChorusSpecies[];
-  className?: string;
-}
-
-type VoiceState = 'loading' | 'ready' | 'missing';
-
-export function BirdexChorusButton({ species, className }: BirdexChorusButtonProps) {
-  const [isPlaying, setIsPlaying] = useState(false);
-
-  // Track each voice's readiness so we can disable the button while
-  // anything is still resolving, and hide it entirely when no voice
-  // has usable audio. A Map keyed by entityId so voices can update
-  // their slot without racing by array index.
-  const [voiceStates, setVoiceStates] = useState<Map<string, VoiceState>>(
-    () => new Map(species.map((s) => [s.entityId, 'loading' as VoiceState])),
-  );
-
-  // Keep the map in sync when the species list changes (e.g. the
-  // Birdex event is replaced with a newer version). Entries that
-  // disappear are dropped; new ones start as `loading`.
-  useEffect(() => {
-    setVoiceStates((prev) => {
-      const next = new Map<string, VoiceState>();
-      for (const s of species) {
-        next.set(s.entityId, prev.get(s.entityId) ?? 'loading');
-      }
-      return next;
-    });
-  }, [species]);
-
-  const reportState = useCallback((entityId: string, state: VoiceState) => {
-    setVoiceStates((prev) => {
-      if (prev.get(entityId) === state) return prev;
-      const next = new Map(prev);
-      next.set(entityId, state);
-      return next;
-    });
-  }, []);
-
-  const anyLoading = useMemo(
-    () => Array.from(voiceStates.values()).some((s) => s === 'loading'),
-    [voiceStates],
-  );
-  const readyCount = useMemo(
-    () => Array.from(voiceStates.values()).filter((s) => s === 'ready').length,
-    [voiceStates],
-  );
-
-  // Hide the button entirely once resolution settles and not a single
-  // species produced playable audio. While loading we still render
-  // (the skeleton indicates the chorus is being assembled).
-  //
-  // Crucially, the `BirdexChorusVoice` children must always render
-  // regardless of UI state — they're the hooks that drive the
-  // resolution we're waiting on. Returning early before rendering
-  // them would freeze the button in its initial "loading" state
-  // forever.
-  const hideButton = !anyLoading && readyCount === 0;
-  const showSkeleton = !hideButton && anyLoading && readyCount === 0;
-
-  const toggle = () => setIsPlaying((p) => !p);
-
-  return (
-    <>
-      {hideButton ? null : showSkeleton ? (
-        <Skeleton
-          className={cn('size-10 shrink-0 rounded-full', className)}
-          aria-hidden
-        />
-      ) : (
-        <button
-          type="button"
-          onClick={toggle}
-          aria-pressed={isPlaying}
-          aria-label={
-            isPlaying
-              ? `Pause dawn chorus of ${readyCount} species`
-              : `Play dawn chorus of ${readyCount} species`
-          }
-          className={cn(
-            'group inline-flex size-10 shrink-0 items-center justify-center rounded-full',
-            'bg-emerald-500 text-white shadow-md ring-1 ring-emerald-400/40',
-            'transition-[transform,background-color,box-shadow] duration-200',
-            'hover:bg-emerald-600 hover:shadow-lg active:scale-95',
-            'focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 focus-visible:ring-offset-2',
-            'focus-visible:ring-offset-background',
-            'dark:bg-emerald-400 dark:text-emerald-950 dark:hover:bg-emerald-300',
-            className,
-          )}
-        >
-          {isPlaying ? (
-            <EqualiserBars />
-          ) : (
-            // Nudge the play triangle right by 1px so its visual
-            // centroid aligns with the circle's centre — the glyph's
-            // bounding box is wider on the right than the left.
-            <Play className="size-4 translate-x-px fill-current" aria-hidden />
-          )}
-        </button>
-      )}
-
-      {species.map((s) => (
-        <BirdexChorusVoice
-          key={s.entityId}
-          entityId={s.entityId}
-          isPlaying={isPlaying}
-          onStateChange={reportState}
-        />
-      ))}
-    </>
-  );
-}
-
-/**
- * Four vertical bars bouncing with staggered CSS animations, shown
- * inside the button while the chorus is playing. Matches the
- * equaliser used by `BirdSongPlayer` so the chorus button and the
- * per-species buttons are visually indistinguishable.
- */
-function EqualiserBars() {
-  const delays = ['0ms', '120ms', '60ms', '180ms'];
-  return (
-    <span className="flex h-4 items-end gap-[2px]" aria-hidden>
-      {delays.map((delay, i) => (
-        <span
-          key={i}
-          className={cn(
-            'block w-[2px] rounded-full bg-current',
-            'h-full origin-bottom motion-safe:animate-equaliser-bar',
-            'motion-reduce:scale-y-75',
-          )}
-          style={{ animationDelay: delay }}
-        />
-      ))}
-    </span>
-  );
-}
-
-interface BirdexChorusVoiceProps {
-  entityId: string;
-  isPlaying: boolean;
-  onStateChange: (entityId: string, state: VoiceState) => void;
-}
-
-/**
- * A single voice in the chorus. Resolves Wikidata → Wikipedia title →
- * Commons audio URL and renders a hidden `<audio loop>` element that
- * tracks the shared play/pause state. Renders nothing visible.
- */
-function BirdexChorusVoice({ entityId, isPlaying, onStateChange }: BirdexChorusVoiceProps) {
-  const { data: entity, isLoading: entityLoading, isError: entityError } =
-    useWikidataEntity(entityId);
-  const wikipediaTitle = entity?.wikipediaTitle ?? null;
-
-  // `useBirdSong` only fires once we have a Wikipedia title. While
-  // it's disabled its `isLoading` is false but `data` is undefined,
-  // so we gate readiness on the parent query's state too.
-  const { data: song, isLoading: songLoading, isError: songError } =
-    useBirdSong(wikipediaTitle);
-
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const audioUrl = song?.audioUrl ?? null;
-
-  // Report our state upward whenever it changes. "missing" fires both
-  // when Wikidata has no enwiki sitelink and when Wikipedia has no
-  // usable recording — the UI treats both the same.
-  useEffect(() => {
-    if (entityError || (!entityLoading && !wikipediaTitle)) {
-      onStateChange(entityId, 'missing');
-      return;
-    }
-    if (entityLoading || songLoading) {
-      onStateChange(entityId, 'loading');
-      return;
-    }
-    if (songError || !audioUrl) {
-      onStateChange(entityId, 'missing');
-      return;
-    }
-    onStateChange(entityId, 'ready');
-  }, [
-    entityId,
-    entityError,
-    entityLoading,
-    wikipediaTitle,
-    songLoading,
-    songError,
-    audioUrl,
-    onStateChange,
-  ]);
-
-  // Drive the hidden `<audio>` element from the shared flag. We
-  // don't forward `onPlay`/`onPause` events upward because the
-  // parent is the source of truth; bubbling them back would create
-  // feedback loops when (e.g.) the browser auto-pauses on tab hide.
-  useEffect(() => {
-    const el = audioRef.current;
-    if (!el || !audioUrl) return;
-    if (isPlaying) {
-      // `play()` rejects when autoplay is blocked or the source
-      // fails to load. Swallow it — the voice just drops out of the
-      // chorus rather than taking the whole button down.
-      el.play().catch(() => {});
-    } else {
-      el.pause();
-      // Reset to the start so the next Play gives a fresh chorus
-      // rather than picking up mid-phrase with every voice out of
-      // sync with wherever it happened to be paused.
-      try {
-        el.currentTime = 0;
-      } catch {
-        /* Some browsers throw on seek before metadata loads. */
-      }
-    }
-  }, [isPlaying, audioUrl]);
-
-  if (!audioUrl) return null;
-
-  return (
-    <audio
-      ref={audioRef}
-      src={audioUrl}
-      preload="auto"
-      loop
-      className="hidden"
-      aria-hidden
-    />
-  );
-}

src/components/BirdexContent.tsx

@@ -1,169 +0,0 @@
-import { useMemo } from 'react';
-import { Bird } from 'lucide-react';
-import type { NostrEvent } from '@nostrify/nostrify';
-
-import { BirdexChorusButton } from '@/components/BirdexChorusButton';
-import { BirdexTile } from '@/components/BirdexTile';
-import { parseBirdexEvent } from '@/lib/parseBirdex';
-import { cn } from '@/lib/utils';
-
-/**
- * Birdstar kind 12473 — Birdex (life list).
- *
- * A replaceable per-author index of every distinct bird species the
- * author has ever logged via kind 2473. Each species is a positional
- * `i`/`n` pair (Wikidata entity URI + scientific name), emitted in
- * chronological order of first detection.
- *
- * Feed variant: a small tiled preview of the most recently-added
- * species plus a "+N" capstone, mirroring how kind 3 follow lists
- * render as a compact avatar stack with a "+N more" suffix. Full
- * variant: the whole life list laid out as a responsive grid so
- * visitors can browse every species the author has ever seen.
- */
-
-/** Tiles rendered in the compact feed preview before collapsing into "+N". */
-const FEED_PREVIEW_LIMIT = 8;
-
-interface BirdexContentProps {
-  event: NostrEvent;
-  /**
-   * When true, render every species on the life list instead of the
-   * truncated feed preview. Used on the post-detail page.
-   */
-  expanded?: boolean;
-  className?: string;
-}
-
-export function BirdexContent({ event, expanded, className }: BirdexContentProps) {
-  const entries = useMemo(() => parseBirdexEvent(event), [event]);
-
-  // Empty Birdex — either a malformed event or a newly-published
-  // placeholder. Render a minimal dashed card so the feed row still
-  // has a meaningful anchor.
-  if (entries.length === 0) {
-    return (
-      <div
-        className={cn(
-          'mt-2 flex items-center gap-2 rounded-xl border border-dashed border-border p-4 text-sm text-muted-foreground',
-          className,
-        )}
-      >
-        <Bird className="size-4" aria-hidden />
-        Empty Birdex — no confirmed species yet.
-      </div>
-    );
-  }
-
-  if (expanded) {
-    return (
-      <div className={cn('mt-2', className)}>
-        <div className="mb-3 flex items-center justify-between gap-2">
-          <div className="flex min-w-0 items-center gap-2">
-            <Bird className="size-4 shrink-0 text-emerald-600 dark:text-amber-300" aria-hidden />
-            <h3 className="truncate text-[15px] font-semibold leading-tight">
-              Birdex
-              <span className="ml-1.5 text-sm font-normal text-muted-foreground">
-                {entries.length} species
-              </span>
-            </h3>
-          </div>
-
-          {/* Single control that plays every species' Wikipedia
-           *  recording simultaneously — a dawn chorus for the whole
-           *  life list. Hides itself when no species has usable audio. */}
-          <BirdexChorusButton
-            species={entries.map(({ entityId }) => ({ entityId }))}
-            className="shrink-0"
-          />
-        </div>
-
-        <div className="grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
-          {entries.map((entry) => (
-            <BirdexTile
-              key={entry.entityUri}
-              entityUri={entry.entityUri}
-              entityId={entry.entityId}
-              scientificName={entry.scientificName || undefined}
-            />
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  // Feed variant — show the *most recent* species (tail of the list)
-  // so the preview reflects the author's latest additions, with an
-  // overflow capstone on the final tile when the Birdex is larger
-  // than the preview. The capstone displaces one species slot, so
-  // when overflowing we render (LIMIT - 1) real tiles + the capstone;
-  // the capstone's count is "species not shown", which includes the
-  // one species the capstone itself displaced.
-  const overflowing = entries.length > FEED_PREVIEW_LIMIT;
-  const visibleSpeciesCount = overflowing ? FEED_PREVIEW_LIMIT - 1 : entries.length;
-  const previewEntries = entries.slice(-visibleSpeciesCount);
-  const overflowCount = entries.length - visibleSpeciesCount;
-
-  return (
-    <div className={cn('mt-2', className)}>
-      <div className="mb-2 flex items-center justify-between gap-2">
-        <div className="flex min-w-0 items-center gap-2">
-          <Bird className="size-4 shrink-0 text-emerald-600 dark:text-amber-300" aria-hidden />
-          <span className="text-[15px] font-semibold leading-tight">
-            Birdex
-          </span>
-          <span className="text-sm text-muted-foreground">
-            · {entries.length} species
-          </span>
-        </div>
-
-        {/* Same chorus button as the expanded view — plays the
-         *  entire life list, not just the preview slice, because the
-         *  button represents the whole event. Wrapped in a click
-         *  swallower: the feed variant sits inside a clickable
-         *  NoteCard, and toggling playback must not navigate away. */}
-        <div
-          onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-          }}
-          className="shrink-0"
-        >
-          <BirdexChorusButton
-            species={entries.map(({ entityId }) => ({ entityId }))}
-          />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-4 gap-1.5 sm:grid-cols-6 md:grid-cols-8">
-        {previewEntries.map((entry) => (
-          <BirdexTile
-            key={entry.entityUri}
-            entityUri={entry.entityUri}
-            entityId={entry.entityId}
-            scientificName={entry.scientificName || undefined}
-          />
-        ))}
-        {overflowing && <OverflowTile count={overflowCount} />}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Final capstone tile that reads "+N" when the life list overflows
- * the feed preview. Mirrors the "+N more" suffix on kind 3 follow-list
- * avatar stacks.
- */
-function OverflowTile({ count }: { count: number }) {
-  return (
-    <div
-      className="flex aspect-square items-center justify-center overflow-hidden rounded-xl border border-border bg-muted/60 text-muted-foreground"
-      aria-label={`${count} more species`}
-    >
-      <span className="text-xs font-semibold sm:text-sm">
-        +{count}
-      </span>
-    </div>
-  );
-}

src/components/BirdexTile.tsx

@@ -1,118 +0,0 @@
-import { Bird } from 'lucide-react';
-import { Link } from 'react-router-dom';
-
-import { Skeleton } from '@/components/ui/skeleton';
-import { useWikidataEntity } from '@/hooks/useWikidataEntity';
-import { useWikipediaSummary } from '@/hooks/useWikipediaSummary';
-import { sanitizeUrl } from '@/lib/sanitizeUrl';
-import { cn } from '@/lib/utils';
-
-/**
- * A single tile in a Birdex grid — one species.
- *
- * Resolves Wikidata → English Wikipedia to pull a thumbnail and common
- * name. The scientific name (optional, from the paired `n` tag on the
- * Birdex event) is used as a fallback label while the remote fetch is
- * in flight or fails.
- *
- * Clicking the tile routes to Ditto's external-content page for the
- * species' Wikidata URL, so the species page aggregates detections,
- * comments, and other Birdex authors who have this species on their
- * life lists — the same landing spot used by kind 2473 bird-detection
- * cards.
- */
-interface BirdexTileProps {
-  entityUri: string;
-  entityId: string;
-  /** Optional scientific name from the paired `n` tag. */
-  scientificName?: string;
-  /** Extra classes applied to the tile container. */
-  className?: string;
-  /** Drop the navigation link (used by disabled-hover embeds). */
-  nonInteractive?: boolean;
-}
-
-export function BirdexTile({
-  entityUri,
-  entityId,
-  scientificName,
-  className,
-  nonInteractive,
-}: BirdexTileProps) {
-  const { data: entity, isLoading: entityLoading } = useWikidataEntity(entityId);
-  const wikipediaTitle = entity?.wikipediaTitle ?? null;
-  const { data: summary, isLoading: summaryLoading } = useWikipediaSummary(wikipediaTitle);
-
-  const isLoading = entityLoading || summaryLoading;
-
-  // Prefer the Wikipedia page title for the display label; fall back to
-  // the scientific name from the Birdex's `n` tag while fetches are in
-  // flight or when no English article exists.
-  const commonName = summary?.title ?? (scientificName || 'Unknown species');
-  const thumbnail = sanitizeUrl(summary?.thumbnail?.source);
-
-  const inner = (
-    <div
-      className={cn(
-        'group relative aspect-square overflow-hidden rounded-xl bg-gradient-to-br from-emerald-100 via-sky-100 to-amber-100 shadow-sm',
-        'dark:from-indigo-950 dark:via-indigo-900 dark:to-amber-900/40',
-        !nonInteractive && 'transition-shadow hover:shadow-md focus-visible:shadow-md',
-        className,
-      )}
-    >
-      {isLoading ? (
-        <Skeleton className="absolute inset-0 h-full w-full" />
-      ) : thumbnail ? (
-        <img
-          src={thumbnail}
-          alt={commonName}
-          className={cn(
-            'absolute inset-0 h-full w-full object-cover',
-            !nonInteractive && 'motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-[1.03]',
-          )}
-          loading="lazy"
-        />
-      ) : (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <Bird
-            aria-hidden
-            strokeWidth={1.5}
-            className="size-8 text-emerald-700/60 dark:text-amber-300/60"
-          />
-        </div>
-      )}
-
-      {/* Name overlay — always rendered, even during skeleton, so the
-          tile's shape is stable. Common name on top (from Wikipedia
-          when available, scientific fallback otherwise); scientific
-          name from the Birdex's paired `n` tag as a persistent
-          italic sub-label underneath, mirroring how kind 2473
-          detection cards stack the two labels. */}
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/75 via-black/40 to-transparent pt-6">
-        <div className="px-2 pb-1.5">
-          <p className="truncate text-[11px] font-semibold leading-tight text-white drop-shadow sm:text-xs">
-            {isLoading && !scientificName ? '\u00A0' : commonName}
-          </p>
-          {scientificName && scientificName !== commonName && (
-            <p className="truncate text-[10px] italic leading-tight text-white/80">
-              {scientificName}
-            </p>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-
-  if (nonInteractive) return inner;
-
-  return (
-    <Link
-      to={`/i/${encodeURIComponent(entityUri)}`}
-      onClick={(e) => e.stopPropagation()}
-      className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-xl"
-      aria-label={commonName}
-    >
-      {inner}
-    </Link>
-  );
-}

src/components/BitcoinAmountPicker.tsx

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { cn } from '@/lib/utils';
+
+interface BitcoinAmountPickerProps {
+  usdAmount: number | string;
+  onUsdAmountChange: (amount: number | string) => void;
+  presets: readonly number[];
+  insufficient?: boolean;
+  satsLabel?: string;
+  onAmountChangeStart?: () => void;
+}
+
+export function BitcoinAmountPicker({
+  usdAmount,
+  onUsdAmountChange,
+  presets,
+  insufficient = false,
+  satsLabel,
+  onAmountChangeStart,
+}: BitcoinAmountPickerProps) {
+  const [editingAmount, setEditingAmount] = useState(false);
+  const amountInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editingAmount) {
+      amountInputRef.current?.focus();
+      amountInputRef.current?.select();
+    }
+  }, [editingAmount]);
+
+  const commitAmountEdit = useCallback(() => {
+    setEditingAmount(false);
+    if (typeof usdAmount === 'string' && usdAmount.trim() === '') {
+      onUsdAmountChange(0);
+    }
+  }, [onUsdAmountChange, usdAmount]);
+
+  const currentUsd = typeof usdAmount === 'string' ? parseFloat(usdAmount) : usdAmount;
+
+  return (
+    <>
+      <div className="flex flex-col items-center pt-2">
+        {editingAmount ? (
+          <div className="flex items-baseline justify-center">
+            <span className={cn('text-4xl font-semibold', insufficient ? 'text-destructive' : 'text-muted-foreground')}>$</span>
+            <input
+              ref={amountInputRef}
+              type="number"
+              inputMode="decimal"
+              min={0}
+              step="0.01"
+              value={usdAmount}
+              onChange={(e) => {
+                onAmountChangeStart?.();
+                onUsdAmountChange(e.target.value);
+              }}
+              onBlur={commitAmountEdit}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  commitAmountEdit();
+                }
+              }}
+              aria-label="Amount in USD"
+              className={cn(
+                'bg-transparent border-0 outline-none text-4xl font-semibold text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+                insufficient && 'text-destructive',
+              )}
+              style={{ width: `${Math.max(2, String(usdAmount).length + 1)}ch` }}
+            />
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setEditingAmount(true)}
+            aria-label="Edit amount"
+            className="flex items-baseline justify-center rounded-md px-2 -mx-2 hover:bg-muted/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors"
+          >
+            <span className={cn('text-4xl font-semibold', insufficient ? 'text-destructive' : 'text-muted-foreground')}>$</span>
+            <span className={cn('text-4xl font-semibold tabular-nums', insufficient && 'text-destructive')}>
+              {Number.isFinite(currentUsd) && currentUsd > 0 ? currentUsd : 0}
+            </span>
+          </button>
+        )}
+        {satsLabel && (
+          <span className="text-xs text-muted-foreground mt-1 tabular-nums">
+            {satsLabel}
+          </span>
+        )}
+      </div>
+
+      <ToggleGroup
+        type="single"
+        value={presets.includes(Number(usdAmount)) ? String(usdAmount) : ''}
+        onValueChange={(value) => {
+          if (value) {
+            onAmountChangeStart?.();
+            onUsdAmountChange(Number(value));
+            setEditingAmount(false);
+          }
+        }}
+        className="grid grid-cols-5 gap-1 w-full"
+      >
+        {presets.map((preset) => (
+          <ToggleGroupItem
+            key={preset}
+            value={String(preset)}
+            className="h-8 min-w-0 text-xs font-semibold px-1"
+          >
+            ${preset}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+    </>
+  );
+}

src/components/BitcoinContentHeader.tsx

@@ -87,6 +87,16 @@ export function BitcoinTxHeader({ txid }: { txid: string }) {
         <Bitcoin className="size-10 mx-auto text-muted-foreground/40" />
         <p className="text-sm text-destructive">Failed to load transaction</p>
         <p className="text-xs text-muted-foreground font-mono break-all">{txid}</p>
+        <a
+          href={`https://mempool.space/tx/${txid}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <Bitcoin className="size-3.5" />
+          <span>View on mempool.space</span>
+          <ExternalLink className="size-3" />
+        </a>
       </div>
     );
   }

src/components/BitcoinPublicDisclaimer.tsx

@@ -1,4 +1,6 @@
+import type { ReactNode } from 'react';
 import { AlertTriangle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -41,6 +43,14 @@ interface BitcoinPublicDisclaimerProps {
    * Defaults to `true` for backwards compatibility.
    */
   includeCashOutAdvice?: boolean;
+  /**
+   * Override the popover body. When set, replaces the entire "Bitcoin
+   * is a public ledger…" paragraph (including the cash-out advice). Use
+   * when the calling surface has a meaningfully different audience —
+   * e.g. a campaign *creator* configuring a receive address, vs. the
+   * sender flow this component was originally written for.
+   */
+  popoverText?: ReactNode;
 }
 
 /**
@@ -53,12 +63,15 @@ interface BitcoinPublicDisclaimerProps {
 export function BitcoinPublicDisclaimer({
   acknowledged,
   onAcknowledgedChange,
-  leadText = 'Money you send is public and can be traced back to you.',
+  leadText,
   tone = 'destructive',
   includeCashOutAdvice = true,
+  popoverText,
 }: BitcoinPublicDisclaimerProps) {
+  const { t } = useTranslation();
   const showCheckbox = onAcknowledgedChange !== undefined;
   const isSoft = tone === 'soft';
+  const resolvedLeadText = leadText ?? t('bitcoinPublic.lead');
 
   return (
     <Alert
@@ -67,7 +80,12 @@ export function BitcoinPublicDisclaimer({
       role={isSoft ? 'note' : 'alert'}
       className={cn(
         isSoft
-          ? 'border-amber-300/60 bg-amber-50 text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-100'
+          // Use the project's foreground token (not raw amber-900) so
+          // the text always contrasts against the page in both light
+          // and dark themes. The faint amber tint keeps the
+          // "informational notice" cue without leaning on hard-coded
+          // amber text that disappears on the wrong backdrop.
+          ? 'border-amber-500/30 bg-amber-500/10 text-foreground'
           : 'border-destructive/50 bg-destructive/5 text-destructive dark:border-destructive',
       )}
     >
@@ -77,22 +95,22 @@ export function BitcoinPublicDisclaimer({
       {!isSoft && <AlertTriangle className="size-4 text-destructive" />}
       <AlertDescription className="text-xs">
         <p>
-          {leadText}{' '}
+          {resolvedLeadText}{' '}
           <Popover>
             <PopoverTrigger asChild>
               <button
                 type="button"
                 className="underline underline-offset-2 font-medium hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
               >
-                Learn more
+                {t('bitcoinPublic.learnMore')}
               </button>
             </PopoverTrigger>
             <PopoverContent side="top" align="start" className="w-72 text-xs leading-relaxed">
-              Bitcoin is a public ledger. Transactions you send can
-              be traced back to you forever, even after being
-              exchanged by multiple people. Send it only to those
-              you wish to support publicly
-              {includeCashOutAdvice ? ', or cash out at an exchange.' : '.'}
+              {popoverText ?? (
+                includeCashOutAdvice
+                  ? t('bitcoinPublic.bodyWithCashOut')
+                  : t('bitcoinPublic.body')
+              )}
             </PopoverContent>
           </Popover>
         </p>
@@ -107,9 +125,9 @@ export function BitcoinPublicDisclaimer({
                   ? 'border-amber-600 data-[state=checked]:bg-amber-600 data-[state=checked]:text-white dark:border-amber-400 dark:data-[state=checked]:bg-amber-500'
                   : 'border-destructive data-[state=checked]:bg-destructive data-[state=checked]:text-destructive-foreground',
               )}
-              aria-label="I understand this transaction is public"
+              aria-label={t('bitcoinPublic.iUnderstand')}
             />
-            <span>I understand this transaction is public.</span>
+            <span>{t('bitcoinPublic.iUnderstand')}</span>
           </label>
         )}
       </AlertDescription>

src/components/BitcoinRecipientInput.tsx

@@ -0,0 +1,483 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Bitcoin, EyeOff, QrCode, X } from 'lucide-react';
+
+import { Input } from '@/components/ui/input';
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+} from '@/components/ui/popover';
+import { QrScannerDialog } from '@/components/QrScannerDialog';
+import { useToast } from '@/hooks/useToast';
+import { parseBitcoinUri, validateBitcoinAddress } from '@/lib/bitcoin';
+import {
+  isSilentPaymentAddress,
+  validateSilentPaymentAddress,
+} from '@/lib/hdwallet/sp/sender';
+import { cn } from '@/lib/utils';
+
+// ---------------------------------------------------------------------------
+// Public types
+// ---------------------------------------------------------------------------
+
+/**
+ * The resolved recipient produced by {@link BitcoinRecipientInput}.
+ *
+ * Either a bare on-chain Bitcoin address (`kind === 'address'`) or a BIP-352
+ * silent payment address (`kind === 'sp'`). The dialog consumes this shape
+ * directly when building the PSBT.
+ */
+export interface ResolvedRecipient {
+  /**
+   * For `kind === 'address'`: a validated mainnet on-chain address.
+   * For `kind === 'sp'`: the `sp1…` string (the real P2TR `P_k` is derived
+   * at PSBT-build time, after coin selection).
+   */
+  address: string;
+  /** Recipient kind — determines how the PSBT builder routes the output. */
+  kind: 'address' | 'sp';
+  /**
+   * Raw text the user typed / pasted / scanned. Kept so the picker can
+   * round-trip a chip back into the input on clear if we ever need it
+   * (currently unused; the chip just dismisses).
+   */
+  raw: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+interface BitcoinRecipientInputProps {
+  /** Currently-selected recipient, or `null` when nothing has been picked. */
+  value: ResolvedRecipient | null;
+  /** Called when the user picks a recipient (from the dropdown / QR scan) or clears. */
+  onChange: (value: ResolvedRecipient | null) => void;
+  /** Input placeholder text. */
+  placeholder: string;
+  /**
+   * Optional initial input value applied when the picker mounts with no
+   * `value`. Used by callers (e.g. campaign donate flow) that want to
+   * pre-fill a `bitcoin:…` URI or bare address so the donor only needs to
+   * pick from the dropdown.
+   *
+   * Re-applied each time the value transitions from non-null → null while
+   * `initialInput` is set, so a "clear chip" inside a prefilled flow
+   * restores the prefilled text instead of leaving the field empty.
+   */
+  initialInput?: string;
+}
+
+/**
+ * Recipient input for the Send Bitcoin dialog. Combines a text input, an
+ * inline QR-scanner button, and a Radix Popover dropdown that surfaces the
+ * recognised destination(s) extracted from the input.
+ *
+ * Recognised destinations:
+ *
+ * - Bare on-chain Bitcoin address (any standard mainnet type) → "Send to
+ *   Bitcoin address" row.
+ * - Bare BIP-352 silent payment address (`sp1…`) → "Send to silent payment
+ *   address" row.
+ * - `bitcoin:` BIP-21 URI with an on-chain path and/or an `sp=` parameter →
+ *   one row per valid candidate (so a URI carrying both shows two rows and
+ *   the donor picks privacy vs. compatibility).
+ *
+ * Clicking a row swaps the input out for a {@link SelectedRecipientChip} via
+ * `onChange`. Clicking the chip's X button calls `onChange(null)`, which
+ * returns to the input view.
+ *
+ * Anything else (npub, nprofile, free text) is silently ignored — there is
+ * no account search here, by design. Refocusing or clicking the input while
+ * it still contains a BIP-21 URI reopens the dropdown so the donor can swap
+ * between the available options without retyping.
+ */
+export function BitcoinRecipientInput({
+  value,
+  onChange,
+  placeholder,
+  initialInput,
+}: BitcoinRecipientInputProps) {
+  const { t } = useTranslation();
+  const { toast } = useToast();
+
+  // Local input state. Independent of `value` so the user can keep typing
+  // after dismissing the dropdown without losing their query, and so the
+  // chip-cleared view starts blank instead of repopulating the previous
+  // selection.
+  const [query, setQuery] = useState<string>(initialInput ?? '');
+  const [open, setOpen] = useState(false);
+  const [scannerOpen, setScannerOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Re-apply `initialInput` whenever the picker returns to the input view
+  // (value !== null → null) AND there is no active query the user might be
+  // editing. This restores the prefilled URI after a "clear chip" in flows
+  // like the campaign donate page, without clobbering a fresh edit.
+  const prevValueRef = useRef<ResolvedRecipient | null>(value);
+  useEffect(() => {
+    const justCleared = prevValueRef.current !== null && value === null;
+    if (justCleared && initialInput && query.length === 0) {
+      setQuery(initialInput);
+    }
+    prevValueRef.current = value;
+  }, [value, initialInput, query]);
+
+  // ── Candidate extraction ──────────────────────────────────────────────
+  //
+  // BIP-21 `bitcoin:` URI handling. If the input is a URI, we route the
+  // same way the QR scanner does: surface every valid candidate as its own
+  // row so the user explicitly picks privacy (sp) vs. compatibility
+  // (on-chain). A raw bc1…/sp1… input falls through here unchanged: `bip21`
+  // is null and the candidate is just the trimmed query.
+  const trimmed = query.trim();
+  const bip21 = useMemo(() => parseBitcoinUri(trimmed), [trimmed]);
+
+  const btcCandidate = useMemo(() => {
+    const c = bip21 ? bip21.address : trimmed;
+    if (!c) return '';
+    // sp addresses live in spCandidate; don't double-count.
+    if (isSilentPaymentAddress(c)) return '';
+    return validateBitcoinAddress(c) ? c : '';
+  }, [bip21, trimmed]);
+
+  const spCandidate = useMemo(() => {
+    // From the URI: prefer `sp=` if valid; otherwise the path may itself be
+    // an sp1 address (rare but legal — `bitcoin:sp1…` is just a URI without
+    // an on-chain fallback).
+    const c = bip21 ? (bip21.sp ?? bip21.address) : trimmed;
+    if (!c) return '';
+    if (!isSilentPaymentAddress(c)) return '';
+    return validateSilentPaymentAddress(c) ? c : '';
+  }, [bip21, trimmed]);
+
+  const hasBtc = !!btcCandidate;
+  const hasSp = !!spCandidate;
+  const totalItems = (hasSp ? 1 : 0) + (hasBtc ? 1 : 0);
+
+  // Auto-open the dropdown whenever a candidate is available, auto-close on
+  // empty input.
+  useEffect(() => {
+    if (trimmed.length === 0) {
+      setOpen(false);
+      return;
+    }
+    if (hasSp || hasBtc) setOpen(true);
+  }, [trimmed, hasSp, hasBtc]);
+
+  // ── Selection callbacks ───────────────────────────────────────────────
+  const selectBtc = useCallback(
+    (address: string) => {
+      onChange({ address, kind: 'address', raw: query });
+      setQuery('');
+      setOpen(false);
+      inputRef.current?.blur();
+    },
+    [onChange, query],
+  );
+
+  const selectSp = useCallback(
+    (address: string) => {
+      onChange({ address, kind: 'sp', raw: query });
+      setQuery('');
+      setOpen(false);
+      inputRef.current?.blur();
+    },
+    [onChange, query],
+  );
+
+  // ── QR scan handling ──────────────────────────────────────────────────
+  /**
+   * Interpret a freshly-scanned QR code.
+   *
+   * - **BIP-21 URI with valid bc1 *and* sp1** → drop the URI into the input
+   *   and open the dropdown so the donor picks between them.
+   * - **BIP-21 URI with only `sp=` valid** → select SP directly (creates
+   *   the chip, bypasses the dropdown).
+   * - **Bare bitcoin address** → select on-chain directly.
+   * - **Bare `sp1…` address** → select SP directly.
+   * - **Anything else** → toast.
+   */
+  const handleScan = useCallback(
+    (scanned: string) => {
+      setScannerOpen(false);
+      const text = scanned.trim();
+      const parsed = parseBitcoinUri(text);
+
+      const candidate = parsed ? parsed.address : text;
+      const sp = parsed?.sp;
+
+      const hasValidBtc = !!candidate && validateBitcoinAddress(candidate);
+      const hasValidSp =
+        !!sp && isSilentPaymentAddress(sp) && validateSilentPaymentAddress(sp);
+
+      // Both options — show the dropdown.
+      if (parsed && hasValidBtc && hasValidSp) {
+        setQuery(text);
+        setOpen(true);
+        // Focus is best-effort; on mobile the scanner dialog dismissal will
+        // already steal focus and the dropdown stays usable via tap.
+        inputRef.current?.focus();
+        return;
+      }
+
+      // SP-only via `bitcoin:…?sp=sp1…`.
+      if (hasValidSp && sp) {
+        selectSp(sp);
+        return;
+      }
+
+      // Direct on-chain.
+      if (hasValidBtc) {
+        selectBtc(candidate);
+        return;
+      }
+
+      // Bare sp1 (no `bitcoin:` prefix).
+      if (
+        isSilentPaymentAddress(candidate)
+        && validateSilentPaymentAddress(candidate)
+      ) {
+        selectSp(candidate);
+        return;
+      }
+
+      toast({
+        title: t('walletSend.scanError.title'),
+        description: t('walletSend.scanError.description'),
+        variant: 'destructive',
+      });
+    },
+    [selectBtc, selectSp, t, toast],
+  );
+
+  // ── Chip view ─────────────────────────────────────────────────────────
+  if (value) {
+    return (
+      <SelectedRecipientChip value={value} onClear={() => onChange(null)} />
+    );
+  }
+
+  // ── Input + dropdown ──────────────────────────────────────────────────
+  //
+  // `popoverOpen` derives from the manual `open` flag AND the presence of
+  // actionable candidates. This prevents an empty/garbage input from
+  // popping the dropdown.
+  const popoverOpen = open && totalItems > 0;
+
+  return (
+    <div className="space-y-2">
+      <Popover open={popoverOpen} onOpenChange={setOpen}>
+        <PopoverAnchor asChild>
+          <div className="relative flex items-center">
+            <Input
+              ref={inputRef}
+              id="hd-recipient-input"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              // Reopen on focus so a user can recover the dropdown after an
+              // outside-click dismiss (the value is still in the field).
+              onFocus={() => {
+                if (totalItems > 0) setOpen(true);
+              }}
+              // `onFocus` only fires on the first tap; subsequent taps while
+              // the input is still focused need their own opener so the user
+              // can reopen the choice list without un-focusing first.
+              onClick={() => {
+                if (totalItems > 0) setOpen(true);
+              }}
+              placeholder={placeholder}
+              autoComplete="off"
+              spellCheck={false}
+              role="combobox"
+              aria-expanded={popoverOpen}
+              aria-haspopup="listbox"
+              aria-autocomplete="list"
+              className={cn('font-mono text-base md:text-sm pr-11')}
+            />
+            <button
+              type="button"
+              onClick={() => setScannerOpen(true)}
+              aria-label={t('walletSend.recipient.scan')}
+              className="absolute right-1 top-1/2 -translate-y-1/2 size-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-secondary/60 flex items-center justify-center motion-safe:transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <QrCode className="size-4" />
+            </button>
+          </div>
+        </PopoverAnchor>
+
+        <PopoverContent
+          align="start"
+          sideOffset={6}
+          // Keep typing focus in the input on open/close — Radix's default
+          // is to focus the popover content, which would steal focus from
+          // the input and dismiss the mobile keyboard mid-type.
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onCloseAutoFocus={(e) => e.preventDefault()}
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+          className="p-0 w-[--radix-popover-trigger-width] max-h-none rounded-xl border border-border bg-popover shadow-lg overflow-hidden"
+        >
+          <div role="listbox" className="max-h-[280px] overflow-y-auto py-1">
+            {/* SP comes before BTC so the privacy-preserving option is
+                the user's first scan target when both are present. */}
+            {hasSp && (
+              <SpAddressRow address={spCandidate} onClick={selectSp} />
+            )}
+            {hasBtc && (
+              <BtcAddressRow address={btcCandidate} onClick={selectBtc} />
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <QrScannerDialog
+        isOpen={scannerOpen}
+        onClose={() => setScannerOpen(false)}
+        onScan={handleScan}
+        title={t('walletSend.recipient.scan')}
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Dropdown rows
+// ---------------------------------------------------------------------------
+
+/** Truncate long addresses with an ellipsis so they don't overflow the row. */
+function truncateAddress(address: string): string {
+  return address.length > 28
+    ? `${address.slice(0, 14)}…${address.slice(-10)}`
+    : address;
+}
+
+function BtcAddressRow({
+  address,
+  onClick,
+}: {
+  address: string;
+  onClick: (address: string) => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <button
+      type="button"
+      role="option"
+      aria-selected={false}
+      onClick={() => onClick(address)}
+      // Prevent the input from blurring on mousedown — otherwise the popover
+      // closes before `onClick` fires and the row never resolves.
+      onMouseDown={(e) => e.preventDefault()}
+      className="w-full flex items-center gap-3 px-3 py-2 text-left transition-colors cursor-pointer hover:bg-secondary/60"
+    >
+      <div className="size-9 shrink-0 rounded-full bg-orange-500/10 flex items-center justify-center">
+        <Bitcoin className="size-4 text-orange-500" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="font-semibold text-sm truncate">
+          {t('walletSend.recipient.sendToOnchain')}
+        </div>
+        <div className="text-xs text-muted-foreground truncate font-mono">
+          {truncateAddress(address)}
+        </div>
+      </div>
+    </button>
+  );
+}
+
+/**
+ * Dropdown row for BIP-352 silent payment addresses. We give it a distinct
+ * label and icon (privacy eye-off) so the user can tell at a glance that
+ * this is a static, unlinkable address rather than a regular Bitcoin
+ * scriptPubKey — the privacy story is materially different.
+ */
+function SpAddressRow({
+  address,
+  onClick,
+}: {
+  address: string;
+  onClick: (address: string) => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <button
+      type="button"
+      role="option"
+      aria-selected={false}
+      onClick={() => onClick(address)}
+      onMouseDown={(e) => e.preventDefault()}
+      className="w-full flex items-center gap-3 px-3 py-2 text-left transition-colors cursor-pointer hover:bg-secondary/60"
+    >
+      <div className="size-9 shrink-0 rounded-full bg-violet-500/10 flex items-center justify-center">
+        <EyeOff className="size-4 text-violet-500" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="font-semibold text-sm truncate">
+          {t('walletSend.recipient.sendToSilentPayment')}
+        </div>
+        <div className="text-xs text-muted-foreground truncate font-mono">
+          {truncateAddress(address)}
+        </div>
+      </div>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Selected recipient chip
+// ---------------------------------------------------------------------------
+
+/**
+ * Compact panel that replaces the input once a recipient has been picked.
+ * Renders a coloured icon (orange Bitcoin / violet EyeOff for SP), the kind
+ * label, a truncated monospace address, and an X button that clears the
+ * selection and returns the user to the input view.
+ */
+function SelectedRecipientChip({
+  value,
+  onClear,
+}: {
+  value: ResolvedRecipient;
+  onClear: () => void;
+}) {
+  const { t } = useTranslation();
+  const { address, kind } = value;
+
+  const displayName =
+    kind === 'sp'
+      ? t('walletSend.recipient.silentPayment')
+      : t('walletSend.recipient.bitcoinAddress');
+  const subtitle = truncateAddress(address);
+
+  return (
+    <div className="flex items-center gap-3 rounded-2xl border border-border bg-muted/40 pl-2 pr-2 py-1.5 w-full min-w-0 max-w-full">
+      {kind === 'sp' ? (
+        <div className="size-9 shrink-0 rounded-full bg-violet-500/10 flex items-center justify-center">
+          <EyeOff className="size-4 text-violet-500" />
+        </div>
+      ) : (
+        <div className="size-9 shrink-0 rounded-full bg-orange-500/10 flex items-center justify-center">
+          <Bitcoin className="size-4 text-orange-500" />
+        </div>
+      )}
+      <div className="flex-1 min-w-0 overflow-hidden">
+        <div className="text-[11px] text-muted-foreground leading-tight">
+          {t('walletSend.recipient.toLabel')}
+        </div>
+        <div className="text-sm font-medium truncate">{displayName}</div>
+        <div className="text-xs text-muted-foreground truncate font-mono">
+          {subtitle}
+        </div>
+      </div>
+      <button
+        type="button"
+        onClick={onClear}
+        aria-label={t('walletSend.recipient.clear')}
+        className="p-1.5 rounded-full text-muted-foreground hover:text-foreground hover:bg-secondary/60 transition-colors shrink-0"
+      >
+        <X className="size-4" />
+      </button>
+    </div>
+  );
+}

src/components/BookFeedItem.tsx

@@ -1,410 +0,0 @@
-import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
-import { Link } from 'react-router-dom';
-import { BookOpen, MessageSquare, Star, AlertTriangle } from 'lucide-react';
-import { nip19 } from 'nostr-tools';
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
-import { NoteContent } from '@/components/NoteContent';
-import { PostActionBar } from '@/components/PostActionBar';
-import { ProfileHoverCard } from '@/components/ProfileHoverCard';
-import { EmojifiedText } from '@/components/CustomEmoji';
-import { NoteMoreMenu } from '@/components/NoteMoreMenu';
-import { ReplyComposeModal } from '@/components/ReplyComposeModal';
-import { useAuthor } from '@/hooks/useAuthor';
-import { useProfileUrl } from '@/hooks/useProfileUrl';
-import { useOpenPost } from '@/hooks/useOpenPost';
-import { useBookSummary } from '@/hooks/useBookSummary';
-import { getDisplayName } from '@/lib/getDisplayName';
-import { timeAgo } from '@/lib/timeAgo';
-import { cn } from '@/lib/utils';
-import { BOOKSTR_KINDS, extractISBNFromEvent, parseBookReview, ratingToStars } from '@/lib/bookstr';
-import type { NostrEvent } from '@nostrify/nostrify';
-
-interface BookFeedItemProps {
-  event: NostrEvent;
-  className?: string;
-}
-
-/** Max height in px before truncation kicks in. */
-const MAX_HEIGHT = 300;
-
-/** Encodes the NIP-19 identifier for navigating to an event. */
-function encodeEventId(event: NostrEvent): string {
-  if (event.kind >= 30000 && event.kind < 40000) {
-    const dTag = event.tags.find(([n]) => n === 'd')?.[1];
-    if (dTag) {
-      return nip19.naddrEncode({ kind: event.kind, pubkey: event.pubkey, identifier: dTag });
-    }
-  }
-  return nip19.neventEncode({ id: event.id, author: event.pubkey });
-}
-
-export function BookFeedItem({ event, className }: BookFeedItemProps) {
-  const author = useAuthor(event.pubkey);
-  const metadata = author.data?.metadata;
-  const displayName = getDisplayName(metadata, event.pubkey);
-  const profileUrl = useProfileUrl(event.pubkey, metadata);
-  const [moreMenuOpen, setMoreMenuOpen] = useState(false);
-  const [replyOpen, setReplyOpen] = useState(false);
-
-  const isbn = useMemo(() => extractISBNFromEvent(event), [event]);
-  const isReview = event.kind === BOOKSTR_KINDS.BOOK_REVIEW;
-  const isComment = event.kind === 1111;
-  const review = useMemo(() => isReview ? parseBookReview(event) : null, [event, isReview]);
-
-  // For kind 1111 comments on books, navigate to the book page rather than the event detail.
-  // For all other events, navigate to the event detail page.
-  const postPath = useMemo(() => {
-    if (isComment && isbn) {
-      return `/i/isbn:${isbn}`;
-    }
-    return `/${encodeEventId(event)}`;
-  }, [event, isComment, isbn]);
-
-  const { onClick: openPost, onAuxClick: auxOpenPost } = useOpenPost(postPath);
-
-  const handleCardClick = (e: React.MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (
-      target.closest('a') ||
-      target.closest('button') ||
-      target.closest('[role="dialog"]') ||
-      target.closest('[data-radix-dialog-overlay]') ||
-      target.closest('[data-radix-dialog-content]') ||
-      target.closest('[data-vaul-drawer]') ||
-      target.closest('[data-vaul-drawer-overlay]') ||
-      target.closest('[data-testid="zap-modal"]')
-    ) {
-      return;
-    }
-    openPost();
-  };
-
-  const handleAuxClick = (e: React.MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (
-      target.closest('a') ||
-      target.closest('button') ||
-      target.closest('[role="dialog"]')
-    ) {
-      return;
-    }
-    auxOpenPost(e);
-  };
-
-  // Stars display for reviews
-  const starCount = review?.rating !== undefined ? ratingToStars(review.rating) : 0;
-
-  return (
-    <article
-      className={cn(
-        'px-4 py-3 border-b border-border hover:bg-secondary/30 transition-colors cursor-pointer overflow-hidden',
-        className,
-      )}
-      onClick={handleCardClick}
-      onAuxClick={handleAuxClick}
-    >
-      <div className="flex gap-3">
-        {/* Avatar */}
-        {author.isLoading ? (
-          <Skeleton className="size-11 rounded-full shrink-0" />
-        ) : (
-          <ProfileHoverCard pubkey={event.pubkey} asChild>
-            <Link to={profileUrl} className="shrink-0" onClick={(e) => e.stopPropagation()}>
-              <Avatar className="size-11">
-                <AvatarImage src={metadata?.picture} alt={displayName} />
-                <AvatarFallback className="bg-primary/20 text-primary text-sm">
-                  {displayName[0]?.toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-            </Link>
-          </ProfileHoverCard>
-        )}
-
-        {/* Main content */}
-        <div className="min-w-0 flex-1">
-          {/* Author info */}
-          {author.isLoading ? (
-            <div className="min-w-0 space-y-1.5">
-              <Skeleton className="h-4 w-28" />
-              <Skeleton className="h-3 w-36" />
-            </div>
-          ) : (
-            <div className="min-w-0 flex-1">
-              <div className="flex items-center gap-1.5">
-                <ProfileHoverCard pubkey={event.pubkey} asChild>
-                  <Link
-                    to={profileUrl}
-                    className="font-bold text-[15px] hover:underline truncate"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {author.data?.event ? (
-                      <EmojifiedText tags={author.data.event.tags}>{displayName}</EmojifiedText>
-                    ) : displayName}
-                  </Link>
-                </ProfileHoverCard>
-
-                {isReview && (
-                  <Badge variant="secondary" className="gap-1 text-[10px] px-1.5 py-0 shrink-0 bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300">
-                    <Star className="size-3" />
-                    reviewed
-                  </Badge>
-                )}
-                {isComment && (
-                  <Badge variant="secondary" className="gap-1 text-[10px] px-1.5 py-0 shrink-0 bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300">
-                    <MessageSquare className="size-3" />
-                    commented
-                  </Badge>
-                )}
-                {!isReview && !isComment && isbn && (
-                  <Badge variant="secondary" className="gap-1 text-[10px] px-1.5 py-0 shrink-0 bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300">
-                    <BookOpen className="size-3" />
-                    posted
-                  </Badge>
-                )}
-              </div>
-              <div className="flex items-center gap-1 text-sm text-muted-foreground">
-                <span className="shrink-0 hover:underline whitespace-nowrap">
-                  {timeAgo(event.created_at)}
-                </span>
-              </div>
-            </div>
-          )}
-
-          {/* Star rating for reviews */}
-          {isReview && review?.rating !== undefined && (
-            <div className="flex items-center gap-1 mt-2">
-              {[...Array(5)].map((_, i) => (
-                <Star
-                  key={i}
-                  className={cn(
-                    'size-4',
-                    i < starCount
-                      ? 'fill-amber-400 text-amber-400'
-                      : 'text-muted-foreground/30',
-                  )}
-                />
-              ))}
-              <span className="text-sm text-muted-foreground ml-1">
-                {(review.rating * 5).toFixed(1)}
-              </span>
-            </div>
-          )}
-
-          {/* Content with spoiler guard and truncation */}
-          {isReview && review?.contentWarning ? (
-            <SpoilerGuard warning={review.contentWarning}>
-              <TruncatedContent event={event} content={review.content} isReview />
-            </SpoilerGuard>
-          ) : isReview && review ? (
-            <TruncatedContent event={event} content={review.content} isReview />
-          ) : (
-            <TruncatedContent event={event} />
-          )}
-
-          {/* Book card */}
-          {isbn && <InlineBookCard isbn={isbn} />}
-
-          {/* Action buttons */}
-          <PostActionBar
-            event={event}
-            onReply={() => setReplyOpen(true)}
-            onMore={() => setMoreMenuOpen(true)}
-            className="mt-3"
-          />
-        </div>
-      </div>
-
-      {/* Modals */}
-      <ReplyComposeModal event={event} open={replyOpen} onOpenChange={setReplyOpen} />
-      <NoteMoreMenu event={event} open={moreMenuOpen} onOpenChange={setMoreMenuOpen} />
-    </article>
-  );
-}
-
-/** Truncated content block with "Read more" fade and button. */
-function TruncatedContent({ event, content, isReview }: { event: NostrEvent; content?: string; isReview?: boolean }) {
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [overflows, setOverflows] = useState(false);
-  const [expanded, setExpanded] = useState(false);
-
-  const measure = useCallback(() => {
-    const el = contentRef.current;
-    if (el) setOverflows(el.scrollHeight > MAX_HEIGHT);
-  }, []);
-
-  useEffect(() => {
-    measure();
-    window.addEventListener('resize', measure);
-    return () => window.removeEventListener('resize', measure);
-  }, [measure]);
-
-  // Re-measure after images load
-  useEffect(() => {
-    const el = contentRef.current;
-    if (!el) return;
-    const imgs = el.querySelectorAll('img');
-    if (imgs.length === 0) return;
-    imgs.forEach((img) => img.addEventListener('load', measure, { once: true }));
-    return () => imgs.forEach((img) => img.removeEventListener('load', measure));
-  }, [measure]);
-
-  // For reviews with no written text, show a placeholder
-  if (content !== undefined && !content) {
-    return (
-      <p className="mt-2 text-sm text-muted-foreground italic">Rating only, no written review</p>
-    );
-  }
-
-  return (
-    <div className={cn('mt-2 break-words overflow-hidden', isReview && 'pl-3 border-l-2 border-amber-300 dark:border-amber-700')}>
-      <div
-        ref={contentRef}
-        style={!expanded && overflows ? { maxHeight: MAX_HEIGHT, overflow: 'hidden' } : undefined}
-        className="relative"
-      >
-        <NoteContent event={event} className="text-[15px] leading-relaxed" />
-        {!expanded && overflows && (
-          <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-background to-transparent pointer-events-none" />
-        )}
-      </div>
-      {overflows && (
-        <button
-          className="mt-1 text-sm text-primary hover:underline"
-          onClick={(e) => { e.stopPropagation(); setExpanded((v) => !v); }}
-        >
-          {expanded ? 'Show less' : 'Read more'}
-        </button>
-      )}
-    </div>
-  );
-}
-
-/** Renders a spoiler guard that hides content behind a warning. */
-function SpoilerGuard({ warning, children }: { warning: string; children: React.ReactNode }) {
-  const [revealed, setRevealed] = useState(false);
-
-  if (revealed) {
-    return (
-      <div>
-        <Badge variant="outline" className="text-orange-600 border-orange-200 dark:border-orange-800 mb-2 mt-2">
-          <AlertTriangle className="size-3 mr-1" />
-          Contains Spoilers
-        </Badge>
-        {children}
-      </div>
-    );
-  }
-
-  return (
-    <div className="mt-2 py-4 text-center space-y-2" onClick={(e) => e.stopPropagation()}>
-      <div className="flex items-center justify-center gap-2 text-orange-600">
-        <AlertTriangle className="size-4" />
-        <span className="text-sm font-medium">Spoiler Warning</span>
-      </div>
-      <p className="text-xs text-muted-foreground">{warning}</p>
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={() => setRevealed(true)}
-      >
-        Show Review
-      </Button>
-    </div>
-  );
-}
-
-/** Compact inline book card that shows cover, title, author, and year. */
-function InlineBookCard({ isbn }: { isbn: string }) {
-  const { data: book, isLoading } = useBookSummary(isbn);
-
-  if (isLoading) {
-    return (
-      <div className="mt-3 flex items-center gap-3 p-3 rounded-lg bg-muted/50 border border-border">
-        <Skeleton className="w-10 h-14 rounded shrink-0" />
-        <div className="flex-1 min-w-0 space-y-1.5">
-          <Skeleton className="h-4 w-3/4" />
-          <Skeleton className="h-3 w-1/2" />
-        </div>
-      </div>
-    );
-  }
-
-  if (!book) {
-    return (
-      <Link
-        to={`/i/isbn:${isbn}`}
-        className="mt-3 flex items-center gap-3 p-3 rounded-lg bg-muted/50 border border-border hover:bg-muted/80 transition-colors"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="w-10 h-14 rounded bg-muted flex items-center justify-center shrink-0">
-          <BookOpen className="size-5 text-muted-foreground/40" />
-        </div>
-        <div className="flex-1 min-w-0">
-          <p className="text-sm font-medium text-muted-foreground">ISBN {isbn}</p>
-        </div>
-      </Link>
-    );
-  }
-
-  return (
-    <Link
-      to={`/i/isbn:${isbn}`}
-      className="mt-3 flex items-center gap-3 p-3 rounded-lg bg-muted/50 border border-border hover:bg-muted/80 transition-colors group/book"
-      onClick={(e) => e.stopPropagation()}
-    >
-      {book.coverUrl ? (
-        <img
-          src={book.coverUrl}
-          alt={`Cover of ${book.title}`}
-          className="w-10 h-14 rounded object-cover shrink-0 shadow-sm group-hover/book:shadow-md transition-shadow"
-          loading="lazy"
-          onError={(e) => {
-            (e.currentTarget as HTMLElement).style.display = 'none';
-          }}
-        />
-      ) : (
-        <div className="w-10 h-14 rounded bg-muted flex items-center justify-center shrink-0">
-          <BookOpen className="size-5 text-muted-foreground/40" />
-        </div>
-      )}
-
-      <div className="flex-1 min-w-0">
-        <p className="text-sm font-semibold line-clamp-1 group-hover/book:underline">{book.title}</p>
-        <p className="text-xs text-muted-foreground line-clamp-1">{book.author}</p>
-        {book.pubDate && (
-          <p className="text-xs text-muted-foreground/70 mt-0.5">{book.pubDate}</p>
-        )}
-      </div>
-    </Link>
-  );
-}
-
-export function BookFeedItemSkeleton() {
-  return (
-    <div className="px-4 py-3 border-b border-border">
-      <div className="flex gap-3">
-        <Skeleton className="size-11 rounded-full shrink-0" />
-        <div className="min-w-0 flex-1 space-y-3">
-          <div className="space-y-1.5">
-            <Skeleton className="h-4 w-28" />
-            <Skeleton className="h-3 w-16" />
-          </div>
-          <div className="space-y-2">
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-4/5" />
-          </div>
-          <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/50 border border-border">
-            <Skeleton className="w-10 h-14 rounded shrink-0" />
-            <div className="flex-1 min-w-0 space-y-1.5">
-              <Skeleton className="h-4 w-3/4" />
-              <Skeleton className="h-3 w-1/2" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/CalendarEventContent.tsx

@@ -230,7 +230,7 @@ export function CalendarEventContent({ event, compact, className }: CalendarEven
         </div>
       ) : (
         <div className="flex items-center justify-center bg-gradient-to-br from-primary/10 via-primary/5 to-transparent py-8">
-          <CalendarDays className="h-10 w-10 text-primary/30" />
+          <CalendarDays className="h-10 w-10 text-primary" />
         </div>
       )}
 

src/components/CalendarEventDetailPage.tsx

@@ -1,8 +1,9 @@
 import { useMemo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
 import {
-  ArrowLeft,
   CalendarDays,
+  ChevronLeft,
   MapPin,
   Clock,
   Users,
@@ -18,24 +19,28 @@ import type { NostrEvent, NostrMetadata } from '@nostrify/nostrify';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
-import { NoteContent } from '@/components/NoteContent';
+import { Card, CardContent } from '@/components/ui/card';
+import { DetailCommentComposer } from '@/components/DetailCommentComposer';
+import { DetailReplySkeleton, DetailStory } from '@/components/DetailStory';
 import { NoteMoreMenu } from '@/components/NoteMoreMenu';
 import { PostActionBar } from '@/components/PostActionBar';
+import { PinnedCommentHeader } from '@/components/PinnedCommentHeader';
 import { ReplyComposeModal } from '@/components/ReplyComposeModal';
 import { CreateCommunityEventDialog } from '@/components/CreateCommunityEventDialog';
 import { RSVPAvatars } from '@/components/RSVPAvatars';
-import { Skeleton } from '@/components/ui/skeleton';
 import { ThreadedReplyList, type ReplyNode } from '@/components/ThreadedReplyList';
 import { useComments } from '@/hooks/useComments';
 import { useAuthor } from '@/hooks/useAuthor';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useEventRSVPs } from '@/hooks/useEventRSVPs';
+import { useEventTranslation } from '@/hooks/useEventTranslation';
 import { useMyRSVP } from '@/hooks/useMyRSVP';
 import { usePublishRSVP } from '@/hooks/usePublishRSVP';
+import { usePinnedEventComments } from '@/hooks/usePinnedEventComments';
 import { useProfileUrl } from '@/hooks/useProfileUrl';
 import { useToast } from '@/hooks/useToast';
 import { genUserName } from '@/lib/genUserName';
+import { openUrl } from '@/lib/downloadFile';
 import { sanitizeUrl } from '@/lib/sanitizeUrl';
 import { cn } from '@/lib/utils';
 
@@ -68,10 +73,10 @@ function getEventCoord(event: NostrEvent): string {
   return `${event.kind}:${event.pubkey}:${d}`;
 }
 
-function formatDetailDate(event: NostrEvent): string {
+function formatDetailDate(event: NostrEvent, locale: string, dateNotSpecified: string): string {
   const startRaw = getTag(event.tags, 'start');
   const endRaw = getTag(event.tags, 'end');
-  if (!startRaw) return 'Date not specified';
+  if (!startRaw) return dateNotSpecified;
 
   if (event.kind === 31922) {
     const parseDate = (d: string) => {
@@ -79,7 +84,7 @@ function formatDetailDate(event: NostrEvent): string {
       return new Date(y, m - 1, day);
     };
     const fmt = (d: Date) => {
-      return d.toLocaleDateString('en-US', {
+      return d.toLocaleDateString(locale, {
         weekday: 'long', month: 'long', day: 'numeric', year: 'numeric',
       });
     };
@@ -109,13 +114,13 @@ function formatDetailDate(event: NostrEvent): string {
     ...(startTzid ? { timeZone: startTzid } : {}),
   };
 
-  const dateFmt = new Intl.DateTimeFormat('en-US', opts);
+  const dateFmt = new Intl.DateTimeFormat(locale, opts);
   const startStr = dateFmt.format(new Date(startTs));
 
   if (endTs) {
     const sameDay = new Date(startTs).toDateString() === new Date(endTs).toDateString();
     if (sameDay) {
-      const timeFmt = new Intl.DateTimeFormat('en-US', {
+      const timeFmt = new Intl.DateTimeFormat(locale, {
         hour: 'numeric', minute: '2-digit',
         ...(startTzid ? { timeZone: startTzid } : {}),
       });
@@ -126,6 +131,26 @@ function formatDetailDate(event: NostrEvent): string {
   return startStr;
 }
 
+function formatCalendarHeroDate(event: NostrEvent, locale: string): string | null {
+  const startRaw = getTag(event.tags, 'start');
+  if (!startRaw) return null;
+
+  if (event.kind === 31922) {
+    const [year, month, day] = startRaw.split('-').map(Number);
+    const date = new Date(year, month - 1, day);
+    if (isNaN(date.getTime())) return startRaw;
+    return date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' });
+  }
+
+  const timestamp = Number(startRaw);
+  if (!Number.isFinite(timestamp)) return startRaw;
+  const startTzid = getTag(event.tags, 'start_tzid');
+  return new Date(timestamp * 1000).toLocaleDateString(locale, {
+    month: 'short', day: 'numeric', year: 'numeric',
+    ...(startTzid ? { timeZone: startTzid } : {}),
+  });
+}
+
 const ROLE_ORDER = ['host', 'speaker', 'moderator', 'participant'];
 function roleSort(a: string, b: string): number {
   const ai = ROLE_ORDER.indexOf(a.toLowerCase());
@@ -136,24 +161,26 @@ function roleSort(a: string, b: string): number {
 // --- Sub-components ---
 
 function PersonRow({ pubkey, label, size = 'md' }: { pubkey: string; label?: string; size?: 'sm' | 'md' }) {
+  const { t } = useTranslation();
   const { data } = useAuthor(pubkey);
   const metadata: NostrMetadata | undefined = data?.metadata;
   const name = metadata?.display_name || metadata?.name || genUserName(pubkey);
   const profileUrl = useProfileUrl(pubkey, metadata);
+  const avatarUrl = sanitizeUrl(metadata?.picture);
   const avatarCls = size === 'sm' ? 'size-8' : 'size-11';
   const fallbackCls = size === 'sm' ? 'text-xs' : '';
 
   return (
     <Link to={profileUrl} className="flex items-center gap-3 group">
       <Avatar className={cn(avatarCls, 'ring-2 ring-background')}>
-        <AvatarImage src={metadata?.picture} />
+        <AvatarImage src={avatarUrl} />
         <AvatarFallback className={cn('bg-muted text-muted-foreground', fallbackCls)}>
           {name.charAt(0).toUpperCase()}
         </AvatarFallback>
       </Avatar>
       <div className="min-w-0 flex-1">
         <p className={cn('font-semibold truncate group-hover:underline', size === 'sm' ? 'text-sm' : 'text-[15px]')}>{name}</p>
-        {!label && size === 'md' && <p className="text-xs text-muted-foreground">Organizer</p>}
+        {!label && size === 'md' && <p className="text-xs text-muted-foreground">{t('calendarEvents.detail.organizer')}</p>}
       </div>
       {label && (
         <Badge variant="secondary" className="ml-auto capitalize text-xs shrink-0">{label}</Badge>
@@ -162,23 +189,41 @@ function PersonRow({ pubkey, label, size = 'md' }: { pubkey: string; label?: str
   );
 }
 
+function EventDetailRow({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <div className="flex items-start gap-3 rounded-xl bg-muted/40 px-3 py-3">
+      <div className="mt-0.5 text-primary shrink-0">{icon}</div>
+      <div className="min-w-0 text-sm leading-relaxed">{children}</div>
+    </div>
+  );
+}
+
 // --- Main Component ---
 
 export function CalendarEventDetailPage({ event }: { event: NostrEvent }) {
+  const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   const { user } = useCurrentUser();
   const { toast } = useToast();
+  const author = useAuthor(event.pubkey);
+  const { translatedEvent: displayEvent, translateAction } = useEventTranslation(event);
 
-  const title = getTag(event.tags, 'title') ?? 'Untitled Event';
-  const image = getTag(event.tags, 'image');
-  const locationRaw = getTag(event.tags, 'location');
+  const title = getTag(displayEvent.tags, 'title') ?? t('calendarEvents.detail.untitledEvent');
+  const image = sanitizeUrl(getTag(displayEvent.tags, 'image'));
+  const locationRaw = getTag(displayEvent.tags, 'location');
   const location = locationRaw ? parseLocation(locationRaw) : undefined;
-  const summary = getTag(event.tags, 'summary');
-  const hashtags = getAllTags(event.tags, 't').map(([, v]) => v).filter(Boolean);
-  const links = getAllTags(event.tags, 'r').map(([, v]) => sanitizeUrl(v)).filter((v): v is string => !!v);
+  const summary = getTag(displayEvent.tags, 'summary');
+  const hashtags = getAllTags(displayEvent.tags, 't').map(([, v]) => v).filter(Boolean);
+  const links = getAllTags(displayEvent.tags, 'r').map(([, v]) => sanitizeUrl(v)).filter((v): v is string => !!v);
 
   const eventCoord = useMemo(() => getEventCoord(event), [event]);
-  const dateStr = useMemo(() => formatDetailDate(event), [event]);
+  const dateStr = useMemo(() => formatDetailDate(event, i18n.language, t('calendarEvents.detail.dateNotSpecified')), [event, i18n.language, t]);
+  const heroDate = useMemo(() => formatCalendarHeroDate(event, i18n.language), [event, i18n.language]);
+  const organizerMetadata: NostrMetadata | undefined = author.data?.metadata;
+  const organizerName = organizerMetadata?.display_name || organizerMetadata?.name || genUserName(event.pubkey);
+  const organizerProfileUrl = useProfileUrl(event.pubkey, organizerMetadata);
+  const organizerPicture = sanitizeUrl(organizerMetadata?.picture);
+  const organizerInitials = organizerName.slice(0, 2).toUpperCase();
 
   // Participants grouped by role
   const participantsByRole = useMemo(() => {
@@ -200,6 +245,12 @@ export function CalendarEventDetailPage({ event }: { event: NostrEvent }) {
   const myRsvp = useMyRSVP(eventCoord);
   const publishRSVP = usePublishRSVP();
   const { data: commentsData, isLoading: commentsLoading } = useComments(event, 500);
+  const {
+    pinnedEvents,
+    isPinned,
+    canManagePins,
+    togglePin,
+  } = usePinnedEventComments(eventCoord, event.pubkey);
   const [replyOpen, setReplyOpen] = useState(false);
   const [moreMenuOpen, setMoreMenuOpen] = useState(false);
   const [editOpen, setEditOpen] = useState(false);
@@ -225,6 +276,17 @@ export function CalendarEventDetailPage({ event }: { event: NostrEvent }) {
       .map((comment) => buildNode(comment));
   }, [commentsData]);
 
+  const pinnedNodes = useMemo(
+    () => pinnedEvents.map((event): ReplyNode => ({ event, children: [] })),
+    [pinnedEvents],
+  );
+
+  const storyEvent = useMemo<NostrEvent>(() => ({
+    ...displayEvent,
+    tags: displayEvent.tags.filter(([name]) => !['image', 'summary', 'title', 't'].includes(name)),
+    content: displayEvent.content || summary || '',
+  }), [displayEvent, summary]);
+
   const handleRSVP = useCallback(async (status: 'accepted' | 'declined' | 'tentative') => {
     if (status === myRsvp.status) return;
     try {
@@ -233,209 +295,341 @@ export function CalendarEventDetailPage({ event }: { event: NostrEvent }) {
         eventAuthorPubkey: event.pubkey,
         status,
       });
-      toast({ title: 'RSVP updated' });
+      toast({ title: t('calendarEvents.detail.rsvpUpdated') });
     } catch {
-      toast({ title: 'Failed to update RSVP', variant: 'destructive' });
+      toast({ title: t('calendarEvents.detail.rsvpFailed'), variant: 'destructive' });
     }
-  }, [eventCoord, event.pubkey, myRsvp.status, publishRSVP, toast]);
+  }, [eventCoord, event.pubkey, myRsvp.status, publishRSVP, toast, t]);
 
   const showRSVP = !!user;
+  const attendingCount = rsvps.accepted.length;
+  const interestedCount = rsvps.tentative.length;
+  const rsvpStatusLabel = myRsvp.status === 'accepted'
+    ? t('calendarEvents.detail.youAreGoing')
+    : myRsvp.status === 'tentative'
+      ? t('calendarEvents.detail.youAreInterested')
+      : myRsvp.status === 'declined'
+        ? t('calendarEvents.detail.youCantGo')
+        : t('calendarEvents.detail.chooseRsvp');
+
+  const eventDetailsCard = (showRSVP || rsvps.total > 0 || links.length > 0) ? (
+    <Card className="rounded-none border-0 bg-transparent shadow-none lg:rounded-xl lg:border lg:bg-card lg:shadow-sm">
+      <CardContent className="p-0 lg:p-5 space-y-5">
+        {showRSVP && (
+          <div className="space-y-3">
+            <div className="flex items-center justify-between gap-3">
+              <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t('calendarEvents.detail.rsvp')}</div>
+              <span className="text-xs font-medium text-muted-foreground">{rsvpStatusLabel}</span>
+            </div>
+            <div className="grid grid-cols-3 gap-2">
+              <Button
+                size="sm"
+                variant={myRsvp.status === 'accepted' ? 'default' : 'outline'}
+                disabled={publishRSVP.isPending}
+                className={cn('rounded-full px-2', myRsvp.status === 'accepted' && 'bg-green-600 hover:bg-green-700 text-white')}
+                onClick={() => handleRSVP('accepted')}
+              >
+                <Check className="size-3.5 mr-1" />
+                {t('calendarEvents.detail.going')}
+              </Button>
+              <Button
+                size="sm"
+                variant={myRsvp.status === 'tentative' ? 'default' : 'outline'}
+                disabled={publishRSVP.isPending}
+                className={cn('rounded-full px-2', myRsvp.status === 'tentative' && 'bg-amber-500 hover:bg-amber-600 text-white')}
+                onClick={() => handleRSVP('tentative')}
+              >
+                <Star className="size-3.5 mr-1" />
+                {t('calendarEvents.detail.interested')}
+              </Button>
+              <Button
+                size="sm"
+                variant={myRsvp.status === 'declined' ? 'default' : 'outline'}
+                disabled={publishRSVP.isPending}
+                className={cn('rounded-full px-2', myRsvp.status === 'declined' && 'bg-destructive hover:bg-destructive/90 text-destructive-foreground')}
+                onClick={() => handleRSVP('declined')}
+              >
+                <XIcon className="size-3.5 mr-1" />
+                {t('calendarEvents.detail.cantGo')}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {rsvps.total > 0 && (
+          <div className={cn('space-y-3', showRSVP && 'border-t border-border/60 pt-4')}>
+            <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t('calendarEvents.detail.attendees')}</div>
+            <div className="space-y-3">
+              {([
+                [t('calendarEvents.detail.going'), rsvps.accepted, 'border-green-500/50 bg-green-500/5 text-green-600'],
+                [t('calendarEvents.detail.interested'), rsvps.tentative, 'border-amber-500/50 bg-amber-500/5 text-amber-600'],
+                [t('calendarEvents.detail.cantGo'), rsvps.declined, 'border-muted-foreground/30 bg-muted/30 text-muted-foreground'],
+              ] as const).map(([label, pks, cls]) => pks.length > 0 && (
+                <div key={label} className="space-y-2">
+                  <Badge variant="outline" className={cn(cls, 'shrink-0 text-xs')}>{label} ({pks.length})</Badge>
+                  <RSVPAvatars pubkeys={pks} maxVisible={8} size="sm" />
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {links.length > 0 && (
+          <div className={cn('space-y-2', (showRSVP || rsvps.total > 0) && 'border-t border-border/60 pt-4')}>
+            <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t('calendarEvents.detail.links')}</div>
+            <div className="space-y-1">
+              {links.map((url) => (
+                <button
+                  key={url}
+                  type="button"
+                  onClick={() => void openUrl(url)}
+                  className="flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm hover:bg-muted/50 transition-colors"
+                >
+                  <LinkIcon className="size-4 text-primary shrink-0" />
+                  <span className="truncate flex-1">{url.replace(/^https?:\/\//, '')}</span>
+                  <ExternalLink className="size-3.5 text-muted-foreground shrink-0" />
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  ) : null;
+
+  const participantsCard = participantsByRole.length > 0 ? (
+    <Card className="border-0 bg-transparent shadow-none lg:border lg:bg-card lg:shadow-sm">
+      <CardContent className="p-0 lg:p-5 space-y-3">
+        <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t('calendarEvents.detail.participants')}</div>
+        <div className="space-y-2">
+          {participantsByRole.map(([role, pubkeys]) =>
+            pubkeys.map((pk) => <PersonRow key={`${role}-${pk}`} pubkey={pk} label={role} size="sm" />),
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  ) : null;
+  const hasSideCards = !!eventDetailsCard || !!participantsCard;
 
   return (
-    <div className="max-w-2xl mx-auto pb-16">
-      {/* ── Standard top bar ── */}
-      <div className="flex items-center gap-4 px-4 pt-4 pb-5">
-        <button
-          onClick={() => window.history.length > 1 ? navigate(-1) : navigate('/')}
-          className="p-1.5 -ml-1.5 rounded-full hover:bg-secondary/60 transition-colors"
-          aria-label="Go back"
-        >
-          <ArrowLeft className="size-5" />
-        </button>
-        <h1 className="text-xl font-bold flex-1">Event Details</h1>
-        {canEdit && (
-          <button
-            className="p-2 rounded-full hover:bg-secondary/60 transition-colors"
-            onClick={() => setEditOpen(true)}
-            aria-label="Edit event"
-          >
-            <Pencil className="size-5" />
-          </button>
+    <main className="min-h-screen pb-16">
+      <header className="relative isolate w-full overflow-hidden bg-gradient-to-br from-primary/35 via-primary/15 to-secondary min-h-[92svh] sm:min-h-0 sm:aspect-[21/9] lg:aspect-[3/1]">
+        {image ? (
+          <img src={image} alt="" className="absolute inset-0 size-full object-cover" />
+        ) : (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <CalendarDays className="size-20 text-primary" />
+          </div>
         )}
-      </div>
+        <div aria-hidden className="absolute inset-x-0 bottom-0 top-[20%] bg-gradient-to-t from-black/95 via-black/80 to-transparent" />
+        <div aria-hidden className="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-black/45 to-transparent" />
 
-      {/* ── Cover image ── */}
-      {image ? (
-        <div className="aspect-[2/1] w-full overflow-hidden">
-          <img src={image} alt={title} className="w-full h-full object-cover" />
+        <div className="absolute inset-x-0 top-0 z-10 px-5 sm:px-6 lg:px-0 pt-[max(env(safe-area-inset-top),1rem)]">
+          <div className="max-w-6xl mx-auto flex items-center justify-between gap-3">
+            <button
+              onClick={() => window.history.length > 1 ? navigate(-1) : navigate('/')}
+              className="inline-flex items-center gap-1.5 h-10 pl-2 pr-3.5 rounded-full bg-black/30 text-white backdrop-blur-md hover:bg-black/45 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 motion-safe:transition-colors"
+              aria-label={t('common.goBack')}
+            >
+              <ChevronLeft className="size-5" />
+              <span className="text-sm font-medium hidden sm:inline">{t('common.back')}</span>
+            </button>
+            {canEdit && (
+              <Button
+                type="button"
+                size="sm"
+                onClick={() => setEditOpen(true)}
+                className="h-10 rounded-full bg-black/30 text-white backdrop-blur-md shadow-none hover:bg-black/45 focus-visible:ring-white/80"
+              >
+                <Pencil className="size-4 mr-2" />
+                {t('common.edit')}
+              </Button>
+            )}
+          </div>
         </div>
-      ) : (
-        <div className="aspect-[3/1] w-full bg-gradient-to-br from-primary/15 via-primary/5 to-transparent flex items-center justify-center">
-          <CalendarDays className="size-20 text-primary/20" />
+
+        <div className="absolute inset-x-0 bottom-0 z-10 px-5 sm:px-6 lg:px-0 pb-[max(env(safe-area-inset-bottom),1.75rem)] pt-16 sm:pt-20">
+          <div className="max-w-6xl mx-auto [text-shadow:0_1px_3px_rgba(0,0,0,0.7)]">
+            <h1 className="text-3xl sm:text-5xl lg:text-6xl font-bold leading-[1.05] tracking-tight text-white max-w-4xl">
+              {title}
+            </h1>
+
+            <Link
+              to={organizerProfileUrl}
+              onClick={(e) => e.stopPropagation()}
+              className="mt-5 inline-flex items-center gap-2.5 text-sm sm:text-base text-white/90 hover:text-white motion-safe:transition-colors group [text-shadow:none]"
+            >
+              <Avatar className="size-8 sm:size-9 ring-2 ring-white/30">
+                {organizerPicture && <AvatarImage src={organizerPicture} alt="" />}
+                <AvatarFallback className="text-xs bg-white/15 text-white">
+                  {organizerInitials}
+                </AvatarFallback>
+              </Avatar>
+              <span className="[text-shadow:0_1px_3px_rgba(0,0,0,0.7)]">
+                {t('calendarEvents.detail.hostedBy')}{' '}
+                <span className="font-semibold underline-offset-4 group-hover:underline">
+                  {organizerName}
+                </span>
+              </span>
+            </Link>
+
+            <div className="mt-3 flex flex-wrap items-center gap-x-5 gap-y-1.5 text-xs sm:text-sm font-medium text-white/85">
+              {heroDate && (
+                <span className="inline-flex items-center gap-1.5">
+                  <CalendarDays className="size-4" />
+                  {heroDate}
+                </span>
+              )}
+              {location && (
+                <span className="inline-flex items-center gap-1.5">
+                  <MapPin className="size-4" />
+                  {location}
+                </span>
+              )}
+              {attendingCount > 0 && (
+                <span className="inline-flex items-center gap-1.5">
+                  <Users className="size-4" />
+                  {t('calendarEvents.detail.attendingCount', { count: attendingCount })}
+                </span>
+              )}
+              {interestedCount > 0 && (
+                <span className="inline-flex items-center gap-1.5">
+                  <Users className="size-4" />
+                  {t('calendarEvents.detail.interestedCount', { count: interestedCount })}
+                </span>
+              )}
+            </div>
+
+            <div className="mt-4 pt-3 border-t border-white/15 [&_button]:!text-white/90 [&_button:hover]:!text-white [&_button:hover]:!bg-white/15 [&_button]:transition-colors [text-shadow:none]">
+              <PostActionBar
+                event={event}
+                replyLabel={t('calendarEvents.detail.comment')}
+                hideZap
+                showShareInSidebar
+                onReply={() => setReplyOpen(true)}
+                onMore={() => setMoreMenuOpen(true)}
+                translateAction={translateAction}
+              />
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {pinnedNodes.length > 0 && (
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 pt-6">
+          <div className="rounded-2xl bg-card border border-border/60 overflow-hidden">
+            <ThreadedReplyList
+              roots={pinnedNodes}
+              renderItemHeader={(event) => (
+                <EventPinHeader
+                  isPinned={isPinned(event.id)}
+                  canManagePins={canManagePins}
+                  pinPending={togglePin.isPending}
+                  onTogglePin={() => handleTogglePin(event)}
+                />
+              )}
+            />
+          </div>
         </div>
       )}
 
-      {/* ── Content ── */}
-      <div className="px-5 mt-5 space-y-5">
-        {/* Title */}
-        <h2 className="text-2xl font-bold leading-tight tracking-tight">{title}</h2>
-        {/* Organizer row */}
-        <div className="flex items-center gap-3">
-          <div className="flex-1 min-w-0">
-            <PersonRow pubkey={event.pubkey} />
-          </div>
-        </div>
+      <div className="max-w-6xl mx-auto px-5 sm:px-6 lg:px-0 py-6 lg:py-10">
+        <div className="lg:flex lg:gap-8 lg:items-start">
+          <div className="flex-1 min-w-0 space-y-8">
+            <section className="space-y-5">
+              <div className="grid gap-3 sm:grid-cols-2">
+                <EventDetailRow icon={<Clock className="size-5" />}>
+                  {dateStr}
+                </EventDetailRow>
+                {location && (
+                  <EventDetailRow icon={<MapPin className="size-5" />}>
+                    {location}
+                  </EventDetailRow>
+                )}
+              </div>
 
-        {/* Date & Location — sidebar-style pills */}
-        <div className="flex flex-col gap-0.5">
-          <div className="flex items-center gap-4 px-3 py-3 rounded-full bg-background/85">
-            <Clock className="size-5 text-primary shrink-0" />
-            <span className="text-sm">{dateStr}</span>
-          </div>
-          {location && (
-            <div className="flex items-center gap-4 px-3 py-3 rounded-full bg-background/85">
-              <MapPin className="size-5 text-primary shrink-0" />
-              <span className="text-sm">{location}</span>
-            </div>
-          )}
-        </div>
-
-        {/* Hashtags */}
-        {hashtags.length > 0 && (
-          <div className="flex flex-wrap gap-2">
-            {hashtags.map((tag) => (
-              <Link key={tag} to={`/t/${tag}`}>
-                <Badge variant="secondary" className="cursor-pointer hover:bg-secondary/80 text-xs px-2.5 py-0.5">
-                  #{tag}
-                </Badge>
-              </Link>
-            ))}
-          </div>
-        )}
-
-        {/* Description */}
-        {(event.content || summary) && (
-          <>
-            <Separator />
-            <section className="space-y-2">
-              <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">About</h2>
-              {event.content ? (
-                <NoteContent event={event} className="text-sm leading-relaxed text-foreground" hideEmbedImages={!!image} />
-              ) : (
-                <p className="text-sm leading-relaxed text-muted-foreground">{summary}</p>
+              {hashtags.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {hashtags.map((tag) => (
+                    <Link key={tag} to={`/t/${tag}`}>
+                      <Badge variant="secondary" className="cursor-pointer hover:bg-secondary/80 text-xs px-2.5 py-0.5">
+                        #{tag}
+                      </Badge>
+                    </Link>
+                  ))}
+                </div>
               )}
+
+              <DetailStory
+                event={storyEvent}
+                hasContent={storyEvent.content.trim().length > 0}
+                heading={t('calendarEvents.detail.description')}
+                headingId="event-details-heading"
+                emptyText={t('calendarEvents.detail.emptyDescription')}
+              />
             </section>
-          </>
-        )}
 
-        {/* External links */}
-        {links.length > 0 && (
-          <div className="flex flex-col gap-0.5">
-            {links.map((url) => (
-              <a
-                key={url}
-                href={url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-4 px-3 py-3 rounded-full bg-background/85 hover:bg-secondary/60 transition-colors"
-              >
-                <LinkIcon className="size-5 text-primary shrink-0" />
-                <span className="text-sm truncate flex-1">{url.replace(/^https?:\/\//, '')}</span>
-                <ExternalLink className="size-4 text-muted-foreground shrink-0" />
-              </a>
-            ))}
-          </div>
-        )}
+            {hasSideCards && (
+              <div className="lg:hidden space-y-4">
+                {eventDetailsCard}
+                {participantsCard}
+              </div>
+            )}
 
-        {/* Participants */}
-        {participantsByRole.length > 0 && (
-          <>
-            <Separator />
-            <section className="space-y-3">
-              <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
-                <Users className="size-4" /> Participants
-              </h2>
-              <div className="space-y-2">
-                {participantsByRole.map(([role, pubkeys]) =>
-                  pubkeys.map((pk) => <PersonRow key={pk} pubkey={pk} label={role} size="sm" />),
+            <section id="event-comments" className="scroll-mt-20">
+              <div className="mt-6">
+                <div className="flex items-baseline justify-between gap-3 mb-3 px-1">
+                  <h2 className="text-lg font-semibold tracking-tight">{t('calendarEvents.detail.comments')}</h2>
+                  {replyTree.length > 0 ? (
+                    <span className="text-sm text-muted-foreground tabular-nums">
+                      {replyTree.length.toLocaleString()} {t('calendarEvents.detail.commentNoun', { count: replyTree.length })}
+                    </span>
+                  ) : null}
+                </div>
+
+                <DetailCommentComposer event={event} className="mb-3" />
+
+                {commentsLoading ? (
+                  <div className="space-y-3">
+                    {Array.from({ length: 3 }).map((_, i) => (
+                      <DetailReplySkeleton key={i} />
+                    ))}
+                  </div>
+                ) : replyTree.length > 0 ? (
+                  <ThreadedReplyList
+                    roots={replyTree}
+                    renderItemHeader={(event) => (
+                      <EventPinHeader
+                        isPinned={isPinned(event.id)}
+                        canManagePins={canManagePins}
+                        pinPending={togglePin.isPending}
+                        onTogglePin={() => handleTogglePin(event)}
+                      />
+                    )}
+                  />
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => setReplyOpen(true)}
+                    className="block w-full rounded-2xl border border-dashed border-border/80 bg-card/50 px-6 py-10 text-center hover:bg-card hover:border-primary/40 transition-colors"
+                  >
+                    <p className="text-base font-medium text-foreground">{t('calendarEvents.detail.noCommentsTitle')}</p>
+                    <p className="mt-1 text-sm text-muted-foreground">{t('calendarEvents.detail.noCommentsHint')}</p>
+                  </button>
                 )}
               </div>
             </section>
-          </>
-        )}
+          </div>
 
-        {/* Attendees */}
-        {rsvps.total > 0 && (
-          <>
-            <Separator />
-            <section className="space-y-3">
-              <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
-                <Users className="size-4" /> Attendees
-              </h2>
-              <div className="space-y-2.5">
-                {([
-                  ['Going', rsvps.accepted, 'border-green-500/50 bg-green-500/5 text-green-600'],
-                  ['Interested', rsvps.tentative, 'border-amber-500/50 bg-amber-500/5 text-amber-600'],
-                  ["Can't Go", rsvps.declined, 'border-muted-foreground/30 bg-muted/30 text-muted-foreground'],
-                ] as const).map(([label, pks, cls]) => pks.length > 0 && (
-                  <div key={label} className="flex items-center gap-3">
-                    <Badge variant="outline" className={cn(cls, 'shrink-0 text-xs')}>{label} ({pks.length})</Badge>
-                    <RSVPAvatars pubkeys={pks} maxVisible={8} size="sm" />
-                  </div>
-                ))}
+          {hasSideCards && (
+            <aside className="hidden lg:block lg:w-[360px] lg:shrink-0 lg:self-start">
+              <div className="lg:sticky lg:top-4 space-y-4">
+                {eventDetailsCard}
+                {participantsCard}
               </div>
-            </section>
-          </>
-        )}
-
-        {/* RSVP section */}
-        {showRSVP && (
-          <>
-            <Separator />
-            <section className="space-y-3">
-              <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
-                <Check className="size-4" /> RSVP
-              </h2>
-              <div className="flex gap-2">
-                <Button
-                  size="sm"
-                  variant={myRsvp.status === 'accepted' ? 'default' : 'outline'}
-                  disabled={publishRSVP.isPending}
-                  className={cn('flex-1 rounded-full', myRsvp.status === 'accepted' && 'bg-green-600 hover:bg-green-700 text-white')}
-                  onClick={() => handleRSVP('accepted')}
-                >
-                  <Check className="size-3.5 mr-1.5" /> Going
-                </Button>
-                <Button
-                  size="sm"
-                  variant={myRsvp.status === 'tentative' ? 'default' : 'outline'}
-                  disabled={publishRSVP.isPending}
-                  className={cn('flex-1 rounded-full', myRsvp.status === 'tentative' && 'bg-amber-500 hover:bg-amber-600 text-white')}
-                  onClick={() => handleRSVP('tentative')}
-                >
-                  <Star className="size-3.5 mr-1.5" /> Interested
-                </Button>
-                <Button
-                  size="sm"
-                  variant={myRsvp.status === 'declined' ? 'default' : 'outline'}
-                  disabled={publishRSVP.isPending}
-                  className={cn('flex-1 rounded-full', myRsvp.status === 'declined' && 'bg-destructive hover:bg-destructive/90 text-destructive-foreground')}
-                  onClick={() => handleRSVP('declined')}
-                >
-                  <XIcon className="size-3.5 mr-1.5" /> Can't Go
-                </Button>
-              </div>
-            </section>
-          </>
-        )}
-
-        <PostActionBar
-          event={event}
-          replyLabel="Comments"
-          onReply={() => setReplyOpen(true)}
-          onMore={() => setMoreMenuOpen(true)}
-          className="-mx-5 px-5"
-        />
+            </aside>
+          )}
+        </div>
 
         <NoteMoreMenu event={event} open={moreMenuOpen} onOpenChange={setMoreMenuOpen} />
         <ReplyComposeModal event={event} open={replyOpen} onOpenChange={setReplyOpen} />
@@ -446,32 +640,40 @@ export function CalendarEventDetailPage({ event }: { event: NostrEvent }) {
             event={event}
           />
         )}
-
-        <section>
-          {commentsLoading ? (
-            <div className="space-y-3">
-              {Array.from({ length: 3 }).map((_, i) => (
-                <div key={i} className="flex gap-3">
-                  <Skeleton className="size-10 rounded-full shrink-0" />
-                  <div className="flex-1 space-y-2">
-                    <Skeleton className="h-4 w-32" />
-                    <Skeleton className="h-4 w-full" />
-                    <Skeleton className="h-4 w-2/3" />
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : replyTree.length > 0 ? (
-            <div className="-mx-5">
-              <ThreadedReplyList roots={replyTree} />
-            </div>
-          ) : (
-            <div className="py-8 text-center text-muted-foreground text-sm">
-              No comments yet. Be the first to comment!
-            </div>
-          )}
-        </section>
       </div>
-    </div>
+    </main>
+  );
+
+  function handleTogglePin(event: NostrEvent) {
+    const wasPinned = isPinned(event.id);
+    togglePin.mutate(event.id, {
+      onSuccess: () => {
+        toast({ title: wasPinned ? t('calendarEvents.detail.unpinnedToast') : t('calendarEvents.detail.pinnedToast') });
+      },
+      onError: () => {
+        toast({ title: t('calendarEvents.detail.pinFailed'), variant: 'destructive' });
+      },
+    });
+  }
+}
+
+function EventPinHeader({
+  isPinned,
+  canManagePins,
+  pinPending,
+  onTogglePin,
+}: {
+  isPinned: boolean;
+  canManagePins: boolean;
+  pinPending: boolean;
+  onTogglePin: () => void;
+}) {
+  return (
+    <PinnedCommentHeader
+      isPinned={isPinned}
+      canManagePins={canManagePins}
+      pinPending={pinPending}
+      onTogglePin={onTogglePin}
+    />
   );
 }

src/components/CampaignCard.tsx

@@ -1,24 +1,25 @@
 import { useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { CalendarClock, HandHeart, MapPin, Target, Users, Archive } from 'lucide-react';
+import { CalendarClock, HandHeart, MapPin, ShieldCheck } from 'lucide-react';
 
-import { Badge } from '@/components/ui/badge';
+import { AuthorByline } from '@/components/AuthorByline';
 import { Card } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
 import { Skeleton } from '@/components/ui/skeleton';
-import { CampaignModerationMenu } from '@/components/CampaignModerationMenu';
+import { ModerationOverlay } from '@/components/moderation';
 import { useAuthor } from '@/hooks/useAuthor';
 import { useBtcPrice } from '@/hooks/useBtcPrice';
 import { useCampaignDonations } from '@/hooks/useCampaignDonations';
-import { useCampaignModeration } from '@/hooks/useCampaignModeration';
+import { useEventTranslation } from '@/hooks/useEventTranslation';
 import {
   type ParsedCampaign,
   encodeCampaignNaddr,
   getCampaignCountryLabel,
-  getCampaignPrimaryTagLabel,
+  parseCampaign,
 } from '@/lib/campaign';
-import { formatCampaignAmount } from '@/lib/formatCampaignAmount';
-import { genUserName } from '@/lib/genUserName';
+import { formatCampaignAmount, formatUsdGoal, satsToUsd } from '@/lib/formatCampaignAmount';
 import { sanitizeUrl } from '@/lib/sanitizeUrl';
 import { cn } from '@/lib/utils';
 
@@ -33,30 +34,86 @@ function formatDeadline(unixSeconds: number): { label: string; isPast: boolean }
   return { label: `${months} mo left`, isPast: false };
 }
 
-/** Short helper rendered both inline (cards) and in the detail page. */
-export function CampaignProgress({
+/**
+ * Short helper rendered both inline (cards) and in the detail page.
+ *
+ * Per NIP.md Kind 33863, the campaign **goal** is integer USD and the
+ * **raised** total is the sum of verified sats. We render both in the
+ * goal's unit (USD) for consistency, converting the sats total at view
+ * time using the live BTC price. While the price is loading the raised
+ * amount falls back to sats.
+ */
+function CampaignProgress({
   raisedSats,
-  goalSats,
+  goalUsd,
   btcPrice,
   className,
 }: {
   raisedSats: number;
-  goalSats?: number;
+  goalUsd?: number;
   btcPrice?: number;
   className?: string;
 }) {
-  const hasGoal = !!goalSats && goalSats > 0;
-  const pct = hasGoal ? Math.min(100, Math.round((raisedSats / goalSats!) * 100)) : 0;
+  const hasGoal = !!goalUsd && goalUsd > 0;
+  const raisedUsd = satsToUsd(raisedSats, btcPrice);
+  const pct = hasGoal && raisedUsd !== undefined
+    ? Math.min(100, Math.round((raisedUsd / goalUsd!) * 100))
+    : 0;
+
+  // Always reserve a bar row so cards with and without a goal occupy
+  // the same vertical space. The bar is rendered invisibly when
+  // there's no goal — same height, no visual weight.
+  //
+  // The primitive's default `bg-secondary` track is too close to the
+  // card surface in both light and dark modes (in dark mode they're
+  // both `0 0% 18%`, making the empty portion of the bar invisible).
+  // `bg-foreground/15` overrides it with a foreground-tinted track
+  // that has real contrast against the card in either theme.
   return (
     <div className={cn('space-y-1.5', className)}>
-      {hasGoal && <Progress value={pct} className="h-2" />}
+      <Progress
+        value={pct}
+        className={cn('h-2 bg-foreground/15', !hasGoal && 'invisible')}
+        aria-hidden={!hasGoal}
+      />
       <div className="flex items-baseline justify-between gap-2 text-sm">
         <span className="font-semibold">
           {formatCampaignAmount(raisedSats, btcPrice)}
           {!hasGoal && <span className="ml-1 font-normal text-muted-foreground">raised</span>}
         </span>
         {hasGoal && (
-          <span className="text-muted-foreground">of {formatCampaignAmount(goalSats!, btcPrice)} goal</span>
+          <span className="text-muted-foreground">of {formatUsdGoal(goalUsd!)} goal</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Replaces {@link CampaignProgress} for silent-payment campaigns, where
+ * on-chain totals are unobservable by design. Shows the goal as a target
+ * (if set) but no progress bar or raised amount.
+ */
+function CampaignPrivateNotice({
+  goalUsd,
+  className,
+}: {
+  goalUsd?: number;
+  className?: string;
+}) {
+  // Mirrors CampaignProgress's vertical footprint (invisible bar + one
+  // text row) so a silent-payment card lines up visually with a
+  // public-progress card alongside it.
+  return (
+    <div className={cn('space-y-1.5', className)}>
+      <Progress value={0} className="h-2 invisible" aria-hidden />
+      <div className="flex items-baseline justify-between gap-2 text-sm">
+        <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+          <ShieldCheck className="size-3.5" />
+          Private campaign
+        </span>
+        {goalUsd && goalUsd > 0 && (
+          <span className="text-muted-foreground">Target: {formatUsdGoal(goalUsd)}</span>
         )}
       </div>
     </div>
@@ -65,42 +122,56 @@ export function CampaignProgress({
 
 interface CampaignCardProps {
   campaign: ParsedCampaign;
-  /** Visual variant: `compact` for grid items, `featured` for hero placement. */
-  variant?: 'compact' | 'featured';
+  /**
+   * Visual variant.
+   *
+   * - `compact` — default grid item.
+   * - `featured` — hero placement (wider, side-by-side on `sm+`).
+   * - `shelf` — fixed-width card for horizontal scroll rails (e.g. group
+   *   official-activity). Caller no longer hand-rolls the size wrapper.
+   */
+  variant?: 'compact' | 'featured' | 'shelf';
   className?: string;
+  /** Optional footer affordance rendered opposite the author line. */
+  footerBadge?: ReactNode;
 }
 
 /**
  * Renders a single campaign as a clickable card. The whole card is a
  * `<Link>` to the campaign's naddr-based detail route.
  */
-export function CampaignCard({ campaign, variant = 'compact', className }: CampaignCardProps) {
+export function CampaignCard({ campaign, variant = 'compact', className, footerBadge }: CampaignCardProps) {
+  const { t } = useTranslation();
+  const { translatedEvent, translateAction } = useEventTranslation(campaign.event, {
+    iconOnly: true,
+    buttonClassName: 'size-8 rounded-full p-0 text-muted-foreground hover:text-primary hover:bg-primary/10',
+  });
+  const displayCampaign = parseCampaign(translatedEvent) ?? campaign;
   const author = useAuthor(campaign.pubkey);
-  const { data: stats } = useCampaignDonations(campaign.aTag);
+  const { data: stats } = useCampaignDonations(campaign);
   const { data: btcPrice } = useBtcPrice();
-  const { data: moderation } = useCampaignModeration();
 
   const naddr = useMemo(() => encodeCampaignNaddr(campaign), [campaign]);
-  const cover = sanitizeUrl(campaign.image);
-  const creatorName =
-    author.data?.metadata?.display_name ||
-    author.data?.metadata?.name ||
-    genUserName(campaign.pubkey);
+  const authorMetadata = author.data?.metadata;
+  const cover = sanitizeUrl(displayCampaign.banner)
+    ?? sanitizeUrl(authorMetadata?.banner)
+    ?? sanitizeUrl(authorMetadata?.picture);
   const deadline = campaign.deadline ? formatDeadline(campaign.deadline) : null;
   const raisedSats = stats?.totalSats ?? 0;
   const countryLabel = getCampaignCountryLabel(campaign);
-  const tagLabel = getCampaignPrimaryTagLabel(campaign);
+  // SP-only campaigns hide aggregate totals; dual-endpoint campaigns
+  // show on-chain aggregates per spec.
+  const isSilentPayment = !campaign.wallets.onchain;
 
   const isFeaturedVariant = variant === 'featured';
-  const isApproved = moderation.approvedCoords.has(campaign.aTag);
-  const isHidden = moderation.hiddenCoords.has(campaign.aTag);
-  const isFeatured = moderation.featuredCoords.has(campaign.aTag);
+  const isShelfVariant = variant === 'shelf';
 
   return (
     <Link
       to={`/${naddr}`}
       className={cn(
         'group block rounded-xl overflow-hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-safe:transition-transform motion-safe:duration-200 motion-safe:hover:-translate-y-0.5',
+        isShelfVariant && 'h-[430px] w-[280px] shrink-0',
         className,
       )}
     >
@@ -110,7 +181,11 @@ export function CampaignCard({ campaign, variant = 'compact', className }: Campa
           isFeaturedVariant && 'sm:flex-row sm:items-stretch',
         )}
       >
-        {/* Cover image */}
+        {/* Cover image. Optional metadata (country, deadline) is
+            overlaid on the banner as glass chips so the body below can
+            stay structurally deterministic. A bottom gradient keeps
+            the chips legible against any photo; a top scrim does the
+            same for the moderation chip + hidden badge. */}
         <div
           className={cn(
             'relative w-full bg-gradient-to-br from-primary/15 via-primary/5 to-secondary',
@@ -126,106 +201,107 @@ export function CampaignCard({ campaign, variant = 'compact', className }: Campa
             />
           ) : (
             <div className="absolute inset-0 flex items-center justify-center">
-              <HandHeart className="size-12 text-primary/40" />
+              <HandHeart className="size-12 text-primary" />
             </div>
           )}
-          {tagLabel && (
-            <Badge
-              variant="secondary"
-              className="absolute top-3 left-3 backdrop-blur bg-background/80 border-border/40"
-            >
-              {tagLabel}
-            </Badge>
-          )}
-          <div className="absolute top-3 right-3 flex items-center gap-2">
-            {campaign.archived && (
-              <Badge
-                variant="secondary"
-                className="backdrop-blur bg-background/85 border-border/40"
-              >
-                <Archive className="size-3.5 mr-1" />
-                Archived
-              </Badge>
-            )}
-            {isHidden && (
-              <Badge
-                variant="secondary"
-                className="backdrop-blur bg-destructive/15 text-destructive border-destructive/30"
-              >
-                Hidden
-              </Badge>
-            )}
-            <CampaignModerationMenu
-              coord={campaign.aTag}
-              campaignTitle={campaign.title}
-              isApproved={isApproved}
-              isHidden={isHidden}
-              isFeatured={isFeatured}
+
+          {/* Bottom gradient — only present when there are bottom chips
+              to display, so a banner with no overlays stays visually
+              clean. */}
+          {(countryLabel || deadline) && (
+            <div
+              aria-hidden
+              className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/70 via-black/30 to-transparent"
             />
-          </div>
+          )}
+          {/* Top scrim for moderation chip + hidden badge legibility. */}
+          <div
+            aria-hidden
+            className="absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-black/30 to-transparent"
+          />
+
+          {/* Bottom-left meta chips — country + deadline. */}
+          {(countryLabel || deadline) && (
+            <div className="absolute bottom-3 left-3 z-10 flex flex-wrap items-center gap-1.5 [text-shadow:0_1px_2px_rgba(0,0,0,0.6)]">
+              {countryLabel && (
+                <span className="inline-flex items-center gap-1.5 rounded-full bg-black/35 backdrop-blur-md px-2.5 py-1 text-[11px] font-medium text-white">
+                  <MapPin className="size-3.5" />
+                  {countryLabel}
+                </span>
+              )}
+              {deadline && (
+                <span
+                  className={cn(
+                    'inline-flex items-center gap-1.5 rounded-full bg-black/35 backdrop-blur-md px-2.5 py-1 text-[11px] font-medium text-white',
+                    deadline.isPast && 'bg-destructive/60',
+                  )}
+                >
+                  <CalendarClock className="size-3.5" />
+                  {deadline.label}
+                </span>
+              )}
+            </div>
+          )}
+
+          <ModerationOverlay
+            coord={campaign.aTag}
+            entityTitle={campaign.title}
+            surface="campaign"
+            axes={['approval', 'hide', 'featured']}
+            badgeSize="default"
+            className="absolute top-3 right-3 z-10 flex items-center gap-2"
+          />
         </div>
 
-        {/* Body */}
+        {/* Body — deterministic structure: title (1 line, truncates) →
+            story (1 line, truncates; non-breaking space placeholder
+            when absent) → progress (invisible-bar placeholder absorbs
+            the no-goal case) → creator footer. Country, deadline,
+            hidden badge, and moderation menu all live on the banner
+            overlay, so this region's height is genuinely fixed: every
+            card has the same body footprint, no dead space, no
+            raggedness. */}
         <div className={cn('flex flex-col gap-3 p-5', isFeaturedVariant && 'sm:w-1/2 sm:p-6')}>
-          <div className="space-y-2">
+          <div className="space-y-1">
             <h3
               className={cn(
-                'font-bold leading-tight tracking-tight',
+                'font-bold leading-tight tracking-tight truncate',
                 isFeaturedVariant ? 'text-2xl sm:text-3xl' : 'text-lg',
               )}
             >
-              {campaign.title}
+              {displayCampaign.title}
             </h3>
-            {campaign.summary && (
-              <p
-                className={cn(
-                  'text-muted-foreground',
-                  isFeaturedVariant ? 'text-base line-clamp-3' : 'text-sm line-clamp-2',
-                )}
-              >
-                {campaign.summary}
-              </p>
-            )}
+            <p
+              className={cn(
+                'text-muted-foreground truncate',
+                isFeaturedVariant ? 'text-base' : 'text-sm',
+              )}
+            >
+              {displayCampaign.story || '\u00A0'}
+            </p>
           </div>
 
-          <div className="flex-1" />
+          {isSilentPayment ? (
+            <CampaignPrivateNotice goalUsd={campaign.goalUsd} />
+          ) : (
+            <CampaignProgress raisedSats={raisedSats} goalUsd={campaign.goalUsd} btcPrice={btcPrice} />
+          )}
 
-          <CampaignProgress raisedSats={raisedSats} goalSats={campaign.goalSats} btcPrice={btcPrice} />
-
-          {/* Meta row */}
-          <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground pt-1">
-            <span className="inline-flex items-center gap-1.5">
-              <Users className="size-3.5" />
-              {campaign.recipients.length}{' '}
-              {campaign.recipients.length === 1 ? 'recipient' : 'recipients'}
-            </span>
-            {stats && stats.donorCount > 0 && (
-              <span className="inline-flex items-center gap-1.5">
-                <Target className="size-3.5" />
-                {stats.donorCount} {stats.donorCount === 1 ? 'donor' : 'donors'}
-              </span>
+          <div className="flex items-center justify-between gap-3 border-t border-border/60 pt-3 text-xs text-muted-foreground">
+            <div className="flex min-w-0 items-center gap-2">
+              <AuthorByline pubkey={campaign.pubkey} insideLink />
+              {!isSilentPayment && stats && stats.donorCount > 0 && (
+                <span className="shrink-0 text-muted-foreground/80">
+                  · {t('common.donors', { count: stats.donorCount })}
+                </span>
+              )}
+            </div>
+            {(footerBadge || translateAction) && (
+              <div className="flex shrink-0 items-center gap-1.5">
+                {footerBadge}
+                {translateAction}
+              </div>
             )}
-            {countryLabel && (
-              <span className="inline-flex items-center gap-1.5">
-                <MapPin className="size-3.5" />
-                {countryLabel}
-              </span>
-            )}
-            {deadline && (
-              <span
-                className={cn(
-                  'inline-flex items-center gap-1.5',
-                  deadline.isPast && 'text-destructive',
-                )}
-              >
-                <CalendarClock className="size-3.5" />
-                {deadline.label}
-              </span>
-            )}
-          </div>
-
-          <div className="text-xs text-muted-foreground border-t border-border/60 pt-3 truncate">
-            by <span className="font-medium text-foreground">{creatorName}</span>
           </div>
         </div>
       </Card>

src/components/CampaignHeroBackground.tsx

@@ -1,114 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-import { sanitizeUrl } from '@/lib/sanitizeUrl';
-import { cn } from '@/lib/utils';
-interface CampaignHeroBackgroundProps {
-  /**
-   * Image URL for the active campaign. Each new URL crossfades over the
-   * previous one — we keep up to two layers mounted at a time so the
-   * transition is smooth even when the source changes mid-fade.
-   */
-  imageUrl: string | undefined;
-  /** Optional className for the outer wrapper. */
-  className?: string;
-}
-
-interface Layer {
-  /** Stable key so React doesn't tear down the layer mid-transition. */
-  id: number;
-  /** Sanitized URL (or `null` for the gradient-only fallback). */
-  url: string | null;
-}
-
-const FADE_MS = 1500;
-
-/**
- * Full-bleed crossfading background built from the active campaign's banner
- * image. Modelled after Treasures' HeroGallery: each image gets its own
- * stacked layer and we toggle opacity to crossfade. The previous layer
- * unmounts after the fade completes, so we never accumulate more than a
- * couple of layers in the DOM.
- *
- * A warm tint + subtle film-grain SVG sit on top so headlines stay readable
- * over any photo.
- */
-export function CampaignHeroBackground({ imageUrl, className }: CampaignHeroBackgroundProps) {
-  const idRef = useRef(0);
-  const [layers, setLayers] = useState<Layer[]>([]);
-  const lastUrlRef = useRef<string | null>(null);
-
-  useEffect(() => {
-    const safe = sanitizeUrl(imageUrl) ?? null;
-    if (safe === lastUrlRef.current) return;
-    lastUrlRef.current = safe;
-
-    const id = ++idRef.current;
-    // Add the new layer; existing layers stay mounted so the crossfade has
-    // something to fade from.
-    setLayers((prev) => [...prev, { id, url: safe }]);
-
-    // After the fade completes, drop everything except the most recent
-    // layer to keep the DOM tidy.
-    const timeout = window.setTimeout(() => {
-      setLayers((prev) => prev.filter((l) => l.id === id));
-    }, FADE_MS + 50);
-    return () => window.clearTimeout(timeout);
-  }, [imageUrl]);
-
-  return (
-    <div className={cn('absolute inset-0 overflow-hidden', className)} aria-hidden="true">
-      {layers.map((layer, i) => {
-        const isTop = i === layers.length - 1;
-        return (
-          <div
-            key={layer.id}
-            className="absolute inset-0"
-            style={{
-              opacity: isTop ? 1 : 0,
-              transition: `opacity ${FADE_MS}ms ease-in-out`,
-            }}
-          >
-            {layer.url ? (
-              <img
-                src={layer.url}
-                alt=""
-                loading="eager"
-                decoding="async"
-                // Slow continuous pan toward the left — pairs with the
-                // right-anchored globe so the scene reads as moving toward
-                // the headline copy.
-                className="absolute inset-0 w-full h-full object-cover hero-pan-left"
-              />
-            ) : (
-              <div className="absolute inset-0 bg-gradient-to-br from-primary/30 via-background to-secondary/40" />
-            )}
-          </div>
-        );
-      })}
-
-      {/* Dark vertical scrim — strong at the bottom (spotlight card) and
-          lighter at the top so the photo still reads. Uses black instead of
-          background so the overlay is consistent across light/dark themes. */}
-      <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/45 to-black/15" />
-      {/* Warm primary tint — gives the hero its brand feel. */}
-      <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-transparent to-primary/10" />
-
-      {/* Left wash — mobile only, where the globe arc crosses the headline.
-          Dark so white headline text has a reliable backdrop. */}
-      <div className="absolute inset-0 bg-gradient-to-r from-black/75 via-black/35 to-transparent sm:hidden" />
-
-      {/* Film grain — same trick as Treasures' HeroGallery. Helps the
-          composited globe + photo feel like one image. */}
-      <svg
-        className="absolute inset-0 w-full h-full pointer-events-none"
-        style={{ opacity: 0.18 }}
-      >
-        <filter id="hero-grain">
-          <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="2" stitchTiles="stitch" />
-          <feColorMatrix type="saturate" values="0" />
-        </filter>
-        <rect width="100%" height="100%" filter="url(#hero-grain)" />
-      </svg>
-    </div>
-  );
-}

src/components/CampaignLedger.tsx

@@ -0,0 +1,199 @@
+import { useTranslation } from 'react-i18next';
+import { ArrowDownLeft, ArrowUpRight, Clock, ExternalLink } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useAddressLedger } from '@/hooks/useAddressLedger';
+import { useBtcPrice } from '@/hooks/useBtcPrice';
+import { type AddressTransaction, formatBTC, satsToUSD } from '@/lib/bitcoin';
+import { openUrl } from '@/lib/downloadFile';
+import { timeAgo } from '@/lib/timeAgo';
+
+interface CampaignLedgerProps {
+  /** The campaign's on-chain (`bc1…`) Bitcoin address. */
+  address: string;
+}
+
+/**
+ * Public on-chain activity for a campaign's `bc1…` address, presented as a
+ * mempool.space-style ledger. Each row is one transaction touching the
+ * address, with its address-relative net sat flow (inbound or outbound),
+ * confirmation status, and a deep link to mempool.space for the full tx.
+ *
+ * Only applicable when the campaign declares a public on-chain endpoint —
+ * silent-payment-only campaigns have no scannable address and should not
+ * surface this tab at all.
+ */
+export function CampaignLedger({ address }: CampaignLedgerProps) {
+  const { t } = useTranslation();
+  const { data: btcPrice } = useBtcPrice();
+  const query = useAddressLedger(address, true);
+
+  const pages = query.data?.pages ?? [];
+  const txs: AddressTransaction[] = pages.flat();
+
+  return (
+    <div className="rounded-2xl bg-muted/60 overflow-hidden border-l border-r border-primary/20">
+      <LedgerHeader address={address} />
+
+      {query.isLoading ? (
+        <div className="divide-y divide-primary/20">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <LedgerRowSkeleton key={i} />
+          ))}
+        </div>
+      ) : query.isError ? (
+        <div className="px-5 py-10 text-center text-sm text-muted-foreground">
+          {t('campaignsDetail.ledger.error')}
+        </div>
+      ) : txs.length === 0 ? (
+        <div className="px-5 py-10 text-center text-sm text-muted-foreground">
+          {t('campaignsDetail.ledger.empty')}
+        </div>
+      ) : (
+        <>
+          <ul className="divide-y divide-primary/20">
+            {txs.map((tx) => (
+              <LedgerRow key={tx.txid} tx={tx} btcPrice={btcPrice} />
+            ))}
+          </ul>
+
+          {query.hasNextPage && (
+            <div className="px-4 py-3 flex justify-center border-t border-primary/20">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => void query.fetchNextPage()}
+                disabled={query.isFetchingNextPage}
+              >
+                {query.isFetchingNextPage
+                  ? t('campaignsDetail.ledger.loadingMore')
+                  : t('campaignsDetail.ledger.loadMore')}
+              </Button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function LedgerHeader({ address }: { address: string }) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex items-center justify-between gap-3 px-4 sm:px-5 py-3 border-b border-primary/20 bg-background/40">
+      <div className="min-w-0">
+        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          {t('campaignsDetail.ledger.publicAddress')}
+        </p>
+        <p className="mt-0.5 text-xs sm:text-sm font-mono text-foreground/90 break-all">
+          {address}
+        </p>
+      </div>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="shrink-0 gap-1.5"
+        onClick={() => void openUrl(`https://mempool.space/address/${address}`)}
+        title={t('campaignsDetail.ledger.viewOnMempool')}
+      >
+        <ExternalLink className="size-3.5" />
+        <span className="hidden sm:inline">{t('campaignsDetail.ledger.viewOnMempool')}</span>
+      </Button>
+    </div>
+  );
+}
+
+function LedgerRow({
+  tx,
+  btcPrice,
+}: {
+  tx: AddressTransaction;
+  btcPrice: number | undefined;
+}) {
+  const { t } = useTranslation();
+  const isInflow = tx.netSats >= 0;
+  const absSats = Math.abs(tx.netSats);
+  const Icon = isInflow ? ArrowDownLeft : ArrowUpRight;
+  const tone = isInflow ? 'text-emerald-600 dark:text-emerald-400' : 'text-amber-600 dark:text-amber-400';
+  const bgTone = isInflow ? 'bg-emerald-500/10' : 'bg-amber-500/10';
+
+  const when = tx.confirmed && tx.blockTime
+    ? timeAgo(tx.blockTime)
+    : t('campaignsDetail.ledger.unconfirmed');
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={() => void openUrl(`https://mempool.space/tx/${tx.txid}`)}
+        className="w-full px-4 sm:px-5 py-3 flex items-center gap-3 text-left hover:bg-background/40 motion-safe:transition-colors"
+        title={t('campaignsDetail.ledger.openOnMempool')}
+      >
+        <span
+          aria-hidden
+          className={`inline-flex size-9 shrink-0 items-center justify-center rounded-full ${bgTone} ${tone}`}
+        >
+          <Icon className="size-4" />
+        </span>
+
+        <div className="min-w-0 flex-1">
+          <div className="flex items-baseline gap-2">
+            <span className="text-sm font-medium text-foreground">
+              {isInflow
+                ? t('campaignsDetail.ledger.received')
+                : t('campaignsDetail.ledger.sent')}
+            </span>
+            <span className="text-xs font-mono text-muted-foreground truncate">
+              {tx.txid.slice(0, 8)}…{tx.txid.slice(-6)}
+            </span>
+          </div>
+          <div className="mt-0.5 flex items-center gap-1.5 text-xs text-muted-foreground">
+            {!tx.confirmed && <Clock className="size-3" aria-hidden />}
+            <span>{when}</span>
+            {tx.confirmed && tx.blockHeight ? (
+              <>
+                <span aria-hidden>·</span>
+                <span>{t('campaignsDetail.ledger.block', { height: tx.blockHeight })}</span>
+              </>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="text-right shrink-0">
+          {btcPrice ? (
+            <div className={`text-sm font-semibold tabular-nums ${tone}`}>
+              {isInflow ? '+' : '−'}
+              {satsToUSD(absSats, btcPrice)}
+            </div>
+          ) : null}
+          <div
+            className={`tabular-nums ${
+              btcPrice ? 'text-xs text-muted-foreground' : `text-sm font-semibold ${tone}`
+            }`}
+          >
+            {isInflow ? '+' : '−'}
+            {formatBTC(absSats)} {t('campaignsDetail.ledger.btcUnit')}
+          </div>
+        </div>
+      </button>
+    </li>
+  );
+}
+
+function LedgerRowSkeleton() {
+  return (
+    <div className="px-4 sm:px-5 py-3 flex items-center gap-3">
+      <Skeleton className="size-9 rounded-full" />
+      <div className="flex-1 space-y-1.5">
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-3 w-20" />
+      </div>
+      <div className="space-y-1.5">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-3 w-14" />
+      </div>
+    </div>
+  );
+}

src/components/CampaignModerationMenu.tsx

@@ -1,144 +0,0 @@
-import { useState } from 'react';
-import { Check, EyeOff, Eye, Loader2, MoreHorizontal, ShieldCheck, ShieldOff, Sparkles, SparklesIcon } from 'lucide-react';
-
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { useCampaignModeration, type ModerationLabel } from '@/hooks/useCampaignModeration';
-import { useCampaignModerators } from '@/hooks/useCampaignModerators';
-import { useCurrentUser } from '@/hooks/useCurrentUser';
-import { useToast } from '@/hooks/useToast';
-
-interface CampaignModerationMenuProps {
-  /** The campaign's `30223:<pubkey>:<d>` coordinate. */
-  coord: string;
-  /** Visible label for the campaign (for toast feedback). */
-  campaignTitle: string;
-  /** Whether the campaign is currently approved. */
-  isApproved: boolean;
-  /** Whether the campaign is currently hidden. */
-  isHidden: boolean;
-  /** Whether the campaign is currently featured. */
-  isFeatured: boolean;
-  className?: string;
-}
-
-/**
- * Per-card kebab menu exposing the six moderation actions:
- *   Approve / Unapprove   (axis = approval)
- *   Hide / Unhide         (axis = hide)
- *   Feature / Unfeature   (axis = featured)
- *
- * Renders `null` for users who are not Team Soapbox pack members. Sits
- * inside the clickable `CampaignCard` `<Link>`, so the trigger swallows
- * its own click + the dropdown content stops propagation, otherwise every
- * menu interaction would navigate to the campaign detail page.
- */
-export function CampaignModerationMenu({
-  coord,
-  campaignTitle,
-  isApproved,
-  isHidden,
-  isFeatured,
-  className,
-}: CampaignModerationMenuProps) {
-  const { user } = useCurrentUser();
-  const { data: moderators } = useCampaignModerators();
-  const { moderate } = useCampaignModeration();
-  const { toast } = useToast();
-  const [busy, setBusy] = useState<ModerationLabel | null>(null);
-
-  const isMod = !!user && !!moderators && moderators.includes(user.pubkey);
-  if (!isMod) return null;
-
-  const runAction = async (action: ModerationLabel, verbPast: string) => {
-    if (busy) return;
-    setBusy(action);
-    try {
-      await moderate.mutateAsync({ coord, action });
-      toast({ title: `${verbPast}`, description: campaignTitle });
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Unknown error';
-      toast({
-        title: `Failed to ${action}`,
-        description: message,
-        variant: 'destructive',
-      });
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild onClick={(e) => e.preventDefault()}>
-        <Button
-          variant="ghost"
-          size="icon"
-          aria-label="Moderate campaign"
-          className={className ?? 'h-8 w-8 bg-background/80 backdrop-blur text-muted-foreground hover:text-foreground'}
-        >
-          {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <MoreHorizontal className="h-4 w-4" />}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
-        <DropdownMenuLabel className="text-xs text-muted-foreground">
-          Moderator actions
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {isApproved ? (
-          <DropdownMenuItem onClick={() => runAction('unapproved', 'Removed from homepage')}>
-            <ShieldOff className="h-4 w-4 mr-2" />
-            Unapprove
-            <span className="ml-auto text-xs text-muted-foreground inline-flex items-center gap-1">
-              <Check className="h-3 w-3" /> Approved
-            </span>
-          </DropdownMenuItem>
-        ) : (
-          <DropdownMenuItem onClick={() => runAction('approved', 'Approved for homepage')}>
-            <ShieldCheck className="h-4 w-4 mr-2" />
-            Approve
-          </DropdownMenuItem>
-        )}
-        {isHidden ? (
-          <DropdownMenuItem onClick={() => runAction('unhidden', 'Unhidden')}>
-            <Eye className="h-4 w-4 mr-2" />
-            Unhide
-            <span className="ml-auto text-xs text-muted-foreground inline-flex items-center gap-1">
-              <Check className="h-3 w-3" /> Hidden
-            </span>
-          </DropdownMenuItem>
-        ) : (
-          <DropdownMenuItem
-            onClick={() => runAction('hidden', 'Hidden')}
-            className="text-destructive focus:text-destructive"
-          >
-            <EyeOff className="h-4 w-4 mr-2" />
-            Hide
-          </DropdownMenuItem>
-        )}
-        <DropdownMenuSeparator />
-        {isFeatured ? (
-          <DropdownMenuItem onClick={() => runAction('unfeatured', 'Removed from featured')}>
-            <SparklesIcon className="h-4 w-4 mr-2" />
-            Unfeature
-            <span className="ml-auto text-xs text-muted-foreground inline-flex items-center gap-1">
-              <Check className="h-3 w-3" /> Featured
-            </span>
-          </DropdownMenuItem>
-        ) : (
-          <DropdownMenuItem onClick={() => runAction('featured', 'Featured on homepage')}>
-            <Sparkles className="h-4 w-4 mr-2" />
-            Feature
-          </DropdownMenuItem>
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

src/components/CampaignWalletDonatePanel.tsx

@@ -0,0 +1,192 @@
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Check, Copy, ExternalLink } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { QRCodeCanvas } from '@/components/ui/qrcode';
+import { useToast } from '@/hooks/useToast';
+import type { CampaignWallets } from '@/lib/campaign';
+
+interface CampaignWalletDonatePanelProps {
+  /** Parsed wallet endpoints declared by the campaign's `w` tags. At least one must be present. */
+  wallets: CampaignWallets;
+  /**
+   * Optional primary action rendered immediately above the
+   * "Open external wallet" button — typically a "Pay with Agora"
+   * button injected by the campaign detail page when the logged-in donor
+   * has an HD wallet available.
+   *
+   * When supplied, the "Open external wallet" button switches to the
+   * `outline` variant so the in-app pay action visually leads. When
+   * absent, the external-wallet button keeps its default (primary)
+   * styling — the panel still works on its own for logged-out donors
+   * and SP-only campaigns.
+   */
+  primaryAction?: ReactNode;
+}
+
+/**
+ * Build the BIP-21 URI used by the QR code and the "Open in wallet"
+ * button.
+ *
+ * - Single on-chain endpoint:                `bitcoin:<bc1>`
+ * - Single silent-payment endpoint:          `bitcoin:?sp=<sp1>`
+ * - Both endpoints (combined BIP-21 URI):    `bitcoin:<bc1>?sp=<sp1>`
+ *
+ * BIP-352-aware wallets pick the `sp=` parameter; legacy wallets fall
+ * back to the on-chain address.
+ */
+function buildQrPayload(wallets: CampaignWallets): string {
+  const { onchain, sp } = wallets;
+  if (onchain && sp) return `bitcoin:${onchain.value}?sp=${sp.value}`;
+  if (onchain) return `bitcoin:${onchain.value}`;
+  if (sp) return `bitcoin:?sp=${sp.value}`;
+  // parseCampaign rejects events without any wallet; the panel should
+  // never be rendered in this state.
+  return 'bitcoin:';
+}
+
+/**
+ * Inline panel rendering the campaign's wallet endpoints as a scannable
+ * QR code, a copyable string, and an "Open in wallet" button.
+ *
+ * Behavior:
+ *
+ * - **on-chain only** (`bc1q…` / `bc1p…`) — BIP-21 QR with the address
+ *   and a copyable row for the raw address.
+ * - **silent payment only** (`sp1…`) — raw silent-payment code QR and a
+ *   copyable row for the raw SP code.
+ * - **both** — combined BIP-21 URI in the QR and a single copyable row
+ *   containing the same `bitcoin:<addr>?sp=<sp>` URI; BIP-352-aware
+ *   wallets pick the SP path automatically, legacy wallets fall back to
+ *   the on-chain address.
+ *
+ * Intentionally minimal: no amount input, no PSBT/in-app wallet flow —
+ * that's `DonateDialog`'s job. This panel is the always-available
+ * "scan and pay from any wallet" affordance.
+ */
+export function CampaignWalletDonatePanel({
+  wallets,
+  primaryAction,
+}: CampaignWalletDonatePanelProps) {
+  const { t } = useTranslation();
+  const qrPayload = buildQrPayload(wallets);
+  const { onchain, sp } = wallets;
+
+  // When both endpoints are present, donors copy the same BIP-21 URI
+  // that the QR encodes — modern wallets parse it in their recipient
+  // field. When only one endpoint exists, the raw value is friendlier.
+  const copyValue = onchain && sp ? qrPayload : (onchain?.value ?? sp?.value ?? '');
+  const copyLabel = onchain && sp
+    ? 'Payment URI'
+    : sp
+      ? 'Silent-payment code'
+      : 'Bitcoin address';
+
+  return (
+    <div className="space-y-5">
+      {/* QR — large, centered on a clean white tile with the Agora logo
+          embedded in an orange circular badge in the center.
+          Error-correction level H tolerates the centered occlusion
+          (~30% of modules can be missing and the code still scans). */}
+      <div className="flex justify-center">
+        <div className="relative rounded-2xl bg-white p-4 shadow-sm">
+          <QRCodeCanvas value={qrPayload} size={280} level="H" />
+          <div
+            aria-hidden
+            className="absolute inset-0 flex items-center justify-center pointer-events-none"
+          >
+            <div className="rounded-full bg-primary p-2 ring-[6px] ring-white">
+              <img
+                src="/logo.svg"
+                alt=""
+                className="size-16 object-contain brightness-0 invert"
+                draggable={false}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Copyable value — single row mirroring the QR payload. */}
+      <WalletCopyRow value={copyValue} label={copyLabel} />
+
+      {/* Optional in-app pay action rendered immediately above the
+          external-wallet button. When present it becomes the primary
+          CTA; the external button below downgrades to `outline` so
+          there's only ever one orange button stacked here. */}
+      {primaryAction}
+
+      {/* "Open in wallet" — relies on the `bitcoin:` URI handler. SP
+          codes inside `bitcoin:?sp=` are still understood by BIP-352-
+          aware wallets. Older wallets that don't know about SP will
+          ignore the parameter and either refuse the link or show an
+          error — at which point the donor falls back to copy/paste
+          anyway.
+
+          The label switches to "Open external wallet" only when a
+          `primaryAction` slot is filled (i.e. the in-app "Pay with
+          Agora" button is right above it) — that's the one situation
+          where we need to disambiguate between "external" and "Agora's
+          own wallet". When the slot is empty the qualifier is just
+          noise. */}
+      <Button
+        asChild
+        variant={primaryAction ? 'outline' : 'default'}
+        className={primaryAction ? 'w-full' : 'w-full text-white'}
+      >
+        <a href={qrPayload}>
+          <ExternalLink className="size-4 mr-1.5" />
+          {primaryAction
+            ? t('campaignsDetail.openExternalWallet')
+            : t('campaignsDetail.openInWallet')}
+        </a>
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * Single copyable row for the wallet payload. Renders the value in a
+ * monospace font and copies it to the clipboard on click. The label is
+ * used in the aria-label and the success toast so donors know what
+ * they just copied.
+ */
+function WalletCopyRow({ value, label }: { value: string; label: string }) {
+  const { toast } = useToast();
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+      toast({ title: `${label} copied` });
+    } catch {
+      toast({
+        title: 'Copy failed',
+        description: 'Select and copy the value manually.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      className="w-full flex items-center gap-2 rounded-lg border bg-muted/40 px-3 py-2.5 text-left hover:bg-muted/60 motion-safe:transition-colors"
+      aria-label={`Copy ${label.toLowerCase()}`}
+    >
+      <span className="flex-1 min-w-0 truncate font-mono text-xs" title={value}>
+        {value}
+      </span>
+      {copied ? (
+        <Check className="size-4 text-green-500 shrink-0" />
+      ) : (
+        <Copy className="size-4 text-muted-foreground shrink-0" />
+      )}
+    </button>
+  );
+}

src/components/ColorMomentContent.tsx

@@ -1,8 +1,7 @@
-import { useMemo, useState, useEffect, useId } from 'react';
+import { useMemo } from 'react';
 
 import { cn } from '@/lib/utils';
-import { useTheme } from '@/hooks/useTheme';
-import { getColors, paletteToTheme } from '@/lib/colorMomentUtils';
+import { getColors } from '@/lib/colorMomentUtils';
 import type { NostrEvent } from '@nostrify/nostrify';
 
 type Layout = 'horizontal' | 'vertical' | 'grid' | 'star' | 'checkerboard' | 'diagonalStripes';
@@ -198,61 +197,14 @@ const LAYOUT_MAP: Record<Layout, React.FC<{ colors: string[] }>> = {
   diagonalStripes: DiagonalStripesLayout,
 };
 
-/** Standalone blinking eye button for setting a color moment as the active theme. */
-export function ColorMomentEyeButton({ event }: { event: NostrEvent }) {
-  const colors = useMemo(() => getColors(event.tags), [event.tags]);
-  const { applyCustomTheme } = useTheme();
-  const [isBlinking, setIsBlinking] = useState(false);
-  const uid = useId();
-
-  useEffect(() => {
-    if (isBlinking) {
-      const timer = setTimeout(() => setIsBlinking(false), 500);
-      return () => clearTimeout(timer);
-    }
-  }, [isBlinking]);
-
-  const handleSetTheme = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsBlinking(true);
-    applyCustomTheme(paletteToTheme(colors));
-  };
-
-  if (colors.length === 0) return null;
-
-  const outer = colors[0] ?? '#888';
-  const iris = colors[colors.length - 1] ?? '#888';
-
-  // Build the eye as a data-URI SVG so the browser renders it as an image
-  // (smooth anti-aliasing, no compositing layer on siblings)
-  const eyeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <circle cx="50" cy="50" r="45" fill="${outer}"/>
-    <circle cx="50" cy="50" r="32" fill="white" opacity="0.9"/>
-    <circle cx="50" cy="50" r="20" fill="${iris}"/>
-    <circle cx="50" cy="50" r="10" fill="#1c1917"/>
-    <circle cx="43" cy="43" r="4" fill="white" opacity="0.8"/>
-  </svg>`;
-  const eyeUrl = `data:image/svg+xml,${encodeURIComponent(eyeSvg)}`;
-
-  return (
-    <button
-      onClick={handleSetTheme}
-      className="flex items-center gap-1.5 hover:opacity-80 active:scale-95 transition-all shrink-0"
-      title="Set as theme"
-    >
-      <span className="text-[11px] font-medium text-muted-foreground">Set as theme</span>
-      {/* Eye container — overflow-hidden clips the eyelid, doesn't touch siblings */}
-      <div className="relative size-9 rounded-full overflow-hidden" id={uid}>
-        <img src={eyeUrl} alt="" className="w-9 h-9" />
-        {isBlinking && (
-          <div className="absolute inset-0 animate-eyelid-blink">
-            <div className="absolute rounded-full bg-background w-full h-full bottom-0 left-0" />
-          </div>
-        )}
-      </div>
-    </button>
-  );
-}
+/** Standalone blinking eye button — REMOVED.
+ *
+ * This component used to let any user apply an arbitrary kind-3367 event's
+ * palette as their active theme via `applyCustomTheme(paletteToTheme(...))`.
+ * Agora no longer supports user-customizable themes, so the apply path has
+ * been removed entirely. Color Moments still render as palette art via
+ * `ColorMomentContent` below.
+ */
 
 export function ColorMomentContent({ event }: { event: NostrEvent }) {
   const colors = useMemo(() => getColors(event.tags), [event.tags]);

src/components/CommentContext.tsx

@@ -1,10 +1,10 @@
 import type React from 'react';
-import { type ReactNode, useMemo, useState } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { nip19 } from 'nostr-tools';
 import {
   Award, BarChart3, Bird, BookOpen, Camera, Clapperboard, FileText, Film,
-  GitBranch, GitPullRequest, Highlighter, Mail, MapPin, Megaphone, MessageSquare, Mic, Music,
+  GitBranch, GitPullRequest, HandHeart, Highlighter, Mail, MapPin, Megaphone, MessageSquare, Mic, Music,
   Package, Palette, PartyPopper, Podcast, Radio, Rocket, SmilePlus,
   Stars, Target, Users, UserCheck, Vote, Zap,
 } from 'lucide-react';
@@ -29,13 +29,11 @@ import { useLinkPreview } from '@/hooks/useLinkPreview';
 import { useScryfallCard } from '@/hooks/useScryfallCard';
 import { getDisplayName } from '@/lib/getDisplayName';
 import { genUserName } from '@/lib/genUserName';
-import { getCountryInfo, getWikipediaTitle } from '@/lib/countries';
+import { getCountryInfo } from '@/lib/countries';
 import { CountryFlag } from '@/components/CountryFlag';
-import { customFlagAsset, hasCustomFlag } from '@/lib/customFlags';
+import { hasCustomFlag } from '@/lib/customFlags';
 import { useCountryFeed } from '@/contexts/CountryFeedContext';
 import { cn } from '@/lib/utils';
-import { useFlagPalette } from '@/lib/flagPalette';
-import { useWikipediaSummary } from '@/hooks/useWikipediaSummary';
 import { extractGathererCard, type GathererCard } from '@/lib/linkEmbed';
 import { cardPrimaryImage } from '@/lib/scryfall';
 
@@ -146,8 +144,9 @@ const KIND_LABELS: Record<number, string> = {
   32267: 'a Zapstore app',
   34139: 'a playlist',
   34236: 'a divine',
-  34550: 'an organization',
+  34550: 'a group',
   9041: 'a goal',
+  33863: 'a campaign',
   35128: 'an nsite',
   36639: 'a pledge',
   36787: 'a track',
@@ -205,6 +204,7 @@ const KIND_ICONS: Partial<Record<number, React.ComponentType<{ className?: strin
   39089: PartyPopper,
   3367: Palette,
   9041: Target,
+  33863: HandHeart,
   9735: Zap,
   9802: Highlighter,
   2473: Bird,
@@ -246,7 +246,8 @@ const KIND_SUFFIXES: Partial<Record<number, string>> = {
   37381: 'deck',
   37516: 'treasure',
   30621: 'constellation',
-  34550: 'organization',
+  34550: 'group',
+  33863: 'campaign',
   30054: 'episode',
   30055: 'trailer',
   34139: 'playlist',
@@ -912,16 +913,10 @@ function useCountryRootContext(event: NostrEvent): { iTag: string; code: string
 }
 
 /**
- * Whether the given event is rendering with country chrome (pill + flag
- * backdrop) in the current context. Useful for sibling components that want
- * to coordinate styling — e.g. NoteCard switching its text to white when a
- * flag is showing through behind the author row.
+ * Whether the given event is rendering with country chrome (the corner
+ * flag pill) in the current context. Useful for sibling components that
+ * want to coordinate styling.
  */
-// eslint-disable-next-line react-refresh/only-export-components
-export function useIsCountryRooted(event: NostrEvent): boolean {
-  return useCountryRootContext(event) !== null;
-}
-
 /**
  * Standalone country flag pill for kind-1111 events whose root is an ISO 3166
  * identifier. Intended to be rendered in the upper-right of `NoteCard`'s
@@ -939,100 +934,11 @@ export function CountryCommentPill({ event, className }: { event: NostrEvent; cl
 }
 
 /**
- * Decorative flag backdrop for country-rooted kind-1111 posts. Renders the
- * country's Wikipedia lead image (the flag, for country articles) faded
- * behind the post, echoing the country detail page's hero
- * (`CountryContentHeader` in `ExternalContentHeader.tsx`) but scaled down
- * to a card. Pairs with `CountryCommentPill`.
- *
- * Designed to be rendered as the first child of a `relative overflow-hidden`
- * parent. The wrapper is absolutely positioned at `z-0`; its foreground
- * siblings must declare `relative` (any positioned value works) so they
- * paint above the backdrop. Pointer events are disabled so the post body
- * stays fully interactive.
- *
- * The Wikipedia summary fetch is cached for 24 h across all cards
- * referencing the same country code, so a feed of N Venezuelan posts only
- * pays the network cost once.
- *
- * Visibility rules: see `useCountryRootContext` (identical to the pill).
+ * Decorative flag backdrop for country-rooted kind-1111 posts has been
+ * removed in favor of a cleaner card surface. The `CountryCommentPill`
+ * in the upper-right of the header is now the sole country chrome for
+ * world posts.
  */
-export function CountryFlagBackdrop({ event }: { event: NostrEvent }) {
-  const ctx = useCountryRootContext(event);
-  const info = ctx ? getCountryInfo(ctx.code) : null;
-  const wikiTitle = ctx ? getWikipediaTitle(ctx.code) : null;
-  const { data: wiki } = useWikipediaSummary(wikiTitle);
-  // Sample dominant colors from the flag emoji at render time. Used as the
-  // fallback gradient while Wikipedia is still resolving and after image
-  // load failures, so the backdrop never reverts to a giant blurred emoji.
-  const palette = useFlagPalette(info?.flag);
-  // Track image load failures so we cleanly fall back to the flag-color
-  // gradient. Wikipedia hosts these PNGs from upload.wikimedia.org which is
-  // generally CORS-friendly, but hotlink-protection or transient 4xx
-  // responses can still happen.
-  const [imageFailed, setImageFailed] = useState(false);
-
-  if (!ctx) return null;
-
-  // Bundled-asset override: for codes with a curated flag SVG (currently
-  // CN-XZ / Tibet) we skip Wikipedia entirely — its lead image is often
-  // a parent-country map or an administrative-region inset, neither of
-  // which reads as a flag behind a note. The Snow Lion SVG is what the
-  // post is editorially "about", so it earns the backdrop slot.
-  const bundledAsset = customFlagAsset(ctx.code);
-  // For country articles Wikipedia returns the flag as the page's lead image
-  // — the same source used by `CountryContentHeader`. Prefer the original
-  // (full-resolution) over the 330px thumbnail; the thumbnail gets upscaled
-  // and looks fuzzy when stretched across a full-width feed card.
-  const flagImage = !imageFailed
-    ? (bundledAsset ?? wiki?.originalImage?.source ?? wiki?.thumbnail?.source ?? null)
-    : null;
-
-  // Pre-built gradient using the palette (sampled from the flag emoji at
-  // mount). Used as the fallback when Wikipedia hasn't returned an image or
-  // its image failed to load. Single-color palettes get duplicated so
-  // linear-gradient still has two stops.
-  const paletteGradient =
-    palette && palette.length > 0
-      ? `linear-gradient(135deg, ${palette.length === 1 ? `${palette[0]}, ${palette[0]}` : palette.join(', ')})`
-      : null;
-
-  return (
-    <div aria-hidden className="pointer-events-none absolute inset-0 z-0 overflow-hidden">
-      <div className="absolute top-0 left-0 right-0 h-64 sm:h-72">
-        {flagImage ? (
-          // Full-width flag banner across the top of the card. A mask-image
-          // gradient fades the image to nothing at its bottom edge, so the
-          // flag dissolves into the card with no hard seam.
-          <img
-            src={flagImage}
-            alt=""
-            decoding="async"
-            onError={() => setImageFailed(true)}
-            className="w-full h-full object-cover opacity-20 select-none"
-            style={{
-              maskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
-              WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
-            }}
-          />
-        ) : paletteGradient ? (
-          // Wikipedia not yet resolved (or its image failed) — paint the
-          // flag-color gradient as a placeholder/fallback. Same opacity and
-          // mask shape as the image so the visual swap is seamless when the
-          // image arrives.
-          <div
-            className="absolute inset-0 opacity-20"
-            style={{
-              backgroundImage: paletteGradient,
-              maskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
-              WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
-            }}
-          />
-        ) : null}
-      </div>
-    </div>
-  );
-}
 
 /**
  * Body-level comment context for ISO 3166 roots — intentionally renders
@@ -1083,7 +989,7 @@ function IsbnCommentContext({ identifier, className, prefix }: { identifier: str
               />
             ) : (
               <div className="w-9 h-12 rounded bg-secondary flex items-center justify-center shrink-0">
-                <BookOpen className="size-4 text-muted-foreground/40" />
+                <BookOpen className="size-4 text-muted-foreground" />
               </div>
             )}
             <div className="flex-1 min-w-0">
@@ -1164,7 +1070,7 @@ function GathererCardCommentContext({
               />
             ) : (
               <div className="w-9 h-12 rounded bg-secondary flex items-center justify-center shrink-0">
-                <CardsIcon className="size-4 text-muted-foreground/40" />
+                <CardsIcon className="size-4 text-muted-foreground" />
               </div>
             )}
             <div className="flex-1 min-w-0">

src/components/CommentsSection.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface CommentsSectionProps {
+  /**
+   * Section heading rendered above the muted panel. Omit when the section
+   * already lives under a higher-level header (e.g. a tab label that
+   * doubles as the section title) — the panel then renders without its
+   * own heading row.
+   */
+  title?: string;
+  /** Optional count chip rendered opposite the heading. Ignored when `title` is omitted. */
+  countLabel?: ReactNode;
+  /**
+   * Panel contents. Composer + threaded list + empty state are owned
+   * by the caller — this wrapper just provides the canonical visual
+   * surface so the three detail pages (campaign / community / pledge)
+   * stop drifting.
+   *
+   * The wrap uses `bg-muted/60` with `border-primary/20` accents and
+   * retints child `<article>` borders so per-note dividers read as a
+   * single consistent edge color. The composer inside uses `bg-card`
+   * for its own focused-surface contrast against this backdrop.
+   */
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Canonical visual surface for the comments section on detail pages.
+ * Extracted from the previous campaign-detail-only treatment so
+ * Campaigns, Communities, and Pledges all present comments inside the
+ * same muted, rounded, primary-tinted panel.
+ */
+export function CommentsSection({ title, countLabel, children, className }: CommentsSectionProps) {
+  return (
+    <div className={cn('mt-4', className)}>
+      {title ? (
+        <div className="mb-3 px-1 flex items-baseline justify-between gap-3">
+          <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+          {countLabel ? (
+            <span className="text-sm text-muted-foreground tabular-nums">{countLabel}</span>
+          ) : null}
+        </div>
+      ) : null}
+
+      {/* Muted surface wraps the composer and comment list. The wrap
+          carries the outer L/R/B border so the rounded corners curve
+          naturally without any 1px gaps at the join. Per-article
+          `border-b` divides items. The composer's own border closes
+          the top. */}
+      <div className="rounded-2xl bg-muted/60 overflow-hidden border-l border-r border-primary/20 [&_article]:border-b-primary/20 [&_article]:bg-background/40">
+        {children}
+      </div>
+    </div>
+  );
+}

src/components/CommentsSheet.tsx

@@ -1,196 +0,0 @@
-/**
- * CommentsModal — a centered rounded modal for displaying and composing
- * comments/replies on any Nostr event.
- */
-
-import { useCallback, useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { X } from 'lucide-react';
-import { useNostr } from '@nostrify/react';
-import { useQuery } from '@tanstack/react-query';
-import { PortalContainerProvider } from '@/hooks/usePortalContainer';
-import type { NostrEvent } from '@nostrify/nostrify';
-import { useAuthor } from '@/hooks/useAuthor';
-import { useProfileUrl } from '@/hooks/useProfileUrl';
-import { getDisplayName } from '@/lib/getDisplayName';
-import { timeAgo } from '@/lib/timeAgo';
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
-import { Skeleton } from '@/components/ui/skeleton';
-import { ProfileHoverCard } from '@/components/ProfileHoverCard';
-import { ComposeBox } from '@/components/ComposeBox';
-
-function getTag(tags: string[][], name: string): string | undefined {
-  return tags.find(([n]) => n === name)?.[1];
-}
-
-// ── data hook ─────────────────────────────────────────────────────────────────
-
-function useEventComments(event: NostrEvent | undefined) {
-  const { nostr } = useNostr();
-
-  const aTag = event
-    ? `${event.kind}:${event.pubkey}:${getTag(event.tags, 'd') ?? ''}`
-    : undefined;
-
-  return useQuery<NostrEvent[]>({
-    queryKey: ['event-comments', aTag ?? event?.id ?? ''],
-    queryFn: async ({ signal }) => {
-      if (!event) return [];
-      const abort = AbortSignal.any([signal, AbortSignal.timeout(5000)]);
-      const filters =
-        event.kind >= 30000 && event.kind < 40000 && aTag
-          ? [{ kinds: [1111, 1244], '#A': [aTag], limit: 80 }]
-          : event.kind === 1
-          ? [
-              { kinds: [1, 1111], '#e': [event.id], limit: 80 },
-              { kinds: [1111], '#E': [event.id], limit: 80 },
-            ]
-          : [{ kinds: [1111], '#e': [event.id], limit: 80 }];
-      const events = await nostr.query(filters, { signal: abort });
-      const seen = new Set<string>();
-      return events
-        .filter((e) => { if (seen.has(e.id)) return false; seen.add(e.id); return true; })
-        .sort((a, b) => b.created_at - a.created_at);
-    },
-    enabled: !!event,
-    staleTime: 15_000,
-    refetchInterval: 20_000,
-  });
-}
-
-// ── comment row ───────────────────────────────────────────────────────────────
-
-function CommentRow({ event }: { event: NostrEvent }) {
-  const author = useAuthor(event.pubkey);
-  const metadata = author.data?.metadata;
-  const displayName = getDisplayName(metadata, event.pubkey);
-  const profileUrl = useProfileUrl(event.pubkey, metadata);
-
-  return (
-    <div className="flex gap-2.5 px-4 py-2.5 hover:bg-muted/30 transition-colors">
-      <ProfileHoverCard pubkey={event.pubkey} asChild>
-        <Link to={profileUrl} className="shrink-0">
-          {author.isLoading ? (
-            <Skeleton className="size-7 rounded-full" />
-          ) : (
-            <Avatar className="size-7">
-              <AvatarImage src={metadata?.picture} alt={displayName} />
-              <AvatarFallback className="text-[10px] bg-primary/20 text-primary">
-                {displayName[0]?.toUpperCase()}
-              </AvatarFallback>
-            </Avatar>
-          )}
-        </Link>
-      </ProfileHoverCard>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-baseline gap-1.5 mb-0.5">
-          <ProfileHoverCard pubkey={event.pubkey} asChild>
-            <Link to={profileUrl} className="text-xs font-semibold hover:underline truncate max-w-[140px]">
-              {displayName}
-            </Link>
-          </ProfileHoverCard>
-          <span className="text-[10px] text-muted-foreground shrink-0">{timeAgo(event.created_at)}</span>
-        </div>
-        <p className="text-xs text-foreground/90 leading-relaxed break-words line-clamp-4">
-          {event.content}
-        </p>
-      </div>
-    </div>
-  );
-}
-
-function CommentSkeleton() {
-  return (
-    <div className="flex gap-2.5 px-4 py-2.5">
-      <Skeleton className="size-7 rounded-full shrink-0" />
-      <div className="flex-1 space-y-1.5">
-        <Skeleton className="h-3 w-20" />
-        <Skeleton className="h-3 w-full" />
-        <Skeleton className="h-3 w-3/4" />
-      </div>
-    </div>
-  );
-}
-
-// ── modal ─────────────────────────────────────────────────────────────────────
-
-interface CommentsModalProps {
-  event: NostrEvent | undefined;
-  open: boolean;
-  onClose: () => void;
-}
-
-export function CommentsSheet({ event, open, onClose }: CommentsModalProps) {
-  const { data: rawComments = [], isLoading, dataUpdatedAt } = useEventComments(event);
-  const [portalContainer, setPortalContainer] = useState<HTMLElement | undefined>(undefined);
-
-  // Only show comments once the query has actually fetched for this event.
-  // `dataUpdatedAt === 0` means the query has never resolved — show nothing.
-  const comments = useMemo(() => {
-    if (dataUpdatedAt === 0) return [];
-    const seen = new Set<string>();
-    return rawComments.filter((e) => seen.has(e.id) ? false : (seen.add(e.id), true));
-  }, [rawComments, dataUpdatedAt]);
-
-  const modalRef = useCallback((node: HTMLDivElement | null) => {
-    setPortalContainer(node ?? undefined);
-  }, []);
-
-  if (!open) return null;
-
-  return (
-    <>
-      {/* Backdrop */}
-      <div
-        className="fixed inset-0 z-[200] bg-black/60 backdrop-blur-sm cursor-pointer animate-in fade-in-0 duration-200"
-        onClick={(e) => { e.stopPropagation(); onClose(); }}
-      />
-
-      {/* Modal — centered, rounded */}
-      <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 pointer-events-none">
-        <div
-          ref={modalRef}
-          className="pointer-events-auto w-full max-w-lg max-h-[80vh] flex flex-col bg-background/90 backdrop-blur-md rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 fade-in-0 duration-200"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <PortalContainerProvider value={portalContainer}>
-            {/* Header */}
-            <div className="flex items-center justify-between px-4 py-3 shrink-0">
-              <h3 className="font-semibold text-sm">{event?.kind === 1 ? 'Replies' : 'Comments'}</h3>
-              <button
-                className="p-1.5 rounded-full hover:bg-secondary transition-colors text-muted-foreground"
-                onClick={onClose}
-              >
-                <X className="size-4" strokeWidth={4} />
-              </button>
-            </div>
-
-            {/* Compose — top */}
-            {event && (
-              <div className="shrink-0 -mb-px overflow-hidden">
-                <ComposeBox replyTo={event} compact placeholder={event?.kind === 1 ? 'Add a reply…' : 'Add a comment…'} />
-              </div>
-            )}
-
-            {/* Comment list */}
-            <div className="flex-1 min-h-0 overflow-y-auto divide-y divide-border/50">
-              {isLoading ? (
-                <div className="py-2">
-                  {Array.from({ length: 5 }).map((_, i) => <CommentSkeleton key={i} />)}
-                </div>
-              ) : comments.length === 0 ? (
-                <div className="flex items-center justify-center h-32">
-                  <p className="text-sm text-muted-foreground">
-                  {event?.kind === 1 ? 'No replies yet. Be the first!' : 'No comments yet. Be the first!'}
-                </p>
-                </div>
-              ) : (
-                comments.map((reply) => <CommentRow key={reply.id} event={reply} />)
-              )}
-            </div>
-          </PortalContainerProvider>
-        </div>
-      </div>
-    </>
-  );
-}

src/components/CommunityCard.tsx

@@ -1,96 +0,0 @@
-import { useMemo } from 'react';
-import { Link } from 'react-router-dom';
-import { Bookmark, Crown, Shield, Users } from 'lucide-react';
-import { nip19 } from 'nostr-tools';
-import type { NostrEvent } from '@nostrify/nostrify';
-
-import { parseCommunityEvent, COMMUNITY_DEFINITION_KIND } from '@/lib/communityUtils';
-import { cn } from '@/lib/utils';
-
-interface CommunityCardProps {
-  /** The kind 34550 community definition event. */
-  event: NostrEvent;
-  /** Whether the current user founded this community. */
-  isFounded?: boolean;
-  /** Whether the current user is a validated member. */
-  isMember?: boolean;
-  /** Whether the current user follows this community via NIP-51 kind 10004. */
-  isBookmarked?: boolean;
-  className?: string;
-}
-
-/**
- * Compact card for displaying a community in a list.
- * Shows image, name, description snippet, founder info, and community status.
- */
-export function CommunityCard({
-  event,
-  isFounded,
-  isMember,
-  isBookmarked,
-  className,
-}: CommunityCardProps) {
-  const community = useMemo(() => parseCommunityEvent(event), [event]);
-
-  if (!community) return null;
-
-  const naddr = nip19.naddrEncode({
-    kind: COMMUNITY_DEFINITION_KIND,
-    pubkey: event.pubkey,
-    identifier: community.dTag,
-  });
-
-  return (
-    <Link
-      to={`/${naddr}`}
-      className={cn(
-        'group relative block min-h-[240px] overflow-hidden rounded-2xl bg-muted shadow-sm transition-all hover:shadow-lg sm:min-h-[260px]',
-        className,
-      )}
-    >
-      <div className="absolute right-3 top-3 z-10 flex gap-1.5 [text-shadow:none]">
-        {isFounded && (
-          <span className="flex size-7 items-center justify-center rounded-full bg-black/35 text-white shadow-sm backdrop-blur-sm" title="Founder" aria-label="Founder">
-            <Crown className="size-3.5" />
-          </span>
-        )}
-        {isMember && (
-          <span className="flex size-7 items-center justify-center rounded-full bg-black/35 text-white shadow-sm backdrop-blur-sm" title="Member" aria-label="Member">
-            <Shield className="size-3.5" />
-          </span>
-        )}
-        {isBookmarked && (
-          <span className="flex size-7 items-center justify-center rounded-full bg-black/35 text-white shadow-sm backdrop-blur-sm" title="Following" aria-label="Following">
-            <Bookmark className="size-3.5 fill-current" />
-          </span>
-        )}
-      </div>
-
-      {/* Image backdrop */}
-      {community.image ? (
-        <img
-          src={community.image}
-          alt={community.name}
-          className="absolute inset-0 size-full object-cover transition-transform duration-500 group-hover:scale-105"
-        />
-      ) : (
-        <div className="absolute inset-0 bg-gradient-to-br from-primary/50 via-primary/25 to-primary/5">
-          <Users className="absolute left-1/2 top-1/3 size-16 -translate-x-1/2 -translate-y-1/2 text-white/20" />
-        </div>
-      )}
-
-      <div className="absolute inset-0 bg-[linear-gradient(to_bottom,rgba(0,0,0,0.04)_0%,rgba(0,0,0,0.16)_38%,rgba(0,0,0,0.78)_74%,rgba(0,0,0,0.92)_100%)]" />
-      <div className="absolute inset-x-0 bottom-0 p-4 pt-16 [text-shadow:0_1px_4px_rgba(0,0,0,0.75)]">
-        <h3 className="mb-2 truncate text-lg font-bold leading-tight text-white transition-colors group-hover:text-white">
-          {community.name}
-        </h3>
-
-        {community.description && (
-          <p className="line-clamp-1 text-xs leading-relaxed text-white/80">
-            {community.description}
-          </p>
-        )}
-      </div>
-    </Link>
-  );
-}

src/components/CommunityContent.tsx

@@ -1,99 +0,0 @@
-import { useMemo } from 'react';
-import { Users, Globe } from 'lucide-react';
-import type { NostrEvent } from '@nostrify/nostrify';
-
-import { sanitizeUrl } from '@/lib/sanitizeUrl';
-
-// --- Helpers ---
-
-function getTag(tags: string[][], name: string): string | undefined {
-  return tags.find(([n]) => n === name)?.[1];
-}
-
-function parseCommunityEvent(event: NostrEvent) {
-  const name = getTag(event.tags, 'name') || getTag(event.tags, 'd') || 'Unnamed Organization';
-  const description = getTag(event.tags, 'description') || '';
-  const image = getTag(event.tags, 'image');
-
-  // Extract moderators from p tags with "moderator" role
-  const moderators = event.tags
-    .filter(([n, , , role]) => n === 'p' && role === 'moderator')
-    .map(([, pubkey]) => pubkey)
-    .filter(Boolean);
-
-  // Extract relays
-  const relays = event.tags
-    .filter(([n]) => n === 'relay')
-    .map(([, url, marker]) => ({ url, marker }))
-    .filter((r) => !!r.url);
-
-  return { name, description, image, moderators, relays };
-}
-
-// --- Main Component ---
-
-export function CommunityContent({ event }: { event: NostrEvent }) {
-  const { name, description, image } = useMemo(
-    () => parseCommunityEvent(event),
-    [event],
-  );
-
-  // Extract website URL from description if present
-  const descriptionUrl = useMemo(() => {
-    const urlMatch = description.match(/https?:\/\/[^\s]+/);
-    return sanitizeUrl(urlMatch?.[0]);
-  }, [description]);
-
-  // Description text without trailing URL (if the URL is the last thing)
-  const descriptionText = useMemo(() => {
-    if (!descriptionUrl) return description;
-    return description.replace(new RegExp(`\\s*${descriptionUrl.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*$`), '').trim();
-  }, [description, descriptionUrl]);
-
-  return (
-    <div className="mt-3 space-y-5">
-      {/* Community hero image */}
-      {image ? (
-        <div className="relative -mx-4 aspect-[21/9] overflow-hidden">
-          <img
-            src={image}
-            alt={name}
-            className="w-full h-full object-cover"
-          />
-          {/* Gradient overlay for text readability */}
-          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
-          {/* Community name overlaid on image */}
-          <div className="absolute bottom-0 left-0 right-0 px-4 pb-4">
-            <h1 className="text-2xl font-bold text-white leading-tight drop-shadow-lg">{name}</h1>
-          </div>
-        </div>
-      ) : (
-        <div className="relative -mx-4 aspect-[21/9] bg-gradient-to-br from-primary/15 via-primary/5 to-transparent flex items-center justify-center">
-          <Users className="size-16 text-primary/20" />
-          <div className="absolute bottom-0 left-0 right-0 px-4 pb-4">
-            <h1 className="text-2xl font-bold leading-tight">{name}</h1>
-          </div>
-        </div>
-      )}
-
-      {/* Description */}
-      {descriptionText && (
-        <p className="text-sm leading-relaxed text-muted-foreground whitespace-pre-wrap">{descriptionText}</p>
-      )}
-
-      {/* Website link */}
-      {descriptionUrl && (
-        <a
-          href={descriptionUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center gap-1.5 text-sm text-primary hover:underline"
-        >
-          <Globe className="size-3.5" />
-          {descriptionUrl.replace(/^https?:\/\//, '').replace(/\/$/, '')}
-        </a>
-      )}
-
-    </div>
-  );
-}

src/components/CommunityContentWarning.tsx

@@ -14,7 +14,7 @@ const REPORT_TYPE_LABELS: Record<Nip56ReportType, string> = {
   illegal: 'illegal content',
   malware: 'malware',
   impersonation: 'impersonation',
-  other: 'organization guidelines',
+  other: 'group guidelines',
 };
 
 interface CommunityContentWarningProps {
@@ -68,8 +68,8 @@ export function CommunityContentWarning({ event, children, className }: Communit
             <p className="text-sm font-medium text-foreground">Reported Content</p>
             <p className="text-xs text-muted-foreground leading-relaxed">
               {reporterCount === 1
-                ? `Reported by an organization moderator for ${typeLabels}.`
-                : `Reported by ${reporterCount} organization moderators for ${typeLabels}.`}
+                ? `Reported by a group moderator for ${typeLabels}.`
+                : `Reported by ${reporterCount} group moderators for ${typeLabels}.`}
             </p>
           </div>
           <Button

src/components/ComposeBox.tsx

@@ -1,6 +1,7 @@
 import { lazy, Suspense, useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { Paperclip, Smile, AlertTriangle, X, Loader2, Mic, Square, Sticker, BarChart3, Plus, ChevronLeft, HelpCircle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Paperclip, Smile, AlertTriangle, X, Loader2, Mic, Square, Sticker, BarChart3, Plus, ChevronLeft, Check, Globe, HelpCircle } from 'lucide-react';
 import { nip19 } from 'nostr-tools';
 import { encode as blurhashEncode } from 'blurhash';
 import type { NostrEvent } from '@nostrify/nostrify';
@@ -12,7 +13,21 @@ import { Input } from '@/components/ui/input';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
 import { useCustomEmojis } from '@/hooks/useCustomEmojis';
 import { useFeedSettings } from '@/hooks/useFeedSettings';
 import { GifPicker } from '@/components/GifPicker';
@@ -23,18 +38,21 @@ import { EmojiShortcodeAutocomplete } from '@/components/EmojiShortcodeAutocompl
 import { StickerPicker } from '@/components/StickerPicker';
 
 import { NoteContent } from '@/components/NoteContent';
+import { CountryFlag } from '@/components/CountryFlag';
 
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useNostrPublish } from '@/hooks/useNostrPublish';
 import { usePostComment } from '@/hooks/usePostComment';
 import { useUploadFile } from '@/hooks/useUploadFile';
 import { useCountryFollows } from '@/hooks/useCountryFollows';
-import { getCountryInfo } from '@/lib/countries';
+import { useDefaultPostCountry } from '@/hooks/useDefaultPostCountry';
+import { COUNTRY_LIST, getCountryInfo } from '@/lib/countries';
 import { createCountryIdentifier } from '@/lib/countryIdentifiers';
 import { useQueryClient } from '@tanstack/react-query';
 import { useToast } from '@/hooks/useToast';
 import { useAppContext } from '@/hooks/useAppContext';
-import type { EventStats } from '@/hooks/useTrending';
+import type { Nip85EventStats } from '@/hooks/useNip85Stats';
+import { invalidateEventStats } from '@/lib/invalidateEventStats';
 import { cn } from '@/lib/utils';
 import { notificationSuccess } from '@/lib/haptics';
 import { extractVideoUrls, extractAudioUrls, IMETA_MEDIA_URL_REGEX, IMETA_MEDIA_URL_TEST_REGEX, mimeFromExt } from '@/lib/mediaUrls';
@@ -50,6 +68,7 @@ import { DITTO_RELAY } from '@/lib/appRelays';
 import { resizeImage } from '@/lib/resizeImage';
 import { extractHashtags } from '@/lib/hashtag';
 import { useIsMobile } from '@/hooks/useIsMobile';
+import { AGORA_DEFAULT_NOTE_TAGS } from '@/lib/agoraNoteTags';
 
 const MAX_CHARS = 5000;
 
@@ -156,7 +175,15 @@ interface ComposeBoxProps {
   hidePoll?: boolean;
   /** Label for the primary submit button. */
   submitLabel?: string;
-  /** Tags added to new top-level kind 1 notes without putting them in content. */
+  /**
+   * Tags added to new top-level kind 1 notes without putting them in content.
+   *
+   * Defaults to {@link AGORA_DEFAULT_NOTE_TAGS} (the silent `t:agora` tag) when
+   * the composer is producing a top-level kind 1 note (no replyTo, not a quote,
+   * not poll mode, no custom publish, no country-scoped destination). Replies,
+   * quotes, polls, comments, and custom-kind publishes do not receive these
+   * tags regardless of this prop. Pass `[]` to opt out explicitly.
+   */
   defaultTags?: string[][];
   /** If true, the composer starts expanded without taking modal/flex behavior. */
   defaultExpanded?: boolean;
@@ -201,9 +228,9 @@ function CharRing({ count, max }: { count: number; max: number }) {
 
 
 export function ComposeBox({ 
-  onSuccess, 
+  onSuccess,
   onPublished,
-  placeholder = "What's on your mind?", 
+  placeholder, 
   compact = false, 
   replyTo, 
   quotedEvent, 
@@ -217,10 +244,13 @@ export function ComposeBox({
   initialMode = 'post',
   customPublish,
   hidePoll = false,
-  submitLabel = 'Post!',
-  defaultTags = [],
+  submitLabel,
+  defaultTags,
   defaultExpanded = false,
 }: ComposeBoxProps) {
+  const { t } = useTranslation();
+  const effectivePlaceholder = placeholder ?? t('compose.placeholderDefault');
+  const effectiveSubmitLabel = submitLabel ?? t('compose.submitDefault');
   const { user, metadata, isLoading: isProfileLoading } = useCurrentUser();
   const userProfileUrl = useProfileUrl(user?.pubkey ?? '', metadata);
   const { mutateAsync: createEvent, isPending, isPending: isPollPending } = useNostrPublish();
@@ -234,6 +264,7 @@ export function ComposeBox({
   const { toast } = useToast();
   const { config } = useAppContext();
   const imageQuality = config.imageQuality;
+  const statsPubkey = config.nip85StatsPubkey;
   const isMobile = useIsMobile();
 
   // Build a stable localStorage key based on compose context.
@@ -269,23 +300,39 @@ export function ComposeBox({
   // from the home feed (no replyTo, not a custom-kind publish). When a
   // country code is selected, the post is published as a NIP-22 kind
   // 1111 comment rooted on that country instead of a plain kind 1 note.
-  // Dropdown lists only the countries the user follows, with "Global"
-  // always at the top.
+  //
+  // The dropdown shows: Global + the countries the user follows (quick
+  // picks) + a "Choose another country…" item that opens a searchable
+  // dialog over the full country list. So a user can post about any
+  // country, even one they don't follow.
   const { followedCountries } = useCountryFollows();
   const canChooseDestination =
-    !replyTo && !customPublish && mode === 'post' && !!user && followedCountries.length > 0;
+    !replyTo && !customPublish && mode === 'post' && !!user;
+  /**
+   * User's saved default destination (persisted to localStorage). Used as
+   * the initial value of `destination` on every fresh compose, and updated
+   * when the user clicks "Set as default" in the destination menu.
+   */
+  const [defaultPostCountry, setDefaultPostCountry] = useDefaultPostCountry();
   /** `'world'` for a regular kind-1 note, or an ISO 3166 country code for a kind-1111 community post. */
-  const [destination, setDestination] = useState<'world' | string>('world');
+  const [destination, setDestination] = useState<'world' | string>(defaultPostCountry);
+  /** Open state for the "Choose another country" searchable picker dialog. */
+  const [countryPickerOpen, setCountryPickerOpen] = useState(false);
   const selectedCountryCode = destination !== 'world' ? destination : null;
   const selectedCountryInfo = selectedCountryCode ? getCountryInfo(selectedCountryCode) : null;
-  // If the user unfollows the currently-selected country mid-session,
-  // snap back to world so we don't try to publish a kind 1111 with
-  // a root the user no longer cares about.
+  // Snap back to world if the currently selected destination is an
+  // invalid ISO code (e.g. a previously-followed country that was later
+  // removed from the country directory). Picking a non-followed but
+  // valid country is allowed — users can post about any country via the
+  // "Choose another country" picker, so following is not a prerequisite.
   useEffect(() => {
-    if (selectedCountryCode && !followedCountries.includes(selectedCountryCode)) {
+    if (selectedCountryCode && !getCountryInfo(selectedCountryCode)) {
       setDestination('world');
+      if (defaultPostCountry === selectedCountryCode) {
+        setDefaultPostCountry('world');
+      }
     }
-  }, [selectedCountryCode, followedCountries]);
+  }, [selectedCountryCode, defaultPostCountry, setDefaultPostCountry]);
   const [pollOptions, setPollOptions] = useState([
     { id: pollOptionId(), label: '' },
     { id: pollOptionId(), label: '' },
@@ -295,10 +342,6 @@ export function ComposeBox({
   const [removedEmbeds, setRemovedEmbeds] = useState<Set<string>>(new Set());
   /** Maps uploaded file URLs to their NIP-94 tags (grouped per upload). */
   const [uploadedFileGroups, setUploadedFileGroups] = useState<Map<string, string[][]>>(new Map());
-  /** Maps .xdc URLs to their generated webxdc UUIDs. */
-  const [webxdcUuids, setWebxdcUuids] = useState<Map<string, string>>(new Map());
-  /** Maps .xdc URLs to extracted metadata (name + icon URL). */
-  const [webxdcMetas, setWebxdcMetas] = useState<Map<string, { name?: string; iconUrl?: string }>>(new Map());
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { insertAtCursor, insertEmoji: insertEmojiAtCursor } = useInsertText(textareaRef, content, setContent);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -321,12 +364,10 @@ export function ComposeBox({
     setPollDuration(7);
     setRemovedEmbeds(new Set());
     setUploadedFileGroups(new Map());
-    setWebxdcUuids(new Map());
-    setWebxdcMetas(new Map());
-    setDestination('world');
+    setDestination(defaultPostCountry);
     // Clear the auto-saved draft
     try { localStorage.removeItem(draftKey); } catch { /* ignore */ }
-  }, [initialMode, draftKey, defaultExpanded]);
+  }, [initialMode, draftKey, defaultExpanded, defaultPostCountry]);
 
   // Use controlled preview mode if provided, otherwise use internal state
   const previewMode = controlledPreviewMode !== undefined ? controlledPreviewMode : internalPreviewMode;
@@ -409,7 +450,7 @@ export function ComposeBox({
   // ensure the textarea keeps focus.  The height change re-render can
   // occasionally drop focus on desktop browsers.  On iOS the native tap
   // already handles focus, so this is mainly a desktop safety net.
-  const wasExpanded = useRef(false);
+  const wasExpanded = useRef(defaultExpanded);
   useEffect(() => {
     if (expanded && !wasExpanded.current) {
       textareaRef.current?.focus();
@@ -535,13 +576,10 @@ export function ComposeBox({
     return false;
   }, [content, customEmojis]);
 
-  // Detect webxdc attachments for preview mode
-  const hasWebxdc = useMemo(() => webxdcUuids.size > 0, [webxdcUuids]);
-
-  // Check if content has any previewable content (link previews, images, videos, audio, webxdc, mentions, or custom emojis)
+  // Check if content has any previewable content (link previews, images, videos, audio, mentions, or custom emojis)
   const hasPreviewableContent = useMemo(() => {
-    return visibleEmbeds.length > 0 || hasPreviewImages || previewVideos.length > 0 || previewAudios.length > 0 || hasWebxdc || hasMentions || hasCustomEmojis;
-  }, [visibleEmbeds, hasPreviewImages, previewVideos, previewAudios, hasWebxdc, hasMentions, hasCustomEmojis]);
+    return visibleEmbeds.length > 0 || hasPreviewImages || previewVideos.length > 0 || previewAudios.length > 0 || hasMentions || hasCustomEmojis;
+  }, [visibleEmbeds, hasPreviewImages, previewVideos, previewAudios, hasMentions, hasCustomEmojis]);
 
   // Notify parent of previewable content changes
   useEffect(() => {
@@ -599,33 +637,13 @@ export function ComposeBox({
       if (processedUrls.has(url)) continue;
       processedUrls.add(url);
       const ext = m[1].toLowerCase();
-      const isWebxdc = ext === 'xdc';
       const fileTags = uploadedFileGroups.get(url);
       if (fileTags) {
         const imetaFields = fileTags.map(tag => `${tag[0]} ${tag[1]}`);
-        if (isWebxdc) {
-          const filtered = imetaFields.filter(f => !f.startsWith('m '));
-          filtered.push('m application/x-webxdc');
-          const uuid = webxdcUuids.get(url);
-          if (uuid) filtered.push(`webxdc ${uuid}`);
-          const meta = webxdcMetas.get(url);
-          if (meta?.name) filtered.push(`summary ${meta.name}`);
-          if (meta?.iconUrl) filtered.push(`image ${meta.iconUrl}`);
-          tags.push(['imeta', ...filtered]);
-        } else {
-          tags.push(['imeta', ...imetaFields]);
-        }
+        tags.push(['imeta', ...imetaFields]);
       } else {
         const mimeType = mimeFromExt(ext);
-        const imetaTag = ['imeta', `url ${url}`, `m ${mimeType}`];
-        if (isWebxdc) {
-          const uuid = webxdcUuids.get(url);
-          if (uuid) imetaTag.push(`webxdc ${uuid}`);
-          const meta = webxdcMetas.get(url);
-          if (meta?.name) imetaTag.push(`summary ${meta.name}`);
-          if (meta?.iconUrl) imetaTag.push(`image ${meta.iconUrl}`);
-        }
-        tags.push(imetaTag);
+        tags.push(['imeta', `url ${url}`, `m ${mimeType}`]);
       }
     }
     
@@ -638,7 +656,7 @@ export function ComposeBox({
       tags,
       sig: '',
     };
-  }, [user, content, customEmojis, uploadedFileGroups, webxdcUuids, webxdcMetas]);
+  }, [user, content, customEmojis, uploadedFileGroups]);
 
   const insertEmoji = useCallback((emoji: string) => {
     insertEmojiAtCursor(emoji);
@@ -651,18 +669,12 @@ export function ComposeBox({
 
   const handleFileUpload = useCallback(async (file: File) => {
     try {
-      // .xdc files are ZIP archives; browsers don't know their MIME type so file.type is ''.
-      // Blossom servers may reject uploads with an empty Content-Type, so we re-wrap the file
-      // with the correct MIME type before uploading.
-      const isXdc = file.name.endsWith('.xdc');
       const isImage = file.type.startsWith('image/');
 
       let uploadableFile: File;
       let resizedDim: string | undefined;
 
-      if (isXdc && !file.type) {
-        uploadableFile = new File([file], file.name, { type: 'application/x-webxdc' });
-      } else if (isImage && imageQuality === 'compressed') {
+      if (isImage && imageQuality === 'compressed') {
         // Resize & optimize images before uploading for better performance.
         const resized = await resizeImage(file);
         uploadableFile = resized.file;
@@ -672,19 +684,10 @@ export function ComposeBox({
       }
 
       const tags = await uploadFile(uploadableFile);
-      let [[, url]] = tags;
-
-      // Blossom returns hash-based URLs that may lack the original file extension.
-      // Append the extension so downstream media-URL detection and imeta generation work.
-      if (isXdc && !url.endsWith('.xdc')) {
-        url = url + '.xdc';
-        // Update the url tag in the NIP-94 tags to match
-        const urlTag = tags.find(t => t[0] === 'url');
-        if (urlTag) urlTag[1] = url;
-      }
+      const [[, url]] = tags;
 
       // Compute dim + blurhash and inject into NIP-94 tags
-      if (!isXdc && isImage) {
+      if (isImage) {
         // Use dimensions from resizeImage; compute blurhash from the resized file
         if (resizedDim) tags.push(['dim', resizedDim]);
         const { blurhash } = await getImageMeta(uploadableFile);
@@ -695,39 +698,11 @@ export function ComposeBox({
       setUploadedFileGroups((prev) => new Map(prev).set(url, tags));
       setContent((prev) => (prev ? prev + '\n' + url : url));
 
-      // For .xdc files, generate a UUID and extract manifest metadata
-      if (isXdc) {
-        const uuid = crypto.randomUUID();
-        setWebxdcUuids((prev) => new Map(prev).set(url, uuid));
-
-        // Extract name and icon from the .xdc archive
-        try {
-          const { extractWebxdcMeta } = await import('@/lib/webxdcMeta');
-          const meta = await extractWebxdcMeta(file);
-          const metaEntry: { name?: string; iconUrl?: string } = { name: meta.name };
-
-          // Upload the icon to Blossom if present
-          if (meta.iconFile) {
-            try {
-              const iconTags = await uploadFile(meta.iconFile);
-              const [[, iconUrl]] = iconTags;
-              metaEntry.iconUrl = iconUrl;
-            } catch {
-              // Icon upload failed — continue without it
-            }
-          }
-
-          setWebxdcMetas((prev) => new Map(prev).set(url, metaEntry));
-        } catch {
-          // Metadata extraction failed — continue without it
-        }
-      }
-
       expand();
     } catch {
-      toast({ title: 'Upload failed', description: 'Could not upload file.', variant: 'destructive' });
+      toast({ title: t('compose.submit.uploadFailed'), description: t('compose.submit.uploadFailedBody'), variant: 'destructive' });
     }
-  }, [uploadFile, expand, toast, imageQuality]);
+  }, [uploadFile, expand, toast, imageQuality, t]);
 
   const handlePaste = useCallback(async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
     const items = e.clipboardData?.items;
@@ -753,9 +728,9 @@ export function ComposeBox({
       await voiceRecorder.startRecording();
       expand();
     } catch {
-      toast({ title: 'Microphone access denied', description: 'Please allow microphone access to record voice messages.', variant: 'destructive' });
+      toast({ title: t('compose.voice.micDeniedTitle'), description: t('compose.voice.micDeniedBody'), variant: 'destructive' });
     }
-  }, [voiceRecorder, expand, toast]);
+  }, [voiceRecorder, expand, toast, t]);
 
   /** Stop recording, upload, and publish as kind 1222 or 1244. */
   const handleStopAndPublishVoice = useCallback(async () => {
@@ -868,6 +843,11 @@ export function ComposeBox({
 
       // Reset state
       queryClient.invalidateQueries({ queryKey: ['feed'] });
+      // Voice messages can surface in the home Agora activity feed (via
+      // the `t:Agora` marker on root messages and through the comment
+      // path on replies). Refresh both home feed queries.
+      queryClient.invalidateQueries({ queryKey: ['agora-feed'] });
+      queryClient.invalidateQueries({ queryKey: ['mixed-feed'] });
       if (replyTo) {
         if (isExternalRoot(replyTo)) {
           queryClient.invalidateQueries({ queryKey: ['nostr', 'comments'] });
@@ -876,17 +856,23 @@ export function ComposeBox({
           if (replyTo.kind !== 1) {
             queryClient.invalidateQueries({ queryKey: ['nostr', 'comments'] });
           }
+          // Bump comment count on the parent event so the UI updates.
+          invalidateEventStats(queryClient, replyTo, statsPubkey);
         }
+      } else if (canChooseDestination && selectedCountryCode) {
+        // Root voice message published to a country community feed.
+        queryClient.invalidateQueries({ queryKey: ['agora-feed-paginated', selectedCountryCode] });
+        queryClient.invalidateQueries({ queryKey: ['agora-feed-new-posts', selectedCountryCode] });
       }
       notificationSuccess();
-      toast({ title: 'Voice message sent!', description: 'Your voice message has been published.' });
+      toast({ title: t('compose.voice.sentTitle'), description: t('compose.voice.sentBody') });
       onSuccess?.();
     } catch {
-      toast({ title: 'Error', description: 'Failed to send voice message.', variant: 'destructive' });
+      toast({ title: t('common.error'), description: t('compose.voice.sendFailed'), variant: 'destructive' });
     } finally {
       setIsPublishingVoice(false);
     }
-  }, [user, voiceRecorder, uploadFile, buildContentWarningTags, customPublish, createEvent, onPublished, replyTo, queryClient, toast, onSuccess]);
+  }, [user, voiceRecorder, uploadFile, buildContentWarningTags, customPublish, createEvent, onPublished, replyTo, queryClient, toast, onSuccess, canChooseDestination, selectedCountryCode, statsPubkey, t]);
 
   const handleSubmit = async () => {
     if (!content.trim() || !user || charCount > MAX_CHARS) return;
@@ -991,40 +977,17 @@ export function ComposeBox({
         processedUrls.add(url);
         
         const ext = match[1].toLowerCase();
-        const isWebxdc = ext === 'xdc';
 
         // Build imeta from grouped upload tags if available, otherwise infer
         const fileTags = uploadedFileGroups.get(url);
         
         if (fileTags) {
           const imetaFields = fileTags.map(tag => `${tag[0]} ${tag[1]}`);
-
-          if (isWebxdc) {
-            // Override MIME type for .xdc files and add webxdc UUID + metadata
-            const filtered = imetaFields.filter(f => !f.startsWith('m '));
-            filtered.push('m application/x-webxdc');
-            const uuid = webxdcUuids.get(url);
-            if (uuid) filtered.push(`webxdc ${uuid}`);
-            const meta = webxdcMetas.get(url);
-            if (meta?.name) filtered.push(`summary ${meta.name}`);
-            if (meta?.iconUrl) filtered.push(`image ${meta.iconUrl}`);
-            tags.push(['imeta', ...filtered]);
-          } else {
-            tags.push(['imeta', ...imetaFields]);
-          }
+          tags.push(['imeta', ...imetaFields]);
         } else {
           // Fallback: basic imeta tag with URL and inferred mime type
           const mimeType = mimeFromExt(ext);
-          
-          const imetaTag = ['imeta', `url ${url}`, `m ${mimeType}`];
-          if (isWebxdc) {
-            const uuid = webxdcUuids.get(url);
-            if (uuid) imetaTag.push(`webxdc ${uuid}`);
-            const meta = webxdcMetas.get(url);
-            if (meta?.name) imetaTag.push(`summary ${meta.name}`);
-            if (meta?.iconUrl) imetaTag.push(`image ${meta.iconUrl}`);
-          }
-          tags.push(imetaTag);
+          tags.push(['imeta', `url ${url}`, `m ${mimeType}`]);
         }
       }
 
@@ -1114,22 +1077,49 @@ export function ComposeBox({
         const countryRoot = new URL(createCountryIdentifier(selectedCountryCode));
         await postComment({ root: countryRoot, reply: undefined, content: finalContent, tags });
       } else {
+        // Top-level kind 1 note. If the caller hasn't supplied `defaultTags`,
+        // auto-attach the silent Agora tag so the post surfaces in the Agora
+        // activity feed. Callers can opt out by passing `defaultTags={[]}`.
+        const effectiveDefaultTags = defaultTags ?? AGORA_DEFAULT_NOTE_TAGS;
         await createEvent({
           kind: 1,
           content: finalContent,
-          tags: [...defaultTags, ...tags],
+          tags: [...effectiveDefaultTags, ...tags],
           created_at: Math.floor(Date.now() / 1000),
         });
       }
 
       resetComposeState();
-      // Optimistically bump the reply count on the parent event
+      // Optimistically bump the comment count on the parent event
       if (replyTo && !isExternalRoot(replyTo)) {
-        queryClient.setQueryData<EventStats>(['event-stats', replyTo.id], (prev) =>
-          prev ? { ...prev, replies: prev.replies + 1 } : prev,
+        queryClient.setQueryData<Nip85EventStats | null>(
+          ['nip85-event-stats', replyTo.id, statsPubkey],
+          (prev) => prev ? { ...prev, commentCount: prev.commentCount + 1 } : prev,
         );
       }
       queryClient.invalidateQueries({ queryKey: ['feed'] });
+      // Top-level kind 1 posts with the silent Agora tag (the default for
+      // user-authored notes) surface in the home Agora activity feed
+      // (useAgoraFeed / mixed-feed). Invalidate both so the post appears
+      // there without a refresh — over-invalidation is cheap here.
+      queryClient.invalidateQueries({ queryKey: ['agora-feed'] });
+      queryClient.invalidateQueries({ queryKey: ['mixed-feed'] });
+      // Top-level kind 1 posts surface on country pages too. Country posts
+      // route through `usePostComment` (which handles its own invalidation),
+      // but the top-level branch above publishes via `createEvent`, so we
+      // need to invalidate the country feed keys here. `selectedCountryCode`
+      // is null for global posts, in which case nothing extra needs to
+      // refresh (the global Agora feed is served by relays, not a per-country
+      // query). For drafts attached to a specific country via customPublish
+      // we conservatively invalidate the broader prefix.
+      if (canChooseDestination && selectedCountryCode && !replyTo) {
+        queryClient.invalidateQueries({ queryKey: ['agora-feed-paginated', selectedCountryCode] });
+        queryClient.invalidateQueries({ queryKey: ['agora-feed-new-posts', selectedCountryCode] });
+        setTimeout(() => {
+          queryClient.invalidateQueries({ queryKey: ['agora-feed-paginated', selectedCountryCode] });
+          queryClient.invalidateQueries({ queryKey: ['agora-feed-new-posts', selectedCountryCode] });
+        }, 3000);
+      }
       if (replyTo) {
         if (isExternalRoot(replyTo)) {
           queryClient.invalidateQueries({ queryKey: ['nostr', 'comments'] });
@@ -1144,19 +1134,19 @@ export function ComposeBox({
         }
       }
       if (quotedEvent) {
-        queryClient.invalidateQueries({ queryKey: ['event-stats', quotedEvent.id] });
+        invalidateEventStats(queryClient, quotedEvent, statsPubkey);
         queryClient.invalidateQueries({ queryKey: ['event-interactions', quotedEvent.id] });
       }
       notificationSuccess();
       if (!customPublish?.suppressSuccessToast) {
         toast({
-          title: customPublish?.successTitle ?? 'Posted!',
-          description: customPublish?.successDescription ?? (replyTo ? 'Your reply has been published.' : quotedEvent ? 'Your quote has been published.' : 'Your note has been published.'),
+          title: customPublish?.successTitle ?? t('compose.submit.posted'),
+          description: customPublish?.successDescription ?? (replyTo ? t('compose.submit.replyPublished') : quotedEvent ? t('compose.submit.quotePublished') : t('compose.submit.notePublished')),
         });
       }
       onSuccess?.();
     } catch {
-      toast({ title: 'Error', description: 'Failed to publish note.', variant: 'destructive' });
+      toast({ title: t('common.error'), description: t('compose.submit.publishFailed'), variant: 'destructive' });
     }
   };
 
@@ -1206,11 +1196,24 @@ export function ComposeBox({
       await createEvent({ kind: 1068, content: finalContent, tags });
       resetComposeState();
       queryClient.invalidateQueries({ queryKey: ['feed'] });
+      // World-layer polls (iso3166 root) and Agora-marked polls surface
+      // in the home Agora activity feed.
+      queryClient.invalidateQueries({ queryKey: ['agora-feed'] });
+      queryClient.invalidateQueries({ queryKey: ['mixed-feed'] });
+      // Polls published with an iso3166 root surface on the country feed.
+      if (replyTo instanceof URL && replyTo.protocol === 'iso3166:') {
+        const countryCode = replyTo.pathname.toUpperCase();
+        queryClient.invalidateQueries({ queryKey: ['agora-feed-paginated', countryCode] });
+        queryClient.invalidateQueries({ queryKey: ['agora-feed-new-posts', countryCode] });
+      } else if (canChooseDestination && selectedCountryCode) {
+        queryClient.invalidateQueries({ queryKey: ['agora-feed-paginated', selectedCountryCode] });
+        queryClient.invalidateQueries({ queryKey: ['agora-feed-new-posts', selectedCountryCode] });
+      }
       notificationSuccess();
-      toast({ title: 'Poll published!' });
+      toast({ title: t('compose.poll.published') });
       onSuccess?.();
     } catch {
-      toast({ title: 'Error', description: 'Failed to publish poll.', variant: 'destructive' });
+      toast({ title: t('common.error'), description: t('compose.poll.publishFailed'), variant: 'destructive' });
     }
   };
 
@@ -1243,7 +1246,7 @@ export function ComposeBox({
                   : "text-muted-foreground hover:text-foreground"
               )}
             >
-              Edit
+              {t('compose.preview.edit')}
             </button>
             <button
               onClick={() => setInternalPreviewMode(true)}
@@ -1254,7 +1257,7 @@ export function ComposeBox({
                   : "text-muted-foreground hover:text-foreground"
               )}
             >
-              Preview
+              {t('compose.preview.previewMode')}
             </button>
           </div>
         </div>
@@ -1292,10 +1295,10 @@ export function ComposeBox({
               onPaste={handlePaste}
               placeholder={
                 mode === 'poll'
-                  ? 'Ask a question…'
+                  ? t('compose.placeholderPoll')
                   : selectedCountryInfo
-                    ? `What's happening in ${selectedCountryInfo.name}?`
-                    : placeholder
+                    ? t('compose.placeholderCountry', { country: selectedCountryInfo.name })
+                    : effectivePlaceholder
               }
               className={cn(
                 'w-full bg-transparent text-foreground placeholder:text-muted-foreground resize-none outline-none text-lg pt-2.5 pb-2 opacity-85 break-words overflow-hidden transition-[min-height] duration-200 ease-in-out',
@@ -1345,8 +1348,8 @@ export function ComposeBox({
                 onClick={() => setMode('post')}
                 className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
               >
-                <ChevronLeft className="size-3.5" />
-                Back to post
+                <ChevronLeft className="size-3.5 rtl:rotate-180" />
+                {t('compose.poll.backToPost')}
               </button>
             )}
 
@@ -1362,7 +1365,7 @@ export function ComposeBox({
                         prev.map((o) => (o.id === opt.id ? { ...o, label: e.target.value } : o)),
                       )
                     }
-                    placeholder={`Option ${idx + 1}`}
+                    placeholder={t('compose.poll.optionLabel', { number: idx + 1 })}
                     maxLength={100}
                     className="flex-1 bg-secondary/40 rounded-lg px-3 py-1.5 text-sm outline-none focus:ring-1 focus:ring-primary/40 placeholder:text-muted-foreground"
                   />
@@ -1390,26 +1393,26 @@ export function ComposeBox({
                   className="flex items-center gap-1.5 text-xs text-primary hover:text-primary/80 transition-colors pt-0.5"
                 >
                   <Plus className="size-3" />
-                  Add option
+                  {t('compose.poll.addOption')}
                 </button>
               )}
             </div>
 
             {/* Settings row — pill toggles */}
             <div className="flex flex-wrap gap-2 pt-0.5">
-              {(['singlechoice', 'multiplechoice'] as const).map((t) => (
+              {(['singlechoice', 'multiplechoice'] as const).map((pt) => (
                 <button
-                  key={t}
+                  key={pt}
                   type="button"
-                  onClick={() => setPollType(t)}
+                  onClick={() => setPollType(pt)}
                   className={cn(
                     'text-xs px-2.5 py-1 rounded-full border transition-colors',
-                    pollType === t
+                    pollType === pt
                       ? 'border-primary bg-primary/10 text-primary font-medium'
                       : 'border-border text-muted-foreground hover:text-foreground hover:border-foreground/30',
                   )}
                 >
-                  {t === 'singlechoice' ? 'Single choice' : 'Multiple choice'}
+                  {pt === 'singlechoice' ? t('compose.poll.singleChoice') : t('compose.poll.multipleChoice')}
                 </button>
               ))}
               <div className="w-px bg-border self-stretch mx-0.5" />
@@ -1439,7 +1442,7 @@ export function ComposeBox({
             <Input
               value={cwText}
               onChange={(e) => setCwText(e.target.value)}
-              placeholder="Content warning reason (optional)"
+              placeholder={t('compose.placeholderCwReason')}
               className="h-8 text-base md:text-sm bg-secondary/50 border-0 rounded-lg"
             />
             <button
@@ -1480,13 +1483,13 @@ export function ComposeBox({
         {canChooseDestination && isExpanded && (
           <div className="mt-2 flex items-center justify-end gap-2">
             <span className="text-xs font-medium text-muted-foreground">
-              Post to
+              {t('compose.destination.label')}
             </span>
             <Popover>
               <PopoverTrigger asChild>
                 <button
                   type="button"
-                  aria-label="What's the difference between global and community posts?"
+                  aria-label={t('compose.destination.ariaHelp')}
                   className={cn(
                     'inline-flex items-center justify-center size-5 rounded-full shrink-0',
                     'text-muted-foreground/70 hover:text-foreground hover:bg-muted/60',
@@ -1515,9 +1518,9 @@ export function ComposeBox({
                       <div className="flex gap-3">
                         <span className="text-2xl leading-none shrink-0" aria-hidden="true">🌍</span>
                         <div className="flex-1 min-w-0">
-                          <p className="text-sm font-semibold">Global</p>
+                          <p className="text-sm font-semibold">{t('compose.destination.global')}</p>
                           <p className="text-xs text-muted-foreground mt-0.5">
-                            A regular post visible to everyone on Nostr. Anyone, anywhere can see it.
+                            {t('compose.destination.globalExplainer')}
                           </p>
                         </div>
                       </div>
@@ -1526,9 +1529,9 @@ export function ComposeBox({
                           {exampleFlag ?? '🌐'}
                         </span>
                         <div className="flex-1 min-w-0">
-                          <p className="text-sm font-semibold">Your country community</p>
+                          <p className="text-sm font-semibold">{t('compose.destination.community')}</p>
                           <p className="text-xs text-muted-foreground mt-0.5">
-                            Shown in that country's local feed alongside posts from neighbors. Best for community-relevant updates.
+                            {t('compose.destination.communityExplainer')}
                           </p>
                         </div>
                       </div>
@@ -1537,44 +1540,176 @@ export function ComposeBox({
                 })()}
               </PopoverContent>
             </Popover>
-            <Select value={destination} onValueChange={setDestination}>
-              <SelectTrigger
-                aria-label="Post destination"
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                aria-label={t('compose.destination.ariaTrigger')}
                 className={cn(
-                  'h-8 w-auto gap-1.5 px-2.5 py-1 text-base leading-none',
-                  'border-0 bg-muted/50 hover:bg-muted shadow-none',
-                  'focus:ring-2 focus:ring-primary/50 focus:ring-offset-0',
-                  'rounded-lg',
+                  'inline-flex items-center justify-center h-8 w-auto gap-1.5 px-2.5 py-1 text-base leading-none',
+                  'bg-muted/50 hover:bg-muted shadow-none',
+                  'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-0',
+                  'rounded-lg motion-safe:transition-colors',
                 )}
               >
                 {/* Show just the flag in the trigger to keep the row
                     compact on mobile. The list items below carry the
                     country name so users can still tell them apart. */}
-                <span aria-hidden="true">
-                  {selectedCountryInfo?.flag ?? '🌍'}
-                </span>
-              </SelectTrigger>
-              <SelectContent align="end" className="min-w-[180px]">
-                <SelectItem value="world">
-                  <span className="inline-flex items-center gap-2">
+                {selectedCountryCode && selectedCountryInfo ? (
+                  <CountryFlag
+                    code={selectedCountryCode}
+                    emoji={selectedCountryInfo.flag}
+                    label={`Flag of ${selectedCountryInfo.subdivisionName ?? selectedCountryInfo.name}`}
+                  />
+                ) : (
+                  <span aria-hidden="true">🌍</span>
+                )}
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="min-w-[240px]">
+                <DropdownMenuItem
+                  onSelect={() => setDestination('world')}
+                  className="cursor-pointer"
+                >
+                  <span className="inline-flex items-center gap-2 flex-1">
                     <span aria-hidden="true">🌍</span>
-                    <span>Global</span>
+                    <span>{t('compose.destination.global')}</span>
                   </span>
-                </SelectItem>
-                {followedCountries.map((code) => {
-                  const info = getCountryInfo(code);
-                  if (!info) return null;
-                  return (
-                    <SelectItem key={code} value={code}>
-                      <span className="inline-flex items-center gap-2">
-                        <span aria-hidden="true">{info.flag}</span>
-                        <span>{info.name}</span>
-                      </span>
-                    </SelectItem>
-                  );
-                })}
-              </SelectContent>
-            </Select>
+                  {destination === 'world' && (
+                    <Check className="size-4 text-primary" aria-hidden />
+                  )}
+                </DropdownMenuItem>
+                {/* Build the quick-pick list. Followed countries appear first;
+                    if the user has selected an ad-hoc country via the
+                    searchable picker that they don't follow, show it too so
+                    they have a one-tap way back to it. De-duplicates by code. */}
+                {(() => {
+                  const codes = new Set<string>();
+                  const quickPicks: string[] = [];
+                  for (const code of followedCountries) {
+                    if (!codes.has(code) && getCountryInfo(code)) {
+                      codes.add(code);
+                      quickPicks.push(code);
+                    }
+                  }
+                  if (selectedCountryCode && !codes.has(selectedCountryCode) && getCountryInfo(selectedCountryCode)) {
+                    quickPicks.push(selectedCountryCode);
+                  }
+                  return quickPicks.map((code) => {
+                    const info = getCountryInfo(code);
+                    if (!info) return null;
+                    return (
+                      <DropdownMenuItem
+                        key={code}
+                        onSelect={() => setDestination(code)}
+                        className="cursor-pointer"
+                      >
+                        <span className="inline-flex items-center gap-2 flex-1">
+                          <CountryFlag
+                            code={code}
+                            emoji={info.flag}
+                            label={`Flag of ${info.subdivisionName ?? info.name}`}
+                          />
+                          <span>{info.subdivisionName ?? info.name}</span>
+                        </span>
+                        {destination === code && (
+                          <Check className="size-4 text-primary" aria-hidden />
+                        )}
+                      </DropdownMenuItem>
+                    );
+                  });
+                })()}
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onSelect={(e) => {
+                    e.preventDefault();
+                    setCountryPickerOpen(true);
+                  }}
+                  className="cursor-pointer text-sm"
+                >
+                  <Globe className="size-4 mr-2 text-muted-foreground" aria-hidden />
+                  {t('compose.destination.chooseAnother')}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                {destination === defaultPostCountry ? (
+                  <div className="px-2 py-1.5 text-xs text-muted-foreground">
+                    {(() => {
+                      if (defaultPostCountry === 'world') return t('compose.destination.globalIsDefault');
+                      const info = getCountryInfo(defaultPostCountry);
+                      return info ? t('compose.destination.isDefault', { name: info.name }) : t('compose.destination.thisIsDefault');
+                    })()}
+                  </div>
+                ) : (
+                  <DropdownMenuItem
+                    onSelect={() => {
+                      setDefaultPostCountry(destination);
+                      const info = destination === 'world'
+                        ? null
+                        : getCountryInfo(destination);
+                      toast({
+                        title: t('compose.destination.defaultUpdated'),
+                        description: info
+                          ? t('compose.destination.defaultUpdatedCountry', { name: info.name })
+                          : t('compose.destination.defaultUpdatedGlobal'),
+                      });
+                    }}
+                    className="cursor-pointer text-sm"
+                  >
+                    {t('compose.destination.setAsDefault')}
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            {/* Searchable picker over the full country list. Opened from the
+                "Choose another country…" item in the destination dropdown,
+                so users can post to any country without having to follow it
+                first. */}
+            <CommandDialog
+              open={countryPickerOpen}
+              onOpenChange={setCountryPickerOpen}
+            >
+              <CommandInput placeholder={t('compose.destination.searchPlaceholder')} />
+              <CommandList>
+                <CommandEmpty>{t('compose.destination.noResults')}</CommandEmpty>
+                <CommandGroup>
+                  <CommandItem
+                    value={`${t('compose.destination.global')} 🌍`}
+                    onSelect={() => {
+                      setDestination('world');
+                      setCountryPickerOpen(false);
+                    }}
+                  >
+                    <span aria-hidden="true" className="mr-2">🌍</span>
+                    <span>{t('compose.destination.global')}</span>
+                    {destination === 'world' && (
+                      <Check className="ml-auto size-4 text-primary" aria-hidden />
+                    )}
+                  </CommandItem>
+                  {COUNTRY_LIST.map((country) => (
+                    <CommandItem
+                      key={country.code}
+                      // Include code + name in the searchable value so users
+                      // can type either "iran" or "IR".
+                      value={`${country.name} ${country.code}`}
+                      onSelect={() => {
+                        setDestination(country.code);
+                        setCountryPickerOpen(false);
+                      }}
+                    >
+                      <CountryFlag
+                        code={country.code}
+                        emoji={country.flag}
+                        label={`Flag of ${country.name}`}
+                        className="mr-2"
+                      />
+                      <span>{country.name}</span>
+                      <span className="ml-2 text-xs text-muted-foreground">{country.code}</span>
+                      {destination === country.code && (
+                        <Check className="ml-auto size-4 text-primary" aria-hidden />
+                      )}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </CommandDialog>
           </div>
         )}
 
@@ -1617,7 +1752,7 @@ export function ComposeBox({
                     <X className="size-[18px]" />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>Cancel</TooltipContent>
+                <TooltipContent>{t('compose.voice.cancel')}</TooltipContent>
               </Tooltip>
 
               {/* Stop & send button */}
@@ -1632,7 +1767,7 @@ export function ComposeBox({
                 ) : (
                   <Square className="size-3.5 mr-1.5" fill="currentColor" />
                 )}
-                {isPublishingVoice ? 'Sending...' : 'Send'}
+                {isPublishingVoice ? t('compose.voice.sending') : t('compose.voice.send')}
               </Button>
             </div>
           ) : (
@@ -1652,13 +1787,13 @@ export function ComposeBox({
                       {isUploading ? <Loader2 className="size-[18px] animate-spin" /> : <Paperclip className="size-[18px]" />}
                     </button>
                   </TooltipTrigger>
-                  <TooltipContent>Attach file</TooltipContent>
+                  <TooltipContent>{t('compose.toolbar.attachFile')}</TooltipContent>
                 </Tooltip>
 
                 <input
                   ref={fileInputRef}
                   type="file"
-                  accept="image/*,video/*,audio/*,.xdc"
+                  accept="image/*,video/*,audio/*"
                   multiple
                   className="hidden"
                   onChange={(e) => {
@@ -1683,7 +1818,7 @@ export function ComposeBox({
                         <Mic className="size-[18px]" />
                       </button>
                     </TooltipTrigger>
-                    <TooltipContent>Voice message</TooltipContent>
+                    <TooltipContent>{t('compose.voice.voiceMessage')}</TooltipContent>
                   </Tooltip>
                 )}
 
@@ -1703,7 +1838,7 @@ export function ComposeBox({
                        <Smile className="size-[18px]" />
                      </button>
                    </TooltipTrigger>
-                   {!pickerOpen && <TooltipContent>Emoji / GIF</TooltipContent>}
+                   {!pickerOpen && <TooltipContent>{t('compose.toolbar.emojiGif')}</TooltipContent>}
                  </Tooltip>
 
                 {/* Overflow: Poll + CW */}
@@ -1725,7 +1860,7 @@ export function ComposeBox({
                         </button>
                       </PopoverTrigger>
                     </TooltipTrigger>
-                    {!trayOpen && <TooltipContent>More</TooltipContent>}
+                    {!trayOpen && <TooltipContent>{t('compose.toolbar.more')}</TooltipContent>}
                   </Tooltip>
                   <PopoverContent side="top" align="start" sideOffset={6} className="w-44 p-1.5 rounded-xl border-border shadow-lg">
                     <div className="flex flex-col gap-0.5">
@@ -1738,7 +1873,7 @@ export function ComposeBox({
                           onClick={() => { setMode((m) => m === 'poll' ? 'post' : 'poll'); setTrayOpen(false); expand(); }}
                           className={cn('flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-sm transition-colors', mode === 'poll' ? 'text-primary bg-primary/10' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/60')}
                         >
-                          <BarChart3 className="size-4" /><span className="font-medium">Poll</span>
+                          <BarChart3 className="size-4" /><span className="font-medium">{t('compose.toolbar.poll')}</span>
                         </button>
                       )}
                       <button
@@ -1746,7 +1881,7 @@ export function ComposeBox({
                         onClick={() => { setCwEnabled((v) => !v); setTrayOpen(false); expand(); }}
                         className={cn('flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-sm transition-colors', cwEnabled ? 'text-amber-500 bg-amber-500/10' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/60')}
                       >
-                        <AlertTriangle className="size-4" /><span className="font-medium">Spoiler</span>
+                        <AlertTriangle className="size-4" /><span className="font-medium">{t('compose.toolbar.spoiler')}</span>
                       </button>
                     </div>
                   </PopoverContent>
@@ -1775,19 +1910,19 @@ export function ComposeBox({
                   <Button
                     onClick={handlePollSubmit}
                     disabled={!isPollValid || isPollPending || !user}
-                    className="rounded-full px-5 font-bold"
+                    className="rounded-full px-5 font-bold text-white"
                     size="sm"
                   >
-                    {isPollPending ? 'Publishing...' : 'Publish poll'}
+                    {isPollPending ? t('compose.poll.publishing') : t('compose.poll.publish')}
                   </Button>
                 ) : (
                   <Button
                     onClick={handleSubmit}
                     disabled={!content.trim() || isPending || isCommentPending || !user || charCount > MAX_CHARS}
-                    className="rounded-full px-5 font-bold"
+                    className="rounded-full px-5 font-bold text-white"
                     size="sm"
                   >
-                    {isPending || isCommentPending ? 'Posting...' : submitLabel}
+                    {isPending || isCommentPending ? t('compose.submit.posting') : effectiveSubmitLabel}
                   </Button>
                 )}
               </div>
@@ -1812,7 +1947,7 @@ export function ComposeBox({
                 )}
               >
                 <Smile className="size-3.5" />
-                Emoji
+                {t('compose.toolbar.emoji')}
               </button>
               <button
                 type="button"
@@ -1842,7 +1977,7 @@ export function ComposeBox({
                   )}
                 >
                   <Sticker className="size-3.5" />
-                  Stickers
+                  {t('compose.toolbar.stickers')}
                 </button>
               )}
             </div>

src/components/ConstellationContent.tsx

@@ -1,121 +0,0 @@
-import { lazy, Suspense, useMemo } from 'react';
-import { ExternalLink, Sparkles } from 'lucide-react';
-import { nip19 } from 'nostr-tools';
-import type { NostrEvent } from '@nostrify/nostrify';
-
-import { Skeleton } from '@/components/ui/skeleton';
-import { openUrl } from '@/lib/downloadFile';
-import { cn } from '@/lib/utils';
-
-/**
- * Birdstar kind 30621 — Custom Constellation.
- *
- * An addressable event carrying a user-drawn star-figure: a title, a
- * freeform description in `content`, and one or more `edge` tags referencing
- * pairs of Hipparcos catalog numbers (e.g. `["edge", "32349", "37279"]`).
- *
- * Rendering the figure requires the full Hipparcos star catalog (~1.3 MB),
- * so the preview component is code-split via `lazy()` — the catalog data
- * only loads when a user actually scrolls a constellation event into view.
- */
-
-const ConstellationStarMap = lazy(() =>
-  import('./ConstellationStarMap').then((m) => ({ default: m.ConstellationStarMap })),
-);
-
-interface ConstellationContentProps {
-  event: NostrEvent;
-  className?: string;
-}
-
-interface ParsedConstellation {
-  title: string;
-  description: string;
-  edges: Array<readonly [number, number]>;
-}
-
-function parseConstellation(event: NostrEvent): ParsedConstellation {
-  const title = event.tags.find(([n]) => n === 'title')?.[1]
-    ?? event.tags.find(([n]) => n === 'd')?.[1]
-    ?? 'Untitled constellation';
-
-  const edges: Array<readonly [number, number]> = [];
-  for (const tag of event.tags) {
-    if (tag[0] !== 'edge' || tag.length < 3) continue;
-    const from = Number(tag[1]);
-    const to = Number(tag[2]);
-    // Reject non-positive-integer HIP numbers per the NIP's validation rules.
-    if (!Number.isInteger(from) || from <= 0) continue;
-    if (!Number.isInteger(to) || to <= 0) continue;
-    edges.push([from, to] as const);
-  }
-
-  return {
-    title,
-    description: event.content.trim(),
-    edges,
-  };
-}
-
-export function ConstellationContent({ event, className }: ConstellationContentProps) {
-  const { title, description, edges } = useMemo(() => parseConstellation(event), [event]);
-
-  // Birdstar routes constellations at `/:nip19` using the event's naddr1
-  // coordinate (kind 30621 is addressable). Build the link once so we can
-  // drop it into a "View on Birdstar" action below the map.
-  const birdstarUrl = useMemo(() => {
-    const dTag = event.tags.find(([n]) => n === 'd')?.[1];
-    if (!dTag) return undefined;
-    try {
-      const naddr = nip19.naddrEncode({
-        kind: event.kind,
-        pubkey: event.pubkey,
-        identifier: dTag,
-      });
-      return `https://birdstar.app/${naddr}`;
-    } catch {
-      return undefined;
-    }
-  }, [event]);
-
-  return (
-    <div className={cn('mt-2', className)}>
-      <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-shadow hover:shadow-md">
-        {/* Star map */}
-        <div className="aspect-[4/3] w-full">
-          <Suspense fallback={<Skeleton className="size-full" />}>
-            <ConstellationStarMap edges={edges} title={title} />
-          </Suspense>
-        </div>
-
-        {/* Title + description */}
-        <div className="space-y-1.5 p-3.5">
-          <div className="flex items-center gap-2">
-            <Sparkles aria-hidden className="size-3.5 shrink-0 text-amber-500" />
-            <h3 className="truncate text-[15px] font-semibold leading-tight">
-              {title}
-            </h3>
-            {birdstarUrl && (
-              <button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  openUrl(birdstarUrl);
-                }}
-                className="ml-auto inline-flex shrink-0 items-center gap-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground"
-              >
-                View on Birdstar
-                <ExternalLink aria-hidden className="size-3" />
-              </button>
-            )}
-          </div>
-          {description && (
-            <p className="whitespace-pre-wrap break-words text-[13px] leading-relaxed text-muted-foreground">
-              {description}
-            </p>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/ConstellationStarMap.tsx

@@ -1,322 +0,0 @@
-import { useId, useMemo } from 'react';
-
-import { cn } from '@/lib/utils';
-import { starByHip } from '@/lib/starCatalog';
-
-/**
- * Renders a custom constellation as an SVG star-map.
- *
- * This component is code-split via `lazy()` from `ConstellationContent`:
- * the Hipparcos star catalog it imports is ~1.3 MB of JSON and must never
- * ship in the main bundle.
- *
- * The figure is gnomonically projected onto a tangent plane centered on the
- * centroid of its stars (on the unit sphere) and then normalized to fit the
- * SVG viewBox with equal aspect, so shapes are never distorted. Stars are
- * sized by apparent magnitude, with the brightest few getting a soft glow
- * to evoke a real sky.
- *
- * Adapted from the `ConstellationPreview` component in the Birdstar
- * reference client.
- */
-
-export interface ConstellationStarMapProps {
-  edges: ReadonlyArray<readonly [number, number]>;
-  title?: string;
-  className?: string;
-}
-
-const DEG = Math.PI / 180;
-const HOUR = (15 * Math.PI) / 180; // 1h = 15°
-
-interface ResolvedStar {
-  hip: number;
-  ra: number; // hours
-  dec: number; // degrees
-  mag: number;
-}
-
-interface ProjectedPoint {
-  hip: number;
-  x: number;
-  y: number;
-  r: number;
-}
-
-interface ProjectedEdge {
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-}
-
-interface BackgroundStar {
-  x: number;
-  y: number;
-  r: number;
-  o: number;
-}
-
-interface ProjectionResult {
-  points: Map<number, ProjectedPoint>;
-  edges: ProjectedEdge[];
-  backgroundStars: BackgroundStar[];
-}
-
-export function ConstellationStarMap({ edges, title, className }: ConstellationStarMapProps) {
-  // A stable unique id keeps multiple previews on the page from colliding on
-  // the shared <filter> id.
-  const rawId = useId();
-  const uid = rawId.replace(/:/g, '');
-  const glowId = `cm-glow-${uid}`;
-
-  const projected = useMemo(() => project(edges), [edges]);
-
-  if (!projected || projected.points.size === 0) {
-    return (
-      <div
-        className={cn(
-          'flex size-full items-center justify-center rounded-xl ring-1 ring-border bg-[radial-gradient(ellipse_at_50%_40%,#1e1b4b_0%,#0b1026_55%,#020617_100%)] text-xs text-white/60',
-          className,
-        )}
-        role="img"
-        aria-label={title ?? 'Constellation preview'}
-      >
-        No recognizable stars.
-      </div>
-    );
-  }
-
-  const { points, edges: projEdges, backgroundStars } = projected;
-
-  return (
-    <div
-      className={cn(
-        'relative h-full w-full overflow-hidden rounded-xl ring-1 ring-border',
-        'bg-[radial-gradient(ellipse_at_50%_40%,#1e1b4b_0%,#0b1026_55%,#020617_100%)]',
-        className,
-      )}
-      role="img"
-      aria-label={title ?? 'Constellation preview'}
-    >
-      {/* Background field stars — cover the whole container regardless of
-          aspect ratio, so corners never look bare. */}
-      <svg
-        viewBox="0 0 100 100"
-        preserveAspectRatio="xMidYMid slice"
-        className="absolute inset-0 size-full"
-        aria-hidden
-      >
-        <g fill="rgba(255, 255, 255, 0.5)">
-          {backgroundStars.map((s, i) => (
-            <circle key={i} cx={s.x} cy={s.y} r={s.r} opacity={s.o} />
-          ))}
-        </g>
-      </svg>
-
-      {/* Figure — preserves aspect so stick-figures never distort. */}
-      <svg
-        viewBox="0 0 100 100"
-        preserveAspectRatio="xMidYMid meet"
-        className="absolute inset-0 size-full"
-      >
-        <defs>
-          <filter
-            id={glowId}
-            x="-100%"
-            y="-100%"
-            width="300%"
-            height="300%"
-            colorInterpolationFilters="sRGB"
-          >
-            <feGaussianBlur stdDeviation="1.1" result="blur" />
-            <feMerge>
-              <feMergeNode in="blur" />
-              <feMergeNode in="SourceGraphic" />
-            </feMerge>
-          </filter>
-        </defs>
-
-        {/* Edges */}
-        <g
-          stroke="rgba(253, 230, 138, 0.8)"
-          strokeWidth={0.9}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          fill="none"
-          pointerEvents="none"
-        >
-          {projEdges.map((e, i) => (
-            <line key={i} x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2} />
-          ))}
-        </g>
-
-        {/* Figure stars with soft glow */}
-        <g fill="rgb(254, 243, 199)" filter={`url(#${glowId})`}>
-          {Array.from(points.values()).map((p) => (
-            <circle key={p.hip} cx={p.x} cy={p.y} r={p.r} pointerEvents="none" />
-          ))}
-        </g>
-      </svg>
-    </div>
-  );
-}
-
-function project(edges: ReadonlyArray<readonly [number, number]>): ProjectionResult | null {
-  // Collect unique stars referenced by the figure. Unknown HIP numbers are
-  // silently dropped per the NIP's validation rules.
-  const stars = new Map<number, ResolvedStar>();
-  for (const [a, b] of edges) {
-    if (!stars.has(a)) {
-      const s = starByHip(a);
-      if (s) stars.set(a, { hip: s.hip, ra: s.ra, dec: s.dec, mag: s.mag });
-    }
-    if (!stars.has(b)) {
-      const s = starByHip(b);
-      if (s) stars.set(b, { hip: s.hip, ra: s.ra, dec: s.dec, mag: s.mag });
-    }
-  }
-  if (stars.size === 0) return null;
-
-  // Mean unit-vector as the projection tangent point — handles wrap-around
-  // at RA=0h/24h and the poles without special-casing.
-  let mx = 0;
-  let my = 0;
-  let mz = 0;
-  for (const s of stars.values()) {
-    const raRad = s.ra * HOUR;
-    const decRad = s.dec * DEG;
-    const cosDec = Math.cos(decRad);
-    mx += cosDec * Math.cos(raRad);
-    my += cosDec * Math.sin(raRad);
-    mz += Math.sin(decRad);
-  }
-  const norm = Math.hypot(mx, my, mz) || 1;
-  mx /= norm;
-  my /= norm;
-  mz /= norm;
-
-  const centerDec = Math.asin(Math.max(-1, Math.min(1, mz)));
-  const centerRa = Math.atan2(my, mx);
-  const sinC = Math.sin(centerDec);
-  const cosC = Math.cos(centerDec);
-
-  // Gnomonic projection onto a tangent plane at (centerRa, centerDec).
-  const raw = new Map<number, { x: number; y: number; mag: number }>();
-  for (const s of stars.values()) {
-    const ra = s.ra * HOUR;
-    const dec = s.dec * DEG;
-    const cosDec = Math.cos(dec);
-    const sinDec = Math.sin(dec);
-    const dRa = ra - centerRa;
-    const cosDRa = Math.cos(dRa);
-    const sinDRa = Math.sin(dRa);
-    const cosDistance = sinC * sinDec + cosC * cosDec * cosDRa;
-    if (cosDistance <= 1e-6) continue;
-    const x = (cosDec * sinDRa) / cosDistance;
-    const y = (cosC * sinDec - sinC * cosDec * cosDRa) / cosDistance;
-    // Flip x so RA increases to the left (conventional sky orientation).
-    raw.set(s.hip, { x: -x, y, mag: s.mag });
-  }
-  if (raw.size === 0) return null;
-
-  // Bounding box.
-  let minX = Infinity;
-  let maxX = -Infinity;
-  let minY = Infinity;
-  let maxY = -Infinity;
-  for (const p of raw.values()) {
-    if (p.x < minX) minX = p.x;
-    if (p.x > maxX) maxX = p.x;
-    if (p.y < minY) minY = p.y;
-    if (p.y > maxY) maxY = p.y;
-  }
-
-  const PADDING = 14;
-  const AVAILABLE = 100 - PADDING * 2;
-  const spanX = maxX - minX;
-  const spanY = maxY - minY;
-  const span = Math.max(spanX, spanY);
-  const scale = span > 1e-9 ? AVAILABLE / span : 0;
-  const offsetX = (AVAILABLE - spanX * scale) / 2 + PADDING;
-  const offsetY = (AVAILABLE - spanY * scale) / 2 + PADDING;
-
-  const points = new Map<number, ProjectedPoint>();
-  for (const [hip, p] of raw) {
-    const x = (p.x - minX) * scale + offsetX;
-    // Invert SVG y so north-ish stars sit on top.
-    const y = 100 - ((p.y - minY) * scale + offsetY);
-    points.set(hip, { hip, x, y, r: magToRadius(p.mag) });
-  }
-
-  const projEdges: ProjectedEdge[] = [];
-  for (const [a, b] of edges) {
-    const pa = points.get(a);
-    const pb = points.get(b);
-    if (!pa || !pb) continue;
-    projEdges.push({ x1: pa.x, y1: pa.y, x2: pb.x, y2: pb.y });
-  }
-
-  // Deterministic scatter of faint background stars seeded from the edge
-  // list, so the same figure always renders identically.
-  const backgroundStars = makeBackgroundStars(edges, points);
-
-  return { points, edges: projEdges, backgroundStars };
-}
-
-function makeBackgroundStars(
-  edges: ReadonlyArray<readonly [number, number]>,
-  figure: Map<number, ProjectedPoint>,
-): BackgroundStar[] {
-  let seed = 2166136261;
-  for (const [a, b] of edges) {
-    seed ^= a * 16777619;
-    seed = Math.imul(seed, 16777619);
-    seed ^= b * 2246822519;
-    seed = Math.imul(seed, 16777619);
-  }
-  const rand = mulberry32(seed >>> 0);
-
-  const MIN_DIST = 5; // clearance from figure stars (viewBox units)
-  const out: BackgroundStar[] = [];
-  const figurePts = Array.from(figure.values());
-  let attempts = 0;
-  while (out.length < 22 && attempts < 120) {
-    attempts++;
-    const x = rand() * 100;
-    const y = rand() * 100;
-    let tooClose = false;
-    for (const p of figurePts) {
-      if (Math.hypot(p.x - x, p.y - y) < MIN_DIST) {
-        tooClose = true;
-        break;
-      }
-    }
-    if (tooClose) continue;
-    out.push({ x, y, r: 0.2 + rand() * 0.5, o: 0.3 + rand() * 0.55 });
-  }
-  return out;
-}
-
-function mulberry32(a: number): () => number {
-  return function () {
-    a |= 0;
-    a = (a + 0x6d2b79f5) | 0;
-    let t = a;
-    t = Math.imul(t ^ (t >>> 15), t | 1);
-    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-  };
-}
-
-/**
- * Map apparent magnitude to a preview dot radius in viewBox units.
- * Brighter stars (lower magnitude) get larger dots, clamped to keep mag~6
- * stars visible and mag~0 stars from dominating the thumbnail.
- */
-function magToRadius(mag: number): number {
-  const r = 2.3 - 0.25 * mag;
-  if (r < 0.8) return 0.8;
-  if (r > 2.4) return 2.4;
-  return r;
-}

src/components/CountryPickerButton.tsx

@@ -0,0 +1,127 @@
+import { useMemo, useState } from 'react';
+import { Check, Globe } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { CountryFlag } from '@/components/CountryFlag';
+import { countryCodeToFlag, getAllCountries } from '@/lib/countries';
+import { cn } from '@/lib/utils';
+
+interface CountryPickerButtonProps {
+  /**
+   * Selected ISO 3166-1 alpha-2 country code (e.g. `"US"`), or `undefined`
+   * for the global / no-filter state. The button renders a flag emoji
+   * when a country is selected, otherwise a brand-orange Globe icon —
+   * matching the affordance the pledges page introduced.
+   */
+  value: string | undefined;
+  /** Called when the user picks a country, or `undefined` for Global. */
+  onChange: (next: string | undefined) => void;
+  /** Extra classes on the trigger button. */
+  className?: string;
+}
+
+/**
+ * Globe-icon country filter button shared by the discovery pages
+ * (Campaigns, Communities, Pledges). Opens a searchable country list in
+ * a popover; the first item is "Global" which clears the filter.
+ *
+ * The trigger collapses to the picked country's flag emoji when a
+ * country is selected, so the active state reads without opening the
+ * popover. Brand-orange `Globe` icon in the neutral state matches the
+ * other filter icons in the cluster.
+ *
+ * Callers own the selected country (state lives on the page so it can
+ * be threaded into NIP-50 queries or URL params).
+ */
+export function CountryPickerButton({ value, onChange, className }: CountryPickerButtonProps) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  const allCountries = useMemo(() => getAllCountries(), []);
+  const countryOptions = useMemo(() => {
+    const options: Array<{ value: string; label: string; flag: string }> = [
+      { value: 'global', label: t('common.countryGlobal'), flag: '🌍' },
+    ];
+    for (const country of allCountries) {
+      options.push({
+        value: country.code,
+        label: country.name,
+        flag: countryCodeToFlag(country.code),
+      });
+    }
+    return options;
+  }, [allCountries, t]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn('h-auto p-2 hover:bg-muted/50 rounded-lg', className)}
+          aria-label={t('common.countryFilterAriaLabel')}
+        >
+          {value ? (
+            <CountryFlag
+              code={value}
+              emoji={countryCodeToFlag(value)}
+              label={t('common.countryFilterAriaLabel')}
+              className="text-2xl"
+            />
+          ) : (
+            <Globe className="h-5 w-5 text-primary" />
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[280px] p-0" align="end">
+        <Command>
+          <CommandInput placeholder={t('common.countrySearchPlaceholder')} />
+          <CommandList>
+            <CommandEmpty>{t('common.countryNoResults')}</CommandEmpty>
+            <CommandGroup>
+              {countryOptions.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={`${option.label} ${option.value}`}
+                  onSelect={() => {
+                    onChange(option.value === 'global' ? undefined : option.value);
+                    setOpen(false);
+                  }}
+                  className="gap-2"
+                >
+                  {option.value === 'global' ? (
+                    <span className="text-base leading-none">{option.flag}</span>
+                  ) : (
+                    <CountryFlag
+                      code={option.value}
+                      emoji={option.flag}
+                      label={`Flag of ${option.label}`}
+                      className="text-base"
+                    />
+                  )}
+                  <span className="flex-1">{option.label}</span>
+                  <Check
+                    className={cn(
+                      'h-4 w-4',
+                      (value || 'global') === option.value ? 'opacity-100' : 'opacity-0',
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}