- Add three highlight levels: nostrverse (all), friends (followed), and mine (user's own)
- Create contactService to fetch user's follow list from kind 3 events
- Add three configurable colors in settings (purple, orange, yellow defaults)
- Replace mode switcher with independent toggle buttons for each level
- Update highlight rendering to apply level-specific colors using CSS custom properties
- Add CSS styles for three-level highlights in both marker and underline modes
- Classify highlights dynamically based on user's context and follow list
- All three levels can be shown/hidden independently via toggle buttons
Extracted large functions into separate modules to follow DRY principles
and keep files manageable:
- Created useArticleLoader.ts hook (92 lines)
- Handles article loading from naddr
- Fetches article content and highlights
- Sets up article coordinate for refresh
- Created contentLoader.ts utility (44 lines)
- Handles both Nostr articles and web URLs
- Unified content loading logic
- Reusable across components
Result: Bookmarks.tsx reduced from 282 to 208 lines ✅
All files now under 210 line limit while maintaining functionality.
- Create useSettings hook to handle settings loading, saving, and watching
- Move settings-related logic out of Bookmarks component
- Move font loading logic into the hook
- Reduce Bookmarks.tsx from 221 to 167 lines (under 210 limit)
- Keep code DRY by centralizing settings management
- All lint and type checks pass
