mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-04-09 15:07:10 +02:00
e6e663c3d847d9cf1c686e8a4fbdcd9280be36a7
331 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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>
|
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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:
-
|
||
|
KoalaSat
|
14d5255bce | feat: Add P2P orders renderer and detail (#116) | ||
|
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> |
||
|
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> |
||
|
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>
|
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
Alejandro
|
16764e1aca |
Display user's blossom servers in menu (#90)
* feat: Display blossom servers in user menu with caching Implements caching and display of user's blossom server lists (kind 10063) in the user menu dropdown. **Key Changes:** 1. **Database Schema (db.ts)**: - Added `CachedBlossomServerList` interface - Added `blossomServers` table to Dexie v15 - Indexed by pubkey and updatedAt for efficient querying 2. **Caching Service (blossom-server-cache.ts)**: - Dual-layer caching: LRU memory cache (100 entries) + Dexie persistent cache - 24-hour TTL to reduce network requests - Auto-caches kind:10063 events from EventStore - Mirrors relay-list-cache pattern for consistency 3. **Sync Hooks**: - `useBlossomServerCacheSync`: Subscribes to EventStore for auto-caching kind:10063 events - `useAccountSync`: Extended to fetch and watch active account's blossom servers 4. **State Management**: - Added `blossomServers` field to `activeAccount` in GrimoireState - Created `setActiveAccountBlossomServers` pure function and callback - Reactive updates when user's server list changes 5. **User Menu UI (user-menu.tsx)**: - Added blossom servers section with HardDrive icon - Shows server count badge (e.g., "3 servers") - Clickable links open servers in new tabs - Displays only when user has configured servers **Architecture:** - Follows existing relay list caching pattern for consistency - Reactive: UI auto-updates when kind:10063 events arrive - Incremental sync: Fetches on login, caches for 24h - Performance: Memory cache for <1ms lookups, Dexie for persistence **Testing:** - Build: ✓ No TypeScript errors - Tests: ✓ All 838 tests passing * feat: Open blossom server file lists directly from menus **User Menu & Profile Viewer Improvements:** 1. **Enhanced Click Behavior**: - Clicking a blossom server now opens the file list for that server - Shows blobs uploaded by the user (user menu) or profile owner (profile viewer) - Pre-selects the clicked server in the dropdown 2. **UX Improvements**: - Removed server count from user menu label (cleaner UI) - Added `cursor-crosshair` to blossom server items (consistent with other clickable items) - Removed external link icon (not opening external URL anymore) 3. **Technical Changes**: - Updated `ListBlobsView` to accept optional `serverUrl` prop for pre-selection - User menu: Opens `blossom list` with `serverUrl` for active user - Profile viewer: Opens `blossom list` with both `pubkey` and `serverUrl` **Flow:** - User menu → Click server → Opens files for active user on that server - Profile viewer → Click server → Opens files for viewed user on that server * fix: Properly fetch blossom servers for any profile view **Problem:** Blossom servers were only visible for the logged-in user's profile, not for other users' profiles being viewed. **Solution:** Enhanced ProfileViewer blossom server fetching with multi-layer approach: 1. **Cache-first loading**: Check blossomServerCache for instant display 2. **EventStore check**: Use existing cached event if available 3. **Reactive subscription**: Subscribe to EventStore for real-time updates 4. **Network fetch**: Use addressLoader to fetch latest from relays 5. **Auto-caching**: Update cache when new events arrive **Benefits:** - Blossom servers now display for ANY user's profile - Instant display from cache (< 1ms) - Reactive updates when data changes - Proper cache hydration for future visits - Consistent with relay list fetching pattern **Technical:** - Imported and integrated blossomServerCache service - Added cache check before network fetch - Separated EventStore subscription from network fetch - Added cache updates on event arrival --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
998944fdf7 |
feat: Add mobile tap support for chat name tooltip (#82)
- Add controlled state for tooltip open/close - Enable tap/click to toggle tooltip on mobile devices - Tooltip now shows conversation metadata on tap (icon, description, protocol type, status, host) - Maintains existing hover behavior on desktop - Improves mobile UX by making metadata accessible via tap Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
3117aea34f |
Update profile example domain name (#86)
* Update profile example from verbiricha@habla.news to fiatjaf.com * Update remaining verbiricha@habla.news examples to fiatjaf.com in man.ts --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
7036fb5539 |
Fix chat composer placeholder and text alignment (#84)
* Fix chat composer placeholder and text alignment - Adjusted .ProseMirror min-height from 2rem to 1.25rem to match container - Added flexbox layout to .ProseMirror for proper vertical centering - Removed float:left and height:0 from placeholder causing misalignment - Moved padding from editor props to wrapper div - Updated EditorContent to use flex items-center for alignment Resolves vertical alignment issues in chat composer input field. * Fix cursor placement in chat composer placeholder - Changed from flexbox to line-height for vertical centering - Removed flex from .ProseMirror to fix cursor positioning - Set line-height: 1.25rem to match min-height for proper alignment - Removed flex items-center from EditorContent className This ensures the cursor appears at the correct position when focusing the input field, rather than after the placeholder text. * Fix cursor placement on mobile devices - Made placeholder absolutely positioned to prevent it from affecting cursor - Added position: relative to .ProseMirror container - This ensures cursor appears at the start of input on mobile browsers The absolute positioning removes the placeholder from the normal layout flow, preventing mobile browsers from placing the cursor after the pseudo-element. --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
20aeac2bc2 |
Use npub instead of NIP-05 in sharing URLs (#83)
- Replace NIP-05 preference with npub in ShareSpellbookDialog - Replace NIP-05 preference with npub in SpellbookRenderer preview - Remove unused useProfile imports from both components - Update comment to reflect npub-only URL format This ensures more reliable URL sharing since npub is always available while NIP-05 may not be set or verified. The routing system still supports both formats for backwards compatibility. Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
1356afe9ea |
Fix newline rendering in chat messages (#80)
* Fix newline rendering in chat messages The Text component was not properly rendering newlines in chat messages. The previous implementation had buggy logic that only rendered <br /> for empty lines and used an inconsistent mix of spans and divs for non-empty lines, which didn't create proper line breaks between consecutive text lines. Changes: - Render each line in a span with <br /> between consecutive lines - Remove unused useMemo import and fix React hooks violation - Simplify logic for better maintainability This ensures that multi-line messages in chat (and other text content) display correctly with proper line breaks. Fixes rendering of newlines in NIP-29 groups and NIP-53 live chat. * Preserve newlines when sending chat messages The MentionEditor's serializeContent function was not handling hardBreak nodes created by Shift+Enter. This caused newlines within messages to be lost during serialization, even though the editor displayed them correctly. Changes: - Add hardBreak node handling in serializeContent - Preserve newlines (\n) from Shift+Enter keypresses - Ensure multi-line messages are sent with proper line breaks With this fix and the previous Text.tsx fix, newlines are now properly: 1. Captured when typing (Shift+Enter creates hardBreak) 2. Preserved when sending (hardBreak serialized as \n) 3. Rendered when displaying (Text component renders \n as <br />) * Make Enter insert newline on mobile devices On mobile devices, pressing Enter now inserts a newline (hardBreak) instead of submitting the message. This provides better UX since mobile keyboards don't have easy access to Shift+Enter for multiline input. Behavior: - Desktop: Enter submits, Shift+Enter inserts newline (unchanged) - Mobile: Enter inserts newline, Cmd/Ctrl+Enter submits - Mobile detection: Uses touch support API (ontouchstart or maxTouchPoints) Users can still submit messages on mobile using: 1. The Send button (primary method) 2. Ctrl+Enter keyboard shortcut (if available) --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
4078ea372a |
Review NIP-51 list types and rendering support (#77)
* Add comprehensive NIP-51 list rendering support Implement rich renderers for all major NIP-51 list types with both feed and detail views. Creates reusable list item components for consistent UI across different list kinds. New list renderers: - Kind 10000: Mute List (pubkeys, hashtags, words, threads) - Kind 10001: Pin List (pinned events/addresses) - Kind 10003: Bookmark List (events, addresses, URLs) - Kind 10004: Community List (community references) - Kind 10005: Channel List (public chat channels) - Kind 10015: Interest List (hashtags + interest sets) - Kind 10020: Media Follow List (media creators) - Kind 10030: User Emoji List (custom emojis) - Kind 10101: Good Wiki Authors - Kind 10102: Good Wiki Relays - Kind 30000: Follow Sets (categorized follows) - Kind 30003: Bookmark Sets (categorized bookmarks) - Kind 30004: Article Curation Sets - Kind 30005: Video Curation Sets - Kind 30006: Picture Curation Sets - Kind 30007: Kind Mute Sets - Kind 30015: Interest Sets - Kind 39089: Starter Packs - Kind 39092: Media Starter Packs Reusable components in src/components/nostr/lists/: - PubkeyListPreview/Full: Display pubkey lists with counts - HashtagListPreview/Full: Display hashtag pills - EventRefList: Display event/address references - WordList: Display muted words - UrlList: Display URL bookmarks * Improve NIP-51 list rendering with clickable titles and consistent styling - Add ClickableEventTitle to all list feed renderers for detail view navigation - Change colored icons to text-muted-foreground for consistent muted appearance - Update HashtagListPreview to use Label component with dotted border styling - Update EventRefList detail view to embed events using EmbeddedEvent component * Use Label component for muted words with destructive styling --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
9ef1fefd3d |
feat: BLOSSOM (#75)
* Add Blossom blob storage integration - Add blossom-client-sdk dependency for blob storage operations - Create blossom.ts service with upload, list, check, mirror, delete primitives - Add kind 10063 server list fetching and parsing - Create blossom-parser.ts for command argument parsing with subcommands - Add BLOSSOM command to man.ts with subcommands: - servers: Show configured Blossom servers - check: Check server health - upload: Upload files to user's servers - list: List blobs for a user - mirror: Mirror blobs between servers - delete: Delete blobs from servers - Create BlossomViewer component with views for each subcommand - Wire up BlossomViewer in WindowRenderer - Add Blossom servers dropdown to ProfileViewer header - Upload primitives can be called programmatically for use in other components * Enhance Blossom viewer with server selection and blob details - Add server selection checkboxes to upload view for choosing target servers - Add BlobDetailView with media preview (image/video/audio) and metadata display - Add 'blob' subcommand to view individual blob details - Remove unused 'check' subcommand * Add Blossom upload dialog with chat integration - Create BlossomUploadDialog component with file picker, server selection, and preview - Create useBlossomUpload hook for easy integration in any component - Add insertText method to MentionEditor for programmatic text insertion - Integrate upload button (paperclip icon) in chat composer - Supports image, video, and audio uploads with drag-and-drop * Add rich blob attachments with imeta tags for chat - Add BlobAttachment TipTap extension with inline preview (thumbnail for images, icons for video/audio) - Store full blob metadata (sha256, url, mimeType, size, server) in editor nodes - Convert blob nodes to URLs in content with NIP-92 imeta tags when sending - Add insertBlob method to MentionEditor for programmatic blob insertion - Update NIP-29 and NIP-53 adapters to include imeta tags with blob metadata - Pass blob attachments through entire send flow (editor -> ChatViewer -> adapter) * Add fallback public Blossom servers for users without server list - Add well-known public servers as fallbacks (blossom.primal.net, nostr.download, files.v0l.io) - Use fallbacks when user has no kind 10063 server list configured - Show "Public Servers" label with Globe icon when using fallbacks - Inform user that no server list was found - Select first fallback server by default (vs all user servers) * Fix: Don't show fallback servers when not logged in Blossom uploads require signed auth events, so users must be logged in. The 'Account required' message is already shown in this case. * Remove files.v0l.io from fallback servers * Add rich renderer for kind 10063 Blossom server list - Create BlossomServerListRenderer.tsx with feed and detail views - Show user's configured Blossom servers with clickable links - Clicking a server opens the Blossom window with server info - Register renderers for kind 10063 (BUD-03) - Fix lint error by renaming useFallbackServers to applyFallbackServers * Add individual server view and NIP-05 support for blossom commands - Add 'server' subcommand to view info about a specific Blossom server - Update BlossomServerListRenderer to open server view on click - Make blossom parser async to support NIP-05 resolution in 'list' command - Add kind 10063 (Blossom Server List) to EVENT_KINDS constants with BUD-03 reference - Update command examples with NIP-05 identifier support * Add comprehensive tests for blossom-parser - 34 test cases covering all subcommands (servers, server, upload, list, blob, mirror, delete) - Tests for NIP-05 resolution, npub/nprofile decoding, $me alias - Tests for error handling and input validation - Tests for case insensitivity and command aliases (ls, view, rm) --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
ed6f2fd856 |
Improve chat reply UX with auto-focus and rich text preview (#76)
- Focus the message input when clicking reply button for immediate typing - Use RichText component in reply preview to render mentions and emojis Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
fd31e707fc |
Add window action to move windows between tabs (#74)
- Add "Move to tab" submenu in window toolbar's more actions dropdown - Shows nested submenu with available workspace tabs (number + label) - After moving, automatically switches to the target workspace - Only displays the more actions menu when multiple workspaces exist - Preserves existing REQ-specific "Save as spell" action Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
797510107b |
Fix slash command autocomplete and add bookmark commands (#73)
* fix: slash autocomplete only at input start + add bookmark commands - Fix slash command autocomplete to only trigger when / is at the beginning of input text (position 1 in TipTap), not in the middle of messages - Add /bookmark command to add NIP-29 group to user's kind 10009 list - Add /unbookmark command to remove group from user's kind 10009 list * fix: normalize relay URLs when checking group list bookmarks Use normalizeRelayURL for comparing relay URLs in bookmark/unbookmark commands to handle differences in trailing slashes, casing, and protocol prefixes between stored tags and conversation metadata. --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
280a395187 |
Make grouplist viewer mobile friendly with sidebar (#72)
* feat: make GroupListViewer mobile-friendly with Sheet sidebar - Add Sheet component for mobile drawer behavior - Add Separator component for UI dividers - Add Sidebar component with mobile/desktop variants - Update GroupListViewer to show sheet-based sidebar on mobile (<768px) and resizable sidebar on desktop - Mobile view includes toggle button in header and auto-closes on selection * refactor: integrate sidebar toggle into ChatViewer header - Add headerPrefix prop to ChatViewer for custom header content - Pass sidebar toggle button via headerPrefix on mobile - Remove duplicate mobile header from GroupListViewer - Reduces vertical space usage by reusing ChatViewer's existing header --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
4ee385ea6c |
Add actions support to chat adapter protocol (#67)
* feat: add protocol-specific actions to chat adapters Extends the chat adapter system with support for slash commands and protocol-specific actions without parameters. New features: - ChatAction type system for defining simple commands - Base adapter getActions() and executeAction() methods - NIP-29 /join and /leave slash commands - Slash command parser for detecting /commands - ChatViewer integration with toast notifications Example usage in NIP-29 groups: /join - Request to join the group /leave - Leave the group The action system is extensible and can be enhanced with parameterized actions (e.g., /kick <user>, /ban <user>) in future iterations. Tests: All 804 tests passing Build: Successful Lint: No errors * feat: add autocomplete for slash commands Extends the chat system with autocomplete UI for slash commands, making actions discoverable and easier to execute. New features: - SlashCommandSuggestionList component with keyboard navigation - Slash command search integrated into MentionEditor - Autocomplete popup shows command name and description - Arrow keys for navigation, Enter to select, Escape to close - Filters available commands based on typed text When typing "/" in chat, users now see: /join Request to join the group /leave Leave the group The autocomplete uses the same TipTap suggestion system as @mentions and :emoji:, providing a consistent UX across all autocomplete features. Tests: All 804 tests passing Build: Successful Lint: 1 warning fixed (unused parameter) * feat: execute slash commands immediately on autocomplete selection When selecting a slash command from the autocomplete menu, the action now executes immediately and clears the input, providing a more streamlined UX. Changes: - Added onCommandExecute prop to MentionEditor - Modified slash command suggestion to call onCommandExecute on selection - Clears editor content immediately after selection - Added handleCommandExecute callback in ChatViewer - Executes action and shows toast notifications Before: Type "/" → select "/join" → press Enter → executes After: Type "/" → select "/join" → executes immediately This matches the expected behavior for command selection - when you choose a command from autocomplete, you want to execute it, not just insert it into the text field. Tests: All 804 tests passing Build: Successful Lint: No new errors * feat: make chat actions context-aware and filter by membership status Actions are now intelligently filtered based on the user's membership in the conversation, providing a cleaner and more intuitive UX. Changes: - Added GetActionsOptions type with conversation and activePubkey - Updated base adapter getActions() to accept optional context - Modified NIP-29 adapter to filter actions based on membership: - /join: only shown when user is NOT a member/admin - /leave: only shown when user IS a member - Updated ChatViewer to pass conversation and user context to searchCommands - Moved searchCommands callback after conversation is defined This prevents showing irrelevant commands like "/join" when you're already a member, or "/leave" when you haven't joined yet. The autocomplete menu now only displays actions that are actually executable in the current context. Implementation notes: - NIP-29 uses getAllActions() fallback when context unavailable - Membership determined by checking conversation.participants array - Other protocols return empty array by default (no actions yet) Tests: All 804 tests passing Build: Successful Lint: No new errors --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro Gómez
|
9657ec635f | fix: support other user groups | ||
|
Alejandro
|
c4687da3ef |
Add multi-room group chat support (#70)
* feat: add multi-room group chat interface (GroupListViewer) Add a Discord/Slack-style multi-room chat interface for NIP-29 groups: - New GroupListViewer component with split layout: - Left panel: List of groups from kind 10009, sorted by recency - Right panel: Full chat view for selected group - Loads group metadata (kind 39000) for icons and names - Tracks latest messages (kind 9) for activity-based sorting |
||
|
Alejandro Gómez
|
5de60f17d3 | ui: load older styles | ||
|
Alejandro
|
cf1f384691 |
Make chat composer more compact (#68)
* ui: make chat composer more compact - Reduce input and button height from 2.5rem to 1.75rem (h-7) - Reduce padding from px-3 py-1.5 to px-2 py-1 - Use text-sm for consistent sizing with chat messages - Make Send button smaller with text-xs and smaller icon - Tighten gap between input and button * ui: remove bottom padding from chat composer --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
20eb19bdbb |
fix: improve chat architecture robustness and error handling (#66)
* fix: improve chat architecture robustness and error handling - Fix scroll-to-message index mismatch (was searching in wrong array) - Fix subscription memory leaks by tracking and cleaning up subscriptions - Add error handling for conversation resolution with retry UI - Add error handling for send message with toast notifications - Fix array mutation bugs in NIP-53 relay handling - Add type guards for LiveActivityMetadata - Fix RelaysDropdown O(n²) performance issue - Add loading state for send button * refactor: add stronger types and optimize message sorting - Add discriminated union types for ProtocolIdentifier (GroupIdentifier, LiveActivityIdentifier, DMIdentifier, NIP05Identifier, ChannelIdentifier) - Optimize message sorting using reverse() instead of full sort (O(n) vs O(n log n)) - Add type narrowing in adapter resolveConversation methods - Remove unused Observable import from ChatViewer --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
159d35e347 |
feat: add rich text rendering for live chat messages (kind 1311) (#64)
- Created LiveChatMessageRenderer component for NIP-53 live chat messages - Displays messages with RichText component for full formatting support - Links to parent live activity event (kind 30311) with clickable header - Shows activity title or fallback to "Live chat with [host]" - Registered kind 1311 in renderer registry - Exported both human-readable name (LiveChatMessageRenderer) and kind alias (Kind1311Renderer) Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro Gómez
|
7d460352e3 | ui: zap margin | ||
|
Alejandro
|
73de36a544 |
Render NIP-29 group metadata as links (#63)
* feat: add GroupMetadataRenderer for NIP-29 group metadata (kind 39000) Render kind 39000 events with group name, picture, description, and an "Open Chat" link that opens the NIP-29 group in the chat viewer. * feat: add kind names for NIP-29 group events and simplify renderer - Add kind 39000 (Group), 39001 (Group Admins), 39002 (Group Members) to EVENT_KINDS so kind badge displays proper names - Simplify GroupMetadataRenderer to show only title, description, and Open Chat CTA (remove group picture) --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
76dd1e801d |
fix: reconstruct chat command for edit button (#62)
Add chat case to reconstructCommand to properly reconstruct the chat command string when clicking the edit button in the window toolbar. - NIP-29 groups: reconstruct as `chat relay'group-id` - NIP-53 live activities: reconstruct as `chat naddr1...` Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alejandro
|
b24810074d |
feat: add NIP-61 nutzap support to NIP-29 groups (#59)
* feat: add NIP-61 nutzap support to NIP-29 groups Fetch and render nutzap events (kind 9321) in NIP-29 relay groups using the same visual styling as lightning zaps. Nutzaps are P2PK locked Cashu token transfers defined in NIP-61. - Add nutzap filter subscription in loadMessages - Combine chat and nutzap observables with RxJS combineLatest - Add nutzapToMessage helper to parse NIP-61 event structure - Extract amount by summing proof amounts from proof tag JSON - Add nutzapUnit metadata field for future multi-currency support * fix: improve zap/nutzap rendering in chat - Add mb-1 margin bottom to zap messages for spacing - Show inline reply preview for zaps that target specific messages - Fix nutzap amount extraction to handle multiple proof tags - Extract replyTo from e-tag for nutzaps - Pass nutzap event to RichText for custom emoji rendering * fix: pass event only to RichText for proper emoji rendering * refactor: consolidate NIP-29 chat and nutzap into single REQ - Use single filter with kinds [9, 9000, 9001, 9321] instead of separate subscriptions with combineLatest - Enables proper pagination for "load older" with single page fetches - Add rounded corners to zap gradient border for consistent rendering * refactor: consolidate NIP-53 chat and zap into single REQ - Use single filter with kinds [1311, 9735] instead of separate subscriptions with combineLatest - Enables proper pagination for "load older" with single page fetches - Filter invalid zaps inline during event mapping * feat: add load older messages support to chat adapters - Implement loadMoreMessages in NIP-29 adapter using pool.request - Implement loadMoreMessages in NIP-53 adapter using pool.request - Add "Load older messages" button to ChatViewer header - Use firstValueFrom + toArray to convert Observable to Promise - Track loading state and hasMore for pagination UI --------- Co-authored-by: Claude <noreply@anthropic.com> |