mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-04-09 23:16:50 +02:00
32d394b398
* feat: add preview routes for Nostr identifiers (npub, nevent, note, naddr)
This commit adds dedicated preview routes for Nostr identifiers at the root level:
- /npub... - Shows a single profile view for npub identifiers
- /nevent... - Shows a single event detail view for nevent identifiers
- /note... - Shows a single event detail view for note identifiers
- /naddr... - Redirects spellbooks (kind 30777) to /:actor/:identifier route
Key changes:
- Created PreviewProfilePage component for npub identifiers
- Created PreviewEventPage component for nevent/note identifiers
- Created PreviewAddressPage component for naddr redirects
- Added hideBottomBar prop to AppShell to hide tabs in preview mode
- Added routes to root.tsx for all identifier types
Preview pages don't show bottom tabs and don't affect user's workspace layout.
* chore: update package-lock.json
* refactor: create reusable useNip19Decode hook and improve preview pages
This commit makes the preview pages production-ready by:
1. Created useNip19Decode hook (src/hooks/useNip19Decode.ts):
- Reusable hook for decoding NIP-19 identifiers (npub, note, nevent, naddr, nprofile)
- Type-safe with discriminated union for decoded entities
- Comprehensive error handling with retry functionality
- Loading states and error messages
- Well-documented with JSDoc comments and usage examples
2. Comprehensive test coverage (src/hooks/useNip19Decode.test.ts):
- 11 tests covering all entity types (npub, note, nevent, naddr)
- Tests for error handling (missing identifier, invalid format, corrupted bech32)
- Tests for retry functionality and state changes
- Uses jsdom environment for React hook testing
- All tests passing ✓
3. Refactored preview pages to use the hook:
- PreviewProfilePage: Simplified from 80 to 81 lines with cleaner logic
- PreviewEventPage: Improved type safety and error handling
- PreviewAddressPage: Better separation of concerns
- All pages now have consistent error handling and retry functionality
- Better user experience with improved error messages
4. Dependencies added:
- @testing-library/react for React hook testing
- @testing-library/dom for DOM testing utilities
- jsdom and happy-dom for browser environment simulation in tests
Benefits:
- Code deduplication: Preview pages share decoding logic
- Type safety: Discriminated union prevents type errors
- Testability: Hook can be tested independently
- Maintainability: Single source of truth for NIP-19 decoding
- User experience: Consistent error handling and retry across all preview pages
- Production-ready: Comprehensive tests and error handling
* refactor: simplify useNip19Decode to synchronous with memoization
NIP-19 decoding is synchronous - removed unnecessary async complexity:
Hook changes (src/hooks/useNip19Decode.ts):
- Removed loading states (isLoading, setIsLoading)
- Removed retry functionality (unnecessary for sync operations)
- Now uses useMemo for efficient memoization
- Returns { decoded, error } instead of { decoded, isLoading, error, retry }
- Same string always yields same result (memoized)
- Went from ~120 lines to ~115 lines, but much simpler
Preview page changes:
- Removed loading spinners and states
- Removed retry buttons
- Simplified error handling
- Cleaner, more readable code
- PreviewProfilePage: 55 lines (down from 81)
- PreviewEventPage: 83 lines (down from 105)
- PreviewAddressPage: 83 lines (down from 117)
Test changes (src/hooks/useNip19Decode.test.ts):
- Removed waitFor and async/await (not needed for sync)
- Tests run faster (39ms vs 77ms - 49% improvement)
- Added memoization tests to verify caching works
- Simplified from 11 async tests to 11 sync tests
- All 11 tests passing ✓
Benefits:
- Simpler mental model: decode happens instantly
- Better performance: no state updates, just memoization
- Easier to test: synchronous tests are simpler
- More correct: matches the actual synchronous nature of nip19.decode()
- Less code: removed ~150 lines of unnecessary complexity
* feat: show detail view for all addressable events in naddr preview
Previously, PreviewAddressPage only handled spellbooks (kind 30777) and
showed errors for other addressable events. Now:
- Spellbooks (kind 30777): Redirect to /:actor/:identifier (existing behavior)
- All other addressable events: Show in EventDetailViewer
This enables previewing any addressable event (long-form articles, live
events, community posts, etc.) via naddr links.
Changes:
- Import EventDetailViewer
- Removed error state for non-spellbook kinds
- Show EventDetailViewer with AddressPointer for all other kinds
- Simplified from 83 lines to 77 lines
* fix: correct route patterns for NIP-19 identifier previews
The previous route patterns (/npub:identifier) conflicted with the catch-all
/:actor/:identifier route and didn't properly match NIP-19 identifiers.
Fixed by:
1. Using wildcard routes with correct prefixes:
- /npub1* (not /npub:identifier)
- /nevent1* (not /nevent:identifier)
- /note1* (not /note:identifier)
- /naddr1* (not /naddr:identifier)
2. Updated preview components to use params['*'] for wildcard capture:
- Reconstruct full identifier as prefix + captured part
- e.g., npub1 + params['*'] = npub107jk7htfv...
This ensures routes properly match before the catch-all /:actor/:identifier
route and correctly capture the full bech32-encoded identifier.
Test URL: /npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg
* style: apply prettier formatting
* fix: use loader-based routing for NIP-19 identifiers in React Router v7
Previous attempts using wildcard routes didn't work properly in React Router v7.
Solution:
- Single /:identifier route with a loader that validates NIP-19 prefixes
- Loader throws 404 if identifier doesn't start with npub1/note1/nevent1/naddr1
- Created Nip19PreviewRouter component that routes to correct preview page
- Routes are properly ordered: /:identifier before /:actor/:identifier catch-all
This ensures /npub107jk... routes to profile preview, not spellbook route.
Benefits:
- Simpler routing configuration (1 route vs 4 duplicate routes)
- Proper validation via loader
- Clean separation of concerns with router component
- Works correctly in React Router v7
---------
Co-authored-by: Claude <noreply@anthropic.com>
104 lines
3.1 KiB
JSON
104 lines
3.1 KiB
JSON
{
|
|
"name": "grimoire",
|
|
"private": true,
|
|
"version": "0.1.0",
|
|
"type": "module",
|
|
"license": "MIT",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc -b && vite build",
|
|
"lint": "eslint .",
|
|
"lint:fix": "eslint . --fix",
|
|
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
|
|
"format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
|
|
"preview": "vite preview",
|
|
"test": "vitest",
|
|
"test:ui": "vitest --ui",
|
|
"test:run": "vitest run"
|
|
},
|
|
"dependencies": {
|
|
"@radix-ui/react-accordion": "^1.2.12",
|
|
"@radix-ui/react-avatar": "^1.1.11",
|
|
"@radix-ui/react-checkbox": "^1.3.3",
|
|
"@radix-ui/react-collapsible": "^1.1.12",
|
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
"@radix-ui/react-hover-card": "^1.1.15",
|
|
"@radix-ui/react-popover": "^1.1.15",
|
|
"@radix-ui/react-progress": "^1.1.8",
|
|
"@radix-ui/react-scroll-area": "^1.2.10",
|
|
"@radix-ui/react-slider": "^1.3.6",
|
|
"@radix-ui/react-slot": "^1.2.4",
|
|
"@radix-ui/react-tabs": "^1.1.13",
|
|
"@radix-ui/react-tooltip": "^1.2.8",
|
|
"@types/qrcode": "^1.5.6",
|
|
"applesauce-accounts": "^4.1.0",
|
|
"applesauce-actions": "^4.0.0",
|
|
"applesauce-content": "^4.0.0",
|
|
"applesauce-core": "latest",
|
|
"applesauce-loaders": "^4.2.0",
|
|
"applesauce-react": "^4.0.0",
|
|
"applesauce-relay": "latest",
|
|
"applesauce-signers": "^4.1.0",
|
|
"class-variance-authority": "^0.7.1",
|
|
"clsx": "^2.1.1",
|
|
"cmdk": "^1.1.1",
|
|
"date-fns": "^4.1.0",
|
|
"dexie": "^4.2.1",
|
|
"dexie-react-hooks": "^4.2.0",
|
|
"framer-motion": "^12.23.26",
|
|
"hls-video-element": "^1.5.10",
|
|
"hls.js": "^1.6.15",
|
|
"jotai": "^2.15.2",
|
|
"js-yaml": "^4.1.1",
|
|
"lucide-react": "latest",
|
|
"media-chrome": "^4.17.2",
|
|
"prismjs": "^1.30.0",
|
|
"qrcode": "^1.5.4",
|
|
"react": "^19.2.1",
|
|
"react-dom": "^19.2.1",
|
|
"react-markdown": "^10.1.0",
|
|
"react-medium-image-zoom": "^5.4.0",
|
|
"react-mosaic-component": "^6.1.1",
|
|
"react-router": "^7.1.0",
|
|
"react-virtuoso": "^4.17.0",
|
|
"remark-gfm": "^4.0.1",
|
|
"rxjs": "^7.8.1",
|
|
"shell-quote": "^1.8.3",
|
|
"sonner": "^2.0.7",
|
|
"tailwind-merge": "^2.5.5"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "^9.17.0",
|
|
"@react-router/dev": "^7.1.0",
|
|
"@testing-library/dom": "^10.4.1",
|
|
"@testing-library/react": "^16.3.1",
|
|
"@types/js-yaml": "^4.0.9",
|
|
"@types/node": "^24.10.1",
|
|
"@types/prismjs": "^1.26.5",
|
|
"@types/react": "^19.2.7",
|
|
"@types/react-dom": "^19.2.3",
|
|
"@types/shell-quote": "^1.7.5",
|
|
"@types/uuid": "^10.0.0",
|
|
"@vitejs/plugin-react": "^4.3.4",
|
|
"@vitest/ui": "^4.0.15",
|
|
"autoprefixer": "^10.4.20",
|
|
"eslint": "^9.17.0",
|
|
"eslint-config-prettier": "^10.1.8",
|
|
"eslint-plugin-prettier": "^5.5.4",
|
|
"eslint-plugin-react-hooks": "^5.1.0",
|
|
"eslint-plugin-react-refresh": "^0.4.16",
|
|
"fake-indexeddb": "^6.2.5",
|
|
"globals": "^15.14.0",
|
|
"happy-dom": "^20.0.11",
|
|
"jsdom": "^27.4.0",
|
|
"postcss": "^8.4.49",
|
|
"prettier": "^3.7.4",
|
|
"tailwindcss": "^3.4.17",
|
|
"typescript": "~5.6.2",
|
|
"typescript-eslint": "^8.18.2",
|
|
"vite": "^6.0.5",
|
|
"vitest": "^4.0.15"
|
|
}
|
|
}
|