highperfocused/grimoire
1
0
Fork 0
mirror of https://github.com/purrgrammer/grimoire.git synced 2026-04-09 06:57:07 +02:00
Code Issues Packages Projects Releases Wiki Activity
354 Commits 274 Branches 0 Tags
ca58a4e7c3500d7c42aa8fa135f54de77b862331
Commit Graph

354 Commits

This Branch
This Branch
All Branches
Author SHA1 Message Date
Alejandro
ca58a4e7c3 feat: replace zap icon with flame icon for supporter badges (#160) 
Changed the supporter badge icon from Zap to Flame in the UserName component for a more distinctive visual indicator of Grimoire supporters.

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 20:13:46 +01:00
Alejandro
8f008ddd39 feat: nip-10 chat interface (#153) 
* docs: add comprehensive NIP-10 thread chat design documentation

Add detailed design documents for implementing NIP-10 thread chat feature:

- nip10-thread-chat-design.md: Full architecture, data structures, adapter
  implementation plan, relay selection strategy, UI requirements, and 7-phase
  implementation checklist
- nip10-thread-chat-examples.md: Complete code examples showing identifier
  parsing, conversation resolution, message loading, reply sending with proper
  NIP-10 tags, and ChatViewer integration
- nip10-thread-chat-summary.md: Quick reference with visual comparisons,
  architecture diagrams, protocol comparison table, data flow, and FAQ

The feature will enable "chat nevent1..." to display kind 1 threaded
conversations as chat interfaces, with the root event prominently displayed
at the top and all replies shown as chat messages below.

Key design decisions:
- Use e-tags with NIP-10 markers (root/reply) instead of q-tags
- Merge multiple relay sources (seen, hints, outbox) for coverage
- Display root event centered with full feed renderer
- Reuse existing ChatViewer infrastructure via adapter pattern
- Support both nevent (with relay hints) and note (ID only) formats

* feat: implement NIP-10 thread chat support

Add complete NIP-10 thread chat implementation enabling "chat nevent..." to
display kind 1 threaded conversations as chat interfaces.

**Type Definitions**:
- Add ThreadIdentifier for nevent/note event pointers
- Add "nip-10" to ChatProtocol type
- Extend ConversationMetadata with thread-specific fields (rootEventId,
  providedEventId, threadDepth, relays)

**NIP-10 Adapter** (src/lib/chat/adapters/nip-10-adapter.ts):
- parseIdentifier: Decode nevent/note format, reject non-kind-1 events
- resolveConversation: Fetch provided event, find root via NIP-10 refs,
  determine conversation relays (merge hints, outbox, fallbacks)
- loadMessages: Subscribe to kind 1 replies, kind 7 reactions, kind 9735 zaps
- sendMessage: Build proper NIP-10 tags (root/reply markers), add p-tags for
  all participants
- sendReaction: Send kind 7 with proper event/author references
- Smart relay selection: Merges seen relays, nevent hints, author outbox,
  user outbox (limit 7 relays for performance)

**ChatViewer Updates**:
- Detect NIP-10 threads (protocol === "nip-10")
- Fetch and display root event at top (centered with KindRenderer)
- Show visual separator ("Replies") between root and messages
- Update empty state message for threads ("No replies yet...")
- Enhanced header: Show "Author • Preview" for thread chats
- Update getAdapter to handle "nip-10" protocol

**Chat Parser**:
- Add Nip10Adapter to priority list (before other adapters to catch
  nevent/note)
- Update error message with nevent/note format examples
- Update adapter priority documentation

**Component Enhancements**:
- ReplyPreview: Show "thread root" when replying to root event (NIP-10)
- RelaysDropdown: Support conversation.metadata.relays for thread relay
  breakdown
- ChatMessageContextMenu: Add "Zap" option to context menu (opens ZapWindow)

**Features**:
- Root event displayed with full feed renderer (can interact: like, zap, etc.)
- All replies shown as chat messages with proper threading
- Reply/React/Zap options on all messages
- Relay dropdown shows breakdown of thread relays
- Participants dropdown shows all thread participants
- @ mention autocomplete works for participants
- Proper NIP-10 tag structure for nested replies
- Smart relay selection for maximum reach

**Usage**:
  chat nevent1qqsxyz...  # Thread with relay hints
  chat note1abc...       # Thread with event ID only

Root event is centered at top, all replies below as chat messages. Sending
replies creates kind 1 events with proper NIP-10 root/reply markers and
p-tags for all participants.

* fix: remove unused imports and mark intentionally unused parameter

- Remove unused getTagValues import
- Prefix providedEvent parameter with underscore to indicate intentional non-use (reserved for future relay hint extraction)

* feat: hide reply preview when directly replying to root in NIP-10 threads

In NIP-10 thread chats, the root event is already displayed prominently at
the top, so showing a reply preview when replying directly to the root is
redundant.

Changes:
- Skip reply preview for regular messages when replying to thread root
- Skip reply preview for zap messages when zapping the thread root
- Root event remains visible at top as reference point

This reduces visual clutter and makes the chat feel cleaner when replies
are directed at the already-visible root post.

* refactor: simplify NIP-10 thread chat implementation

Major simplifications based on user feedback:
- Render root event as regular message instead of special feed renderer
- Remove special-case logic for hiding reply preview when replying to root
- Include root event in messages list using RxJS combineLatest
- Change root author role from "admin" to "op" (original poster)
- Fix NIP-10 protocol link handler in chat header
- Add "Chat" option to event context menu for kind 1 events
- Fix unused parameter warnings in nip-10-adapter

This refactoring reduces complexity and makes NIP-10 threads behave
more consistently with other chat protocols.

* feat: add zap support for NIP-10 thread chat messages

Implement getZapConfig method to enable zapping messages in NIP-10 threads:
- Returns message author as recipient
- Includes event pointer for the message being zapped
- Uses conversation metadata relays for zap receipt publishing
- Integrates with new zap infrastructure from main branch

* fix: pass protocol and identifier directly to chat window

Fix 'undefined protocol' error when opening chat from event menu.
Instead of passing raw nevent as args, directly pass the parsed
protocol and identifier props that ChatViewer expects.

* debug: add logging to diagnose chat protocol issue

Add console logging to:
- chat command argParser to see input args and parsed result
- ChatViewer to see received props

This will help diagnose why 'undefined protocol' error appears
when opening chat via command or event menu.

* refactor: improve NIP-10 thread chat UX and relay/participant handling

UI Improvements:
- Remove "thread root" marker from reply previews - treat all replies uniformly
- Hide "load older messages" for NIP-10 threads (all replies loaded reactively)
- Display "Thread" with note icon instead of "Group" for NIP-10 conversations
- Remove debug logging from chat command parser and ChatViewer

Participant Management:
- Derive participants dynamically from messages (like live-chat does)
- Root author (OP) always listed first with "op" role
- All unique message authors included in member list
- Updates in real-time as new people reply

Relay Management:
- Expand relay collection to include participant outbox relays
- Fetch relays from root author, provided event author, and p-tagged participants
- Check up to 5 participants for relay diversity
- Increase max relay limit from 7 to 10 for better coverage
- Add logging for relay collection debugging

This makes NIP-10 threads feel more like proper chat conversations with
accurate participant lists and better relay coverage across the thread.

* refactor: remove debug logging from NIP-10 adapter

Remove informational console.log statements to reduce noise in production.
Keep only console.warn and console.error for actual problems.

This makes the adapter production-ready while maintaining useful error
and warning messages for debugging issues.

* fix: resolve lint errors from logging cleanup

- Fix empty block statement by simplifying next handler
- Prefix unused parameters with underscore (_response, _err)
- All lint checks now pass with 0 errors

* refactor: use AGGREGATOR_RELAYS constant and remove design docs

Replace hardcoded relay URLs with AGGREGATOR_RELAYS constant:
- Import AGGREGATOR_RELAYS from @/services/loaders
- Use constant for fallback relays in getThreadRelays()
- Use constant for default relays in getDefaultRelays()

Remove design documentation files (no longer needed):
- docs/nip10-thread-chat-design.md
- docs/nip10-thread-chat-examples.md
- docs/nip10-thread-chat-summary.md

This improves maintainability by centralizing relay configuration
and reduces repository clutter.

* refactor: remove relay.nostr.band and update AGGREGATOR_RELAYS

relay.nostr.band is no longer operational, so remove it from the codebase:

AGGREGATOR_RELAYS changes:
- Removed: wss://relay.nostr.band/
- Removed: wss://purplepag.es/
- Added: wss://relay.snort.social/
- Added: wss://relay.damus.io/
- New list: nos.lol, relay.snort.social, relay.primal.net, relay.damus.io

Updated code:
- src/services/loaders.ts: Updated AGGREGATOR_RELAYS constant
- src/lib/chat/adapters/nip-53-adapter.ts: Use AGGREGATOR_RELAYS instead of hardcoded relays

Updated tests:
- All test files updated to expect new relay URLs
- Replaced relay.nostr.band references with relay.snort.social
- Replaced purplepag.es references with relay.snort.social
- Fixed URL formats to include trailing slashes for normalization

All 980 tests passing ✓

* fix: change grimRelays from let to const in supporters.ts

Fix lint error from rebase - grimRelays is never reassigned so it should
use const instead of let.

* style: reduce padding on sign-in message to match composer

Change from px-3 py-2 to px-2 py-1 to match the horizontal and vertical
padding of the logged-in message composer (px-2 py-1), ensuring
consistent height between logged-in and logged-out states.

* feat: make sign-in message clickable to open login dialog

Add clickable 'Sign in' link to the logged-out message composer:
- Import LoginDialog component
- Add showLogin state management
- Make 'Sign in' text an underlined button that opens the login dialog
- Add LoginDialog component with controlled state

This provides a better UX by allowing users to quickly sign in
directly from the chat interface.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 16:47:12 +01:00
Alejandro
14f19a4517 Remove lint job from QA workflow (#157) 
The lint CI check was more annoying than helpful.

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 16:40:44 +01:00
Alejandro
5475f9b518 Add spacing between wallet viewer icon buttons (#156) 
* style: increase spacing between wallet header icon buttons

Changed gap-2 to gap-3 for better visual separation between the info,
refresh, and disconnect icon buttons in the wallet viewer header.

* style: remove "Waiting for payment..." text from receive dialog

The QR code overlay spinner already indicates payment checking status.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 16:25:26 +01:00
Alejandro
2ce81f3ad8 fix: truncate invoice descriptions in confirm send dialog (#155) 
Add proper truncation for long invoice descriptions in the wallet's
confirm send dialog. The description label is now flex-shrink-0 to
prevent it from shrinking, and a title attribute shows the full
description on hover.

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 16:24:53 +01:00
Alejandro
9e11fb590f Add donate call to action feature (#150) 
* feat: add donate CTA and supporter recognition system

Adds donation call-to-action and visual recognition for Grimoire supporters who zap the project.

**UserMenu Changes:**
- Add "Support Grimoire ⚡" button that opens ZapWindow with preset donation address
- Add monthly goal tracker with progress bar (currently showing placeholder values)
- Integrate Lightning address (grimoire@coinos.io) and donation pubkey from members list

**Supporter Tracking System:**
- Create supporters service to monitor kind 9735 (zap receipt) events
- Track users who zap Grimoire donation address
- Cache supporter info (pubkey, total sats, zap count, last zap timestamp) in localStorage
- Reactive updates via RxJS BehaviorSubject
- Initialize tracking on app startup

**Visual Flair for Supporters:**
- Add useIsSupporter hook for checking supporter status
- Style supporter usernames with yellow/gold color
- Add filled ⚡ zap icon badge next to supporter names
- Only applies to non-Grimoire members (members keep their existing gradient badges)

**Implementation Details:**
- Constants: GRIMOIRE_DONATE_PUBKEY and GRIMOIRE_LIGHTNING_ADDRESS in grimoire-members.ts
- Service automatically processes zap receipts and persists supporter data
- Monthly goal tracker uses placeholder values (42k/500k sats, 8.4% progress)
- Future: Make goal dynamic by calculating from actual zap receipts

Related to zap feature implementation in #141, #144, #145

* feat: migrate donation tracking to IndexedDB with monthly calculations

Replaces in-memory Map + localStorage with proper Dexie database storage for accurate monthly donation tracking.

**Database Changes (Version 17):**
- Add `grimoireZaps` table to store individual zap receipts
- Schema: eventId (PK), senderPubkey, amountSats, timestamp, comment
- Indexes on senderPubkey and timestamp for efficient queries

**Supporters Service:**
- Store each zap receipt as separate DB record with full metadata
- Track individual zap timestamps (not just latest per user)
- Cache total and monthly donations for synchronous access
- Refresh cache on new zaps for reactive UI updates

**Monthly Calculations:**
- `getMonthlyDonations()` - Last 30 days (rolling window)
- `getCurrentMonthDonations()` - Current calendar month
- Both use indexed DB queries for efficiency
- Cached values updated on each new zap

**UserMenu:**
- Set monthly goal to 210M sats (2.1 BTC)
- Dynamic progress calculation from actual zap data
- Reactive updates when new donations arrive
- Number formatting: 1M+ → "2.1M", 1k+ → "42k"

**Benefits:**
- Accurate historical tracking with timestamps
- Efficient monthly queries using DB indexes
- No data loss on localStorage quota issues
- Foundation for supporter leaderboards and analytics

* fix: properly await async zap processing in subscription

Changes processZapReceipt calls from forEach to Promise.all to ensure async DB operations complete before processing next batch of events.

Prevents race conditions where zaps might not be properly stored in DB if multiple events arrive simultaneously.

* perf: optimize Dexie queries for donation tracking

Replaces inefficient toArray() + reduce patterns with direct Dexie iteration APIs for better memory efficiency and performance.

**Optimizations:**

1. **Supporter Count** - Use `uniqueKeys()` instead of loading all records
   - Before: Load all → create Set → get size
   - After: `orderBy('senderPubkey').uniqueKeys().length`
   - ~90% memory reduction for large datasets

2. **Aggregation Queries** - Use `.each()` iterator pattern
   - `getTotalDonationsAsync()` - Stream records, accumulate sum
   - `getMonthlyDonationsAsync()` - Indexed query + iteration
   - `getCurrentMonthDonations()` - Indexed query + iteration
   - `getSupporterInfo()` - Per-pubkey indexed query with iteration
   - `getAllSupporters()` - Stream all, group in Map, sort

3. **Cache Refresh** - Optimized `refreshSupporters()`
   - uniqueKeys for supporter set
   - Direct iteration for total/monthly sums
   - Single indexed query for monthly window

**Monthly Goal:**
- Update from 210M sats to 210k sats (0.0021 BTC)
- More achievable target for initial launch

**Benefits:**
- Lower memory usage (no intermediate arrays)
- Faster queries (direct iteration vs map/reduce)
- Better scalability with growing zap history
- Leverages Dexie's indexed cursors for efficiency

* refactor: singleton supporters service with optimized Dexie queries

Complete refactor of donation tracking to proper singleton pattern with relay-based subscriptions and zero in-memory caching.

**Singleton Service Pattern:**
- Class-based SupportersService matching relay-liveness/accounts patterns
- Single `init()` method initializes subscriptions
- Observable `supporters$` for reactive UI updates
- Proper cleanup with `destroy()` method

**Relay-Based Subscription:**
- Fetch Grimoire's inbox relays via relayListCache
- Subscribe to zaps using `#p` tag filter (NIP-57 recipient tag)
- Use createTimelineLoader with proper relay hints
- Fallback to aggregator relays if no inbox relays found
- Dual subscription: loader + event store timeline for comprehensive coverage

**Optimized Dexie Schema:**
- Add compound index: `[senderPubkey+timestamp]`
- Enables efficient per-user date range queries
- Schema: `&eventId, senderPubkey, timestamp, [senderPubkey+timestamp]`

**Zero In-Memory Caching:**
- Remove cachedTotalDonations and cachedMonthlyDonations
- All queries go directly to IndexedDB
- Use Dexie iteration APIs (`.each()`, `.uniqueKeys()`)
- Compound index queries for monthly aggregations

**Premium Supporter Detection:**
- New threshold: 2.1k sats/month = premium supporter
- `isPremiumSupporter()` uses compound index query
- `getMonthlySupporterInfo()` returns monthly stats per user

**Badge Logic Updates:**
- Premium supporters (2.1k+/month): Zap badge in username color
- Regular supporters: Yellow text + yellow filled zap icon
- useIsSupporter returns `{ isSupporter, isPremiumSupporter }`

**UserMenu Updates:**
- Use async `getMonthlyDonations()` with useState/useEffect
- Subscribe to `supporters$` to trigger monthly recalculation
- Remove synchronous function calls

**Key Benefits:**
- Proper singleton lifecycle management
- Accurate relay selection for zap discovery
- No memory overhead from caching
- Efficient compound index queries
- Scales to thousands of zaps without performance degradation

* fix: fetch Grimoire relay list before subscribing to zaps

Ensures kind 10002 relay list is loaded before subscribing to zap receipts, preventing fallback to aggregators only.

**Problem:**
At startup, relayListCache was empty, so getInboxRelays() returned null and service fell back to aggregator relays only, missing zaps published to Grimoire's actual inbox relays.

**Solution:**
1. Explicitly fetch Grimoire's kind 10002 relay list using addressLoader
2. Wait up to 5 seconds for relay list to load
3. Then get inbox relays from populated cache
4. Subscribe to those relays + aggregators

**Flow:**
init() → subscribeToZapReceipts()
  → fetch kind 10002 (5s timeout)
  → getInboxRelays() from cache
  → subscribe to inbox relays + aggregators
  → keep subscription open for live updates

Fixes startup zap loading issue.

* feat: compact support section with manual refresh and full clickability

Makes the entire support section clickable to open zap dialog and adds manual refresh button for donation stats.

**Changes:**
- Entire support section now clickable (opens zap dialog)
- Add refresh button with spinning animation
- Remove 'Help us build...' tagline for more compact design
- Keep just title, stats, and progress bar
- Manual refresh re-fetches Grimoire relay list and reloads zaps

**Layout:**

Click anywhere to donate, click refresh icon to manually sync zaps.

* refactor: replace BehaviorSubject with Dexie useLiveQuery for reactive supporter tracking

Replace manual BehaviorSubject pattern with Dexie's built-in useLiveQuery hook
for reactive database queries. This simplifies the code and leverages Dexie's
optimized change detection.

Changes:
- Remove BehaviorSubject from SupportersService
- Remove refreshSupporters() method and all calls to it
- Update useIsSupporter hook to use useLiveQuery for supporter pubkeys
- Update GrimoireWelcome to use useLiveQuery for monthly donations
- Update UserMenu to use useLiveQuery for monthly donations
- Remove unused imports (cn, useEffect, useState) and fields (initialized)

Benefits:
- Less code to maintain (no manual observable management)
- Automatic reactivity when DB changes
- Better performance with Dexie's built-in change detection

* fix: improve cold start zap loading and fix subscription memory leak

Fixes several issues with zap loading on cold start:

1. Memory leak fix: Timeline subscription wasn't being stored or cleaned up
   - Now properly add timeline subscription to main subscription for cleanup

2. Better cold start handling:
   - Increase timeout from 5s to 10s for relay list fetching
   - Add 100ms delay after addressLoader to let relayListCache update
   - Add more detailed logging to debug cold start issues

3. Improved logging:
   - Show which relays are being used for subscription
   - Log when processing zap events from eventStore
   - Better error messages with context

These changes should help diagnose why zaps aren't loading on cold start
and prevent memory leaks from unclosed subscriptions.

* feat: add hardcoded relay fallback for instant cold start zap loading

Add hardcoded relays (wss://nos.lol, wss://lightning.red) to immediately
start loading zaps on cold start, without waiting for relay list fetch.

Changes:
- Add GRIMOIRE_ZAP_RELAYS constant with hardcoded reliable relays
- Refactor subscribeToZapReceipts() to start with hardcoded relays immediately
- Move relay list fetching to separate non-blocking method fetchAndMergeRelayList()
- Relay list fetch now happens in parallel with subscription (non-blocking)
- Still fetch and log additional relays from kind 10002 in background

This ensures zaps load immediately on app start rather than waiting for
relay list to be fetched from network.

* fix: remove dead relay.nostr.band and add detailed zap processing logs

Remove relay.nostr.band from all relay lists as it's dead.

Changes:
- Remove from AGGREGATOR_RELAYS in loaders.ts
- Remove from NIP-53 fallback relays
- Update all test files to use alternative relays

Add detailed logging to debug progress bar showing 0:
- Log each zap processing step (validation, recipient check, sender check)
- Log duplicate zaps, invalid zaps, and 0-sat zaps
- Log existing zap count in DB on init
- Add timestamps to successful zap recordings

This will help diagnose why the progress bar shows 0 even though
zaps are being fetched.

* fix: reduce zap query limit from 1000 to 500 to avoid relay rejections

Many relays reject REQ filters with limit > 500. This was likely causing
the zap subscription to fail silently on some relays, resulting in no zaps
being fetched and the progress bar showing 0.

Reduced limit from 1000 to 500 to be compatible with more relays.

* fix: remove lightning.red and aggregator relays, add monthly calculation debug logs

Changes:
- Remove wss://lightning.red from hardcoded relays (only use wss://nos.lol)
- Remove aggregator relays from zap subscription (don't use for fetching zaps)
- Remove AGGREGATOR_RELAYS import

Add debug logging to diagnose progress bar issue:
- GrimoireWelcome: Log count and total of zaps found in last 30 days
- UserMenu: Log count and total of zaps found in last 30 days
- Show cutoff date in GrimoireWelcome log

This will help identify if:
1. Zaps are being stored in DB
2. Zaps are within the 30-day window
3. Monthly calculation is running and finding the zaps

* fix: subscribe to eventStore.insert$ to catch zaps in real-time

The previous approach using eventStore.timeline() was only emitting once
with the initial state (0 events) and not re-emitting when new zaps were
added to the store.

Changed to subscribe to eventStore.insert$ which fires for every new event
added to the store. This catches zaps as they arrive from relays in real-time.

Changes:
- Subscribe to eventStore.insert$ instead of eventStore.timeline()
- Filter events for kind 9735 with #p tag matching Grimoire pubkey
- Process each zap as it's inserted into the store
- Add logging to show when zaps are received from insert$ stream

This should fix the progress bar showing 0 even though zaps are being
fetched from relays.

* fix: also subscribe to eventStore.timeline() to process existing zaps

The insert$ stream only fires for NEW events being added. If events were
already in the eventStore (from cache or previous session), we wouldn't
see them.

Now subscribing to both:
- insert$ - catches new events in real-time as they're added
- timeline() - emits ALL matching events (existing + new)

This ensures we process:
1. Zaps already in the eventStore from previous sessions
2. Zaps that loaded from relays before our subscription was active
3. New zaps arriving in real-time

Added logging to distinguish between new (insert$) and all (timeline) events.

* fix: subscribe directly to loader observable to process zaps as they arrive

Complete rethink of the zap sync strategy. The issue was that we were
subscribing to eventStore.timeline() and eventStore.insert$ which were
not working as expected.

The TimelineLoader returns Observable<NostrEvent> that emits individual
events as they arrive from relays. We should subscribe directly to this.

Changes:
- Remove eventStore.timeline() and eventStore.insert$ subscriptions
- Subscribe directly to loader().subscribe() with next/error/complete handlers
- Process each event in the next() handler as it arrives from relays
- Log each zap received from loader for debugging
- Remove unused eventStore import

This is the simplest and most direct approach - process events exactly
as the loader emits them from the relays.

* chore: merge main and remove debug logging for production

Merged latest changes from main branch and removed all debug logging
added during development to make the code production-ready.

Changes:
- Merged origin/main into branch
- Removed console.log statements from supporters service init/subscribe
- Removed debug logging from processZapReceipt method
- Removed debug logging from fetchAndMergeRelayList method
- Removed debug logging from GrimoireWelcome monthly calculation
- Removed debug logging from UserMenu monthly calculation
- Kept only error logging for production debugging

The donation system is now production-ready with clean, minimal logging.

* fix: remove yellow text color from regular supporters, keep only badge

Regular supporters (who zapped but not 2.1k+/month) should only show the
yellow zap badge next to their name, not have their username colored yellow.

Changes:
- Remove yellow text color (text-yellow-500) from regular supporters
- Regular supporters now: normal username color + yellow zap badge
- Premium supporters still: normal username color + badge in username color
- Updated component documentation to reflect this change

This provides cleaner visual hierarchy where only Grimoire team members
get special username colors (gradient), while supporters are distinguished
by their badge alone.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 16:15:39 +01:00
Alejandro Gómez
1068fae78f style: limit transaction history list width to match wallet UI 
Add max-w-md constraint to transaction history list to match
the width of balance display, send/receive buttons, and detail dialog.
Creates a consistent, centered, compact layout throughout the entire
wallet interface.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-01-19 14:11:48 +01:00
Alejandro Gómez
7664861825 style: limit transaction detail dialog width to match wallet UI 
Add max-w-md constraint to transaction detail dialog to match
the width of the balance display and send/receive buttons.
This creates a consistent, compact layout throughout the wallet UI.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-01-19 14:09:59 +01:00
Alejandro Gómez
3eb8cea9e0 fix: use preimage field for Bitcoin txid and make mempool link icon-only 
Correct Bitcoin transaction display to use the preimage field which
contains the actual txid (with optional output index like "txid:0").

Changes:
- Extract txid from preimage field, removing output index if present
- Use preimage instead of payment_hash for Bitcoin transactions
- Make mempool.space link icon-only with tooltip
- Icon is larger (size-4) and properly aligned with txid display

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-01-19 14:08:14 +01:00
Alejandro Gómez
1dd3841220 fix: correct Bitcoin transaction detection logic 
Fix Bitcoin transaction detection to properly distinguish between
Lightning and on-chain transactions by checking the invoice field.

Detection logic:
- Bitcoin: invoice field contains a Bitcoin address (not "ln..." invoice)
- Lightning: invoice field starts with "ln" (lnbc, lntb, etc.)
- Supports all Bitcoin address formats: legacy (1..., 3...), bech32 (bc1...)
- Supports testnet addresses: tb1..., 2..., m/n...

Display logic:
- Bitcoin: Show payment_hash (or preimage) as Transaction ID
- Link to mempool.space for blockchain exploration
- Lightning: Show payment hash and preimage separately

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-01-19 13:59:42 +01:00
Alejandro Gómez
a01533b495 feat: add Bitcoin transaction detection and mempool.space explorer links 
Detect Bitcoin on-chain transactions and display them differently
from Lightning transactions in the wallet viewer. Bitcoin transactions
show Transaction ID with a link to mempool.space for blockchain
exploration.

Detection:
- Bitcoin txid is 64-character hex string in preimage field
- Uses regex validation to detect on-chain transactions

Display changes:
- Bitcoin: Show "Transaction ID" with mempool.space link
- Lightning: Show "Payment Hash" and "Preimage" as before
- Network-aware: Links to testnet/signet explorers when applicable

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-01-19 13:56:31 +01:00
Alejandro Gómez
3adc9bdfc3 feat: add invoice description fallback for wallet transactions 
Add fallback to lightning invoice description when transaction
description is not available. Improves transaction list readability
by showing invoice descriptions instead of generic "Payment" labels.

- Add getInvoiceDescription helper with applesauce caching pattern
- Update TransactionLabel to check invoice description
- Update detail dialog to show invoice description as fallback
- Maintains zap detection logic and UI

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-01-19 13:54:45 +01:00
Alejandro
97dd30f587 Add anonymous zap option with throwaway signer (#154) 
* feat: add anonymous zap option

Add "Zap anonymously" checkbox that allows users to send zaps without
revealing their identity. When enabled, creates a throwaway keypair to
sign the zap request instead of using the active account's signer.

This also enables users without a signer account to send zaps by
checking the anonymous option.

* feat: prioritize recipient's inbox relays for zap receipts

Add selectZapRelays utility that properly selects relays for zap receipt
publication with the following priority:
1. Recipient's inbox relays (so they see the zap)
2. Sender's inbox relays (so sender can verify)
3. Fallback aggregator relays

This ensures zap receipts are published where recipients will actually
see them, rather than just the sender's relays.

Includes comprehensive tests for relay selection logic.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 12:33:46 +01:00
Alejandro
3f811ed072 feat: zap action for chat (#151) 
* feat: add configurable zap tagging for chat messages

Implements a protocol adapter interface for configuring how zap
requests should be tagged for chat messages. This enables proper
NIP-53 live activity zapping with appropriate a-tag and goal
e-tag support.

Changes:
- Add ZapConfig interface to base-adapter for protocol-specific zap configuration
- Add getZapConfig() method to ChatProtocolAdapter (default: unsupported)
- Implement getZapConfig() in NIP-53 adapter with proper tagging:
  - Always a-tag the live activity (kind 30311)
  - If zapping host with goal, also e-tag the goal event
- Add goal tag parsing to live-activity.ts and types
- Update createZapRequest to accept custom tags parameter
- Add Zap action to ChatMessageContextMenu (shown when supported)
- Update ZapWindow to pass custom tags through to zap request
- NIP-29 groups inherit default (unsupported) behavior

* feat: add custom tags and relays to zap command

Extends the zap command to support custom tags and relay specification,
enabling full translation from chat zap config to zap command.

Changes:
- Add -T/--tag flag to specify custom tags (type, value, optional relay hint)
- Add -r/--relay flag to specify where zap receipt should be published
- Update ZapWindow to accept and pass through relays prop
- Update ChatMessageContextMenu to pass relays from zapConfig
- Update man page with new options and examples
- Add comprehensive tests for zap parser flag handling

Example usage:
  zap npub... -T a 30311:pk:id wss://relay.example.com
  zap npub... -r wss://relay1.com -r wss://relay2.com

* fix: include event pointer when zapping chat messages

Pass the message event as eventPointer when opening ZapWindow from
chat context menu. This enables:
- Event preview in the zap window
- Proper window title showing "Zap [username]"

* feat: add zap command reconstruction for Edit feature

Add zap case to command-reconstructor.ts so that clicking "Edit" on
a zap window title shows a complete command with:
- Recipient as npub
- Event pointer as nevent/naddr
- Custom tags with -T flags
- Relays with -r flags

This enables users to see and modify the full zap configuration.

* fix: separate eventPointer and addressPointer for proper zap tagging

- Refactor createZapRequest to use separate eventPointer (for e-tag)
  and addressPointer (for a-tag) instead of a union type
- Remove duplicate p-tag issue (only tag recipient, not event author)
- Remove duplicate e-tag issue (only one e-tag with relay hint if available)
- Update ZapConfig interface to include addressPointer field
- Update NIP-53 adapter to return addressPointer for live activity context
- Update ChatMessageContextMenu to pass addressPointer from zapConfig
- Update command-reconstructor to properly serialize addressPointer as -T a
- Update ZapWindow to pass addressPointer to createZapRequest

This ensures proper NIP-53 zap tagging: message author gets p-tag,
live activity gets a-tag, and message event gets e-tag (all separate).

* refactor: move eventPointer to ZapConfig for NIP-53 adapter

- Add eventPointer field to ZapConfig interface for message e-tag
- NIP-53 adapter now returns eventPointer from getZapConfig
- ChatMessageContextMenu uses eventPointer from zapConfig directly
- Remove goal logic from NIP-53 zap config (simplify for now)

This gives the adapter full control over zap configuration, including
which event to reference in the e-tag.

* fix: update zap-parser to return separate eventPointer and addressPointer

The ParsedZapCommand interface now properly separates:
- eventPointer: for regular events (nevent, note, hex ID) → e-tag
- addressPointer: for addressable events (naddr) → a-tag

This aligns with ZapWindowProps which expects separate fields,
fixing the issue where addressPointer from naddr was being
passed as eventPointer and ignored.

* feat: improve relay selection for zap requests with e+a tags

When both eventPointer and addressPointer are provided:
- Collect outbox relays from both semantic authors
- Include relay hints from both pointers
- Deduplicate and use combined relay set

Priority order:
1. Explicit params.relays (respects CLI -r flags)
2. Semantic author outbox relays + pointer relay hints
3. Sender read relays (fallback)
4. Aggregator relays (final fallback)

* fix: pass all zap props from WindowRenderer to ZapWindow

WindowRenderer was only passing recipientPubkey and eventPointer,
dropping addressPointer, customTags, and relays. This caused
CLI flags like -T (custom tags) and -r (relays) to be ignored.

Now all parsed zap command props flow through to ZapWindow
and subsequently to createZapRequest.

* refactor: let createZapRequest collect relays from both authors

Remove top-level relays from NIP-53 zapConfig so createZapRequest
can automatically collect outbox relays from both:
- eventPointer.author (message author / zap recipient)
- addressPointer.pubkey (stream host)

The relay hints in the pointers are still included via the
existing logic in createZapRequest.

* fix: deduplicate explicit relays in createZapRequest

Ensure params.relays is deduplicated before use, not just
the automatically collected relays. This handles cases where
CLI -r flags might specify duplicate relay URLs.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 12:16:51 +01:00
Alejandro
599e8b6c60 Fix zap dialog to target correct event author (#152) 
* fix: use semantic author for zap targeting

When zapping certain event kinds (zaps, streams), use the semantic
author instead of event.pubkey:
- Zaps (9735): Target the zapper, not the lightning service
- Streams (30311): Target the host, not the event publisher

Changes:
- Extract getSemanticAuthor() to shared utility (src/lib/semantic-author.ts)
- Update BaseEventRenderer to use semantic author when opening zap dialog
- Update ZapWindow to resolve recipient using semantic author
- Refactor DynamicWindowTitle to use shared utility

This ensures that when you zap an event, you're zapping the right person
(the one who semantically "owns" or created the event), not just whoever
signed it.

* fix: load event in DynamicWindowTitle to derive zap recipient

When opening a zap dialog via 'zap naddr1...' or 'zap nevent1...', the
window title was showing "ZAP" instead of "Zap {host name}" because
DynamicWindowTitle only had access to the empty recipientPubkey from
the initial props.

Now DynamicWindowTitle:
- Loads the event from eventPointer if present
- Derives the recipient using getSemanticAuthor() if recipientPubkey is empty
- Falls back to explicit recipientPubkey if provided

This ensures the window title shows the correct recipient name
immediately, matching the behavior in the ZapWindow component itself.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 11:41:55 +01:00
Alejandro
ab64fc75f4 Restrict relay auth to account owner (#149) 
* fix: only prompt relay auth for accounts that can sign

- Add canAccountSign() helper to check if account is read-only
- Block auth prompts for read-only accounts in shouldPromptAuth()
- Throw error when authenticateRelay() called with read-only account
- Document all major app hooks in CLAUDE.md for future reference

Read-only accounts cannot sign events, so they should never be prompted
for relay authentication or attempt to authenticate. This prevents
confusing UX where users are asked to sign but cannot.

* refactor: extract canAccountSign helper to useAccount

- Move canAccountSign function from relay-state-manager to useAccount.ts
- Import and reuse the shared helper in relay-state-manager
- Update useAccount hook to use the extracted helper internally
- Follows DRY principle by centralizing account sign capability logic

This keeps the account sign capability detection logic in one place,
making it easier to maintain and ensuring consistency across the app.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 10:19:16 +01:00
Alejandro
55d9c88f50 fix: pass zap request event to RichText for emoji rendering in compact preview (#148) 
The compact zap preview was passing only the content string to RichText,
which meant NIP-30 custom emoji tags were not available for rendering.
Now passes the full zap request event so emoji tags are properly parsed.

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 10:17:09 +01:00
Alejandro
b000ef8dd3 feat: display zap recipient username in all contexts (#147) 
* feat: display zap recipient username in all contexts

- Add recipient username display for profile zaps
- Show recipient after amount in compact preview
- Show recipient with arrow (→) in full zap receipt renderer
- Fixes missing context when zaps don't target specific events

* refactor: remove arrow from zap recipient display

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 09:58:19 +01:00
Alejandro
ed86698c07 fix: pass full zap request event to RichText for proper parsing (#146) 
Previously, only the content string was passed to RichText when
rendering zap comments. This prevented proper parsing of mentions,
event references, hashtags, URLs, custom emojis, and other rich
content features.

Now passing the full zapRequest event object to RichText, enabling
all content transformers to work correctly on zap comments.

Changes:
- Remove zapComment variable that extracted just the content string
- Pass zapRequest event directly to RichText component
- Update condition to check zapRequest && zapRequest.content

Fixes rendering in both feed and detail views (detail falls back
to feed renderer for kind 9735).

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 09:36:42 +01:00
Alejandro
f56228f88a fix: remove double URL encoding in zap requests (#145) 
The zap request JSON was being encoded twice:
1. Manually via encodeURIComponent in serializeZapRequest()
2. Automatically by URLSearchParams.set() when building callback URL

This caused overly-encoded URLs (e.g., '{' → '%7B' → '%257B').

Fix: Remove manual encoding and let URLSearchParams handle it.
Verified: Tests pass, build succeeds

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 09:08:53 +01:00
Alejandro
dbcbcf6181 feat: improve zap wallet payment flow UX (#144) 
* feat: improve zap wallet payment flow UX

Improvements to the zap window to better communicate wallet payment status:

- Add clear "Paying with wallet..." message during NWC payment attempts
- Show QR code immediately on payment timeout or failure
- Improve error messages with actionable guidance
- Always display "Open in External Wallet" option in QR view
- Rename "Retry with Wallet" to "Retry with NWC Wallet" for clarity
- Generate QR code upfront to enable instant display on errors

This provides better feedback when wallet payments fail or timeout,
giving users clear fallback options without confusion.

* feat: add LNURL address caching for instant zap UI

Implements LNURL address caching similar to NIP-05 caching pattern:

**Database Changes** (v16):
- Add `lnurlCache` table with 24-hour TTL
- Stores LNURL-pay response data for Lightning addresses
- Indexed by address and fetchedAt for efficient queries

**New Hook** (`useLnurlCache`):
- Reactive hook using Dexie + useLiveQuery pattern
- Auto-fetches and caches LNURL data on first use
- Returns cached data instantly on subsequent calls
- Re-fetches when cache is stale (>24 hours)

**ZapWindow Optimization**:
- Uses cached LNURL data instead of network calls
- Eliminates 10-second delay on repeat zaps
- Shows zap amounts/limits instantly from cache
- Graceful error handling when cache is warming up

**Testing**:
- 11 comprehensive tests for LNURL validation
- Validates zap support, pubkey format, field requirements
- Tests edge cases (uppercase hex, missing fields, etc.)

**Benefits**:
- Instant zap UI for frequently zapped users
- Reduced load on LNURL servers
- Offline capability (show cached limits/amounts)
- Better UX with sub-100ms response time

Verification: All 950 tests pass, build succeeds

* fix: match comment input styling to amount input in zap window

Update MentionEditor styling to match Input component:
- Change padding from py-2 to py-1
- Add responsive text sizing (text-base md:text-sm)
- Add min-h-9 to match Input height

This creates visual consistency between the amount and comment fields.

* feat: add amount preview above invoice in zap QR view

Display the zap amount prominently above the invoice when showing
the QR code. This provides clear visual confirmation of what the
user is paying before they scan or copy the invoice.

Format:
- Large bold amount with k/m notation (e.g., "420", "2.1k", "100m")
- Smaller "sats" label underneath
- Positioned between QR code and invoice field

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-19 00:07:05 +01:00
Alejandro
9f6e524ea9 feat: add tap-to-blur privacy feature for wallet balances (#143) 
* feat: add tap-to-blur privacy feature for wallet balances

Implement privacy toggle for wallet balances and transaction amounts.
Tapping any balance display toggles a global blur effect across all
wallet UIs. Persisted to localStorage for consistent privacy.

- Add walletBalancesBlurred state to GrimoireState
- Add toggleWalletBalancesBlur pure function in core/logic
- Make big balance in WalletViewer clickable with eye icon indicator
- Apply blur to all transaction amounts in list and detail views
- Add blur to send/receive dialog amounts
- Make balance in user menu wallet info clickable with eye icon
- Apply blur to balance in dropdown menu item

UX matches common financial app pattern: tap balance → blur on/off

* refactor: replace blur with fixed-width placeholders for privacy

Prevent balance size information leakage by using fixed-width
placeholder characters instead of blur effect. A blurred "1000000"
would still reveal it's a large balance vs "100" even when blurred.

Changes:
- Replace blur-sm class with conditional placeholder text
- Use "••••••" for main balances
- Use "••••" for transaction amounts in lists
- Use "•••••• sats" for detailed amounts with unit
- Use "•••• sats" for smaller amounts like fees

Security improvement: No information about balance size is leaked
when privacy mode is enabled. All hidden amounts appear identical.

* refactor: improve privacy UX with stars and clearer send flow

Three UX improvements to the wallet privacy feature:

1. Don't hide amounts in send confirmation dialog
   - Users need to verify invoice amounts before sending
   - Privacy mode now only affects viewing, not sending

2. Replace bullet placeholders (••••) with stars (✦✦✦✦)
   - More visually distinct and recognizable as privacy indicator
   - Unicode BLACK FOUR POINTED STAR (U+2726)
   - Better matches common "redacted" aesthetic

3. Reduce eye icon sizes for subtler presence
   - Main balance: size-6 → size-5
   - Wallet info dialog: size-3.5 → size-3
   - Smaller icons feel less intrusive

Result: Clearer privacy state, safer payment flow, better aesthetics.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-18 23:22:00 +01:00
Alejandro
72fb47224c feat: add NIP-57 zap command foundation (#141) 
* feat: add NIP-57 zap command foundation

Implements the foundational structure for sending Lightning zaps (NIP-57) to
Nostr users and events. This commit adds the command interface, UI components,
and routing logic. The actual LNURL resolution and zap request creation will
be implemented in follow-up commits.

Components Added:
- ZapWindow: Full-featured UI for zapping with amount presets, custom amounts,
  wallet integration, and QR code fallback
- parseZapCommand: Parser supporting multiple formats (npub, nprofile, nevent,
  naddr, NIP-05, $me alias)
- Command registration in man pages with examples
- Window routing and title generation

Features:
- Preset amount buttons (21, 100, 500, 1000, 5000, 10000 sats)
- Custom amount input
- Amount usage tracking (remembers most-used amounts)
- Comment field for zap messages
- Event context rendering (shows zapped event in UI)
- Dual payment methods: NWC wallet or QR code/invoice copy
- Dynamic recipient resolution (from event author if zapping event)

Usage:
  zap fiatjaf.com                  # Zap a user by NIP-05
  zap npub1...                     # Zap a user by npub
  zap nevent1...                   # Zap an event (recipient = author)
  zap npub1... nevent1...          # Zap specific user for specific event

Next Steps:
- Implement LNURL-pay resolution (fetch callback URL and nostrPubkey)
- Create kind 9734 zap request event with applesauce factory
- Implement invoice generation via LNURL callback
- Integrate NWC wallet payment
- Add zap action to event context menus
- Implement zap receipt listening (kind 9735)

* feat: implement full NIP-57 zap flow with LNURL and NWC

Completes the production-ready implementation of Lightning zaps (NIP-57) with
full LNURL-pay resolution, zap request creation, NWC wallet payment, and QR
code fallback.

Core Implementation:

1. **LNURL Resolution** (src/lib/lnurl.ts)
   - Resolve Lightning addresses (lud16) to LNURL-pay endpoints
   - Validate zap support (allowsNostr, nostrPubkey)
   - Fetch invoices from LNURL callbacks with zap requests
   - Amount validation (min/max sendable)
   - Comment length validation

2. **Zap Request Creation** (src/lib/create-zap-request.ts)
   - Build kind 9734 zap request events using applesauce EventFactory
   - Sign with user's active account
   - Include recipient (p tag), amount, relays, optional event context (e/a tags)
   - Serialize to URL-encoded JSON for LNURL callbacks
   - Smart relay selection (user's inbox relays for zap receipts)

3. **ZapWindow Complete Flow** (src/components/ZapWindow.tsx)
   - Resolve recipient's Lightning address from profile (lud16)
   - Create and sign zap request with user credentials
   - Fetch invoice from LNURL callback
   - Pay with NWC wallet OR show QR code
   - QR code generation with qrcode library
   - Success feedback with LNURL success actions
   - Comprehensive error handling and user notifications
   - Toast notifications for each step

4. **Event Menu Integration** (src/components/nostr/kinds/BaseEventRenderer.tsx)
   - Add "Zap" action to event dropdown menu
   - Automatically includes event context (e or a tag)
   - Yellow zap icon (⚡) for visual consistency
   - Opens ZapWindow with pre-filled recipient and event

Flow Diagram:
1. User clicks "Zap" on event or runs `zap` command
2. Resolve recipient's lud16 → LNURL-pay endpoint
3. Validate zap support (allowsNostr, nostrPubkey)
4. Create kind 9734 zap request (signed by sender)
5. Send to LNURL callback → get BOLT11 invoice
6. Pay via NWC wallet OR show QR code
7. Zap receipt (kind 9735) published by LNURL service

Features:
- ✅ Full NIP-57 compliance
- ✅ LNURL-pay support with validation
- ✅ Applesauce EventFactory for signing
- ✅ NWC wallet integration
- ✅ QR code fallback for manual payment
- ✅ Event context (zapping specific notes/articles)
- ✅ Amount presets with usage tracking
- ✅ Custom amounts and comments
- ✅ Comprehensive error handling
- ✅ Step-by-step user feedback
- ✅ Event menu integration

Security:
- Uses user's active account signer
- Validates LNURL responses
- Validates amount ranges
- No private key exposure
- HTTPS-only LNURL endpoints

Dependencies:
- qrcode: QR code generation
- applesauce-core: EventFactory for signing
- Existing NWC wallet implementation

Related: #135 (NWC wallet viewer)
Implements: NIP-57 (Lightning Zaps)

* fix: resolve TypeScript errors in ZapWindow

- Remove unused imports (useEffect, isAddressableKind, NostrEvent)
- Fix walletInfo access: fetch from getInfo() hook instead of direct property
- Store wallet info in component state with useEffect
- All TypeScript syntax errors resolved

* fix: resolve all TypeScript build errors in zap implementation

- ZapWindow.tsx: Import useProfile from @/hooks/useProfile instead of applesauce-react/hooks
- ZapWindow.tsx: Remove Tabs import (unused)
- ZapWindow.tsx: Remove htmlFor prop from Label components (not supported)
- create-zap-request.ts: Remove non-existent EventTemplate import
- create-zap-request.ts: Use inferred type for template object
- lnurl.ts: Prefix unused lnurl parameter with underscore

All TypeScript compilation errors resolved. Code ready for production build.

* fix: correct useProfile usage and ProfileContent handling in ZapWindow

- Remove eventStore argument from useProfile (takes pubkey and optional relay hints)
- Fix recipientProfile usage: already ProfileContent, don't call getProfileContent again
- Fix authorProfile: call getProfileContent on NostrEvent, not on ProfileContent
- Fix lud16/lud06 access: use recipientProfile directly
- Fix success toast: use recipientProfile?.name instead of content?.name

All type errors resolved. ProfileContent is returned by useProfile, not NostrEvent.

* feat: refine ZapWindow UI and add dynamic window title

UI Refinements per user request:
- Remove QrCode unused import
- Simplify payment flow to single adaptive button
- Button shows "Log in to Zap" if user can't sign
- Button shows "Pay with Wallet" if NWC available, else "Pay"
- Fix activeAccount usage to use accountManager.active
- Remove unused getProfileContent import
- Remove unused eventAuthorName variable

Dynamic Title:
- Add "Zap [username]" dynamic title in DynamicWindowTitle
- Fetches recipient profile and displays name or fallback
- Shows recipient's display name, name, or truncated pubkey

Build fixes:
- Fix TypeScript errors with unused imports
- Fix activeAccount.signer property access
- All tests passing (939 passed)

* feat: add emoji autocompletion to zap comments and refine UI

Zap Comment Enhancements:
- Replace plain Input with MentionEditor for emoji autocompletion
- Add NIP-30 emoji tag support to zap requests (kind 9734)
- Emoji tags are properly serialized and included in zap events
- Support :emoji: syntax with custom emoji from emoji search

Event Preview Refinements:
- Remove Card wrapper from zapped event preview
- Remove padding and borders for cleaner display
- Event renders directly without container styling

Implementation Details:
- Add EmojiTag interface to create-zap-request.ts
- Update ZapRequestParams to include emojiTags array
- Extract emoji tags from MentionEditor in handleZap
- Pass emoji tags through zap request creation pipeline
- Add useProfileSearch and useEmojiSearch hooks to ZapWindow
- Use MentionEditor ref to get serialized content with emojis

All tests passing (939 passed)
Build successful

* feat: compact ZapWindow UI and improve debugging

UI Improvements:
- Reduce padding from p-6 to p-4 and space-y-6 to space-y-3
- Convert amount grid to single-row flex layout with gap-1.5
- Add formatAmount() helper for shortened numbers (21, 1k, 5k, 10k)
- Move custom amount input inline with preset amounts
- Reduce button size to "sm" for more compact display
- Remove separate label for custom amount
- Make comment field more compact (removed min-height)

Debugging Enhancements:
- Add console.log for recipient profile and lud16/lud06
- Add logging for LNURL resolution steps
- Add logging for zap request creation
- Add logging for invoice fetch from callback
- Add debug logging for emoji search service initialization
- Test emoji search on mount to verify it's working

Number Format:
- 21 → "21"
- 1000 → "1k"
- 5000 → "5k"
- 10000 → "10k"
- Handles decimals: 1500 → "1.5k"

The compact layout makes better use of vertical space and provides
comprehensive debug logging to help troubleshoot LNURL and emoji issues.

All tests passing (939 passed)
Build successful

* fix: open LoginDialog instead of connection window for zap login

Changes:
- Import LoginDialog component into ZapWindow
- Add showLogin state to control LoginDialog visibility
- Update handleLogin to open LoginDialog instead of connection window
- Remove unused useGrimoire import and addWindow destructuring
- Add LoginDialog component to render alongside QR dialog

User Experience:
- "Log in to Zap" button now opens proper login dialog
- Users can log in with extension, readonly, nsec, or NIP-46
- After login, user can proceed with zap flow
- More intuitive than opening relay connection window

All tests passing (939 passed)
Build successful

* feat: auto-close ZapWindow after successful wallet payment

Changes:
- Add onClose callback prop to ZapWindowProps interface
- Pass onClose from WindowRenderer to ZapWindow component
- Call onClose() with 1.5s delay after successful wallet payment
- Allow user to see success toast before window closes

User Experience:
- After zapping with wallet, window automatically closes
- 1.5 second delay allows user to see success message
- Prevents accidental double-zapping
- Cleaner flow - no manual window closing needed

Implementation:
- WindowRenderer passes onClose callback to ZapWindow
- ZapWindow calls onClose after payment success and toasts
- setTimeout(onClose, 1500) provides brief delay for UX
- QR code path unchanged (window stays open for payment)

All tests passing (939 passed)
Build successful

* feat: full-width custom amount and wallet timeout with QR fallback

Custom Amount Input:
- Change custom amount input from w-24 to flex-1
- Now takes full remaining width in flex row
- Better UX on smaller screens and more obvious input field

Wallet Payment Timeout Handling:
- Add 30 second timeout to wallet payments using Promise.race
- On timeout, automatically show QR code as fallback
- Add paymentTimedOut state to track timeout condition
- Toast warning when payment times out

Retry with Wallet Feature:
- Add handleRetryWallet function to retry timed out payment
- Show "Retry with Wallet" button in QR dialog when timed out
- Button only appears if wallet is connected and payment capable
- Retry uses same 30s timeout, shows error if fails again
- Provides loading state with spinner during retry

User Flow:
1. User attempts wallet payment
2. If timeout after 30s, shows QR code automatically
3. User can scan QR to pay manually OR
4. User can click "Retry with Wallet" to try again
5. If retry times out, stays on QR for manual payment

Implementation Details:
- Promise.race between payInvoice and 30s timeout
- Timeout throws Error("TIMEOUT") for easy detection
- QR dialog conditionally shows retry button
- Retry resets state and attempts payment again
- Console logging for debugging timeout issues

All tests passing (939 passed)
Build successful

* feat: production-ready zaps with manual close and profile integration

Payment Flow Improvements:
- Remove auto-close after successful payment
- Change "Zap Sent!" button to "Done" button that requires user click
- User must manually close window by clicking Done after payment
- Retry payment also requires manual close after success

Profile Viewer Integration:
- Add Zap icon next to lightning address in ProfileViewer
- Click zap icon to open ZapWindow for that profile
- Yellow icon with hover effect for visual feedback
- Integrates seamlessly with existing profile UI

Production Cleanup:
- Remove all debug console.log statements
- Keep console.error for production error logging
- Remove unused emojiService variable from useEmojiSearch
- Fix Loader2 className typo (animate-spin)
- Clean code ready for production deployment

User Experience:
1. View profile with lightning address
2. Click yellow zap icon to open zap window
3. Enter amount and optional comment
4. Pay with wallet (or QR code if timeout)
5. See success message
6. Click "Done" to close window (manual control)

Testing:
- All lint checks pass (no errors, only warnings)
- TypeScript build successful
- All 939 tests passing
- Production-ready code

Code Quality:
- No debug logging in production
- Proper error handling maintained
- Clean, maintainable code
- Follows project conventions

* fix: remove duplicate zapTitle condition in DynamicWindowTitle

Removed duplicate zapTitle if-else branch at line 870 that was causing
lint error. The first zapTitle condition at line 803 handles all cases,
making the second occurrence unreachable.

* feat: improve zap UX with inline QR and faster imports

- Move imports to top level instead of dynamic imports for faster resolution
- Show QR code inline in ZapWindow instead of separate dialog
- Show recipient name and address when not zapping an event
- Make Lightning address clickable in ProfileViewer with icon on left
- Use recipientName consistently throughout zap flow

This significantly reduces the "Resolving Lightning address..." delay and
provides a cleaner, more integrated UX for viewing and paying invoices.

* feat: optimize zap UX with better error handling and UI improvements

LNURL improvements:
- Add 10s timeouts to Lightning address resolution and invoice fetching
- Better error messages with more context (response status, error text)
- Handle AbortError for timeout scenarios

UI improvements:
- Bigger amount buttons (default size instead of sm)
- Custom amount on separate line for better layout
- Disable all zap UI when recipient has no Lightning address
- Show clear warning when Lightning address is missing
- Only show comment editor when Lightning address is available

Toast cleanup:
- Remove chatty info toasts ("Resolving...", "Creating...", "Fetching...")
- Only show errors and success messages
- Cleaner, less noisy UX

This addresses common issues with LNURL requests timing out and makes
the UI more responsive and informative when zaps cannot be sent.

* feat: full-width custom amount and wallet timeout with QR fallback

QR code improvements:
- Add profile picture overlay in center of QR code (25% size, circular)
- Remove redundant "Copy Invoice" button (keep icon button only)
- Show "Open in Wallet" as full-width button

UI improvements:
- Use UserName component everywhere (clickable, styled, shows Grimoire members)
- Custom amount now full-width on separate line
- Better visual hierarchy

Default amounts updated:
- Changed from [21, 100, 500, 1000, 5000, 10000]
- To [21, 420, 2100, 42000]
- More aligned with common zap amounts

The profile picture overlay helps users identify who they're zapping
while maintaining QR code scannability. UserName component provides
consistent styling and clickable profile links.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-18 23:19:11 +01:00
Alejandro
e6e663c3d8 feat: add separate gradients for Grimoire members based on login state (#138) 
* feat: add separate gradients for Grimoire members based on login state

Updates the UserName component to display different gradient colors for
Grimoire members depending on whether they are the logged-in user:
- Orange-yellow gradient for logged-in Grimoire members (current user)
- Purple-blue gradient for other Grimoire members (not logged in)

This visual distinction makes it easier to identify your own username
versus other Grimoire members in feeds and conversations.

* refine: make blue tone more subtle in Grimoire member gradient

Changes the non-logged-in Grimoire member gradient from cyan-500 to
blue-400 for a softer, more subtle blue tone on the bottom-right
diagonal of the gradient.

* refine: reposition blue to match yellow placement in gradients

Rearranges the purple-blue gradient to start with blue-400 (matching
the top-left position of yellow-500 in the orange-yellow gradient) and
transition through purple-500 to purple-600.

Gradient order:
- Logged-in: yellow → orange → orange
- Other members: blue → purple → purple

* refine: adjust purple tones to match accent color

Updates the gradient to use purple-400 and purple-500 (instead of
purple-500 and purple-600) to better match the accent purple (HSL 270
100% 70%) used for regular usernames in dark mode.

Final gradient: blue-400 → purple-400 → purple-500

* refine: improve gradients to match theme colors and work across themes

Updates both Grimoire member gradients to better align with their
non-member equivalents while ensuring visibility in both light and dark themes:

**Logged-in gradient** (orange-dominant to match highlight color):
- Changed: yellow-500 → orange-500 → orange-600
- To: orange-400 → orange-500 → amber-600
- Matches highlight (HSL 25 90% 35% light, 27 96% 61% dark)

**Non-logged-in gradient** (purple-dominant to match accent color):
- Changed: blue-400 → purple-400 → purple-500
- To: violet-500 → purple-500 → fuchsia-600
- Matches accent (HSL 270 100% 70% dark)
- More saturated to stand out in light theme

Both gradients now maintain their primary colors while being more
visible and consistent across light and dark themes.

* feat: add 4-color gradients with bright highlights for classy look

Enhances both Grimoire member gradients with a subtle bright color at
the top for a more stylish, classy appearance:

**Logged-in gradient:**
- yellow-300 → orange-400 → orange-500 → amber-600
- Bright yellow shimmer at top, deepening to amber

**Non-logged-in gradient:**
- violet-400 → violet-500 → purple-500 → fuchsia-600
- Lighter violet glow at top, transitioning to purple-pink

The 4-color gradients add depth and sophistication while maintaining
the theme color alignment (orange for highlight, purple for accent).

* refine: simplify to elegant 2-color gradients and add badge check icon

Simplifies Grimoire member styling for a more elegant appearance:

**Gradient changes:**
- Direction: bg-gradient-to-br → bg-gradient-to-tr (diagonal from top-left)
- Logged-in: Simplified to orange-400 → amber-600 (warm elegant gradient)
- Non-logged-in: Simplified to violet-500 → fuchsia-600 (cool elegant gradient)

**Badge check icon:**
- Added BadgeCheck icon after member names
- Icon scales automatically with username size using w-[1em] h-[1em]
- Provides visual verification of Grimoire membership

The simpler 2-color gradients with top-right direction create a more
refined, classy look while the badge check adds instant recognition.

* fix: make BadgeCheck icon visible by separating from gradient text

The badge icon was invisible because it inherited the text-transparent
class from the parent span. Fixed by:

- Moving gradient styling to only the displayName span
- Giving BadgeCheck its own explicit color (orange-500 for logged-in,
  violet-500 for others)
- Icon now properly visible and color-coordinated with the gradient

* feat: add subtle gradient to BadgeCheck icon matching username

The badge icon now has its own subtle gradient that continues from
the username gradient's ending color:

- Logged-in: amber-600 → amber-400 (darker to brighter amber)
- Others: fuchsia-600 → fuchsia-400 (darker to brighter fuchsia)
- Both use bg-gradient-to-tr direction to match username

This creates a cohesive visual flow where the gradient subtly
continues from the username into the verification badge.

* fix: use solid colors for BadgeCheck icon (gradients don't work on SVG)

The bg-clip-text technique only works on actual text elements, not SVG
paths. Reverted to solid colors that complement the gradient themes:

- Logged-in: text-amber-500 (matches the amber gradient tones)
- Others: text-fuchsia-500 (matches the fuchsia gradient tones)

The icon is now visible and color-coordinated with the username gradients.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-18 22:27:24 +01:00
Alejandro
582596df47 feat: display lightning address in NWC wallet info and clean up UI (#142) 
- Add lightning address (lud16) display in wallet info dropdown
- Remove redundant "Connected" text from wallet heading
- Keep status indicator icon for cleaner, more compact UI

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-18 22:25:44 +01:00
Alejandro
c94203852e feat: detect and display zap payments in NWC wallet viewer (#140) 
* feat: detect and display zap payments in NWC wallet viewer

Add intelligent zap payment detection and enhanced display in the NWC wallet transaction list and detail views.

Changes:
- Add wallet-utils.ts with zap request parsing (kind 9734 detection)
- Parse zap requests from transaction descriptions with LRU caching (500 entry limit)
- Display username + message preview in transaction list with ⚡ indicator
- Show full zap details in transaction detail dialog:
  - Zapper name (clickable UserName component)
  - Full zap message with RichText formatting
  - Zapped post rendered inline using KindRenderer
  - Loading states for event fetching
- Follow React Hooks rules (unconditional hook calls)
- Type-safe implementation with proper pointer handling

Technical notes:
- parseZapRequest() extracts sender, message, and event pointers from JSON-embedded zap requests
- Caching prevents redundant JSON parsing on re-renders
- Supports both event IDs (e tag) and address coordinates (a tag)
- parseAddressCoordinate() handles kind:pubkey:identifier format

* refactor: use applesauce caching pattern and RichText for zaps

Improvements:
- Replace Map-based cache with getOrComputeCachedValue pattern
  - Cache parsed zap requests on transaction objects using Symbol
  - Follows applesauce convention for computed value caching
  - More memory-efficient than global Map cache
- Use RichText component for zap messages in transaction list
  - Supports links, mentions, and other rich formatting
  - CSS truncation instead of JS string manipulation
- Update parseZapRequest to accept transaction object instead of description string
  - Enables proper caching on the transaction object
  - Cleaner API surface

Technical changes:
- Remove getZapMessagePreview() helper (now using CSS truncate)
- Add getOrComputeCachedValue import from applesauce-core/helpers
- Update all parseZapRequest call sites to pass transaction object
- Wrap zap message in RichText component for proper formatting

* feat: enhance zap display with RichText context and scrollable details

Improvements:
- Pass zap request event as context to RichText components
  - Enables proper mention/link resolution in zap messages
  - Supports interactive elements (mentions, hashtags, links)
  - Provides full event context for rendering
- Make transaction detail dialog scrollable
  - Add max-h-[90vh] to DialogContent with flex layout
  - Wrap content in overflow-y-auto container with max-h-[calc(90vh-8rem)]
  - Prevents dialog overflow when displaying large zapped posts
  - Smooth scrolling for long zap message threads
- Reduce transaction page size from 20 to 10
  - Better performance with rich zap rendering
  - Faster initial load and scroll rendering
  - Reduces memory footprint for transaction list

Technical changes:
- Add zapRequestEvent field to ZapRequestInfo interface
- Pass zapRequestEvent to all RichText components rendering zap messages
- Update BATCH_SIZE constant from 20 to 10
- Add flex layout to DialogContent for proper scrolling
- Add pr-2 padding to scrollable container for visual spacing

* revert: restore BATCH_SIZE to 20 transactions

* refactor: improve zap transaction list item UI

Changes:
- Use UserName component for zapper display (applies accent color)
- Remove colon separator between username and message
- Keep username and message on single line with proper truncation
- Remove unused imports (getDisplayName, useProfile)
- Reduce transaction detail dialog max height from 90vh to 70vh
  - More compact display for better UX
  - Prevents excessive white space

UI improvements:
- Zap icon + UserName (accent color) + message all on one line
- UserName component is flex-shrink-0 to prevent squishing
- Message text truncates with CSS overflow
- Cleaner, more compact visual hierarchy

* fix: improve spacing and truncation in zap transaction items

- Increase gap between username and message from gap-1 to gap-2 (0.5rem)
- Add min-w-0 to message span for proper ellipsis truncation in flex
- Remove duplicate truncate class from parent div to prevent conflicts
- Message now properly shows ellipsis (...) when it doesn't fit on one line

* feat: add line-clamp and expandable raw transaction view

Changes:
- Replace truncate with line-clamp-1 on zap message for proper single-line clamping
- Add expandable 'Show Raw Transaction' section in transaction detail dialog
  - Collapsible with ChevronRight/ChevronDown icons
  - Shows JSON.stringify(transaction, null, 2) in scrollable pre block
  - Uses CodeCopyButton component for consistent copy UX
  - Max height 60 (15rem) with overflow-y-auto for long transactions
- Add state management for raw transaction expansion and copy status
- Reset raw transaction state when dialog closes

UI improvements:
- Clean expansion interaction with hover effects
- Properly formatted JSON with 2-space indentation
- Accessible copy button with aria-label
- Auto-collapses when closing the dialog

* feat: parse zap requests from invoice description as fallback

Enhance zap request parsing to check multiple sources:
- First try transaction.description (primary source)
- If not found, decode the Lightning invoice and check its description field
- This handles cases where the zap request is embedded in the invoice

Changes:
- Extract parsing logic into tryParseZapRequestJson() helper
- Add invoice field to parseZapRequest() transaction parameter
- Import light-bolt11-decoder to decode invoices
- Try invoice description as fallback when tx description doesn't contain zap
- Maintain applesauce caching pattern on transaction object

This ensures zap payments are detected and displayed correctly regardless
of where the zap request JSON is stored (tx description vs invoice description).

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-18 21:52:44 +01:00
Alejandro
3172288ecf feat: use RelayLink component in wallet info dropdown (#139) 
Replace plain text relay URL with RelayLink component in WalletViewer's
info dropdown. This provides:
- Clickable relay URLs that open relay detail window
- Relay icon display (if available)
- Insecure relay warnings (ws://)
- Consistent styling with other relay displays

Also removes unused ExternalLink import.

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-18 20:28:46 +01:00
Alejandro
3408872811 feat: add comprehensive NWC wallet viewer with dynamic UI (#135) 
* feat: add comprehensive NWC wallet viewer with dynamic UI

Implements a full-featured Lightning wallet interface using Nostr Wallet
Connect (NWC/NIP-47) with method-based UI that adapts to wallet capabilities.

**New Features:**
- WalletViewer component with tabbed interface (Overview, Send, Receive, Transactions)
- Real-time balance display with manual refresh
- Send Lightning payments via BOLT11 invoices
- Generate invoices with QR codes for receiving payments
- Transaction history viewer (when supported by wallet)
- Wallet info and capabilities display
- Enhanced useWallet hook with additional NWC methods

**Enhanced Methods:**
- listTransactions() - View recent payment history
- lookupInvoice() - Check invoice status by payment hash
- payKeysend() - Direct keysend payments to node pubkeys

**UI Features:**
- Dynamic tabs based on wallet capabilities
- QR code generation for invoices
- Copy-to-clipboard for invoices
- Error handling with user-friendly messages
- Loading states for async operations
- Empty states for no wallet connection

**Command:**
- New `wallet` command to open the wallet viewer

**Technical Details:**
- Integrates with existing NWC service singleton
- Uses reactive balance$ observable for auto-updates
- Proper TypeScript types aligned with applesauce-wallet-connect
- Follows Grimoire patterns for window system integration
- Lazy-loaded component for optimal bundle size

All tests passing. Build verified.

* refactor: redesign wallet UI to single-view layout with virtualized transactions

Converts the tabbed wallet interface to a conventional single-view layout
with improved UX and performance optimizations.

**Layout Changes:**
- Removed tabs in favor of single-page layout
- Balance header at top with wallet name and refresh button
- Side-by-side Send/Receive cards for quick access
- Transaction history below with virtualized scrolling
- Disconnect button at bottom of page

**New Features:**
- Connect Wallet button when no wallet is connected (opens dialog in-app)
- Wallet capabilities shown in tooltip on info icon
- Virtualized transaction list using react-virtuoso
- Batched transaction loading (20 per batch)
- Automatic "load more" when scrolling to bottom
- Loading states for initial load and pagination
- "No more transactions" message when exhausted

**Performance Improvements:**
- Virtualized list rendering for smooth scrolling with many transactions
- Only renders visible transactions in viewport
- Lazy loads additional batches on demand
- Reduced initial load to 20 transactions instead of 50

**UX Improvements:**
- More conventional wallet UI pattern
- Send/Receive always visible (no tab switching)
- QR code and invoice appear inline when generated
- Info icon with tooltip for capabilities (cleaner than full card)
- Disconnect option always accessible at bottom

**Technical Details:**
- Fixed transaction loading race condition with separate useEffect
- Proper dependency tracking for loadMoreTransactions callback
- Footer component in Virtuoso for loading/end states
- Responsive grid layout for Send/Receive cards

All tests passing. Build verified.

* refactor: redesign wallet UI with ReqViewer-style header and dialogs

Implements a cleaner, more consistent wallet UI matching Grimoire patterns.

**Header Changes:**
- ReqViewer-style compact header (border-b, px-4, py-2, font-mono, text-xs)
- Left side: Wallet name · Balance with info tooltip
- Right side: Icon-only action buttons (Receive, Send, Refresh)
- All actions use tooltips for labels
- Consistent spacing and typography with rest of app

**Send/Receive as Dialogs:**
- Removed always-visible Send/Receive cards
- Converted to modal dialogs opened from header icons
- Send dialog: Invoice input + optional amount override
- Receive dialog: Two-step flow (generate → show QR + invoice)
- "Generate Another" button to create multiple invoices without closing
- Cleaner main view focused on transaction list

**Transaction List Cleanup:**
- Removed Card wrapper and extra padding
- Direct virtualized list fills viewport
- Removed "Transaction History" heading (redundant)
- Added flex-shrink-0 to prevent transaction items from shrinking
- Improved truncation handling for long descriptions
- Hover effect for better interactivity
- Footer messages use consistent border-b styling

**Disconnect Button:**
- Changed to destructive variant (red appearance)
- Moved to footer with border-t
- Full width for emphasis
- Clearer visual indication of destructive action

**UX Improvements:**
- More screen space for transactions (primary content)
- Consistent icon sizing (size-3 for header actions, size-4 for tx icons)
- Better visual hierarchy with header actions
- Dialog pattern matches other Grimoire components
- Receive dialog stays open to show generated invoice

**Technical Details:**
- Proper dialog state management
- Invoice QR with max-height scrolling for long invoices
- Reset form state when closing dialogs
- Maintained all existing functionality
- Optimized for virtualized scrolling performance

All tests passing. Build verified.

* feat: final wallet UI improvements with prominent balance and enhanced UX

Redesigns wallet viewer with cleaner layout and improved user experience.

**Layout Changes:**
- Big centered balance display (4xl font, prominent)
- Large Send/Receive buttons below balance (side by side)
- Single-line transaction items with better spacing
- Info dropdown next to refresh button in header

**Transaction List:**
- Single-line compact design (description + time + amount)
- No +/- signs on amounts (cleaner look)
- Generic "Payment"/"Received" labels when description missing
- Time displayed in compact format (HH:MM)
- Day markers between days (Today/Yesterday/Jan 15)
- Virtualized scrolling with batched loading

**Info Dropdown:**
- Wallet capabilities shown in dropdown (Info icon + ChevronDown)
- Network information
- Methods displayed as compact badges
- Notifications support

**User Menu Integration:**
- Wallet option always visible (regardless of account status)
- Clicking wallet opens wallet window (not info dialog)
- Balance shown inline when connected
- "Connect Wallet" option when not connected

**Dialog Improvements:**
- Send dialog with confirmation step
- Receive dialog with payment detection
- Auto-close on payment received
- QR code with loading overlay during payment check

**Visual Hierarchy:**
- Header: Wallet name (left) | Info dropdown + Refresh (right)
- Big centered balance with "sats" label
- Prominent action buttons (Send default, Receive outline)
- Clean transaction list with hover states
- Destructive disconnect button in footer

All tests passing ✅ Build verified ✅

* fix: replace AlertDialog with Dialog for disconnect confirmation

- AlertDialog component doesn't exist in UI library
- Use regular Dialog with custom footer buttons instead
- All 929 tests passing, build successful

* refine: wallet UI improvements based on feedback

- Remove "sats" text from balance display
- Swap send/receive button positions (receive left, send right)
- Remove top border from transaction list
- Remove timestamps from transaction list items
- Add relay link to wallet info dropdown with external link icon
- Change disconnect button to destructive color (always red)
- Fix imports and remove unused formatTime function

* feat: enhance send/receive flows with invoice parsing and auto-confirm

Send flow improvements:
- Parse BOLT11 invoices using light-bolt11-decoder
- Auto-proceed to confirm step when valid invoice is entered
- Show parsed amount and description in confirmation dialog
- Validate invoice before allowing confirmation

Receive flow improvements:
- Fix invoice overflow with proper truncate display
- Use nested div structure for single-line truncation

All changes preserve type safety with proper Section type guards

* feat: add Lightning address support and refine auto-confirm behavior

Send flow enhancements:
- Only auto-proceed to confirm if invoice has an amount (not for zero-amount invoices)
- Add Lightning address (LNURL-pay) support with automatic resolution
- Fetch invoice from Lightning address with amount validation
- Show "Resolving..." loading state when processing Lightning addresses
- Update UI labels and placeholders to indicate Lightning address support
- Require amount field for Lightning address payments

Lightning address flow:
1. Detect @ symbol in input (and not starting with "ln")
2. Validate amount is provided
3. Fetch LNURL-pay endpoint from .well-known/lnurlp/{username}
4. Check min/max sendable amounts
5. Request invoice from callback with specified amount
6. Parse and confirm invoice details

Error handling:
- Invalid Lightning address format
- Failed to fetch Lightning address
- Amount out of range (too small/too large)
- Failed to generate invoice from callback

* fix: UI improvements for wallet viewer and mobile receive flow

Confirmation dialog improvements:
- Remove yellow warning styles (border, background, icon)
- Fix amount calculation: show proper sats conversion with Math.floor
- Clean layout with key-value pairs instead of cluttered text
- Show either invoice amount OR override amount (not both)

Mobile receive flow improvements:
- Large prominent "Copy Invoice" button (h-12, full width)
- Invoice box now tappable to copy
- Better touch targets for mobile users
- Clearer label: "Invoice (tap to view)"

Connection status:
- Show green dot + "Connected" next to wallet name in header
- Clear visual feedback that wallet is online

Auto-launch wallet:
- After successfully connecting wallet, automatically open wallet window
- Added onConnected callback to ConnectWalletDialog
- Wire up callback in user menu to call openWallet

Code cleanup:
- Remove unused AlertTriangle import

* fix: correct amount handling and mobile invoice display

Amount input fixes:
- Changed from millisats to sats for user input
- Updated label: "Amount (sats, optional)"
- Fixed Lightning address resolution: no division, amount is already in sats
- Fixed payInvoice: multiply by 1000 to convert sats to millisats for NWC
- Fixed confirmation dialog: removed incorrect division by 1000

Before: User enters 1000 (meant as sats) → system treats as 1000000 millisats → sends 1000 sats
After: User enters 1000 sats → system converts to 1000000 millisats → sends 1000 sats ✓

Invoice parsing was correct - already converting millisats to sats.
The bug was in the confirmation display and amount submission.

Mobile receive invoice fix:
- Removed nested div with truncate (was causing overflow)
- Changed to break-all + line-clamp-2
- Invoice now wraps properly on mobile (2 lines max)
- Still tappable to copy

* fix: convert sats to millisats when generating invoices

Critical bug fix - we were generating nearly amountless invoices.

Before:
- User enters 1000 sats in UI
- We passed 1000 to makeInvoice (thinking it's millisats)
- Generated invoice for 1000 millisats = 1 sat

After:
- User enters 1000 sats in UI
- We multiply by 1000 → 1,000,000 millisats
- Generated invoice for 1,000,000 millisats = 1000 sats ✓

This matches the send flow where we also convert sats to millisats
before passing to NWC protocol.

* refactor: production-readiness improvements for WalletViewer

Critical fixes:
- Wrap loadWalletInfo and loadInitialTransactions in useCallback to prevent infinite loops
- Fix dependency arrays in useEffect hooks
- Fix early return bug in handleConfirmSend that left sending state stuck
- Add async/await error handling to handleCopyInvoice
- Change throw new Error instead of early return in Lightning address resolution

Performance optimizations:
- Removed duplicate function definitions (moved to useCallback hooks)
- Proper memoization of wallet loading functions

Code quality:
- All functions properly handle errors with try/catch
- Loading states properly reset in finally blocks
- No memory leaks from useEffect dependencies

* fix: prevent infinite transaction loading loop in WalletViewer

Previously, the transaction list would try to load constantly and fail
repeatedly due to a circular dependency in the useEffect hooks. The
listTransactions function from useWallet wasn't wrapped in useCallback,
causing loadInitialTransactions to be recreated on every render, which
triggered the useEffect infinitely.

Changes:
- Add txLoadAttempted and txLoadFailed flags to prevent repeated attempts
- Only attempt to load transactions once on wallet connection
- Fail silently on initial load (no toast spam)
- Show retry button when transaction loading fails
- Reset flags when wallet connects/disconnects or after successful payments
- Make transaction list truly optional - wallet still works if loading fails

This ensures a better UX when wallets don't support list_transactions
or when the method fails for any reason.

* fix: remove circular dependency in loadInitialTransactions

Removed txLoadFailed from the dependency array of loadInitialTransactions
callback, which was causing a circular dependency:
- loadInitialTransactions depended on txLoadFailed
- Function sets txLoadFailed, triggering recreation
- New function reference triggers useEffect again
- Infinite loop

The txLoadAttempted flag in the useEffect is sufficient to prevent
repeated loads. No need to check txLoadFailed inside the callback.

* fix: resolve React error #185 by removing callbacks from useEffect dependencies

React error #185 occurs when state updates happen during render due to
unstable function references in useEffect dependencies. The root cause
was that functions from useWallet (getInfo, listTransactions) aren't
memoized, so they create new references on every render, causing the
useEffects that depend on them to run repeatedly.

Changes:
- Removed loadWalletInfo and loadInitialTransactions callbacks
- Use refs (walletInfoLoadedRef, lastConnectionStateRef) to track state
- Call async functions directly in useEffect without depending on them
- Created reloadTransactions() helper that just resets flags
- Simplified all reload logic to use the helper

This ensures:
- No circular dependencies in useEffect
- Functions only run once when conditions are met
- No state updates during render
- Clean, predictable loading behavior

* fix: properly clear wallet state on disconnect and update copy

Changes:
- Clear all wallet state when disconnecting (transactions, walletInfo, loading flags)
- Previously only cleared state on connect, leaving stale data visible
- Remove "Mutiny" mention from connection dialog copy
- Update to generic "NWC wallet provider" text

Now when you disconnect the wallet with the window open, it properly
clears all data and returns to the "No Wallet Connected" state.

* fix: prevent wallet from auto-reconnecting after disconnect

The bug was in the useWallet hook which automatically restores the wallet
if nwcConnection exists in state but the wallet instance is null. When
disconnecting, it only cleared the wallet instance but left nwcConnection
in state, causing an immediate reconnection.

Fix:
- Call disconnectNWCFromState() to clear nwcConnection from Grimoire state
- Then call disconnect() to clear the wallet service
- This prevents the auto-restore logic from triggering

Now when you disconnect the wallet, it stays disconnected until you
manually reconnect.

* security: add critical production-ready security fixes

Invoice Validation & Expiry Checks:
- Validate BOLT11 invoice format (must start with 'ln')
- Check invoice expiry before displaying/processing
- Validate amount is reasonable (< 21M BTC)
- Surface parse errors to user with toast notifications
- Prevent processing of expired invoices

Lightning Address Security:
- Enforce HTTPS-only for LNURL-pay requests
- Add 5-second timeout to all HTTP requests
- Validate callback URLs use HTTPS
- Proper AbortController cleanup on timeout
- Better error messages for network failures

Rate Limiting:
- Balance refresh: minimum 2 seconds between calls
- Transaction reload: minimum 5 seconds between reloads
- User-friendly warning messages with countdown
- Prevents spam to wallet service providers

Storage Security Warning:
- Add prominent security notice in ConnectWalletDialog
- Warn users about browser storage implications
- Advise to only connect on trusted devices

Capability Detection:
- Hide Send button if wallet doesn't support pay_invoice
- Hide Receive button if wallet doesn't support make_invoice
- Dynamic button rendering based on wallet capabilities
- Prevents errors from unsupported operations

Error Handling:
- WindowErrorBoundary already wraps all windows (verified)
- Proper error propagation with user-friendly messages
- No silent failures on critical operations

These changes significantly improve security and production-readiness
without breaking existing functionality.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-18 20:05:19 +01:00
Alejandro
1756715e30 feat: add site icon and favicon (#137) 
* feat: add site icon and favicon

- Downloaded and cropped Grimoire icon from nostr.build
- Created multiple favicon sizes (16x16, 32x32, 180x180, 512x512)
- Generated traditional .ico format and PNG variants
- Added Apple touch icon for iOS devices
- Updated index.html with proper favicon links

* feat: make Grimoire installable as a PWA

- Created web manifest (site.webmanifest) with app metadata
  - Added app name, description, theme colors
  - Configured standalone display mode for native-like experience
  - Included all required icon sizes (192x192, 512x512)
  - Added keyboard shortcut for command palette
- Generated 192x192 icon for PWA requirements
- Added manifest and theme-color meta tags to index.html
- Implemented service worker (sw.js) for offline functionality
  - Network-first caching strategy for optimal performance
  - Precaches core assets on install
  - Provides offline fallback for navigation requests
- Registered service worker in main.tsx

Users can now install Grimoire as a standalone app on desktop and mobile devices.

* fix: properly configure maskable PWA icons

The previous configuration incorrectly marked regular icons as "maskable",
which would cause them to be cropped when displayed in circular or rounded
shapes on Android devices.

Changes:
- Created dedicated maskable icons with 10% padding (safe zone)
- Maskable icons use dark background (#020817) matching app theme
- Separated "any" and "maskable" purposes in manifest
- Regular icons (192x192, 512x512) use full space with purpose="any"
- Maskable icons (192x192-maskable, 512x512-maskable) have padding with purpose="maskable"

This ensures icons display correctly in all contexts:
- Regular icons for browser tabs, shortcuts, splash screens
- Maskable icons for adaptive icon shapes on Android

* chore: simplify PWA manifest

- Simplify name to just 'Grimoire'
- Add 'nostr' to categories for better discoverability
- Remove shortcuts (not needed for initial launch)

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-18 18:39:07 +01:00
Alejandro
b70eb82fea feat: add @domain alias for NIP-05 domain directory resolution (#136) 
Add support for @domain syntax in req and count commands to query all
users from a domain's NIP-05 directory (e.g., @habla.news).

Features:
- Fetches /.well-known/nostr.json from domain
- Extracts all pubkeys from the names object
- Works with -a (authors), -p (#p tags), and -P (#P tags) flags
- Supports mixed usage with npub, hex, NIP-05, $me, $contacts
- 5-minute caching for domain lookups
- UI display in ReqViewer query dropdown

Implementation:
- Added resolveDomainDirectory and resolveDomainDirectoryBatch to nip05.ts
- Updated req-parser and count-parser to detect @domain syntax
- Updated argParsers in man.ts to resolve domains asynchronously
- Updated ReqViewer to display queried domains in dropdown
- Added comprehensive tests for domain resolution

Examples:
- req -k 1 -a @habla.news
- req -k 7 -p @nostr.band
- count relay.damus.io -k 1 -a @getcurrent.io

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-18 14:49:37 +01:00
Alejandro
4d90aab83c feat: add Grimoire member system with special NIP-05 usernames (#134) 
* feat: add Grimoire member system with special NIP-05 usernames

Implements a member verification system for Grimoire project contributors
with custom usernames and visual badges.

Features:
- Member registry with pubkey to username mapping
- _ (underscore) username for ce3cd5ba...
- verbiricha username for 7fa56f5d...
- Special @grimoire.pro NIP-05 style display
- BookOpen icon badge for verified members
- Integration with UserName and NIP-05 components
- Comprehensive test suite for member utilities

The system prioritizes Grimoire member usernames over regular NIP-05
identifiers and adds visual badges throughout the UI for member recognition.

* chore: update TypeScript build info

* feat: configure NIP-05 verification for grimoire.rocks domain

Updates Grimoire member system to use grimoire.rocks domain and adds
proper NIP-05 verification infrastructure.

Changes:
- Update member NIP-05 identifiers from @grimoire.pro to @grimoire.rocks
- Create public/.well-known/nostr.json with member pubkey mappings
- Configure Vercel to serve nostr.json with proper headers:
  - Content-Type: application/json
  - Access-Control-Allow-Origin: * (required for NIP-05)
  - Cache-Control: public, max-age=3600
- Update rewrites to exclude .well-known paths from SPA routing

This enables NIP-05 verification for:
- _@grimoire.rocks → ce3cd5ba...
- verbiricha@grimoire.rocks → 7fa56f5d...

* refactor: integrate Grimoire member styling into UserName component

Simplifies the member system by removing the separate GrimoireUsername
component and handling everything directly in UserName.

Changes:
- UserName now checks isGrimoireMember and displays special styling
- Grimoire members show with yellow-orange gradient (from-yellow-400 to-orange-500)
- Member username displayed as "username@grimoire.rocks"
- Removed GrimoireUsername and GrimoireBadge components
- Updated nip05 to skip display for Grimoire members (UserName handles it)

This consolidates the logic and creates a cleaner, more maintainable
architecture where UserName is the single source of truth for all
username displays.

* feat: update _ member pubkey and show username only with gradient

Updates Grimoire member system to use the correct nprofile for _ and
displays member usernames without the @grimoire.rocks suffix.

Changes:
- Update _ member pubkey to 60dfe8bda... (from nprofile with relay hints)
- UserName component now shows just the username for Grimoire members
- Yellow-orange gradient styling applied to member usernames
- Updated nostr.json with new _ pubkey
- Fixed all tests to use correct pubkeys

Member usernames now display as:
- "_" with gradient (not "_@grimoire.rocks")
- "verbiricha" with gradient (not "verbiricha@grimoire.rocks")

* feat: update _ member pubkey and add diagonal gradient styling

Updates the _ member pubkey and enhances the visual styling with a more
stylish diagonal gradient effect.

Changes:
- Update _ member pubkey to c8fb0d3a... (new pubkey)
- Change gradient from horizontal to diagonal (bg-gradient-to-br)
- Add middle color stop (via-orange-400) for smoother gradient
- Updated nostr.json with new _ pubkey
- Updated all tests with correct pubkey
- Chat system already uses UserName component (verified)

Member usernames now display with a vibrant yellow-to-orange diagonal
gradient that flows from top-left to bottom-right with smooth transitions.

* refactor: show profile username with theme-aware gradient

Updates UserName component to display the user's actual profile name
instead of the Grimoire username, while still applying gradient styling
to Grimoire members. Also improves gradient colors for better visibility
across all themes.

Changes:
- Always use profile name from getDisplayName (not Grimoire username)
- Grimoire members still get gradient styling applied to their profile name
- Updated gradient colors to darker shades for better contrast:
  - from-yellow-500 (was yellow-400)
  - via-orange-500 (was orange-400)
  - to-orange-600 (was orange-500)
- Removed unused getGrimoireUsername import

The darker gradient colors (#eab308 → #f97316 → #ea580c) provide better
readability on both light and dark themes while maintaining the vibrant
yellow-to-orange diagonal effect.

* chore: simplify and fix tests for production readiness

Removes redundant test file and updates comments for accuracy.

Changes:
- Remove src/lib/nip05.test.ts (tested nprofile decoding not used in implementation)
- Update comments in grimoire-members.ts:
  - Change "@grimoire.pro" references to "@grimoire.rocks"
  - Remove outdated "verification badges" mentions
  - Clarify that members get "gradient styling" not badges

The member system is now cleaner and production-ready with:
- Hardcoded member pubkeys in grimoire-members.ts
- NIP-05 verification served via public/.well-known/nostr.json
- Gradient styling applied to member usernames via UserName component
- Proper test coverage via grimoire-members.test.ts

* chore: remove grimoire-members test file

Removes test file as part of simplifying the codebase for production.
The member system is simple enough that it doesn't require dedicated tests.

* fix: show profile NIP-05 for Grimoire members

Removes the check that was hiding NIP-05 for Grimoire members.
Members now display whatever NIP-05 they have in their profile,
just like everyone else, while still getting gradient username styling.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-18 12:54:50 +01:00
Alejandro
7fae344dd9 feat: add Nostr Wallet Connect (NWC) integration (#131) 
* feat: add Nostr Wallet Connect (NWC) integration

Add NWC (NIP-47) support to connect Lightning wallets:
- Add NWCConnection type and state management
- Implement custom NWC client service for wallet communication
- Create ConnectWalletDialog for entering connection strings
- Add wallet button to user menu showing balance
- Display wallet info (balance, alias) in user menu dropdown
- Support get_info, get_balance, pay_invoice, make_invoice commands
- Persist wallet connection to localStorage
- Install applesauce-wallet (for future NIP-60 support)

Note: Current implementation uses custom NWC client. Can optionally
switch to @getalby/sdk for official Alby SDK support.

* refactor: use applesauce-wallet-connect and move wallet to header

Replace custom NWC client implementation with applesauce-wallet-connect:
- Install applesauce-wallet-connect for official NIP-47 support
- Create nwc.ts service wrapper for WalletConnect singleton
- Update NWCConnection type to match WalletConnectURI interface
- Use service/relays/secret properties instead of custom names

Move wallet display from user menu to header:
- Create standalone WalletButton component
- Add WalletButton to header next to UserMenu
- Remove wallet UI from user menu dropdown
- Show balance in header with yellow zap icon
- Clicking wallet button opens connect dialog

This provides better UX with wallet status visible in header
and uses the official applesauce implementation for reliability.

* feat: improve wallet button UX and add detailed info dialog

UI improvements:
- Remove border and padding from wallet button (use ghost variant)
- Remove "sats" suffix from balance display (show just the number)
- Change click behavior to show detailed wallet info dialog

Wallet info dialog:
- Show balance prominently without suffix
- Display wallet alias if available
- Show lightning address (lud16) if present
- List all supported NWC methods as badges
- Display connected relay URLs
- Add disconnect button with confirmation toast

This provides a cleaner header appearance and better wallet
management with all details accessible in one place.

* refactor: move wallet functionality to user menu

Move wallet connection and info from separate header button into
the user menu dropdown for better organization.

Changes:
- Remove standalone WalletButton component
- Add wallet section to user menu dropdown
- Show "Connect Wallet" option when no wallet is connected
- Display wallet balance and alias when connected
- Clicking wallet info opens detailed dialog with:
  - Balance (without suffix)
  - Wallet name/alias
  - Lightning address (lud16)
  - Supported NWC methods
  - Connected relay URLs
  - Disconnect button

This consolidates all user-related settings (account, relays,
blossom servers, wallet) in one consistent location.

* feat: improve wallet UX with profile-based naming and better layout

UX improvements:
- Use service pubkey username/profile as wallet name instead of alias
- Remove format hint text from connection string input
- Move wallet to single row directly below user name (remove label)
- Use RelayLink component for relay URLs in wallet info dialog
- Show wallet name from service profile with fallback to alias/pubkey

This provides better integration with Nostr profiles and a cleaner,
more compact menu layout. The wallet service provider's identity is
now shown using their actual Nostr profile name.

* feat: add persistent wallet service with auto-updating balance

Implement comprehensive NWC wallet management architecture:

**Service Layer** (`src/services/nwc.ts`):
- Maintain singleton WalletConnect instance across app lifetime
- Poll balance every 30 seconds for automatic updates
- Subscribe to NIP-47 notifications (kind 23197) for real-time updates
- Expose RxJS observable (balance$) for reactive balance changes
- Restore wallet from saved connection on app startup
- Proper cleanup on disconnect

**Hook Layer** (`src/hooks/useWallet.ts`):
- useWallet() hook exposes wallet throughout the app
- Provides methods: payInvoice, makeInvoice, getBalance, etc.
- Auto-syncs balance updates with Jotai state
- Handles wallet restoration on mount
- Type-safe wrapper around WalletConnect API

**UI Updates**:
- Add refresh button to wallet info dialog
- Auto-update balance display when transactions occur
- Proper cleanup on wallet disconnect

**Architecture**:
```
User Action → useWallet() → NWC Service → WalletConnect
                ↓                ↓
         Update State ← balance$ observable ← Polling/Notifications
```

This enables:
- Real-time balance updates when paying/receiving
- Easy wallet access: `const { payInvoice, balance } = useWallet()`
- Persistent connection across page reloads
- Automatic polling as fallback for notifications

* refactor: make NWC fully reactive with notifications and graceful balance handling

Changes:
- Remove polling mechanism in favor of pure reactive notifications$ observable
- Subscribe to wallet.notifications$ for real-time balance updates
- Make balance display conditional (only show if available)
- Fix TypeScript errors (notification.type access, unused variable)
- Remove Jotai callback mechanism for balance updates
- Use use$() directly for reactive balance subscription
- Update comments to reflect reactive architecture (no polling)

The wallet now updates balance automatically when payments are sent/received
via NIP-47 notifications, with no polling overhead.

* feat: improve wallet UX with profile-based naming and better layout

Improvements to NWC wallet UI:
- Add separator between user info and wallet section in menu
- Show wallet icon instead of zap icon for better clarity
- Display connection status indicator (green/red dot) in both menu and dialog
- Make wallet service username clickable in wallet info dialog to open profile
- Use wallet relays as hints when fetching service profile for better resolution
- Enhanced useProfile hook to accept optional relay hints parameter

The wallet now properly resolves service profiles using the NWC relay
and shows visual connection status at a glance.

* fix: remove toast descriptions for better contrast

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-18 11:14:47 +01:00
Alejandro
c7cced2a9e feat: improve badges display with images and limited count (#128) 
- Add badge image display to BadgeDefinitionRenderer feed items
  - Shows badge image/icon (16x16) with name and description
  - Falls back to Award icon if no image available
- Limit ProfileBadgesRenderer to show max 5 badges with "& n more" pattern
  - Prevents overcrowded feeds when users have many badges
  - Maintains clickability to see full list in detail view
- Rename "Badge definition" to "Badge" for clearer user-facing text
  - Updated constants/kinds.ts and nostr-kinds-schema.yaml
  - Simplifies terminology (kind 30009 is just "Badge" not "Badge definition")

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-17 21:41:05 +01:00
Alejandro
9282e45910 feat: Add npm install step to verify skill (#127) 
Add npm install as the first step in the verification suite to ensure
all dependencies are installed before running lint, tests, and build.
This prevents failures due to missing or outdated dependencies.

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-17 21:39:35 +01:00
Alejandro
ee2b62f2d6 feat: enhance login options with read-only and nsec support (#126) 
* feat: enhance login options with read-only and nsec support

- Add read-only login mode supporting:
  - npub (bech32 public key)
  - nprofile (bech32 profile with relay hints)
  - hex public key
  - NIP-05 addresses (user@domain.com)

- Add private key (nsec) login with security warning
  - Supports nsec1... format
  - Supports 64-char hex private key
  - Shows prominent security warning about localStorage storage

- Reorganize user menu to show login before theme option

- Use ReadonlyAccount from applesauce-accounts for read-only mode
- Use PrivateKeyAccount from applesauce-accounts for nsec login
- Update LoginDialog with 4 tabs: Extension, Read-Only, Private Key, Remote
- All account types properly registered via registerCommonAccountTypes()

Technical notes:
- ReadonlySigner throws errors on sign/encrypt operations
- Existing components naturally handle accounts without signing capability
- Hub/ActionRunner already syncs with account signers automatically

* feat: add generate identity button to login dialog

- Add "Generate Identity" button above login tabs
- Uses Wand2 icon from lucide-react
- Creates new key pair using PrivateKeyAccount.generateNew()
- Automatically stores nsec in localStorage and sets as active account
- Provides quick onboarding for new users without external wallet setup

* feat: add useAccount hook for signing capability detection

Created a centralized hook to check account signing capabilities and
refactored components to distinguish between signing and read-only operations.

New hook (src/hooks/useAccount.ts):
- Returns account, pubkey, canSign, signer, isLoggedIn
- Detects ReadonlyAccount vs signing accounts
- Provides clear API for checking signing capability

Refactored components:
- ChatViewer: Use canSign for message composer, replying, actions
  - Show "Sign in to send messages" for read-only accounts
  - Disable message input for accounts without signing
- SpellDialog: Use canSign for publishing spells
  - Show clear warning for read-only accounts
  - Updated error messages to mention read-only limitation
- useEmojiSearch: Use pubkey for loading custom emoji lists
  - Works correctly with both signing and read-only accounts

Benefits:
- Clear separation between read (pubkey) and write (canSign, signer) operations
- Read-only accounts can browse, view profiles, load data
- Signing operations properly disabled for read-only accounts
- Consistent pattern across the codebase for account checks
- Better UX with specific messages about account capabilities

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-17 21:14:44 +01:00
Alejandro
5300d87d53 feat: Add Grimoire welcome chat to suggested commands (#125) 
Add "chat groups.0xchat.com'NkeVhXuWHGKKJCpn" as the first suggested command on the welcome screen to help new users discover and join the Grimoire community chat.

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-17 20:47:39 +01:00
Alejandro
14c73c07a3 feat: Add NIP-58 Badge Definition renderers (#123) 
* feat: Add NIP-58 Badge Definition renderers

Implement feed and detail renderers for kind 30009 Badge Definition events.

- Add nip58-helpers.ts with badge metadata extraction functions
- Create BadgeDefinitionRenderer for compact feed view
- Create BadgeDefinitionDetailRenderer with award statistics
- Register both renderers in kinds registry

Badge definitions display:
- Badge image or Award icon fallback
- Badge name, description, and identifier
- In detail view: issuer, award count, recipients, image variants
- Automatically queries for badge awards (kind 8) to show stats

Follows existing renderer patterns (ZapstoreApp, EmojiSet) with
reactive queries using useLiveTimeline and cached helpers.

* refactor: Simplify badge renderers

Simplify NIP-58 badge renderers based on feedback:
- Rename "badge definition" to "badge" in comments and docs
- Remove image and ID from feed view (show only name + description)
- Remove award statistics fetching/display from detail view
- Remove badge address section from detail view

Feed view now shows minimal info (name, description) while detail
view focuses on badge metadata and image variants without external queries.

* feat: Add NIP-58 Badge Award renderers (kind 8)

Implement feed and detail renderers for Badge Award events that:
- Fetch and display badge metadata (thumbnail, name)
- Show recipient count in feed view ("Awarded to n people")
- Display full recipient list with usernames in detail view
- Link badge thumbnail and name to the badge event (kind 30009)
- Support award comments in detail view

Technical details:
- Parse badge address from "a" tag (30009:pubkey:identifier format)
- Fetch badge event reactively using eventStore.replaceable
- Use AddressPointer from nostr-tools/nip19 for type safety
- Register kind 8 in both feed and detail renderer registries

Also updates all "badge definition" terminology to just "badge"
in code comments for consistency with user-facing strings.

* refactor: Make badge award feed view more compact

Change BadgeAwardRenderer to display inline compact format:
- Small thumbnail (size-6) inline with text
- Badge name linked to badge event
- "awarded to n people" linked to award event (clickable)
- All elements in single line with flex-wrap for overflow

Layout: [thumbnail] badge-name awarded to n people

* feat: Show username when badge awarded to single person

Update BadgeAwardRenderer to display the recipient's username
when only 1 person is awarded the badge, instead of "1 person".

- Single recipient: "awarded to @username"
- Multiple recipients: "awarded to n people"

Uses UserName component for proper profile name resolution.

* feat: Add NIP-58 Profile Badges renderer (kind 30008)

- Add ProfileBadgesRenderer for feed view showing first 4 badges with count
- Add ProfileBadgesDetailRenderer for detail view showing all badges in grid
- Add getProfileBadgePairs helper to extract badge pairs from events
- Adjust BadgeAwardRenderer icon size from 6 to 5 and spacing to gap-1.5
- Register kind 30008 in both feed and detail renderer registries

Completes NIP-58 implementation with all three event types:
- Kind 8: Badge Awards
- Kind 30009: Badge Definitions
- Kind 30008: Profile Badges (this commit)

* refactor: Improve Profile Badges UX

Feed view:
- Show all badge thumbnails (removed 4-badge limit)
- Entire feed item is clickable to open detail view
- Badge count displayed inline

Detail view:
- Change from grid to vertical list layout
- Show one badge per row with horizontal layout
- Display: awarded by author, badge image, name, and description
- Better readability for badge information

* refactor: Improve Profile Badges layout and hierarchy

Feed view:
- Badge count now appears as clickable title
- Thumbnails displayed below title in separate row
- Better visual hierarchy and clearer affordance

Detail view:
- Increase badge images from size-16 to size-24
- Remove "Awarded by" label, show issuer directly
- Cleaner, more prominent badge presentation

* feat: Add Badge Awards (kind 8) to chat as system messages

Implemented NIP-58 badge award rendering in chat adapters:

Chat types (src/types/chat.ts):
- Add kind 8 to CHAT_KINDS array
- Add badgeAddress and awardedPubkeys to MessageMetadata

NIP-29 adapter (src/lib/chat/adapters/nip-29-adapter.ts):
- Include kind 8 in message filters
- Convert badge awards to system messages
- Extract badge metadata (address, recipients)

ChatViewer (src/components/ChatViewer.tsx):
- Add BadgeAwardSystemMessage component
- Parse badge address and fetch badge definition
- Render: "* username awarded 🏅 badge-name to username(s)"
- Show badge icon/image inline with badge name

Badge awards now appear as system messages showing issuer, badge
icon, badge name, and recipients in a clean horizontal layout.

* feat: Add Badge Awards (kind 8) to NIP-53 live chat

Extended badge award system messages to NIP-53 live streaming chats:

NIP-53 adapter (src/lib/chat/adapters/nip-53-adapter.ts):
- Import getAwardedPubkeys and getTagValues helpers
- Add kind 8 to message filters (loadMessages and loadMoreMessages)
- Add badge award handler in eventToMessage
- Convert to system messages with badge metadata

Badge awards from stream hosts now appear in live chat as system
messages, showing issuer, badge icon, and recipients in real-time.

* Revert "feat: Add Badge Awards to chat"

This reverts commits:
- 1686a94 feat: Add Badge Awards (kind 8) to NIP-53 live chat
- 909359f feat: Add Badge Awards (kind 8) to chat as system messages

Badge award rendering in chat will be implemented later.
This keeps the PR focused on Profile Badges (kind 30008) implementation.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-17 20:30:32 +01:00
KoalaSat
14d5255bce feat: Add P2P orders renderer and detail (#116) 2026-01-16 23:06:07 +01:00
Alejandro
97f18de358 feat: message reactions (#110) 
* Add subtle inline reactions to chat messages

Implements NIP-25 reaction display for chat messages with per-message lazy loading:

- Created MessageReactions component that independently loads kind 7 reactions
  for each message using EventStore timeline queries
- Displays reactions as tiny inline badges in bottom-right corner (doesn't affect
  message height)
- Aggregates reactions by emoji with deduplication by pubkey
- Supports both unicode emoji and NIP-30 custom emoji with images
- Shows reaction count next to each emoji
- Integrated into both regular user messages and zap messages in ChatViewer
- Reactions load reactively - new reactions appear automatically via EventStore
  observables

No "+" button for adding reactions yet - this is display-only for now.
Works with NIP-29 groups and will work with any chat protocol that uses
kind 7 reactions with e-tags.

* Fix reaction loading to use protocol-specific relay hints

Previously MessageReactions was only querying EventStore without actually
fetching reactions from relays. Now it properly:

- Starts a relay subscription per message to fetch kind 7 reactions
- Uses protocol-specific relay hints via getConversationRelays() helper:
  * NIP-29 groups: Single relay from conversation.metadata.relayUrl
  * NIP-53 live chats: Multiple relays from conversation.metadata.liveActivity.relays
- Memoizes relay array in MessageItem to prevent unnecessary re-subscriptions
- Cleans up subscriptions when message unmounts or changes

This ensures reactions are actually fetched and displayed correctly across
different chat protocols.

* Remove unused NostrEvent import

* Move reactions inline after timestamp with subtler styling

Reactions now appear directly after the timestamp in the message header:
- Removed absolute positioning and background color
- Increased spacing between emoji and count (gap-1 instead of gap-0.5)
- Simple inline display with no border or background
- Appears in natural reading flow: "Alice  10:30 AM  ❤️ 3  👍 1"
- Removed relative positioning from message container (no longer needed)

This makes reactions much more subtle and integrated into the message UI.

* Add detailed tooltips to reactions showing who reacted

Each reaction badge now shows a tooltip with:
- Emoji and count on first line
- Comma-separated list of display names who reacted

Implementation:
- Split into ReactionBadge component per reaction
- Loads profiles for all reactor pubkeys using eventStore.profiles()
- Uses getDisplayName() helper for human-readable names
- Tooltip format: "❤️ 3\nAlice, Bob, Carol"

This makes it easy to see exactly who reacted with each emoji.

* Simplify reaction tooltips to show truncated pubkeys

Changed tooltip implementation from loading profiles (which wasn't working
with EventStore API) to showing truncated pubkeys for simplicity and performance:

- Removed profile loading logic (eventStore.profiles() doesn't exist)
- Tooltips now show: "❤️ 3\nabcd1234..., efgh5678..."
- Truncated to first 8 chars for readability
- No external API calls needed, purely computed from reaction data
- Can be enhanced later to load profiles if needed

Build verified: TypeScript compilation passes, all tests pass.
This is production-ready code.

* Add emoji reaction picker to chat messages

Implements complete reaction functionality with searchable emoji picker:

**UI Enhancements:**
- Reactions display horizontally with hidden scrollbar (hide-scrollbar CSS utility)
- Messages with many reactions scroll smoothly without visible scrollbar
- Inline positioning after timestamp for clean, integrated look

**Emoji Picker Dialog:**
- Real-time search using FlexSearch (EmojiSearchService)
- Quick reaction bar with common emojis (❤️ 👍 🔥 😂 🎉 👀 🤔 💯)
- Frequently used section based on localStorage history
- Support for both unicode and NIP-30 custom emoji
- Grid layout with 48-emoji results
- Auto-focus search input for keyboard-first UX

**Protocol Implementation:**
- Added sendReaction() method to ChatProtocolAdapter base class
- NIP-29 groups: kind 7 with e-tag + h-tag (group context)
- NIP-53 live chats: kind 7 with e-tag + a-tag (activity context)
- NIP-C7 DMs: kind 7 with e-tag + p-tag (partner context)
- All reactions include k-tag for reacted event kind
- NIP-30 custom emoji support via emoji tags

**Context Menu Integration:**
- Added "React" action to ChatMessageContextMenu with Smile icon
- Opens emoji picker dialog on click
- Passes conversation and adapter for protocol-specific reactions
- Only shows when conversation and adapter are available

**Frequently Used Tracking:**
- Stores reaction history in localStorage (grimoire:reaction-history)
- Displays top 8 most-used reactions when no search query
- Increments count on each reaction sent

**Tooltips:**
- Show emoji + count + truncated pubkeys
- Format: "❤️ 3\nabcd1234..., efgh5678..."
- Future enhancement: load profiles for display names

Ready for testing! Users can now right-click messages → React → search/pick emoji.

* Load user's custom emoji list in reaction picker

The emoji picker now loads custom emoji from:
- User's emoji list (kind 10030) - personal custom emoji
- Context emojis from conversation messages
- Unicode emojis (default set)

EmojiSearchService prioritizes:
1. User emoji (highest priority)
2. Context emoji (from conversation)
3. Emoji sets (if any)
4. Unicode emoji (default)

When searching or browsing, users will see their custom emoji alongside
standard unicode emoji, making it easy to use personal/community emoji
in reactions.

* Fix reaction container to prevent message width expansion

Wrapped reactions in a scrollable container with proper constraints:
- inline-flex: displays inline with message metadata
- max-w-full: prevents expanding beyond message width
- overflow-x-auto: enables horizontal scrolling for many reactions
- hide-scrollbar: hides scrollbar for clean appearance

Messages with many reactions now stay within their width and scroll
horizontally without a visible scrollbar.

* Highlight reaction counts when active user has reacted

Changes:
- Reaction counts now show in highlight color (text-highlight) when the
  active user has reacted with that emoji
- Added font-semibold to make user's reactions more prominent
- Checks if activeAccount.pubkey is in reaction.pubkeys array
- Provides clear visual feedback showing which reactions you've made

This makes it easy to see at a glance which reactions are yours in a
conversation with many reactions.

* Refine reaction badge styling: increase spacing and remove bold

- Increase gap between reaction badges from gap-1 to gap-2
- Remove font-semibold from highlighted reaction counts
- Keep text-highlight color for active user's reactions
- Results in more subtle, polished appearance

* Refactor emoji picker to use useEmojiSearch hook

- Replace manual emoji service management with useEmojiSearch hook
- Use same emoji loading approach as chat autocomplete
- Subscribe to EventStore observables for reactive updates
- Load user's emoji list (kind 10030) and emoji sets (kind 30030)
- Fix custom emoji search not working
- Remove redundant async loading logic

* Fix emoji picker UI issues

- Remove quick reaction bar (❤️ 👍 🔥 etc.)
- Fix custom emoji in "Recently used" section - now renders images instead of shortcodes
- Increase grid spacing from gap-2 to gap-3 to reduce crowding
- Add helpers to properly lookup and render custom emoji from service

* Improve reaction badge sizing and spacing

- Increase custom emoji size from size-3 (12px) to size-3.5 (14px)
- Increase gap between emoji and count from gap-1 to gap-1.5
- Add object-contain to custom emoji images for proper aspect ratio
- Add leading-none to unicode emoji for consistent vertical alignment
- Results in better visual balance between custom and unicode emoji

* Fix custom emoji shrinking in reaction badges

- Add flex-shrink-0 to custom emoji images to prevent compression
- Add flex-shrink-0 to unicode emoji spans for consistency
- Ensures both custom and unicode emoji maintain their size-3.5 dimensions

* Improve emoji picker UX with fixed layout

- Always show exactly 2 rows (16 emoji) to prevent height jumping
- Merge recently used with search results into unified grid
- When no search: show recently used first, then fill with other emoji
- When searching: show top 16 results
- Remove separate "Recently used" section for cleaner layout
- Add aspect-square to buttons for consistent sizing
- Add object-contain to custom emoji for proper aspect ratio
- Replace scrollable area with fixed-height grid

* Refine emoji picker to show single row with fixed height

- Show only 1 row (8 emoji) instead of 2 rows for more compact UI
- Add min-h-[3.5rem] to prevent height changes
- Ensure custom emoji (w-6 h-6) matches unicode emoji (text-2xl) size
- Add leading-none to unicode emoji for better vertical alignment
- Empty state "No emojis found" maintains same grid height
- Consistent sizing between custom and unicode emoji across the picker

* Fix emoji sizing in picker to match unicode and custom emoji

- Reduce unicode emoji from text-2xl (24px) to text-xl (20px)
- Reduce custom emoji from w-6 h-6 (24px) to size-5 (20px)
- Both now render at same 20px size for visual consistency
- Fixes custom emoji appearing too large compared to unicode emoji

* ui: dialog tweaks

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-16 18:47:16 +01:00
Alejandro
d172d67584 Add download button to Zapstore app renderers (#108) 
* Add download button to Zapstore app renderers

Add a download button for the latest release to both the feed and detail
renderers for kind 32267 (Zapstore App Metadata). The feed renderer shows
a compact version button, while the detail renderer shows a prominent
download button in the header. Both fetch the latest release and link to
its file metadata event (kind 1063) for download.

* Add proper relay hints for fetching Zapstore releases

Use useLiveTimeline instead of eventStore.timeline() to actually fetch
release events from relays. Relay selection includes:
- Seen relays (where the app event was received from)
- Publisher's outbox relays (NIP-65)
- Aggregator relays as fallback

This ensures releases are properly fetched rather than just read from
the local event store cache.

* Add relay hints when opening file events for download

Pass relay hints from the release event's seen relays when opening
file metadata events (kind 1063) for download. This ensures the
event loader knows where to fetch the file event from.

Also adds relay hints to the ReleaseItem component for both opening
the release detail and the download file.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-15 16:30:19 +01:00
Alejandro
7a293bb41b feat: COUNT (#105) 
* Add COUNT command for NIP-45 event counting

Implements the COUNT verb from NIP-45, allowing users to count events
on relays without fetching them. Features:

- New `count` command requiring at least one relay
- Filter-only flags (excludes --limit, --close-on-eose, --view)
- Single relay shows centered count result
- Multiple relays show per-relay breakdown
- Handles approximate counts, errors, and unsupported relays
- Supports $me/$contacts aliases and NIP-05 resolution

Examples:
  count relay.damus.io -k 3 -p npub1...
  count nos.lol relay.damus.io -k 1 -a fiatjaf.com

* Fix $me and $contacts alias resolution in CountViewer

- Fetch contact list (kind 3) using useNostrEvent hook
- Extract contacts from p tags to resolve $contacts alias
- Add "Account Required" message when aliases used without active account
- Match ReqViewer pattern for consistent alias resolution

* Refactor: extract FilterSummaryBadges for compact headers

- Create shared FilterSummaryBadges component (nostr/FilterSummaryBadges.tsx)
- Simplify CountViewer header to single compact line
- Use FilterSummaryBadges in both ReqViewer and CountViewer
- Remove verbose collapsible filter section from CountViewer

* Remove 'events' suffix from count result

* Update count synopsis to show relays can appear anywhere

* Refactor CountViewer to use applesauce-relay pool

Replace manual WebSocket connections with the relay pool's
count() method for NIP-45 COUNT requests. This provides:
- Proper connection reuse via the existing relay pool
- Automatic reconnection handling
- Better integration with the rest of the app

Remove the approximate property since applesauce-relay's
CountResponse type doesn't expose it yet.

* Simplify CountViewer with one-shot requests and compact UI

- Use per-relay count requests with firstValueFrom and timeout
  instead of pool.count() observable that may not complete
- Replace Collapsible-based header with icon-only DropdownMenus
  matching ReqViewer's compact style
- Add raw JSON filter view with syntax highlighting and copy button
- Show relay count and filter in dropdowns instead of expanded sections
- Requests complete after timeout (10s) instead of spinning indefinitely

* Add NIP-45 support detection via NIP-11 relay info

- Check relay's supported_nips via NIP-11 before sending COUNT request
- Return early with "unsupported" status if relay explicitly doesn't support NIP-45
- Differentiate UI between unsupported (yellow Ban icon) and error (red AlertCircle)
- Provide clearer error messages based on whether NIP-11 info was available
- Uses cached relay info when available to avoid redundant requests

* Improve CountViewer header with human-readable filter summary

- Show kinds as badges, authors ("by"), mentions ("@"), hashtags on left
- Move relay status into relay dropdown with per-relay results
- Dropdown shows count per relay, status icons, and error tooltips
- Header now shows "2/3" style relay count trigger with loading state

* Reorder CountViewer header controls and remove redundant mention prefix

- Change control order to: refresh, relays, filter (was: filter, relays, refresh)
- Remove redundant "@" prefix from mentions since UserName with isMention already shows @

* Increase COUNT timeout to 30s and improve window title

- Extend per-relay timeout from 10s to 30s for more reliable results
- Update count window title to show human-readable kind names instead of
  command-line format (e.g., "count: Short Note by abc123..." instead of
  "count -k 1 -a npub...")

* Add spell support for COUNT commands

- Extend spell system to support both REQ and COUNT commands
- Add detectCommandType() to identify command type from string
- Update encodeSpell to use ["cmd", "COUNT"] tag for count commands
- Update decodeSpell to handle COUNT spells
- Update reconstructCommand to accept cmdType parameter
- Add "Save as spell" option to COUNT windows in WindowToolbar
- Update SpellDialog to handle both REQ and COUNT commands

* Add dynamic window title for COUNT with human-readable filter summary

- Add profile fetching for COUNT authors and tagged users
- Add countTitle useMemo with human-readable kind names, authors, mentions, hashtags, and search
- Use same formatting helpers as REQ titles (getKindName, formatProfileNames, etc.)
- Add countTitle to title priority chain after reqTitle
- Title now shows "Short Note • @alice • #bitcoin" instead of "COUNT"

* Update count command documentation for production

- Add note about automatic NIP-11/NIP-45 support detection
- Mention spell saving capability in description

* Add automatic relay selection with NIP-45 filtering for COUNT

- Make relays optional in count-parser (no longer throws if none specified)
- Add useOutboxRelays for automatic relay selection based on filter criteria
- Filter selected relays by NIP-45 support via NIP-11 before querying
- Show "Selecting relays..." and "Filtering by NIP-45..." loading states
- Fall back to aggregator relays if no NIP-45 relays found
- Update man page: relays now optional, new examples showing auto-selection

* Revert automatic relay selection for COUNT command

Simplify COUNT by requiring explicit relay specification:
- Restore relay requirement validation in count-parser.ts
- Remove useOutboxRelays and NIP-45 auto-filtering from CountViewer
- Update man page documentation to reflect required relays
- Keep NIP-45 support detection for better error messages

This keeps the feature simpler for now; automatic relay selection
can be added later when the UX is better understood.

* Reduce padding and sizing in COUNT single result view

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-15 16:13:50 +01:00
Alejandro
dade9a79a6 Fix chat zap preview display logic (#106) 
* fix: hide zap reply previews for missing or non-chat events

Only show reply previews for zaps when:
1. The replied-to event exists in the event store
2. The replied-to event is a chat kind (9, 9321, or 1311)

This prevents showing loading states or reply previews for
zaps replying to events we don't have or non-chat events.

* refactor: extract CHAT_KINDS constant and include zap receipts

- Create CHAT_KINDS constant in types/chat.ts with all chat event kinds
- Include kind 9735 (zap receipts) as a chat kind
- Update ChatViewer to use the new constant for validation
- Improves maintainability and makes it easier to update chat kinds

Chat kinds now include:
- 9: NIP-29 group chat messages
- 9321: NIP-61 nutzaps
- 1311: NIP-53 live chat messages
- 9735: NIP-57 zap receipts

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-15 13:08:33 +01:00
Alejandro
571e7a0d14 Implement NIP-43 relay access metadata (#104) 
* feat: add NIP-43 relay access metadata support

Add feed and detail rendering for kind 13534 (Relay Members) events,
and enable all NIP-43 kind constants for relay access management.

- Add RelayMembersRenderer with feed and detail views
- Enable kind constants: 13534, 28934, 28935, 28936
- Use Shield icon to represent relay access control
- Extract members from NIP-43's "member" tags (not standard "p" tags)

* feat: add renderers for NIP-43 Add/Remove User events

- Change kind 13534 icon from Shield to Users for consistency
- Add feed and detail renderers for kind 8000 (Add User)
- Add feed and detail renderers for kind 8001 (Remove User)
- Both show the affected pubkey using PubkeyListFull component

* fix: show username in Add/Remove User feed renderers

Display the actual username (via UserName component) in kind 8000/8001
feed views instead of just generic text.

* refactor: simplify NIP-43 renderers to follow codebase patterns

- Use PubkeyListPreview in RelayMembersRenderer feed view (shows actual
  users instead of just count, matching FollowSetRenderer pattern)
- Remove redundant icon props from detail renderers (PubkeyListFull
  has sensible defaults)
- Simplify variable naming and reduce comments
- No functional changes, just cleaner code

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-15 12:26:37 +01:00
Alejandro
1ce784561a Add copy chat ID button to header (#103) 
* feat: add copy chat ID button to chat header

Add a button next to the chat title that copies the chat identifier
to clipboard. The identifier can be used with the `chat` command to
reopen the same conversation.

- For NIP-29 groups: copies relay'group-id format
- For NIP-53 live activities: copies naddr encoding

The button shows a check icon for feedback when copied.

* refactor: simplify copy chat ID button styling

- Use CopyCheck icon instead of Check for consistency with CodeCopyButton
- Remove tooltip to reduce UI noise
- Keep hover state styling (muted to foreground)

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-15 11:43:01 +01:00
Alejandro
72eca99c2e Add custom parsing for relay links (#102) 
* feat: Add relay link parsing and rendering to rich text

Implements custom parsing for relay URLs (wss:// and ws://) in text content,
automatically converting them to clickable links that open the relay viewer.

Changes:
- Add relay-transformer.ts with pattern matching for relay URLs
- Create Relay.tsx component for rendering relay links inline
- Register relay transformer in RichText component pipeline
- Add comprehensive test suite (26 tests) covering all URL formats

Supported formats:
- wss:// and ws:// protocols
- Domains, subdomains, and IP addresses
- Custom ports, paths, query parameters
- Multiple relay URLs in single message

All tests passing (864/864). No breaking changes.

* refactor: Update relay link styling to match other inline links

- Use muted/underline styling consistent with NIP references
- Remove icons and show only relay name (formatted)
- Display full URL in tooltip
- Match text size with surrounding content
- Simplify component by not using RelayLink wrapper

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-15 11:33:27 +01:00
Alejandro
64c181dd87 Improve chat UX with scroll and padding fixes (#99) 
* fix: improve chat UX with better scroll and symmetric padding

- Add alignToBottom prop to Virtuoso for better last message visibility
- Add small footer to prevent last message from being hidden under scroll
- Make composer padding symmetric (py-1 instead of py-1 pb-0)

* fix: restore pb-0 on composer

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-14 21:25:03 +01:00
Alejandro
6541e06b62 feat: disable pointer events on group message preview (#98) 
Add pointer-events-none to the message preview div in GroupListViewer
to ensure clicks always pass through to the parent group item's onClick
handler. This prevents issues where clicks on the preview text (UserName
or RichText components) might not trigger group selection.

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-14 21:04:09 +01:00
Alejandro
f464c68bde feat: theme selector (#95) 
* feat: Add reusable theme system with Plan 9 proof of concept

Implement a comprehensive theme system that:
- Defines typed Theme interface with colors, syntax highlighting, scrollbar, and gradient variables
- Creates ThemeProvider with React context for runtime theme switching
- Persists theme selection to localStorage
- Includes 3 built-in themes: dark (default), light, and plan9

Theme structure supports:
- Core UI colors (background, foreground, primary, secondary, accent, etc.)
- Status colors (success, warning, info) replacing hardcoded Tailwind colors
- Syntax highlighting variables for code blocks
- Diff highlighting colors (inserted, deleted, meta)
- Scrollbar styling variables
- Gradient colors for branding

Technical changes:
- Update CSS to use new theme variables throughout
- Update prism-theme.css to use syntax variables instead of hardcoded values
- Remove chart colors (unused)
- Add success/warning/info to tailwind.config.js
- Wire up ThemeProvider in main.tsx

For Nostr publishing (future):
- d tag: "grimoire-theme"
- name tag: theme display name

* feat: Add theme selector to user menu, remove configurable border radius

- Remove border radius from theme configuration (borders are always square)
- Add theme selector dropdown to user menu (available to all users)
- Theme selector shows active theme indicator
- Theme selection persists via localStorage

* fix: Improve theme contrast and persistence

- Fix theme persistence: properly check localStorage before using default
- Plan9: make blue subtler (reduce saturation), darken gradient colors
  for better contrast on pale yellow background
- Light theme: improve contrast with darker muted foreground and borders
- Change theme selector from flat list to dropdown submenu

* fix: Replace Plan9 yellow accent with purple, add zap/live theme colors

- Replace Plan9's bright yellow accent with purple (good contrast on pale yellow)
- Add zap and live colors to theme system (used by ZapReceiptRenderer, StatusBadge)
- Make light theme gradient orange darker for better contrast
- Update ZapReceiptRenderer to use theme zap color instead of hardcoded yellow-500
- Update StatusBadge to use theme live color instead of hardcoded red-600
- Add CSS variables and Tailwind utilities for zap/live colors

* fix: Make gradient orange darker, theme status colors

- Make gradient orange darker in light and plan9 themes for better contrast
- Make req viewer status colors themeable:
  - loading/connecting → text-warning
  - live/receiving → text-success
  - error/failed → text-destructive
  - eose → text-info
- Update relay status icons to use theme colors
- Update tests to expect theme color classes

* fix: Use themeable zap color for active user names

- Replace hardcoded text-orange-400 with text-zap in UserName component
- Replace hardcoded text-orange-400 with text-zap in SpellRenderer ($me placeholder)
- Now uses dark amber/gold with proper contrast on light/plan9 themes

* feat: Add highlight theme color for active user display

Add dedicated 'highlight' color to theme system for displaying the
logged-in user's name, replacing the use of 'zap' color which felt
semantically incorrect. The highlight color is optimized for contrast
on each theme's background.

- Add highlight to ThemeColors interface and apply.ts
- Add --highlight CSS variable to index.css (light and dark)
- Add highlight to tailwind.config.js
- Configure appropriate highlight values for dark, light, and plan9 themes
- Update UserName.tsx to use text-highlight for active account
- Update SpellRenderer.tsx MePlaceholder to use text-highlight

* fix: Restore original orange-400 highlight color for dark theme

Update dark theme highlight to match original text-orange-400 color
(27 96% 61%) for backward compatibility with existing appearance.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-14 19:24:37 +01:00
Alejandro
5fa2a1c9b8 feat: Add context menu for chat message interactions (#94) 
Add right-click/long-press context menu to chat messages with event interactions:
- Reply to message
- Copy message text
- Open event detail (opens in new window)
- Copy event ID (nevent/naddr with relay hints)
- View raw JSON

Implements the same EventMenu pattern used in feed renderers, providing
consistent UX across the app. No visible UI elements added - menu appears
only on right-click or long-press (mobile).

Components added:
- src/components/ui/context-menu.tsx - Radix UI context menu primitives
- src/components/chat/ChatMessageContextMenu.tsx - Chat-specific context menu
- Integrated into MessageItem in ChatViewer.tsx

Dependencies:
- Added @radix-ui/react-context-menu

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-14 18:09:19 +01:00
Alejandro
59fdfc5611 Add route for command results in popup window (#93) 
* feat: Add pop-out command route for standalone window rendering

Add a new /run route that allows windows to be opened in separate
browser windows/tabs without affecting the main workspace layout.

Changes:
- Add RunCommandPage component for /run?cmd=<command> route
- Add Pop Out button to WindowToolbar (ExternalLink icon)
- Parse command from URL query parameter and render result
- Construct minimal WindowInstance for rendering
- Display command string in header with clean minimal UI

This enables users to pop out any window into a separate browser
context while maintaining the main workspace layout, useful for
multi-monitor setups or keeping reference windows visible.

* refactor: Remove header from pop-out command page

Simplify RunCommandPage to only show the window renderer without
any additional UI chrome. This provides a cleaner, more focused
experience for popped-out windows.

* refactor: Move pop-out action to window menu dropdown

Move the pop-out button from a standalone icon to the three-dot
menu dropdown to reduce toolbar clutter. The menu now always
appears since pop-out is always available.

* feat: Add AppShell header to pop-out command page

Wrap RunCommandPage with AppShell (hideBottomBar) to show the header
with user menu and command launcher, matching the behavior of NIP-19
preview pages.

When a command is launched from the /run page, it navigates to the
main dashboard (/) where the window system exists.

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2026-01-14 17:30:56 +01:00