chore: bump version to 0.10.14

- Added third relay education article link in PWA settings
- Links to /a/naddr1qvzqqqr4gupzq3svyhng9ld8sv44950j957j9vchdktj7cxumsep9mvvjthc2pjuqq9hyetvv9uj6um9w36hq9mgjg8
- Updated punctuation to use commas for better readability (here, here, and here)

.cursor/rules/210.mdc

@@ -2,4 +2,4 @@
 alwaysApply: true
 ---
 
-Keep files below 210 lines.
+Keep files below 420 lines.

.cursor/rules/fetching-data-with-controllers.mdc

@@ -0,0 +1,18 @@
+---
+description: fetching data from relays
+alwaysApply: false
+---
+
+We fetch data from relays using controllers:
+- Start controllers immediatly; don’t await.
+- Stream via onEvent; dedupe replaceables; emit immediately.
+- Parallel local/remote queries; complete on EOSE.
+- Finalize and persist since after completion.
+- Guard with generations to cancel stale runs.
+- UI flips off loading on first streamed result.
+
+We always include and prefer local relays for reads; optionally rebroadcast fetched content to local relays (depending on setting); and tolerate local‑only mode for writes (queueing for later).
+
+Since we are streaming results, we should NEVER use timeouts for fetching data. We should always rely on EOSE.
+
+In short: Local-first hydration, background network fetch, reactive updates, and replaceable lookups provide instant UI with eventual consistency. Use local relays as local data store for everything we fetch from remote relays.

CHANGELOG.md

@@ -7,6 +7,635 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.10.13] - 2025-01-27
+
+### Added
+
+- Instant article preview when navigating from blog post cards
+  - Title, image, summary, and date display immediately via navigation state
+  - No skeleton loading for metadata already visible on cards
+  - Article content loads seamlessly in background from eventStore or relays
+- Reliable relay fallback for article fetching
+  - Queries nostr.band, primal, damus, and nos.lol if initial fetch returns no events
+  - Reduces "Article not found" errors
+
+### Changed
+
+- Article loading now follows local-first controller pattern
+  - Uses eventStore and queryEvents for streaming results
+  - Emits content immediately on first event from store or local relays
+  - Finalizes with newest version after EOSE (no artificial timeouts)
+  - Background relay query continues to check for updates
+- Service Worker now only registers in production builds
+  - Disabled in development to avoid stale cache issues
+  - Preserves PWA functionality in production
+- Article fetching queries union of naddr relay hints and configured relays
+  - Prevents failures when naddr contains stale or unreachable relay hints
+  - Maintains fast local/hinted paths with reliable fallback
+
+### Fixed
+
+- Article loading race conditions eliminated
+  - Request ID guards prevent stale fetches from overwriting current content
+  - Stale highlights from previous articles no longer appear
+- Content/title mismatch when switching articles resolved
+  - Markdown preview clears immediately on content change
+  - Forced re-mount of rendered HTML per article via stable content keys
+  - Request guards in external URL loader prevent cross-article bleed
+- Article re-fetching on settings changes prevented
+  - Settings memoized via ref to avoid triggering effect dependencies
+- Explore writings tab now shows skeletons instead of spinner when loading
+  - Consistent loading UI across all views
+
+## [0.10.12] - 2025-01-27
+
+### Added
+
+- Person hiking icon (fa-person-hiking) for explore navigation
+
+### Changed
+
+- Explore icon changed from newspaper to person hiking for better semantic meaning
+- Settings button moved before explore button in sidebar navigation
+- Profile avatar button now uses 44px touch target on mobile (matches other icon buttons)
+
+### Fixed
+
+- Web bookmarks (kind:39701) now properly deduplicate by d-tag
+- Same URL bookmarked multiple times now only appears once
+- Web bookmark IDs use coordinate format (kind:pubkey:d-tag) for consistent deduplication
+- Profile avatar button sizing on mobile now matches other IconButton components
+- Removed all console.log statements from bookmarkController and bookmarkProcessing
+
+## [0.10.11] - 2025-01-27
+
+### Added
+
+- Clock icon for chronological bookmark view
+- Clickable highlight count to open highlights sidebar
+- Dynamic bookmark filter titles based on selected filter
+- Profile picture moved to first position (left-aligned) with consistent sizing
+
+### Changed
+
+- Default bookmark view changed to flat chronological list (newest first)
+- Bookmark URL changed from `/me/reading-list` to `/me/bookmarks`
+- Router updated to handle `/me/reading-list` → `/me/bookmarks` redirect
+- Me.tsx bookmarks tab now uses dynamic filter titles and chronological sorting
+- Me.tsx updated to use faClock icon instead of faBars
+- Removed bookmark count from section headings for cleaner display
+- Hide close/collapse sidebar buttons on mobile for better UX
+
+### Fixed
+
+- Bookmark sorting now uses proper display time (created_at || listUpdatedAt) with nulls last
+- Robust sorting of merged bookmarks with fallback timestamps
+- Corrected bookmark timestamp to use bookmark list creation time, not content creation time
+- Preserved content created_at while adding listUpdatedAt for proper sorting
+- Removed synthetic added_at field, now uses created_at from bookmark list event
+- Consistent chronological sorting with useMemo optimization
+- Removed unused faTimes import
+- Bookmark timestamps now show sane dates using created_at fallback to listUpdatedAt
+- Guarded formatters to prevent timestamp display errors
+
+### Refactored
+
+- Removed excessive debug logging for cleaner console output
+- Bookmark timestamp handling never defaults to "now", allows nulls and sorts nulls last
+- Renders empty when timestamp is missing instead of showing invalid dates
+
+## [0.10.10] - 2025-10-22
+
+### Changed
+
+- Version bump for consistency (no user-facing changes)
+
+## [0.10.9] - 2025-10-21
+
+### Fixed
+
+- Event fetching reliability with exponential backoff in eventManager
+  - Improved retry logic with incremental backoff delays
+  - Better handling of concurrent event requests
+  - More robust event retrieval from relay pool
+- Bookmark timestamp handling
+  - Use per-item `added_at`/`created_at` timestamps when available
+  - Improves accuracy of bookmark date tracking
+
+### Changed
+
+- Removed all debug console logs
+  - Cleaner console output in development and production
+  - Improved performance by eliminating debugging statements
+
+## [0.10.8] - 2025-10-21
+
+### Added
+
+- Individual event rendering via `/e/:eventId` path
+  - Display `kind:1` notes and other events with article-like presentation
+  - Publication date displayed in top-right corner like articles
+  - Author attribution with "Note by @author" titles
+  - Direct event loading with intelligent caching from eventStore
+- Centralized event fetching via new `eventManager` singleton
+  - Request deduplication for concurrent fetches
+  - Automatic retry logic when relay pool becomes available
+  - Non-blocking background fetching with 12-second timeout
+  - Seamless integration with eventStore for instant cached event display
+
+### Fixed
+
+- Bookmark hydration efficiency
+  - Only request content for bookmarks missing data (not all bookmarks)
+  - Use eventStore fallback for instant display of cached profiles
+  - Prevents over-fetching and improves initial load performance
+- Search button behavior for notes
+  - Opens `kind:1` notes directly via `/e/{eventId}` instead of search portal
+  - Articles continue to use search portal with proper naddr encoding
+  - Removes unwanted `nostr-event:` prefix from URLs
+- Author profile resolution
+  - Fetch author profiles from eventStore cache first before relay requests
+  - Instant title updates if profile already loaded
+  - Graceful fallback to short pubkey display if profile unavailable
+
+## [0.10.7] - 2025-10-21
+
+### Fixed
+
+- Profile pages now display all writings correctly
+  - Events are now stored in eventStore as they stream in from relays
+  - `fetchBlogPostsFromAuthors` now accepts `eventStore` parameter like other fetch functions
+  - Ensures all writings appear on `/p/` routes, not just the first few
+  - Background fetching of highlights and writings uses consistent patterns
+
+### Changed
+
+- Simplified profile background fetching logic for better maintainability
+  - Extracted relay URLs to variable for clarity
+  - Consistent error handling patterns across fetch functions
+  - Clearer comments about no-limit fetching behavior
+
+## [0.10.6] - 2025-10-21
+
+### Added
+
+- Text-to-speech reliability improvements
+  - Chunking support for long-form content to prevent WebSpeech API cutoffs
+  - Automatic chunk-based resumption for interrupted playback
+  - Better handling of content exceeding browser TTS limits
+
+### Fixed
+
+- Tab switching regression on `/me` page
+  - Resolved infinite update loop caused by circular dependency in `useCallback` hooks
+  - Tab navigation now properly updates UI when URL changes
+  - Removed `loadedTabs` from dependency arrays to prevent re-render cycles
+- Explore page data loading patterns
+  - Implemented subscribe-first, non-blocking loading model
+  - Removed all timeouts in favor of immediate subscription and progressive hydration
+  - Contacts, writings, and highlights now stream results as they arrive
+  - Nostrverse content loads in background without blocking UI
+- Text-to-speech handler cleanup
+  - Removed no-op self-assignment in rate change handler
+
+## [0.10.4] - 2025-10-21
+
+### Added
+
+- Web Share Target support for PWA (system-level share integration)
+  - Boris can now receive shared URLs from other apps on mobile and desktop
+  - Implements POST-based Web Share Target API per Chrome standards
+  - Service worker intercepts share requests and redirects to handler route
+  - ShareTargetHandler component auto-saves shared URLs as web bookmarks
+  - Android compatibility with URL extraction from text field when url param is missing
+  - Automatic navigation to bookmarks list after successful save
+  - Login prompt when sharing while logged out
+
+### Changed
+
+- Manifest now includes `share_target` configuration for system share menu integration
+- Service worker handles POST requests to `/share-target` endpoint
+- Added `/share-target` route for processing incoming shared content
+
+## [0.10.3] - 2025-10-21
+
+### Added
+
+- Content filtering setting to hide articles posted by bots
+  - New "Hide content posted by bots" checkbox in Explore settings (enabled by default)
+  - Filters articles where author's profile name or display_name contains "bot" (case-insensitive)
+  - Applies to both Explore page and Me section writings
+
+### Fixed
+
+- Resolved all linting and type checking issues
+  - Added missing React Hook dependencies to `useMemo` and `useEffect`
+  - Wrapped loader functions in `useCallback` to prevent unnecessary re-renders
+  - Removed unused variables (`queryTime`, `startTime`, `allEvents`)
+  - All ESLint warnings and TypeScript errors now resolved
+
+## [0.10.2] - 2025-10-20
+
+### Added
+
+- Text-to-speech (TTS) speaker language selection mode
+  - New "Speaker language" dropdown in TTS settings (system or content)
+  - Detects content language using tinyld for accurate voice matching
+  - Falls back to system language when content detection unavailable
+  - Top 10 languages featured in dropdown for quick access
+- TTS example text section in settings
+  - Test TTS voices directly in the settings panel
+  - Uses Boris mission statement as example text
+  - Real-time speaker selection testing
+
+### Changed
+
+- TTS language selection now uses "Speaker language" terminology
+  - Distinguishes between American English (en-US) and British English (en-GB)
+  - Improved language detection with content-aware voice selection
+  - Streamlined dropdown for better UX
+
+### Fixed
+
+- TTS voice detection and selection logic
+  - Proper empty catch block handling instead of silently failing
+  - Consistent use of `setting-select` class for dropdown styling
+  - Improved dropdown spacing with adequate padding-right
+
+## [0.10.0] - 2025-01-27
+
+### Added
+
+- Centralized bookmark loading with streaming and auto-decrypt
+  - Bookmarks now load progressively with streaming updates
+  - Auto-decrypt bookmarks as they arrive from relays
+  - Individual decrypt buttons for encrypted bookmark events
+  - Centralized bookmark controller for consistent loading across the app
+- Enhanced debug page with comprehensive diagnostics
+  - Interactive NIP-04 and NIP-44 encryption/decryption testing
+  - Live performance timing with stopwatch display
+  - Bookmark loading and decryption diagnostics
+  - Real-time bunker logs with filtering and clearing
+  - Version and git commit footer
+- Bunker (NIP-46) authentication support
+  - Support for remote signing via Nostr Connect protocol
+  - Bunker URI input with validation and error handling
+  - Automatic reconnection on app restore with proper permissions
+  - Signer suggestions in error messages (Amber, nsec.app, Nostrum)
+
+### Changed
+
+- Improved bookmark loading performance
+  - Non-blocking, progressive bookmark updates via callback pattern
+  - Batched background hydration using EventLoader and AddressLoader
+  - Shorter timeouts for debug page bookmark loading
+  - Sequential decryption instead of concurrent to avoid queue issues
+- Enhanced bunker error messages
+  - Formatted error messages with signer suggestions
+  - Links to nos2x, Amber, nsec.app, and Nostrum signers
+  - Better error handling for missing signer extensions
+- Centralized bookmark loading architecture
+  - Single shared bookmark controller for consistent loading
+  - Unified bookmark loading with streaming and auto-decrypt
+  - Consolidated bookmark loading into single centralized function
+
+### Fixed
+
+- NIP-46 bunker signing and decryption
+  - NostrConnectSigner properly reconnects with permissions on app restore
+  - Bunker relays added to relay pool for signing requests
+  - Proper setup of pool and relays before bunker reconnection
+  - Expose nip04/nip44 on NostrConnectAccount for bookmark decryption
+  - Cache wrapped nip04/nip44 objects instead of using getters
+  - Wait for bunker relay connections before marking signer ready
+  - Validate bunker URI (remote must differ from user pubkey)
+  - Accept remote===pubkey for Amber compatibility
+- Bookmark loading and decryption
+  - Bookmarks load and complete properly with streaming
+  - Auto-decrypt private bookmarks with NIP-04 detection
+  - Include decrypted private bookmarks in sidebar
+  - Skip background event fetching when there are too many IDs
+  - Only build bookmarks from ready events (unencrypted or decrypted)
+  - Restore Debug page decrypt display via onDecryptComplete callback
+  - Make controller onEvent non-blocking for queryEvents completion
+  - Proper timeout handling for bookmark decryption (no hanging)
+  - Smart encryption detection with consistent padlock display
+  - Sequential decryption instead of concurrent to avoid queue issues
+  - Add extraRelays to EventLoader and AddressLoader
+- TypeScript and linting errors throughout
+  - Replace empty catch blocks with warnings
+  - Fix explicit any types
+  - Add missing useEffect dependencies
+  - Resolve all linting issues in App.tsx, Debug.tsx, and async utilities
+
+### Performance
+
+- Non-blocking NIP-46 operations
+  - Fire-and-forget NIP-46 publish for better UI responsiveness
+  - Non-blocking bookmark decryption with sequential processing
+  - Make controller onEvent non-blocking for queryEvents completion
+- Optimized bookmark loading
+  - Batched background hydration using EventLoader and AddressLoader
+  - Progressive, non-blocking bookmark loading with streaming
+  - Shorter timeouts for debug page bookmark loading
+  - Remove artificial delays from bookmark decryption
+
+### Refactored
+
+- Centralized bookmark controller architecture
+  - Extract bookmark streaming helpers and centralize loading
+  - Consolidated bookmark loading into single function
+  - Remove deprecated bookmark service files
+  - Share bookmark controller between components
+- Debug page organization
+  - Extract VersionFooter component to eliminate duplication
+  - Structured sections with proper layout and styling
+  - Apply settings page styling structure
+- Simplified bunker implementation following applesauce patterns
+  - Clean up bunker implementation for better maintainability
+  - Import RELAYS from central config (DRY principle)
+  - Update RELAYS list with relay.nsec.app
+
+### Documentation
+
+- Comprehensive Amber.md documentation
+  - Amethyst-style bookmarks section
+  - Bunker decrypt investigation summary
+  - Critical queue disabling requirement
+  - NIP-46 setup and troubleshooting
+
+## [0.9.1] - 2025-10-20
+
+### Added
+
+- Video embedding for nostr-native content
+  - Detect and embed `<video>...</video>` blocks (including nested `<source>`)
+  - Detect and embed `<img src="…(mp4|webm|ogg|mov|avi|mkv|m4v)">` tags
+  - Detect and embed bare video file URLs and platform-classified video links
+- Media display settings
+  - New "Render video links as embeds" setting (defaults to enabled)
+  - New "Full-width images" display option
+  - Dedicated "Media Display" settings section
+- Article view improvements
+  - Center images by default in reader
+  - Writings list sorted by publication date (newest first)
+
+### Changed
+
+- Enable media display options by default for a better out‑of‑the‑box experience
+- Constrain video player to reader width to prevent horizontal overflow
+
+### Fixed
+
+- Prevent double video player rendering when both processor and panel attempted to embed
+- Remove text artifacts and broken tags when converting markdown image/video URLs
+  - Improved URL regex and robust tag replacement
+  - Avoid injecting unknown img props from markdown renderer
+- Resolved remaining ESLint and TypeScript issues
+
+### Performance
+
+- Optimized Support page loading with instant display and skeletons
+
+## [0.9.0] - 2025-01-20
+
+### Added
+
+- User relay list integration (NIP-65) and blocked relays (NIP-51)
+  - Automatically loads user's relay list from kind 10002 events
+  - Supports blocked relay filtering from kind 10006 mute lists
+  - Integrates with existing relay pool for seamless user experience
+- Relay list debug section in Debug component
+  - Enhanced debugging capabilities for relay list loading
+  - Detailed logging for relay query diagnostics
+
+### Changed
+
+- Improved relay list loading performance
+  - Added streaming callback to relay list service for faster results
+  - User relay list now streams into pool immediately and finalizes after blocked relays
+  - Made relay list loading non-blocking in App.tsx
+- Enhanced relay URL handling
+  - Normalized relay URLs to match applesauce-relay internal format
+  - Removed relay.dergigi.com from default relays
+  - Use user's relay list exclusively when logged in
+
+### Fixed
+
+- Resolved all linting issues across the codebase
+- Fixed TypeScript type issues in relayListService
+  - Replaced any types with proper NostrEvent types
+  - Improved type safety and code quality
+- Cleaned up temporary test relays from hardcoded list
+- Removed non-relay console.log statements and debug output
+
+### Technical
+
+- Enhanced relay initialization logging for better diagnostics
+- Improved error handling and timeout management for relay queries
+- Better separation of concerns between relay loading and application startup
+
+## [0.8.6] - 2025-10-20
+
+### Fixed
+
+- React Hooks violations in NostrMentionLink component
+  - Fixed useEffect dependency warnings by removing isMounted from dependencies
+  - Reverted to inline mount tracking with useRef for safer lifecycle handling
+
+## [0.8.4] - 2024-10-20
+
+### Added
+
+- Progressive article hydration for reads tab
+  - Articles now load titles, summaries, images, and author information progressively
+  - Implemented readsController following the same pattern as bookmarkController
+  - Uses AddressLoader for efficient batched article event retrieval
+  - Articles rehydrate as data arrives from relays without blocking initial display
+  - Event store integration for caching article events
+  - Centralized reads data fetching following DRY principles
+
+### Fixed
+
+- Fixed React type imports in useArticleLoader
+  - Import `Dispatch` and `SetStateAction` directly from 'react' instead of using `React.` prefix
+  - Resolves ESLint no-undef errors
+
+## [0.8.3] - 2025-01-19
+
+### Fixed
+
+- Highlight creation now shows immediate UI feedback without page refresh
+  - Fixed streaming highlight merge logic to preserve newly created highlights
+  - Decoupled cached highlight sync from content loading to prevent unintended reloads
+  - Newly created highlights appear instantly in both reader and highlights panel
+  - Highlights remain visible while remote results stream in and merge properly
+
+### Changed
+
+- Improved highlight creation user experience
+  - Selection clearing and synchronous rendering for immediate highlight display
+  - Better error handling for bunker permission issues with user-friendly messages
+
+## [0.8.2] - 2025-10-19
+
+### Added
+
+- Reading progress indicator in compact bookmark cards
+  - Shows progress bar for articles and web bookmarks with reading data
+  - Progress bar aligned with bookmark text for better visual association
+  - Color-coded progress (blue for reading, green for completed, gray for started)
+
+### Changed
+
+- Compact cards layout optimizations for more space-efficient display
+  - Reduced vertical padding from 0.5rem to 0.25rem
+  - Reduced compact row height from 28px to 24px
+  - Reduced gap between compact cards from 0.5rem to 0.25rem
+- Reading progress bar styling for compact view
+  - Bar height reduced from 2px to 1px for more subtle appearance
+  - Left margin of 1.5rem aligns bar with bookmark text instead of appearing as separator
+
+### Fixed
+
+- Removed borders from compact bookmarks in bookmarks sidebar
+  - Border styling from `.bookmarks-list` no longer applies to compact cards
+  - Compact cards now display as truly borderless and transparent
+
+## [0.8.0] - 2025-10-19
+
+### Added
+
+- Centralized reading progress controller for non-blocking reading position sync
+  - Progressive loading with caching from event store
+  - Streaming updates from relays with proper merging
+  - 2-second completion hold at 100% reading position to prevent UI jitter
+  - Configurable auto-mark-as-read at 100% reading progress
+- Reading progress indicators on blog post cards
+  - Visual progress bars on article cards in Explore and bookmarks sidebar
+  - Persistent reading position synced across devices via NIP-85
+
+### Changed
+
+- Reading position sync now enabled by default in runtime paths
+- Improved auto-mark-as-read behavior with reliable completion detection
+- Reading progress events use proper NIP-85 specification (kind 39802)
+
+### Fixed
+
+- Reading position saves with proper validation and event store integration
+- Profile page writings loading now fetches all writings without limits
+- Consistent reading progress calculation and event publishing
+
+### Performance
+
+- Non-blocking reading progress controller with streaming updates
+- Cache-first loading strategy with local event store before relay queries
+- Efficient progress merging and deduplication
+
+## [0.7.4] - 2025-10-18
+
+### Added
+
+- Profile page data preloading for instant tab switching
+  - Automatically preloads all highlights and writings when viewing a profile (`/p/` pages)
+  - Non-blocking background fetch stores all events in event store
+  - Tab switching becomes instant after initial preload
+
+### Changed
+
+- `/me/bookmarks` tab now displays in cards view only
+  - Removed view mode toggle buttons (compact, large) from bookmarks tab
+  - Cards view provides optimal bookmark browsing experience
+  - Grouping toggle (grouped/flat) still available
+- Highlights sidebar filters simplified when logged out
+  - Only nostrverse filter button shown when not logged in
+  - Friends and personal highlight filters hidden when logged out
+  - Cleaner UX showing only available options
+
+### Fixed
+
+- Profile page tabs now display cached content instantly
+  - Highlights and writings show immediately from event store cache
+  - Network fetches happen in background without blocking UI
+  - Matches Explore and Debug page non-blocking loading pattern
+  - Eliminated loading delays when switching between tabs
+
+### Performance
+
+- Cache-first profile loading strategy
+  - Instant display of cached highlights and writings from event store
+  - Background refresh updates data without blocking
+  - Tab switches show content immediately without loading states
+
+## [0.7.3] - 2025-10-18
+
+### Added
+
+- Centralized nostrverse writings controller for kind 30023 content
+  - Automatically starts at app initialization
+  - Streams nostrverse blog posts progressively to Explore page
+  - Provides non-blocking, cache-first loading strategy
+- Centralized nostrverse highlights controller
+  - Pre-loads nostrverse highlights at app start for instant toggling
+  - Streams highlights progressively to Explore page
+  - Integrated with EventStore for caching
+- Writings loading debug section on `/debug` page
+  - Diagnostics for writings controller and loading states
+
+### Changed
+
+- Explore page now uses centralized `writingsController` for user's own writings
+  - Auto-loads user writings at login for instant availability
+  - Non-blocking fetch with progressive streaming
+- Explore page loading strategy optimized
+  - Shows skeleton placeholders instead of blocking spinners
+  - Seeds from cache, then streams and merges results progressively
+  - Keeps nostrverse fetches non-blocking
+- User's own writings now included in Explore when enabled
+  - Lazy-loads on 'mine' toggle when logged in
+  - Streams in parallel with friends/nostrverse content
+
+### Fixed
+
+- Explore page works correctly in logged-out mode
+  - Relies solely on centralized nostrverse controllers
+  - Controllers start even when logged out
+  - Fetches nostrverse content properly without authentication
+- Explore page no longer allows disabling all scope filters
+  - Ensures at least one filter (mine/friends/nostrverse) remains active
+  - Prevents blank content state
+- Explore page reflects default scope setting immediately
+  - No more blank lists on initial load
+  - Pre-loads and merges nostrverse from event store
+- Explore page highlights properly scoped
+  - Nostrverse highlights never block the page
+  - Shows empty state instead of spinner
+  - Streams results into store immediately
+  - Highlights are merged and loaded correctly
+- Article-specific highlights properly filtered
+  - Highlights scoped to current article on `/a/` and `/r/` routes
+  - Derives coordinate from naddr for early filtering
+  - Sidebar and content only show relevant highlights
+  - ContentPanel shows only article-specific highlights for nostr articles
+- Explore writings properly deduplicated
+  - Deduplication by replaceable event (author:d-tag) happens before visibility filtering
+  - Consistent dedupe/sort behavior across all loading scenarios
+- Debug page writings loading section added
+  - No infinite loop when loading nostrverse content
+
+### Performance
+
+- Non-blocking explore page loading
+  - Fully non-blocking loading strategy
+  - Seeds caches then streams and merges results progressively
+- Lazy-loading for content filters
+  - Nostrverse writings lazy-load when toggled on while logged in
+  - Avoids redundant loading with guard flags
+- Streaming callbacks for progressive updates
+  - Writings stream to UI via onPost callback
+  - Posts appear instantly as they arrive from cache or network
+
 ## [0.7.2] - 2025-01-27
 
 ### Added
@@ -1910,7 +2539,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Optimize relay usage following applesauce-relay best practices
 - Use applesauce-react event models for better profile handling
 
-[Unreleased]: https://github.com/dergigi/boris/compare/v0.7.2...HEAD
+[Unreleased]: https://github.com/dergigi/boris/compare/v0.10.12...HEAD
+[0.10.12]: https://github.com/dergigi/boris/compare/v0.10.11...v0.10.12
+[0.10.11]: https://github.com/dergigi/boris/compare/v0.10.10...v0.10.11
+[0.10.10]: https://github.com/dergigi/boris/compare/v0.10.9...v0.10.10
+[0.10.9]: https://github.com/dergigi/boris/compare/v0.10.8...v0.10.9
+[0.10.8]: https://github.com/dergigi/boris/compare/v0.10.7...v0.10.8
+[0.10.7]: https://github.com/dergigi/boris/compare/v0.10.6...v0.10.7
+[0.10.6]: https://github.com/dergigi/boris/compare/v0.10.5...v0.10.6
+[0.10.5]: https://github.com/dergigi/boris/compare/v0.10.4...v0.10.5
+[0.10.4]: https://github.com/dergigi/boris/compare/v0.10.3...v0.10.4
+[0.10.3]: https://github.com/dergigi/boris/compare/v0.10.2...v0.10.3
+[0.10.2]: https://github.com/dergigi/boris/compare/v0.10.1...v0.10.2
+[0.10.1]: https://github.com/dergigi/boris/compare/v0.10.0...v0.10.1
+[0.10.0]: https://github.com/dergigi/boris/compare/v0.9.1...v0.10.0
+[0.9.1]: https://github.com/dergigi/boris/compare/v0.9.0...v0.9.1
+[0.8.3]: https://github.com/dergigi/boris/compare/v0.8.2...v0.8.3
+[0.8.2]: https://github.com/dergigi/boris/compare/v0.8.0...v0.8.2
+[0.8.0]: https://github.com/dergigi/boris/compare/v0.7.4...v0.8.0
+[0.7.4]: https://github.com/dergigi/boris/compare/v0.7.3...v0.7.4
+[0.7.3]: https://github.com/dergigi/boris/compare/v0.7.2...v0.7.3
 [0.7.2]: https://github.com/dergigi/boris/compare/v0.7.0...v0.7.2
 [0.7.0]: https://github.com/dergigi/boris/compare/v0.6.24...v0.7.0
 [0.6.24]: https://github.com/dergigi/boris/compare/v0.6.23...v0.6.24

FEATURES.md

@@ -11,6 +11,7 @@
 - **Distraction‑free view**: Clean typography, optional hero image, summary, and published date.
 - **Reading time**: Displays estimated reading time for text or duration for supported videos.
 - **Progress**: Reading progress indicator with completion state.
+- **Text‑to‑Speech**: Listen to articles with browser‑native TTS; play/pause/stop controls with adjustable speed (0.8–1.6x).
 - **Menus**: Quick actions to open, share, or copy links (for both Nostr and web content).
 - **Performance**: Lightweight fetching and caching for speed; skeleton loaders to avoid empty flashes.
 

api/article-og.ts

@@ -15,7 +15,6 @@ const RELAYS = [
   'wss://relay.dergigi.com',
   'wss://wot.dergigi.com',
   'wss://relay.snort.social',
-  'wss://relay.current.fyi',
   'wss://nostr-pub.wellorder.net',
   'wss://purplepag.es',
   'wss://relay.primal.net'
@@ -215,12 +214,6 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
 
   const debugEnabled = req.query.debug === '1' || req.headers['x-boris-debug'] === '1'
   if (debugEnabled) {
-    console.log('[article-og] request', JSON.stringify({
-      naddr,
-      ua: userAgent || null,
-      isCrawlerRequest,
-      path: req.url || null
-    }))
     res.setHeader('X-Boris-Debug', '1')
   }
 
@@ -257,7 +250,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
     res.setHeader('Content-Type', 'text/html; charset=utf-8')
     res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate')
     if (debugEnabled) {
-      console.log('[article-og] response', JSON.stringify({ mode: 'browser', naddr }))
+      // Debug mode enabled
     }
     return res.status(200).send(html)
   }
@@ -268,7 +261,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
   if (cached && cached.expires > now) {
     setCacheHeaders(res)
     if (debugEnabled) {
-      console.log('[article-og] response', JSON.stringify({ mode: 'bot', naddr, cache: true }))
+      // Debug mode enabled
     }
     return res.status(200).send(cached.html)
   }
@@ -286,7 +279,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
     // Send response
     setCacheHeaders(res)
     if (debugEnabled) {
-      console.log('[article-og] response', JSON.stringify({ mode: 'bot', naddr, cache: false }))
+      // Debug mode enabled
     }
     return res.status(200).send(html)
   } catch (err) {
@@ -296,7 +289,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
     const html = generateHtml(naddr, null)
     setCacheHeaders(res, 3600)
     if (debugEnabled) {
-      console.log('[article-og] response', JSON.stringify({ mode: 'bot-fallback', naddr }))
+      // Debug mode enabled
     }
     return res.status(200).send(html)
   }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "boris",
-  "version": "0.6.13",
+  "version": "0.10.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "boris",
-      "version": "0.6.13",
+      "version": "0.10.9",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.1.0",
         "@fortawesome/free-regular-svg-icons": "^7.1.0",
@@ -35,6 +35,7 @@
         "rehype-prism-plus": "^2.0.1",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.1",
+        "tinyld": "^1.3.4",
         "use-pull-to-refresh": "^2.4.1"
       },
       "devDependencies": {
@@ -11215,6 +11216,22 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/tinyld": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/tinyld/-/tinyld-1.3.4.tgz",
+      "integrity": "sha512-u26CNoaInA4XpDU+8s/6Cq8xHc2T5M4fXB3ICfXPokUQoLzmPgSZU02TAkFwFMJCWTjk53gtkS8pETTreZwCqw==",
+      "license": "MIT",
+      "bin": {
+        "tinyld": "bin/tinyld.js",
+        "tinyld-heavy": "bin/tinyld-heavy.js",
+        "tinyld-light": "bin/tinyld-light.js"
+      },
+      "engines": {
+        "node": ">= 12.10.0",
+        "npm": ">= 6.12.0",
+        "yarn": ">= 1.20.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boris",
-  "version": "0.7.3",
+  "version": "0.10.14",
   "description": "A minimal nostr client for bookmark management",
   "homepage": "https://read.withboris.com/",
   "type": "module",
@@ -38,6 +38,7 @@
     "rehype-prism-plus": "^2.0.1",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
+    "tinyld": "^1.3.4",
     "use-pull-to-refresh": "^2.4.1"
   },
   "devDependencies": {

public/manifest.webmanifest

@@ -9,6 +9,16 @@
   "background_color": "#0b1220",
   "orientation": "any",
   "categories": ["productivity", "social", "utilities"],
+  "share_target": {
+    "action": "/share-target",
+    "method": "POST",
+    "enctype": "multipart/form-data",
+    "params": {
+      "title": "title",
+      "text": "text",
+      "url": "link"
+    }
+  },
   "icons": [
     {
       "src": "/icon-192.png",

public/md/NIP-85.md

@@ -0,0 +1,75 @@
+# NIP-85
+
+## Reading Progress
+
+`draft` `optional`
+
+This NIP defines kind `39802`, a parameterized replaceable event for tracking reading progress across articles and web content.
+
+## Table of Contents
+
+* [Format](#format)
+  * [Tags](#tags)
+  * [Content](#content)
+* [Examples](#examples)
+
+## Format
+
+Reading progress events use NIP-33 parameterized replaceable semantics. The `d` tag serves as the unique identifier per author and target content.
+
+### Tags
+
+Events SHOULD tag the source of the reading progress, whether nostr-native or not. `a` tags should be used for nostr events and `r` tags for URLs.
+
+When tagging a URL, clients generating these events SHOULD do a best effort of cleaning the URL from trackers or obvious non-useful information from the query string.
+
+- `d` (required): Unique identifier for the target content
+  - For Nostr articles: `30023:<pubkey>:<identifier>` (matching the article's coordinate)
+  - For external URLs: `url:<base64url-encoded-url>`
+- `a` (optional but recommended for Nostr articles): Article coordinate `30023:<pubkey>:<identifier>`
+- `r` (optional but recommended for URLs): Raw URL of the external content
+
+### Content
+
+The content is a JSON object with the following fields:
+
+- `progress` (required): Number between 0 and 1 representing reading progress (0 = not started, 1 = completed)
+- `loc` (optional): Number representing a location marker (e.g., pixel scroll position, page number, etc.)
+- `ts` (optional): Unix timestamp (seconds) when the progress was recorded
+- `ver` (optional): Schema version string
+
+The latest event by `created_at` per (`pubkey`, `d`) pair is authoritative (NIP-33 semantics).
+
+Clients SHOULD implement rate limiting to avoid excessive relay traffic (debounce writes, only save significant changes).
+
+## Examples
+
+### Nostr Article
+
+```json
+{
+  "kind": 39802,
+  "pubkey": "<user-pubkey>",
+  "created_at": 1734635012,
+  "content": "{\"progress\":0.66,\"loc\":1432,\"ts\":1734635012,\"ver\":\"1\"}",
+  "tags": [
+    ["d", "30023:<author-pubkey>:<article-identifier>"],
+    ["a", "30023:<author-pubkey>:<article-identifier>"]
+  ]
+}
+```
+
+### External URL
+
+```json
+{
+  "kind": 39802,
+  "pubkey": "<user-pubkey>",
+  "created_at": 1734635999,
+  "content": "{\"progress\":1,\"ts\":1734635999,\"ver\":\"1\"}",
+  "tags": [
+    ["d", "url:aHR0cHM6Ly9leGFtcGxlLmNvbS9wb3N0"],
+    ["r", "https://example.com/post"]
+  ]
+}
+```

src/App.tsx

@@ -8,25 +8,30 @@ import { AccountManager, Accounts } from 'applesauce-accounts'
 import { registerCommonAccountTypes } from 'applesauce-accounts/accounts'
 import { RelayPool } from 'applesauce-relay'
 import { NostrConnectSigner } from 'applesauce-signers'
+import type { NostrEvent } from 'nostr-tools'
 import { getDefaultBunkerPermissions } from './services/nostrConnect'
 import { createAddressLoader } from 'applesauce-loaders/loaders'
 import Debug from './components/Debug'
 import Bookmarks from './components/Bookmarks'
 import RouteDebug from './components/RouteDebug'
 import Toast from './components/Toast'
+import ShareTargetHandler from './components/ShareTargetHandler'
 import { useToast } from './hooks/useToast'
 import { useOnlineStatus } from './hooks/useOnlineStatus'
 import { RELAYS } from './config/relays'
 import { SkeletonThemeProvider } from './components/Skeletons'
-import { DebugBus } from './utils/debugBus'
+import { loadUserRelayList, loadBlockedRelays, computeRelaySet } from './services/relayListService'
+import { applyRelaySetToPool, getActiveRelayUrls, ALWAYS_LOCAL_RELAYS, HARDCODED_RELAYS } from './services/relayManager'
 import { Bookmark } from './types/bookmarks'
 import { bookmarkController } from './services/bookmarkController'
 import { contactsController } from './services/contactsController'
 import { highlightsController } from './services/highlightsController'
 import { writingsController } from './services/writingsController'
+import { readingProgressController } from './services/readingProgressController'
 // import { fetchNostrverseHighlights } from './services/nostrverseService'
 import { nostrverseHighlightsController } from './services/nostrverseHighlightsController'
 import { nostrverseWritingsController } from './services/nostrverseWritingsController'
+import { archiveController } from './services/archiveController'
 
 const DEFAULT_ARTICLE = import.meta.env.VITE_DEFAULT_ARTICLE_NADDR || 
   'naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqqxnzd3cxqmrzv3exgmr2wfesgsmew'
@@ -54,18 +59,14 @@ function AppRoutes({
 
   // Subscribe to bookmark controller
   useEffect(() => {
-    console.log('[bookmark] 🎧 Subscribing to bookmark controller')
     const unsubBookmarks = bookmarkController.onBookmarks((bookmarks) => {
-      console.log('[bookmark] 📥 Received bookmarks:', bookmarks.length)
       setBookmarks(bookmarks)
     })
     const unsubLoading = bookmarkController.onLoading((loading) => {
-      console.log('[bookmark] 📥 Loading state:', loading)
       setBookmarksLoading(loading)
     })
     
     return () => {
-      console.log('[bookmark] 🔇 Unsubscribing from bookmark controller')
       unsubBookmarks()
       unsubLoading()
     }
@@ -73,18 +74,14 @@ function AppRoutes({
 
   // Subscribe to contacts controller
   useEffect(() => {
-    console.log('[contacts] 🎧 Subscribing to contacts controller')
     const unsubContacts = contactsController.onContacts((contacts) => {
-      console.log('[contacts] 📥 Received contacts:', contacts.size)
       setContacts(contacts)
     })
     const unsubLoading = contactsController.onLoading((loading) => {
-      console.log('[contacts] 📥 Loading state:', loading)
       setContactsLoading(loading)
     })
     
     return () => {
-      console.log('[contacts] 🔇 Unsubscribing from contacts controller')
       unsubContacts()
       unsubLoading()
     }
@@ -98,28 +95,34 @@ function AppRoutes({
       
       // Load bookmarks
       if (bookmarks.length === 0 && !bookmarksLoading) {
-        console.log('[bookmark] 🚀 Auto-loading bookmarks on mount/login')
-        bookmarkController.start({ relayPool, activeAccount, accountManager })
+        bookmarkController.start({ relayPool, activeAccount, accountManager, eventStore: eventStore || undefined })
       }
       
       // Load contacts
       if (pubkey && contacts.size === 0 && !contactsLoading) {
-        console.log('[contacts] 🚀 Auto-loading contacts on mount/login')
         contactsController.start({ relayPool, pubkey })
       }
       
       // Load highlights (controller manages its own state)
       if (pubkey && eventStore && !highlightsController.isLoadedFor(pubkey)) {
-        console.log('[highlights] 🚀 Auto-loading highlights on mount/login')
         highlightsController.start({ relayPool, eventStore, pubkey })
       }
 
       // Load writings (controller manages its own state)
       if (pubkey && eventStore && !writingsController.isLoadedFor(pubkey)) {
-        console.log('[writings] 🚀 Auto-loading writings on mount/login')
         writingsController.start({ relayPool, eventStore, pubkey })
       }
 
+      // Load reading progress (controller manages its own state)
+      if (pubkey && eventStore && !readingProgressController.isLoadedFor(pubkey)) {
+        readingProgressController.start({ relayPool, eventStore, pubkey })
+      }
+
+      // Load archive (marked-as-read) controller
+      if (pubkey && eventStore && !archiveController.isLoadedFor(pubkey)) {
+        archiveController.start({ relayPool, eventStore, pubkey })
+      }
+
       // Start centralized nostrverse highlights controller (non-blocking)
       if (eventStore) {
         nostrverseHighlightsController.start({ relayPool, eventStore })
@@ -139,10 +142,8 @@ function AppRoutes({
   // Manual refresh (for sidebar button)
   const handleRefreshBookmarks = useCallback(async () => {
     if (!relayPool || !activeAccount) {
-      console.warn('[bookmark] Cannot refresh: missing relayPool or activeAccount')
       return
     }
-    console.log('[bookmark] 🔄 Manual refresh triggered')
     bookmarkController.reset()
     await bookmarkController.start({ relayPool, activeAccount, accountManager })
   }, [relayPool, activeAccount, accountManager])
@@ -152,11 +153,17 @@ function AppRoutes({
     bookmarkController.reset() // Clear bookmarks via controller
     contactsController.reset() // Clear contacts via controller
     highlightsController.reset() // Clear highlights via controller
+    readingProgressController.reset() // Clear reading progress via controller
+    archiveController.reset() // Clear archive state
     showToast('Logged out successfully')
   }
 
   return (
     <Routes>
+      <Route 
+        path="/share-target" 
+        element={<ShareTargetHandler relayPool={relayPool} />} 
+      />
       <Route 
         path="/a/:naddr" 
         element={
@@ -246,7 +253,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/reading-list" 
+        path="/me/bookmarks" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -293,6 +300,18 @@ function AppRoutes({
           />
         } 
       />
+      <Route 
+        path="/me/links/:filter" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+            bookmarks={bookmarks}
+            bookmarksLoading={bookmarksLoading}
+            onRefreshBookmarks={handleRefreshBookmarks}
+          />
+        } 
+      />
       <Route 
         path="/me/writings" 
         element={
@@ -329,6 +348,18 @@ function AppRoutes({
           />
         } 
       />
+      <Route 
+        path="/e/:eventId" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+            bookmarks={bookmarks}
+            bookmarksLoading={bookmarksLoading}
+            onRefreshBookmarks={handleRefreshBookmarks}
+          />
+        } 
+      />
       <Route 
         path="/debug" 
         element={
@@ -373,55 +404,35 @@ function App() {
       // Wire the signer to use this pool; make publish non-blocking so callers don't
       // wait for every relay send to finish. Responses still resolve the pending request.
       NostrConnectSigner.subscriptionMethod = pool.subscription.bind(pool)
-      NostrConnectSigner.publishMethod = (relays: string[], event: unknown) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const result: any = pool.publish(relays, event as any)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if (result && typeof (result as any).subscribe === 'function') {
-          // Subscribe to the observable but ignore completion/errors (fire-and-forget)
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          try { (result as any).subscribe({ complete: () => { /* noop */ }, error: () => { /* noop */ } }) } catch { /* ignore */ }
-        }
-        // Return an already-resolved promise so upstream await finishes immediately
+      NostrConnectSigner.publishMethod = (relays: string[], event: NostrEvent) => {
+        // Fire-and-forget publish; do not block callers
+        pool.publish(relays, event).catch(() => { /* ignore errors */ })
         return Promise.resolve()
       }
-      console.log('[bunker] ✅ Wired NostrConnectSigner to RelayPool publish/subscription (before account load)')
       
       // Create a relay group for better event deduplication and management
       pool.group(RELAYS)
-      console.log('[bunker] Created relay group with', RELAYS.length, 'relays (including local)')
       
       // Load persisted accounts from localStorage
       try {
         const accountsJson = localStorage.getItem('accounts')
-        console.log('[bunker] Raw accounts from localStorage:', accountsJson)
         
         const json = JSON.parse(accountsJson || '[]')
-        console.log('[bunker] Parsed accounts:', json.length, 'accounts')
         
         await accounts.fromJSON(json)
-        console.log('[bunker] Loaded', accounts.accounts.length, 'accounts from storage')
-        console.log('[bunker] Account types:', accounts.accounts.map(a => ({ id: a.id, type: a.type })))
         
         // Load active account from storage
         const activeId = localStorage.getItem('active')
-        console.log('[bunker] Active ID from localStorage:', activeId)
         
         if (activeId) {
           const account = accounts.getAccount(activeId)
-          console.log('[bunker] Found account for ID?', !!account, account?.type)
           
           if (account) {
             accounts.setActive(activeId)
-            console.log('[bunker] ✅ Restored active account:', activeId, 'type:', account.type)
-          } else {
-            console.warn('[bunker] ⚠️  Active ID found but account not in list')
           }
-        } else {
-          console.log('[bunker] No active account ID in localStorage')
         }
       } catch (err) {
-        console.error('[bunker] ❌ Failed to load accounts from storage:', err)
+        console.error('Failed to load accounts from storage:', err)
       }
       
       // Subscribe to accounts changes and persist to localStorage
@@ -443,11 +454,6 @@ function App() {
       const reconnectedAccounts = new Set<string>()
       
             const bunkerReconnectSub = accounts.active$.subscribe(async (account) => {
-              console.log('[bunker] Active account changed:', { 
-                hasAccount: !!account, 
-                type: account?.type,
-                id: account?.id 
-              })
               
               if (account && account.type === 'nostr-connect') {
                 const nostrConnectAccount = account as Accounts.NostrConnectAccount<unknown>
@@ -455,23 +461,17 @@ function App() {
                 try {
                   if (!(nostrConnectAccount as unknown as { disableQueue?: boolean }).disableQueue) {
                     (nostrConnectAccount as unknown as { disableQueue?: boolean }).disableQueue = true
-                    console.log('[bunker] ⚙️  Disabled account request queueing for nostr-connect')
                   }
-                } catch (err) { console.warn('[bunker] failed to disable queue', err) }
+                } catch (err) {
+                  // Ignore queue disable errors
+                }
                 // Note: for Amber bunker, the remote signer pubkey is the user's pubkey. This is expected.
                 
                 // Skip if we've already reconnected this account
                 if (reconnectedAccounts.has(account.id)) {
-                  console.log('[bunker] ⏭️  Already reconnected this account, skipping')
                   return
                 }
                 
-                console.log('[bunker] Account detected. Status:', {
-                  listening: nostrConnectAccount.signer.listening,
-                  isConnected: nostrConnectAccount.signer.isConnected,
-                  hasRemote: !!nostrConnectAccount.signer.remote,
-                  bunkerRelays: nostrConnectAccount.signer.relays
-                })
                 
                 try {
                   // For restored signers, ensure they have the pool's subscription methods
@@ -485,10 +485,9 @@ function App() {
                   const newBunkerRelays = bunkerRelays.filter(url => !existingRelayUrls.has(url))
                   
                   if (newBunkerRelays.length > 0) {
-                    console.log('[bunker] Adding bunker relays to pool BEFORE signer recreation:', newBunkerRelays)
                     pool.group(newBunkerRelays)
                   } else {
-                    console.log('[bunker] Bunker relays already in pool')
+                    // Bunker relays already in pool
                   }
                   
                   const recreatedSigner = new NostrConnectSigner({
@@ -502,85 +501,42 @@ function App() {
                   try {
                     const mergedRelays = Array.from(new Set([...(signerData.relays || []), ...RELAYS]))
                     recreatedSigner.relays = mergedRelays
-                    console.log('[bunker] 🔗 Signer relays merged with app RELAYS:', mergedRelays)
-                  } catch (err) { console.warn('[bunker] failed to merge signer relays', err) }
+                  } catch (err) { /* ignore */ }
                   
                   // Replace the signer on the account
                   nostrConnectAccount.signer = recreatedSigner
-                  console.log('[bunker] ✅ Signer recreated with pool context')
-
-                  // Debug: log publish/subscription calls made by signer (decrypt/sign requests)
+                  
+                  // Fire-and-forget publish for bunker: trigger but don't wait for completion
                   // IMPORTANT: bind originals to preserve `this` context used internally by the signer
                   const originalPublish = (recreatedSigner as unknown as { publishMethod: (relays: string[], event: unknown) => unknown }).publishMethod.bind(recreatedSigner)
                   ;(recreatedSigner as unknown as { publishMethod: (relays: string[], event: unknown) => unknown }).publishMethod = (relays: string[], event: unknown) => {
-                    try {
-                      let method: string | undefined
-                      const content = (event as { content?: unknown })?.content
-                      if (typeof content === 'string') {
-                        try {
-                          const parsed = JSON.parse(content) as { method?: string; id?: unknown }
-                          method = parsed?.method
-                        } catch (err) { console.warn('[bunker] failed to parse event content', err) }
-                      }
-                      const summary = {
-                        relays,
-                        kind: (event as { kind?: number })?.kind,
-                        method,
-                        // include tags array for debugging (NIP-46 expects method tag)
-                        tags: (event as { tags?: unknown })?.tags,
-                        contentLength: typeof content === 'string' ? content.length : undefined
-                      }
-                      console.log('[bunker] publish via signer:', summary)
-                      try { DebugBus.info('bunker', 'publish', summary) } catch (err) { console.warn('[bunker] failed to log to DebugBus', err) }
-                    } catch (err) { console.warn('[bunker] failed to log publish summary', err) }
-                    // Fire-and-forget publish: trigger the publish but do not return the
-                    // Observable/Promise to upstream to avoid their awaiting of completion.
                     const result = originalPublish(relays, event)
                     if (result && typeof (result as { subscribe?: unknown }).subscribe === 'function') {
-                      // Subscribe to the observable but ignore completion/errors (fire-and-forget)
                       try { (result as { subscribe: (h: { complete?: () => void; error?: (e: unknown) => void }) => unknown }).subscribe({ complete: () => { /* noop */ }, error: () => { /* noop */ } }) } catch { /* ignore */ }
                     }
-                    // If it's a Promise, simply ignore it (no await) so it resolves in the background.
-                    // Return a benign object so callers that probe for a "subscribe" property
-                    // (e.g., applesauce makeRequest) won't throw on `"subscribe" in result`.
                     return {} as unknown as never
                   }
-                  const originalSubscribe = (recreatedSigner as unknown as { subscriptionMethod: (relays: string[], filters: unknown[]) => unknown }).subscriptionMethod.bind(recreatedSigner)
-                  ;(recreatedSigner as unknown as { subscriptionMethod: (relays: string[], filters: unknown[]) => unknown }).subscriptionMethod = (relays: string[], filters: unknown[]) => {
-                    try {
-                      console.log('[bunker] subscribe via signer:', { relays, filters })
-                      try { DebugBus.info('bunker', 'subscribe', { relays, filters }) } catch (err) { console.warn('[bunker] failed to log subscribe to DebugBus', err) }
-                    } catch (err) { console.warn('[bunker] failed to log subscribe summary', err) }
-                    return originalSubscribe(relays, filters)
-                  }
 
                   
                   // Just ensure the signer is listening for responses - don't call connect() again
                   // The fromBunkerURI already connected with permissions during login
                   if (!nostrConnectAccount.signer.listening) {
-                    console.log('[bunker] Opening signer subscription...')
                     await nostrConnectAccount.signer.open()
-                    console.log('[bunker] ✅ Signer subscription opened')
-                  } else {
-                    console.log('[bunker] ✅ Signer already listening')
                   }
                   
                   // Attempt a guarded reconnect to ensure Amber authorizes decrypt operations
                   try {
                     if (nostrConnectAccount.signer.remote && !reconnectedAccounts.has(account.id)) {
                       const permissions = getDefaultBunkerPermissions()
-                      console.log('[bunker] Attempting guarded connect() with permissions to ensure decrypt perms', { count: permissions.length })
                       await nostrConnectAccount.signer.connect(undefined, permissions)
-                      console.log('[bunker] ✅ Guarded connect() succeeded with permissions')
                     }
                   } catch (e) {
-                    console.warn('[bunker] ⚠️ Guarded connect() failed:', e)
+                    // Ignore reconnect errors
                   }
                   
                   // Give the subscription a moment to fully establish before allowing decrypt operations
                   // This ensures the signer is ready to handle and receive responses
                   await new Promise(resolve => setTimeout(resolve, 100))
-                  console.log("[bunker] Subscription ready after startup delay")
                   // Fire-and-forget: probe decrypt path to verify Amber responds to NIP-46 decrypt
                   try {
                     const withTimeout = async <T,>(p: Promise<T>, ms = 10000): Promise<T> => {
@@ -593,52 +549,153 @@ function App() {
                       const self = nostrConnectAccount.pubkey
                       // Try a roundtrip so the bunker can respond successfully
                       try {
-                        console.log('[bunker] 🔎 Probe nip44 roundtrip (encrypt→decrypt)…')
-                        const cipher44 = await withTimeout(nostrConnectAccount.signer.nip44!.encrypt(self, 'probe-nip44'))
-                        const plain44 = await withTimeout(nostrConnectAccount.signer.nip44!.decrypt(self, cipher44))
-                        console.log('[bunker] 🔎 Probe nip44 responded:', typeof plain44 === 'string' ? plain44 : typeof plain44)
-                      } catch (err) {
-                        console.log('[bunker] 🔎 Probe nip44 result:', err instanceof Error ? err.message : err)
+                        await withTimeout(nostrConnectAccount.signer.nip44!.encrypt(self, 'probe-nip44'))
+                        await withTimeout(nostrConnectAccount.signer.nip44!.decrypt(self, ''))
+                      } catch (_err) {
+                        // Ignore probe errors
                       }
                       try {
-                        console.log('[bunker] 🔎 Probe nip04 roundtrip (encrypt→decrypt)…')
-                        const cipher04 = await withTimeout(nostrConnectAccount.signer.nip04!.encrypt(self, 'probe-nip04'))
-                        const plain04 = await withTimeout(nostrConnectAccount.signer.nip04!.decrypt(self, cipher04))
-                        console.log('[bunker] 🔎 Probe nip04 responded:', typeof plain04 === 'string' ? plain04 : typeof plain04)
-                      } catch (err) {
-                        console.log('[bunker] 🔎 Probe nip04 result:', err instanceof Error ? err.message : err)
+                        await withTimeout(nostrConnectAccount.signer.nip04!.encrypt(self, 'probe-nip04'))
+                        await withTimeout(nostrConnectAccount.signer.nip04!.decrypt(self, ''))
+                      } catch (_err) {
+                        // Ignore probe errors
                       }
                     }, 0)
-                  } catch (err) {
-                    console.log('[bunker] 🔎 Probe setup failed:', err)
+                  } catch (_err) {
+                    // Ignore signer setup errors
                   }
                   // The bunker remembers the permissions from the initial connection
                   nostrConnectAccount.signer.isConnected = true
                   
-                  console.log('[bunker] Final signer status:', {
-                    listening: nostrConnectAccount.signer.listening,
-                    isConnected: nostrConnectAccount.signer.isConnected,
-                    remote: nostrConnectAccount.signer.remote,
-                    relays: nostrConnectAccount.signer.relays
-                  })
                   
                   // Mark this account as reconnected
                   reconnectedAccounts.add(account.id)
-                  console.log('[bunker] 🎉 Signer ready for signing')
                 } catch (error) {
-                  console.error('[bunker] ❌ Failed to open signer:', error)
+                  console.error('Failed to open signer:', error)
                 }
               }
             })
       
+      // Handle user relay list and blocked relays when account changes
+      const userRelaysSub = accounts.active$.subscribe((account) => {
+        if (account) {
+          // User logged in - start with hardcoded relays immediately, then stream user relay list updates
+          const pubkey = account.pubkey
+
+          // Bunker relays (if any)
+          let bunkerRelays: string[] = []
+          if (account.type === 'nostr-connect') {
+            const nostrConnectAccount = account as Accounts.NostrConnectAccount<unknown>
+            const signerData = nostrConnectAccount.toJSON().signer
+            bunkerRelays = signerData.relays || []
+          }
+          
+
+          // Start with hardcoded + bunker relays immediately (non-blocking)
+          const initialRelays = computeRelaySet({
+            hardcoded: RELAYS,
+            bunker: bunkerRelays,
+            userList: [],
+            blocked: [],
+            alwaysIncludeLocal: ALWAYS_LOCAL_RELAYS
+          })
+          
+
+          // Apply initial set immediately
+          applyRelaySetToPool(pool, initialRelays)
+
+          // Prepare keep-alive helper
+          const updateKeepAlive = () => {
+            const poolWithSub = pool as unknown as { _keepAliveSubscription?: { unsubscribe: () => void } }
+            if (poolWithSub._keepAliveSubscription) {
+              poolWithSub._keepAliveSubscription.unsubscribe()
+            }
+            const activeRelays = getActiveRelayUrls(pool)
+            const newKeepAliveSub = pool.subscription(activeRelays, { kinds: [0], limit: 0 }).subscribe({
+              next: () => {},
+              error: () => {}
+            })
+            poolWithSub._keepAliveSubscription = newKeepAliveSub
+          }
+
+          // Begin loading blocked relays in background
+          const blockedPromise = loadBlockedRelays(pool, pubkey)
+
+          // Stream user relay list; apply immediately on first/updated event
+          loadUserRelayList(pool, pubkey, {
+            onUpdate: (userRelays) => {
+              const interimRelays = computeRelaySet({
+                hardcoded: HARDCODED_RELAYS,
+                bunker: bunkerRelays,
+                userList: userRelays,
+                blocked: [],
+                alwaysIncludeLocal: ALWAYS_LOCAL_RELAYS
+              })
+              
+              applyRelaySetToPool(pool, interimRelays)
+              updateKeepAlive()
+            }
+          }).then(async (userRelayList) => {
+            const blockedRelays = await blockedPromise.catch(() => [])
+
+            const finalRelays = computeRelaySet({
+              hardcoded: userRelayList.length > 0 ? HARDCODED_RELAYS : RELAYS,
+              bunker: bunkerRelays,
+              userList: userRelayList,
+              blocked: blockedRelays,
+              alwaysIncludeLocal: ALWAYS_LOCAL_RELAYS
+            })
+            
+            applyRelaySetToPool(pool, finalRelays)
+            
+            updateKeepAlive()
+            
+            // Update address loader with new relays
+            const activeRelays = getActiveRelayUrls(pool)
+            const addressLoader = createAddressLoader(pool, {
+              eventStore: store,
+              lookupRelays: activeRelays
+            })
+            store.addressableLoader = addressLoader
+            store.replaceableLoader = addressLoader
+          }).catch((error) => {
+            console.error('[relay-init] Failed to load user relay list (continuing with initial set):', error)
+            // Continue with initial relay set on error - no need to change anything
+          })
+        } else {
+          // User logged out - reset to hardcoded relays
+          
+          applyRelaySetToPool(pool, RELAYS)
+          
+          
+          // Update keep-alive subscription
+          const poolWithSub = pool as unknown as { _keepAliveSubscription?: { unsubscribe: () => void } }
+          if (poolWithSub._keepAliveSubscription) {
+            poolWithSub._keepAliveSubscription.unsubscribe()
+          }
+          const newKeepAliveSub = pool.subscription(RELAYS, { kinds: [0], limit: 0 }).subscribe({
+            next: () => {},
+            error: () => {}
+          })
+          poolWithSub._keepAliveSubscription = newKeepAliveSub
+          
+          // Reset address loader
+          const addressLoader = createAddressLoader(pool, {
+            eventStore: store,
+            lookupRelays: RELAYS
+          })
+          store.addressableLoader = addressLoader
+          store.replaceableLoader = addressLoader
+        }
+      })
+      
       // Keep all relay connections alive indefinitely by creating a persistent subscription
       // This prevents disconnection when no other subscriptions are active
       // Create a minimal subscription that never completes to keep connections alive
       const keepAliveSub = pool.subscription(RELAYS, { kinds: [0], limit: 0 }).subscribe({
-        next: () => {}, // No-op, we don't care about events
-        error: (err) => console.warn('Keep-alive subscription error:', err)
+        next: () => {},
+        error: () => {}
       })
-      console.log('🔗 Created keep-alive subscription for', RELAYS.length, 'relay(s)')
       
       // Store subscription for cleanup
       ;(pool as unknown as { _keepAliveSubscription: typeof keepAliveSub })._keepAliveSubscription = keepAliveSub
@@ -660,6 +717,7 @@ function App() {
         accountsSub.unsubscribe()
         activeSub.unsubscribe()
         bunkerReconnectSub.unsubscribe()
+        userRelaysSub.unsubscribe()
         // Clean up keep-alive subscription if it exists
         const poolWithSub = pool as unknown as { _keepAliveSubscription?: { unsubscribe: () => void } }
         if (poolWithSub._keepAliveSubscription) {

src/components/ArchiveFilters.tsx

@@ -16,7 +16,7 @@ const ArchiveFilters: React.FC<ArchiveFiltersProps> = ({ selectedFilter, onFilte
     { type: 'to-read' as const, icon: faBookmark, label: 'To Read' },
     { type: 'reading' as const, icon: faBookOpen, label: 'Reading' },
     { type: 'completed' as const, icon: faCheckCircle, label: 'Completed' },
-    { type: 'marked' as const, icon: faBooks, label: 'Marked as Read' }
+    { type: 'marked' as const, icon: faBooks, label: 'Archived' }
   ]
 
   return (

src/components/BlogPostCard.tsx

@@ -6,18 +6,26 @@ import { formatDistance } from 'date-fns'
 import { BlogPostPreview } from '../services/exploreService'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
+import { isKnownBot } from '../config/bots'
 
 interface BlogPostCardProps {
   post: BlogPostPreview
   href: string
   level?: 'mine' | 'friends' | 'nostrverse'
   readingProgress?: number // 0-1 reading progress (optional)
+  hideBotByName?: boolean // default true
 }
 
-const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingProgress }) => {
+const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingProgress, hideBotByName = true }) => {
   const profile = useEventModel(Models.ProfileModel, [post.author])
   const displayName = profile?.name || profile?.display_name || 
     `${post.author.slice(0, 8)}...${post.author.slice(-4)}`
+  const rawName = (profile?.name || profile?.display_name || '').toLowerCase()
+
+  // Hide bot authors by name/display_name
+  if (hideBotByName && (rawName.includes('bot') || isKnownBot(post.author))) {
+    return null
+  }
   
   const publishedDate = post.published || post.event.created_at
   const formattedDate = formatDistance(new Date(publishedDate * 1000), new Date(), { 
@@ -33,10 +41,23 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingP
   } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
     progressColor = 'var(--color-text)' // Neutral text color (started)
   }
+  
+  // Debug log - reading progress shown as visual indicator
+  if (readingProgress !== undefined) {
+    // Reading progress display
+  }
 
   return (
     <Link 
       to={href}
+      state={{ 
+        previewData: {
+          title: post.title,
+          image: post.image,
+          summary: post.summary,
+          published: post.published
+        }
+      }}
       className={`blog-post-card ${level ? `level-${level}` : ''}`}
       style={{ textDecoration: 'none', color: 'inherit' }}
     >

src/components/BookmarkItem.tsx

@@ -4,7 +4,7 @@ import { faGlobe, faLink } from '@fortawesome/free-solid-svg-icons'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
-import { npubEncode, neventEncode } from 'nostr-tools/nip19'
+import { npubEncode } from 'nostr-tools/nip19'
 import { IndividualBookmark } from '../types/bookmarks'
 import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 import { classifyUrl } from '../utils/helpers'
@@ -19,9 +19,10 @@ interface BookmarkItemProps {
   index: number
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
   viewMode?: ViewMode
+  readingProgress?: number
 }
 
-export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards' }) => {
+export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards', readingProgress }) => {
   const [ogImage, setOgImage] = useState<string | null>(null)
 
   const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
@@ -57,8 +58,6 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
   // Resolve author profile using applesauce
   const authorProfile = useEventModel(Models.ProfileModel, [bookmark.pubkey])
   const authorNpub = npubEncode(bookmark.pubkey)
-  const isHexId = /^[0-9a-f]{64}$/i.test(bookmark.id)
-  const eventNevent = isHexId ? neventEncode({ id: bookmark.id }) : undefined
   
   // Get display name for author
   const getAuthorDisplayName = () => {
@@ -134,17 +133,28 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     extractedUrls,
     onSelectUrl,
     authorNpub,
-    eventNevent,
     getAuthorDisplayName,
     handleReadNow,
     articleImage,
     articleSummary,
-    contentTypeIcon: getContentTypeIcon()
+    contentTypeIcon: getContentTypeIcon(),
+    readingProgress
   }
 
   if (viewMode === 'compact') {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-    const { articleImage, ...compactProps } = sharedProps
+    const compactProps = {
+      bookmark,
+      index,
+      hasUrls,
+      extractedUrls,
+      onSelectUrl,
+      authorNpub,
+      getAuthorDisplayName,
+      handleReadNow,
+      articleSummary,
+      contentTypeIcon: getContentTypeIcon(),
+      readingProgress
+    }
     return <CompactView {...compactProps} />
   }
 

src/components/BookmarkList.tsx

@@ -1,7 +1,8 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faBookmark, faList, faThLarge, faImage, faRotate, faHeart, faPlus, faLayerGroup, faBars } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faBookmark, faList, faThLarge, faImage, faRotate, faHeart, faPlus, faLayerGroup } from '@fortawesome/free-solid-svg-icons'
+import { faClock } from '@fortawesome/free-regular-svg-icons'
 import { formatDistanceToNow } from 'date-fns'
 import { RelayPool } from 'applesauce-relay'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
@@ -13,15 +14,19 @@ import { ViewMode } from './Bookmarks'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { BookmarkSkeleton } from './Skeletons'
-import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWithoutSet } from '../utils/bookmarkUtils'
+import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWithoutSet, hasCreationDate, sortIndividualBookmarks } from '../utils/bookmarkUtils'
 import { UserSettings } from '../services/settingsService'
 import AddBookmarkModal from './AddBookmarkModal'
 import { createWebBookmark } from '../services/webBookmarkService'
-import { RELAYS } from '../config/relays'
 import { Hooks } from 'applesauce-react'
+import { getActiveRelayUrls } from '../services/relayManager'
 import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
 import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
 import LoginOptions from './LoginOptions'
+import { useEffect } from 'react'
+import { readingProgressController } from '../services/readingProgressController'
+import { nip19 } from 'nostr-tools'
+import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 
 interface BookmarkListProps {
   bookmarks: Bookmark[]
@@ -67,9 +72,48 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   const [selectedFilter, setSelectedFilter] = useState<BookmarkFilterType>('all')
   const [groupingMode, setGroupingMode] = useState<'grouped' | 'flat'>(() => {
     const saved = localStorage.getItem('bookmarkGroupingMode')
-    return saved === 'flat' ? 'flat' : 'grouped'
+    return saved === 'grouped' ? 'grouped' : 'flat'
   })
   const activeAccount = Hooks.useActiveAccount()
+  const [readingProgressMap, setReadingProgressMap] = useState<Map<string, number>>(new Map())
+
+  // Subscribe to reading progress updates
+  useEffect(() => {
+    // Get initial progress map
+    setReadingProgressMap(readingProgressController.getProgressMap())
+    
+    // Subscribe to updates
+    const unsubProgress = readingProgressController.onProgress(setReadingProgressMap)
+    
+    return () => {
+      unsubProgress()
+    }
+  }, [])
+
+  // Helper to get reading progress for a bookmark
+  const getBookmarkReadingProgress = (bookmark: IndividualBookmark): number | undefined => {
+    if (bookmark.kind === 30023) {
+      // For articles, use naddr as key
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (!dTag) return undefined
+      try {
+        const naddr = nip19.naddrEncode({
+          kind: 30023,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        return readingProgressMap.get(naddr)
+      } catch (err) {
+        return undefined
+      }
+    }
+    // For web bookmarks and other types, try to use URL if available
+    const urls = extractUrlsFromContent(bookmark.content)
+    if (urls.length > 0) {
+      return readingProgressMap.get(urls[0])
+    }
+    return undefined
+  }
 
   const toggleGroupingMode = () => {
     const newMode = groupingMode === 'grouped' ? 'flat' : 'grouped'
@@ -77,12 +121,24 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
     localStorage.setItem('bookmarkGroupingMode', newMode)
   }
 
+  const getFilterTitle = (filter: BookmarkFilterType): string => {
+    const titles: Record<BookmarkFilterType, string> = {
+      'all': 'All Bookmarks',
+      'article': 'Bookmarked Reads',
+      'external': 'Bookmarked Links',
+      'video': 'Bookmarked Videos',
+      'note': 'Bookmarked Notes',
+      'web': 'Web Bookmarks'
+    }
+    return titles[filter]
+  }
+
   const handleSaveBookmark = async (url: string, title?: string, description?: string, tags?: string[]) => {
     if (!activeAccount || !relayPool) {
       throw new Error('Please login to create bookmarks')
     }
 
-    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, RELAYS)
+    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, getActiveRelayUrls(relayPool))
   }
 
   // Pull-to-refresh for bookmarks
@@ -97,38 +153,58 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
     isDisabled: !onRefresh
   })
 
-  // Merge and flatten all individual bookmarks from all lists
-  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
-    .filter(hasContent)
+  // Merge and flatten all individual bookmarks from all lists - memoized to ensure consistent sorting
+  const sections = useMemo(() => {
+    const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
+      .filter(hasContent)
+      .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b))
+    
+    // Apply filter
+    const filteredBookmarks = filterBookmarksByType(allIndividualBookmarks, selectedFilter)
+    
+    // Separate bookmarks with setName (kind 30003) from regular bookmarks
+    const bookmarksWithoutSet = getBookmarksWithoutSet(filteredBookmarks)
+    const bookmarkSets = getBookmarkSets(filteredBookmarks)
+    
+    // Group non-set bookmarks by source or flatten based on mode
+    const groups = groupIndividualBookmarks(bookmarksWithoutSet)
+    const sectionsArray: Array<{ key: string; title: string; items: IndividualBookmark[] }> = 
+      groupingMode === 'flat'
+        ? [{ key: 'all', title: getFilterTitle(selectedFilter), items: sortIndividualBookmarks(filteredBookmarks) }]
+        : [
+            { key: 'nip51-private', title: 'Private Bookmarks', items: groups.nip51Private },
+            { key: 'nip51-public', title: 'My Bookmarks', items: groups.nip51Public },
+            { key: 'amethyst-private', title: 'Private Lists', items: groups.amethystPrivate },
+            { key: 'amethyst-public', title: 'My Lists', items: groups.amethystPublic },
+            { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb }
+          ]
+    
+    // Add bookmark sets as additional sections (only in grouped mode)
+    if (groupingMode === 'grouped') {
+      bookmarkSets.forEach(set => {
+        sectionsArray.push({
+          key: `set-${set.name}`,
+          title: set.title || set.name,
+          items: set.bookmarks
+        })
+      })
+    }
+    
+    return sectionsArray
+  }, [bookmarks, selectedFilter, groupingMode, settings?.hideBookmarksWithoutCreationDate])
   
-  // Apply filter
-  const filteredBookmarks = filterBookmarksByType(allIndividualBookmarks, selectedFilter)
+  // Get all filtered bookmarks for empty state checks
+  const allIndividualBookmarks = useMemo(() => 
+    bookmarks.flatMap(b => b.individualBookmarks || [])
+      .filter(hasContent)
+      .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b)),
+    [bookmarks, settings?.hideBookmarksWithoutCreationDate]
+  )
   
-  // Separate bookmarks with setName (kind 30003) from regular bookmarks
-  const bookmarksWithoutSet = getBookmarksWithoutSet(filteredBookmarks)
-  const bookmarkSets = getBookmarkSets(filteredBookmarks)
-  
-  // Group non-set bookmarks by source or flatten based on mode
-  const groups = groupIndividualBookmarks(bookmarksWithoutSet)
-  const sections: Array<{ key: string; title: string; items: IndividualBookmark[] }> = 
-    groupingMode === 'flat'
-      ? [{ key: 'all', title: `All Bookmarks (${bookmarksWithoutSet.length})`, items: bookmarksWithoutSet }]
-      : [
-          { key: 'nip51-private', title: 'Private Bookmarks', items: groups.nip51Private },
-          { key: 'nip51-public', title: 'My Bookmarks', items: groups.nip51Public },
-          { key: 'amethyst-private', title: 'Amethyst Private', items: groups.amethystPrivate },
-          { key: 'amethyst-public', title: 'Amethyst Lists', items: groups.amethystPublic },
-          { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb }
-        ]
-  
-  // Add bookmark sets as additional sections
-  bookmarkSets.forEach(set => {
-    sections.push({
-      key: `set-${set.name}`,
-      title: set.title || set.name,
-      items: set.bookmarks
-    })
-  })
+  const filteredBookmarks = useMemo(() => 
+    filterBookmarksByType(allIndividualBookmarks, selectedFilter),
+    [allIndividualBookmarks, selectedFilter]
+  )
   
   if (isCollapsed) {
     // Check if the selected URL is in bookmarks
@@ -220,6 +296,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
                     index={index} 
                     onSelectUrl={onSelectUrl}
                     viewMode={viewMode}
+                    readingProgress={getBookmarkReadingProgress(individualBookmark)}
                   />
                 ))}
               </div>
@@ -240,6 +317,13 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
         </div>
         {activeAccount && (
           <div className="view-mode-right">
+            <IconButton
+              icon={groupingMode === 'grouped' ? faLayerGroup : faClock}
+              onClick={toggleGroupingMode}
+              title={groupingMode === 'grouped' ? 'Show flat chronological list' : 'Show grouped by source'}
+              ariaLabel={groupingMode === 'grouped' ? 'Switch to flat view' : 'Switch to grouped view'}
+              variant="ghost"
+            />
             {onRefresh && (
               <IconButton
                 icon={faRotate}
@@ -251,13 +335,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
                 spin={isRefreshing}
               />
             )}
-            <IconButton
-              icon={groupingMode === 'grouped' ? faLayerGroup : faBars}
-              onClick={toggleGroupingMode}
-              title={groupingMode === 'grouped' ? 'Show flat chronological list' : 'Show grouped by source'}
-              ariaLabel={groupingMode === 'grouped' ? 'Switch to flat view' : 'Switch to grouped view'}
-              variant="ghost"
-            />
             <IconButton
               icon={faList}
               onClick={() => onViewModeChange('compact')}

src/components/BookmarkViews/CardView.tsx

@@ -5,11 +5,11 @@ import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate, renderParsedContent } from '../../utils/bookmarkUtils'
-import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import RichContent from '../RichContent'
 import { classifyUrl } from '../../utils/helpers'
 import { useImageCache } from '../../hooks/useImageCache'
 import { getPreviewImage, fetchOgImage } from '../../utils/imagePreview'
-import { getEventUrl } from '../../config/nostrGateways'
+import { naddrEncode } from 'nostr-tools/nip19'
 
 interface CardViewProps {
   bookmark: IndividualBookmark
@@ -18,12 +18,12 @@ interface CardViewProps {
   extractedUrls: string[]
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
   authorNpub: string
-  eventNevent?: string
   getAuthorDisplayName: () => string
   handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
   articleImage?: string
   articleSummary?: string
   contentTypeIcon: IconDefinition
+  readingProgress?: number
 }
 
 export const CardView: React.FC<CardViewProps> = ({
@@ -33,12 +33,12 @@ export const CardView: React.FC<CardViewProps> = ({
   extractedUrls,
   onSelectUrl,
   authorNpub,
-  eventNevent,
   getAuthorDisplayName,
   handleReadNow,
   articleImage,
   articleSummary,
-  contentTypeIcon
+  contentTypeIcon,
+  readingProgress
 }) => {
   const firstUrl = hasUrls ? extractedUrls[0] : null
   const firstUrlClassificationType = firstUrl ? classifyUrl(firstUrl)?.type : null
@@ -52,6 +52,14 @@ export const CardView: React.FC<CardViewProps> = ({
   const shouldTruncate = !expanded && contentLength > 210
   const isArticle = bookmark.kind === 30023
   
+  // Calculate progress color (matching BlogPostCard logic)
+  let progressColor = '#6366f1' // Default blue (reading)
+  if (readingProgress && readingProgress >= 0.95) {
+    progressColor = '#10b981' // Green (completed)
+  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
+    progressColor = 'var(--color-text)' // Neutral text color (started)
+  }
+  
   // Determine which image to use (article image, instant preview, or OG image)
   const previewImage = articleImage || instantPreview || ogImage
   const cachedImage = useImageCache(previewImage || undefined)
@@ -72,6 +80,29 @@ export const CardView: React.FC<CardViewProps> = ({
     }
   }
 
+  // Get internal route for the bookmark
+  const getInternalRoute = (): string | null => {
+    if (bookmark.kind === 30023) {
+      // Nostr-native article - use /a/ route
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (dTag) {
+        const naddr = naddrEncode({
+          kind: bookmark.kind,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        return `/a/${naddr}`
+      }
+    } else if (bookmark.kind === 1) {
+      // Note - use /e/ route
+      return `/e/${bookmark.id}`
+    } else if (firstUrl) {
+      // External URL - use /r/ route
+      return `/r/${encodeURIComponent(firstUrl)}`
+    }
+    return null
+  }
+
   return (
     <div 
       key={`${bookmark.id}-${index}`}
@@ -93,19 +124,17 @@ export const CardView: React.FC<CardViewProps> = ({
           <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
         </span>
         
-        {eventNevent ? (
-          <a
-            href={getEventUrl(eventNevent)}
-            target="_blank"
-            rel="noopener noreferrer"
+        {getInternalRoute() ? (
+          <Link
+            to={getInternalRoute()!}
             className="bookmark-date-link"
-            title="Open event in search"
+            title="Open in app"
             onClick={(e) => e.stopPropagation()}
           >
-            {formatDate(bookmark.created_at)}
-          </a>
+            {formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}
+          </Link>
         ) : (
-          <span className="bookmark-date">{formatDate(bookmark.created_at)}</span>
+          <span className="bookmark-date">{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
         )}
       </div>
       
@@ -137,19 +166,15 @@ export const CardView: React.FC<CardViewProps> = ({
       )}
       
       {isArticle && articleSummary ? (
-        <div className="bookmark-content article-summary">
-          <ContentWithResolvedProfiles content={articleSummary} />
-        </div>
+        <RichContent content={articleSummary} className="bookmark-content article-summary" />
       ) : bookmark.parsedContent ? (
         <div className="bookmark-content">
           {shouldTruncate && bookmark.content
-            ? <ContentWithResolvedProfiles content={`${bookmark.content.slice(0, 210).trimEnd()}…`} />
+            ? <RichContent content={`${bookmark.content.slice(0, 210).trimEnd()}…`} className="" />
             : renderParsedContent(bookmark.parsedContent)}
         </div>
       ) : bookmark.content && (
-        <div className="bookmark-content">
-          <ContentWithResolvedProfiles content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
-        </div>
+        <RichContent content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
       )}
 
       {contentLength > 210 && (
@@ -163,6 +188,28 @@ export const CardView: React.FC<CardViewProps> = ({
         </button>
       )}
       
+      {/* Reading progress indicator for articles */}
+      {isArticle && readingProgress !== undefined && readingProgress > 0 && (
+        <div 
+          style={{
+            height: '3px',
+            width: '100%',
+            background: 'var(--color-border)',
+            overflow: 'hidden',
+            marginTop: '0.75rem'
+          }}
+        >
+          <div
+            style={{
+              height: '100%',
+              width: `${Math.round(readingProgress * 100)}%`,
+              background: progressColor,
+              transition: 'width 0.3s ease, background 0.3s ease'
+            }}
+          />
+        </div>
+      )}
+      
       <div className="bookmark-footer">
         <div className="bookmark-meta-minimal">
           <Link

src/components/BookmarkViews/CompactView.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDateCompact } from '../../utils/bookmarkUtils'
-import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import RichContent from '../RichContent'
 
 interface CompactViewProps {
   bookmark: IndividualBookmark
@@ -13,6 +14,7 @@ interface CompactViewProps {
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
   articleSummary?: string
   contentTypeIcon: IconDefinition
+  readingProgress?: number
 }
 
 export const CompactView: React.FC<CompactViewProps> = ({
@@ -22,26 +24,34 @@ export const CompactView: React.FC<CompactViewProps> = ({
   extractedUrls,
   onSelectUrl,
   articleSummary,
-  contentTypeIcon
+  contentTypeIcon,
+  readingProgress
 }) => {
+  const navigate = useNavigate()
   const isArticle = bookmark.kind === 30023
   const isWebBookmark = bookmark.kind === 39701
-  const isClickable = hasUrls || isArticle || isWebBookmark
+  const isNote = bookmark.kind === 1
+  const isClickable = hasUrls || isArticle || isWebBookmark || isNote
   
-  const handleCompactClick = () => {
-    if (!onSelectUrl) return
-    
-    if (isArticle) {
-      onSelectUrl('', { id: bookmark.id, kind: bookmark.kind, tags: bookmark.tags, pubkey: bookmark.pubkey })
-    } else if (hasUrls) {
-      onSelectUrl(extractedUrls[0])
-    }
+  const displayText = isArticle && articleSummary ? articleSummary : bookmark.content
+
+  // Calculate progress color
+  let progressColor = '#6366f1' // Default blue (reading)
+  if (readingProgress && readingProgress >= 0.95) {
+    progressColor = '#10b981' // Green (completed)
+  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
+    progressColor = 'var(--color-text)' // Neutral text color (started)
   }
 
-  // For articles, prefer summary; for others, use content
-  const displayText = isArticle && articleSummary 
-    ? articleSummary 
-    : bookmark.content
+  const handleCompactClick = () => {
+    if (isArticle) {
+      onSelectUrl?.('', { id: bookmark.id, kind: bookmark.kind, tags: bookmark.tags, pubkey: bookmark.pubkey })
+    } else if (hasUrls) {
+      onSelectUrl?.(extractedUrls[0])
+    } else if (isNote) {
+      navigate(`/e/${bookmark.id}`)
+    }
+  }
 
   return (
     <div key={`${bookmark.id}-${index}`} className={`individual-bookmark compact ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
@@ -54,14 +64,41 @@ export const CompactView: React.FC<CompactViewProps> = ({
         <span className="bookmark-type-compact">
           <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
         </span>
-        {displayText && (
+        {displayText ? (
           <div className="compact-text">
-            <ContentWithResolvedProfiles content={displayText.slice(0, 60) + (displayText.length > 60 ? '…' : '')} />
+            <RichContent content={displayText.slice(0, 60) + (displayText.length > 60 ? '…' : '')} className="" />
+          </div>
+        ) : (
+          <div className="compact-text" style={{ opacity: 0.5, fontSize: '0.85em' }}>
+            <code>{bookmark.id.slice(0, 12)}...</code>
           </div>
         )}
-        <span className="bookmark-date-compact">{formatDateCompact(bookmark.created_at)}</span>
+        <span className="bookmark-date-compact">{formatDateCompact(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
         {/* CTA removed */}
       </div>
+      
+      {/* Reading progress indicator for all bookmark types with reading data */}
+      {readingProgress !== undefined && readingProgress > 0 && (
+        <div 
+          style={{
+            height: '1px',
+            width: '100%',
+            background: 'var(--color-border)',
+            overflow: 'hidden',
+            margin: '0',
+            marginLeft: '1.5rem'
+          }}
+        >
+          <div
+            style={{
+              height: '100%',
+              width: `${Math.round(readingProgress * 100)}%`,
+              background: progressColor,
+              transition: 'width 0.3s ease, background 0.3s ease'
+            }}
+          />
+        </div>
+      )}
     </div>
   )
 }

src/components/BookmarkViews/LargeView.tsx

@@ -4,10 +4,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate } from '../../utils/bookmarkUtils'
-import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import RichContent from '../RichContent'
 import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
-import { getEventUrl } from '../../config/nostrGateways'
+import { naddrEncode } from 'nostr-tools/nip19'
 
 interface LargeViewProps {
   bookmark: IndividualBookmark
@@ -18,7 +18,6 @@ interface LargeViewProps {
   getIconForUrlType: IconGetter
   previewImage: string | null
   authorNpub: string
-  eventNevent?: string
   getAuthorDisplayName: () => string
   handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
   articleSummary?: string
@@ -35,7 +34,6 @@ export const LargeView: React.FC<LargeViewProps> = ({
   getIconForUrlType,
   previewImage,
   authorNpub,
-  eventNevent,
   getAuthorDisplayName,
   handleReadNow,
   articleSummary,
@@ -63,6 +61,30 @@ export const LargeView: React.FC<LargeViewProps> = ({
     }
   }
 
+  // Get internal route for the bookmark
+  const getInternalRoute = (): string | null => {
+    const firstUrl = hasUrls ? extractedUrls[0] : null
+    if (bookmark.kind === 30023) {
+      // Nostr-native article - use /a/ route
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (dTag) {
+        const naddr = naddrEncode({
+          kind: bookmark.kind,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        return `/a/${naddr}`
+      }
+    } else if (bookmark.kind === 1) {
+      // Note - use /e/ route
+      return `/e/${bookmark.id}`
+    } else if (firstUrl) {
+      // External URL - use /r/ route
+      return `/r/${encodeURIComponent(firstUrl)}`
+    }
+    return null
+  }
+
   return (
     <div 
       key={`${bookmark.id}-${index}`} 
@@ -95,13 +117,9 @@ export const LargeView: React.FC<LargeViewProps> = ({
       
       <div className="large-content">
         {isArticle && articleSummary ? (
-          <div className="large-text article-summary">
-            <ContentWithResolvedProfiles content={articleSummary} />
-          </div>
+          <RichContent content={articleSummary} className="large-text article-summary" />
         ) : bookmark.content && (
-          <div className="large-text">
-            <ContentWithResolvedProfiles content={bookmark.content} />
-          </div>
+          <RichContent content={bookmark.content} className="large-text" />
         )}
         
         {/* Reading progress indicator for articles - shown only if there's progress */}
@@ -140,16 +158,17 @@ export const LargeView: React.FC<LargeViewProps> = ({
             </Link>
           </span>
           
-          {eventNevent && (
-            <a
-              href={getEventUrl(eventNevent)}
-              target="_blank"
-              rel="noopener noreferrer"
+          {getInternalRoute() ? (
+            <Link
+              to={getInternalRoute()!}
               className="bookmark-date-link"
+              title="Open in app"
               onClick={(e) => e.stopPropagation()}
             >
-              {formatDate(bookmark.created_at)}
-            </a>
+              {formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}
+            </Link>
+          ) : (
+            <span className="bookmark-date">{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
           )}
           
           {/* CTA removed */}

src/components/Bookmarks.tsx

@@ -13,10 +13,12 @@ import { useHighlightCreation } from '../hooks/useHighlightCreation'
 import { useBookmarksUI } from '../hooks/useBookmarksUI'
 import { useRelayStatus } from '../hooks/useRelayStatus'
 import { useOfflineSync } from '../hooks/useOfflineSync'
+import { useEventLoader } from '../hooks/useEventLoader'
 import { Bookmark } from '../types/bookmarks'
 import ThreePaneLayout from './ThreePaneLayout'
 import Explore from './Explore'
 import Me from './Me'
+import Profile from './Profile'
 import Support from './Support'
 import { classifyHighlights } from '../utils/highlightClassification'
 
@@ -37,7 +39,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   bookmarksLoading, 
   onRefreshBookmarks
 }) => {
-  const { naddr, npub } = useParams<{ naddr?: string; npub?: string }>()
+  const { naddr, npub, eventId: eventIdParam } = useParams<{ naddr?: string; npub?: string; eventId?: string }>()
   const location = useLocation()
   const navigate = useNavigate()
   const previousLocationRef = useRef<string>()
@@ -54,6 +56,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   const showMe = location.pathname.startsWith('/me')
   const showProfile = location.pathname.startsWith('/p/')
   const showSupport = location.pathname === '/support'
+  const eventId = eventIdParam
   
   // Extract tab from explore routes
   const exploreTab = location.pathname === '/explore/writings' ? 'writings' : 'highlights'
@@ -61,9 +64,9 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   // Extract tab from me routes
   const meTab = location.pathname === '/me' ? 'highlights' : 
                 location.pathname === '/me/highlights' ? 'highlights' :
-                location.pathname === '/me/reading-list' ? 'reading-list' :
+                location.pathname === '/me/bookmarks' ? 'bookmarks' :
                 location.pathname.startsWith('/me/reads') ? 'reads' :
-                location.pathname === '/me/links' ? 'links' :
+                location.pathname.startsWith('/me/links') ? 'links' :
                 location.pathname === '/me/writings' ? 'writings' : 'highlights'
   
   // Extract tab from profile routes
@@ -227,6 +230,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   useArticleLoader({
     naddr,
     relayPool,
+    eventStore,
     setSelectedUrl,
     setReaderContent,
     setReaderLoading,
@@ -254,6 +258,17 @@ const Bookmarks: React.FC<BookmarksProps> = ({
     setCurrentArticleEventId
   })
 
+  // Load event if /e/:eventId route is used
+  useEventLoader({
+    eventId,
+    relayPool,
+    eventStore,
+    setSelectedUrl,
+    setReaderContent,
+    setReaderLoading,
+    setIsCollapsed
+  })
+
   // Classify highlights with levels based on user context
   const classifiedHighlights = useMemo(() => {
     return classifyHighlights(highlights, activeAccount?.pubkey, followedPubkeys)
@@ -327,10 +342,10 @@ const Bookmarks: React.FC<BookmarksProps> = ({
         relayPool ? <Explore relayPool={relayPool} eventStore={eventStore} settings={settings} activeTab={exploreTab} /> : null
       ) : undefined}
       me={showMe ? (
-        relayPool ? <Me relayPool={relayPool} eventStore={eventStore} activeTab={meTab} bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} /> : null
+        relayPool ? <Me relayPool={relayPool} eventStore={eventStore} activeTab={meTab} bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} settings={settings} /> : null
       ) : undefined}
       profile={showProfile && profilePubkey ? (
-        relayPool ? <Me relayPool={relayPool} eventStore={eventStore} activeTab={profileTab} pubkey={profilePubkey} bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} /> : null
+        relayPool ? <Profile relayPool={relayPool} eventStore={eventStore} pubkey={profilePubkey} activeTab={profileTab} /> : null
       ) : undefined}
       support={showSupport ? (
         relayPool ? <Support relayPool={relayPool} eventStore={eventStore} settings={settings} /> : null

src/components/ContentPanel.tsx

@@ -4,14 +4,15 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import rehypePrism from 'rehype-prism-plus'
+import VideoEmbedProcessor from './VideoEmbedProcessor'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import 'prismjs/themes/prism-tomorrow.css'
 import { faSpinner, faCheckCircle, faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { ContentSkeleton } from './Skeletons'
 import { nip19 } from 'nostr-tools'
 import { getNostrUrl, getSearchUrl } from '../config/nostrGateways'
-import { RELAYS } from '../config/relays'
 import { RelayPool } from 'applesauce-relay'
+import { getActiveRelayUrls } from '../services/relayManager'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
 import { Highlight } from '../types/highlights'
@@ -29,10 +30,12 @@ import {
   hasMarkedEventAsRead,
   hasMarkedWebsiteAsRead
 } from '../services/reactionService'
+import { unarchiveEvent, unarchiveWebsite } from '../services/unarchiveService'
+import { archiveController } from '../services/archiveController'
 import AuthorCard from './AuthorCard'
 import { faBooks } from '../icons/customIcons'
 import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
-import { classifyUrl } from '../utils/helpers'
+import { classifyUrl, shouldTrackReadingProgress } from '../utils/helpers'
 import { buildNativeVideoUrl } from '../utils/videoHelpers'
 import { useReadingPosition } from '../hooks/useReadingPosition'
 import { ReadingProgressIndicator } from './ReadingProgressIndicator'
@@ -40,9 +43,10 @@ import { EventFactory } from 'applesauce-factory'
 import { Hooks } from 'applesauce-react'
 import { 
   generateArticleIdentifier, 
-  loadReadingPosition, 
-  saveReadingPosition 
+  saveReadingPosition,
+  startReadingPositionStream
 } from '../services/readingPositionService'
+import TTSControls from './TTSControls'
 
 interface ContentPanelProps {
   loading: boolean
@@ -72,6 +76,7 @@ interface ContentPanelProps {
   // For reading progress indicator positioning
   isSidebarCollapsed?: boolean
   isHighlightsCollapsed?: boolean
+  onOpenHighlights?: () => void
 }
 
 const ContentPanel: React.FC<ContentPanelProps> = ({ 
@@ -99,7 +104,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   onTextSelection,
   onClearSelection,
   isSidebarCollapsed = false,
-  isHighlightsCollapsed = false
+  isHighlightsCollapsed = false,
+  onOpenHighlights
 }) => {
   const [isMarkedAsRead, setIsMarkedAsRead] = useState(false)
   const [isCheckingReadStatus, setIsCheckingReadStatus] = useState(false)
@@ -128,6 +134,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     currentUserPubkey,
     followedPubkeys
   })
+  // Key used to force re-mount of markdown preview/render when content changes
+  const contentKey = useMemo(() => {
+    // Prefer selectedUrl as a stable per-article key; fallback to title+length
+    return selectedUrl || `${title || ''}:${(markdown || html || '').length}`
+  }, [selectedUrl, title, markdown, html])
 
   const { contentRef, handleSelectionEnd } = useHighlightInteractions({
     onHighlightClick,
@@ -151,20 +162,18 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   // Callback to save reading position
   const handleSavePosition = useCallback(async (position: number) => {
     if (!activeAccount || !relayPool || !eventStore || !articleIdentifier) {
-      console.log('⏭️ [ContentPanel] Skipping save - missing requirements:', {
-        hasAccount: !!activeAccount,
-        hasRelayPool: !!relayPool,
-        hasEventStore: !!eventStore,
-        hasIdentifier: !!articleIdentifier
-      })
       return
     }
     if (!settings?.syncReadingPosition) {
-      console.log('⏭️ [ContentPanel] Sync disabled in settings')
+      return
+    }
+    
+    // Check if content is long enough to track reading progress
+    if (!shouldTrackReadingProgress(html, markdown)) {
       return
     }
 
-    console.log('💾 [ContentPanel] Saving position:', Math.round(position * 100) + '%', 'for article:', selectedUrl?.slice(0, 50))
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
 
     try {
       const factory = new EventFactory({ signer: activeAccount })
@@ -176,56 +185,51 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         {
           position,
           timestamp: Math.floor(Date.now() / 1000),
-          scrollTop: window.pageYOffset || document.documentElement.scrollTop
+          scrollTop
         }
       )
     } catch (error) {
-      console.error('❌ [ContentPanel] Failed to save reading position:', error)
+      console.error('[progress] ❌ ContentPanel: Failed to save reading position:', error)
     }
-  }, [activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, selectedUrl])
+  }, [activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, html, markdown])
 
-  const { isReadingComplete, progressPercentage, saveNow } = useReadingPosition({
+  const { progressPercentage, saveNow } = useReadingPosition({
     enabled: isTextContent,
-    syncEnabled: settings?.syncReadingPosition,
+    syncEnabled: settings?.syncReadingPosition !== false,
     onSave: handleSavePosition,
     onReadingComplete: () => {
-      // Optional: Auto-mark as read when reading is complete
-      if (activeAccount && !isMarkedAsRead) {
-        // Could trigger auto-mark as read here if desired
+      // Auto-mark as read when reading is complete (if enabled in settings)
+      if (!settings?.autoMarkAsReadOnCompletion || !activeAccount) return
+      if (!isMarkedAsRead) {
+        handleMarkAsRead()
+      } else {
+        // Already archived: still show the success animation for feedback
+        setShowCheckAnimation(true)
+        setTimeout(() => setShowCheckAnimation(false), 600)
       }
     }
   })
+  
+  // Log sync status when it changes
+  useEffect(() => {
+  }, [isTextContent, settings?.syncReadingPosition, activeAccount, relayPool, eventStore, articleIdentifier, progressPercentage])
 
-  // Load saved reading position when article loads
+  // Load saved reading position when article loads (non-blocking, EOSE-driven)
   useEffect(() => {
     if (!isTextContent || !activeAccount || !relayPool || !eventStore || !articleIdentifier) {
-      console.log('⏭️ [ContentPanel] Skipping position restore - missing requirements:', {
-        isTextContent,
-        hasAccount: !!activeAccount,
-        hasRelayPool: !!relayPool,
-        hasEventStore: !!eventStore,
-        hasIdentifier: !!articleIdentifier
-      })
       return
     }
-    if (!settings?.syncReadingPosition) {
-      console.log('⏭️ [ContentPanel] Sync disabled - not restoring position')
+    if (settings?.syncReadingPosition === false) {
       return
     }
 
-    console.log('📖 [ContentPanel] Loading position for article:', selectedUrl?.slice(0, 50))
-
-    const loadPosition = async () => {
-      try {
-        const savedPosition = await loadReadingPosition(
-          relayPool,
-          eventStore,
-          activeAccount.pubkey,
-          articleIdentifier
-        )
-
+    const stop = startReadingPositionStream(
+      relayPool,
+      eventStore,
+      activeAccount.pubkey,
+      articleIdentifier,
+      (savedPosition) => {
         if (savedPosition && savedPosition.position > 0.05 && savedPosition.position < 1) {
-          console.log('🎯 [ContentPanel] Restoring position:', Math.round(savedPosition.position * 100) + '%')
           // Wait for content to be fully rendered before scrolling
           setTimeout(() => {
             const documentHeight = document.documentElement.scrollHeight
@@ -236,22 +240,12 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
               top: scrollTop,
               behavior: 'smooth'
             })
-            
-            console.log('✅ [ContentPanel] Restored to position:', Math.round(savedPosition.position * 100) + '%', 'scrollTop:', scrollTop)
           }, 500) // Give content time to render
-        } else if (savedPosition) {
-          if (savedPosition.position === 1) {
-            console.log('✅ [ContentPanel] Article completed (100%), starting from top')
-          } else {
-            console.log('⏭️ [ContentPanel] Position too early (<5%):', Math.round(savedPosition.position * 100) + '%')
-          }
         }
-      } catch (error) {
-        console.error('❌ [ContentPanel] Failed to load reading position:', error)
       }
-    }
+    )
 
-    loadPosition()
+    return () => stop()
   }, [isTextContent, activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, selectedUrl])
 
   // Save position before unmounting or changing article
@@ -324,6 +318,25 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
   const hasHighlights = relevantHighlights.length > 0
 
+  // Extract plain text for TTS
+  const baseHtml = useMemo(() => {
+    if (markdown) return renderedMarkdownHtml && finalHtml ? finalHtml : ''
+    return finalHtml || html || ''
+  }, [markdown, renderedMarkdownHtml, finalHtml, html])
+
+  const articleText = useMemo(() => {
+    const parts: string[] = []
+    if (title) parts.push(title)
+    if (summary) parts.push(summary)
+    if (baseHtml) {
+      const div = document.createElement('div')
+      div.innerHTML = baseHtml
+      const txt = (div.textContent || '').replace(/\s+/g, ' ').trim()
+      if (txt) parts.push(txt)
+    }
+    return parts.join('. ')
+  }, [title, summary, baseHtml])
+
   // Determine if we're on a nostr-native article (/a/) or external URL (/r/)
   const isNostrArticle = selectedUrl && selectedUrl.startsWith('nostr:')
   const isExternalVideo = !isNostrArticle && !!selectedUrl && ['youtube', 'video'].includes(classifyUrl(selectedUrl).type)
@@ -361,7 +374,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     if (!currentArticle) return null
 
     const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1] || ''
-    const relayHints = RELAYS.filter(r => 
+    const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
+    const relayHints = activeRelays.filter(r => 
       !r.includes('localhost') && !r.includes('127.0.0.1')
     ).slice(0, 3)
 
@@ -467,7 +481,12 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   }
 
   const handleOpenSearch = () => {
-    if (articleLinks) {
+    // For regular notes (kind:1), open via /e/ path
+    if (currentArticle?.kind === 1) {
+      const borisUrl = `${window.location.origin}/e/${currentArticle.id}`
+      window.open(borisUrl, '_blank', 'noopener,noreferrer')
+    } else if (articleLinks) {
+      // For articles, use search portal
       window.open(getSearchUrl(articleLinks.naddr), '_blank', 'noopener,noreferrer')
     }
     setShowArticleMenu(false)
@@ -554,7 +573,13 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
   const handleSearchExternalUrl = () => {
     if (selectedUrl) {
-      window.open(getSearchUrl(selectedUrl), '_blank', 'noopener,noreferrer')
+      // If it's a nostr event sentinel, open the event directly on ants.sh
+      if (selectedUrl.startsWith('nostr-event:')) {
+        const eventId = selectedUrl.replace('nostr-event:', '')
+        window.open(`https://ants.sh/e/${eventId}`, '_blank', 'noopener,noreferrer')
+      } else {
+        window.open(getSearchUrl(selectedUrl), '_blank', 'noopener,noreferrer')
+      }
     }
     setShowExternalMenu(false)
   }
@@ -577,12 +602,25 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             activeAccount.pubkey,
             relayPool
           )
+          // Also check archiveController
+          const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1]
+          if (dTag) {
+            try {
+              const naddr = nip19.naddrEncode({ kind: 30023, pubkey: currentArticle.pubkey, identifier: dTag })
+              hasRead = hasRead || archiveController.isMarked(naddr)
+            } catch (e) {
+              // Silently ignore encoding errors
+            }
+          }
         } else {
           hasRead = await hasMarkedWebsiteAsRead(
             selectedUrl,
             activeAccount.pubkey,
             relayPool
           )
+          // Also check archiveController
+          const ctrl = archiveController.isMarked(selectedUrl)
+          hasRead = hasRead || ctrl
         }
         setIsMarkedAsRead(hasRead)
       } catch (error) {
@@ -596,7 +634,35 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   }, [selectedUrl, currentArticle, activeAccount, relayPool, isNostrArticle])
   
   const handleMarkAsRead = () => {
-    if (!activeAccount || !relayPool || isMarkedAsRead) {
+    if (!activeAccount || !relayPool) return
+
+    // Toggle archive state: if already archived, request deletion; else archive
+    if (isMarkedAsRead) {
+      // Optimistically unarchive in UI; background deletion request (NIP-09)
+      setIsMarkedAsRead(false)
+      ;(async () => {
+        try {
+          if (isNostrArticle && currentArticle) {
+            // Send deletion for all matching reactions
+            await unarchiveEvent(currentArticle.id, activeAccount, relayPool)
+            // Also clear controller mark so lists update
+            try {
+              const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1]
+              if (dTag) {
+                const naddr = nip19.naddrEncode({ kind: 30023, pubkey: currentArticle.pubkey, identifier: dTag })
+                archiveController.unmark(naddr)
+              }
+            } catch (e) {
+              console.warn('[archive][content] encode naddr failed', e)
+            }
+          } else if (selectedUrl) {
+            await unarchiveWebsite(selectedUrl, activeAccount, relayPool)
+            archiveController.unmark(selectedUrl)
+          }
+        } catch (err) {
+          console.warn('[archive][content] unarchive failed', err)
+        }
+      })()
       return
     }
 
@@ -618,16 +684,34 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             currentArticle.pubkey,
             currentArticle.kind,
             activeAccount,
-            relayPool
+            relayPool,
+            {
+              aCoord: (() => {
+                try {
+                  const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1]
+                  if (!dTag) return undefined
+                  return `${30023}:${currentArticle.pubkey}:${dTag}`
+                } catch { return undefined }
+              })()
+            }
           )
-          console.log('✅ Marked nostr article as read')
+          // Update archiveController immediately
+          try {
+            const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1]
+            if (dTag) {
+              const naddr = nip19.naddrEncode({ kind: 30023, pubkey: currentArticle.pubkey, identifier: dTag })
+              archiveController.mark(naddr)
+            }
+          } catch (err) {
+            console.warn('[archive][content] optimistic article mark failed', err)
+          }
         } else if (selectedUrl) {
           await createWebsiteReaction(
             selectedUrl,
             activeAccount,
             relayPool
           )
-          console.log('✅ Marked website as read')
+          archiveController.mark(selectedUrl)
         }
       } catch (error) {
         console.error('Failed to mark as read:', error)
@@ -661,7 +745,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       {isTextContent && (
         <ReadingProgressIndicator 
           progress={progressPercentage}
-          isComplete={isReadingComplete}
+          // Consider complete only at 95%+
+          isComplete={progressPercentage >= 95}
           showPercentage={true}
           isSidebarCollapsed={isSidebarCollapsed}
           isHighlightsCollapsed={isHighlightsCollapsed}
@@ -671,16 +756,15 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       <div className="reader" style={{ '--highlight-rgb': highlightRgb } as React.CSSProperties}>
         {/* Hidden markdown preview to convert markdown to HTML */}
       {markdown && (
-        <div ref={markdownPreviewRef} style={{ display: 'none' }}>
+        <div ref={markdownPreviewRef} key={`preview:${contentKey}`} style={{ display: 'none' }}>
           <ReactMarkdown 
             remarkPlugins={[remarkGfm]}
             rehypePlugins={[rehypeRaw, rehypePrism]}
             components={{
-              img: ({ src, alt, ...props }) => (
+              img: ({ src, alt }) => (
                 <img 
                   src={src} 
                   alt={alt} 
-                  {...props}
                 />
               )
             }}
@@ -701,7 +785,13 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         settings={settings}
         highlights={relevantHighlights}
         highlightVisibility={highlightVisibility}
+        onHighlightCountClick={onOpenHighlights}
       />
+      {isTextContent && articleText && (
+        <div style={{ padding: '0 0.75rem 0.5rem 0.75rem' }}>
+          <TTSControls text={articleText} defaultLang={navigator?.language} settings={settings} />
+        </div>
+      )}
       {isExternalVideo ? (
         <>
           <div className="reader-video">
@@ -767,8 +857,9 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
               <button
                 className={`mark-as-read-btn ${isMarkedAsRead ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
                 onClick={handleMarkAsRead}
-                disabled={isMarkedAsRead || isCheckingReadStatus}
+                disabled={isCheckingReadStatus}
                 title={isMarkedAsRead ? 'Already Marked as Watched' : 'Mark as Watched'}
+                style={isMarkedAsRead ? { opacity: 0.85 } : undefined}
               >
                 <FontAwesomeIcon 
                   icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
@@ -785,10 +876,12 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         <>
           {markdown ? (
             renderedMarkdownHtml && finalHtml ? (
-              <div 
-                ref={contentRef} 
-                className="reader-markdown" 
-                dangerouslySetInnerHTML={{ __html: finalHtml }}
+              <VideoEmbedProcessor
+                key={`content:${contentKey}`}
+                ref={contentRef}
+                html={finalHtml}
+                renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+                className="reader-markdown"
                 onMouseUp={handleSelectionEnd}
                 onTouchEnd={handleSelectionEnd}
               />
@@ -800,10 +893,12 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
               </div>
             )
           ) : (
-            <div 
-              ref={contentRef} 
-              className="reader-html" 
-              dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
+            <VideoEmbedProcessor
+              key={`content:${contentKey}`}
+              ref={contentRef}
+              html={finalHtml || html || ''}
+              renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+              className="reader-html"
               onMouseUp={handleSelectionEnd}
               onTouchEnd={handleSelectionEnd}
             />
@@ -837,13 +932,16 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                       <FontAwesomeIcon icon={faCopy} />
                       <span>Copy URL</span>
                     </button>
-                    <button
-                      className="article-menu-item"
-                      onClick={handleOpenExternalUrl}
-                    >
-                      <FontAwesomeIcon icon={faExternalLinkAlt} />
-                      <span>Open Original</span>
-                    </button>
+                    {/* Only show "Open Original" for actual external URLs, not nostr events */}
+                    {!selectedUrl?.startsWith('nostr-event:') && (
+                      <button
+                        className="article-menu-item"
+                        onClick={handleOpenExternalUrl}
+                      >
+                        <FontAwesomeIcon icon={faExternalLinkAlt} />
+                        <span>Open Original</span>
+                      </button>
+                    )}
                     <button
                       className="article-menu-item"
                       onClick={handleSearchExternalUrl}
@@ -930,21 +1028,22 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             </div>
           )}
           
-          {/* Mark as Read button */}
+          {/* Archive button */}
           {activeAccount && (
             <div className="mark-as-read-container">
               <button
                 className={`mark-as-read-btn ${isMarkedAsRead ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
                 onClick={handleMarkAsRead}
-                disabled={isMarkedAsRead || isCheckingReadStatus}
-                title={isMarkedAsRead ? 'Already Marked as Read' : 'Mark as Read'}
+                disabled={isCheckingReadStatus}
+                title={isMarkedAsRead ? 'Already Archived' : 'Move to Archive'}
+                style={isMarkedAsRead ? { opacity: 0.85 } : undefined}
               >
                 <FontAwesomeIcon 
                   icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
                   spin={isCheckingReadStatus} 
                 />
                 <span>
-                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Marked as Read' : 'Mark as Read'}
+                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Archived' : 'Move to Archive'}
                 </span>
               </button>
             </div>

src/components/Debug.tsx

@@ -19,6 +19,7 @@ import { useSettings } from '../hooks/useSettings'
 import { fetchHighlights, fetchHighlightsFromAuthors } from '../services/highlightService'
 import { contactsController } from '../services/contactsController'
 import { writingsController } from '../services/writingsController'
+import { readingProgressController } from '../services/readingProgressController'
 import { fetchBlogPostsFromAuthors, BlogPostPreview } from '../services/exploreService'
 
 const defaultPayload = 'The quick brown fox jumps over the lazy dog.'
@@ -102,6 +103,27 @@ const Debug: React.FC<DebugProps> = ({
   const [tLoadWritings, setTLoadWritings] = useState<number | null>(null)
   const [tFirstWriting, setTFirstWriting] = useState<number | null>(null)
   
+  // Reading Progress loading state
+  const [isLoadingReadingProgress, setIsLoadingReadingProgress] = useState(false)
+  const [readingProgressEvents, setReadingProgressEvents] = useState<NostrEvent[]>([])
+  const [tLoadReadingProgress, setTLoadReadingProgress] = useState<number | null>(null)
+  const [tFirstReadingProgress, setTFirstReadingProgress] = useState<number | null>(null)
+  
+  // Mark-as-read reactions loading state
+  const [isLoadingMarkAsRead, setIsLoadingMarkAsRead] = useState(false)
+  const [markAsReadReactions, setMarkAsReadReactions] = useState<NostrEvent[]>([])
+  const [tLoadMarkAsRead, setTLoadMarkAsRead] = useState<number | null>(null)
+  const [tFirstMarkAsRead, setTFirstMarkAsRead] = useState<number | null>(null)
+
+  // Relay list loading state
+  const [isLoadingRelayList, setIsLoadingRelayList] = useState(false)
+  const [relayListEvents, setRelayListEvents] = useState<NostrEvent[]>([])
+  const [tLoadRelayList, setTLoadRelayList] = useState<number | null>(null)
+  const [tFirstRelayList, setTFirstRelayList] = useState<number | null>(null)
+  
+  // Deduplicated reading progress from controller
+  const [deduplicatedProgressMap, setDeduplicatedProgressMap] = useState<Map<string, number>>(new Map())
+  
   // Live timing state
   const [liveTiming, setLiveTiming] = useState<{
     nip44?: { type: 'encrypt' | 'decrypt'; startTime: number }
@@ -109,6 +131,9 @@ const Debug: React.FC<DebugProps> = ({
     loadBookmarks?: { startTime: number }
     decryptBookmarks?: { startTime: number }
     loadHighlights?: { startTime: number }
+    loadReadingProgress?: { startTime: number }
+    loadMarkAsRead?: { startTime: number }
+    loadRelayList?: { startTime: number }
   }>({})
   
   // Web of Trust state
@@ -310,10 +335,6 @@ const Debug: React.FC<DebugProps> = ({
 
       // Subscribe to decrypt complete events for Debug UI display
       const unsubscribeDecrypt = bookmarkController.onDecryptComplete((eventId, publicCount, privateCount) => {
-        console.log('[bunker] ✅ Auto-decrypted:', eventId.slice(0, 8), {
-          public: publicCount,
-          private: privateCount
-        })
         setDecryptedEvents(prev => new Map(prev).set(eventId, { 
           public: publicCount, 
           private: privateCount 
@@ -413,11 +434,7 @@ const Debug: React.FC<DebugProps> = ({
 
       const elapsed = Math.round(performance.now() - start)
       setTLoadHighlights(elapsed)
-      setLiveTiming(prev => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-        const { loadHighlights, ...rest } = prev
-        return rest
-      })
+      setLiveTiming(prev => ({ ...prev, loadHighlights: undefined }))
 
       DebugBus.info('debug', `Loaded ${events.length} highlight events in ${elapsed}ms`)
     } catch (err) {
@@ -634,7 +651,9 @@ const Debug: React.FC<DebugProps> = ({
               return timeB - timeA
             })
           })
-        }
+        },
+        100,
+        eventStore || undefined
       )
       
       setWritingPosts(posts)
@@ -728,6 +747,209 @@ const Debug: React.FC<DebugProps> = ({
     setTFirstWriting(null)
   }
 
+  const handleLoadReadingProgress = async () => {
+    if (!relayPool || !eventStore || !activeAccount?.pubkey) {
+      DebugBus.warn('debug', 'Please log in to load reading progress')
+      return
+    }
+
+    try {
+      setIsLoadingReadingProgress(true)
+      setReadingProgressEvents([])
+      setTLoadReadingProgress(null)
+      setTFirstReadingProgress(null)
+      setDeduplicatedProgressMap(new Map())
+      DebugBus.info('debug', 'Loading reading progress events...')
+
+      const start = performance.now()
+      let firstEventTime: number | null = null
+      setLiveTiming(prev => ({ ...prev, loadReadingProgress: { startTime: start } }))
+
+      const { queryEvents } = await import('../services/dataFetch')
+      const { KINDS } = await import('../config/kinds')
+
+      // Load raw events for display
+      const rawEvents: NostrEvent[] = []
+      const rawQueryPromise = queryEvents(relayPool, { kinds: [KINDS.ReadingProgress], authors: [activeAccount.pubkey] }, {
+        onEvent: (evt) => {
+          if (firstEventTime === null) {
+            firstEventTime = performance.now() - start
+            setTFirstReadingProgress(Math.round(firstEventTime))
+          }
+          rawEvents.push(evt)
+          setReadingProgressEvents([...rawEvents])
+        }
+      })
+
+      // Load deduplicated results via controller (includes articles and external URLs)
+      const unsubProgress = readingProgressController.onProgress((progressMap) => {
+        setDeduplicatedProgressMap(new Map(progressMap))
+
+        // Regression guard: ensure keys include both naddr and raw URL forms when present
+        try {
+          const keys = Array.from(progressMap.keys())
+          const sample = keys.slice(0, 5).join(', ')
+          DebugBus.info('debug', `Progress keys sample: ${sample}`)
+        } catch { /* ignore */ }
+      })
+
+      // Run both in parallel
+      await Promise.all([
+        rawQueryPromise,
+        readingProgressController.start({ relayPool, eventStore, pubkey: activeAccount.pubkey, force: true })
+      ])
+      
+      unsubProgress()
+
+      const elapsed = Math.round(performance.now() - start)
+      setTLoadReadingProgress(elapsed)
+      setLiveTiming(prev => ({ ...prev, loadReadingProgress: undefined }))
+
+      const finalMap = readingProgressController.getProgressMap()
+      DebugBus.info('debug', `Loaded ${rawEvents.length} raw events, deduplicated to ${finalMap.size} articles in ${elapsed}ms`)
+    } catch (err) {
+      console.error('Failed to load reading progress:', err)
+      DebugBus.error('debug', `Failed to load reading progress: ${err instanceof Error ? err.message : String(err)}`)
+    } finally {
+      setIsLoadingReadingProgress(false)
+    }
+  }
+
+  const handleClearReadingProgress = () => {
+    setReadingProgressEvents([])
+    setTLoadReadingProgress(null)
+    setTFirstReadingProgress(null)
+    setDeduplicatedProgressMap(new Map())
+    DebugBus.info('debug', 'Cleared reading progress data')
+  }
+
+  const handleLoadMarkAsReadReactions = async () => {
+    if (!relayPool || !activeAccount?.pubkey) {
+      DebugBus.warn('debug', 'Please log in to load mark-as-read reactions')
+      return
+    }
+
+    try {
+      setIsLoadingMarkAsRead(true)
+      setMarkAsReadReactions([])
+      setTLoadMarkAsRead(null)
+      setTFirstMarkAsRead(null)
+      DebugBus.info('debug', 'Loading mark-as-read reactions...')
+
+      const start = performance.now()
+      let firstEventTime: number | null = null
+      setLiveTiming(prev => ({ ...prev, loadMarkAsRead: { startTime: start } }))
+
+      const { queryEvents } = await import('../services/dataFetch')
+      const { ARCHIVE_EMOJI } = await import('../services/reactionService')
+
+      // Load both kind:7 (reactions to events) and kind:17 (reactions to URLs)
+      const [kind7Events, kind17Events] = await Promise.all([
+        queryEvents(relayPool, { kinds: [7], authors: [activeAccount.pubkey] }, {
+          onEvent: (evt) => {
+            if (evt.content === ARCHIVE_EMOJI) {
+              if (firstEventTime === null) {
+                firstEventTime = performance.now() - start
+                setTFirstMarkAsRead(Math.round(firstEventTime))
+              }
+              setMarkAsReadReactions(prev => [...prev, evt])
+            }
+          }
+        }),
+        queryEvents(relayPool, { kinds: [17], authors: [activeAccount.pubkey] }, {
+          onEvent: (evt) => {
+            if (evt.content === ARCHIVE_EMOJI) {
+              if (firstEventTime === null) {
+                firstEventTime = performance.now() - start
+                setTFirstMarkAsRead(Math.round(firstEventTime))
+              }
+              setMarkAsReadReactions(prev => [...prev, evt])
+            }
+          }
+        })
+      ])
+
+      const totalEvents = kind7Events.length + kind17Events.length
+      const elapsed = Math.round(performance.now() - start)
+      setTLoadMarkAsRead(elapsed)
+      setLiveTiming(prev => ({ ...prev, loadMarkAsRead: undefined }))
+
+      DebugBus.info('debug', `Loaded ${totalEvents} mark-as-read reactions in ${elapsed}ms`)
+    } catch (err) {
+      console.error('Failed to load mark-as-read reactions:', err)
+      DebugBus.error('debug', `Failed to load mark-as-read reactions: ${err instanceof Error ? err.message : String(err)}`)
+    } finally {
+      setIsLoadingMarkAsRead(false)
+    }
+  }
+
+  const handleClearMarkAsRead = () => {
+    setMarkAsReadReactions([])
+    setTLoadMarkAsRead(null)
+    setTFirstMarkAsRead(null)
+    DebugBus.info('debug', 'Cleared mark-as-read reactions data')
+  }
+
+  const handleLoadRelayList = async () => {
+    if (!relayPool || !activeAccount?.pubkey) {
+      DebugBus.warn('debug', 'Please log in to load relay list')
+      return
+    }
+
+    try {
+      setIsLoadingRelayList(true)
+      setRelayListEvents([])
+      setTLoadRelayList(null)
+      setTFirstRelayList(null)
+      DebugBus.info('debug', 'Loading relay list (kind 10002)...')
+
+      const start = performance.now()
+      let firstEventTime: number | null = null
+      setLiveTiming(prev => ({ ...prev, loadRelayList: { startTime: start } }))
+
+      const { queryEvents } = await import('../services/dataFetch')
+
+      // Query for kind:10002 (relay list)
+      const events = await queryEvents(relayPool, { 
+        kinds: [10002], 
+        authors: [activeAccount.pubkey],
+        limit: 10
+      }, {
+        onEvent: (evt) => {
+          if (firstEventTime === null) {
+            firstEventTime = performance.now() - start
+            setTFirstRelayList(Math.round(firstEventTime))
+          }
+          setRelayListEvents(prev => [...prev, evt])
+        }
+      })
+      
+      const elapsed = Math.round(performance.now() - start)
+      setTLoadRelayList(elapsed)
+      setLiveTiming(prev => ({ ...prev, loadRelayList: undefined }))
+
+      DebugBus.info('debug', `Loaded ${events.length} relay list events in ${elapsed}ms`)
+      
+      // Log details about the events
+      events.forEach((event, index) => {
+        const relayCount = event.tags.filter(tag => tag[0] === 'r').length
+        DebugBus.info('debug', `Event ${index + 1}: ${relayCount} relays, created ${new Date(event.created_at * 1000).toISOString()}`)
+      })
+    } catch (err) {
+      console.error('Failed to load relay list:', err)
+      DebugBus.error('debug', `Failed to load relay list: ${err instanceof Error ? err.message : String(err)}`)
+    } finally {
+      setIsLoadingRelayList(false)
+    }
+  }
+
+  const handleClearRelayList = () => {
+    setRelayListEvents([])
+    setTLoadRelayList(null)
+    setTFirstRelayList(null)
+    DebugBus.info('debug', 'Cleared relay list data')
+  }
+
   const handleLoadFriendsList = async () => {
     if (!relayPool || !activeAccount?.pubkey) {
       DebugBus.warn('debug', 'Please log in to load friends list')
@@ -742,7 +964,6 @@ const Debug: React.FC<DebugProps> = ({
     
     // Subscribe to controller updates to see streaming
     const unsubscribe = contactsController.onContacts((contacts) => {
-      console.log('[debug] Received contacts update:', contacts.size)
       setFriendsPubkeys(new Set(contacts))
     })
     
@@ -1353,6 +1574,260 @@ const Debug: React.FC<DebugProps> = ({
           )}
         </div>
 
+        {/* Reading Progress Loading Section */}
+        <div className="settings-section">
+          <h3 className="section-title">Reading Progress Loading</h3>
+          <div className="text-sm opacity-70 mb-3">Test reading progress loading (kind: 39802) for the logged-in user</div>
+          <div className="flex gap-2 mb-3 items-center">
+            <button 
+              className="btn btn-primary" 
+              onClick={handleLoadReadingProgress}
+              disabled={isLoadingReadingProgress || !relayPool || !activeAccount}
+            >
+              {isLoadingReadingProgress ? (
+                <>
+                  <FontAwesomeIcon icon={faSpinner} className="animate-spin mr-2" />
+                  Loading...
+                </>
+              ) : (
+                'Load Reading Progress'
+              )}
+            </button>
+            <button 
+              className="btn btn-secondary ml-auto" 
+              onClick={handleClearReadingProgress}
+              disabled={readingProgressEvents.length === 0}
+            >
+              Clear
+            </button>
+          </div>
+          <div className="mb-3 flex gap-2 flex-wrap">
+            <Stat label="total" value={tLoadReadingProgress} />
+            <Stat label="first event" value={tFirstReadingProgress} />
+          </div>
+          {readingProgressEvents.length > 0 && (
+            <div className="mb-3">
+              <div className="text-sm opacity-70 mb-2">Loaded Reading Progress ({readingProgressEvents.length}):</div>
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {readingProgressEvents.map((evt, idx) => {
+                  const dTag = evt.tags?.find((t: string[]) => t[0] === 'd')?.[1]
+                  const aTag = evt.tags?.find((t: string[]) => t[0] === 'a')?.[1]
+                  const content = evt.content || ''
+                  
+                  return (
+                    <div key={idx} className="font-mono text-xs p-2 bg-gray-100 dark:bg-gray-800 rounded">
+                      <div className="font-semibold mb-1">Reading Progress #{idx + 1}</div>
+                      <div className="opacity-70 mb-1">
+                        <div>Author: {evt.pubkey.slice(0, 16)}...</div>
+                        <div>Created: {new Date(evt.created_at * 1000).toLocaleString()}</div>
+                      </div>
+                      <div className="mt-1">
+                        {dTag && <div>d-tag: {dTag}</div>}
+                        {aTag && <div className="text-[11px] opacity-70">#a: {aTag}</div>}
+                        {content && <div>Progress: {content}</div>}
+                      </div>
+                      <div className="opacity-50 mt-1 text-[10px] break-all">ID: {evt.id}</div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+
+          {deduplicatedProgressMap.size > 0 && (
+            <div className="mb-3">
+              <div className="text-sm opacity-70 mb-2">Deduplicated Reading Progress ({deduplicatedProgressMap.size} articles):</div>
+              
+              {/* Category breakdown */}
+              <div className="mb-3 p-2 bg-purple-50 dark:bg-purple-900/20 rounded border border-purple-200 dark:border-purple-700">
+                <div className="text-sm font-semibold mb-2">Breakdown by Category:</div>
+                <div className="space-y-1">
+                  {(() => {
+                    let unopened = 0, started = 0, reading = 0, completed = 0
+                    for (const progress of deduplicatedProgressMap.values()) {
+                      if (progress === 0) unopened++
+                      else if (progress > 0 && progress <= 0.10) started++
+                      else if (progress > 0.10 && progress <= 0.94) reading++
+                      else if (progress >= 0.95) completed++
+                    }
+                    return (
+                      <>
+                        <div className="flex justify-between text-xs">
+                          <span>Unopened (0%):</span>
+                          <span className="font-semibold">{unopened}</span>
+                        </div>
+                        <div className="flex justify-between text-xs">
+                          <span>Started (0% &lt; progress ≤ 10%):</span>
+                          <span className="font-semibold">{started}</span>
+                        </div>
+                        <div className="flex justify-between text-xs bg-green-100 dark:bg-green-900/30 px-1 py-0.5 rounded">
+                          <span>Reading (10% &lt; progress ≤ 94%) ✓:</span>
+                          <span className="font-semibold text-green-700 dark:text-green-400">{reading}</span>
+                        </div>
+                        <div className="flex justify-between text-xs">
+                          <span>Completed (≥ 95%):</span>
+                          <span className="font-semibold">{completed}</span>
+                        </div>
+                      </>
+                    )
+                  })()}
+                </div>
+              </div>
+              
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {Array.from(deduplicatedProgressMap.entries()).map(([articleId, progress], idx) => {
+                  return (
+                    <div key={idx} className="font-mono text-xs p-2 bg-blue-50 dark:bg-blue-900/20 rounded border border-blue-200 dark:border-blue-700">
+                      <div className="font-semibold mb-1">Article #{idx + 1}</div>
+                      <div className="mt-1">
+                        <div className="break-all">ID: {articleId}</div>
+                        <div className="mt-1">
+                          <div className="text-[11px] opacity-70">Progress: {(progress * 100).toFixed(1)}%</div>
+                          <div className="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-1.5 mt-1 overflow-hidden">
+                            <div 
+                              className="bg-blue-600 h-full" 
+                              style={{ width: `${progress * 100}%` }}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Mark-as-read Reactions Loading Section */}
+        <div className="settings-section">
+          <h3 className="section-title">Mark-as-read Reactions Loading</h3>
+          <div className="text-sm opacity-70 mb-3">Test loading mark-as-read reactions (kind: 7 and 17) with the ARCHIVE_EMOJI for the logged-in user</div>
+          <div className="flex gap-2 mb-3 items-center">
+            <button 
+              className="btn btn-primary" 
+              onClick={handleLoadMarkAsReadReactions}
+              disabled={isLoadingMarkAsRead || !relayPool || !activeAccount}
+            >
+              {isLoadingMarkAsRead ? (
+                <>
+                  <FontAwesomeIcon icon={faSpinner} className="animate-spin mr-2" />
+                  Loading...
+                </>
+              ) : (
+                'Load Mark-as-read Reactions'
+              )}
+            </button>
+            <button 
+              className="btn btn-secondary ml-auto" 
+              onClick={handleClearMarkAsRead}
+              disabled={markAsReadReactions.length === 0}
+            >
+              Clear
+            </button>
+          </div>
+          <div className="mb-3 flex gap-2 flex-wrap">
+            <Stat label="total" value={tLoadMarkAsRead} />
+            <Stat label="first event" value={tFirstMarkAsRead} />
+          </div>
+          {markAsReadReactions.length > 0 && (
+            <div className="mb-3">
+              <div className="text-sm opacity-70 mb-2">Loaded Mark-as-read Reactions ({markAsReadReactions.length}):</div>
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {markAsReadReactions.map((evt, idx) => {
+                  const eTag = evt.tags?.find((t: string[]) => t[0] === 'e')?.[1]
+                  const rTag = evt.tags?.find((t: string[]) => t[0] === 'r')?.[1]
+                  const pTag = evt.tags?.find((t: string[]) => t[0] === 'p')?.[1]
+                  
+                  return (
+                    <div key={idx} className="font-mono text-xs p-2 bg-gray-100 dark:bg-gray-800 rounded">
+                      <div className="font-semibold mb-1">Mark-as-read Reaction #{idx + 1}</div>
+                      <div className="opacity-70 mb-1">
+                        <div>Kind: {evt.kind}</div>
+                        <div>Author: {evt.pubkey.slice(0, 16)}...</div>
+                        <div>Created: {new Date(evt.created_at * 1000).toLocaleString()}</div>
+                      </div>
+                      <div className="mt-1">
+                        <div>Emoji: {evt.content}</div>
+                        {eTag && <div className="text-[11px] opacity-70">#e: {eTag.slice(0, 16)}...</div>}
+                        {rTag && <div className="text-[11px] opacity-70">#r: {rTag.length > 60 ? rTag.substring(0, 60) + '...' : rTag}</div>}
+                        {pTag && <div className="text-[11px] opacity-70">#p: {pTag.slice(0, 16)}...</div>}
+                      </div>
+                      <div className="opacity-50 mt-1 text-[10px] break-all">ID: {evt.id}</div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Relay List Loading Section */}
+        <div className="settings-section">
+          <h3 className="section-title">Relay List Loading (kind 10002)</h3>
+          <div className="text-sm opacity-70 mb-3">Load your relay list to debug dynamic relay integration:</div>
+          
+          <div className="flex gap-2 mb-3 items-center">
+            <button 
+              className="btn btn-primary" 
+              onClick={handleLoadRelayList}
+              disabled={isLoadingRelayList || !relayPool || !activeAccount}
+            >
+              {isLoadingRelayList ? (
+                <>
+                  <FontAwesomeIcon icon={faSpinner} className="animate-spin mr-2" />
+                  Loading...
+                </>
+              ) : (
+                'Load Relay List'
+              )}
+            </button>
+            <button 
+              className="btn btn-secondary ml-auto" 
+              onClick={handleClearRelayList}
+              disabled={relayListEvents.length === 0}
+            >
+              Clear
+            </button>
+          </div>
+          
+          <div className="flex gap-4 mb-3 text-sm">
+            <Stat label="total" value={tLoadRelayList} />
+            <Stat label="first event" value={tFirstRelayList} />
+          </div>
+          {relayListEvents.length > 0 && (
+            <div className="mb-3">
+              <div className="text-sm opacity-70 mb-2">Loaded Relay List Events ({relayListEvents.length}):</div>
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {relayListEvents.map((evt, idx) => {
+                  const relayTags = evt.tags?.filter((t: string[]) => t[0] === 'r') || []
+                  
+                  return (
+                    <div key={idx} className="font-mono text-xs p-2 bg-gray-100 dark:bg-gray-800 rounded">
+                      <div className="font-semibold mb-1">Relay List Event #{idx + 1}</div>
+                      <div className="opacity-70 mb-1">
+                        <div>Kind: {evt.kind}</div>
+                        <div>Author: {evt.pubkey.slice(0, 16)}...</div>
+                        <div>Created: {new Date(evt.created_at * 1000).toLocaleString()}</div>
+                        <div>Relays: {relayTags.length}</div>
+                      </div>
+                      <div className="mt-1">
+                        <div className="text-[11px] opacity-70 mb-1">Relay URLs:</div>
+                        {relayTags.map((tag, tagIdx) => (
+                          <div key={tagIdx} className="text-[10px] opacity-60 break-all">
+                            {tag[1]} {tag[2] ? `(${tag[2]})` : ''}
+                          </div>
+                        ))}
+                      </div>
+                      <div className="opacity-50 mt-1 text-[10px] break-all">ID: {evt.id}</div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+
         {/* Web of Trust Section */}
         <div className="settings-section">
           <h3 className="section-title">Web of Trust</h3>

src/components/EventViewer.tsx

@@ -0,0 +1 @@
+

src/components/Explore.tsx

@@ -1,14 +1,14 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react'
+import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faNewspaper, faHighlighter, faUser, faUserGroup, faNetworkWired, faArrowsRotate, faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { faPersonHiking, faNewspaper, faHighlighter, faUser, faUserGroup, faNetworkWired, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
 import IconButton from './IconButton'
 import { BlogPostSkeleton, HighlightSkeleton } from './Skeletons'
 import { Hooks } from 'applesauce-react'
 import { RelayPool } from 'applesauce-relay'
-import { IEventStore, Helpers } from 'applesauce-core'
-import { nip19, NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
+import { nip19 } from 'nostr-tools'
 import { useNavigate } from 'react-router-dom'
-import { fetchContacts } from '../services/contactService'
+// Contacts are managed via controller subscription
 import { fetchBlogPostsFromAuthors, BlogPostPreview } from '../services/exploreService'
 import { fetchHighlightsFromAuthors } from '../services/highlightService'
 import { fetchProfiles } from '../services/profileService'
@@ -19,19 +19,22 @@ import { Highlight } from '../types/highlights'
 import { UserSettings } from '../services/settingsService'
 import BlogPostCard from './BlogPostCard'
 import { HighlightItem } from './HighlightItem'
-import { getCachedPosts, upsertCachedPost, setCachedPosts, getCachedHighlights, upsertCachedHighlight, setCachedHighlights } from '../services/exploreCache'
+import { getCachedPosts, setCachedPosts, getCachedHighlights, setCachedHighlights } from '../services/exploreCache'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { classifyHighlights } from '../utils/highlightClassification'
 import { HighlightVisibility } from './HighlightsPanel'
-import { KINDS } from '../config/kinds'
-import { eventToHighlight } from '../services/highlightEventProcessor'
-import { useStoreTimeline } from '../hooks/useStoreTimeline'
+// import { KINDS } from '../config/kinds'
+// import { eventToHighlight } from '../services/highlightEventProcessor'
+// import { useStoreTimeline } from '../hooks/useStoreTimeline'
 import { dedupeHighlightsById, dedupeWritingsByReplaceable } from '../utils/dedupe'
 import { writingsController } from '../services/writingsController'
 import { nostrverseWritingsController } from '../services/nostrverseWritingsController'
+import { readingProgressController } from '../services/readingProgressController'
+import { contactsController } from '../services/contactsController'
 
-const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
+// Accessors from Helpers (currently unused here)
+// const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
 interface ExploreProps {
   relayPool: RelayPool
@@ -54,24 +57,28 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
   const [hasLoadedNostrverse, setHasLoadedNostrverse] = useState(false)
   const [hasLoadedMine, setHasLoadedMine] = useState(false)
   const [hasLoadedNostrverseHighlights, setHasLoadedNostrverseHighlights] = useState(false)
+  const hasHydratedRef = useRef(false)
   
   // Get myHighlights directly from controller
-  const [myHighlights, setMyHighlights] = useState<Highlight[]>([])
+  const [/* myHighlights */, setMyHighlights] = useState<Highlight[]>([])
   // Remove unused loading state to avoid warnings
   
+  // Reading progress state (naddr -> progress 0-1)
+  const [readingProgressMap, setReadingProgressMap] = useState<Map<string, number>>(new Map())
+  
   // Load cached content from event store (instant display)
-  const cachedHighlights = useStoreTimeline(eventStore, { kinds: [KINDS.Highlights] }, eventToHighlight, [])
+  // const cachedHighlights = useStoreTimeline(eventStore, { kinds: [KINDS.Highlights] }, eventToHighlight, [])
   
-  const toBlogPostPreview = useCallback((event: NostrEvent): BlogPostPreview => ({
-    event,
-    title: getArticleTitle(event) || 'Untitled',
-    summary: getArticleSummary(event),
-    image: getArticleImage(event),
-    published: getArticlePublished(event),
-    author: event.pubkey
-  }), [])
+  // const toBlogPostPreview = useCallback((event: NostrEvent): BlogPostPreview => ({
+  //   event,
+  //   title: getArticleTitle(event) || 'Untitled',
+  //   summary: getArticleSummary(event),
+  //   image: getArticleImage(event),
+  //   published: getArticlePublished(event),
+  //   author: event.pubkey
+  // }), [])
   
-  const cachedWritings = useStoreTimeline(eventStore, { kinds: [30023] }, toBlogPostPreview, [])
+  // const cachedWritings = useStoreTimeline(eventStore, { kinds: [30023] }, toBlogPostPreview, [])
 
   
   
@@ -101,6 +108,21 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
     }
   }, [])
 
+  // Subscribe to contacts stream and mirror into local state
+  useEffect(() => {
+    const unsubscribe = contactsController.onContacts((contacts) => {
+      setFollowedPubkeys(new Set(contacts))
+    })
+    return () => unsubscribe()
+  }, [])
+
+  // Ensure contacts controller is started for the active account (non-blocking)
+  useEffect(() => {
+    if (relayPool && activeAccount?.pubkey) {
+      contactsController.start({ relayPool, pubkey: activeAccount.pubkey }).catch(() => {})
+    }
+  }, [relayPool, activeAccount?.pubkey])
+
   // Subscribe to nostrverse highlights controller for global stream
   useEffect(() => {
     const apply = (incoming: Highlight[]) => {
@@ -169,6 +191,36 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
 
     return () => unsub()
   }, [])
+  
+  // Subscribe to reading progress controller
+  useEffect(() => {
+    // Get initial state immediately
+    const initialMap = readingProgressController.getProgressMap()
+    setReadingProgressMap(initialMap)
+    
+    // Subscribe to updates
+    const unsubProgress = readingProgressController.onProgress((newMap) => {
+      setReadingProgressMap(newMap)
+    })
+    
+    return () => {
+      unsubProgress()
+    }
+  }, [])
+  
+  // Load reading progress data when logged in
+  useEffect(() => {
+    if (!activeAccount?.pubkey) {
+      return
+    }
+    
+    readingProgressController.start({
+      relayPool,
+      eventStore,
+      pubkey: activeAccount.pubkey,
+      force: refreshTrigger > 0
+    })
+  }, [activeAccount?.pubkey, relayPool, eventStore, refreshTrigger])
 
   // Update visibility when settings/login state changes
   useEffect(() => {
@@ -196,242 +248,95 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
     }
   }, [propActiveTab])
 
-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        // begin load, but do not block rendering
-        setLoading(true)
+  // Load initial data and refresh on triggers
+  const loadData = useCallback(() => {
+    if (!relayPool) return
 
-        // If not logged in, only fetch nostrverse content with streaming posts
-        if (!activeAccount) {
-          // Logged out: rely entirely on centralized controllers; do not fetch here
-          setLoading(false)
-        }
+    // Seed from cache for instant UI
+    if (activeAccount) {
+      const cachedPosts = getCachedPosts(activeAccount.pubkey)
+      if (cachedPosts && cachedPosts.length > 0) setBlogPosts(cachedPosts)
+      const cached = getCachedHighlights(activeAccount.pubkey)
+      if (cached && cached.length > 0) setHighlights(cached)
+    }
 
-        // Seed from in-memory cache if available to avoid empty flash
-        const memoryCachedPosts = activeAccount ? getCachedPosts(activeAccount.pubkey) : []
-        if (memoryCachedPosts && memoryCachedPosts.length > 0) {
-          setBlogPosts(prev => prev.length === 0 ? memoryCachedPosts : prev)
-        }
-        const memoryCachedHighlights = activeAccount ? getCachedHighlights(activeAccount.pubkey) : []
-        if (memoryCachedHighlights && memoryCachedHighlights.length > 0) {
-          setHighlights(prev => prev.length === 0 ? memoryCachedHighlights : prev)
-        }
-        
-        // Seed with cached content from event store (instant display)
-        if (cachedHighlights.length > 0 || myHighlights.length > 0) {
-          const merged = dedupeHighlightsById([...cachedHighlights, ...myHighlights])
-          setHighlights(prev => {
-            const all = dedupeHighlightsById([...prev, ...merged])
-            return all.sort((a, b) => b.created_at - a.created_at)
-          })
-        }
-        
-        // Seed with cached writings from event store
-        if (cachedWritings.length > 0) {
-          setBlogPosts(prev => {
-            const all = dedupeWritingsByReplaceable([...prev, ...cachedWritings])
-            return all.sort((a, b) => {
-              const timeA = a.published || a.event.created_at
-              const timeB = b.published || b.event.created_at
-              return timeB - timeA
-            })
-          })
-        }
+    setLoading(true)
 
-        // At this point, we have seeded any available data; lift the loading state
-        setLoading(false)
+    try {
+      // Prepare parallel fetches
+      const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
 
-        // Fetch the user's contacts (friends)
-        const contacts = await fetchContacts(
+      // Nostrverse writings: subscribe-style via onPost; hydrate on first post
+      if (!activeAccount || (activeAccount && visibility.nostrverse)) {
+        fetchNostrverseBlogPosts(
           relayPool,
-          activeAccount?.pubkey || '',
-          (partial) => {
-            // Store followed pubkeys for highlight classification
-            setFollowedPubkeys(partial)
-            // When local contacts are available, kick off early fetch
-            if (partial.size > 0) {
-              const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
-              const partialArray = Array.from(partial)
-              
-              // Fetch blog posts
-              fetchBlogPostsFromAuthors(
-                relayPool,
-                partialArray,
-                relayUrls,
-                (post) => {
-                  setBlogPosts((prev) => {
-                    // Deduplicate by author:d-tag (replaceable event key)
-                    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
-                    const key = `${post.author}:${dTag}`
-                    const existingIndex = prev.findIndex(p => {
-                      const pDTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
-                      return `${p.author}:${pDTag}` === key
-                    })
-                    
-                    // If exists, only replace if this one is newer
-                    if (existingIndex >= 0) {
-                      const existing = prev[existingIndex]
-                      if (post.event.created_at <= existing.event.created_at) {
-                        return prev // Keep existing (newer or same)
-                      }
-                      // Replace with newer version
-                      const next = [...prev]
-                      next[existingIndex] = post
-                      return next.sort((a, b) => {
-                        const timeA = a.published || a.event.created_at
-                        const timeB = b.published || b.event.created_at
-                        return timeB - timeA
-                      })
-                    }
-                    
-                    // New post, add it
-                    const next = [...prev, post]
-                    return next.sort((a, b) => {
-                      const timeA = a.published || a.event.created_at
-                      const timeB = b.published || b.event.created_at
-                      return timeB - timeA
-                    })
-                  })
-                  if (activeAccount) setCachedPosts(activeAccount.pubkey, upsertCachedPost(activeAccount.pubkey, post))
-                }
-              ).then((all) => {
-                setBlogPosts((prev) => {
-                  // Deduplicate by author:d-tag (replaceable event key)
-                  const byKey = new Map<string, BlogPostPreview>()
-                  
-                  // Add existing posts
-                  for (const p of prev) {
-                    const dTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
-                    const key = `${p.author}:${dTag}`
-                    byKey.set(key, p)
-                  }
-                  
-                  // Merge in new posts (keeping newer versions)
-                  for (const post of all) {
-                    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
-                    const key = `${post.author}:${dTag}`
-                    const existing = byKey.get(key)
-                    if (!existing || post.event.created_at > existing.event.created_at) {
-                      byKey.set(key, post)
-                    }
-                  }
-                  
-                  const merged = Array.from(byKey.values()).sort((a, b) => {
-                    const timeA = a.published || a.event.created_at
-                    const timeB = b.published || b.event.created_at
-                    return timeB - timeA
-                  })
-                  if (activeAccount) setCachedPosts(activeAccount.pubkey, merged)
-                  return merged
-                })
-              })
-              
-              // Fetch highlights
-              fetchHighlightsFromAuthors(
-                relayPool,
-                partialArray,
-                (highlight) => {
-                  setHighlights((prev) => {
-                    const exists = prev.some(h => h.id === highlight.id)
-                    if (exists) return prev
-                    const next = [...prev, highlight]
-                    return next.sort((a, b) => b.created_at - a.created_at)
-                  })
-                  if (activeAccount) setCachedHighlights(activeAccount.pubkey, upsertCachedHighlight(activeAccount.pubkey, highlight))
-                }
-              ).then((all) => {
-                setHighlights((prev) => {
-                  const byId = new Map(prev.map(h => [h.id, h]))
-                  for (const highlight of all) byId.set(highlight.id, highlight)
-                  const merged = Array.from(byId.values()).sort((a, b) => b.created_at - a.created_at)
-                  if (activeAccount) setCachedHighlights(activeAccount.pubkey, merged)
-                  return merged
-                })
-              })
-            }
-          }
-        )
-        
-        // Always proceed to load nostrverse content even if no contacts
-        // (removed blocking error for empty contacts)
-
-        // Store final followed pubkeys
-        setFollowedPubkeys(contacts)
-
-        // Fetch friends content and (optionally) nostrverse + mine content in parallel
-        const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
-        const contactsArray = Array.from(contacts)
-        // Use centralized writingsController for my posts (non-blocking)
-        // pull from writingsController; no need to store promise
-        setBlogPosts(prev => dedupeWritingsByReplaceable([...prev, ...writingsController.getWritings()]).sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at)))
-        setHasLoadedMine(true)
-        const nostrversePostsPromise = visibility.nostrverse
-          ? fetchNostrverseBlogPosts(relayPool, relayUrls, 50, eventStore || undefined, (post) => {
-              // Stream nostrverse posts too when logged in
-              setBlogPosts(prev => {
-                const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
-                const key = `${post.author}:${dTag}`
-                const existingIndex = prev.findIndex(p => {
-                  const pDTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
-                  return `${p.author}:${pDTag}` === key
-                })
-                if (existingIndex >= 0) {
-                  const existing = prev[existingIndex]
-                  if (post.event.created_at <= existing.event.created_at) return prev
-                  const next = [...prev]
-                  next[existingIndex] = post
-                  return next.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
-                }
-                const next = [...prev, post]
-                return next.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
-              })
-            })
-          : Promise.resolve([] as BlogPostPreview[])
-
-        // Fire non-blocking fetches and merge as they resolve
-        fetchBlogPostsFromAuthors(relayPool, contactsArray, relayUrls)
-          .then((friendsPosts) => {
+          relayUrls,
+          50,
+          eventStore || undefined,
+          (post) => {
             setBlogPosts(prev => {
-              const merged = dedupeWritingsByReplaceable([...prev, ...friendsPosts])
-              const sorted = merged.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
-              if (activeAccount) setCachedPosts(activeAccount.pubkey, sorted)
-              // Pre-cache profiles in background
-              const authorPubkeys = Array.from(new Set(sorted.map(p => p.author)))
-              fetchProfiles(relayPool, eventStore, authorPubkeys, settings).catch(() => {})
-              return sorted
+              const merged = dedupeWritingsByReplaceable([...prev, post])
+              if (activeAccount) setCachedPosts(activeAccount.pubkey, merged)
+              return merged.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
             })
-          }).catch(() => {})
-
-        fetchHighlightsFromAuthors(relayPool, contactsArray)
-          .then((friendsHighlights) => {
-            setHighlights(prev => {
-              const merged = dedupeHighlightsById([...prev, ...friendsHighlights])
-              const sorted = merged.sort((a, b) => b.created_at - a.created_at)
-              if (activeAccount) setCachedHighlights(activeAccount.pubkey, sorted)
-              return sorted
-            })
-          }).catch(() => {})
-
-        nostrversePostsPromise.then((nostrversePosts) => {
+            if (!hasHydratedRef.current) { hasHydratedRef.current = true; setLoading(false) }
+          }
+        ).then((nostrversePosts) => {
           setBlogPosts(prev => dedupeWritingsByReplaceable([...prev, ...nostrversePosts]).sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at)))
         }).catch(() => {})
-
-        fetchNostrverseHighlights(relayPool, 100, eventStore || undefined)
-          .then((nostriverseHighlights) => {
-            setHighlights(prev => dedupeHighlightsById([...prev, ...nostriverseHighlights]).sort((a, b) => b.created_at - a.created_at))
-          }).catch(() => {})
+      }
       } catch (err) {
         console.error('Failed to load data:', err)
         // No blocking error - user can pull-to-refresh
       } finally {
         // loading is already turned off after seeding
       }
-    }
+  }, [relayPool, activeAccount, eventStore, visibility.nostrverse])
 
+  useEffect(() => {
     loadData()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [relayPool, activeAccount, refreshTrigger, eventStore, settings])
+  }, [loadData, refreshTrigger])
+
+  // Kick off friends fetches reactively when contacts arrive
+  useEffect(() => {
+    if (!relayPool) return
+    if (followedPubkeys.size === 0) return
+    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    const contactsArray = Array.from(followedPubkeys)
+
+    fetchBlogPostsFromAuthors(relayPool, contactsArray, relayUrls, (post) => {
+      setBlogPosts(prev => {
+        const merged = dedupeWritingsByReplaceable([...prev, post])
+        if (activeAccount) setCachedPosts(activeAccount.pubkey, merged)
+        // Pre-cache profiles in background
+        const authorPubkeys = Array.from(new Set(merged.map(p => p.author)))
+        fetchProfiles(relayPool, eventStore, authorPubkeys, settings).catch(() => {})
+        return merged.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+      })
+      if (!hasHydratedRef.current) { hasHydratedRef.current = true; setLoading(false) }
+    }, 100, eventStore).then((friendsPosts) => {
+      setBlogPosts(prev => {
+        const merged = dedupeWritingsByReplaceable([...prev, ...friendsPosts])
+        if (activeAccount) setCachedPosts(activeAccount.pubkey, merged)
+        return merged.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+      })
+    }).catch(() => {})
+
+    fetchHighlightsFromAuthors(relayPool, contactsArray, (highlight) => {
+      setHighlights(prev => {
+        const merged = dedupeHighlightsById([...prev, highlight])
+        if (activeAccount) setCachedHighlights(activeAccount.pubkey, merged)
+        return merged.sort((a, b) => b.created_at - a.created_at)
+      })
+      if (!hasHydratedRef.current) { hasHydratedRef.current = true; setLoading(false) }
+    }, eventStore || undefined).then((friendsHighlights) => {
+      setHighlights(prev => {
+        const merged = dedupeHighlightsById([...prev, ...friendsHighlights])
+        if (activeAccount) setCachedHighlights(activeAccount.pubkey, merged)
+        return merged.sort((a, b) => b.created_at - a.created_at)
+      })
+    }).catch(() => {})
+  }, [relayPool, followedPubkeys, eventStore, settings, activeAccount])
 
   // Lazy-load nostrverse writings when user toggles it on (logged in)
   useEffect(() => {
@@ -475,7 +380,12 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
         return Array.from(byKey.values()).sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
       })
     }).catch(() => {})
-  }, [visibility.nostrverse, activeAccount, relayPool, eventStore, hasLoadedNostrverse])
+
+    fetchNostrverseHighlights(relayPool, 100, eventStore || undefined)
+      .then((nostriverseHighlights) => {
+        setHighlights(prev => dedupeHighlightsById([...prev, ...nostriverseHighlights]).sort((a, b) => b.created_at - a.created_at))
+      }).catch(() => {})
+  }, [activeAccount, relayPool, visibility.nostrverse, hasLoadedNostrverse, eventStore])
 
   // Lazy-load nostrverse highlights when user toggles it on (logged in)
   useEffect(() => {
@@ -552,6 +462,12 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
         const publishedTime = post.published || post.event.created_at
         if (publishedTime > maxFutureTime) return false
         
+        // Hide bot authors by profile display name if setting enabled
+        if (settings?.hideBotArticlesByName !== false) {
+          // Profile resolution and filtering is handled in BlogPostCard via ProfileModel
+          // Keep list intact here; individual cards will render null if author is a bot
+        }
+        
         // Apply visibility filters
         const isMine = activeAccount && post.author === activeAccount.pubkey
         const isFriend = followedPubkeys.has(post.author)
@@ -570,7 +486,29 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
         const level: 'mine' | 'friends' | 'nostrverse' = isMine ? 'mine' : isFriend ? 'friends' : 'nostrverse'
         return { ...post, level }
       })
-  }, [uniqueSortedPosts, activeAccount, followedPubkeys, visibility])
+  }, [uniqueSortedPosts, activeAccount, followedPubkeys, visibility, settings?.hideBotArticlesByName])
+  
+  // Helper to get reading progress for a post
+  const getReadingProgress = useCallback((post: BlogPostPreview): number | undefined => {
+    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1]
+    if (!dTag) {
+      return undefined
+    }
+    
+    try {
+      const naddr = nip19.naddrEncode({
+        kind: 30023,
+        pubkey: post.author,
+        identifier: dTag
+      })
+      const progress = readingProgressMap.get(naddr)
+      
+      return progress
+    } catch (err) {
+      console.error('[progress] ❌ Error encoding naddr:', err)
+      return undefined
+    }
+  }, [readingProgressMap])
 
   const renderTabContent = () => {
     switch (activeTab) {
@@ -585,8 +523,10 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
           )
         }
         return filteredBlogPosts.length === 0 ? (
-          <div className="explore-loading" style={{ gridColumn: '1/-1', display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
-            <FontAwesomeIcon icon={faSpinner} spin size="2x" />
+          <div className="explore-grid">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <BlogPostSkeleton key={i} />
+            ))}
           </div>
         ) : (
           <div className="explore-grid">
@@ -596,6 +536,8 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
                 post={post}
                 href={getPostUrl(post)}
                 level={post.level}
+                readingProgress={getReadingProgress(post)}
+                hideBotByName={settings?.hideBotArticlesByName !== false}
               />
             ))}
           </div>
@@ -644,7 +586,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
       />
       <div className="explore-header">
         <h1>
-          <FontAwesomeIcon icon={faNewspaper} />
+          <FontAwesomeIcon icon={faPersonHiking} />
           Explore
         </h1>
         
@@ -716,7 +658,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
         </div>
       </div>
 
-      <div key={activeTab}>
+      <div>
         {renderTabContent()}
       </div>
     </div>

src/components/HighlightCitation.tsx

@@ -27,7 +27,6 @@ export const HighlightCitation: React.FC<HighlightCitationProps> = ({
     // Fallback: extract directly from p tag
     const pTag = highlight.tags.find(t => t[0] === 'p')
     if (pTag && pTag[1]) {
-      console.log('📝 Found author from p tag:', pTag[1])
       return pTag[1]
     }
     
@@ -45,6 +44,12 @@ export const HighlightCitation: React.FC<HighlightCitationProps> = ({
       try {
         if (!highlight.eventReference) return
         
+        // Skip if it's a raw event ID (hex string without colons)
+        // Raw event IDs cannot be decoded to nadrs without additional context
+        if (!highlight.eventReference.includes(':') && !highlight.eventReference.startsWith('naddr')) {
+          return
+        }
+        
         // Convert eventReference to naddr if needed
         let naddr: string
         if (highlight.eventReference.includes(':')) {

src/components/HighlightItem.tsx

@@ -8,8 +8,8 @@ import { Models, IEventStore } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
 import { Hooks } from 'applesauce-react'
 import { onSyncStateChange, isEventSyncing } from '../services/offlineSyncService'
-import { RELAYS } from '../config/relays'
 import { areAllRelaysLocal } from '../utils/helpers'
+import { getActiveRelayUrls } from '../services/relayManager'
 import { nip19 } from 'nostr-tools'
 import { formatDateCompact } from '../utils/bookmarkUtils'
 import { createDeletionRequest } from '../services/deletionService'
@@ -17,6 +17,7 @@ import { getNostrUrl } from '../config/nostrGateways'
 import CompactButton from './CompactButton'
 import { HighlightCitation } from './HighlightCitation'
 import { useNavigate } from 'react-router-dom'
+import NostrMentionLink from './NostrMentionLink'
 
 // Helper to detect if a URL is an image
 const isImageUrl = (url: string): boolean => {
@@ -29,99 +30,6 @@ const isImageUrl = (url: string): boolean => {
   }
 }
 
-// Helper to render a nostr identifier
-const renderNostrId = (nostrUri: string, index: number): React.ReactElement => {
-  try {
-    // Remove nostr: prefix
-    const identifier = nostrUri.replace(/^nostr:/, '')
-    const decoded = nip19.decode(identifier)
-    
-    switch (decoded.type) {
-      case 'npub': {
-        const pubkey = decoded.data
-        return (
-          <a
-            key={index}
-            href={`/p/${nip19.npubEncode(pubkey)}`}
-            className="highlight-comment-link"
-            onClick={(e) => e.stopPropagation()}
-          >
-            @{pubkey.slice(0, 8)}...
-          </a>
-        )
-      }
-      case 'nprofile': {
-        const { pubkey } = decoded.data
-        const npub = nip19.npubEncode(pubkey)
-        return (
-          <a
-            key={index}
-            href={`/p/${npub}`}
-            className="highlight-comment-link"
-            onClick={(e) => e.stopPropagation()}
-          >
-            @{pubkey.slice(0, 8)}...
-          </a>
-        )
-      }
-      case 'naddr': {
-        const { kind, pubkey, identifier } = decoded.data
-        // Check if it's a blog post (kind:30023)
-        if (kind === 30023) {
-          const naddr = nip19.naddrEncode({ kind, pubkey, identifier })
-          return (
-            <a
-              key={index}
-              href={`/a/${naddr}`}
-              className="highlight-comment-link"
-              onClick={(e) => e.stopPropagation()}
-            >
-              {identifier || 'Article'}
-            </a>
-          )
-        }
-        // For other kinds, show shortened identifier
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            nostr:{identifier.slice(0, 12)}...
-          </span>
-        )
-      }
-      case 'note': {
-        const eventId = decoded.data
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            note:{eventId.slice(0, 12)}...
-          </span>
-        )
-      }
-      case 'nevent': {
-        const { id } = decoded.data
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            event:{id.slice(0, 12)}...
-          </span>
-        )
-      }
-      default:
-        // Fallback for unrecognized types
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            {identifier.slice(0, 20)}...
-          </span>
-        )
-    }
-  } catch (error) {
-    // If decoding fails, show shortened identifier
-    const identifier = nostrUri.replace(/^nostr:/, '')
-    return (
-      <span key={index} className="highlight-comment-nostr-id">
-        {identifier.slice(0, 20)}...
-      </span>
-    )
-  }
-}
-
 // Component to render comment with links, inline images, and nostr identifiers
 const CommentContent: React.FC<{ text: string }> = ({ text }) => {
   // Pattern to match both http(s) URLs and nostr: URIs
@@ -131,9 +39,15 @@ const CommentContent: React.FC<{ text: string }> = ({ text }) => {
   return (
     <>
       {parts.map((part, index) => {
-        // Handle nostr: URIs
+        // Handle nostr: URIs - now with profile resolution
         if (part.startsWith('nostr:')) {
-          return renderNostrId(part, index)
+          return (
+            <NostrMentionLink
+              key={index}
+              nostrUri={part}
+              onClick={(e) => e.stopPropagation()}
+            />
+          )
         }
         
         // Handle http(s) URLs
@@ -236,10 +150,10 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
           setShowOfflineIndicator(false)
           
           // Update the highlight with all relays after successful sync
-          if (onHighlightUpdate && highlight.isLocalOnly) {
+          if (onHighlightUpdate && highlight.isLocalOnly && relayPool) {
             const updatedHighlight = {
               ...highlight,
-              publishedRelays: RELAYS,
+              publishedRelays: getActiveRelayUrls(relayPool),
               isLocalOnly: false,
               isOfflineCreated: false
             }
@@ -250,7 +164,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     })
     
     return unsubscribe
-  }, [highlight, onHighlightUpdate])
+  }, [highlight, onHighlightUpdate, relayPool])
   
   useEffect(() => {
     if (isSelected && itemRef.current) {
@@ -310,7 +224,8 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   const getHighlightLinks = () => {
     // Encode the highlight event itself (kind 9802) as a nevent
     // Get non-local relays for the hint
-    const relayHints = RELAYS.filter(r => 
+    const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
+    const relayHints = activeRelays.filter(r => 
       !r.includes('localhost') && !r.includes('127.0.0.1')
     ).slice(0, 3) // Include up to 3 relay hints
     
@@ -346,13 +261,11 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
       }
       
       // Publish to all configured relays - let the relay pool handle connection state
-      const targetRelays = RELAYS
+      const targetRelays = getActiveRelayUrls(relayPool)
       
-      console.log('📡 Rebroadcasting highlight to', targetRelays.length, 'relay(s):', targetRelays)
       
       await relayPool.publish(targetRelays, event)
       
-      console.log('✅ Rebroadcast successful!')
       
       // Update the highlight with new relay info
       const isLocalOnly = areAllRelaysLocal(targetRelays)
@@ -416,7 +329,8 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     }
     
     // Fallback: show all relays we queried (where this was likely fetched from)
-    const relayNames = RELAYS.map(url => 
+    const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
+    const relayNames = activeRelays.map(url => 
       url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
     )
     return {
@@ -449,7 +363,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         relayPool
       )
       
-      console.log('✅ Highlight deletion request published')
       
       // Notify parent to remove this highlight from the list
       if (onHighlightDelete) {

src/components/HighlightsPanel.tsx

@@ -37,6 +37,7 @@ interface HighlightsPanelProps {
   relayPool?: RelayPool | null
   eventStore?: IEventStore | null
   settings?: UserSettings
+  isMobile?: boolean
 }
 
 export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
@@ -56,7 +57,8 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   followedPubkeys = new Set(),
   relayPool,
   eventStore,
-  settings
+  settings,
+  isMobile = false
 }) => {
   const [showHighlights, setShowHighlights] = useState(true)
   const [localHighlights, setLocalHighlights] = useState(highlights)
@@ -125,6 +127,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
         onRefresh={onRefresh}
         onToggleCollapse={onToggleCollapse}
         onHighlightVisibilityChange={onHighlightVisibilityChange}
+        isMobile={isMobile}
       />
 
       {loading && filteredHighlights.length === 0 ? (

src/components/HighlightsPanel/HighlightsPanelHeader.tsx

@@ -13,6 +13,7 @@ interface HighlightsPanelHeaderProps {
   onRefresh?: () => void
   onToggleCollapse: () => void
   onHighlightVisibilityChange?: (visibility: HighlightVisibility) => void
+  isMobile?: boolean
 }
 
 const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
@@ -24,7 +25,8 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
   onToggleHighlights,
   onRefresh,
   onToggleCollapse,
-  onHighlightVisibilityChange
+  onHighlightVisibilityChange,
+  isMobile = false
 }) => {
   return (
     <div className="highlights-header">
@@ -46,36 +48,38 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
                   opacity: highlightVisibility.nostrverse ? 1 : 0.4 
                 }}
               />
-              <IconButton
-                icon={faUserGroup}
-                onClick={() => onHighlightVisibilityChange({ 
-                  ...highlightVisibility, 
-                  friends: !highlightVisibility.friends 
-                })}
-                title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"}
-                ariaLabel="Toggle friends highlights"
-                variant="ghost"
-                disabled={!currentUserPubkey}
-                style={{ 
-                  color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined,
-                  opacity: highlightVisibility.friends ? 1 : 0.4 
-                }}
-              />
-              <IconButton
-                icon={faUser}
-                onClick={() => onHighlightVisibilityChange({ 
-                  ...highlightVisibility, 
-                  mine: !highlightVisibility.mine 
-                })}
-                title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"}
-                ariaLabel="Toggle my highlights"
-                variant="ghost"
-                disabled={!currentUserPubkey}
-                style={{ 
-                  color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined,
-                  opacity: highlightVisibility.mine ? 1 : 0.4 
-                }}
-              />
+              {currentUserPubkey && (
+                <>
+                  <IconButton
+                    icon={faUserGroup}
+                    onClick={() => onHighlightVisibilityChange({ 
+                      ...highlightVisibility, 
+                      friends: !highlightVisibility.friends 
+                    })}
+                    title="Toggle friends highlights"
+                    ariaLabel="Toggle friends highlights"
+                    variant="ghost"
+                    style={{ 
+                      color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined,
+                      opacity: highlightVisibility.friends ? 1 : 0.4 
+                    }}
+                  />
+                  <IconButton
+                    icon={faUser}
+                    onClick={() => onHighlightVisibilityChange({ 
+                      ...highlightVisibility, 
+                      mine: !highlightVisibility.mine 
+                    })}
+                    title="Toggle my highlights"
+                    ariaLabel="Toggle my highlights"
+                    variant="ghost"
+                    style={{ 
+                      color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined,
+                      opacity: highlightVisibility.mine ? 1 : 0.4 
+                    }}
+                  />
+                </>
+              )}
             </div>
           )}
           {onRefresh && (
@@ -99,14 +103,16 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
             />
           )}
         </div>
-        <IconButton
-          icon={faChevronRight}
-          onClick={onToggleCollapse}
-          title="Collapse highlights panel"
-          ariaLabel="Collapse highlights panel"
-          variant="ghost"
-          style={{ transform: 'rotate(180deg)' }}
-        />
+        {!isMobile && (
+          <IconButton
+            icon={faChevronRight}
+            onClick={onToggleCollapse}
+            title="Collapse highlights panel"
+            ariaLabel="Collapse highlights panel"
+            variant="ghost"
+            style={{ transform: 'rotate(180deg)' }}
+          />
+        )}
       </div>
     </div>
   )

src/components/LoginOptions.tsx

@@ -124,7 +124,7 @@ const LoginOptions: React.FC = () => {
       <div className="login-content">
         <h2 className="login-title">Hi! I'm Boris.</h2>
         <p className="login-description">
-          Connect your npub to see your bookmarks, explore long-form articles, and create <mark className="login-highlight">your own highlights</mark>.
+          <mark className="login-highlight">Connect your npub</mark> to see your bookmarks, explore long-form articles, and create <mark className="login-highlight">your own highlights.</mark>
         </p>
         
         <div className="login-buttons">

src/components/Me.tsx

@@ -1,77 +1,69 @@
-import React, { useState, useEffect, useMemo } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHighlighter, faBookmark, faList, faThLarge, faImage, faPenToSquare, faLink, faLayerGroup, faBars } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter, faBookmark, faPenToSquare, faLink, faLayerGroup } from '@fortawesome/free-solid-svg-icons'
+import { faClock } from '@fortawesome/free-regular-svg-icons'
 import { Hooks } from 'applesauce-react'
-import { IEventStore, Helpers } from 'applesauce-core'
+import { IEventStore } from 'applesauce-core'
 import { BlogPostSkeleton, HighlightSkeleton, BookmarkSkeleton } from './Skeletons'
 import { RelayPool } from 'applesauce-relay'
-import { nip19, NostrEvent } from 'nostr-tools'
+import { nip19 } from 'nostr-tools'
 import { useNavigate, useParams } from 'react-router-dom'
 import { Highlight } from '../types/highlights'
 import { HighlightItem } from './HighlightItem'
-import { fetchHighlights } from '../services/highlightService'
 import { highlightsController } from '../services/highlightsController'
 import { writingsController } from '../services/writingsController'
-import { fetchAllReads, ReadItem } from '../services/readsService'
 import { fetchLinks } from '../services/linksService'
-import { BlogPostPreview, fetchBlogPostsFromAuthors } from '../services/exploreService'
-import { RELAYS } from '../config/relays'
+import { ReadItem, readsController } from '../services/readsController'
+import { BlogPostPreview } from '../services/exploreService'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import AuthorCard from './AuthorCard'
 import BlogPostCard from './BlogPostCard'
 import { BookmarkItem } from './BookmarkItem'
 import IconButton from './IconButton'
-import { ViewMode } from './Bookmarks'
 import { getCachedMeData, updateCachedHighlights } from '../services/meCache'
 import { faBooks } from '../icons/customIcons'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
-import { groupIndividualBookmarks, hasContent } from '../utils/bookmarkUtils'
+import { groupIndividualBookmarks, hasContent, hasCreationDate, sortIndividualBookmarks } from '../utils/bookmarkUtils'
 import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
 import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
 import ReadingProgressFilters, { ReadingProgressFilterType } from './ReadingProgressFilters'
 import { filterByReadingProgress } from '../utils/readingProgressUtils'
-import { deriveReadsFromBookmarks } from '../utils/readsFromBookmarks'
 import { deriveLinksFromBookmarks } from '../utils/linksFromBookmarks'
-import { mergeReadItem } from '../utils/readItemMerge'
-import { useStoreTimeline } from '../hooks/useStoreTimeline'
-import { eventToHighlight } from '../services/highlightEventProcessor'
-import { KINDS } from '../config/kinds'
-
-const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
+import { readingProgressController } from '../services/readingProgressController'
+import { archiveController } from '../services/archiveController'
+import { UserSettings } from '../services/settingsService'
 
 interface MeProps {
   relayPool: RelayPool
   eventStore: IEventStore
   activeTab?: TabType
-  pubkey?: string // Optional pubkey for viewing other users' profiles
   bookmarks: Bookmark[] // From centralized App.tsx state
   bookmarksLoading?: boolean // From centralized App.tsx state (reserved for future use)
+  settings: UserSettings
 }
 
-type TabType = 'highlights' | 'reading-list' | 'reads' | 'links' | 'writings'
+type TabType = 'highlights' | 'bookmarks' | 'reads' | 'links' | 'writings'
 
 // Valid reading progress filters
-const VALID_FILTERS: ReadingProgressFilterType[] = ['all', 'unopened', 'started', 'reading', 'completed']
+const VALID_FILTERS: ReadingProgressFilterType[] = ['all', 'unopened', 'started', 'reading', 'completed', 'highlighted', 'archive']
 
 const Me: React.FC<MeProps> = ({ 
   relayPool, 
   eventStore,
-  activeTab: propActiveTab, 
-  pubkey: propPubkey,
-  bookmarks
+  activeTab: propActiveTab,
+  bookmarks,
+  settings
 }) => {
   const activeAccount = Hooks.useActiveAccount()
   const navigate = useNavigate()
   const { filter: urlFilter } = useParams<{ filter?: string }>()
-  const [activeTab, setActiveTab] = useState<TabType>(propActiveTab || 'highlights')
+  const activeTab = propActiveTab || 'highlights'
   
-  // Use provided pubkey or fall back to active account
-  const viewingPubkey = propPubkey || activeAccount?.pubkey
-  const isOwnProfile = !propPubkey || (activeAccount?.pubkey === propPubkey)
+  // Only for own profile
+  const viewingPubkey = activeAccount?.pubkey
   const [highlights, setHighlights] = useState<Highlight[]>([])
   const [reads, setReads] = useState<ReadItem[]>([])
-  const [, setReadsMap] = useState<Map<string, ReadItem>>(new Map())
   const [links, setLinks] = useState<ReadItem[]>([])
   const [, setLinksMap] = useState<Map<string, ReadItem>>(new Map())
   const [writings, setWritings] = useState<BlogPostPreview[]>([])
@@ -86,30 +78,6 @@ const Me: React.FC<MeProps> = ({
   const [myWritings, setMyWritings] = useState<BlogPostPreview[]>([])
   const [myWritingsLoading, setMyWritingsLoading] = useState(false)
   
-  // Load cached data from event store for OTHER profiles (not own)
-  const cachedHighlights = useStoreTimeline(
-    eventStore,
-    !isOwnProfile && viewingPubkey ? { kinds: [KINDS.Highlights], authors: [viewingPubkey] } : { kinds: [KINDS.Highlights], limit: 0 },
-    eventToHighlight,
-    [viewingPubkey, isOwnProfile]
-  )
-  
-  const toBlogPostPreview = useMemo(() => (event: NostrEvent): BlogPostPreview => ({
-    event,
-    title: getArticleTitle(event) || 'Untitled',
-    summary: getArticleSummary(event),
-    image: getArticleImage(event),
-    published: getArticlePublished(event),
-    author: event.pubkey
-  }), [])
-  
-  const cachedWritings = useStoreTimeline(
-    eventStore,
-    !isOwnProfile && viewingPubkey ? { kinds: [30023], authors: [viewingPubkey] } : { kinds: [30023], limit: 0 },
-    toBlogPostPreview,
-    [viewingPubkey, isOwnProfile]
-  )
-  const [viewMode, setViewMode] = useState<ViewMode>('cards')
   const [refreshTrigger, setRefreshTrigger] = useState(0)
   const [bookmarkFilter, setBookmarkFilter] = useState<BookmarkFilterType>('all')
   const [groupingMode, setGroupingMode] = useState<'grouped' | 'flat'>(() => {
@@ -124,10 +92,15 @@ const Me: React.FC<MeProps> = ({
   }
   
   // Initialize reading progress filter from URL param
-  const initialFilter = urlFilter && VALID_FILTERS.includes(urlFilter as ReadingProgressFilterType) 
-    ? (urlFilter as ReadingProgressFilterType) 
+  // Backward compat: map legacy 'emoji' route to 'archive'
+  const normalizedUrlFilter = urlFilter === 'emoji' ? 'archive' : urlFilter
+  const initialFilter = normalizedUrlFilter && VALID_FILTERS.includes(normalizedUrlFilter as ReadingProgressFilterType) 
+    ? (normalizedUrlFilter as ReadingProgressFilterType) 
     : 'all'
   const [readingProgressFilter, setReadingProgressFilter] = useState<ReadingProgressFilterType>(initialFilter)
+  
+  // Reading progress state for writings tab (naddr -> progress 0-1)
+  const [readingProgressMap, setReadingProgressMap] = useState<Map<string, number>>(new Map())
 
   // Subscribe to highlights controller
   useEffect(() => {
@@ -157,17 +130,11 @@ const Me: React.FC<MeProps> = ({
     }
   }, [])
 
-  // Update local state when prop changes
-  useEffect(() => {
-    if (propActiveTab) {
-      setActiveTab(propActiveTab)
-    }
-  }, [propActiveTab])
-
   // Sync filter state with URL changes
   useEffect(() => {
-    const filterFromUrl = urlFilter && VALID_FILTERS.includes(urlFilter as ReadingProgressFilterType) 
-      ? (urlFilter as ReadingProgressFilterType) 
+    const normalized = urlFilter === 'emoji' ? 'archive' : urlFilter
+    const filterFromUrl = normalized && VALID_FILTERS.includes(normalized as ReadingProgressFilterType) 
+      ? (normalized as ReadingProgressFilterType) 
       : 'all'
     setReadingProgressFilter(filterFromUrl)
   }, [urlFilter])
@@ -181,150 +148,133 @@ const Me: React.FC<MeProps> = ({
       } else {
         navigate(`/me/reads/${filter}`, { replace: true })
       }
+    } else if (activeTab === 'links') {
+      if (filter === 'all') {
+        navigate('/me/links', { replace: true })
+      } else {
+        navigate(`/me/links/${filter}`, { replace: true })
+      }
     }
   }
+  
+  // Subscribe to reads controller
+  useEffect(() => {
+    // Get initial state immediately
+    setReads(readsController.getReads())
+    
+    // Subscribe to updates
+    const unsubReads = readsController.onReads(setReads)
+    
+    return () => {
+      unsubReads()
+    }
+  }, [])
+
+  // Subscribe to reading progress map for writings and links enrichment
+  useEffect(() => {
+    // Get initial state immediately
+    setReadingProgressMap(readingProgressController.getProgressMap())
+    
+    // Subscribe to updates
+    const unsubProgress = readingProgressController.onProgress(setReadingProgressMap)
+    
+    return () => {
+      unsubProgress()
+    }
+  }, [])
+
+  
+  // Load reading progress data for writings tab
+  useEffect(() => {
+    if (!viewingPubkey) {
+      return
+    }
+    
+    readingProgressController.start({
+      relayPool,
+      eventStore,
+      pubkey: viewingPubkey,
+      force: refreshTrigger > 0
+    })
+  }, [viewingPubkey, relayPool, eventStore, refreshTrigger])
 
   // Tab-specific loading functions
-  const loadHighlightsTab = async () => {
+  const loadHighlightsTab = useCallback(async () => {
     if (!viewingPubkey) return
     
-    // Only show loading skeleton if tab hasn't been loaded yet
-    const hasBeenLoaded = loadedTabs.has('highlights')
-    
-    try {
-      if (!hasBeenLoaded) setLoading(true)
-      
-      // For own profile, highlights come from controller subscription (sync effect handles it)
-      // For viewing other users, seed with cached data then fetch fresh
-      if (!isOwnProfile) {
-        // Seed with cached highlights first
-        if (cachedHighlights.length > 0) {
-          setHighlights(cachedHighlights.sort((a, b) => b.created_at - a.created_at))
-        }
-        
-        // Fetch fresh highlights
-        const userHighlights = await fetchHighlights(relayPool, viewingPubkey)
-        setHighlights(userHighlights)
-      }
-      
-      setLoadedTabs(prev => new Set(prev).add('highlights'))
-    } catch (err) {
-      console.error('Failed to load highlights:', err)
-    } finally {
-      if (!hasBeenLoaded) setLoading(false)
-    }
-  }
+    // Highlights come from controller subscription (sync effect handles it)
+    setLoadedTabs(prev => new Set(prev).add('highlights'))
+    setLoading(false)
+  }, [viewingPubkey])
 
-  const loadWritingsTab = async () => {
+  const loadWritingsTab = useCallback(async () => {
     if (!viewingPubkey) return
     
-    const hasBeenLoaded = loadedTabs.has('writings')
-    
     try {
-      if (!hasBeenLoaded) setLoading(true)
-      
-      // For own profile, use centralized controller
-      if (isOwnProfile) {
-        await writingsController.start({ 
-          relayPool, 
-          eventStore, 
-          pubkey: viewingPubkey,
-          force: refreshTrigger > 0
-        })
-        setLoadedTabs(prev => new Set(prev).add('writings'))
-        return
-      }
-      
-      // For other profiles, seed with cached writings first
-      if (cachedWritings.length > 0) {
-        setWritings(cachedWritings.sort((a, b) => {
-          const timeA = a.published || a.event.created_at
-          const timeB = b.published || b.event.created_at
-          return timeB - timeA
-        }))
-      }
-      
-      // Fetch fresh writings for other profiles
-      const userWritings = await fetchBlogPostsFromAuthors(relayPool, [viewingPubkey], RELAYS)
-      setWritings(userWritings)
+      // Use centralized controller
+      await writingsController.start({ 
+        relayPool, 
+        eventStore, 
+        pubkey: viewingPubkey,
+        force: refreshTrigger > 0
+      })
       setLoadedTabs(prev => new Set(prev).add('writings'))
+      setLoading(false)
     } catch (err) {
       console.error('Failed to load writings:', err)
-    } finally {
-      if (!hasBeenLoaded) setLoading(false)
+      setLoading(false)
     }
-  }
+  }, [viewingPubkey, relayPool, eventStore, refreshTrigger])
 
-  const loadReadingListTab = async () => {
-    if (!viewingPubkey || !isOwnProfile || !activeAccount) return
+  const loadReadingListTab = useCallback(async () => {
+    if (!viewingPubkey || !activeAccount) return
     
-    const hasBeenLoaded = loadedTabs.has('reading-list')
-    
-    try {
+    setLoadedTabs(prev => {
+      const hasBeenLoaded = prev.has('bookmarks')
       if (!hasBeenLoaded) setLoading(true)
-      // Bookmarks come from centralized loading in App.tsx
-      setLoadedTabs(prev => new Set(prev).add('reading-list'))
-    } catch (err) {
-      console.error('Failed to load reading list:', err)
-    } finally {
-      if (!hasBeenLoaded) setLoading(false)
-    }
-  }
-
-  const loadReadsTab = async () => {
-    if (!viewingPubkey || !isOwnProfile || !activeAccount) return
+      return new Set(prev).add('bookmarks')
+    })
     
-    const hasBeenLoaded = loadedTabs.has('reads')
+    // Always turn off loading after a tick
+    setTimeout(() => setLoading(false), 0)
+  }, [viewingPubkey, activeAccount])
+
+  const loadReadsTab = useCallback(async () => {
+    if (!viewingPubkey || !activeAccount) return
+    
+    let hasBeenLoaded = false
+    setLoadedTabs(prev => {
+      hasBeenLoaded = prev.has('reads')
+      return prev
+    })
     
     try {
       if (!hasBeenLoaded) setLoading(true)
       
-      // Derive reads from bookmarks immediately (bookmarks come from centralized loading in App.tsx)
-      const initialReads = deriveReadsFromBookmarks(bookmarks)
-      const initialMap = new Map(initialReads.map(item => [item.id, item]))
-      setReadsMap(initialMap)
-      setReads(initialReads)
+      // Use readsController to get reads with progressive hydration
+      await readsController.start({ 
+        relayPool, 
+        eventStore, 
+        pubkey: viewingPubkey 
+      })
+      
       setLoadedTabs(prev => new Set(prev).add('reads'))
       if (!hasBeenLoaded) setLoading(false)
       
-      // Background enrichment: merge reading progress and mark-as-read
-      // Only update items that are already in our map
-      fetchAllReads(relayPool, viewingPubkey, bookmarks, (item) => {
-        console.log('📈 [Reads] Enrichment item received:', {
-          id: item.id.slice(0, 20) + '...',
-          progress: item.readingProgress,
-          hasProgress: item.readingProgress !== undefined && item.readingProgress > 0
-        })
-        
-        setReadsMap(prevMap => {
-          // Only update if item exists in our current map
-          if (!prevMap.has(item.id)) {
-            console.log('⚠️ [Reads] Item not in map, skipping:', item.id.slice(0, 20) + '...')
-            return prevMap
-          }
-          
-          const newMap = new Map(prevMap)
-          const merged = mergeReadItem(newMap, item)
-          if (merged) {
-            console.log('✅ [Reads] Merged progress:', item.id.slice(0, 20) + '...', item.readingProgress)
-            // Update reads array after map is updated
-            setReads(Array.from(newMap.values()))
-            return newMap
-          }
-          return prevMap
-        })
-      }).catch(err => console.warn('Failed to enrich reads:', err))
-      
     } catch (err) {
       console.error('Failed to load reads:', err)
       if (!hasBeenLoaded) setLoading(false)
     }
-  }
+  }, [viewingPubkey, activeAccount, relayPool, eventStore])
 
-  const loadLinksTab = async () => {
-    if (!viewingPubkey || !isOwnProfile || !activeAccount) return
+  const loadLinksTab = useCallback(async () => {
+    if (!viewingPubkey || !activeAccount) return
     
-    const hasBeenLoaded = loadedTabs.has('links')
+    let hasBeenLoaded = false
+    setLoadedTabs(prev => {
+      hasBeenLoaded = prev.has('links')
+      return prev
+    })
     
     try {
       if (!hasBeenLoaded) setLoading(true)
@@ -345,12 +295,13 @@ const Me: React.FC<MeProps> = ({
           if (!prevMap.has(item.id)) return prevMap
           
           const newMap = new Map(prevMap)
-          if (mergeReadItem(newMap, item)) {
-            // Update links array after map is updated
-            setLinks(Array.from(newMap.values()))
-            return newMap
+          if (item.type === 'article' && item.author) {
+            const progress = readingProgressMap.get(item.id)
+            if (progress !== undefined) {
+              newMap.set(item.id, { ...item, readingProgress: progress })
+            }
           }
-          return prevMap
+          return newMap
         })
       }).catch(err => console.warn('Failed to enrich links:', err))
       
@@ -358,24 +309,22 @@ const Me: React.FC<MeProps> = ({
       console.error('Failed to load links:', err)
       if (!hasBeenLoaded) setLoading(false)
     }
-  }
+  }, [viewingPubkey, activeAccount, bookmarks, relayPool, readingProgressMap])
 
   // Load active tab data
-  useEffect(() => {
+  const loadActiveTab = useCallback(() => {
     if (!viewingPubkey || !activeTab) {
       setLoading(false)
       return
     }
 
     // Load cached data immediately if available
-    if (isOwnProfile) {
-      const cached = getCachedMeData(viewingPubkey)
-      if (cached) {
-        setHighlights(cached.highlights)
-        // Bookmarks come from App.tsx centralized state, no local caching needed
-        setReads(cached.reads || [])
-        setLinks(cached.links || [])
-      }
+    const cached = getCachedMeData(viewingPubkey)
+    if (cached) {
+      setHighlights(cached.highlights)
+      // Bookmarks come from App.tsx centralized state, no local caching needed
+      setReads(cached.reads || [])
+      setLinks(cached.links || [])
     }
 
     // Load data for active tab (refresh in background if already loaded)
@@ -386,7 +335,7 @@ const Me: React.FC<MeProps> = ({
       case 'writings':
         loadWritingsTab()
         break
-      case 'reading-list':
+      case 'bookmarks':
         loadReadingListTab()
         break
       case 'reads':
@@ -396,22 +345,21 @@ const Me: React.FC<MeProps> = ({
         loadLinksTab()
         break
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeTab, viewingPubkey, refreshTrigger])
+  }, [viewingPubkey, activeTab, loadHighlightsTab, loadWritingsTab, loadReadingListTab, loadReadsTab, loadLinksTab])
 
-  // Sync myHighlights from controller when viewing own profile
   useEffect(() => {
-    if (isOwnProfile) {
-      setHighlights(myHighlights)
-    }
-  }, [isOwnProfile, myHighlights])
+    loadActiveTab()
+  }, [loadActiveTab])
 
-  // Sync myWritings from controller when viewing own profile
+  // Sync myHighlights from controller
   useEffect(() => {
-    if (isOwnProfile) {
-      setWritings(myWritings)
-    }
-  }, [isOwnProfile, myWritings])
+    setHighlights(myHighlights)
+  }, [myHighlights])
+
+  // Sync myWritings from controller
+  useEffect(() => {
+    setWritings(myWritings)
+  }, [myWritings])
 
   // Pull-to-refresh - reload active tab without clearing state
   const { isRefreshing, pullPosition } = usePullToRefresh({
@@ -427,8 +375,8 @@ const Me: React.FC<MeProps> = ({
   const handleHighlightDelete = (highlightId: string) => {
     setHighlights(prev => {
       const updated = prev.filter(h => h.id !== highlightId)
-      // Update cache when highlight is deleted (own profile only)
-      if (isOwnProfile && viewingPubkey) {
+      // Update cache when highlight is deleted
+      if (viewingPubkey) {
         updateCachedHighlights(viewingPubkey, updated)
       }
       return updated
@@ -471,7 +419,7 @@ const Me: React.FC<MeProps> = ({
     const mockEvent = {
       id: item.id,
       pubkey: item.author || '',
-      created_at: item.readingTimestamp || Math.floor(Date.now() / 1000),
+      created_at: item.readingTimestamp || 0,
       kind: 1,
       tags: [] as string[][],
       content: item.title || item.url || 'Untitled',
@@ -506,33 +454,144 @@ const Me: React.FC<MeProps> = ({
       navigate(`/r/${encodeURIComponent(url)}`)
     }
   }
+  
+  // Helper to get reading progress for a post
+  const getWritingReadingProgress = (post: BlogPostPreview): number | undefined => {
+    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1]
+    if (!dTag) return undefined
+    
+    try {
+      const naddr = nip19.naddrEncode({
+        kind: 30023,
+        pubkey: post.author,
+        identifier: dTag
+      })
+      return readingProgressMap.get(naddr)
+    } catch (err) {
+      return undefined
+    }
+  }
+
+  // Helper to get reading progress for a bookmark
+  const getBookmarkReadingProgress = (bookmark: IndividualBookmark): number | undefined => {
+    if (bookmark.kind === 30023) {
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (!dTag) return undefined
+      try {
+        const naddr = nip19.naddrEncode({
+          kind: 30023,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        return readingProgressMap.get(naddr)
+      } catch (err) {
+        return undefined
+      }
+    }
+    return undefined
+  }
 
   // Merge and flatten all individual bookmarks
   const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
     .filter(hasContent)
+    .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b))
   
   // Apply bookmark filter
   const filteredBookmarks = filterBookmarksByType(allIndividualBookmarks, bookmarkFilter)
   
   const groups = groupIndividualBookmarks(filteredBookmarks)
 
-  // Apply reading progress filter
-  const filteredReads = filterByReadingProgress(reads, readingProgressFilter)
-  const filteredLinks = filterByReadingProgress(links, readingProgressFilter)
+  // Enrich links with reading progress (reads already have progress from controller)
+  const linksWithProgress = links.map(item => {
+    if (item.url) {
+      const progress = readingProgressMap.get(item.url)
+      if (progress !== undefined) {
+        return { ...item, readingProgress: progress }
+      }
+    }
+    return item
+  })
+
+  // Apply reading progress filter with simple type separation to keep Views distinct and DRY
+  const filteredReads = filterByReadingProgress(
+    reads.filter(item => item.type === 'article'),
+    readingProgressFilter,
+    highlights
+  )
+  const filteredLinks = filterByReadingProgress(
+    linksWithProgress.filter(item => item.type === 'external'),
+    readingProgressFilter,
+    highlights
+  )
+
+  // Helper: build archive-only list from marked IDs and a base list
+  const buildArchiveOnly = (
+    baseItems: ReadItem[],
+    options: { kind: 'article' | 'external' }
+  ): ReadItem[] => {
+    const allMarked = archiveController.getMarkedIds()
+    const relevantMarked = options.kind === 'article'
+      ? allMarked.filter(id => id.startsWith('naddr1'))
+      : allMarked.filter(id => !id.startsWith('naddr1'))
+    const markedSet = new Set(relevantMarked)
+
+    const items: ReadItem[] = []
+    for (const item of baseItems) {
+      const key = options.kind === 'article' ? item.id : (item.url || item.id)
+      if (key && markedSet.has(key)) {
+        items.push({ ...item, markedAsRead: true })
+      }
+    }
+    for (const id of markedSet) {
+      const exists = items.find(i => (options.kind === 'article' ? i.id : (i.url || i.id)) === id)
+      if (!exists) {
+        items.push({
+          id,
+          source: 'marked-as-read',
+          type: options.kind,
+          url: options.kind === 'article' ? undefined : id,
+          markedAsRead: true,
+          readingTimestamp: Math.floor(Date.now() / 1000)
+        })
+      }
+    }
+    return items
+  }
+
+  // Archive-only lists: independent of reading progress
+  const archiveOnlyReads: ReadItem[] = readingProgressFilter === 'archive'
+    ? buildArchiveOnly(reads, { kind: 'article' })
+    : []
+  const archiveOnlyLinks: ReadItem[] = readingProgressFilter === 'archive'
+    ? buildArchiveOnly(linksWithProgress, { kind: 'external' })
+    : []
+
+  const getFilterTitle = (filter: BookmarkFilterType): string => {
+    const titles: Record<BookmarkFilterType, string> = {
+      'all': 'All Bookmarks',
+      'article': 'Bookmarked Reads',
+      'external': 'Bookmarked Links',
+      'video': 'Bookmarked Videos',
+      'note': 'Bookmarked Notes',
+      'web': 'Web Bookmarks'
+    }
+    return titles[filter]
+  }
+
   const sections: Array<{ key: string; title: string; items: IndividualBookmark[] }> = 
     groupingMode === 'flat'
-      ? [{ key: 'all', title: `All Bookmarks (${filteredBookmarks.length})`, items: filteredBookmarks }]
+      ? [{ key: 'all', title: getFilterTitle(bookmarkFilter), items: sortIndividualBookmarks(filteredBookmarks) }]
       : [
           { key: 'nip51-private', title: 'Private Bookmarks', items: groups.nip51Private },
           { key: 'nip51-public', title: 'My Bookmarks', items: groups.nip51Public },
-          { key: 'amethyst-private', title: 'Amethyst Private', items: groups.amethystPrivate },
-          { key: 'amethyst-public', title: 'Amethyst Lists', items: groups.amethystPublic },
+          { key: 'amethyst-private', title: 'Private Lists', items: groups.amethystPrivate },
+          { key: 'amethyst-public', title: 'My Lists', items: groups.amethystPublic },
           { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb }
         ]
 
   // Show content progressively - no blocking error screens
   const hasData = highlights.length > 0 || bookmarks.length > 0 || reads.length > 0 || links.length > 0 || writings.length > 0
-  const showSkeletons = (loading || (isOwnProfile && myHighlightsLoading)) && !hasData
+  const showSkeletons = (loading || myHighlightsLoading) && !hasData
 
   const renderTabContent = () => {
     switch (activeTab) {
@@ -546,7 +605,7 @@ const Me: React.FC<MeProps> = ({
             </div>
           )
         }
-        return highlights.length === 0 && !loading && !(isOwnProfile && myHighlightsLoading) ? (
+        return highlights.length === 0 && !loading && !myHighlightsLoading ? (
           <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
             No highlights yet.
           </div>
@@ -563,13 +622,13 @@ const Me: React.FC<MeProps> = ({
           </div>
         )
 
-      case 'reading-list':
+      case 'bookmarks':
         if (showSkeletons) {
           return (
             <div className="bookmarks-list">
-              <div className={`bookmarks-grid bookmarks-${viewMode}`}>
+              <div className="bookmarks-grid bookmarks-cards">
                 {Array.from({ length: 6 }).map((_, i) => (
-                  <BookmarkSkeleton key={i} viewMode={viewMode} />
+                  <BookmarkSkeleton key={i} viewMode="cards" />
                 ))}
               </div>
             </div>
@@ -595,14 +654,15 @@ const Me: React.FC<MeProps> = ({
               sections.filter(s => s.items.length > 0).map(section => (
               <div key={section.key} className="bookmarks-section">
                 <h3 className="bookmarks-section-title">{section.title}</h3>
-                <div className={`bookmarks-grid bookmarks-${viewMode}`}>
+                <div className="bookmarks-grid bookmarks-cards">
                   {section.items.map((individualBookmark, index) => (
                     <BookmarkItem
                       key={`${section.key}-${individualBookmark.id}-${index}`}
                       bookmark={individualBookmark}
                       index={index}
-                      viewMode={viewMode}
+                      viewMode="cards"
                       onSelectUrl={handleSelectUrl}
+                      readingProgress={getBookmarkReadingProgress(individualBookmark)}
                     />
                   ))}
                 </div>
@@ -617,33 +677,12 @@ const Me: React.FC<MeProps> = ({
               borderTop: '1px solid var(--border-color)'
             }}>
               <IconButton
-                icon={groupingMode === 'grouped' ? faLayerGroup : faBars}
+                icon={groupingMode === 'grouped' ? faLayerGroup : faClock}
                 onClick={toggleGroupingMode}
                 title={groupingMode === 'grouped' ? 'Show flat chronological list' : 'Show grouped by source'}
                 ariaLabel={groupingMode === 'grouped' ? 'Switch to flat view' : 'Switch to grouped view'}
                 variant="ghost"
               />
-              <IconButton
-                icon={faList}
-                onClick={() => setViewMode('compact')}
-                title="Compact list view"
-                ariaLabel="Compact list view"
-                variant={viewMode === 'compact' ? 'primary' : 'ghost'}
-              />
-              <IconButton
-                icon={faThLarge}
-                onClick={() => setViewMode('cards')}
-                title="Cards view"
-                ariaLabel="Cards view"
-                variant={viewMode === 'cards' ? 'primary' : 'ghost'}
-              />
-              <IconButton
-                icon={faImage}
-                onClick={() => setViewMode('large')}
-                title="Large preview view"
-                ariaLabel="Large preview view"
-                variant={viewMode === 'large' ? 'primary' : 'ghost'}
-              />
             </div>
           </div>
         )
@@ -676,21 +715,42 @@ const Me: React.FC<MeProps> = ({
               selectedFilter={readingProgressFilter}
               onFilterChange={handleReadingProgressFilterChange}
             />
-            {filteredReads.length === 0 ? (
-              <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
-                No articles match this filter.
-              </div>
+            {readingProgressFilter === 'archive' ? (
+              archiveOnlyReads.length === 0 ? (
+                <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+                  No articles in archive.
+                </div>
+              ) : (
+                <div className="explore-grid">
+                  {archiveOnlyReads
+                    .filter(item => item.type === 'article')
+                    .map((item) => (
+                      <BlogPostCard
+                        key={item.id}
+                        post={convertReadItemToBlogPostPreview(item)}
+                        href={getReadItemUrl(item)}
+                        readingProgress={item.readingProgress}
+                      />
+                    ))}
+                </div>
+              )
             ) : (
-              <div className="explore-grid">
-              {filteredReads.map((item) => (
-                <BlogPostCard
-                  key={item.id}
-                  post={convertReadItemToBlogPostPreview(item)}
-                  href={getReadItemUrl(item)}
-                  readingProgress={item.readingProgress}
-                />
-              ))}
-              </div>
+              filteredReads.length === 0 ? (
+                <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+                  No articles match this filter.
+                </div>
+              ) : (
+                <div className="explore-grid">
+                  {filteredReads.map((item) => (
+                    <BlogPostCard
+                      key={item.id}
+                      post={convertReadItemToBlogPostPreview(item)}
+                      href={getReadItemUrl(item)}
+                      readingProgress={item.readingProgress}
+                    />
+                  ))}
+                </div>
+              )
             )}
           </>
         )
@@ -723,21 +783,40 @@ const Me: React.FC<MeProps> = ({
               selectedFilter={readingProgressFilter}
               onFilterChange={handleReadingProgressFilterChange}
             />
-            {filteredLinks.length === 0 ? (
-              <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
-                No links match this filter.
-              </div>
+            {readingProgressFilter === 'archive' ? (
+              archiveOnlyLinks.length === 0 ? (
+                <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+                  No links in archive.
+                </div>
+              ) : (
+                <div className="explore-grid">
+                  {archiveOnlyLinks.map((item) => (
+                    <BlogPostCard
+                      key={item.id}
+                      post={convertReadItemToBlogPostPreview(item)}
+                      href={getReadItemUrl(item)}
+                      readingProgress={item.readingProgress}
+                    />
+                  ))}
+                </div>
+              )
             ) : (
-              <div className="explore-grid">
-              {filteredLinks.map((item) => (
-                <BlogPostCard
-                  key={item.id}
-                  post={convertReadItemToBlogPostPreview(item)}
-                  href={getReadItemUrl(item)}
-                  readingProgress={item.readingProgress}
-                />
-              ))}
-              </div>
+              filteredLinks.length === 0 ? (
+                <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+                  No links match this filter.
+                </div>
+              ) : (
+                <div className="explore-grid">
+                {filteredLinks.map((item) => (
+                  <BlogPostCard
+                    key={item.id}
+                    post={convertReadItemToBlogPostPreview(item)}
+                    href={getReadItemUrl(item)}
+                    readingProgress={item.readingProgress}
+                  />
+                ))}
+                </div>
+              )
             )}
           </>
         )
@@ -752,7 +831,7 @@ const Me: React.FC<MeProps> = ({
             </div>
           )
         }
-        return writings.length === 0 && !loading && !(isOwnProfile && myWritingsLoading) ? (
+        return writings.length === 0 && !loading && !myWritingsLoading ? (
           <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
             No articles written yet.
           </div>
@@ -763,6 +842,8 @@ const Me: React.FC<MeProps> = ({
                 key={post.event.id}
                 post={post}
                 href={getPostUrl(post)}
+                readingProgress={getWritingReadingProgress(post)}
+                hideBotByName={settings.hideBotArticlesByName !== false}
               />
             ))}
           </div>
@@ -786,43 +867,39 @@ const Me: React.FC<MeProps> = ({
           <button
             className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
             data-tab="highlights"
-            onClick={() => navigate(isOwnProfile ? '/me/highlights' : `/p/${propPubkey && nip19.npubEncode(propPubkey)}`)}
+            onClick={() => navigate('/me/highlights')}
           >
             <FontAwesomeIcon icon={faHighlighter} />
             <span className="tab-label">Highlights</span>
           </button>
-          {isOwnProfile && (
-            <>
-              <button
-                className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
-                data-tab="reading-list"
-                onClick={() => navigate('/me/reading-list')}
-              >
-                <FontAwesomeIcon icon={faBookmark} />
-                <span className="tab-label">Bookmarks</span>
-              </button>
-              <button
-                className={`me-tab ${activeTab === 'reads' ? 'active' : ''}`}
-                data-tab="reads"
-                onClick={() => navigate('/me/reads')}
-              >
-                <FontAwesomeIcon icon={faBooks} />
-                <span className="tab-label">Reads</span>
-              </button>
-              <button
-                className={`me-tab ${activeTab === 'links' ? 'active' : ''}`}
-                data-tab="links"
-                onClick={() => navigate('/me/links')}
-              >
-                <FontAwesomeIcon icon={faLink} />
-                <span className="tab-label">Links</span>
-              </button>
-            </>
-          )}
+          <button
+            className={`me-tab ${activeTab === 'bookmarks' ? 'active' : ''}`}
+            data-tab="bookmarks"
+            onClick={() => navigate('/me/bookmarks')}
+          >
+            <FontAwesomeIcon icon={faBookmark} />
+            <span className="tab-label">Bookmarks</span>
+          </button>
+          <button
+            className={`me-tab ${activeTab === 'reads' ? 'active' : ''}`}
+            data-tab="reads"
+            onClick={() => navigate('/me/reads')}
+          >
+            <FontAwesomeIcon icon={faBooks} />
+            <span className="tab-label">Reads</span>
+          </button>
+          <button
+            className={`me-tab ${activeTab === 'links' ? 'active' : ''}`}
+            data-tab="links"
+            onClick={() => navigate('/me/links')}
+          >
+            <FontAwesomeIcon icon={faLink} />
+            <span className="tab-label">Links</span>
+          </button>
           <button
             className={`me-tab ${activeTab === 'writings' ? 'active' : ''}`}
             data-tab="writings"
-            onClick={() => navigate(isOwnProfile ? '/me/writings' : `/p/${propPubkey && nip19.npubEncode(propPubkey)}/writings`)}
+            onClick={() => navigate('/me/writings')}
           >
             <FontAwesomeIcon icon={faPenToSquare} />
             <span className="tab-label">Writings</span>

src/components/NostrMentionLink.tsx

@@ -0,0 +1,134 @@
+import React from 'react'
+import { nip19 } from 'nostr-tools'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+
+interface NostrMentionLinkProps {
+  nostrUri: string
+  onClick?: (e: React.MouseEvent) => void
+  className?: string
+}
+
+/**
+ * Component to render nostr mentions with resolved profile names
+ * Handles npub, nprofile, note, nevent, and naddr URIs
+ */
+const NostrMentionLink: React.FC<NostrMentionLinkProps> = ({ 
+  nostrUri, 
+  onClick,
+  className = 'highlight-comment-link'
+}) => {
+  // Decode the nostr URI first
+  let decoded: ReturnType<typeof nip19.decode> | null = null
+  let pubkey: string | undefined
+  
+  try {
+    const identifier = nostrUri.replace(/^nostr:/, '')
+    decoded = nip19.decode(identifier)
+    
+    // Extract pubkey for profile fetching (works for npub and nprofile)
+    if (decoded.type === 'npub') {
+      pubkey = decoded.data
+    } else if (decoded.type === 'nprofile') {
+      pubkey = decoded.data.pubkey
+    }
+  } catch (error) {
+    // Decoding failed, will fallback to shortened identifier
+  }
+  
+  // Fetch profile at top level (Rules of Hooks)
+  const profile = useEventModel(Models.ProfileModel, pubkey ? [pubkey] : null)
+  
+  // If decoding failed, show shortened identifier
+  if (!decoded) {
+    const identifier = nostrUri.replace(/^nostr:/, '')
+    return (
+      <span className="highlight-comment-nostr-id">
+        {identifier.slice(0, 20)}...
+      </span>
+    )
+  }
+  
+  // Render based on decoded type
+  switch (decoded.type) {
+    case 'npub': {
+      const pk = decoded.data
+      const displayName = profile?.name || profile?.display_name || profile?.nip05 || `${pk.slice(0, 8)}...`
+      
+      return (
+        <a
+          href={`/p/${nip19.npubEncode(pk)}`}
+          className={className}
+          onClick={onClick}
+        >
+          @{displayName}
+        </a>
+      )
+    }
+    case 'nprofile': {
+      const { pubkey: pk } = decoded.data
+      const displayName = profile?.name || profile?.display_name || profile?.nip05 || `${pk.slice(0, 8)}...`
+      const npub = nip19.npubEncode(pk)
+      
+      return (
+        <a
+          href={`/p/${npub}`}
+          className={className}
+          onClick={onClick}
+        >
+          @{displayName}
+        </a>
+      )
+    }
+    case 'naddr': {
+      const { kind, pubkey: pk, identifier: addrIdentifier } = decoded.data
+      // Check if it's a blog post (kind:30023)
+      if (kind === 30023) {
+        const naddr = nip19.naddrEncode({ kind, pubkey: pk, identifier: addrIdentifier })
+        return (
+          <a
+            href={`/a/${naddr}`}
+            className={className}
+            onClick={onClick}
+          >
+            {addrIdentifier || 'Article'}
+          </a>
+        )
+      }
+      // For other kinds, show shortened identifier
+      return (
+        <span className="highlight-comment-nostr-id">
+          nostr:{addrIdentifier.slice(0, 12)}...
+        </span>
+      )
+    }
+    case 'note': {
+      const eventId = decoded.data
+      return (
+        <span className="highlight-comment-nostr-id">
+          note:{eventId.slice(0, 12)}...
+        </span>
+      )
+    }
+    case 'nevent': {
+      const { id } = decoded.data
+      return (
+        <span className="highlight-comment-nostr-id">
+          event:{id.slice(0, 12)}...
+        </span>
+      )
+    }
+    default: {
+      // Fallback for unrecognized types
+      const identifier = nostrUri.replace(/^nostr:/, '')
+      return (
+        <span className="highlight-comment-nostr-id">
+          {identifier.slice(0, 20)}...
+        </span>
+      )
+    }
+  }
+}
+
+export default NostrMentionLink
+

src/components/Profile.tsx

@@ -0,0 +1,270 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHighlighter, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
+import { IEventStore } from 'applesauce-core'
+import { RelayPool } from 'applesauce-relay'
+import { nip19 } from 'nostr-tools'
+import { useNavigate } from 'react-router-dom'
+import { HighlightItem } from './HighlightItem'
+import { BlogPostPreview, fetchBlogPostsFromAuthors } from '../services/exploreService'
+import { fetchHighlights } from '../services/highlightService'
+import { KINDS } from '../config/kinds'
+import { getActiveRelayUrls } from '../services/relayManager'
+import AuthorCard from './AuthorCard'
+import BlogPostCard from './BlogPostCard'
+import { BlogPostSkeleton, HighlightSkeleton } from './Skeletons'
+import { useStoreTimeline } from '../hooks/useStoreTimeline'
+import { eventToHighlight } from '../services/highlightEventProcessor'
+import { toBlogPostPreview } from '../utils/toBlogPostPreview'
+import { usePullToRefresh } from 'use-pull-to-refresh'
+import RefreshIndicator from './RefreshIndicator'
+import { Hooks } from 'applesauce-react'
+import { readingProgressController } from '../services/readingProgressController'
+
+interface ProfileProps {
+  relayPool: RelayPool
+  eventStore: IEventStore
+  pubkey: string
+  activeTab?: 'highlights' | 'writings'
+}
+
+const Profile: React.FC<ProfileProps> = ({ 
+  relayPool, 
+  eventStore,
+  pubkey,
+  activeTab: propActiveTab
+}) => {
+  const navigate = useNavigate()
+  const activeAccount = Hooks.useActiveAccount()
+  const [activeTab, setActiveTab] = useState<'highlights' | 'writings'>(propActiveTab || 'highlights')
+  const [refreshTrigger, setRefreshTrigger] = useState(0)
+  
+  // Reading progress state (naddr -> progress 0-1)
+  const [readingProgressMap, setReadingProgressMap] = useState<Map<string, number>>(new Map())
+  
+  // Load cached data from event store instantly
+  const cachedHighlights = useStoreTimeline(
+    eventStore,
+    { kinds: [KINDS.Highlights], authors: [pubkey] },
+    eventToHighlight,
+    [pubkey]
+  )
+  
+  const cachedWritings = useStoreTimeline(
+    eventStore,
+    { kinds: [30023], authors: [pubkey] },
+    toBlogPostPreview,
+    [pubkey]
+  )
+
+  // Sort writings by publication date, newest first
+  const sortedWritings = useMemo(() => {
+    return cachedWritings.slice().sort((a, b) => {
+      const timeA = a.published || a.event.created_at
+      const timeB = b.published || b.event.created_at
+      return timeB - timeA
+    })
+  }, [cachedWritings])
+
+  // Update local state when prop changes
+  useEffect(() => {
+    if (propActiveTab) {
+      setActiveTab(propActiveTab)
+    }
+  }, [propActiveTab])
+  
+  // Subscribe to reading progress controller
+  useEffect(() => {
+    // Get initial state immediately
+    const initialMap = readingProgressController.getProgressMap()
+    setReadingProgressMap(initialMap)
+    
+    // Subscribe to updates
+    const unsubProgress = readingProgressController.onProgress((newMap) => {
+      setReadingProgressMap(newMap)
+    })
+    
+    return () => {
+      unsubProgress()
+    }
+  }, [])
+  
+  // Load reading progress data when logged in
+  useEffect(() => {
+    if (!activeAccount?.pubkey) {
+      return
+    }
+    
+    readingProgressController.start({
+      relayPool,
+      eventStore,
+      pubkey: activeAccount.pubkey,
+      force: refreshTrigger > 0
+    })
+  }, [activeAccount?.pubkey, relayPool, eventStore, refreshTrigger])
+
+  // Background fetch to populate event store (non-blocking)
+  useEffect(() => {
+    if (!pubkey || !relayPool || !eventStore) return
+    
+    // Fetch all highlights and writings in background (no limits)
+    const relayUrls = getActiveRelayUrls(relayPool)
+    
+    fetchHighlights(relayPool, pubkey, undefined, undefined, false, eventStore)
+      .catch(err => console.warn('⚠️ [Profile] Failed to fetch highlights:', err))
+    
+    fetchBlogPostsFromAuthors(relayPool, [pubkey], relayUrls, undefined, null, eventStore)
+      .catch(err => console.warn('⚠️ [Profile] Failed to fetch writings:', err))
+  }, [pubkey, relayPool, eventStore, refreshTrigger])
+
+  // Pull-to-refresh
+  const { isRefreshing, pullPosition } = usePullToRefresh({
+    onRefresh: () => {
+      setRefreshTrigger(prev => prev + 1)
+    },
+    maximumPullLength: 240,
+    refreshThreshold: 80,
+    isDisabled: !pubkey
+  })
+
+  const getPostUrl = (post: BlogPostPreview) => {
+    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
+    const naddr = nip19.naddrEncode({
+      kind: 30023,
+      pubkey: post.author,
+      identifier: dTag
+    })
+    return `/a/${naddr}`
+  }
+  
+  // Helper to get reading progress for a post
+  const getReadingProgress = useCallback((post: BlogPostPreview): number | undefined => {
+    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1]
+    if (!dTag) return undefined
+    
+    try {
+      const naddr = nip19.naddrEncode({
+        kind: 30023,
+        pubkey: post.author,
+        identifier: dTag
+      })
+      const progress = readingProgressMap.get(naddr)
+      
+      // Only log when found or map is empty
+      if (progress || readingProgressMap.size === 0) {
+        // Progress found or map is empty
+      }
+      
+      return progress
+    } catch (err) {
+      return undefined
+    }
+  }, [readingProgressMap])
+
+  const handleHighlightDelete = () => {
+    // Not allowed to delete other users' highlights
+    return
+  }
+
+  const npub = nip19.npubEncode(pubkey)
+  const showSkeletons = cachedHighlights.length === 0 && sortedWritings.length === 0
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'highlights':
+        if (showSkeletons) {
+          return (
+            <div className="explore-grid">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <HighlightSkeleton key={i} />
+              ))}
+            </div>
+          )
+        }
+        return cachedHighlights.length === 0 ? (
+          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            No highlights yet.
+          </div>
+        ) : (
+          <div className="highlights-list me-highlights-list">
+            {cachedHighlights.map((highlight) => (
+              <HighlightItem
+                key={highlight.id}
+                highlight={{ ...highlight, level: 'mine' }}
+                relayPool={relayPool}
+                onHighlightDelete={handleHighlightDelete}
+              />
+            ))}
+          </div>
+        )
+
+      case 'writings':
+        if (showSkeletons) {
+          return (
+            <div className="explore-grid">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <BlogPostSkeleton key={i} />
+              ))}
+            </div>
+          )
+        }
+        return sortedWritings.length === 0 ? (
+          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            No articles written yet.
+          </div>
+        ) : (
+          <div className="explore-grid">
+            {sortedWritings.map((post) => (
+              <BlogPostCard
+                key={post.event.id}
+                post={post}
+                href={getPostUrl(post)}
+                readingProgress={getReadingProgress(post)}
+              />
+            ))}
+          </div>
+        )
+
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className="explore-container">
+      <RefreshIndicator
+        isRefreshing={isRefreshing}
+        pullPosition={pullPosition}
+      />
+      <div className="explore-header">
+        <AuthorCard authorPubkey={pubkey} clickable={false} />
+        
+        <div className="me-tabs">
+          <button
+            className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
+            data-tab="highlights"
+            onClick={() => navigate(`/p/${npub}`)}
+          >
+            <FontAwesomeIcon icon={faHighlighter} />
+            <span className="tab-label">Highlights</span>
+          </button>
+          <button
+            className={`me-tab ${activeTab === 'writings' ? 'active' : ''}`}
+            data-tab="writings"
+            onClick={() => navigate(`/p/${npub}/writings`)}
+          >
+            <FontAwesomeIcon icon={faPenToSquare} />
+            <span className="tab-label">Writings</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="me-tab-content">
+        {renderTabContent()}
+      </div>
+    </div>
+  )
+}
+
+export default Profile
+

src/components/ReaderHeader.tsx

@@ -20,6 +20,7 @@ interface ReaderHeaderProps {
   settings?: UserSettings
   highlights?: Highlight[]
   highlightVisibility?: HighlightVisibility
+  onHighlightCountClick?: () => void
 }
 
 const ReaderHeader: React.FC<ReaderHeaderProps> = ({
@@ -32,7 +33,8 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   highlightCount,
   settings,
   highlights = [],
-  highlightVisibility = { nostrverse: true, friends: true, mine: true }
+  highlightVisibility = { nostrverse: true, friends: true, mine: true },
+  onHighlightCountClick
 }) => {
   const cachedImage = useImageCache(image)
   const { textColor } = useAdaptiveTextColor(cachedImage)
@@ -107,8 +109,10 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
                 )}
                 {hasHighlights && (
                   <div 
-                    className="highlight-indicator"
+                    className="highlight-indicator clickable"
                     style={getHighlightIndicatorStyles(true)}
+                    onClick={onHighlightCountClick}
+                    title="Open highlights sidebar"
                   >
                     <FontAwesomeIcon icon={faHighlighter} />
                     <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
@@ -152,8 +156,10 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
             )}
             {hasHighlights && (
               <div 
-                className="highlight-indicator"
+                className="highlight-indicator clickable"
                 style={getHighlightIndicatorStyles(false)}
+                onClick={onHighlightCountClick}
+                title="Open highlights sidebar"
               >
                 <FontAwesomeIcon icon={faHighlighter} />
                 <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>

src/components/ReadingProgressFilters.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBookOpen, faCheckCircle, faAsterisk } from '@fortawesome/free-solid-svg-icons'
+import { faBookOpen, faCheckCircle, faAsterisk, faHighlighter } from '@fortawesome/free-solid-svg-icons'
+import { faBooks } from '../icons/customIcons'
 import { faEnvelope, faEnvelopeOpen } from '@fortawesome/free-regular-svg-icons'
 
-export type ReadingProgressFilterType = 'all' | 'unopened' | 'started' | 'reading' | 'completed'
+export type ReadingProgressFilterType = 'all' | 'unopened' | 'started' | 'reading' | 'completed' | 'highlighted' | 'archive'
 
 interface ReadingProgressFiltersProps {
   selectedFilter: ReadingProgressFilterType
@@ -13,18 +14,30 @@ interface ReadingProgressFiltersProps {
 const ReadingProgressFilters: React.FC<ReadingProgressFiltersProps> = ({ selectedFilter, onFilterChange }) => {
   const filters = [
     { type: 'all' as const, icon: faAsterisk, label: 'All' },
+    { type: 'highlighted' as const, icon: faHighlighter, label: 'Highlighted' },
     { type: 'unopened' as const, icon: faEnvelope, label: 'Unopened' },
     { type: 'started' as const, icon: faEnvelopeOpen, label: 'Started' },
     { type: 'reading' as const, icon: faBookOpen, label: 'Reading' },
-    { type: 'completed' as const, icon: faCheckCircle, label: 'Completed' }
+    { type: 'completed' as const, icon: faCheckCircle, label: 'Completed' },
+    // Archive-marked items (previously emoji-marked)
+    { type: 'archive' as const, icon: faBooks, label: 'Archive' }
   ]
 
   return (
     <div className="bookmark-filters">
       {filters.map(filter => {
         const isActive = selectedFilter === filter.type
-        // Only "completed" gets green color, everything else uses default blue
-        const activeStyle = isActive && filter.type === 'completed' ? { color: '#10b981' } : undefined
+        // Only "completed" gets green color, "highlighted" gets yellow, everything else uses default blue
+        let activeStyle: Record<string, string> | undefined = undefined
+        if (isActive) {
+          if (filter.type === 'completed') {
+            activeStyle = { color: '#10b981' } // green
+          } else if (filter.type === 'highlighted') {
+            activeStyle = { color: '#fde047' } // yellow
+          } else if (filter.type === 'archive') {
+            activeStyle = { color: '#60a5fa' } // blue accent
+          }
+        }
         
         return (
           <button

src/components/RelayStatusIndicator.tsx

@@ -50,16 +50,8 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({
   
   // Debug logging
   useEffect(() => {
-    console.log('🔌 Relay Status Indicator:', {
-      mode: isConnecting ? 'CONNECTING' : offlineMode ? 'OFFLINE' : localOnlyMode ? 'LOCAL_ONLY' : 'ONLINE',
-      totalStatuses: relayStatuses.length,
-      connectedCount: connectedUrls.length,
-      connectedUrls: connectedUrls.map(u => u.replace(/^wss?:\/\//, '')),
-      hasLocalRelay,
-      hasRemoteRelay,
-      isConnecting
-    })
-  }, [offlineMode, localOnlyMode, connectedUrls, relayStatuses.length, hasLocalRelay, hasRemoteRelay, isConnecting])
+    // Mode and relay status determined
+  }, [isConnecting, offlineMode, localOnlyMode, relayStatuses, hasLocalRelay, hasRemoteRelay])
   
   // Don't show indicator when fully connected (but show when connecting)
   if (!localOnlyMode && !offlineMode && !isConnecting) return null
@@ -156,7 +148,7 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({
                     fontWeight: 400
                   }}
                 >
-                  {connectedUrls.length} local relay{connectedUrls.length !== 1 ? 's' : ''}
+                  Local relays only
                 </span>
               </>
             )}

src/components/RichContent.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import NostrMentionLink from './NostrMentionLink'
+
+interface RichContentProps {
+  content: string
+  className?: string
+}
+
+/**
+ * Component to render text content with:
+ * - Clickable links
+ * - Resolved nostr mentions (npub, nprofile, note, nevent, naddr)
+ * - Plain text
+ * 
+ * Handles both nostr:npub1... and plain npub1... formats
+ */
+const RichContent: React.FC<RichContentProps> = ({ 
+  content, 
+  className = 'bookmark-content' 
+}) => {
+  // Pattern to match:
+  // 1. nostr: URIs (nostr:npub1..., nostr:note1..., etc.)
+  // 2. Plain nostr identifiers (npub1..., nprofile1..., note1..., etc.)
+  // 3. http(s) URLs
+  const pattern = /(nostr:[a-z0-9]+|npub1[a-z0-9]+|nprofile1[a-z0-9]+|note1[a-z0-9]+|nevent1[a-z0-9]+|naddr1[a-z0-9]+|https?:\/\/[^\s]+)/gi
+  
+  const parts = content.split(pattern)
+  
+  return (
+    <div className={className}>
+      {parts.map((part, index) => {
+        // Handle nostr: URIs
+        if (part.startsWith('nostr:')) {
+          return (
+            <NostrMentionLink
+              key={index}
+              nostrUri={part}
+            />
+          )
+        }
+        
+        // Handle plain nostr identifiers (add nostr: prefix)
+        if (
+          part.match(/^(npub1|nprofile1|note1|nevent1|naddr1)[a-z0-9]+$/i)
+        ) {
+          return (
+            <NostrMentionLink
+              key={index}
+              nostrUri={`nostr:${part}`}
+            />
+          )
+        }
+        
+        // Handle http(s) URLs
+        if (part.match(/^https?:\/\//)) {
+          return (
+            <a
+              key={index}
+              href={part}
+              className="nostr-link"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {part}
+            </a>
+          )
+        }
+        
+        // Plain text
+        return <React.Fragment key={index}>{part}</React.Fragment>
+      })}
+    </div>
+  )
+}
+
+export default RichContent
+

src/components/RouteDebug.tsx

@@ -20,7 +20,7 @@ export default function RouteDebug() {
       // Unexpected during deep-link refresh tests
       console.warn('[RouteDebug] unexpected root redirect', info)
     } else {
-      console.debug('[RouteDebug]', info)
+      // silent
     }
   }, [location, matchArticle])
 

src/components/Settings.tsx

@@ -6,11 +6,13 @@ import IconButton from './IconButton'
 import { loadFont } from '../utils/fontLoader'
 import ThemeSettings from './Settings/ThemeSettings'
 import ReadingDisplaySettings from './Settings/ReadingDisplaySettings'
+import MediaDisplaySettings from './Settings/MediaDisplaySettings'
 import ExploreSettings from './Settings/ExploreSettings'
 import LayoutBehaviorSettings from './Settings/LayoutBehaviorSettings'
 import ZapSettings from './Settings/ZapSettings'
 import RelaySettings from './Settings/RelaySettings'
 import PWASettings from './Settings/PWASettings'
+import TTSSettings from './Settings/TTSSettings'
 import { useRelayStatus } from '../hooks/useRelayStatus'
 import VersionFooter from './VersionFooter'
 
@@ -39,7 +41,15 @@ const DEFAULT_SETTINGS: UserSettings = {
   useLocalRelayAsCache: true,
   rebroadcastToAllRelays: false,
   paragraphAlignment: 'justify',
-  syncReadingPosition: false,
+  fullWidthImages: true,
+  renderVideoLinksAsEmbeds: true,
+  syncReadingPosition: true,
+  autoMarkAsReadOnCompletion: false,
+  hideBookmarksWithoutCreationDate: true,
+  ttsUseSystemLanguage: false,
+  ttsDetectContentLanguage: true,
+  ttsLanguageMode: 'content',
+  ttsDefaultSpeed: 2.1,
 }
 
 interface SettingsProps {
@@ -167,8 +177,10 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
       <div className="settings-content">
         <ThemeSettings settings={localSettings} onUpdate={handleUpdate} />
         <ReadingDisplaySettings settings={localSettings} onUpdate={handleUpdate} />
+        <MediaDisplaySettings settings={localSettings} onUpdate={handleUpdate} />
         <ExploreSettings settings={localSettings} onUpdate={handleUpdate} />
         <ZapSettings settings={localSettings} onUpdate={handleUpdate} />
+        <TTSSettings settings={localSettings} onUpdate={handleUpdate} />
         <LayoutBehaviorSettings settings={localSettings} onUpdate={handleUpdate} />
         <PWASettings settings={localSettings} onUpdate={handleUpdate} onClose={onClose} />
         <RelaySettings relayStatuses={relayStatuses} onClose={onClose} />

src/components/Settings/ExploreSettings.tsx

@@ -51,6 +51,19 @@ const ExploreSettings: React.FC<ExploreSettingsProps> = ({ settings, onUpdate })
           />
         </div>
       </div>
+
+      <div className="setting-group">
+        <label htmlFor="hideBotArticlesByName" className="checkbox-label">
+          <input
+            id="hideBotArticlesByName"
+            type="checkbox"
+            checked={settings.hideBotArticlesByName !== false}
+            onChange={(e) => onUpdate({ hideBotArticlesByName: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Hide content posted by bots</span>
+        </label>
+      </div>
     </div>
   )
 }

src/components/Settings/LayoutBehaviorSettings.tsx

@@ -117,6 +117,32 @@ const LayoutBehaviorSettings: React.FC<LayoutBehaviorSettingsProps> = ({ setting
           <span>Sync reading position across devices</span>
         </label>
       </div>
+
+      <div className="setting-group">
+        <label htmlFor="autoMarkAsReadOnCompletion" className="checkbox-label">
+          <input
+            id="autoMarkAsReadOnCompletion"
+            type="checkbox"
+            checked={settings.autoMarkAsReadOnCompletion ?? false}
+            onChange={(e) => onUpdate({ autoMarkAsReadOnCompletion: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Automatically move to archive at 100%</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="hideBookmarksWithoutCreationDate" className="checkbox-label">
+          <input
+            id="hideBookmarksWithoutCreationDate"
+            type="checkbox"
+            checked={settings.hideBookmarksWithoutCreationDate ?? false}
+            onChange={(e) => onUpdate({ hideBookmarksWithoutCreationDate: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Hide bookmarks missing a creation date</span>
+        </label>
+      </div>
     </div>
   )
 }

src/components/Settings/MediaDisplaySettings.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { UserSettings } from '../../services/settingsService'
+
+interface MediaDisplaySettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+}
+
+const MediaDisplaySettings: React.FC<MediaDisplaySettingsProps> = ({ settings, onUpdate }) => {
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Media Display</h3>
+      
+      <div className="setting-group">
+        <label htmlFor="fullWidthImages" className="checkbox-label">
+          <input
+            id="fullWidthImages"
+            type="checkbox"
+            checked={settings.fullWidthImages === true}
+            onChange={(e) => onUpdate({ fullWidthImages: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Full-width images in articles</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="renderVideoLinksAsEmbeds" className="checkbox-label">
+          <input
+            id="renderVideoLinksAsEmbeds"
+            type="checkbox"
+            checked={settings.renderVideoLinksAsEmbeds === true}
+            onChange={(e) => onUpdate({ renderVideoLinksAsEmbeds: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Render video links as embeds</span>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+export default MediaDisplaySettings

src/components/Settings/PWASettings.tsx

@@ -27,7 +27,7 @@ const PWASettings: React.FC<PWASettingsProps> = ({ settings, onUpdate, onClose }
     if (isInstalled) return
     const success = await installApp()
     if (success) {
-      console.log('App installed successfully')
+      // Installation successful
     }
   }
 
@@ -151,7 +151,7 @@ const PWASettings: React.FC<PWASettingsProps> = ({ settings, onUpdate, onClose }
               >
                 here
               </a>
-              {' and '}
+              {', '}
               <a 
                 onClick={(e) => {
                   e.preventDefault()
@@ -161,6 +161,16 @@ const PWASettings: React.FC<PWASettingsProps> = ({ settings, onUpdate, onClose }
               >
                 here
               </a>
+              {', and '}
+              <a 
+                onClick={(e) => {
+                  e.preventDefault()
+                  handleLinkClick('/a/naddr1qvzqqqr4gupzq3svyhng9ld8sv44950j957j9vchdktj7cxumsep9mvvjthc2pjuqq9hyetvv9uj6um9w36hq9mgjg8')
+                }}
+                style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
+              >
+                here
+              </a>
               .
             </p>
           </div>

src/components/Settings/ReadingDisplaySettings.tsx

@@ -59,6 +59,7 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
         </div>
       </div>
 
+
       <div className="setting-group setting-inline">
         <label>Default Highlight Visibility</label>
         <div className="highlight-level-toggles">

src/components/Settings/TTSSettings.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGauge } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../../services/settingsService'
+import TTSControls from '../TTSControls'
+
+interface TTSSettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+}
+
+const SPEED_OPTIONS = [0.8, 1, 1.2, 1.4, 1.6, 1.8, 2, 2.1, 2.4, 2.8, 3]
+const EXAMPLE_TEXT = "Boris aims to be a calm reader app with clean typography, beautiful design, and a focus on readability. Boris does not and will never have ads, trackers, paywalls, subscriptions, or any other distractions."
+
+const TTSSettings: React.FC<TTSSettingsProps> = ({ settings, onUpdate }) => {
+  const currentSpeed = settings.ttsDefaultSpeed || 2.1
+
+  const handleCycleSpeed = () => {
+    const currentIndex = SPEED_OPTIONS.indexOf(currentSpeed)
+    const nextIndex = (currentIndex + 1) % SPEED_OPTIONS.length
+    onUpdate({ ttsDefaultSpeed: SPEED_OPTIONS[nextIndex] })
+  }
+
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Text-to-Speech</h3>
+      
+      <div className="setting-group setting-inline">
+        <label>Default Playback Speed</label>
+        <div className="setting-buttons">
+          <button
+            type="button"
+            className="article-menu-btn"
+            onClick={handleCycleSpeed}
+            title="Cycle speed"
+          >
+            <FontAwesomeIcon icon={faGauge} />
+            <span>{currentSpeed}x</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label>Speaker language</label>
+        <div className="setting-control">
+          <select
+            value={settings.ttsLanguageMode || 'content'}
+            onChange={e => {
+              const value = e.target.value
+              onUpdate({ 
+                ttsLanguageMode: value,
+                ttsUseSystemLanguage: value === 'system',
+                ttsDetectContentLanguage: value === 'content'
+              })
+            }}
+            className="setting-select"
+          >
+            <option value="system">System Language</option>
+            <option value="content">Content (auto-detect)</option>
+            <option disabled>────────────</option>
+            <option value="en-US">English (American)</option>
+            <option value="en-GB">English (British)</option>
+            <option value="zh">Mandarin Chinese</option>
+            <option value="es">Spanish</option>
+            <option value="hi">Hindi</option>
+            <option value="ar">Arabic</option>
+            <option value="fr">French</option>
+            <option value="pt">Portuguese</option>
+            <option value="de">German</option>
+            <option value="ja">Japanese</option>
+            <option value="ru">Russian</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="setting-group">
+        <div style={{ padding: '0.75rem', backgroundColor: 'var(--color-bg)', borderRadius: '4px', marginBottom: '0.75rem', fontSize: '0.95rem', lineHeight: '1.5' }}>
+          {EXAMPLE_TEXT}
+        </div>
+        <TTSControls text={EXAMPLE_TEXT} settings={settings} />
+      </div>
+    </div>
+  )
+}
+
+export default TTSSettings

src/components/ShareTargetHandler.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from 'react'
+import { useNavigate, useLocation } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { Hooks } from 'applesauce-react'
+import { RelayPool } from 'applesauce-relay'
+import { createWebBookmark } from '../services/webBookmarkService'
+import { getActiveRelayUrls } from '../services/relayManager'
+import { useToast } from '../hooks/useToast'
+
+interface ShareTargetHandlerProps {
+  relayPool: RelayPool
+}
+
+/**
+ * Handles incoming shared URLs from the Web Share Target API.
+ * Auto-saves the shared URL as a web bookmark (NIP-B0).
+ */
+export default function ShareTargetHandler({ relayPool }: ShareTargetHandlerProps) {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const activeAccount = Hooks.useActiveAccount()
+  const { showToast } = useToast()
+  const [processing, setProcessing] = useState(false)
+  const [waitingForLogin, setWaitingForLogin] = useState(false)
+
+  useEffect(() => {
+    const handleSharedContent = async () => {
+      // Parse query parameters
+      const params = new URLSearchParams(location.search)
+      const link = params.get('link')
+      const title = params.get('title')
+      const text = params.get('text')
+
+      // Validate we have a URL
+      if (!link) {
+        showToast('No URL to save')
+        navigate('/')
+        return
+      }
+
+      // If no active account, wait for login
+      if (!activeAccount) {
+        setWaitingForLogin(true)
+        showToast('Please log in to save this bookmark')
+        return
+      }
+
+      // We have account and URL, proceed with saving
+      if (!processing) {
+        setProcessing(true)
+        try {
+          await createWebBookmark(
+            link,
+            title || undefined,
+            text || undefined,
+            undefined,
+            activeAccount,
+            relayPool,
+            getActiveRelayUrls(relayPool)
+          )
+          showToast('Bookmark saved!')
+          navigate('/me/links')
+        } catch (err) {
+          console.error('Failed to save shared bookmark:', err)
+          showToast('Failed to save bookmark')
+          navigate('/')
+        } finally {
+          setProcessing(false)
+        }
+      }
+    }
+
+    handleSharedContent()
+  }, [activeAccount, location.search, navigate, relayPool, showToast, processing])
+
+  // Show waiting for login state
+  if (waitingForLogin && !activeAccount) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="text-center">
+          <FontAwesomeIcon icon={faSpinner} spin className="text-4xl mb-4" />
+          <p className="text-lg">Waiting for login...</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Show processing state
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <div className="text-center">
+        <FontAwesomeIcon icon={faSpinner} spin className="text-4xl mb-4" />
+        <p className="text-lg">Saving bookmark...</p>
+      </div>
+    </div>
+  )
+}
+

src/components/SidebarHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faRightFromBracket, faUserCircle, faGear, faHome, faNewspaper, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faRightFromBracket, faUserCircle, faGear, faHome, faPersonHiking } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
@@ -36,70 +36,61 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
   return (
     <>
       <div className="sidebar-header-bar">
-        {isMobile ? (
-          <IconButton
-            icon={faTimes}
-            onClick={onToggleCollapse}
-            title="Close sidebar"
-            ariaLabel="Close sidebar"
-            variant="ghost"
-            className="mobile-close-btn"
-          />
-        ) : (
-          <button 
-            onClick={onToggleCollapse}
-            className="toggle-sidebar-btn"
-            title="Collapse bookmarks sidebar"
-            aria-label="Collapse bookmarks sidebar"
-          >
-            <FontAwesomeIcon icon={faChevronRight} />
-          </button>
-        )}
-        <div className="sidebar-header-right">
         {activeAccount && (
-          <div 
-            className="profile-avatar" 
+          <button
+            className="profile-avatar-button" 
             title={getUserDisplayName()}
             onClick={() => navigate('/me')}
-            style={{ cursor: 'pointer' }}
+            aria-label={`Profile: ${getUserDisplayName()}`}
           >
             {profileImage ? (
               <img src={profileImage} alt={getUserDisplayName()} />
             ) : (
               <FontAwesomeIcon icon={faUserCircle} />
             )}
-          </div>
+          </button>
         )}
-        <IconButton
-          icon={faHome}
-          onClick={() => navigate('/')}
-          title="Home"
-          ariaLabel="Home"
-          variant="ghost"
-        />
-        <IconButton
-          icon={faNewspaper}
-          onClick={() => navigate('/explore')}
-          title="Explore"
-          ariaLabel="Explore"
-          variant="ghost"
-        />
-        <IconButton
-          icon={faGear}
-          onClick={onOpenSettings}
-          title="Settings"
-          ariaLabel="Settings"
-          variant="ghost"
-        />
-        {activeAccount && (
+        <div className="sidebar-header-right">
           <IconButton
-            icon={faRightFromBracket}
-            onClick={onLogout}
-            title="Logout"
-            ariaLabel="Logout"
+            icon={faHome}
+            onClick={() => navigate('/')}
+            title="Home"
+            ariaLabel="Home"
             variant="ghost"
           />
-        )}
+          <IconButton
+            icon={faGear}
+            onClick={onOpenSettings}
+            title="Settings"
+            ariaLabel="Settings"
+            variant="ghost"
+          />
+          <IconButton
+            icon={faPersonHiking}
+            onClick={() => navigate('/explore')}
+            title="Explore"
+            ariaLabel="Explore"
+            variant="ghost"
+          />
+          {activeAccount && (
+            <IconButton
+              icon={faRightFromBracket}
+              onClick={onLogout}
+              title="Logout"
+              ariaLabel="Logout"
+              variant="ghost"
+            />
+          )}
+          {!isMobile && (
+            <button 
+              onClick={onToggleCollapse}
+              className="toggle-sidebar-btn"
+              title="Collapse bookmarks sidebar"
+              aria-label="Collapse bookmarks sidebar"
+            >
+              <FontAwesomeIcon icon={faChevronRight} />
+            </button>
+          )}
         </div>
       </div>
     </>

src/components/Support.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHeart, faSpinner, faUserCircle } from '@fortawesome/free-solid-svg-icons'
+import { faHeart, faUserCircle } from '@fortawesome/free-solid-svg-icons'
 import { fetchBorisZappers, ZapSender } from '../services/zapReceiptService'
 import { fetchProfiles } from '../services/profileService'
 import { UserSettings } from '../services/settingsService'
@@ -21,7 +21,7 @@ type SupporterProfile = ZapSender
 
 const Support: React.FC<SupportProps> = ({ relayPool, eventStore, settings }) => {
   const [supporters, setSupporters] = useState<SupporterProfile[]>([])
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     const loadSupporters = async () => {
@@ -31,7 +31,8 @@ const Support: React.FC<SupportProps> = ({ relayPool, eventStore, settings }) =>
         
         if (zappers.length > 0) {
           const pubkeys = zappers.map(z => z.pubkey)
-          await fetchProfiles(relayPool, eventStore, pubkeys, settings)
+          // Fetch profiles in background without blocking
+          fetchProfiles(relayPool, eventStore, pubkeys, settings).catch(() => {})
         }
         
         setSupporters(zappers)
@@ -45,14 +46,6 @@ const Support: React.FC<SupportProps> = ({ relayPool, eventStore, settings }) =>
     loadSupporters()
   }, [relayPool, eventStore, settings])
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen p-4">
-        <FontAwesomeIcon icon={faSpinner} spin size="2x" className="text-zinc-400" />
-      </div>
-    )
-  }
-
   return (
     <div className="min-h-screen" style={{ backgroundColor: 'var(--color-bg)', color: 'var(--color-text)' }}>
       <div className="max-w-5xl mx-auto px-4 py-12 md:py-16">
@@ -82,7 +75,32 @@ const Support: React.FC<SupportProps> = ({ relayPool, eventStore, settings }) =>
           </p>
         </div>
 
-        {supporters.length === 0 ? (
+        {loading ? (
+          <>
+            {/* Loading Skeletons */}
+            <div className="mb-16 md:mb-20">
+              <h2 className="text-2xl md:text-3xl font-semibold mb-8 md:mb-10 text-center" style={{ color: 'var(--color-text)' }}>
+                Legends
+              </h2>
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8 md:gap-10">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <SupporterSkeleton key={`whale-${i}`} isWhale={true} />
+                ))}
+              </div>
+            </div>
+
+            <div className="mb-12">
+              <h2 className="text-xl md:text-2xl font-semibold mb-8 text-center" style={{ color: 'var(--color-text)' }}>
+                Supporters
+              </h2>
+              <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-4 md:gap-5">
+                {Array.from({ length: 12 }).map((_, i) => (
+                  <SupporterSkeleton key={`supporter-${i}`} isWhale={false} />
+                ))}
+              </div>
+            </div>
+          </>
+        ) : supporters.length === 0 ? (
           <div className="text-center py-12" style={{ color: 'var(--color-text-muted)' }}>
             <p>No supporters yet. Be the first to zap Boris!</p>
           </div>
@@ -231,5 +249,55 @@ const SupporterCard: React.FC<SupporterCardProps> = ({ supporter, isWhale }) =>
   )
 }
 
+interface SupporterSkeletonProps {
+  isWhale: boolean
+}
+
+const SupporterSkeleton: React.FC<SupporterSkeletonProps> = ({ isWhale }) => {
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative">
+        {/* Avatar Skeleton */}
+        <div
+          className={`rounded-full overflow-hidden flex items-center justify-center animate-pulse
+            ${isWhale ? 'w-24 h-24 md:w-28 md:h-28' : 'w-10 h-10 md:w-12 md:h-12'}
+          `}
+          style={{ 
+            backgroundColor: 'var(--color-bg-elevated)'
+          }}
+        >
+          <div 
+            className={`rounded-full ${isWhale ? 'w-20 h-20 md:w-24 md:h-24' : 'w-8 h-8 md:w-10 md:h-10'}`}
+            style={{ backgroundColor: 'var(--color-border)' }}
+          />
+        </div>
+
+        {/* Whale Badge Skeleton */}
+        {isWhale && (
+          <div 
+            className="absolute -bottom-1 -right-1 w-8 h-8 rounded-full animate-pulse border-2"
+            style={{ 
+              backgroundColor: 'var(--color-border)',
+              borderColor: 'var(--color-bg)' 
+            }}
+          />
+        )}
+      </div>
+
+      {/* Name and Total Skeleton */}
+      <div className="mt-2 text-center space-y-1">
+        <div 
+          className={`rounded animate-pulse ${isWhale ? 'h-4 w-16' : 'h-3 w-12'}`}
+          style={{ backgroundColor: 'var(--color-border)' }}
+        />
+        <div 
+          className={`rounded animate-pulse ${isWhale ? 'h-3 w-12' : 'h-2 w-10'}`}
+          style={{ backgroundColor: 'var(--color-border)' }}
+        />
+      </div>
+    </div>
+  )
+}
+
 export default Support
 

src/components/TTSControls.tsx

@@ -0,0 +1,113 @@
+import React, { useMemo } from 'react'
+import { useTextToSpeech } from '../hooks/useTextToSpeech'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlay, faPause, faGauge } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../services/settingsService'
+import { detect } from 'tinyld'
+
+interface Props {
+  text: string
+  defaultLang?: string
+  className?: string
+  settings?: UserSettings
+}
+
+const SPEED_OPTIONS = [0.8, 1, 1.2, 1.4, 1.6, 1.8, 2, 2.1, 2.4, 2.8, 3]
+
+const TTSControls: React.FC<Props> = ({ text, defaultLang, className, settings }) => {
+  const {
+    supported, speaking, paused,
+    speak, pause, resume,
+    rate, setRate
+  } = useTextToSpeech({ defaultLang, defaultRate: settings?.ttsDefaultSpeed })
+
+  const canPlay = supported && text?.trim().length > 0
+
+  const resolvedSystemLang = useMemo(() => {
+    const mode = settings?.ttsLanguageMode
+    if ((mode ? mode === 'system' : settings?.ttsUseSystemLanguage) === true) {
+      return navigator?.language?.split('-')[0]
+    }
+    return undefined
+  }, [settings?.ttsLanguageMode, settings?.ttsUseSystemLanguage])
+
+  const detectContentLang = useMemo(() => {
+    const mode = settings?.ttsLanguageMode
+    if (mode) return mode === 'content'
+    return settings?.ttsDetectContentLanguage !== false
+  }, [settings?.ttsLanguageMode, settings?.ttsDetectContentLanguage])
+
+  const specificLang = useMemo(() => {
+    const mode = settings?.ttsLanguageMode
+    // If mode is not 'system' or 'content', it's a specific language code
+    if (mode && mode !== 'system' && mode !== 'content') {
+      return mode
+    }
+    return undefined
+  }, [settings?.ttsLanguageMode])
+
+  const handlePlayPause = () => {
+    if (!canPlay) return
+
+    if (!speaking) {
+      let langOverride: string | undefined
+      
+      // Priority: specific language > content detection > system language
+      if (specificLang) {
+        langOverride = specificLang
+      } else if (detectContentLang && text) {
+        try {
+          const lang = detect(text)
+          if (typeof lang === 'string' && lang.length >= 2) langOverride = lang.slice(0, 2)
+        } catch (err) {
+          // ignore detection errors
+        }
+      }
+      if (!langOverride && resolvedSystemLang) {
+        langOverride = resolvedSystemLang
+      }
+      speak(text, langOverride)
+    } else if (paused) {
+      resume()
+    } else {
+      pause()
+    }
+  }
+
+  const handleCycleSpeed = () => {
+    const currentIndex = SPEED_OPTIONS.indexOf(rate)
+    const nextIndex = (currentIndex + 1) % SPEED_OPTIONS.length
+    const next = SPEED_OPTIONS[nextIndex]
+    setRate(next)
+  }
+
+  const playLabel = !speaking ? 'Listen' : (paused ? 'Resume' : 'Pause')
+
+  if (!supported) return null
+
+  return (
+    <div className={className || 'tts-controls'} style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
+      <button
+        type="button"
+        className="article-menu-btn"
+        onClick={handlePlayPause}
+        title={playLabel}
+        disabled={!canPlay}
+      >
+        <FontAwesomeIcon icon={!speaking ? faPlay : (paused ? faPlay : faPause)} />
+      </button>
+      <button
+        type="button"
+        className="article-menu-btn"
+        onClick={handleCycleSpeed}
+        title="Cycle speed"
+      >
+        <FontAwesomeIcon icon={faGauge} />
+        <span>{rate}x</span>
+      </button>
+    </div>
+  )
+}
+
+export default TTSControls
+

src/components/ThreePaneLayout.tsx

@@ -387,6 +387,11 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               currentArticle={props.currentArticle}
               isSidebarCollapsed={props.isCollapsed}
               isHighlightsCollapsed={props.isHighlightsCollapsed}
+              onOpenHighlights={() => {
+                if (props.isHighlightsCollapsed) {
+                  props.onToggleHighlightsPanel()
+                }
+              }}
             />
           )}
         </div>
@@ -413,6 +418,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             relayPool={props.relayPool}
             eventStore={props.eventStore}
             settings={props.settings}
+            isMobile={isMobile}
           />
         </div>
       </div>

src/components/VideoEmbedProcessor.tsx

@@ -0,0 +1,164 @@
+import React, { useMemo, forwardRef } from 'react'
+import ReactPlayer from 'react-player'
+import { classifyUrl } from '../utils/helpers'
+
+interface VideoEmbedProcessorProps {
+  html: string
+  renderVideoLinksAsEmbeds: boolean
+  className?: string
+  onMouseUp?: (e: React.MouseEvent) => void
+  onTouchEnd?: (e: React.TouchEvent) => void
+}
+
+/**
+ * Component that processes HTML content and optionally embeds video links
+ * as ReactPlayer components when renderVideoLinksAsEmbeds is enabled
+ */
+const VideoEmbedProcessor = forwardRef<HTMLDivElement, VideoEmbedProcessorProps>(({
+  html,
+  renderVideoLinksAsEmbeds,
+  className,
+  onMouseUp,
+  onTouchEnd
+}, ref) => {
+  // Process HTML and extract video URLs in a single pass to keep them in sync
+  const { processedHtml, videoUrls } = useMemo(() => {
+    if (!renderVideoLinksAsEmbeds || !html) {
+      return { processedHtml: html, videoUrls: [] }
+    }
+
+    // Process HTML in stages: <video> blocks, <img> tags with video src, and bare video URLs
+    let result = html
+
+    const collectedUrls: string[] = []
+    let placeholderIndex = 0
+
+    // 1) Replace entire <video>...</video> blocks when they reference a video URL
+    const videoBlockPattern = /<video[^>]*>[\s\S]*?<\/video>/gi
+    const videoBlocks = result.match(videoBlockPattern) || []
+    videoBlocks.forEach((block) => {
+      // Try src on <video>
+      let url: string | null = null
+      const videoSrcMatch = block.match(/<video[^>]*\s+src=["']?(https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)[^\s<>"']*)["']?[^>]*>/i)
+      if (videoSrcMatch && videoSrcMatch[1]) {
+        url = videoSrcMatch[1]
+      } else {
+        // Try nested <source>
+        const sourceSrcMatch = block.match(/<source[^>]*\s+src=["']?(https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)[^\s<>"']*)["']?[^>]*>/i)
+        if (sourceSrcMatch && sourceSrcMatch[1]) {
+          url = sourceSrcMatch[1]
+        }
+      }
+      if (url) {
+        collectedUrls.push(url)
+        const placeholder = `__VIDEO_EMBED_${placeholderIndex}__`
+        const escaped = block.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        result = result.replace(new RegExp(escaped, 'g'), placeholder)
+        placeholderIndex++
+      }
+    })
+
+    // 2) Replace entire <img ...> tags if their src points to a video
+    const imgTagPattern = /<img[^>]*>/gi
+    const allImgTags = result.match(imgTagPattern) || []
+    allImgTags.forEach((imgTag) => {
+      const srcMatch = imgTag.match(/src=["']?(https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)[^\s<>"']*)["']?/i)
+      if (srcMatch && srcMatch[1]) {
+        const videoUrl = srcMatch[1]
+        collectedUrls.push(videoUrl)
+        const placeholder = `__VIDEO_EMBED_${placeholderIndex}__`
+        const escapedTag = imgTag.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        result = result.replace(new RegExp(escapedTag, 'g'), placeholder)
+        placeholderIndex++
+      }
+    })
+
+    // 3) Replace remaining bare video URLs (direct files or recognized video platforms)
+    const fileVideoPattern = /https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)(?:\?[^\s<>"']*)?/gi
+    const fileVideoUrls: string[] = result.match(fileVideoPattern) || []
+
+    const allUrlPattern = /https?:\/\/[^\s<>"']+(?=\s|>|"|'|$)/gi
+    const allUrls: string[] = result.match(allUrlPattern) || []
+    const platformVideoUrls = allUrls.filter(url => {
+      // include URLs classified as video and not already collected
+      const classification = classifyUrl(url)
+      return classification.type === 'video' && !collectedUrls.includes(url)
+    })
+
+    const remainingUrls = [...fileVideoUrls, ...platformVideoUrls].filter(url => !collectedUrls.includes(url))
+
+    let finalHtml = result
+    remainingUrls.forEach((url) => {
+      const placeholder = `__VIDEO_EMBED_${placeholderIndex}__`
+      finalHtml = finalHtml.replace(new RegExp(url.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), placeholder)
+      collectedUrls.push(url)
+      placeholderIndex++
+    })
+
+    // Return both processed HTML and collected URLs (in the same order as placeholders)
+    return {
+      processedHtml: collectedUrls.length > 0 ? finalHtml : html,
+      videoUrls: collectedUrls
+    }
+  }, [html, renderVideoLinksAsEmbeds])
+
+  // If no video embedding is enabled, just render the HTML normally
+  if (!renderVideoLinksAsEmbeds || videoUrls.length === 0) {
+    return (
+      <div 
+        ref={ref}
+        className={className}
+        dangerouslySetInnerHTML={{ __html: processedHtml }}
+        onMouseUp={onMouseUp}
+        onTouchEnd={onTouchEnd}
+      />
+    )
+  }
+
+  // Split the HTML by video placeholders and render with embedded players
+  const parts = processedHtml.split(/(__VIDEO_EMBED_\d+__)/)
+  
+  return (
+    <div ref={ref} className={className} onMouseUp={onMouseUp} onTouchEnd={onTouchEnd}>
+      {parts.map((part, index) => {
+        const videoMatch = part.match(/^__VIDEO_EMBED_(\d+)__$/)
+        if (videoMatch) {
+          const videoIndex = parseInt(videoMatch[1])
+          const videoUrl = videoUrls[videoIndex]
+          if (videoUrl) {
+            return (
+              <div key={index} className="reader-video" style={{ margin: '1rem 0' }}>
+                <ReactPlayer 
+                  url={videoUrl}
+                  controls 
+                  width="100%"
+                  height="auto"
+                  style={{ 
+                    width: '100%', 
+                    height: 'auto', 
+                    aspectRatio: '16/9' 
+                  }}
+                />
+              </div>
+            )
+          }
+        }
+        
+        // Regular HTML content - only render if not empty
+        if (part.trim()) {
+          return (
+            <div 
+              key={index}
+              dangerouslySetInnerHTML={{ __html: part }}
+            />
+          )
+        }
+        return null
+      })}
+    </div>
+  )
+})
+
+VideoEmbedProcessor.displayName = 'VideoEmbedProcessor'
+
+export default VideoEmbedProcessor

src/config/bots.ts

@@ -0,0 +1,17 @@
+import { nip19 } from 'nostr-tools'
+
+/**
+ * Hardcoded list of bot pubkeys (hex format) to hide articles from
+ * These are accounts known to be bots or automated services
+ */
+export const BOT_PUBKEYS = new Set([
+  // Step Counter Bot (npub14l5xklll5vxzrf6hfkv8m6n2gqevythn5pqc6ezluespah0e8ars4279ss)
+  nip19.decode('npub14l5xklll5vxzrf6hfkv8m6n2gqevythn5pqc6ezluespah0e8ars4279ss').data as string,
+])
+
+/**
+ * Check if a pubkey corresponds to a known bot
+ */
+export function isKnownBot(pubkey: string): boolean {
+  return BOT_PUBKEYS.has(pubkey)
+}

src/config/kinds.ts

@@ -1,8 +1,9 @@
 // Nostr event kinds used throughout the application
 export const KINDS = {
-  Highlights: 9802,              // NIP-?? user highlights
+  Highlights: 9802,              // NIP-84 user highlights
   BlogPost: 30023,               // NIP-23 long-form article
-  AppData: 30078,                // NIP-78 application data (reading positions)
+  AppData: 30078,                // NIP-78 application data
+  ReadingProgress: 39802,        // NIP-85 reading progress
   List: 30001,                   // NIP-51 list (addressable)
   ListReplaceable: 30003,        // NIP-51 replaceable list
   ListSimple: 10003,             // NIP-51 simple list
@@ -13,3 +14,9 @@ export const KINDS = {
 
 export type KindValue = typeof KINDS[keyof typeof KINDS]
 
+// Reading progress tracking configuration
+export const READING_PROGRESS = {
+  // Minimum character count to track reading progress (roughly 150 words)
+  MIN_CONTENT_LENGTH: 1000
+} as const
+

src/config/relays.ts

@@ -11,13 +11,11 @@ export const RELAYS = [
   'wss://relay.damus.io',
   'wss://nos.lol',
   'wss://relay.nostr.band',
-  'wss://relay.dergigi.com',
   'wss://wot.dergigi.com',
   'wss://relay.snort.social',
-  'wss://relay.current.fyi',
   'wss://nostr-pub.wellorder.net',
   'wss://purplepag.es',
   'wss://relay.primal.net',
-  'wss://proxy.nostr-relay.app/5d0d38afc49c4b84ca0da951a336affa18438efed302aeedfa92eb8b0d3fcb87'
+  'wss://proxy.nostr-relay.app/5d0d38afc49c4b84ca0da951a336affa18438efed302aeedfa92eb8b0d3fcb87',
 ]
 

src/hooks/useAdaptiveTextColor.ts

@@ -43,21 +43,14 @@ export function useAdaptiveTextColor(imageUrl: string | undefined): AdaptiveText
           height: Math.floor(height * 0.25)
         })
         
-        console.log('Adaptive color detected:', {
-          hex: color.hex,
-          rgb: color.rgb,
-          isLight: color.isLight,
-          isDark: color.isDark
-        })
+        // Color analysis complete
         
         // Use library's built-in isLight check for optimal contrast
         if (color.isLight) {
-          console.log('Light background detected, using black text')
           setColors({
             textColor: '#000000'
           })
         } else {
-          console.log('Dark background detected, using white text')
           setColors({
             textColor: '#ffffff'
           })

src/hooks/useArticleLoader.ts

@@ -1,5 +1,11 @@
-import { useEffect } from 'react'
+import { useEffect, useRef, Dispatch, SetStateAction } from 'react'
+import { useLocation } from 'react-router-dom'
 import { RelayPool } from 'applesauce-relay'
+import type { IEventStore } from 'applesauce-core'
+import { nip19 } from 'nostr-tools'
+import { AddressPointer } from 'nostr-tools/nip19'
+import { Helpers } from 'applesauce-core'
+import { queryEvents } from '../services/dataFetch'
 import { fetchArticleByNaddr } from '../services/articleService'
 import { fetchHighlightsForArticle } from '../services/highlightService'
 import { ReadableContent } from '../services/readerService'
@@ -7,14 +13,22 @@ import { Highlight } from '../types/highlights'
 import { NostrEvent } from 'nostr-tools'
 import { UserSettings } from '../services/settingsService'
 
+interface PreviewData {
+  title: string
+  image?: string
+  summary?: string
+  published?: number
+}
+
 interface UseArticleLoaderProps {
   naddr: string | undefined
   relayPool: RelayPool | null
+  eventStore?: IEventStore | null
   setSelectedUrl: (url: string) => void
   setReaderContent: (content: ReadableContent | undefined) => void
   setReaderLoading: (loading: boolean) => void
   setIsCollapsed: (collapsed: boolean) => void
-  setHighlights: (highlights: Highlight[]) => void
+  setHighlights: Dispatch<SetStateAction<Highlight[]>>
   setHighlightsLoading: (loading: boolean) => void
   setCurrentArticleCoordinate: (coord: string | undefined) => void
   setCurrentArticleEventId: (id: string | undefined) => void
@@ -25,6 +39,7 @@ interface UseArticleLoaderProps {
 export function useArticleLoader({
   naddr,
   relayPool,
+  eventStore,
   setSelectedUrl,
   setReaderContent,
   setReaderLoading,
@@ -36,79 +51,251 @@ export function useArticleLoader({
   setCurrentArticle,
   settings
 }: UseArticleLoaderProps) {
+  const location = useLocation()
+  const mountedRef = useRef(true)
+  // Hold latest settings without retriggering effect
+  const settingsRef = useRef<UserSettings | undefined>(settings)
   useEffect(() => {
+    settingsRef.current = settings
+  }, [settings])
+  // Track in-flight request to prevent stale updates from previous naddr
+  const currentRequestIdRef = useRef(0)
+  
+  // Extract preview data from navigation state (from blog post cards)
+  const previewData = (location.state as { previewData?: PreviewData })?.previewData
+  
+  useEffect(() => {
+    mountedRef.current = true
+    
     if (!relayPool || !naddr) return
     
     const loadArticle = async () => {
-      setReaderLoading(true)
-      setReaderContent(undefined)
+      const requestId = ++currentRequestIdRef.current
+      if (!mountedRef.current) return
+      
       setSelectedUrl(`nostr:${naddr}`)
       setIsCollapsed(true)
-      // Keep highlights panel collapsed by default - only open on user interaction
       
-      try {
-        const article = await fetchArticleByNaddr(relayPool, naddr, false, settings)
+      // If we have preview data from navigation, show it immediately (no skeleton!)
+      if (previewData) {
         setReaderContent({
-          title: article.title,
-          markdown: article.markdown,
-          image: article.image,
-          summary: article.summary,
-          published: article.published,
+          title: previewData.title,
+          markdown: '', // Will be loaded from store or relay
+          image: previewData.image,
+          summary: previewData.summary,
+          published: previewData.published,
           url: `nostr:${naddr}`
         })
-        
-        const dTag = article.event.tags.find(t => t[0] === 'd')?.[1] || ''
-        const articleCoordinate = `${article.event.kind}:${article.author}:${dTag}`
-        
-        setCurrentArticleCoordinate(articleCoordinate)
-        setCurrentArticleEventId(article.event.id)
-        setCurrentArticle?.(article.event)
-        
-        console.log('📰 Article loaded:', article.title)
-        console.log('📍 Coordinate:', articleCoordinate)
-        
-        // Set reader loading to false immediately after article content is ready
-        // Don't wait for highlights to finish loading
-        setReaderLoading(false)
-        
-        // Fetch highlights asynchronously without blocking article display
-        // Stream them as they arrive for instant rendering
+        setReaderLoading(false) // Turn off loading immediately - we have the preview!
+      } else {
+        setReaderLoading(true)
+        setReaderContent(undefined)
+      }
+      
+      try {
+        // Decode naddr to filter
+        const decoded = nip19.decode(naddr)
+        if (decoded.type !== 'naddr') {
+          throw new Error('Invalid naddr format')
+        }
+        const pointer = decoded.data as AddressPointer
+        const filter = {
+          kinds: [pointer.kind],
+          authors: [pointer.pubkey],
+          '#d': [pointer.identifier]
+        }
+
+        let firstEmitted = false
+        let latestEvent: NostrEvent | null = null
+
+        // Check eventStore first for instant load (from bookmark cards, explore, etc.)
+        if (eventStore) {
+          try {
+            const coordinate = `${pointer.kind}:${pointer.pubkey}:${pointer.identifier}`
+            const storedEvent = eventStore.getEvent?.(coordinate)
+            if (storedEvent) {
+              latestEvent = storedEvent as NostrEvent
+              firstEmitted = true
+              const title = Helpers.getArticleTitle(storedEvent) || 'Untitled Article'
+              const image = Helpers.getArticleImage(storedEvent)
+              const summary = Helpers.getArticleSummary(storedEvent)
+              const published = Helpers.getArticlePublished(storedEvent)
+              setReaderContent({
+                title,
+                markdown: storedEvent.content,
+                image,
+                summary,
+                published,
+                url: `nostr:${naddr}`
+              })
+              const dTag = storedEvent.tags.find(t => t[0] === 'd')?.[1] || ''
+              const articleCoordinate = `${storedEvent.kind}:${storedEvent.pubkey}:${dTag}`
+              setCurrentArticleCoordinate(articleCoordinate)
+              setCurrentArticleEventId(storedEvent.id)
+              setCurrentArticle?.(storedEvent)
+              setReaderLoading(false)
+            }
+          } catch (err) {
+            // Ignore store errors, fall through to relay query
+          }
+        }
+
+        // Stream local-first via queryEvents; rely on EOSE (no timeouts)
+        const events = await queryEvents(relayPool, filter, {
+          onEvent: (evt) => {
+            if (!mountedRef.current) return
+            if (currentRequestIdRef.current !== requestId) return
+
+            // Store in event store for future local reads
+            try { 
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              eventStore?.add?.(evt as unknown as any) 
+            } catch {
+              // Silently ignore store errors
+            }
+
+            // Keep latest by created_at
+            if (!latestEvent || evt.created_at > latestEvent.created_at) {
+              latestEvent = evt
+            }
+
+            // Emit immediately on first event
+            if (!firstEmitted) {
+              firstEmitted = true
+              const title = Helpers.getArticleTitle(evt) || 'Untitled Article'
+              const image = Helpers.getArticleImage(evt)
+              const summary = Helpers.getArticleSummary(evt)
+              const published = Helpers.getArticlePublished(evt)
+              setReaderContent({
+                title,
+                markdown: evt.content,
+                image,
+                summary,
+                published,
+                url: `nostr:${naddr}`
+              })
+              const dTag = evt.tags.find(t => t[0] === 'd')?.[1] || ''
+              const articleCoordinate = `${evt.kind}:${evt.pubkey}:${dTag}`
+              setCurrentArticleCoordinate(articleCoordinate)
+              setCurrentArticleEventId(evt.id)
+              setCurrentArticle?.(evt)
+              setReaderLoading(false)
+            }
+          }
+        })
+
+        if (!mountedRef.current || currentRequestIdRef.current !== requestId) return
+
+        // Finalize with newest version if it's newer than what we first rendered
+        const finalEvent = (events.sort((a, b) => b.created_at - a.created_at)[0]) || latestEvent
+        if (finalEvent) {
+          const title = Helpers.getArticleTitle(finalEvent) || 'Untitled Article'
+          const image = Helpers.getArticleImage(finalEvent)
+          const summary = Helpers.getArticleSummary(finalEvent)
+          const published = Helpers.getArticlePublished(finalEvent)
+          setReaderContent({
+            title,
+            markdown: finalEvent.content,
+            image,
+            summary,
+            published,
+            url: `nostr:${naddr}`
+          })
+
+          const dTag = finalEvent.tags.find(t => t[0] === 'd')?.[1] || ''
+          const articleCoordinate = `${finalEvent.kind}:${finalEvent.pubkey}:${dTag}`
+          setCurrentArticleCoordinate(articleCoordinate)
+          setCurrentArticleEventId(finalEvent.id)
+          setCurrentArticle?.(finalEvent)
+        } else {
+          // As a last resort, fall back to the legacy helper (which includes cache)
+          const article = await fetchArticleByNaddr(relayPool, naddr, false, settingsRef.current)
+          if (!mountedRef.current || currentRequestIdRef.current !== requestId) return
+          setReaderContent({
+            title: article.title,
+            markdown: article.markdown,
+            image: article.image,
+            summary: article.summary,
+            published: article.published,
+            url: `nostr:${naddr}`
+          })
+          const dTag = article.event.tags.find(t => t[0] === 'd')?.[1] || ''
+          const articleCoordinate = `${article.event.kind}:${article.author}:${dTag}`
+          setCurrentArticleCoordinate(articleCoordinate)
+          setCurrentArticleEventId(article.event.id)
+          setCurrentArticle?.(article.event)
+        }
+
+        // Fetch highlights after content is shown
         try {
-          setHighlightsLoading(true)
-          setHighlights([]) // Clear old highlights
-          const highlightsMap = new Map<string, Highlight>()
+          if (!mountedRef.current) return
           
-          await fetchHighlightsForArticle(
-            relayPool, 
-            articleCoordinate, 
-            article.event.id,
-            (highlight) => {
-              // Deduplicate highlights by ID as they arrive
-              if (!highlightsMap.has(highlight.id)) {
-                highlightsMap.set(highlight.id, highlight)
-                const highlightsList = Array.from(highlightsMap.values())
-                setHighlights(highlightsList.sort((a, b) => b.created_at - a.created_at))
-              }
-            },
-            settings
-          )
-          console.log(`📌 Found ${highlightsMap.size} highlights`)
+          const le = latestEvent as NostrEvent | null
+          const dTag = le ? (le.tags.find((t: string[]) => t[0] === 'd')?.[1] || '') : ''
+          const coord = le && dTag ? `${le.kind}:${le.pubkey}:${dTag}` : undefined
+          const eventId = le ? le.id : undefined
+          
+          if (coord && eventId) {
+            setHighlightsLoading(true)
+            setHighlights([])
+            await fetchHighlightsForArticle(
+              relayPool,
+              coord,
+              eventId,
+              (highlight) => {
+                if (!mountedRef.current) return
+                if (currentRequestIdRef.current !== requestId) return
+                setHighlights((prev: Highlight[]) => {
+                  if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
+                  const next = [highlight, ...prev]
+                  return next.sort((a, b) => b.created_at - a.created_at)
+                })
+              },
+              settingsRef.current
+            )
+          } else {
+            // No article event to fetch highlights for - clear and don't show loading
+            setHighlights([])
+            setHighlightsLoading(false)
+          }
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
-          setHighlightsLoading(false)
+          if (mountedRef.current && currentRequestIdRef.current === requestId) {
+            setHighlightsLoading(false)
+          }
         }
       } catch (err) {
         console.error('Failed to load article:', err)
-        setReaderContent({
-          title: 'Error Loading Article',
-          html: `<p>Failed to load article: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
-          url: `nostr:${naddr}`
-        })
-        setReaderLoading(false)
+        if (mountedRef.current && currentRequestIdRef.current === requestId) {
+          setReaderContent({
+            title: 'Error Loading Article',
+            html: `<p>Failed to load article: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
+            url: `nostr:${naddr}`
+          })
+          setReaderLoading(false)
+        }
       }
     }
     
     loadArticle()
-  }, [naddr, relayPool, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId, setCurrentArticle, settings])
+    
+    return () => {
+      mountedRef.current = false
+    }
+  }, [
+    naddr,
+    relayPool,
+    eventStore,
+    previewData,
+    setSelectedUrl,
+    setReaderContent,
+    setReaderLoading,
+    setIsCollapsed,
+    setHighlights,
+    setHighlightsLoading,
+    setCurrentArticleCoordinate,
+    setCurrentArticleEventId,
+    setCurrentArticle
+  ])
 }

src/hooks/useEventLoader.ts

@@ -0,0 +1,132 @@
+import { useEffect, useCallback } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
+import { NostrEvent } from 'nostr-tools'
+import { ReadableContent } from '../services/readerService'
+import { eventManager } from '../services/eventManager'
+import { fetchProfiles } from '../services/profileService'
+
+interface UseEventLoaderProps {
+  eventId?: string
+  relayPool?: RelayPool | null
+  eventStore?: IEventStore | null
+  setSelectedUrl: (url: string) => void
+  setReaderContent: (content: ReadableContent | undefined) => void
+  setReaderLoading: (loading: boolean) => void
+  setIsCollapsed: (collapsed: boolean) => void
+}
+
+export function useEventLoader({
+  eventId,
+  relayPool,
+  eventStore,
+  setSelectedUrl,
+  setReaderContent,
+  setReaderLoading,
+  setIsCollapsed
+}: UseEventLoaderProps) {
+  const displayEvent = useCallback((event: NostrEvent) => {
+    // Escape HTML in content and convert newlines to breaks for plain text display
+    const escapedContent = event.content
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/\n/g, '<br />')
+
+    // Initial title
+    let title = `Note (${event.kind})`
+    if (event.kind === 1) {
+      title = `Note by @${event.pubkey.slice(0, 8)}...`
+    }
+
+    // Emit immediately
+    const baseContent: ReadableContent = {
+      url: '',
+      html: `<div style="white-space: pre-wrap; word-break: break-word;">${escapedContent}</div>`,
+      title,
+      published: event.created_at
+    }
+    setReaderContent(baseContent)
+
+    // Background: resolve author profile for kind:1 and update title
+    if (event.kind === 1 && eventStore) {
+      (async () => {
+        try {
+          let resolved = ''
+
+          // First, try to get from event store cache
+          const storedProfile = eventStore.getEvent(event.pubkey + ':0')
+          if (storedProfile) {
+            try {
+              const obj = JSON.parse(storedProfile.content || '{}') as { name?: string; display_name?: string; nip05?: string }
+              resolved = obj.display_name || obj.name || obj.nip05 || ''
+            } catch {
+              // ignore parse errors
+            }
+          }
+
+          // If not found in event store, fetch from relays
+          if (!resolved && relayPool) {
+            const profiles = await fetchProfiles(relayPool, eventStore as unknown as IEventStore, [event.pubkey])
+            if (profiles && profiles.length > 0) {
+              const latest = profiles.sort((a, b) => (b.created_at || 0) - (a.created_at || 0))[0]
+              try {
+                const obj = JSON.parse(latest.content || '{}') as { name?: string; display_name?: string; nip05?: string }
+                resolved = obj.display_name || obj.name || obj.nip05 || ''
+              } catch {
+                // ignore parse errors
+              }
+            }
+          }
+
+          if (resolved) {
+            setReaderContent({ ...baseContent, title: `Note by @${resolved}` })
+          }
+        } catch {
+          // ignore profile failures; keep fallback title
+        }
+      })()
+    }
+  }, [setReaderContent, relayPool, eventStore])
+
+  // Initialize event manager with services
+  useEffect(() => {
+    eventManager.setServices(eventStore || null, relayPool || null)
+  }, [eventStore, relayPool])
+
+  useEffect(() => {
+    if (!eventId) return
+
+    setReaderLoading(true)
+    setReaderContent(undefined)
+    setSelectedUrl(`nostr-event:${eventId}`) // sentinel: truthy selection, not treated as article
+    setIsCollapsed(false)
+
+    // Fetch using event manager (handles cache, deduplication, and retry)
+    let cancelled = false
+
+    eventManager.fetchEvent(eventId).then(
+      (event) => {
+        if (!cancelled) {
+          displayEvent(event)
+          setReaderLoading(false)
+        }
+      },
+      (err) => {
+        if (!cancelled) {
+          const errorContent: ReadableContent = {
+            url: '',
+            html: `<div style="padding: 1rem; color: var(--color-error, red);">Failed to load event: ${err instanceof Error ? err.message : 'Unknown error'}</div>`,
+            title: 'Error'
+          }
+          setReaderContent(errorContent)
+          setReaderLoading(false)
+        }
+      }
+    )
+
+    return () => {
+      cancelled = true
+    }
+  }, [eventId, displayEvent, setReaderLoading, setSelectedUrl, setIsCollapsed, setReaderContent])
+}

src/hooks/useExternalUrlLoader.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useRef, useMemo } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { fetchReadableContent, ReadableContent } from '../services/readerService'
@@ -48,6 +48,10 @@ export function useExternalUrlLoader({
   setCurrentArticleCoordinate,
   setCurrentArticleEventId
 }: UseExternalUrlLoaderProps) {
+  const mountedRef = useRef(true)
+  // Track in-flight request to prevent stale updates when switching quickly
+  const currentRequestIdRef = useRef(0)
+  
   // Load cached URL-specific highlights from event store
   const urlFilter = useMemo(() => {
     if (!url) return null
@@ -61,80 +65,126 @@ export function useExternalUrlLoader({
     [url]
   )
   
+  // Load content and start streaming highlights when URL changes
   useEffect(() => {
+    mountedRef.current = true
+    
     if (!relayPool || !url) return
     
     const loadExternalUrl = async () => {
+      const requestId = ++currentRequestIdRef.current
+      if (!mountedRef.current) return
+      
       setReaderLoading(true)
       setReaderContent(undefined)
       setSelectedUrl(url)
       setIsCollapsed(true)
-      // Clear article-specific state
       setCurrentArticleCoordinate(undefined)
       setCurrentArticleEventId(undefined)
       
       try {
         const content = await fetchReadableContent(url)
+        
+        if (!mountedRef.current) return
+        if (currentRequestIdRef.current !== requestId) return
+        
         setReaderContent(content)
-        
-        console.log('🌐 External URL loaded:', content.title)
-        
-        // Set reader loading to false immediately after content is ready
         setReaderLoading(false)
         
         // Fetch highlights for this URL asynchronously
         try {
+          if (!mountedRef.current) return
+          
           setHighlightsLoading(true)
           
           // Seed with cached highlights first
           if (cachedUrlHighlights.length > 0) {
-            setHighlights(cachedUrlHighlights.sort((a, b) => b.created_at - a.created_at))
+            setHighlights((prev) => {
+              const seen = new Set<string>(cachedUrlHighlights.map(h => h.id))
+              const localOnly = prev.filter(h => !seen.has(h.id))
+              const next = [...cachedUrlHighlights, ...localOnly]
+              return next.sort((a, b) => b.created_at - a.created_at)
+            })
           } else {
             setHighlights([])
           }
           
-          // Check if fetchHighlightsForUrl exists, otherwise skip
           if (typeof fetchHighlightsForUrl === 'function') {
             const seen = new Set<string>()
-            // Seed with cached IDs
             cachedUrlHighlights.forEach(h => seen.add(h.id))
             
             await fetchHighlightsForUrl(
               relayPool,
               url,
               (highlight) => {
+                if (!mountedRef.current) return
+                if (currentRequestIdRef.current !== requestId) return
+                
                 if (seen.has(highlight.id)) return
                 seen.add(highlight.id)
                 setHighlights((prev) => {
                   if (prev.some(h => h.id === highlight.id)) return prev
-                  const next = [...prev, highlight]
+                  const next = [highlight, ...prev]
                   return next.sort((a, b) => b.created_at - a.created_at)
                 })
               },
-              undefined, // settings
-              false, // force
+              undefined,
+              false,
               eventStore || undefined
             )
           }
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
-          setHighlightsLoading(false)
+          if (mountedRef.current && currentRequestIdRef.current === requestId) {
+            setHighlightsLoading(false)
+          }
         }
       } catch (err) {
         console.error('Failed to load external URL:', err)
-        // For videos and other media files, use the filename as the title
-        const filename = getFilenameFromUrl(url)
-        setReaderContent({
-          title: filename,
-          html: `<p>Failed to load content: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
-          url
-        })
-        setReaderLoading(false)
+        if (mountedRef.current && currentRequestIdRef.current === requestId) {
+          const filename = getFilenameFromUrl(url)
+          setReaderContent({
+            title: filename,
+            html: `<p>Failed to load content: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
+            url
+          })
+          setReaderLoading(false)
+        }
       }
     }
     
     loadExternalUrl()
-  }, [url, relayPool, eventStore, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId, cachedUrlHighlights])
+    
+    return () => {
+      mountedRef.current = false
+    }
+  }, [
+    url,
+    relayPool,
+    eventStore,
+    cachedUrlHighlights,
+    setReaderContent,
+    setReaderLoading,
+    setIsCollapsed,
+    setSelectedUrl,
+    setHighlights,
+    setCurrentArticleCoordinate,
+    setCurrentArticleEventId,
+    setHighlightsLoading
+  ])
+
+  // Keep UI highlights synced with cached store updates without reloading content
+  useEffect(() => {
+    if (!url) return
+    if (cachedUrlHighlights.length === 0) return
+    setHighlights((prev) => {
+      const seen = new Set<string>(prev.map(h => h.id))
+      const additions = cachedUrlHighlights.filter(h => !seen.has(h.id))
+      if (additions.length === 0) return prev
+      const next = [...additions, ...prev]
+      return next.sort((a, b) => b.created_at - a.created_at)
+    })
+  }, [cachedUrlHighlights, url, setHighlights])
 }
 

src/hooks/useHighlightCreation.ts

@@ -60,7 +60,6 @@ export const useHighlightCreation = ({
         ? currentArticle.content 
         : readerContent?.markdown || readerContent?.html
       
-      console.log('🎯 Creating highlight...', { text: text.substring(0, 50) + '...' })
       
       const newHighlight = await createHighlight(
         text,
@@ -73,12 +72,7 @@ export const useHighlightCreation = ({
         settings
       )
       
-      console.log('✅ Highlight created successfully!', {
-        id: newHighlight.id,
-        isLocalOnly: newHighlight.isLocalOnly,
-        isOfflineCreated: newHighlight.isOfflineCreated,
-        publishedRelays: newHighlight.publishedRelays
-      })
+      // Highlight created successfully
       
       // Clear the browser's text selection immediately to allow DOM update
       const selection = window.getSelection()

src/hooks/useHighlightedContent.ts

@@ -32,14 +32,7 @@ export const useHighlightedContent = ({
 }: UseHighlightedContentParams) => {
   // Filter highlights by URL and visibility settings
   const relevantHighlights = useMemo(() => {
-    console.log('🔍 ContentPanel: Processing highlights', {
-      totalHighlights: highlights.length,
-      selectedUrl,
-      showHighlights
-    })
-    
     const urlFiltered = filterHighlightsByUrl(highlights, selectedUrl)
-    console.log('📌 URL filtered highlights:', urlFiltered.length)
     
     // Apply visibility filtering
     const classified = classifyHighlights(urlFiltered, currentUserPubkey, followedPubkeys)
@@ -49,37 +42,25 @@ export const useHighlightedContent = ({
       return highlightVisibility.nostrverse
     })
       
-    console.log('✅ Relevant highlights after filtering:', filtered.length, filtered.map(h => h.content.substring(0, 30)))
     return filtered
-  }, [selectedUrl, highlights, highlightVisibility, currentUserPubkey, followedPubkeys, showHighlights])
+  }, [selectedUrl, highlights, highlightVisibility, currentUserPubkey, followedPubkeys])
 
   // Prepare the final HTML with highlights applied
   const finalHtml = useMemo(() => {
     const sourceHtml = markdown ? renderedMarkdownHtml : html
     
-    console.log('🎨 Preparing final HTML:', {
-      hasMarkdown: !!markdown,
-      hasHtml: !!html,
-      renderedHtmlLength: renderedMarkdownHtml.length,
-      sourceHtmlLength: sourceHtml?.length || 0,
-      showHighlights,
-      relevantHighlightsCount: relevantHighlights.length
-    })
-    
+    // Prepare final HTML
     if (!sourceHtml) {
-      console.warn('⚠️ No source HTML available')
       return ''
     }
     
     if (showHighlights && relevantHighlights.length > 0) {
-      console.log('✨ Applying', relevantHighlights.length, 'highlights to HTML')
       const highlightedHtml = applyHighlightsToHTML(sourceHtml, relevantHighlights, highlightStyle)
-      console.log('✅ Highlights applied, result length:', highlightedHtml.length)
       return highlightedHtml
     }
     
-    console.log('📄 Returning source HTML without highlights')
     return sourceHtml
+
   }, [html, renderedMarkdownHtml, markdown, relevantHighlights, showHighlights, highlightStyle])
 
   return { finalHtml, relevantHighlights }

src/hooks/useMarkdownToHTML.ts

@@ -20,9 +20,11 @@ export const useMarkdownToHTML = (
   const [processedMarkdown, setProcessedMarkdown] = useState<string>('')
 
   useEffect(() => {
+    // Always clear previous render immediately to avoid showing stale content while processing
+    setRenderedHtml('')
+    setProcessedMarkdown('')
+    
     if (!markdown) {
-      setRenderedHtml('')
-      setProcessedMarkdown('')
       return
     }
 
@@ -43,7 +45,6 @@ export const useMarkdownToHTML = (
           
           // Replace nostr URIs with resolved titles
           processed = replaceNostrUrisInMarkdownWithTitles(markdown, articleTitles)
-          console.log(`📚 Resolved ${articleTitles.size} article titles`)
         } catch (error) {
           console.warn('Failed to fetch article titles:', error)
           // Fall back to basic replacement
@@ -58,12 +59,10 @@ export const useMarkdownToHTML = (
       
       setProcessedMarkdown(processed)
 
-      console.log('📝 Converting markdown to HTML...')
       
       const rafId = requestAnimationFrame(() => {
         if (previewRef.current && !isCancelled) {
           const html = previewRef.current.innerHTML
-          console.log('✅ Markdown converted to HTML:', html.length, 'chars')
           setRenderedHtml(html)
         } else if (!isCancelled) {
           console.warn('⚠️ markdownPreviewRef.current is null')

src/hooks/useMountedState.ts

@@ -0,0 +1,28 @@
+import { useRef, useEffect, useCallback } from 'react'
+
+/**
+ * Hook to track if component is mounted and prevent state updates after unmount.
+ * Returns a function to check if still mounted.
+ * 
+ * @example
+ * const isMounted = useMountedState()
+ * 
+ * async function loadData() {
+ *   const data = await fetch(...)
+ *   if (isMounted()) {
+ *     setState(data)
+ *   }
+ * }
+ */
+export function useMountedState(): () => boolean {
+  const mountedRef = useRef(true)
+  
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+  
+  return useCallback(() => mountedRef.current, [])
+}
+

src/hooks/useOfflineSync.ts

@@ -50,16 +50,10 @@ export function useOfflineSync({
     const isNowOnline = hasRemoteRelays
 
     if (wasLocalOnly && isNowOnline) {
-      console.log('✈️ Detected transition: Flight Mode → Online')
-      console.log('📊 Relay state:', {
-        connectedRelays: connectedRelays.length,
-        remoteRelays: connectedRelays.filter(r => !isLocalRelay(r.url)).length,
-        localRelays: connectedRelays.filter(r => isLocalRelay(r.url)).length
-      })
+      // Coming back online, sync events
       
       // Wait a moment for relays to fully establish connections
       setTimeout(() => {
-        console.log('🚀 Starting sync after delay...')
         syncLocalEventsToRemote(relayPool, eventStore)
       }, 2000)
     }

src/hooks/useOnlineStatus.ts

@@ -5,12 +5,10 @@ export function useOnlineStatus() {
 
   useEffect(() => {
     const handleOnline = () => {
-      console.log('🌐 Back online')
       setIsOnline(true)
     }
 
     const handleOffline = () => {
-      console.log('📴 Gone offline')
       setIsOnline(false)
     }
 

src/hooks/usePWAInstall.ts

@@ -51,12 +51,10 @@ export function usePWAInstall() {
       const choiceResult = await deferredPrompt.userChoice
       
       if (choiceResult.outcome === 'accepted') {
-        console.log('✅ PWA installed')
         setIsInstallable(false)
         setDeferredPrompt(null)
         return true
       } else {
-        console.log('❌ PWA installation dismissed')
         return false
       }
     } catch (error) {

src/hooks/useReadingPosition.ts

@@ -4,68 +4,111 @@ interface UseReadingPositionOptions {
   enabled?: boolean
   onPositionChange?: (position: number) => void
   onReadingComplete?: () => void
-  readingCompleteThreshold?: number // Default 0.9 (90%)
+  readingCompleteThreshold?: number // Default 0.95 (95%) - matches filter threshold
   syncEnabled?: boolean // Whether to sync positions to Nostr
   onSave?: (position: number) => void // Callback for saving position
   autoSaveInterval?: number // Auto-save interval in ms (default 5000)
+  completionHoldMs?: number // How long to hold at 100% before firing complete (default 2000)
 }
 
 export const useReadingPosition = ({
   enabled = true,
   onPositionChange,
   onReadingComplete,
-  readingCompleteThreshold = 0.9,
+  readingCompleteThreshold = 0.95, // Match filter threshold for consistency
   syncEnabled = false,
   onSave,
-  autoSaveInterval = 5000
+  autoSaveInterval = 5000,
+  completionHoldMs = 2000
 }: UseReadingPositionOptions = {}) => {
   const [position, setPosition] = useState(0)
+  const positionRef = useRef(0)
   const [isReadingComplete, setIsReadingComplete] = useState(false)
   const hasTriggeredComplete = useRef(false)
   const lastSavedPosition = useRef(0)
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const hasSavedOnce = useRef(false)
+  const completionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const lastSavedAtRef = useRef<number>(0)
 
   // Debounced save function
   const scheduleSave = useCallback((currentPosition: number) => {
-    if (!syncEnabled || !onSave) return
-    
-    // Don't save if position is too low (< 5%)
-    if (currentPosition < 0.05) return
-    
-    // Don't save if position hasn't changed significantly (less than 1%)
-    // But always save if we've reached 100% (completion)
-    const hasSignificantChange = Math.abs(currentPosition - lastSavedPosition.current) >= 0.01
-    const hasReachedCompletion = currentPosition === 1 && lastSavedPosition.current < 1
-    
-    if (!hasSignificantChange && !hasReachedCompletion) return
+    if (!syncEnabled || !onSave) {
+      return
+    }
+
+    // Always save instantly when we reach completion (1.0)
+    if (currentPosition === 1 && lastSavedPosition.current < 1) {
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current)
+        saveTimerRef.current = null
+      }
+      lastSavedPosition.current = 1
+      hasSavedOnce.current = true
+      lastSavedAtRef.current = Date.now()
+      onSave(1)
+      return
+    }
+
+    // Require at least 5% progress change to consider saving
+    const MIN_DELTA = 0.05
+    const hasSignificantChange = Math.abs(currentPosition - lastSavedPosition.current) >= MIN_DELTA
+
+    // Enforce a minimum interval between saves (15s) to avoid spamming
+    const MIN_INTERVAL_MS = 15000
+    const nowMs = Date.now()
+    const enoughTimeElapsed = nowMs - lastSavedAtRef.current >= MIN_INTERVAL_MS
+
+    // Allow the very first meaningful save (when crossing 5%) regardless of interval
+    const isFirstMeaningful = !hasSavedOnce.current && currentPosition >= MIN_DELTA
+
+    if (!hasSignificantChange && !isFirstMeaningful) {
+      return
+    }
+
+    // If interval hasn't elapsed yet, delay until autoSaveInterval but still cap frequency
+    if (!enoughTimeElapsed && !isFirstMeaningful) {
+      // Clear and reschedule within the remaining window, but not sooner than MIN_INTERVAL_MS
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current)
+      }
+      const remaining = Math.max(0, MIN_INTERVAL_MS - (nowMs - lastSavedAtRef.current))
+      const delay = Math.max(autoSaveInterval, remaining)
+      saveTimerRef.current = setTimeout(() => {
+        lastSavedPosition.current = currentPosition
+        hasSavedOnce.current = true
+        lastSavedAtRef.current = Date.now()
+        onSave(currentPosition)
+      }, delay)
+      return
+    }
 
     // Clear existing timer
     if (saveTimerRef.current) {
       clearTimeout(saveTimerRef.current)
     }
 
-    // Schedule new save
+    // Schedule new save using the larger of autoSaveInterval and MIN_INTERVAL_MS
+    const delay = Math.max(autoSaveInterval, MIN_INTERVAL_MS)
     saveTimerRef.current = setTimeout(() => {
       lastSavedPosition.current = currentPosition
+      hasSavedOnce.current = true
+      lastSavedAtRef.current = Date.now()
       onSave(currentPosition)
-    }, autoSaveInterval)
+    }, delay)
   }, [syncEnabled, onSave, autoSaveInterval])
 
   // Immediate save function
   const saveNow = useCallback(() => {
     if (!syncEnabled || !onSave) return
-    
-    // Cancel any pending saves
     if (saveTimerRef.current) {
       clearTimeout(saveTimerRef.current)
       saveTimerRef.current = null
     }
-
-    // Save if position is meaningful (>= 5%)
-    if (position >= 0.05) {
-      lastSavedPosition.current = position
-      onSave(position)
-    }
+    lastSavedPosition.current = position
+    hasSavedOnce.current = true
+    lastSavedAtRef.current = Date.now()
+    onSave(position)
   }, [syncEnabled, onSave, position])
 
   useEffect(() => {
@@ -90,16 +133,39 @@ export const useReadingPosition = ({
       const clampedProgress = isAtBottom ? 1 : Math.max(0, Math.min(1, scrollProgress))
       
       setPosition(clampedProgress)
+      positionRef.current = clampedProgress
       onPositionChange?.(clampedProgress)
 
       // Schedule auto-save if sync is enabled
       scheduleSave(clampedProgress)
 
-      // Check if reading is complete
-      if (clampedProgress >= readingCompleteThreshold && !hasTriggeredComplete.current) {
-        setIsReadingComplete(true)
-        hasTriggeredComplete.current = true
-        onReadingComplete?.()
+      // Completion detection with 2s hold at 100%
+      if (!hasTriggeredComplete.current) {
+        // If at exact 100%, start a hold timer; cancel if we scroll up
+        if (clampedProgress === 1) {
+          if (!completionTimerRef.current) {
+            completionTimerRef.current = setTimeout(() => {
+              if (!hasTriggeredComplete.current && positionRef.current === 1) {
+                setIsReadingComplete(true)
+                hasTriggeredComplete.current = true
+                onReadingComplete?.()
+              }
+              completionTimerRef.current = null
+            }, completionHoldMs)
+          }
+        } else {
+          // If we moved off 100%, cancel any pending completion hold
+          if (completionTimerRef.current) {
+            clearTimeout(completionTimerRef.current)
+            completionTimerRef.current = null
+            // still allow threshold-based completion for near-bottom if configured
+            if (clampedProgress >= readingCompleteThreshold) {
+              setIsReadingComplete(true)
+              hasTriggeredComplete.current = true
+              onReadingComplete?.()
+            }
+          }
+        }
       }
     }
 
@@ -118,14 +184,23 @@ export const useReadingPosition = ({
       if (saveTimerRef.current) {
         clearTimeout(saveTimerRef.current)
       }
+      if (completionTimerRef.current) {
+        clearTimeout(completionTimerRef.current)
+      }
     }
-  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold, scheduleSave])
+  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold, scheduleSave, completionHoldMs])
 
   // Reset reading complete state when enabled changes
   useEffect(() => {
     if (!enabled) {
       setIsReadingComplete(false)
       hasTriggeredComplete.current = false
+      hasSavedOnce.current = false
+      lastSavedPosition.current = 0
+      if (completionTimerRef.current) {
+        clearTimeout(completionTimerRef.current)
+        completionTimerRef.current = null
+      }
     }
   }, [enabled])
 

src/hooks/useSettings.ts

@@ -3,7 +3,7 @@ import { IEventStore } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
 import { EventFactory } from 'applesauce-factory'
 import { AccountManager } from 'applesauce-accounts'
-import { UserSettings, loadSettings, saveSettings, watchSettings } from '../services/settingsService'
+import { UserSettings, saveSettings, watchSettings, startSettingsStream } from '../services/settingsService'
 import { loadFont, getFontFamily } from '../utils/fontLoader'
 import { applyTheme } from '../utils/theme'
 import { RELAYS } from '../config/relays'
@@ -16,30 +16,28 @@ interface UseSettingsParams {
 }
 
 export function useSettings({ relayPool, eventStore, pubkey, accountManager }: UseSettingsParams) {
-  const [settings, setSettings] = useState<UserSettings>({})
+  const [settings, setSettings] = useState<UserSettings>({ renderVideoLinksAsEmbeds: true, hideBotArticlesByName: true })
   const [toastMessage, setToastMessage] = useState<string | null>(null)
   const [toastType, setToastType] = useState<'success' | 'error'>('success')
 
-  // Load settings and set up subscription
+  // Load settings and set up streaming subscription (non-blocking, EOSE-driven)
   useEffect(() => {
     if (!relayPool || !pubkey || !eventStore) return
 
-    const loadAndWatch = async () => {
-      try {
-        const loadedSettings = await loadSettings(relayPool, eventStore, pubkey, RELAYS)
-        if (loadedSettings) setSettings(loadedSettings)
-      } catch (err) {
-        console.error('Failed to load settings:', err)
-      }
-    }
-
-    loadAndWatch()
-
-    const subscription = watchSettings(eventStore, pubkey, (loadedSettings) => {
-      if (loadedSettings) setSettings(loadedSettings)
+    // Start settings stream: seed from store, stream updates to store in background
+    const stopNetwork = startSettingsStream(relayPool, eventStore, pubkey, RELAYS, (loadedSettings) => {
+      if (loadedSettings) setSettings({ renderVideoLinksAsEmbeds: true, hideBotArticlesByName: true, ...loadedSettings })
     })
 
-    return () => subscription.unsubscribe()
+    // Also watch store reactively for any further updates
+    const subscription = watchSettings(eventStore, pubkey, (loadedSettings) => {
+      if (loadedSettings) setSettings({ renderVideoLinksAsEmbeds: true, hideBotArticlesByName: true, ...loadedSettings })
+    })
+
+    return () => {
+      subscription.unsubscribe()
+      stopNetwork()
+    }
   }, [relayPool, pubkey, eventStore])
 
   // Apply settings to document
@@ -48,7 +46,6 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       const root = document.documentElement.style
       const fontKey = settings.readingFont || 'system'
       
-      console.log('🎨 Applying settings styles:', { fontKey, fontSize: settings.fontSize, theme: settings.theme })
       
       // Apply theme with color variants (defaults to 'system' if not set)
       applyTheme(
@@ -59,9 +56,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       
       // Load font first and wait for it to be ready
       if (fontKey !== 'system') {
-        console.log('⏳ Waiting for font to load...')
         await loadFont(fontKey)
-        console.log('✅ Font loaded, applying styles')
       }
       
       // Apply font settings after font is loaded
@@ -76,7 +71,9 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       // Set paragraph alignment
       root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify')
       
-      console.log('✅ All styles applied')
+      // Set image max-width based on full-width setting
+      root.setProperty('--image-max-width', settings.fullWidthImages ? 'none' : '100%')
+      
     }
     
     applyStyles()

src/hooks/useTextToSpeech.ts

@@ -0,0 +1,288 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+// Web Speech API types
+type SpeechSynthesisVoice = {
+  name: string
+  voiceURI: string
+  lang: string
+  localService: boolean
+  default: boolean
+}
+
+export interface UseTTSOptions {
+  defaultLang?: string
+  defaultRate?: number
+  defaultPitch?: number
+  defaultVolume?: number
+}
+
+export interface UseTTS {
+  supported: boolean
+  speaking: boolean
+  paused: boolean
+  voices: SpeechSynthesisVoice[]
+  voice: SpeechSynthesisVoice | null
+  rate: number
+  pitch: number
+  volume: number
+  setVoice: (v: SpeechSynthesisVoice | null) => void
+  setRate: (r: number) => void
+  setPitch: (p: number) => void
+  setVolume: (v: number) => void
+  speak: (text: string, langOverride?: string) => void
+  pause: () => void
+  resume: () => void
+  stop: () => void
+}
+
+export function useTextToSpeech(options: UseTTSOptions = {}): UseTTS {
+  const synth = typeof window !== 'undefined' ? window.speechSynthesis : undefined
+  const supported = !!synth
+  const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([])
+  const [voice, setVoice] = useState<SpeechSynthesisVoice | null>(null)
+  const [speaking, setSpeaking] = useState(false)
+  const [paused, setPaused] = useState(false)
+  const [rate, setRate] = useState(options.defaultRate ?? 2.1)
+  const [pitch, setPitch] = useState(options.defaultPitch ?? 1)
+  const [volume, setVolume] = useState(options.defaultVolume ?? 1)
+  const defaultLang = options.defaultLang || (typeof navigator !== 'undefined' ? navigator.language : 'en')
+
+  const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null)
+  const spokenTextRef = useRef<string>('')
+  const charIndexRef = useRef<number>(0)
+  // Chunking state to reliably speak long texts from web URLs
+  const chunksRef = useRef<string[]>([])
+  const chunkIndexRef = useRef<number>(0)
+  const globalOffsetRef = useRef<number>(0)
+  const langRef = useRef<string | undefined>(undefined)
+
+  // Update rate when defaultRate option changes
+  useEffect(() => {
+    if (options.defaultRate !== undefined) {
+      setRate(options.defaultRate)
+    }
+  }, [options.defaultRate])
+
+  // Load voices (async in many browsers)
+  useEffect(() => {
+    if (!supported) return
+    const load = () => {
+      const v = synth!.getVoices()
+      setVoices(v)
+      if (!voice && v.length) {
+        const byLang = v.find(x => x.lang?.toLowerCase().startsWith(defaultLang.toLowerCase()))
+        setVoice(byLang || v[0] || null)
+      }
+    }
+    load()
+    const handleVoicesChanged = () => load()
+    synth!.addEventListener('voiceschanged', handleVoicesChanged)
+    return () => {
+      synth!.removeEventListener('voiceschanged', handleVoicesChanged)
+    }
+  }, [supported, defaultLang, voice, synth])
+
+  const createUtterance = useCallback((text: string, langOverride?: string): SpeechSynthesisUtterance => {
+    const SpeechSynthesisUtteranceConstructor = (window as Window & typeof globalThis).SpeechSynthesisUtterance
+    const u = new SpeechSynthesisUtteranceConstructor(text) as SpeechSynthesisUtterance
+    const resolvedLang = langOverride || voice?.lang || defaultLang
+    u.lang = resolvedLang
+    if (langOverride) {
+      const match = voices.find(v => v.lang?.toLowerCase().startsWith(langOverride.toLowerCase()))
+      if (match) {
+        u.voice = match
+      } else if (voice) {
+        u.voice = voice
+      }
+    } else if (voice) {
+      u.voice = voice
+    }
+    u.rate = rate
+    u.pitch = pitch
+    u.volume = volume
+
+    const self = u
+
+    u.onstart = () => {
+      if (utteranceRef.current !== self) return
+      setSpeaking(true)
+      setPaused(false)
+    }
+    u.onpause = () => {
+      if (utteranceRef.current !== self) return
+      setPaused(true)
+    }
+    u.onresume = () => {
+      if (utteranceRef.current !== self) return
+      setPaused(false)
+    }
+    u.onend = () => {
+      if (utteranceRef.current !== self) return
+      // Continue with next chunk if available
+      const hasMore = chunkIndexRef.current < (chunksRef.current.length - 1)
+      if (hasMore) {
+        chunkIndexRef.current++
+        charIndexRef.current += self.text.length
+        const nextChunk = chunksRef.current[chunkIndexRef.current]
+        const nextUtterance = createUtterance(nextChunk, langRef.current)
+        utteranceRef.current = nextUtterance
+        synth!.speak(nextUtterance)
+      } else {
+        setSpeaking(false)
+        setPaused(false)
+      }
+    }
+    u.onerror = () => {
+      if (utteranceRef.current !== self) return
+      setSpeaking(false)
+      setPaused(false)
+    }
+    u.onboundary = (ev: SpeechSynthesisEvent) => {
+      if (utteranceRef.current !== self) return
+      if (typeof ev.charIndex === 'number') {
+        const newIndex = globalOffsetRef.current + ev.charIndex
+        if (newIndex > charIndexRef.current) {
+          charIndexRef.current = newIndex
+        }
+      }
+    }
+
+    return u
+  }, [voice, defaultLang, rate, pitch, volume, voices, synth])
+
+  const splitIntoChunks = useCallback((text: string, maxLen = 2400): string[] => {
+    const normalized = text.replace(/\s+/g, ' ').trim()
+    if (normalized.length <= maxLen) return [normalized]
+    const sentences = normalized.split(/(?<=[.!?])\s+/)
+    const chunks: string[] = []
+    let current = ''
+    for (const s of sentences) {
+      if ((current + (current ? ' ' : '') + s).length > maxLen) {
+        if (current) chunks.push(current)
+        if (s.length > maxLen) {
+          // Hard split very long sentence
+          for (let i = 0; i < s.length; i += maxLen) {
+            chunks.push(s.slice(i, i + maxLen))
+          }
+          current = ''
+        } else {
+          current = s
+        }
+      } else {
+        current = current ? `${current} ${s}` : s
+      }
+    }
+    if (current) chunks.push(current)
+    return chunks
+  }, [])
+
+  const startSpeakingChunks = useCallback((text: string) => {
+    chunksRef.current = splitIntoChunks(text)
+    chunkIndexRef.current = 0
+    globalOffsetRef.current = 0
+    const first = chunksRef.current[0] || ''
+    const u = createUtterance(first, langRef.current)
+    utteranceRef.current = u
+    synth!.speak(u)
+  }, [createUtterance, splitIntoChunks, synth])
+
+  const stop = useCallback(() => {
+    if (!supported) return
+    synth!.cancel()
+    setSpeaking(false)
+    setPaused(false)
+    utteranceRef.current = null
+    charIndexRef.current = 0
+    spokenTextRef.current = ''
+    chunksRef.current = []
+    chunkIndexRef.current = 0
+    globalOffsetRef.current = 0
+  }, [supported, synth])
+
+  const speak = useCallback((text: string, langOverride?: string) => {
+    if (!supported || !text?.trim()) return
+    synth!.cancel()
+    spokenTextRef.current = text
+    charIndexRef.current = 0
+    langRef.current = langOverride
+    startSpeakingChunks(text)
+  }, [supported, synth, startSpeakingChunks])
+
+  const pause = useCallback(() => {
+    if (!supported) return
+    if (synth!.speaking && !synth!.paused) {
+      synth!.pause()
+      setPaused(true)
+    }
+  }, [supported, synth])
+
+  const resume = useCallback(() => {
+    if (!supported) return
+    if (synth!.speaking && synth!.paused) {
+      synth!.resume()
+      setPaused(false)
+    }
+  }, [supported, synth])
+
+  // Update rate in real-time: while speaking, restart from last boundary with new rate.
+  useEffect(() => {
+    if (!supported) return
+    if (!utteranceRef.current) return
+
+    if (synth!.speaking && !synth!.paused) {
+      const fullText = spokenTextRef.current
+      const startIndex = Math.max(0, Math.min(charIndexRef.current, fullText.length))
+      const remainingText = fullText.slice(startIndex)
+
+      synth!.cancel()
+      // restart chunked from current global index
+      spokenTextRef.current = remainingText
+      charIndexRef.current = 0
+      // keep current language selection; no change needed here
+      startSpeakingChunks(remainingText)
+      return
+    }
+
+    if (utteranceRef.current) {
+      utteranceRef.current.rate = rate
+    }
+  }, [rate, supported, synth, startSpeakingChunks])
+
+  const updateRate = useCallback((newRate: number) => {
+    setRate(newRate)
+    if (!supported) return
+    if (!utteranceRef.current) return
+
+    if (synth!.speaking && !synth!.paused) {
+      const fullText = spokenTextRef.current
+      const startIndex = Math.max(0, Math.min(charIndexRef.current, fullText.length - 1))
+      const remainingText = fullText.slice(startIndex)
+      synth!.cancel()
+      const u = createUtterance(remainingText)
+      // ensure the new rate is applied immediately on the new utterance
+      u.rate = newRate
+      utteranceRef.current = u
+      synth!.speak(u)
+    } else if (utteranceRef.current) {
+      utteranceRef.current.rate = newRate
+    }
+  }, [supported, synth, createUtterance])
+
+  // stop TTS when unmounting
+  useEffect(() => stop, [stop])
+
+  return useMemo(() => ({
+    supported,
+    speaking,
+    paused,
+    voices,
+    voice,
+    rate,
+    setRate: updateRate,
+    pitch, setPitch,
+    volume, setVolume,
+    setVoice,
+    speak, pause, resume, stop
+  }), [supported, speaking, paused, voices, voice, rate, updateRate, pitch, volume, setVoice, speak, pause, resume, stop])
+}
+

src/main.tsx

@@ -5,14 +5,12 @@ import './styles/tailwind.css'
 import './index.css'
 import 'react-loading-skeleton/dist/skeleton.css'
 
-// Register Service Worker for PWA functionality
-if ('serviceWorker' in navigator) {
+// Register Service Worker for PWA functionality (production only)
+if ('serviceWorker' in navigator && import.meta.env.PROD) {
   window.addEventListener('load', () => {
     navigator.serviceWorker
-      .register('/sw.js', { type: 'module' })
+      .register('/sw.js')
       .then(registration => {
-        console.log('✅ Service Worker registered:', registration.scope)
-        
         // Check for updates periodically
         setInterval(() => {
           registration.update()
@@ -25,9 +23,6 @@ if ('serviceWorker' in navigator) {
             newWorker.addEventListener('statechange', () => {
               if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                 // New service worker available
-                console.log('🔄 New version available! Reload to update.')
-                
-                // Optionally show a toast notification
                 const updateAvailable = new CustomEvent('sw-update-available')
                 window.dispatchEvent(updateAvailable)
               }

src/services/archiveController.ts

@@ -0,0 +1,197 @@
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
+import { NostrEvent } from 'nostr-tools'
+import { queryEvents } from './dataFetch'
+import { KINDS } from '../config/kinds'
+import { ARCHIVE_EMOJI } from './reactionService'
+import { nip19 } from 'nostr-tools'
+
+type MarkedChangeCallback = (markedIds: Set<string>) => void
+
+class ArchiveController {
+  private markedIds: Set<string> = new Set()
+  private lastLoadedPubkey: string | null = null
+  private listeners: MarkedChangeCallback[] = []
+  private generation = 0
+  private timelineSubscription: { unsubscribe: () => void } | null = null
+  private pendingEventIds: Set<string> = new Set()
+
+  onMarked(cb: MarkedChangeCallback): () => void {
+    this.listeners.push(cb)
+    // Emit current state immediately to new subscribers
+    cb(new Set(this.markedIds))
+    return () => {
+      this.listeners = this.listeners.filter(l => l !== cb)
+    }
+  }
+
+  private emit(): void {
+    const snapshot = new Set(this.markedIds)
+    this.listeners.forEach(cb => cb(snapshot))
+  }
+
+  mark(id: string): void {
+    if (!this.markedIds.has(id)) {
+      this.markedIds.add(id)
+      this.emit()
+    }
+  }
+
+  unmark(id: string): void {
+    if (this.markedIds.delete(id)) {
+      this.emit()
+    }
+  }
+
+  isMarked(id: string): boolean {
+    return this.markedIds.has(id)
+  }
+
+  getMarkedIds(): string[] {
+    return Array.from(this.markedIds)
+  }
+
+  isLoadedFor(pubkey: string): boolean {
+    return this.lastLoadedPubkey === pubkey
+  }
+
+  reset(): void {
+    this.generation++
+      if (this.timelineSubscription) {
+        try { this.timelineSubscription.unsubscribe() } catch { /* ignore */ }
+        this.timelineSubscription = null
+      }
+    this.markedIds = new Set()
+    this.pendingEventIds = new Set()
+    this.lastLoadedPubkey = null
+    this.emit()
+  }
+
+  async start(options: {
+    relayPool: RelayPool
+    eventStore: IEventStore
+    pubkey: string
+    force?: boolean
+  }): Promise<void> {
+    const { relayPool, eventStore, pubkey, force = false } = options
+    const startGen = this.generation
+
+    if (!force && this.isLoadedFor(pubkey)) {
+      return
+    }
+
+    // Mark as loaded immediately (fetch runs non-blocking)
+    this.lastLoadedPubkey = pubkey
+
+    // Handlers for streaming queries
+    const handleUrlReaction = (evt: NostrEvent) => {
+      if (evt.content !== ARCHIVE_EMOJI) return
+      const rTag = evt.tags.find(t => t[0] === 'r')?.[1]
+      if (!rTag) return
+      this.markedIds.add(rTag)
+      this.emit()
+    }
+
+    const handleEventReaction = (evt: NostrEvent) => {
+      if (evt.content !== ARCHIVE_EMOJI) return
+      // Direct coordinate tag ('a') - can be mapped immediately
+      const aTag = evt.tags.find(t => t[0] === 'a')?.[1]
+      if (aTag) {
+        try {
+          const [kindStr, pubkey, identifier] = aTag.split(':')
+          const kind = Number(kindStr)
+          if (kind === KINDS.BlogPost && pubkey && identifier) {
+            const naddr = nip19.naddrEncode({ kind, pubkey, identifier })
+            this.markedIds.add(naddr)
+            this.emit()
+            return
+          }
+        } catch { /* ignore malformed a-tag */ }
+      }
+      const eTag = evt.tags.find(t => t[0] === 'e')?.[1]
+      if (!eTag) return
+      this.pendingEventIds.add(eTag)
+    }
+
+    try {
+      // Stream kind:17 and kind:7 in parallel
+      const [kind17, kind7] = await Promise.all([
+        queryEvents(relayPool, { kinds: [17], authors: [pubkey] }, { onEvent: handleUrlReaction }),
+        queryEvents(relayPool, { kinds: [7], authors: [pubkey] }, { onEvent: handleEventReaction })
+      ])
+
+      if (startGen !== this.generation) return
+
+      // Include EOSE events
+      kind17.forEach(handleUrlReaction)
+      kind7.forEach(handleEventReaction)
+
+      if (this.pendingEventIds.size > 0) {
+        // Fetch referenced articles (kind:30023) and map event IDs to naddr
+        const ids = Array.from(this.pendingEventIds)
+        const articleEvents = await queryEvents(relayPool, { kinds: [KINDS.BlogPost], ids })
+        for (const article of articleEvents) {
+          const dTag = article.tags.find(t => t[0] === 'd')?.[1]
+          if (!dTag) continue
+          try {
+            const naddr = nip19.naddrEncode({ kind: KINDS.BlogPost, pubkey: article.pubkey, identifier: dTag })
+            this.markedIds.add(naddr)
+          } catch {
+            // skip invalid
+          }
+        }
+        this.emit()
+      }
+
+      // Try immediate mapping via eventStore for any still-pending e-ids
+      if (this.pendingEventIds.size > 0) {
+        const stillPending = new Set<string>()
+        for (const eId of this.pendingEventIds) {
+          try {
+            const store = eventStore as unknown as { getEvent?: (id: string) => NostrEvent | undefined }
+            const evt: NostrEvent | undefined = typeof store.getEvent === 'function' ? store.getEvent(eId) : undefined
+            if (evt && evt.kind === KINDS.BlogPost) {
+              const dTag = evt.tags.find(t => t[0] === 'd')?.[1]
+              if (dTag) {
+                const naddr = nip19.naddrEncode({ kind: KINDS.BlogPost, pubkey: evt.pubkey, identifier: dTag })
+                this.markedIds.add(naddr)
+              }
+            } else {
+              stillPending.add(eId)
+            }
+          } catch (e) { stillPending.add(eId) }
+        }
+        this.pendingEventIds = stillPending
+        if (stillPending.size > 0) {
+          // Subscribe to future 30023 arrivals to finalize mapping
+          if (this.timelineSubscription) {
+            try { this.timelineSubscription.unsubscribe() } catch { /* ignore */ }
+            this.timelineSubscription = null
+          }
+          const sub$ = eventStore.timeline({ kinds: [KINDS.BlogPost] })
+          const genAtSub = this.generation
+          this.timelineSubscription = sub$.subscribe((events: NostrEvent[]) => {
+            if (genAtSub !== this.generation) return
+            for (const evt of events) {
+              if (!this.pendingEventIds.has(evt.id)) continue
+              const dTag = evt.tags.find(t => t[0] === 'd')?.[1]
+              if (!dTag) continue
+              try {
+                const naddr = nip19.naddrEncode({ kind: KINDS.BlogPost, pubkey: evt.pubkey, identifier: dTag })
+                this.markedIds.add(naddr)
+                this.pendingEventIds.delete(evt.id)
+                this.emit()
+              } catch { /* ignore */ }
+            }
+          })
+        }
+      }
+    } catch (err) {
+      // Non-blocking fetch; ignore errors here
+    }
+  }
+}
+
+export const archiveController = new ArchiveController()
+
+

src/services/articleService.ts

@@ -48,7 +48,6 @@ function getFromCache(naddr: string): ArticleContent | null {
       return null
     }
 
-    console.log('📦 Loaded article from cache:', naddr)
     return content
   } catch {
     return null
@@ -63,7 +62,6 @@ function saveToCache(naddr: string, content: ArticleContent): void {
       timestamp: Date.now()
     }
     localStorage.setItem(cacheKey, JSON.stringify(cached))
-    console.log('💾 Saved article to cache:', naddr)
   } catch (err) {
     console.warn('Failed to cache article:', err)
     // Silently fail if storage is full or unavailable
@@ -99,10 +97,10 @@ export async function fetchArticleByNaddr(
 
     const pointer = decoded.data as AddressPointer
 
-    // Define relays to query - prefer relays from naddr, fallback to configured relays (including local)
-    const baseRelays = pointer.relays && pointer.relays.length > 0 
-      ? pointer.relays 
-      : RELAYS
+    // Define relays to query - use union of relay hints from naddr and configured relays
+    // This avoids failures when naddr contains stale/unreachable relay hints
+    const hintedRelays = (pointer.relays && pointer.relays.length > 0) ? pointer.relays : []
+    const baseRelays = Array.from(new Set<string>([...hintedRelays, ...RELAYS]))
     const orderedRelays = prioritizeLocalRelays(baseRelays)
     const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
 
@@ -116,7 +114,28 @@ export async function fetchArticleByNaddr(
     // Parallel local+remote, stream immediate, collect up to first from each
     const { local$, remote$ } = createParallelReqStreams(relayPool, localRelays, remoteRelays, filter, 1200, 6000)
     const collected = await lastValueFrom(merge(local$.pipe(take(1)), remote$.pipe(take(1))).pipe(rxToArray()))
-    const events = collected as NostrEvent[]
+    let events = collected as NostrEvent[]
+
+    // Fallback: if nothing found, try a second round against a set of reliable public relays
+    if (events.length === 0) {
+      const reliableRelays = Array.from(new Set<string>([
+        'wss://relay.nostr.band',
+        'wss://relay.primal.net',
+        'wss://relay.damus.io',
+        'wss://nos.lol',
+        ...remoteRelays // keep any configured remote relays
+      ]))
+      const { remote$: fallback$ } = createParallelReqStreams(
+        relayPool,
+        [], // no local
+        reliableRelays,
+        filter,
+        1500,
+        12000
+      )
+      const fallbackCollected = await lastValueFrom(fallback$.pipe(take(1), rxToArray()))
+      events = fallbackCollected as NostrEvent[]
+    }
 
     if (events.length === 0) {
       throw new Error('Article not found')

src/services/bookmarkController.ts

@@ -1,12 +1,8 @@
 import { RelayPool } from 'applesauce-relay'
 import { Helpers, EventStore } from 'applesauce-core'
-import { createEventLoader, createAddressLoader } from 'applesauce-loaders/loaders'
 import { NostrEvent } from 'nostr-tools'
-import { EventPointer } from 'nostr-tools/nip19'
-import { merge } from 'rxjs'
 import { queryEvents } from './dataFetch'
 import { KINDS } from '../config/kinds'
-import { RELAYS } from '../config/relays'
 import { collectBookmarksFromEvents } from './bookmarkProcessing'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import {
@@ -64,11 +60,8 @@ class BookmarkController {
   }> = new Map()
   private isLoading = false
   private hydrationGeneration = 0
-  
-  // Event loaders for efficient batching
-  private eventStore = new EventStore()
-  private eventLoader: ReturnType<typeof createEventLoader> | null = null
-  private addressLoader: ReturnType<typeof createAddressLoader> | null = null
+  private externalEventStore: EventStore | null = null
+  private relayPool: RelayPool | null = null
 
   onRawEvent(cb: RawEventCallback): () => void {
     this.rawEventListeners.push(cb)
@@ -117,96 +110,164 @@ class BookmarkController {
   }
 
   /**
-   * Hydrate events by IDs using EventLoader (auto-batching, streaming)
+   * Hydrate events by IDs using queryEvents (local-first, streaming)
    */
-  private hydrateByIds(
+  private async hydrateByIds(
     ids: string[],
     idToEvent: Map<string, NostrEvent>,
     onProgress: () => void,
     generation: number
-  ): void {
-    if (!this.eventLoader) {
-      console.warn('[bookmark] ⚠️ EventLoader not initialized')
+  ): Promise<void> {
+    if (!this.relayPool) {
       return
     }
 
     // Filter to unique IDs not already hydrated
     const unique = Array.from(new Set(ids)).filter(id => !idToEvent.has(id))
     if (unique.length === 0) {
-      console.log('[bookmark] 🔧 All IDs already hydrated, skipping')
       return
     }
-
-    console.log('[bookmark] 🔧 Hydrating', unique.length, 'IDs using EventLoader')
     
-    // Convert IDs to EventPointers
-    const pointers: EventPointer[] = unique.map(id => ({ id }))
-    
-    // Use EventLoader - it auto-batches and streams results
-    merge(...pointers.map(this.eventLoader)).subscribe({
-      next: (event) => {
-        // Check if hydration was cancelled
-        if (this.hydrationGeneration !== generation) return
-        
-        idToEvent.set(event.id, event)
-        
-        // Also index by coordinate for addressable events
-        if (event.kind && event.kind >= 30000 && event.kind < 40000) {
-          const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
-          const coordinate = `${event.kind}:${event.pubkey}:${dTag}`
-          idToEvent.set(coordinate, event)
+    // Fetch events using local-first queryEvents
+    await queryEvents(
+      this.relayPool,
+      { ids: unique },
+      {
+        onEvent: (event) => {
+          // Check if hydration was cancelled
+          if (this.hydrationGeneration !== generation) return
+          
+          idToEvent.set(event.id, event)
+          
+          // Also index by coordinate for addressable events
+          if (event.kind && event.kind >= 30000 && event.kind < 40000) {
+            const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+            const coordinate = `${event.kind}:${event.pubkey}:${dTag}`
+            idToEvent.set(coordinate, event)
+          }
+          
+          // Add to external event store if available
+          if (this.externalEventStore) {
+            this.externalEventStore.add(event)
+          }
+          
+          onProgress()
         }
-        
-        onProgress()
-      },
-      error: (error) => {
-        console.error('[bookmark] ❌ EventLoader error:', error)
       }
-    })
+    )
   }
 
   /**
-   * Hydrate addressable events by coordinates using AddressLoader (auto-batching, streaming)
+   * Hydrate addressable events by coordinates using queryEvents (local-first, streaming)
    */
-  private hydrateByCoordinates(
+  private async hydrateByCoordinates(
     coords: Array<{ kind: number; pubkey: string; identifier: string }>,
     idToEvent: Map<string, NostrEvent>,
     onProgress: () => void,
     generation: number
-  ): void {
-    if (!this.addressLoader) {
-      console.warn('[bookmark] ⚠️ AddressLoader not initialized')
+  ): Promise<void> {
+    if (!this.relayPool) {
       return
     }
 
-    if (coords.length === 0) return
+    if (coords.length === 0) {
+      return
+    }
 
-    console.log('[bookmark] 🔧 Hydrating', coords.length, 'coordinates using AddressLoader')
-
-    // Convert coordinates to AddressPointers
-    const pointers = coords.map(c => ({
-      kind: c.kind,
-      pubkey: c.pubkey,
-      identifier: c.identifier
-    }))
-
-    // Use AddressLoader - it auto-batches and streams results
-    merge(...pointers.map(this.addressLoader)).subscribe({
-      next: (event) => {
-        // Check if hydration was cancelled
-        if (this.hydrationGeneration !== generation) return
-
-        const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
-        const coordinate = `${event.kind}:${event.pubkey}:${dTag}`
-        idToEvent.set(coordinate, event)
-        idToEvent.set(event.id, event)
-        
-        onProgress()
-      },
-      error: (error) => {
-        console.error('[bookmark] ❌ AddressLoader error:', error)
+    // Group by kind and pubkey for efficient batching
+    const filtersByKind = new Map<number, Map<string, string[]>>()
+    
+    for (const coord of coords) {
+      if (!filtersByKind.has(coord.kind)) {
+        filtersByKind.set(coord.kind, new Map())
       }
-    })
+      const byPubkey = filtersByKind.get(coord.kind)!
+      if (!byPubkey.has(coord.pubkey)) {
+        byPubkey.set(coord.pubkey, [])
+      }
+      byPubkey.get(coord.pubkey)!.push(coord.identifier || '')
+    }
+
+    // Kick off all queries in parallel (fire-and-forget)
+    const promises: Promise<void>[] = []
+    
+    for (const [kind, byPubkey] of filtersByKind) {
+      for (const [pubkey, identifiers] of byPubkey) {
+        // Separate empty and non-empty identifiers
+        const nonEmptyIdentifiers = identifiers.filter(id => id && id.length > 0)
+        const hasEmptyIdentifier = identifiers.some(id => !id || id.length === 0)
+        
+        // Fetch events with non-empty d-tags
+        if (nonEmptyIdentifiers.length > 0) {
+          promises.push(
+            queryEvents(
+              this.relayPool,
+              { kinds: [kind], authors: [pubkey], '#d': nonEmptyIdentifiers },
+              {
+                onEvent: (event) => {
+                  // Check if hydration was cancelled
+                  if (this.hydrationGeneration !== generation) return
+
+                  const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+                  const coordinate = `${event.kind}:${event.pubkey}:${dTag}`
+                  idToEvent.set(coordinate, event)
+                  idToEvent.set(event.id, event)
+                  
+                  // Add to external event store if available
+                  if (this.externalEventStore) {
+                    this.externalEventStore.add(event)
+                  }
+                  
+                  onProgress()
+                }
+              }
+            ).then(() => {
+              // Query completed successfully
+            }).catch(() => {
+              // Silent error - individual query failed
+            })
+          )
+        }
+        
+        // Fetch events with empty d-tag separately (without '#d' filter)
+        if (hasEmptyIdentifier) {
+          promises.push(
+            queryEvents(
+              this.relayPool,
+              { kinds: [kind], authors: [pubkey] },
+              {
+                onEvent: (event) => {
+                  // Check if hydration was cancelled
+                  if (this.hydrationGeneration !== generation) return
+                  
+                  // Only process events with empty d-tag
+                  const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+                  if (dTag !== '') return
+
+                  const coordinate = `${event.kind}:${event.pubkey}:`
+                  idToEvent.set(coordinate, event)
+                  idToEvent.set(event.id, event)
+                  
+                  // Add to external event store if available
+                  if (this.externalEventStore) {
+                    this.externalEventStore.add(event)
+                  }
+                  
+                  onProgress()
+                }
+              }
+            ).then(() => {
+              // Query completed successfully
+            }).catch(() => {
+              // Silent error - individual query failed
+            })
+          )
+        }
+      }
+    }
+    
+    // Wait for all queries to complete
+    await Promise.all(promises)
   }
 
   private async buildAndEmitBookmarks(
@@ -223,10 +284,6 @@ class BookmarkController {
       return this.decryptedResults.has(getEventKey(evt))
     })
     
-    const unencryptedCount = allEvents.filter(evt => !hasEncryptedContent(evt)).length
-    const decryptedCount = readyEvents.length - unencryptedCount
-    console.log('[bookmark] 📋 Building bookmarks:', unencryptedCount, 'unencrypted,', decryptedCount, 'decrypted, of', allEvents.length, 'total')
-    
     if (readyEvents.length === 0) {
       this.bookmarksListeners.forEach(cb => cb([]))
       return
@@ -237,17 +294,14 @@ class BookmarkController {
       const unencryptedEvents = readyEvents.filter(evt => !hasEncryptedContent(evt))
       const decryptedEvents = readyEvents.filter(evt => hasEncryptedContent(evt))
       
-      console.log('[bookmark] 🔧 Processing', unencryptedEvents.length, 'unencrypted events')
       // Process unencrypted events
       const { publicItemsAll: publicUnencrypted, privateItemsAll: privateUnencrypted, newestCreatedAt, latestContent, allTags } = 
         await collectBookmarksFromEvents(unencryptedEvents, activeAccount, signerCandidate)
-      console.log('[bookmark] 🔧 Unencrypted returned:', publicUnencrypted.length, 'public,', privateUnencrypted.length, 'private')
       
       // Merge in decrypted results
       let publicItemsAll = [...publicUnencrypted]
       let privateItemsAll = [...privateUnencrypted]
       
-      console.log('[bookmark] 🔧 Merging', decryptedEvents.length, 'decrypted events')
       decryptedEvents.forEach(evt => {
         const eventKey = getEventKey(evt)
         const decrypted = this.decryptedResults.get(eventKey)
@@ -256,52 +310,60 @@ class BookmarkController {
           privateItemsAll = [...privateItemsAll, ...decrypted.privateItems]
         }
       })
-      
-      console.log('[bookmark] 🔧 Total after merge:', publicItemsAll.length, 'public,', privateItemsAll.length, 'private')
 
       const allItems = [...publicItemsAll, ...privateItemsAll]
-      console.log('[bookmark] 🔧 Total items to process:', allItems.length)
+      const deduped = dedupeBookmarksById(allItems)
       
-      // Separate hex IDs from coordinates
+      // Separate hex IDs from coordinates for fetching
       const noteIds: string[] = []
       const coordinates: string[] = []
       
-      allItems.forEach(i => {
-        if (/^[0-9a-f]{64}$/i.test(i.id)) {
-          noteIds.push(i.id)
-        } else if (i.id.includes(':')) {
-          coordinates.push(i.id)
+      // Request hydration for all items that don't have content yet
+      deduped.forEach(i => {
+        // If item has no content, we need to fetch it
+        if (!i.content || i.content.length === 0) {
+          if (/^[0-9a-f]{64}$/i.test(i.id)) {
+            noteIds.push(i.id)
+          } else if (i.id.includes(':')) {
+            coordinates.push(i.id)
+          }
         }
       })
       
       // Helper to build and emit bookmarks
       const emitBookmarks = (idToEvent: Map<string, NostrEvent>) => {
-        console.log('[bookmark] 🔧 Building final bookmarks list...')
-        const allBookmarks = dedupeBookmarksById([
+        // Now hydrate the ORIGINAL items (which may have duplicates), using the deduplicated results
+        // This preserves the original public/private split while still getting all the content
+        const allBookmarks = [
           ...hydrateItems(publicItemsAll, idToEvent),
           ...hydrateItems(privateItemsAll, idToEvent)
-        ])
-        console.log('[bookmark] 🔧 After hydration and dedup:', allBookmarks.length, 'bookmarks')
-
-        console.log('[bookmark] 🔧 Enriching and sorting...')
+        ]
+        
         const enriched = allBookmarks.map(b => ({
           ...b,
           tags: b.tags || [],
-          content: b.content || ''
+          content: b.content || this.externalEventStore?.getEvent(b.id)?.content || '', // Fallback to eventStore content
+          created_at: (b.created_at ?? this.externalEventStore?.getEvent(b.id)?.created_at ?? null)
         }))
         
         const sortedBookmarks = enriched
-          .map(b => ({ ...b, urlReferences: extractUrlsFromContent(b.content) }))
-          .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
-        console.log('[bookmark] 🔧 Sorted:', sortedBookmarks.length, 'bookmarks')
+          .map(b => ({ 
+            ...b, 
+            urlReferences: extractUrlsFromContent(b.content)
+          }))
+          .sort((a, b) => {
+            // Sort by display time: created_at, else listUpdatedAt. Newest first. Nulls last.
+            const aTs = (a.created_at ?? a.listUpdatedAt ?? -Infinity)
+            const bTs = (b.created_at ?? b.listUpdatedAt ?? -Infinity)
+            return bTs - aTs
+          })
 
-        console.log('[bookmark] 🔧 Creating final Bookmark object...')
         const bookmark: Bookmark = {
           id: `${activeAccount.pubkey}-bookmarks`,
           title: `Bookmarks (${sortedBookmarks.length})`,
           url: '',
           content: latestContent,
-          created_at: newestCreatedAt || Math.floor(Date.now() / 1000),
+          created_at: newestCreatedAt || 0,
           tags: allTags,
           bookmarkCount: sortedBookmarks.length,
           eventReferences: allTags.filter((tag: string[]) => tag[0] === 'e').map((tag: string[]) => tag[1]),
@@ -310,18 +372,14 @@ class BookmarkController {
           encryptedContent: undefined
         }
         
-        console.log('[bookmark] 📋 Built bookmark with', sortedBookmarks.length, 'items')
-        console.log('[bookmark] 📤 Emitting to', this.bookmarksListeners.length, 'listeners')
         this.bookmarksListeners.forEach(cb => cb([bookmark]))
       }
 
       // Emit immediately with empty metadata (show placeholders)
       const idToEvent: Map<string, NostrEvent> = new Map()
-      console.log('[bookmark] 🚀 Emitting initial bookmarks with placeholders (IDs only)...')
       emitBookmarks(idToEvent)
 
-      // Now fetch events progressively in background using batched hydrators
-      console.log('[bookmark] 🔧 Background hydration:', noteIds.length, 'note IDs and', coordinates.length, 'coordinates')
+      // Now fetch events progressively in background using local-first queries
       
       const generation = this.hydrationGeneration
       const onProgress = () => emitBookmarks(idToEvent)
@@ -336,14 +394,16 @@ class BookmarkController {
         }
       })
       
-      // Kick off batched hydration (streaming, non-blocking)
-      // EventLoader and AddressLoader handle batching and streaming automatically
-      this.hydrateByIds(noteIds, idToEvent, onProgress, generation)
-      this.hydrateByCoordinates(coordObjs, idToEvent, onProgress, generation)
+      // Kick off hydration (streaming, non-blocking, local-first)
+      // Fire-and-forget - don't await, let it run in background
+      this.hydrateByIds(noteIds, idToEvent, onProgress, generation).catch(() => {
+        // Silent error - hydration will retry or show partial results
+      })
+      this.hydrateByCoordinates(coordObjs, idToEvent, onProgress, generation).catch(() => {
+        // Silent error - hydration will retry or show partial results
+      })
     } catch (error) {
-      console.error('[bookmark] ❌ Failed to build bookmarks:', error)
-      console.error('[bookmark] ❌ Error details:', error instanceof Error ? error.message : String(error))
-      console.error('[bookmark] ❌ Stack:', error instanceof Error ? error.stack : 'no stack')
+      console.error('Failed to build bookmarks:', error)
       this.bookmarksListeners.forEach(cb => cb([]))
     }
   }
@@ -352,11 +412,15 @@ class BookmarkController {
     relayPool: RelayPool
     activeAccount: unknown
     accountManager: { getActive: () => unknown }
+    eventStore?: EventStore
   }): Promise<void> {
-    const { relayPool, activeAccount, accountManager } = options
+    const { relayPool, activeAccount, accountManager, eventStore } = options
+    
+    // Store references for hydration
+    this.relayPool = relayPool
+    this.externalEventStore = eventStore || null
 
     if (!activeAccount || typeof (activeAccount as { pubkey?: string }).pubkey !== 'string') {
-      console.error('[bookmark] Invalid activeAccount')
       return
     }
 
@@ -365,19 +429,7 @@ class BookmarkController {
     // Increment generation to cancel any in-flight hydration
     this.hydrationGeneration++
     
-    // Initialize loaders for this session
-    console.log('[bookmark] 🔧 Initializing EventLoader and AddressLoader with', RELAYS.length, 'relays')
-    this.eventLoader = createEventLoader(relayPool, { 
-      eventStore: this.eventStore,
-      extraRelays: RELAYS 
-    })
-    this.addressLoader = createAddressLoader(relayPool, { 
-      eventStore: this.eventStore,
-      extraRelays: RELAYS
-    })
-    
     this.setLoading(true)
-    console.log('[bookmark] 🔍 Starting bookmark load for', account.pubkey.slice(0, 8))
 
     try {
       // Get signer for auto-decryption
@@ -405,7 +457,6 @@ class BookmarkController {
             
             // Add/update event
             this.currentEvents.set(key, evt)
-            console.log('[bookmark] 📨 Event:', evt.kind, evt.id.slice(0, 8), 'encrypted:', hasEncryptedContent(evt))
             
             // Emit raw event for Debug UI
             this.emitRawEvent(evt)
@@ -415,12 +466,13 @@ class BookmarkController {
             if (!isEncrypted) {
               // For unencrypted events, build bookmarks immediately (progressive update)
               this.buildAndEmitBookmarks(maybeAccount, signerCandidate)
-                .catch(err => console.error('[bookmark] ❌ Failed to update after event:', err))
+                .catch(() => {
+                  // Silent error - will retry on next event
+                })
             }
             
             // Auto-decrypt if event has encrypted content (fire-and-forget, non-blocking)
             if (isEncrypted) {
-              console.log('[bookmark] 🔓 Auto-decrypting event', evt.id.slice(0, 8))
               // Don't await - let it run in background
               collectBookmarksFromEvents([evt], account, signerCandidate)
                 .then(({ publicItemsAll, privateItemsAll, newestCreatedAt, latestContent, allTags }) => {
@@ -433,10 +485,6 @@ class BookmarkController {
                     latestContent,
                     allTags
                   })
-                  console.log('[bookmark] ✅ Auto-decrypted:', evt.id.slice(0, 8), {
-                    public: publicItemsAll.length,
-                    private: privateItemsAll.length
-                  })
                   
                   // Emit decrypt complete for Debug UI
                   this.decryptCompleteListeners.forEach(cb => 
@@ -445,10 +493,12 @@ class BookmarkController {
                   
                   // Rebuild bookmarks with newly decrypted content (progressive update)
                   this.buildAndEmitBookmarks(maybeAccount, signerCandidate)
-                    .catch(err => console.error('[bookmark] ❌ Failed to update after decrypt:', err))
+                    .catch(() => {
+                      // Silent error - will retry on next event
+                    })
                 })
-                .catch((error) => {
-                  console.error('[bookmark] ❌ Auto-decrypt failed:', evt.id.slice(0, 8), error)
+                .catch(() => {
+                  // Silent error - decrypt failed
                 })
             }
           }
@@ -457,9 +507,8 @@ class BookmarkController {
 
       // Final update after EOSE
       await this.buildAndEmitBookmarks(maybeAccount, signerCandidate)
-      console.log('[bookmark] ✅ Bookmark load complete')
     } catch (error) {
-      console.error('[bookmark] ❌ Failed to load bookmarks:', error)
+      console.error('Failed to load bookmarks:', error)
       this.bookmarksListeners.forEach(cb => cb([]))
     } finally {
       this.setLoading(false)

src/services/bookmarkEvents.ts

@@ -15,28 +15,30 @@ export function dedupeNip51Events(events: NostrEvent[]): NostrEvent[] {
   }
   const unique = Array.from(byId.values())
 
-  // Separate web bookmarks (kind:39701) from list-based bookmarks
-  const webBookmarks = unique.filter(e => e.kind === 39701)
-
   const bookmarkLists = unique
     .filter(e => e.kind === 10003 || e.kind === 30003 || e.kind === 30001)
     .sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
   const latestBookmarkList = bookmarkLists.find(list => !list.tags?.some((t: string[]) => t[0] === 'd'))
 
+  // Deduplicate replaceable events (kind:30003, 30001, 39701) by d-tag
   const byD = new Map<string, NostrEvent>()
   for (const e of unique) {
-    if (e.kind === 10003 || e.kind === 30003 || e.kind === 30001) {
+    if (e.kind === 10003 || e.kind === 30003 || e.kind === 30001 || e.kind === 39701) {
       const d = (e.tags || []).find((t: string[]) => t[0] === 'd')?.[1] || ''
       const prev = byD.get(d)
       if (!prev || (e.created_at || 0) > (prev.created_at || 0)) byD.set(d, e)
     }
   }
 
-  const setsAndNamedLists = Array.from(byD.values())
+  // Separate web bookmarks from bookmark sets/lists
+  const allReplaceable = Array.from(byD.values())
+  const webBookmarks = allReplaceable.filter(e => e.kind === 39701)
+  const setsAndNamedLists = allReplaceable.filter(e => e.kind !== 39701)
+  
   const out: NostrEvent[] = []
   if (latestBookmarkList) out.push(latestBookmarkList)
   out.push(...setsAndNamedLists)
-  // Add web bookmarks as individual events
+  // Add deduplicated web bookmarks as individual events
   out.push(...webBookmarks)
   return out
 }

src/services/bookmarkHelpers.ts

@@ -21,12 +21,16 @@ export interface AddressPointer {
   pubkey: string
   identifier: string
   relays?: string[]
+  added_at?: number
+  created_at?: number
 }
 
 export interface EventPointer {
   id: string
   relays?: string[]
   author?: string
+  added_at?: number
+  created_at?: number
 }
 
 export interface ApplesauceBookmarks {
@@ -62,7 +66,8 @@ export { dedupeNip51Events } from './bookmarkEvents'
 export const processApplesauceBookmarks = (
   bookmarks: unknown,
   activeAccount: ActiveAccount,
-  isPrivate: boolean
+  isPrivate: boolean,
+  parentCreatedAt?: number
 ): IndividualBookmark[] => {
   if (!bookmarks) return []
 
@@ -76,14 +81,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: note.id,
           content: '',
-          created_at: Math.floor(Date.now() / 1000),
+          created_at: note.created_at ?? null,
           pubkey: note.author || activeAccount.pubkey,
           kind: 1, // Short note kind
           tags: [],
           parsedContent: undefined,
           type: 'event' as const,
           isPrivate,
-          added_at: Math.floor(Date.now() / 1000)
+          listUpdatedAt: parentCreatedAt || 0
         })
       })
     }
@@ -96,14 +101,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: coordinate,
           content: '',
-          created_at: Math.floor(Date.now() / 1000),
+          created_at: article.created_at ?? null,
           pubkey: article.pubkey,
           kind: article.kind, // Usually 30023 for long-form articles
           tags: [],
           parsedContent: undefined,
           type: 'event' as const,
           isPrivate,
-          added_at: Math.floor(Date.now() / 1000)
+          listUpdatedAt: parentCreatedAt ?? null
         })
       })
     }
@@ -114,14 +119,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: `hashtag-${hashtag}`,
           content: `#${hashtag}`,
-          created_at: Math.floor(Date.now() / 1000),
+          created_at: 0, // Hashtags don't have their own creation time
           pubkey: activeAccount.pubkey,
           kind: 1,
           tags: [['t', hashtag]],
           parsedContent: undefined,
           type: 'event' as const,
           isPrivate,
-          added_at: Math.floor(Date.now() / 1000)
+          listUpdatedAt: parentCreatedAt ?? null
         })
       })
     }
@@ -132,14 +137,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: `url-${url}`,
           content: url,
-          created_at: Math.floor(Date.now() / 1000),
+          created_at: 0, // URLs don't have their own creation time
           pubkey: activeAccount.pubkey,
           kind: 1,
           tags: [['r', url]],
           parsedContent: undefined,
           type: 'event' as const,
           isPrivate,
-          added_at: Math.floor(Date.now() / 1000)
+          listUpdatedAt: parentCreatedAt || 0
         })
       })
     }
@@ -148,20 +153,24 @@ export const processApplesauceBookmarks = (
   }
 
   const bookmarkArray = Array.isArray(bookmarks) ? bookmarks : [bookmarks]
-  return bookmarkArray
+  const processed = bookmarkArray
     .filter((bookmark: BookmarkData) => bookmark.id) // Skip bookmarks without valid IDs
-    .map((bookmark: BookmarkData) => ({
-      id: bookmark.id!,
-      content: bookmark.content || '',
-      created_at: bookmark.created_at || Math.floor(Date.now() / 1000),
-      pubkey: activeAccount.pubkey,
-      kind: bookmark.kind || 30001,
-      tags: bookmark.tags || [],
-      parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
-      type: 'event' as const,
-      isPrivate,
-      added_at: bookmark.created_at || Math.floor(Date.now() / 1000)
-    }))
+    .map((bookmark: BookmarkData) => {
+      return {
+        id: bookmark.id!,
+        content: bookmark.content || '',
+        created_at: bookmark.created_at ?? null,
+        pubkey: activeAccount.pubkey,
+        kind: bookmark.kind || 30001,
+        tags: bookmark.tags || [],
+        parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
+        type: 'event' as const,
+        isPrivate,
+        listUpdatedAt: parentCreatedAt ?? null
+      }
+    })
+  
+  return processed
 }
 
 // Types and guards around signer/decryption APIs
@@ -169,29 +178,38 @@ export function hydrateItems(
   items: IndividualBookmark[],
   idToEvent: Map<string, NostrEvent>
 ): IndividualBookmark[] {
-  return items.map(item => {
-    const ev = idToEvent.get(item.id)
-    if (!ev) return item
-    
-    // For long-form articles (kind:30023), use the article title as content
-    let content = ev.content || item.content || ''
-    if (ev.kind === 30023) {
-      const articleTitle = getArticleTitle(ev)
-      if (articleTitle) {
-        content = articleTitle
+  return items
+    .map(item => {
+      const ev = idToEvent.get(item.id)
+      if (!ev) return item
+      
+      // For long-form articles (kind:30023), use the article title as content
+      let content = ev.content || item.content || ''
+      if (ev.kind === 30023) {
+        const articleTitle = getArticleTitle(ev)
+        if (articleTitle) {
+          content = articleTitle
+        }
       }
-    }
-    
-    return {
-      ...item,
-      pubkey: ev.pubkey || item.pubkey,
-      content,
-      created_at: ev.created_at || item.created_at,
-      kind: ev.kind || item.kind,
-      tags: ev.tags || item.tags,
-      parsedContent: ev.content ? (getParsedContent(content) as ParsedContent) : item.parsedContent
-    }
-  })
+      
+      // Ensure all events with content get parsed content for proper rendering
+      const parsedContent = content ? (getParsedContent(content) as ParsedContent) : undefined
+      
+      return {
+        ...item,
+        pubkey: ev.pubkey || item.pubkey,
+        content,
+        created_at: ev.created_at || item.created_at,
+        kind: ev.kind || item.kind,
+        tags: ev.tags || item.tags,
+        parsedContent: parsedContent || item.parsedContent
+      }
+    })
+    .filter(item => {
+      // Filter out bookmark list events (they're containers, not content)
+      const isBookmarkListEvent = item.kind === 10003 || item.kind === 30003 || item.kind === 30001
+      return !isBookmarkListEvent
+    })
 }
 
 // Note: event decryption/collection lives in `bookmarkProcessing.ts`

src/services/bookmarkProcessing.ts

@@ -30,8 +30,8 @@ async function decryptEvent(
       } catch {
         try {
           await Helpers.unlockHiddenTags(evt, signerCandidate as HiddenContentSigner, 'nip44' as UnlockMode)
-        } catch (err) {
-          console.log("[bunker] ❌ nip44.decrypt failed:", err instanceof Error ? err.message : String(err))
+        } catch (_err) {
+          // Ignore unlock errors
         }
       }
     } else if (evt.content && evt.content.length > 0) {
@@ -45,8 +45,8 @@ async function decryptEvent(
       if (looksLikeNip44 && hasNip44Decrypt(signerCandidate)) {
         try {
           decryptedContent = await (signerCandidate as { nip44: { decrypt: DecryptFn } }).nip44.decrypt(evt.pubkey, evt.content)
-        } catch (err) {
-          console.log("[bunker] ❌ nip44.decrypt failed:", err instanceof Error ? err.message : String(err))
+        } catch (_err) {
+          // Ignore NIP-44 decryption errors
         }
       }
 
@@ -54,8 +54,8 @@ async function decryptEvent(
       if (!decryptedContent && hasNip04Decrypt(signerCandidate)) {
         try {
           decryptedContent = await (signerCandidate as { nip04: { decrypt: DecryptFn } }).nip04.decrypt(evt.pubkey, evt.content)
-        } catch (err) {
-          console.log("[bunker] ❌ nip04.decrypt failed:", err instanceof Error ? err.message : String(err))
+        } catch (_err) {
+          // Ignore NIP-04 decryption errors
         }
       }
 
@@ -64,7 +64,7 @@ async function decryptEvent(
           const hiddenTags = JSON.parse(decryptedContent) as string[][]
           const manualPrivate = Helpers.parseBookmarkTags(hiddenTags)
           privateItems.push(
-            ...processApplesauceBookmarks(manualPrivate, activeAccount, true).map(i => ({
+            ...processApplesauceBookmarks(manualPrivate, activeAccount, true, evt.created_at).map(i => ({
               ...i,
               sourceKind: evt.kind,
               setName: dTag,
@@ -84,7 +84,7 @@ async function decryptEvent(
     const priv = Helpers.getHiddenBookmarks(evt)
     if (priv) {
       privateItems.push(
-        ...processApplesauceBookmarks(priv, activeAccount, true).map(i => ({
+        ...processApplesauceBookmarks(priv, activeAccount, true, evt.created_at).map(i => ({
           ...i,
           sourceKind: evt.kind,
           setName: dTag,
@@ -133,29 +133,36 @@ export async function collectBookmarksFromEvents(
 
     // Handle web bookmarks (kind:39701) as individual bookmarks
     if (evt.kind === 39701) {
+      // Use coordinate format for web bookmarks to enable proper deduplication
+      // Web bookmarks are replaceable events (kind:39701:pubkey:d-tag)
+      const webBookmarkId = dTag ? `${evt.kind}:${evt.pubkey}:${dTag}` : evt.id
+      
       publicItemsAll.push({
-        id: evt.id,
+        id: webBookmarkId,
         content: evt.content || '',
-        created_at: evt.created_at || Math.floor(Date.now() / 1000),
+        created_at: evt.created_at ?? null,
         pubkey: evt.pubkey,
         kind: evt.kind,
         tags: evt.tags || [],
         parsedContent: undefined,
         type: 'web' as const,
         isPrivate: false,
-        added_at: evt.created_at || Math.floor(Date.now() / 1000),
         sourceKind: 39701,
         setName: dTag,
         setTitle,
         setDescription,
-        setImage
+        setImage,
+        listUpdatedAt: evt.created_at ?? null
       })
       continue
     }
 
     const pub = Helpers.getPublicBookmarks(evt)
+    const processedPub = processApplesauceBookmarks(pub, activeAccount, false, evt.created_at)
+    
+    
     publicItemsAll.push(
-      ...processApplesauceBookmarks(pub, activeAccount, false).map(i => ({
+      ...processedPub.map(i => ({
         ...i,
         sourceKind: evt.kind,
         setName: dTag,
@@ -181,7 +188,7 @@ export async function collectBookmarksFromEvents(
       const priv = Helpers.getHiddenBookmarks(evt)
       if (priv) {
         publicItemsAll.push(
-          ...processApplesauceBookmarks(priv, activeAccount, true).map(i => ({
+          ...processApplesauceBookmarks(priv, activeAccount, true, evt.created_at).map(i => ({
             ...i,
             sourceKind: evt.kind,
             setName: dTag,

src/services/contactService.ts

@@ -15,7 +15,6 @@ export const fetchContacts = async (
 ): Promise<Set<string>> => {
   try {
     const relayUrls = prioritizeLocalRelays(Array.from(relayPool.relays.values()).map(relay => relay.url))
-    console.log('🔍 Fetching contacts (kind 3) for user:', pubkey)
 
     const partialFollowed = new Set<string>()
     const events = await queryEvents(
@@ -51,9 +50,7 @@ export const fetchContacts = async (
     }
     // merged already via streams
     
-    console.log('📊 Contact events fetched:', events.length)
     
-    console.log('👥 Followed contacts:', followed.size)
     return followed
   } catch (error) {
     console.error('Failed to fetch contacts:', error)

src/services/contactsController.ts

@@ -73,13 +73,11 @@ class ContactsController {
 
     // Skip if already loaded for this pubkey (unless forced)
     if (!force && this.isLoadedFor(pubkey)) {
-      console.log('[contacts] ✅ Already loaded for', pubkey.slice(0, 8))
       this.emitContacts(this.currentContacts)
       return
     }
 
     this.setLoading(true)
-    console.log('[contacts] 🔍 Loading contacts for', pubkey.slice(0, 8))
 
     try {
       const contacts = await fetchContacts(
@@ -89,7 +87,6 @@ class ContactsController {
           // Stream partial updates
           this.currentContacts = new Set(partial)
           this.emitContacts(this.currentContacts)
-          console.log('[contacts] 📥 Partial contacts:', partial.size)
         }
       )
 
@@ -98,7 +95,6 @@ class ContactsController {
       this.lastLoadedPubkey = pubkey
       this.emitContacts(this.currentContacts)
       
-      console.log('[contacts] ✅ Loaded', contacts.size, 'contacts')
     } catch (error) {
       console.error('[contacts] ❌ Failed to load contacts:', error)
       this.currentContacts.clear()

src/services/deletionService.ts

@@ -36,12 +36,10 @@ export async function createDeletionRequest(
 
   const signed = await factory.sign(draft)
 
-  console.log('🗑️ Created kind:5 deletion request for event:', eventId.slice(0, 8))
 
   // Publish to relays
   await relayPool.publish(RELAYS, signed)
 
-  console.log('✅ Deletion request published to', RELAYS.length, 'relay(s)')
 
   return signed
 }

src/services/eventManager.ts

@@ -0,0 +1,162 @@
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
+import { createEventLoader } from 'applesauce-loaders/loaders'
+import { NostrEvent } from 'nostr-tools'
+
+type PendingRequest = {
+  resolve: (event: NostrEvent) => void
+  reject: (error: Error) => void
+}
+
+/**
+ * Centralized event manager for event fetching and caching
+ * Handles deduplication of concurrent requests and coordinate with relay pool
+ */
+class EventManager {
+  private eventStore: IEventStore | null = null
+  private relayPool: RelayPool | null = null
+  private eventLoader: ReturnType<typeof createEventLoader> | null = null
+  
+  // Track pending requests to deduplicate and resolve all at once
+  private pendingRequests = new Map<string, PendingRequest[]>()
+  
+  // Safety timeout for event fetches (ms)
+  private fetchTimeoutMs = 12000
+  // Retry policy
+  private maxAttempts = 4
+  private baseBackoffMs = 700
+  
+  /**
+   * Initialize the event manager with event store and relay pool
+   */
+  setServices(eventStore: IEventStore | null, relayPool: RelayPool | null): void {
+    this.eventStore = eventStore
+    this.relayPool = relayPool
+    
+    // Recreate loader when services change
+    if (relayPool) {
+      this.eventLoader = createEventLoader(relayPool, {
+        eventStore: eventStore || undefined
+      })
+      
+      // Retry any pending requests now that we have a loader
+      this.retryAllPending()
+    }
+  }
+  
+  /**
+   * Get cached event from event store
+   */
+  getCachedEvent(eventId: string): NostrEvent | null {
+    if (!this.eventStore) return null
+    return this.eventStore.getEvent(eventId) || null
+  }
+  
+  /**
+   * Fetch an event by ID, returning a promise
+   * Automatically deduplicates concurrent requests for the same event
+   */
+  fetchEvent(eventId: string): Promise<NostrEvent> {
+    // Check cache first
+    const cached = this.getCachedEvent(eventId)
+    if (cached) {
+      return Promise.resolve(cached)
+    }
+    
+    return new Promise<NostrEvent>((resolve, reject) => {
+      // Check if we're already fetching this event
+      if (this.pendingRequests.has(eventId)) {
+        // Add to existing request queue
+        this.pendingRequests.get(eventId)!.push({ resolve, reject })
+        return
+      }
+      
+      // Start a new fetch request
+      this.pendingRequests.set(eventId, [{ resolve, reject }])
+      this.fetchFromRelayWithRetry(eventId, 1)
+    })
+  }
+  
+  private resolvePending(eventId: string, event: NostrEvent): void {
+    const requests = this.pendingRequests.get(eventId) || []
+    this.pendingRequests.delete(eventId)
+    requests.forEach(req => req.resolve(event))
+  }
+  
+  private rejectPending(eventId: string, error: Error): void {
+    const requests = this.pendingRequests.get(eventId) || []
+    this.pendingRequests.delete(eventId)
+    requests.forEach(req => req.reject(error))
+  }
+  
+  private fetchFromRelayWithRetry(eventId: string, attempt: number): void {
+    // If no loader yet, schedule retry
+    if (!this.relayPool || !this.eventLoader) {
+      setTimeout(() => {
+        if (this.pendingRequests.has(eventId)) {
+          this.fetchFromRelayWithRetry(eventId, attempt)
+        }
+      }, this.baseBackoffMs)
+      return
+    }
+    
+    let delivered = false
+    const subscription = this.eventLoader({ id: eventId }).subscribe({
+      next: (event: NostrEvent) => {
+        delivered = true
+        clearTimeout(timeoutId)
+        this.resolvePending(eventId, event)
+        subscription.unsubscribe()
+      },
+      error: (err: unknown) => {
+        clearTimeout(timeoutId)
+        const error = err instanceof Error ? err : new Error(String(err))
+        // Retry on error until attempts exhausted
+        if (attempt < this.maxAttempts && this.pendingRequests.has(eventId)) {
+          setTimeout(() => this.fetchFromRelayWithRetry(eventId, attempt + 1), this.baseBackoffMs * attempt)
+        } else {
+          this.rejectPending(eventId, error)
+        }
+        subscription.unsubscribe()
+      },
+      complete: () => {
+        // Completed without next - consider not found, but retry a few times
+        if (!delivered) {
+          clearTimeout(timeoutId)
+          if (attempt < this.maxAttempts && this.pendingRequests.has(eventId)) {
+            setTimeout(() => this.fetchFromRelayWithRetry(eventId, attempt + 1), this.baseBackoffMs * attempt)
+          } else {
+            this.rejectPending(eventId, new Error('Event not found'))
+          }
+        }
+        subscription.unsubscribe()
+      }
+    })
+    
+    // Safety timeout
+    const timeoutId = setTimeout(() => {
+      if (!delivered) {
+        if (attempt < this.maxAttempts && this.pendingRequests.has(eventId)) {
+          subscription.unsubscribe()
+          this.fetchFromRelayWithRetry(eventId, attempt + 1)
+        } else {
+          subscription.unsubscribe()
+          this.rejectPending(eventId, new Error('Timed out fetching event'))
+        }
+      }
+    }, this.fetchTimeoutMs)
+  }
+  
+  /**
+   * Retry all pending requests after relay pool becomes available
+   */
+  private retryAllPending(): void {
+    const pendingIds = Array.from(this.pendingRequests.keys())
+    pendingIds.forEach(eventId => {
+      this.fetchFromRelayWithRetry(eventId, 1)
+    })
+  }
+}
+
+// Singleton instance
+export const eventManager = new EventManager()

src/services/exploreService.ts

@@ -1,6 +1,6 @@
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
-import { Helpers } from 'applesauce-core'
+import { Helpers, IEventStore } from 'applesauce-core'
 import { queryEvents } from './dataFetch'
 import { KINDS } from '../config/kinds'
 
@@ -20,32 +20,44 @@ export interface BlogPostPreview {
  * @param relayPool - The relay pool to query
  * @param pubkeys - Array of pubkeys to fetch posts from
  * @param relayUrls - Array of relay URLs to query
+ * @param onPost - Optional callback for streaming posts
+ * @param limit - Limit for number of events to fetch (default: 100, pass null for no limit)
+ * @param eventStore - Optional event store to persist fetched events
  * @returns Array of blog post previews
  */
 export const fetchBlogPostsFromAuthors = async (
   relayPool: RelayPool,
   pubkeys: string[],
   relayUrls: string[],
-  onPost?: (post: BlogPostPreview) => void
+  onPost?: (post: BlogPostPreview) => void,
+  limit: number | null = 100,
+  eventStore?: IEventStore
 ): Promise<BlogPostPreview[]> => {
   try {
     if (pubkeys.length === 0) {
-      console.log('⚠️ No pubkeys to fetch blog posts from')
       return []
     }
 
-    console.log('📚 Fetching blog posts (kind 30023) from', pubkeys.length, 'authors')
 
     // Deduplicate replaceable events by keeping the most recent version
     // Group by author + d-tag identifier
     const uniqueEvents = new Map<string, NostrEvent>()
 
-    await queryEvents(
+    const filter = limit !== null
+      ? { kinds: [KINDS.BlogPost], authors: pubkeys, limit }
+      : { kinds: [KINDS.BlogPost], authors: pubkeys }
+
+    const events = await queryEvents(
       relayPool,
-      { kinds: [KINDS.BlogPost], authors: pubkeys, limit: 100 },
+      filter,
       {
         relayUrls,
         onEvent: (event: NostrEvent) => {
+          // Store in event store immediately if provided
+          if (eventStore) {
+            eventStore.add(event)
+          }
+
           const dTag = event.tags.find(t => t[0] === 'd')?.[1] || ''
           const key = `${event.pubkey}:${dTag}`
           const existing = uniqueEvents.get(key)
@@ -68,7 +80,10 @@ export const fetchBlogPostsFromAuthors = async (
       }
     )
 
-    console.log('📊 Blog post events fetched (unique):', uniqueEvents.size)
+    // Store all events in event store if provided (safety net for any missed during streaming)
+    if (eventStore) {
+      events.forEach(evt => eventStore.add(evt))
+    }
     
     // Convert to blog post previews and sort by published date (most recent first)
     const blogPosts: BlogPostPreview[] = Array.from(uniqueEvents.values())
@@ -90,7 +105,6 @@ export const fetchBlogPostsFromAuthors = async (
         return timeB - timeA // Most recent first
       })
     
-    console.log('📰 Processed', blogPosts.length, 'unique blog posts')
     
     return blogPosts
   } catch (error) {

src/services/highlightCreationService.ts

@@ -46,7 +46,6 @@ export async function createHighlight(
   }
 
   // Create EventFactory with the account as signer
-  console.log("[bunker] Creating EventFactory with signer:", { signerType: account.signer?.constructor?.name })
   const factory = new EventFactory({ signer: account.signer })
 
   let blueprintSource: NostrEvent | AddressPointer | string
@@ -117,9 +116,7 @@ export async function createHighlight(
   }
 
   // Sign the event
-  console.log('[bunker] Signing highlight event...', { kind: highlightEvent.kind, tags: highlightEvent.tags.length })
   const signedEvent = await factory.sign(highlightEvent)
-  console.log('[bunker] ✅ Highlight signed successfully!', { id: signedEvent.id.slice(0, 8) })
 
   // Use unified write service to store and publish
   await publishEvent(relayPool, eventStore, signedEvent)

src/services/highlights/fetchByAuthor.ts

@@ -22,7 +22,6 @@ export const fetchHighlights = async (
     const cacheKey = highlightCache.authorKey(pubkey)
     const cached = highlightCache.get(cacheKey)
     if (cached) {
-      console.log(`📌 Using cached highlights for author (${cached.length} items)`)
       // Stream cached highlights if callback provided
       if (onHighlight) {
         cached.forEach(h => onHighlight(h))
@@ -50,7 +49,6 @@ export const fetchHighlights = async (
       }
     )
 
-    console.log(`📌 Fetched ${rawEvents.length} highlight events for author:`, pubkey.slice(0, 8))
 
     // Store all events in event store if provided
     if (eventStore) {

src/services/highlights/fetchForArticle.ts

@@ -23,7 +23,6 @@ export const fetchHighlightsForArticle = async (
     const cacheKey = highlightCache.articleKey(articleCoordinate)
     const cached = highlightCache.get(cacheKey)
     if (cached) {
-      console.log(`📌 Using cached highlights for article (${cached.length} items)`)
       // Stream cached highlights if callback provided
       if (onHighlight) {
         cached.forEach(h => onHighlight(h))
@@ -54,7 +53,6 @@ export const fetchHighlightsForArticle = async (
     ])
 
     const rawEvents = [...aTagEvents, ...eTagEvents]
-    console.log(`📌 Fetched ${rawEvents.length} highlight events for article:`, articleCoordinate)
 
     // Store all events in event store if provided
     if (eventStore) {

src/services/highlights/fetchForUrl.ts

@@ -22,7 +22,6 @@ export const fetchHighlightsForUrl = async (
     const cacheKey = highlightCache.urlKey(url)
     const cached = highlightCache.get(cacheKey)
     if (cached) {
-      console.log(`📌 Using cached highlights for URL (${cached.length} items)`)
       // Stream cached highlights if callback provided
       if (onHighlight) {
         cached.forEach(h => onHighlight(h))
@@ -50,7 +49,6 @@ export const fetchHighlightsForUrl = async (
       }
     )
 
-    console.log(`📌 Fetched ${rawEvents.length} highlight events for URL:`, url)
 
     // Store all events in event store if provided
     if (eventStore) {

src/services/highlights/fetchFromAuthors.ts

@@ -21,11 +21,9 @@ export const fetchHighlightsFromAuthors = async (
 ): Promise<Highlight[]> => {
   try {
     if (pubkeys.length === 0) {
-      console.log('⚠️ No pubkeys to fetch highlights from')
       return []
     }
 
-    console.log('💡 Fetching highlights (kind 9802) from', pubkeys.length, 'authors')
 
     const seenIds = new Set<string>()
     const rawEvents = await queryEvents(
@@ -55,7 +53,6 @@ export const fetchHighlightsFromAuthors = async (
     const uniqueEvents = dedupeHighlights(rawEvents)
     const highlights = uniqueEvents.map(eventToHighlight)
     
-    console.log('💡 Processed', highlights.length, 'unique highlights')
     
     return sortHighlights(highlights)
   } catch (error) {

src/services/highlightsController.ts

@@ -110,7 +110,6 @@ class HighlightsController {
 
     // Skip if already loaded for this pubkey (unless forced)
     if (!force && this.isLoadedFor(pubkey)) {
-      console.log('[highlights] ✅ Already loaded for', pubkey.slice(0, 8))
       this.emitHighlights(this.currentHighlights)
       return
     }
@@ -120,7 +119,6 @@ class HighlightsController {
     const currentGeneration = this.generation
 
     this.setLoading(true)
-    console.log('[highlights] 🔍 Loading highlights for', pubkey.slice(0, 8))
 
     try {
       const seenIds = new Set<string>()
@@ -134,7 +132,6 @@ class HighlightsController {
       }
       if (lastSyncedAt) {
         filter.since = lastSyncedAt
-        console.log('[highlights] 📅 Incremental sync since', new Date(lastSyncedAt * 1000).toISOString())
       }
 
       const events = await queryEvents(
@@ -165,7 +162,6 @@ class HighlightsController {
 
       // Check if still active after async operation
       if (currentGeneration !== this.generation) {
-        console.log('[highlights] ⚠️ Load cancelled (generation mismatch)')
         return
       }
 
@@ -189,7 +185,6 @@ class HighlightsController {
         this.setLastSyncedAt(pubkey, newestTimestamp)
       }
 
-      console.log('[highlights] ✅ Loaded', sorted.length, 'highlights')
     } catch (error) {
       console.error('[highlights] ❌ Failed to load highlights:', error)
       this.currentHighlights = []

src/services/imageCacheService.ts

@@ -13,7 +13,6 @@ const CACHE_NAME = 'boris-image-cache-v1'
 export async function clearImageCache(): Promise<void> {
   try {
     await caches.delete(CACHE_NAME)
-    console.log('🗑️ Cleared all cached images')
   } catch (err) {
     console.error('Failed to clear image cache:', err)
   }

src/services/libraryService.ts

@@ -1,9 +1,8 @@
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
-import { RELAYS } from '../config/relays'
 import { KINDS } from '../config/kinds'
-import { MARK_AS_READ_EMOJI } from './reactionService'
+import { ARCHIVE_EMOJI } from './reactionService'
 import { BlogPostPreview } from './exploreService'
 import { queryEvents } from './dataFetch'
 
@@ -30,15 +29,15 @@ export async function fetchReadArticles(
   try {
     // Fetch kind:7 and kind:17 reactions in parallel
     const [kind7Events, kind17Events] = await Promise.all([
-      queryEvents(relayPool, { kinds: [KINDS.ReactionToEvent], authors: [userPubkey] }, { relayUrls: RELAYS }),
-      queryEvents(relayPool, { kinds: [KINDS.ReactionToUrl], authors: [userPubkey] }, { relayUrls: RELAYS })
+      queryEvents(relayPool, { kinds: [KINDS.ReactionToEvent], authors: [userPubkey] }),
+      queryEvents(relayPool, { kinds: [KINDS.ReactionToUrl], authors: [userPubkey] })
     ])
 
     const readArticles: ReadArticle[] = []
 
     // Process kind:7 reactions (nostr-native articles)
     for (const event of kind7Events) {
-      if (event.content === MARK_AS_READ_EMOJI) {
+      if (event.content === ARCHIVE_EMOJI) {
         const eTag = event.tags.find((t) => t[0] === 'e')
         const pTag = event.tags.find((t) => t[0] === 'p')
         const kTag = event.tags.find((t) => t[0] === 'k')
@@ -58,7 +57,7 @@ export async function fetchReadArticles(
 
     // Process kind:17 reactions (external URLs)
     for (const event of kind17Events) {
-      if (event.content === MARK_AS_READ_EMOJI) {
+      if (event.content === ARCHIVE_EMOJI) {
         const rTag = event.tags.find((t) => t[0] === 'r')
 
         if (rTag && rTag[1]) {
@@ -115,8 +114,7 @@ export async function fetchReadArticlesWithData(
     
     const articleEvents = await queryEvents(
       relayPool,
-      { kinds: [KINDS.BlogPost], ids: eventIds },
-      { relayUrls: RELAYS }
+      { kinds: [KINDS.BlogPost], ids: eventIds }
     )
 
     // Deduplicate article events by ID

src/services/linksService.ts

@@ -4,12 +4,12 @@ import { queryEvents } from './dataFetch'
 import { RELAYS } from '../config/relays'
 import { KINDS } from '../config/kinds'
 import { ReadItem } from './readsService'
-import { processReadingPositions, processMarkedAsRead, filterValidItems, sortByReadingActivity } from './readingDataProcessor'
+import { processReadingProgress, processMarkedAsRead, filterValidItems, sortByReadingActivity } from './readingDataProcessor'
 import { mergeReadItem } from '../utils/readItemMerge'
 
 /**
  * Fetches external URL links with reading progress from:
- * - URLs with reading progress (kind:30078)
+ * - URLs with reading progress (kind:39802)
  * - Manually marked as read URLs (kind:7, kind:17)
  */
 export async function fetchLinks(
@@ -17,7 +17,6 @@ export async function fetchLinks(
   userPubkey: string,
   onItem?: (item: ReadItem) => void
 ): Promise<ReadItem[]> {
-  console.log('🔗 [Links] Fetching external links for user:', userPubkey.slice(0, 8))
   
   const linksMap = new Map<string, ReadItem>()
   
@@ -32,18 +31,13 @@ export async function fetchLinks(
   
   try {
     // Fetch all data sources in parallel
-    const [readingPositionEvents, markedAsReadArticles] = await Promise.all([
-      queryEvents(relayPool, { kinds: [KINDS.AppData], authors: [userPubkey] }, { relayUrls: RELAYS }),
+    const [progressEvents, markedAsReadArticles] = await Promise.all([
+      queryEvents(relayPool, { kinds: [KINDS.ReadingProgress], authors: [userPubkey] }, { relayUrls: RELAYS }),
       fetchReadArticles(relayPool, userPubkey)
     ])
 
-    console.log('📊 [Links] Data fetched:', {
-      readingPositions: readingPositionEvents.length,
-      markedAsRead: markedAsReadArticles.length
-    })
-
-    // Process reading positions and emit external items
-    processReadingPositions(readingPositionEvents, linksMap)
+    // Process reading progress events (kind 39802)
+    processReadingProgress(progressEvents, linksMap)
     if (onItem) {
       linksMap.forEach(item => {
         if (item.type === 'external') {
@@ -79,7 +73,6 @@ export async function fetchLinks(
     const validLinks = filterValidItems(links)
     const sortedLinks = sortByReadingActivity(validLinks)
 
-    console.log('✅ [Links] Processed', sortedLinks.length, 'total links')
     return sortedLinks
 
   } catch (error) {

src/services/nostrverseService.ts

@@ -24,7 +24,6 @@ export const fetchNostrverseBlogPosts = async (
   onPost?: (post: BlogPostPreview) => void
 ): Promise<BlogPostPreview[]> => {
   try {
-    console.log('[NOSTRVERSE] 📚 Fetching blog posts (kind 30023), limit:', limit)
 
     // Deduplicate replaceable events by keeping the most recent version
     const uniqueEvents = new Map<string, NostrEvent>()
@@ -63,7 +62,6 @@ export const fetchNostrverseBlogPosts = async (
       }
     )
 
-    console.log('[NOSTRVERSE] 📊 Blog post events fetched (unique):', uniqueEvents.size)
     
     // Convert to blog post previews and sort by published date (most recent first)
     const blogPosts: BlogPostPreview[] = Array.from(uniqueEvents.values())
@@ -81,7 +79,6 @@ export const fetchNostrverseBlogPosts = async (
         return timeB - timeA // Most recent first
       })
     
-    console.log('[NOSTRVERSE] 📰 Processed', blogPosts.length, 'unique blog posts')
     
     return blogPosts
   } catch (error) {
@@ -103,7 +100,6 @@ export const fetchNostrverseHighlights = async (
   eventStore?: IEventStore
 ): Promise<Highlight[]> => {
   try {
-    console.log('[NOSTRVERSE] 💡 Fetching highlights (kind 9802), limit:', limit)
 
     const seenIds = new Set<string>()
     // Collect but do not block callers awaiting network completion
@@ -133,7 +129,6 @@ export const fetchNostrverseHighlights = async (
     const uniqueEvents = dedupeHighlights([...collected, ...rawEvents])
     const highlights = uniqueEvents.map(eventToHighlight)
     
-    console.log('[NOSTRVERSE] 💡 Processed', highlights.length, 'unique highlights')
     
     return sortHighlights(highlights)
   } catch (error) {

src/services/offlineSyncService.ts

@@ -20,7 +20,6 @@ const syncStateListeners: Array<(eventId: string, isSyncing: boolean) => void> =
  */
 export function markEventAsOfflineCreated(eventId: string): void {
   offlineCreatedEvents.add(eventId)
-  console.log(`📝 Marked event ${eventId.slice(0, 8)} as offline-created. Total: ${offlineCreatedEvents.size}`)
 }
 
 /**
@@ -57,49 +56,35 @@ export async function syncLocalEventsToRemote(
   eventStore: IEventStore
 ): Promise<void> {
   if (isSyncing) {
-    console.log('⏳ Sync already in progress, skipping...')
     return
   }
 
-  console.log('🔄 Coming back online - syncing local events to remote relays...')
-  console.log(`📦 Offline events tracked: ${offlineCreatedEvents.size}`)
   isSyncing = true
 
   try {
     const remoteRelays = RELAYS.filter(url => !isLocalRelay(url))
 
-    console.log(`📡 Remote relays: ${remoteRelays.length}`)
-    
     if (remoteRelays.length === 0) {
-      console.log('⚠️ No remote relays available for sync')
       isSyncing = false
       return
     }
 
     if (offlineCreatedEvents.size === 0) {
-      console.log('✅ No offline events to sync')
       isSyncing = false
       return
     }
 
     // Get events from EventStore using the tracked IDs
     const eventsToSync: NostrEvent[] = []
-    console.log(`🔍 Querying EventStore for ${offlineCreatedEvents.size} offline events...`)
 
     for (const eventId of offlineCreatedEvents) {
       const event = eventStore.getEvent(eventId)
       if (event) {
-        console.log(`📥 Found event ${eventId.slice(0, 8)} (kind ${event.kind}) in EventStore`)
         eventsToSync.push(event)
-      } else {
-        console.warn(`⚠️ Event ${eventId.slice(0, 8)} not found in EventStore`)
       }
     }
 
-    console.log(`📊 Total events to sync: ${eventsToSync.length}`)
-
     if (eventsToSync.length === 0) {
-      console.log('✅ No events found in EventStore to sync')
       isSyncing = false
       offlineCreatedEvents.clear()
       return
@@ -110,8 +95,6 @@ export async function syncLocalEventsToRemote(
       new Map(eventsToSync.map(e => [e.id, e])).values()
     )
 
-    console.log(`📤 Syncing ${uniqueEvents.length} event(s) to remote relays...`)
-
     // Mark all events as syncing
     uniqueEvents.forEach(event => {
       syncingEvents.add(event.id)
@@ -119,21 +102,16 @@ export async function syncLocalEventsToRemote(
     })
 
     // Publish to remote relays
-    let successCount = 0
     const successfulIds: string[] = []
     
     for (const event of uniqueEvents) {
       try {
         await relayPool.publish(remoteRelays, event)
-        successCount++
         successfulIds.push(event.id)
-        console.log(`✅ Synced event ${event.id.slice(0, 8)}`)
       } catch (error) {
-        console.warn(`⚠️ Failed to sync event ${event.id.slice(0, 8)}:`, error)
+        // Silently fail for individual events
       }
     }
-
-    console.log(`✅ Synced ${successCount}/${uniqueEvents.length} events to remote relays`)
     
     // Clear syncing state and offline tracking for successful events
     successfulIds.forEach(eventId => {
@@ -150,7 +128,7 @@ export async function syncLocalEventsToRemote(
       }
     })
   } catch (error) {
-    console.error('❌ Error during offline sync:', error)
+    // Silently fail
   } finally {
     isSyncing = false
   }

src/services/profileService.ts

@@ -22,7 +22,6 @@ export const fetchProfiles = async (
     }
 
     const uniquePubkeys = Array.from(new Set(pubkeys))
-    console.log('👤 Fetching profiles (kind:0) for', uniquePubkeys.length, 'authors')
 
     const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
     const prioritized = prioritizeLocalRelays(relayUrls)
@@ -65,7 +64,6 @@ export const fetchProfiles = async (
     await lastValueFrom(merge(local$, remote$).pipe(toArray()))
 
     const profiles = Array.from(profilesByPubkey.values())
-    console.log('✅ Fetched', profiles.length, 'unique profiles')
 
     // Rebroadcast profiles to local/all relays based on settings
     if (profiles.length > 0) {

src/services/reactionService.ts

@@ -1,13 +1,13 @@
-import { EventFactory } from 'applesauce-factory'
 import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
 import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
-import { RELAYS } from '../config/relays'
+import { EventFactory } from 'applesauce-factory'
+import { getActiveRelayUrls } from './relayManager'
 
-const MARK_AS_READ_EMOJI = '📚'
+const ARCHIVE_EMOJI = '📚'
 
-export { MARK_AS_READ_EMOJI }
+export { ARCHIVE_EMOJI }
 
 /**
  * Creates a kind:7 reaction to a nostr event (for nostr-native articles)
@@ -23,7 +23,8 @@ export async function createEventReaction(
   eventAuthor: string,
   eventKind: number,
   account: IAccount,
-  relayPool: RelayPool
+  relayPool: RelayPool,
+  options?: { aCoord?: string }
 ): Promise<NostrEvent> {
   const factory = new EventFactory({ signer: account })
 
@@ -32,22 +33,23 @@ export async function createEventReaction(
     ['p', eventAuthor],
     ['k', eventKind.toString()]
   ]
+  if (options?.aCoord) {
+    tags.push(['a', options.aCoord])
+  }
 
   const draft = await factory.create(async () => ({
     kind: 7, // Reaction
-    content: MARK_AS_READ_EMOJI,
+    content: ARCHIVE_EMOJI,
     tags,
     created_at: Math.floor(Date.now() / 1000)
   }))
 
   const signed = await factory.sign(draft)
 
-  console.log('📚 Created kind:7 reaction (mark as read) for event:', eventId.slice(0, 8))
 
   // Publish to relays
-  await relayPool.publish(RELAYS, signed)
+  await relayPool.publish(getActiveRelayUrls(relayPool), signed)
 
-  console.log('✅ Reaction published to', RELAYS.length, 'relay(s)')
 
   return signed
 }
@@ -87,23 +89,42 @@ export async function createWebsiteReaction(
 
   const draft = await factory.create(async () => ({
     kind: 17, // Reaction to a website
-    content: MARK_AS_READ_EMOJI,
+    content: ARCHIVE_EMOJI,
     tags,
     created_at: Math.floor(Date.now() / 1000)
   }))
 
   const signed = await factory.sign(draft)
 
-  console.log('📚 Created kind:17 reaction (mark as read) for URL:', normalizedUrl)
 
   // Publish to relays
-  await relayPool.publish(RELAYS, signed)
+  await relayPool.publish(getActiveRelayUrls(relayPool), signed)
 
-  console.log('✅ Website reaction published to', RELAYS.length, 'relay(s)')
 
   return signed
 }
 
+/**
+ * Sends a deletion request (NIP-09) for a reaction event to effectively un-archive.
+ * The caller must know the reaction event id to delete.
+ */
+export async function deleteReaction(
+  reactionEventId: string,
+  account: IAccount,
+  relayPool: RelayPool
+): Promise<NostrEvent> {
+  const factory = new EventFactory({ signer: account })
+  const draft = await factory.create(async () => ({
+    kind: 5, // Deletion per NIP-09
+    content: 'unarchive',
+    tags: [['e', reactionEventId]],
+    created_at: Math.floor(Date.now() / 1000)
+  }))
+  const signed = await factory.sign(draft)
+  await relayPool.publish(getActiveRelayUrls(relayPool), signed)
+  return signed
+}
+
 /**
  * Checks if the user has already marked a nostr event as read
  * @param eventId The ID of the event to check
@@ -124,7 +145,7 @@ export async function hasMarkedEventAsRead(
     }
 
     const events$ = relayPool
-      .req(RELAYS, filter)
+      .req(getActiveRelayUrls(relayPool), filter)
       .pipe(
         onlyEvents(),
         completeOnEose(),
@@ -134,8 +155,8 @@ export async function hasMarkedEventAsRead(
 
     const events: NostrEvent[] = await lastValueFrom(events$)
     
-    // Check if any reaction has our mark-as-read emoji
-    const hasReadReaction = events.some((event: NostrEvent) => event.content === MARK_AS_READ_EMOJI)
+    // Check if any reaction has our archive emoji
+    const hasReadReaction = events.some((event: NostrEvent) => event.content === ARCHIVE_EMOJI)
     
     return hasReadReaction
   } catch (error) {
@@ -177,7 +198,7 @@ export async function hasMarkedWebsiteAsRead(
     }
 
     const events$ = relayPool
-      .req(RELAYS, filter)
+      .req(getActiveRelayUrls(relayPool), filter)
       .pipe(
         onlyEvents(),
         completeOnEose(),
@@ -187,8 +208,8 @@ export async function hasMarkedWebsiteAsRead(
 
     const events: NostrEvent[] = await lastValueFrom(events$)
     
-    // Check if any reaction has our mark-as-read emoji
-    const hasReadReaction = events.some((event: NostrEvent) => event.content === MARK_AS_READ_EMOJI)
+    // Check if any reaction has our archive emoji
+    const hasReadReaction = events.some((event: NostrEvent) => event.content === ARCHIVE_EMOJI)
     
     return hasReadReaction
   } catch (error) {

src/services/readingDataProcessor.ts

@@ -1,8 +1,9 @@
-import { NostrEvent } from 'nostr-tools'
+import { NostrEvent, nip19 } from 'nostr-tools'
 import { ReadItem } from './readsService'
 import { fallbackTitleFromUrl } from '../utils/readItemMerge'
+import { KINDS } from '../config/kinds'
 
-const READING_POSITION_PREFIX = 'boris:reading-position:'
+const READING_PROGRESS_KIND = KINDS.ReadingProgress // 39802 - NIP-85
 
 interface ReadArticle {
   id: string
@@ -13,44 +14,88 @@ interface ReadArticle {
 }
 
 /**
- * Processes reading position events into ReadItems
+ * Processes reading progress events (kind 39802) into ReadItems
+ * 
+ * Test scenarios:
+ * - Kind 39802 with d="30023:..." → article ReadItem with naddr id
+ * - Kind 39802 with d="url:..." → external ReadItem with decoded URL
+ * - Newer event.created_at overwrites older timestamp
+ * - Invalid d tag format → skip event
+ * - Malformed JSON content → skip event
  */
-export function processReadingPositions(
+export function processReadingProgress(
   events: NostrEvent[],
   readsMap: Map<string, ReadItem>
 ): void {
+  
   for (const event of events) {
+    if (event.kind !== READING_PROGRESS_KIND) {
+      continue
+    }
+    
     const dTag = event.tags.find(t => t[0] === 'd')?.[1]
-    if (!dTag || !dTag.startsWith(READING_POSITION_PREFIX)) continue
-
-    const identifier = dTag.replace(READING_POSITION_PREFIX, '')
+    if (!dTag) {
+      continue
+    }
     
     try {
-      const positionData = JSON.parse(event.content)
-      const position = positionData.position
-      const timestamp = positionData.timestamp
+      const content = JSON.parse(event.content)
+      const position = content.progress || 0
+      
+      // Validate progress is between 0 and 1 (NIP-85 requirement)
+      if (position < 0 || position > 1) {
+        continue
+      }
+      
+      // Use event.created_at as authoritative timestamp (NIP-85 spec)
+      const timestamp = event.created_at
 
       let itemId: string
       let itemUrl: string | undefined
       let itemType: 'article' | 'external' = 'external'
 
-      // Check if it's a nostr article (naddr format)
-      if (identifier.startsWith('naddr1')) {
-        itemId = identifier
-        itemType = 'article'
-      } else {
-        // It's a base64url-encoded URL
+      // Check if d tag is a coordinate (30023:pubkey:identifier)
+      if (dTag.startsWith('30023:')) {
+        // It's a nostr article coordinate
+        const parts = dTag.split(':')
+        if (parts.length === 3) {
+          // Convert to naddr for consistency with the rest of the app
+          try {
+            const naddr = nip19.naddrEncode({
+              kind: parseInt(parts[0]),
+              pubkey: parts[1],
+              identifier: parts[2]
+            })
+            itemId = naddr
+            itemType = 'article'
+          } catch (e) {
+            continue
+          }
+        } else {
+          continue
+        }
+      } else if (dTag.startsWith('url:')) {
+        // It's a URL. We support both raw URLs and base64url-encoded URLs.
+        const value = dTag.slice(4)
+        const looksBase64Url = /^[A-Za-z0-9_-]+$/.test(value) && (value.includes('-') || value.includes('_'))
         try {
-          itemUrl = atob(identifier.replace(/-/g, '+').replace(/_/g, '/'))
+          if (looksBase64Url) {
+            // Decode base64url to raw URL
+            itemUrl = atob(value.replace(/-/g, '+').replace(/_/g, '/'))
+          } else {
+            // Treat as raw URL (already decoded)
+            itemUrl = value
+          }
           itemId = itemUrl
           itemType = 'external'
         } catch (e) {
-          console.warn('Failed to decode URL identifier:', identifier)
           continue
         }
+      } else {
+        continue
       }
 
-      // Add or update the item
+      // Add or update the item, preferring newer timestamps
       const existing = readsMap.get(itemId)
       if (!existing || !existing.readingTimestamp || timestamp > existing.readingTimestamp) {
         readsMap.set(itemId, {
@@ -64,7 +109,7 @@ export function processReadingPositions(
         })
       }
     } catch (error) {
-      console.warn('Failed to parse reading position:', error)
+      // Silently fail
     }
   }
 }

src/services/readingPositionService.ts

@@ -1,13 +1,13 @@
 import { IEventStore, mapEventsToStore } from 'applesauce-core'
 import { EventFactory } from 'applesauce-factory'
 import { RelayPool, onlyEvents } from 'applesauce-relay'
-import { NostrEvent } from 'nostr-tools'
+import { NostrEvent, nip19 } from 'nostr-tools'
 import { firstValueFrom } from 'rxjs'
 import { publishEvent } from './writeService'
 import { RELAYS } from '../config/relays'
+import { KINDS } from '../config/kinds'
 
-const APP_DATA_KIND = 30078 // NIP-78 Application Data
-const READING_POSITION_PREFIX = 'boris:reading-position:'
+const READING_PROGRESS_KIND = KINDS.ReadingProgress // 39802 - NIP-85 Reading Progress
 
 export interface ReadingPosition {
   position: number // 0-1 scroll progress
@@ -15,16 +15,79 @@ export interface ReadingPosition {
   scrollTop?: number // Optional: pixel position
 }
 
-// Helper to extract and parse reading position from an event
-function getReadingPositionContent(event: NostrEvent): ReadingPosition | undefined {
+export interface ReadingProgressContent {
+  progress: number // 0-1 scroll progress
+  ts?: number // Unix timestamp (optional, for display)
+  loc?: number // Optional: pixel position
+  ver?: string // Schema version
+}
+
+// Helper to extract and parse reading progress from event (kind 39802)
+function getReadingProgressContent(event: NostrEvent): ReadingPosition | undefined {
   if (!event.content || event.content.length === 0) return undefined
   try {
-    return JSON.parse(event.content) as ReadingPosition
+    const content = JSON.parse(event.content) as ReadingProgressContent
+    return {
+      position: content.progress,
+      timestamp: content.ts || event.created_at,
+      scrollTop: content.loc
+    }
   } catch {
     return undefined
   }
 }
 
+// Generate d tag for kind 39802 based on target
+// Test cases:
+// - naddr1... → "30023:<pubkey>:<identifier>"
+// - https://example.com/post → "url:<base64url>"
+// - Invalid naddr → "url:<base64url>" (fallback)
+function generateDTag(naddrOrUrl: string): string {
+  // If it's a nostr article (naddr format), decode and build coordinate
+  if (naddrOrUrl.startsWith('naddr1')) {
+    try {
+      const decoded = nip19.decode(naddrOrUrl)
+      if (decoded.type === 'naddr') {
+        const dTag = `${decoded.data.kind}:${decoded.data.pubkey}:${decoded.data.identifier || ''}`
+        return dTag
+      }
+    } catch (e) {
+      // Ignore decode errors
+    }
+  }
+  
+  // For URLs, use url: prefix with base64url encoding
+  const base64url = btoa(naddrOrUrl)
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '')
+  return `url:${base64url}`
+}
+
+// Generate tags for kind 39802 event
+function generateProgressTags(naddrOrUrl: string): string[][] {
+  const dTag = generateDTag(naddrOrUrl)
+  const tags: string[][] = [['d', dTag]]
+  
+  // Add 'a' tag for nostr articles
+  if (naddrOrUrl.startsWith('naddr1')) {
+    try {
+      const decoded = nip19.decode(naddrOrUrl)
+      if (decoded.type === 'naddr') {
+        const coordinate = `${decoded.data.kind}:${decoded.data.pubkey}:${decoded.data.identifier || ''}`
+        tags.push(['a', coordinate])
+      }
+    } catch (e) {
+      // Ignore decode errors
+    }
+  } else {
+    // Add 'r' tag for URLs
+    tags.push(['r', naddrOrUrl])
+  }
+  
+  return tags
+}
+
 /**
  * Generate a unique identifier for an article
  * For Nostr articles: use the naddr directly
@@ -35,15 +98,12 @@ export function generateArticleIdentifier(naddrOrUrl: string): string {
   if (naddrOrUrl.startsWith('nostr:')) {
     return naddrOrUrl.replace('nostr:', '')
   }
-  // For URLs, use base64url encoding (URL-safe)
-  return btoa(naddrOrUrl)
-    .replace(/\+/g, '-')
-    .replace(/\//g, '_')
-    .replace(/=+$/, '')
+  // For URLs, return the raw URL. Downstream tag generation will encode as needed.
+  return naddrOrUrl
 }
 
 /**
- * Save reading position to Nostr (Kind 30078)
+ * Save reading position to Nostr (kind 39802)
  */
 export async function saveReadingPosition(
   relayPool: RelayPool,
@@ -52,36 +112,76 @@ export async function saveReadingPosition(
   articleIdentifier: string,
   position: ReadingPosition
 ): Promise<void> {
-  console.log('💾 [ReadingPosition] Saving position:', {
-    identifier: articleIdentifier.slice(0, 32) + '...',
-    position: position.position,
-    positionPercent: Math.round(position.position * 100) + '%',
-    timestamp: position.timestamp,
-    scrollTop: position.scrollTop
-  })
-
-  const dTag = `${READING_POSITION_PREFIX}${articleIdentifier}`
+  const now = Math.floor(Date.now() / 1000)
 
+  const progressContent: ReadingProgressContent = {
+    progress: position.position,
+    ts: position.timestamp,
+    loc: position.scrollTop,
+    ver: '1'
+  }
+  
+  const tags = generateProgressTags(articleIdentifier)
+  
   const draft = await factory.create(async () => ({
-    kind: APP_DATA_KIND,
-    content: JSON.stringify(position),
-    tags: [
-      ['d', dTag],
-      ['client', 'boris']
-    ],
-    created_at: Math.floor(Date.now() / 1000)
+    kind: READING_PROGRESS_KIND,
+    content: JSON.stringify(progressContent),
+    tags,
+    created_at: now
   }))
 
   const signed = await factory.sign(draft)
-
-  // Use unified write service
+  
   await publishEvent(relayPool, eventStore, signed)
-
-  console.log('✅ [ReadingPosition] Position saved successfully, event ID:', signed.id.slice(0, 8))
 }
 
 /**
- * Load reading position from Nostr
+ * Streaming reading position loader (non-blocking, EOSE-driven)
+ * Seeds from local eventStore, streams relay updates to store in background
+ * @returns Unsubscribe function to cancel both store watch and network stream
+ */
+export function startReadingPositionStream(
+  relayPool: RelayPool,
+  eventStore: IEventStore,
+  pubkey: string,
+  articleIdentifier: string,
+  onPosition: (pos: ReadingPosition | null) => void
+): () => void {
+  const dTag = generateDTag(articleIdentifier)
+
+  // 1) Seed from local replaceable immediately and watch for updates
+  const storeSub = eventStore
+    .replaceable(READING_PROGRESS_KIND, pubkey, dTag)
+    .subscribe((event: NostrEvent | undefined) => {
+      if (!event) {
+        onPosition(null)
+        return
+      }
+      const parsed = getReadingProgressContent(event)
+      onPosition(parsed || null)
+    })
+
+  // 2) Stream from relays in background; pipe into store; no timeout/unsubscribe timer
+  const networkSub = relayPool
+    .subscription(RELAYS, {
+      kinds: [READING_PROGRESS_KIND],
+      authors: [pubkey],
+      '#d': [dTag]
+    })
+    .pipe(onlyEvents(), mapEventsToStore(eventStore))
+    .subscribe()
+
+  // Caller manages lifecycle
+  return () => {
+    try { storeSub.unsubscribe() } catch { /* ignore */ }
+    try { networkSub.unsubscribe() } catch { /* ignore */ }
+  }
+}
+
+/**
+ * Load reading position from Nostr (kind 39802)
+ * @deprecated Use startReadingPositionStream for non-blocking behavior
+ * Returns current local position immediately (or null) and starts background sync
  */
 export async function loadReadingPosition(
   relayPool: RelayPool,
@@ -89,108 +189,31 @@ export async function loadReadingPosition(
   pubkey: string,
   articleIdentifier: string
 ): Promise<ReadingPosition | null> {
-  const dTag = `${READING_POSITION_PREFIX}${articleIdentifier}`
+  const dTag = generateDTag(articleIdentifier)
 
-  console.log('📖 [ReadingPosition] Loading position:', {
-    pubkey: pubkey.slice(0, 8) + '...',
-    identifier: articleIdentifier.slice(0, 32) + '...',
-    dTag: dTag.slice(0, 50) + '...'
-  })
-
-  // First, check if we already have the position in the local event store
+  let initial: ReadingPosition | null = null
   try {
     const localEvent = await firstValueFrom(
-      eventStore.replaceable(APP_DATA_KIND, pubkey, dTag)
+      eventStore.replaceable(READING_PROGRESS_KIND, pubkey, dTag)
     )
     if (localEvent) {
-      const content = getReadingPositionContent(localEvent)
-      if (content) {
-        console.log('✅ [ReadingPosition] Loaded from local store:', {
-          position: content.position,
-          positionPercent: Math.round(content.position * 100) + '%',
-          timestamp: content.timestamp
-        })
-        
-        // Still fetch from relays in the background to get any updates
-        relayPool
-          .subscription(RELAYS, {
-            kinds: [APP_DATA_KIND],
-            authors: [pubkey],
-            '#d': [dTag]
-          })
-          .pipe(onlyEvents(), mapEventsToStore(eventStore))
-          .subscribe()
-        
-        return content
-      }
+      const content = getReadingProgressContent(localEvent)
+      if (content) initial = content
     }
-  } catch (err) {
-    console.log('📭 No cached reading position found, fetching from relays...')
+  } catch {
+    // ignore
   }
 
-  // If not in local store, fetch from relays
-  return new Promise((resolve) => {
-    let hasResolved = false
-    const timeout = setTimeout(() => {
-      if (!hasResolved) {
-        console.log('⏱️ Reading position load timeout - no position found')
-        hasResolved = true
-        resolve(null)
-      }
-    }, 3000) // Shorter timeout for reading positions
+  // Start background sync (fire-and-forget; no timeout)
+  relayPool
+    .subscription(RELAYS, {
+      kinds: [READING_PROGRESS_KIND],
+      authors: [pubkey],
+      '#d': [dTag]
+    })
+    .pipe(onlyEvents(), mapEventsToStore(eventStore))
+    .subscribe()
 
-    const sub = relayPool
-      .subscription(RELAYS, {
-        kinds: [APP_DATA_KIND],
-        authors: [pubkey],
-        '#d': [dTag]
-      })
-      .pipe(onlyEvents(), mapEventsToStore(eventStore))
-      .subscribe({
-        complete: async () => {
-          clearTimeout(timeout)
-          if (!hasResolved) {
-            hasResolved = true
-            try {
-              const event = await firstValueFrom(
-                eventStore.replaceable(APP_DATA_KIND, pubkey, dTag)
-              )
-              if (event) {
-                const content = getReadingPositionContent(event)
-                if (content) {
-                  console.log('✅ [ReadingPosition] Loaded from relays:', {
-                    position: content.position,
-                    positionPercent: Math.round(content.position * 100) + '%',
-                    timestamp: content.timestamp
-                  })
-                  resolve(content)
-                } else {
-                  console.log('⚠️ [ReadingPosition] Event found but no valid content')
-                  resolve(null)
-                }
-              } else {
-                console.log('📭 [ReadingPosition] No position found on relays')
-                resolve(null)
-              }
-            } catch (err) {
-              console.error('❌ Error loading reading position:', err)
-              resolve(null)
-            }
-          }
-        },
-        error: (err) => {
-          console.error('❌ Reading position subscription error:', err)
-          clearTimeout(timeout)
-          if (!hasResolved) {
-            hasResolved = true
-            resolve(null)
-          }
-        }
-      })
-
-    setTimeout(() => {
-      sub.unsubscribe()
-    }, 3000)
-  })
+  return initial
 }
 

src/services/readingProgressController.ts

@@ -0,0 +1,374 @@
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
+import { NostrEvent } from 'nostr-tools'
+import { queryEvents } from './dataFetch'
+import { KINDS } from '../config/kinds'
+import { processReadingProgress } from './readingDataProcessor'
+import { ReadItem } from './readsService'
+import { ARCHIVE_EMOJI } from './reactionService'
+import { nip19 } from 'nostr-tools'
+
+
+type ProgressMapCallback = (progressMap: Map<string, number>) => void
+type LoadingCallback = (loading: boolean) => void
+
+const LAST_SYNCED_KEY = 'reading_progress_last_synced'
+const PROGRESS_CACHE_KEY = 'reading_progress_cache_v1'
+
+/**
+ * Shared reading progress controller
+ * Manages the user's reading progress (kind:39802) centrally
+ */
+class ReadingProgressController {
+  private progressListeners: ProgressMapCallback[] = []
+  private loadingListeners: LoadingCallback[] = []
+  private markedAsReadListeners: (() => void)[] = []
+  
+  private currentProgressMap: Map<string, number> = new Map()
+  private markedAsReadIds: Set<string> = new Set()
+  private lastLoadedPubkey: string | null = null
+  private generation = 0
+  private timelineSubscription: { unsubscribe: () => void } | null = null
+  private isLoading = false
+
+  onProgress(cb: ProgressMapCallback): () => void {
+    this.progressListeners.push(cb)
+    return () => {
+      this.progressListeners = this.progressListeners.filter(l => l !== cb)
+    }
+  }
+
+  onLoading(cb: LoadingCallback): () => void {
+    this.loadingListeners.push(cb)
+    return () => {
+      this.loadingListeners = this.loadingListeners.filter(l => l !== cb)
+    }
+  }
+
+  onMarkedAsReadChanged(cb: () => void): () => void {
+    this.markedAsReadListeners.push(cb)
+    return () => {
+      this.markedAsReadListeners = this.markedAsReadListeners.filter(l => l !== cb)
+    }
+  }
+
+  private setLoading(loading: boolean): void {
+    this.loadingListeners.forEach(cb => cb(loading))
+  }
+
+  private emitProgress(progressMap: Map<string, number>): void {
+    this.progressListeners.forEach(cb => cb(new Map(progressMap)))
+  }
+
+  private emitMarkedAsReadChanged(): void {
+    this.markedAsReadListeners.forEach(cb => cb())
+  }
+
+  /**
+   * Get current reading progress map without triggering a reload
+   */
+  getProgressMap(): Map<string, number> {
+    return new Map(this.currentProgressMap)
+  }
+
+  /**
+   * Load cached progress from localStorage for a pubkey
+   */
+  private loadCachedProgress(pubkey: string): Map<string, number> {
+    try {
+      const raw = localStorage.getItem(PROGRESS_CACHE_KEY)
+      if (!raw) return new Map()
+      const parsed = JSON.parse(raw) as Record<string, Record<string, number>>
+      const forUser = parsed[pubkey] || {}
+      return new Map(Object.entries(forUser))
+    } catch {
+      return new Map()
+    }
+  }
+
+  /**
+   * Save current progress map to localStorage for the active pubkey
+   */
+  private persistProgress(pubkey: string, progressMap: Map<string, number>): void {
+    try {
+      const raw = localStorage.getItem(PROGRESS_CACHE_KEY)
+      const parsed: Record<string, Record<string, number>> = raw ? JSON.parse(raw) : {}
+      parsed[pubkey] = Object.fromEntries(progressMap.entries())
+      localStorage.setItem(PROGRESS_CACHE_KEY, JSON.stringify(parsed))
+    } catch (err) {
+      // Silently fail cache persistence
+    }
+  }
+
+  /**
+   * Get progress for a specific article by naddr
+   */
+  getProgress(naddr: string): number | undefined {
+    return this.currentProgressMap.get(naddr)
+  }
+
+  /**
+   * Check if article is marked as read
+   */
+  isMarkedAsRead(naddr: string): boolean {
+    return this.markedAsReadIds.has(naddr)
+  }
+
+  /**
+   * Get all marked as read IDs (for debugging)
+   */
+  getMarkedAsReadIds(): string[] {
+    return Array.from(this.markedAsReadIds)
+  }
+
+  /**
+   * Check if reading progress is loaded for a specific pubkey
+   */
+  isLoadedFor(pubkey: string): boolean {
+    return this.lastLoadedPubkey === pubkey
+  }
+
+  /**
+   * Reset state (for logout or manual refresh)
+   */
+  reset(): void {
+    this.generation++
+    // Unsubscribe from any active timeline subscription
+    if (this.timelineSubscription) {
+      try {
+        this.timelineSubscription.unsubscribe()
+      } catch (err) {
+        // Silently fail on unsubscribe
+      }
+      this.timelineSubscription = null
+    }
+    this.currentProgressMap = new Map()
+    this.markedAsReadIds = new Set()
+    this.lastLoadedPubkey = null
+    this.emitProgress(this.currentProgressMap)
+  }
+
+  /**
+   * Update last synced timestamp
+   */
+  private updateLastSyncedAt(pubkey: string, timestamp: number): void {
+    try {
+      const data = localStorage.getItem(LAST_SYNCED_KEY)
+      const parsed = data ? JSON.parse(data) : {}
+      parsed[pubkey] = timestamp
+      localStorage.setItem(LAST_SYNCED_KEY, JSON.stringify(parsed))
+    } catch (err) {
+      // Silently fail
+    }
+  }
+
+  /**
+   * Load and watch reading progress for a user
+   */
+  async start(params: {
+    relayPool: RelayPool
+    eventStore: IEventStore
+    pubkey: string
+    force?: boolean
+  }): Promise<void> {
+    const { relayPool, eventStore, pubkey, force = false } = params
+    const startGeneration = this.generation
+
+
+    // Skip if already loaded for this pubkey and not forcing
+    if (!force && this.isLoadedFor(pubkey)) {
+      return
+    }
+
+    // Prevent concurrent starts
+    if (this.isLoading) {
+      return
+    }
+
+    this.setLoading(true)
+    this.isLoading = true
+
+    try {
+      // Seed from local cache immediately (survives refresh/flight mode)
+      const cached = this.loadCachedProgress(pubkey)
+      if (cached.size > 0) {
+        this.currentProgressMap = cached
+        this.emitProgress(this.currentProgressMap)
+      }
+
+      // Subscribe to local eventStore timeline for immediate and reactive updates
+      // This handles both local writes and synced events from relays
+      if (this.timelineSubscription) {
+        try {
+          this.timelineSubscription.unsubscribe()
+        } catch (err) {
+          // Silently fail
+        }
+        this.timelineSubscription = null
+      }
+
+      const timeline$ = eventStore.timeline({
+        kinds: [KINDS.ReadingProgress],
+        authors: [pubkey]
+      })
+      const generationAtSubscribe = this.generation
+      this.timelineSubscription = timeline$.subscribe((localEvents: NostrEvent[]) => {
+        if (generationAtSubscribe !== this.generation) return
+        if (!Array.isArray(localEvents) || localEvents.length === 0) return
+        this.processEvents(localEvents)
+      })
+
+      // Mark as loaded immediately - queries run in background non-blocking
+      this.lastLoadedPubkey = pubkey
+
+      // Query reading progress from relays in background (non-blocking, fire-and-forget)
+      queryEvents(relayPool, {
+        kinds: [KINDS.ReadingProgress],
+        authors: [pubkey]
+      })
+        .then((relayEvents) => {
+          if (startGeneration !== this.generation) return
+          if (relayEvents.length > 0) {
+            relayEvents.forEach(e => eventStore.add(e))
+            this.processEvents(relayEvents)
+            const now = Math.floor(Date.now() / 1000)
+            this.updateLastSyncedAt(pubkey, now)
+          }
+        })
+        .catch((err) => {
+          console.warn('[readingProgress] Background reading progress query failed:', err)
+        })
+
+      // Load mark-as-read reactions in background (non-blocking, streaming)
+      this.loadMarkAsReadReactions(relayPool, eventStore, pubkey, startGeneration)
+        .then(() => {
+        })
+        .catch((err) => {
+          console.warn('[readingProgress] Mark-as-read reactions loading failed:', err)
+        })
+
+    } catch (err) {
+      console.error('📊 [ReadingProgress] Failed to setup:', err)
+    } finally {
+      if (startGeneration === this.generation) {
+        this.setLoading(false)
+      }
+      this.isLoading = false
+    }
+  }
+
+  /**
+   * Process events and update progress map
+   */
+  private processEvents(events: NostrEvent[]): void {
+    const readsMap = new Map<string, ReadItem>()
+    
+    // Merge with existing progress
+    for (const [id, progress] of this.currentProgressMap.entries()) {
+      readsMap.set(id, {
+        id,
+        source: 'reading-progress',
+        type: 'article',
+        readingProgress: progress
+      })
+    }
+    
+    // Process new events
+    processReadingProgress(events, readsMap)
+    
+    // Convert back to progress map (id -> progress). Include both articles and external URLs.
+    const newProgressMap = new Map<string, number>()
+    for (const [id, item] of readsMap.entries()) {
+      if (item.readingProgress !== undefined) {
+        newProgressMap.set(id, item.readingProgress)
+      }
+    }
+    
+    this.currentProgressMap = newProgressMap
+    this.emitProgress(this.currentProgressMap)
+
+    // Persist for current user so it survives refresh/flight mode
+    if (this.lastLoadedPubkey) {
+      this.persistProgress(this.lastLoadedPubkey, this.currentProgressMap)
+    }
+  }
+
+  /**
+   * Load mark-as-read reactions in background (non-blocking)
+   */
+  private async loadMarkAsReadReactions(
+    relayPool: RelayPool,
+    _eventStore: IEventStore,
+    pubkey: string,
+    generation: number
+  ): Promise<void> {
+    try {
+      // Stream kind:17 (URL reactions) and kind:7 (event reactions) in parallel
+      const seenReactionIds = new Set<string>()
+
+      const handleUrlReaction = (evt: NostrEvent) => {
+        if (seenReactionIds.has(evt.id)) return
+        seenReactionIds.add(evt.id)
+        if (evt.content !== ARCHIVE_EMOJI) return
+        const rTag = evt.tags.find(t => t[0] === 'r')?.[1]
+        if (!rTag) return
+        this.markedAsReadIds.add(rTag)
+        this.emitMarkedAsReadChanged()
+      }
+
+      const pendingEventIds = new Set<string>()
+      const handleEventReaction = (evt: NostrEvent) => {
+        if (seenReactionIds.has(evt.id)) return
+        seenReactionIds.add(evt.id)
+        if (evt.content !== ARCHIVE_EMOJI) return
+        const eTag = evt.tags.find(t => t[0] === 'e')?.[1]
+        if (!eTag) return
+        pendingEventIds.add(eTag)
+      }
+
+      // Fire queries with onEvent callbacks for streaming behavior
+      const [kind17Events, kind7Events] = await Promise.all([
+        queryEvents(relayPool, { kinds: [17], authors: [pubkey] }, { onEvent: handleUrlReaction }),
+        queryEvents(relayPool, { kinds: [7], authors: [pubkey] }, { onEvent: handleEventReaction })
+      ])
+
+      if (generation !== this.generation) return
+
+      // Include any reactions that arrived only at EOSE
+      kind17Events.forEach(handleUrlReaction)
+      kind7Events.forEach(handleEventReaction)
+
+      if (pendingEventIds.size > 0) {
+        // Fetch referenced 30023 events, streaming not required here
+        const ids = Array.from(pendingEventIds)
+        const articleEvents = await queryEvents(relayPool, { kinds: [KINDS.BlogPost], ids })
+        const eventIdToNaddr = new Map<string, string>()
+        for (const article of articleEvents) {
+          const dTag = article.tags.find(t => t[0] === 'd')?.[1]
+          if (!dTag) continue
+          try {
+            const naddr = nip19.naddrEncode({ kind: KINDS.BlogPost, pubkey: article.pubkey, identifier: dTag })
+            eventIdToNaddr.set(article.id, naddr)
+          } catch (e) {
+            console.warn('[readingProgress] Failed to encode naddr for article:', article.id)
+          }
+        }
+
+        // Map pending event IDs to naddrs and emit
+        for (const eId of pendingEventIds) {
+          const naddr = eventIdToNaddr.get(eId)
+          if (naddr) {
+            this.markedAsReadIds.add(naddr)
+          }
+        }
+        this.emitMarkedAsReadChanged()
+      }
+
+    } catch (err) {
+      console.warn('[readingProgress] Failed to load mark-as-read reactions:', err)
+    }
+  }
+}
+
+export const readingProgressController = new ReadingProgressController()
+

src/services/readsController.ts

@@ -0,0 +1,276 @@
+import { RelayPool } from 'applesauce-relay'
+import { Helpers, IEventStore } from 'applesauce-core'
+import { createAddressLoader } from 'applesauce-loaders/loaders'
+import { NostrEvent } from 'nostr-tools'
+import { nip19 } from 'nostr-tools'
+import { merge } from 'rxjs'
+import { KINDS } from '../config/kinds'
+import { RELAYS } from '../config/relays'
+import { readingProgressController } from './readingProgressController'
+import { archiveController } from './archiveController'
+
+const { getArticleTitle, getArticleSummary, getArticleImage, getArticlePublished } = Helpers
+
+export interface ReadItem {
+  id: string // naddr coordinate
+  source: 'reading-progress' | 'marked-as-read' | 'bookmark'
+  type: 'article' | 'external'
+  
+  // Article data
+  event?: NostrEvent
+  url?: string
+  title?: string
+  summary?: string
+  image?: string
+  published?: number
+  author?: string
+  
+  // Reading metadata
+  readingProgress?: number // 0-1
+  readingTimestamp?: number // Unix timestamp of last reading activity
+  markedAsRead?: boolean
+  markedAt?: number
+}
+
+type ReadsCallback = (reads: ReadItem[]) => void
+type LoadingCallback = (loading: boolean) => void
+
+/**
+ * Reads controller - manages read articles with progressive hydration
+ * Follows the same pattern as bookmarkController
+ */
+class ReadsController {
+  private readsListeners: ReadsCallback[] = []
+  private loadingListeners: LoadingCallback[] = []
+  
+  private currentReads: Map<string, ReadItem> = new Map()
+  private isLoading = false
+  private hydrationGeneration = 0
+  
+  // Address loader for efficient batching
+  private addressLoader: ReturnType<typeof createAddressLoader> | null = null
+  private eventStore: IEventStore | null = null
+
+  onReads(cb: ReadsCallback): () => void {
+    this.readsListeners.push(cb)
+    return () => {
+      this.readsListeners = this.readsListeners.filter(l => l !== cb)
+    }
+  }
+
+  onLoading(cb: LoadingCallback): () => void {
+    this.loadingListeners.push(cb)
+    return () => {
+      this.loadingListeners = this.loadingListeners.filter(l => l !== cb)
+    }
+  }
+
+  reset(): void {
+    this.hydrationGeneration++
+    this.currentReads.clear()
+    this.setLoading(false)
+  }
+
+  private setLoading(loading: boolean): void {
+    if (this.isLoading !== loading) {
+      this.isLoading = loading
+      this.loadingListeners.forEach(cb => cb(loading))
+    }
+  }
+
+  getReads(): ReadItem[] {
+    return Array.from(this.currentReads.values())
+  }
+
+  /**
+   * Hydrate article events by coordinates using AddressLoader (auto-batching, streaming)
+   */
+  private hydrateArticles(
+    coordinates: string[],
+    onProgress: () => void,
+    generation: number
+  ): void {
+    if (!this.addressLoader) {
+      return
+    }
+
+    if (coordinates.length === 0) return
+
+    // Parse coordinates into pointers
+    const pointers: Array<{ kind: number; pubkey: string; identifier: string }> = []
+    
+    for (const coord of coordinates) {
+      try {
+        // Decode naddr to get article coordinates
+        if (coord.startsWith('naddr1')) {
+          const decoded = nip19.decode(coord)
+          if (decoded.type === 'naddr' && decoded.data.kind === KINDS.BlogPost) {
+            pointers.push({
+              kind: decoded.data.kind,
+              pubkey: decoded.data.pubkey,
+              identifier: decoded.data.identifier || ''
+            })
+          }
+        }
+      } catch (e) {
+        console.warn('Failed to decode article coordinate:', coord)
+      }
+    }
+
+    if (pointers.length === 0) return
+
+    // Use AddressLoader - it auto-batches and streams results
+    merge(...pointers.map(this.addressLoader)).subscribe({
+      next: (event) => {
+        // Check if hydration was cancelled
+        if (this.hydrationGeneration !== generation) return
+
+        const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+        
+        // Build naddr from event
+        try {
+          const naddr = nip19.naddrEncode({
+            kind: event.kind,
+            pubkey: event.pubkey,
+            identifier: dTag
+          })
+
+          const item = this.currentReads.get(naddr)
+          if (item) {
+            // Enrich the item with article data
+            item.event = event
+            item.title = getArticleTitle(event) || 'Untitled'
+            item.summary = getArticleSummary(event)
+            item.image = getArticleImage(event)
+            item.published = getArticlePublished(event)
+            item.author = event.pubkey
+            
+            // Store in event store if available
+            if (this.eventStore) {
+              this.eventStore.add(event)
+            }
+            
+            onProgress()
+          }
+        } catch (e) {
+          console.warn('Failed to encode naddr for event:', event.id)
+        }
+      },
+      error: () => {
+        // Silent error - AddressLoader handles retries
+      }
+    })
+  }
+
+  /**
+   * Build ReadItems from reading progress and emit them
+   */
+  private buildAndEmitReads(): void {
+    const progressMap = readingProgressController.getProgressMap()
+    const markedIds = Array.from(new Set([
+      ...readingProgressController.getMarkedAsReadIds(),
+      ...archiveController.getMarkedIds()
+    ]))
+
+    // Build read items from progress map
+    const readItems: ReadItem[] = []
+    
+    for (const [id, progress] of progressMap.entries()) {
+      const existing = this.currentReads.get(id)
+      const item: ReadItem = existing || {
+        id,
+        source: 'reading-progress',
+        type: 'article',
+        readingProgress: progress,
+        readingTimestamp: Math.floor(Date.now() / 1000)
+      }
+      
+      // Update progress
+      item.readingProgress = progress
+      item.markedAsRead = markedIds.includes(id)
+      
+      readItems.push(item)
+      this.currentReads.set(id, item)
+    }
+
+    // Include items that are only marked-as-read (no progress event yet)
+    for (const id of markedIds) {
+      if (!this.currentReads.has(id) && id.startsWith('naddr1')) {
+        const item: ReadItem = {
+          id,
+          source: 'marked-as-read',
+          type: 'article',
+          markedAsRead: true,
+          readingTimestamp: Math.floor(Date.now() / 1000)
+        }
+        readItems.push(item)
+        this.currentReads.set(id, item)
+      }
+    }
+
+    // Emit current state (items without article data yet)
+    this.readsListeners.forEach(cb => cb(Array.from(this.currentReads.values())))
+
+    // Fetch missing articles in background (progressive hydration)
+    const generation = this.hydrationGeneration
+    const onProgress = () => {
+      this.readsListeners.forEach(cb => cb(Array.from(this.currentReads.values())))
+    }
+
+    const coordinatesToFetch = readItems
+      .filter(item => !item.event && item.type === 'article')
+      .map(item => item.id)
+
+    this.hydrateArticles(coordinatesToFetch, onProgress, generation)
+  }
+
+  async start(options: {
+    relayPool: RelayPool
+    eventStore: IEventStore
+    pubkey: string
+  }): Promise<void> {
+    const { relayPool, eventStore } = options
+
+    // Increment generation to cancel any in-flight hydration
+    this.hydrationGeneration++
+    this.eventStore = eventStore
+    
+    // Initialize loader for this session
+    this.addressLoader = createAddressLoader(relayPool, { 
+      eventStore,
+      extraRelays: RELAYS
+    })
+    
+    this.setLoading(true)
+
+    try {
+      // Subscribe to reading progress changes
+      const unsubProgress = readingProgressController.onProgress(() => {
+        this.buildAndEmitReads()
+      })
+
+      const unsubMarked = archiveController.onMarked(() => {
+        this.buildAndEmitReads()
+      })
+
+      // Build initial reads
+      this.buildAndEmitReads()
+
+      // Cleanup subscriptions on next start
+      setTimeout(() => {
+        unsubProgress()
+        unsubMarked()
+      }, 0)
+
+    } catch (error) {
+      console.error('Failed to load reads:', error)
+      this.readsListeners.forEach(cb => cb([]))
+    } finally {
+      this.setLoading(false)
+    }
+  }
+}
+
+// Singleton instance
+export const readsController = new ReadsController()
+

src/services/readsService.ts

@@ -1,43 +1,25 @@
 import { RelayPool } from 'applesauce-relay'
-import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
 import { Bookmark } from '../types/bookmarks'
 import { fetchReadArticles } from './libraryService'
 import { queryEvents } from './dataFetch'
-import { RELAYS } from '../config/relays'
 import { KINDS } from '../config/kinds'
 import { classifyBookmarkType } from '../utils/bookmarkTypeClassifier'
 import { nip19 } from 'nostr-tools'
-import { processReadingPositions, processMarkedAsRead, filterValidItems, sortByReadingActivity } from './readingDataProcessor'
+import { AddressPointer } from 'nostr-tools/nip19'
+import { processReadingProgress, processMarkedAsRead, filterValidItems, sortByReadingActivity } from './readingDataProcessor'
 import { mergeReadItem } from '../utils/readItemMerge'
+import type { ReadItem } from './readsController'
 
 const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
-export interface ReadItem {
-  id: string // event ID or URL or coordinate
-  source: 'bookmark' | 'reading-progress' | 'marked-as-read'
-  type: 'article' | 'external' // article=kind:30023, external=URL
-  
-  // Article data
-  event?: NostrEvent
-  url?: string
-  title?: string
-  summary?: string
-  image?: string
-  published?: number
-  author?: string
-  
-  // Reading metadata
-  readingProgress?: number // 0-1
-  readingTimestamp?: number // Unix timestamp of last reading activity
-  markedAsRead?: boolean
-  markedAt?: number
-}
+// Re-export ReadItem from readsController for consistency
+export type { ReadItem } from './readsController'
 
 /**
  * Fetches all reads from multiple sources:
  * - Bookmarked articles (kind:30023) and article/website URLs
- * - Articles/URLs with reading progress (kind:30078)
+ * - Articles/URLs with reading progress (kind:39802)
  * - Manually marked as read articles/URLs (kind:7, kind:17)
  */
 export async function fetchAllReads(
@@ -46,7 +28,6 @@ export async function fetchAllReads(
   bookmarks: Bookmark[],
   onItem?: (item: ReadItem) => void
 ): Promise<ReadItem[]> {
-  console.log('📚 [Reads] Fetching all reads for user:', userPubkey.slice(0, 8))
   
   const readsMap = new Map<string, ReadItem>()
   
@@ -61,30 +42,19 @@ export async function fetchAllReads(
   
   try {
     // Fetch all data sources in parallel
-    const [readingPositionEvents, markedAsReadArticles] = await Promise.all([
-      queryEvents(relayPool, { kinds: [KINDS.AppData], authors: [userPubkey] }, { relayUrls: RELAYS }),
+    const [progressEvents, markedAsReadArticles] = await Promise.all([
+      queryEvents(relayPool, { kinds: [KINDS.ReadingProgress], authors: [userPubkey] }),
       fetchReadArticles(relayPool, userPubkey)
     ])
 
-    console.log('📊 [Reads] Data fetched:', {
-      readingPositions: readingPositionEvents.length,
-      markedAsRead: markedAsReadArticles.length,
-      bookmarks: bookmarks.length
-    })
-
-    // Process reading positions and emit items
-    processReadingPositions(readingPositionEvents, readsMap)
-    if (onItem) {
-      readsMap.forEach(item => {
-        if (item.type === 'article') onItem(item)
-      })
-    }
+    // Process reading progress events (kind 39802)
+    processReadingProgress(progressEvents, readsMap)
     
     // Process marked-as-read and emit items
     processMarkedAsRead(markedAsReadArticles, readsMap)
     if (onItem) {
       readsMap.forEach(item => {
-        if (item.type === 'article') onItem(item)
+        onItem(item)
       })
     }
 
@@ -106,7 +76,7 @@ export async function fetchAllReads(
             source: 'bookmark',
             type: 'article',
             readingProgress: 0,
-            readingTimestamp: bookmark.added_at || bookmark.created_at
+            readingTimestamp: bookmark.created_at ?? undefined
           }
           readsMap.set(coordinate, item)
           if (onItem) emitItem(item)
@@ -120,7 +90,6 @@ export async function fetchAllReads(
       .map(item => item.id)
 
     if (articleCoordinates.length > 0) {
-      console.log('📖 [Reads] Fetching article events for', articleCoordinates.length, 'articles')
       
       // Parse coordinates and fetch events
       const articlesToFetch: Array<{ pubkey: string; identifier: string }> = []
@@ -130,11 +99,14 @@ export async function fetchAllReads(
           // Try to decode as naddr
           if (coord.startsWith('naddr1')) {
             const decoded = nip19.decode(coord)
-            if (decoded.type === 'naddr' && decoded.data.kind === KINDS.BlogPost) {
-              articlesToFetch.push({
-                pubkey: decoded.data.pubkey,
-                identifier: decoded.data.identifier || ''
-              })
+            if (decoded.type === 'naddr') {
+              const data = decoded.data as AddressPointer
+              if (data.kind === KINDS.BlogPost) {
+                articlesToFetch.push({
+                  pubkey: data.pubkey,
+                  identifier: data.identifier || ''
+                })
+              }
             }
           } else {
             // Try coordinate format (kind:pubkey:identifier)
@@ -157,8 +129,7 @@ export async function fetchAllReads(
         
         const events = await queryEvents(
           relayPool,
-          { kinds: [KINDS.BlogPost], authors, '#d': identifiers },
-          { relayUrls: RELAYS }
+          { kinds: [KINDS.BlogPost], authors, '#d': identifiers }
         )
 
         // Merge event data into ReadItems and emit
@@ -187,7 +158,6 @@ export async function fetchAllReads(
     const validArticles = filterValidItems(articles)
     const sortedReads = sortByReadingActivity(validArticles)
 
-    console.log('✅ [Reads] Processed', sortedReads.length, 'total reads')
     return sortedReads
 
   } catch (error) {

src/services/rebroadcastService.ts

@@ -34,7 +34,6 @@ export async function rebroadcastEvents(
   
   // If we're in flight mode (only local relays connected) and user wants to broadcast to all relays, skip
   if (broadcastToAll && !hasRemoteConnection) {
-    console.log('✈️ Flight mode: skipping rebroadcast to remote relays')
     return
   }
 
@@ -50,7 +49,6 @@ export async function rebroadcastEvents(
   }
 
   if (targetRelays.length === 0) {
-    console.log('📡 No target relays for rebroadcast')
     return
   }
 
@@ -58,7 +56,6 @@ export async function rebroadcastEvents(
   const rebroadcastPromises = events.map(async (event) => {
     try {
       await relayPool.publish(targetRelays, event)
-      console.log('📡 Rebroadcast event', event.id?.slice(0, 8), 'to', targetRelays.length, 'relay(s)')
     } catch (error) {
       console.warn('⚠️ Failed to rebroadcast event', event.id?.slice(0, 8), error)
     }
@@ -68,11 +65,5 @@ export async function rebroadcastEvents(
   Promise.all(rebroadcastPromises).catch((err) => {
     console.warn('⚠️ Some rebroadcasts failed:', err)
   })
-
-  console.log(`📡 Rebroadcasting ${events.length} event(s) to ${targetRelays.length} relay(s)`, {
-    broadcastToAll,
-    useLocalCache,
-    targetRelays
-  })
 }
 

src/services/relayListService.ts

@@ -0,0 +1,180 @@
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { queryEvents } from './dataFetch'
+
+export interface UserRelayInfo {
+  url: string
+  mode?: 'read' | 'write' | 'both'
+}
+
+/**
+ * Loads user's relay list from kind 10002 (NIP-65)
+ */
+export async function loadUserRelayList(
+  relayPool: RelayPool,
+  pubkey: string,
+  options?: {
+    onUpdate?: (relays: UserRelayInfo[]) => void
+  }
+): Promise<UserRelayInfo[]> {
+  try {
+    
+    
+    // Try querying with streaming callback for faster results
+    const events: NostrEvent[] = []
+    const eventsMap = new Map<string, NostrEvent>()
+    
+    const result = await queryEvents(relayPool, {
+      kinds: [10002],
+      authors: [pubkey],
+      limit: 10
+    }, {
+      onEvent: (evt) => {
+        // Deduplicate by id and keep most recent
+        const existing = eventsMap.get(evt.id)
+        if (!existing || evt.created_at > existing.created_at) {
+          eventsMap.set(evt.id, evt)
+          // Update events array with deduplicated events
+          events.length = 0
+          events.push(...Array.from(eventsMap.values()))
+
+          // Stream immediate updates to caller using the newest event
+          if (options?.onUpdate) {
+            const tags = evt.tags || []
+            const relays: UserRelayInfo[] = []
+            for (const tag of tags) {
+              if (tag[0] === 'r' && tag[1]) {
+                const url = tag[1]
+                const mode = (tag[2] as 'read' | 'write' | undefined) || 'both'
+                relays.push({ url, mode })
+              }
+            }
+            if (relays.length > 0) {
+              options.onUpdate(relays)
+            }
+          }
+        }
+      }
+    })
+    
+    // Use the streaming results if we got any, otherwise fall back to the full result
+    const finalEvents = events.length > 0 ? events : result
+    
+    // Also try a broader query to see if we get any events at all
+    await queryEvents(relayPool, {
+      kinds: [10002],
+      limit: 5
+    })
+    
+    
+
+    if (finalEvents.length === 0) return []
+
+    // Get most recent event
+    const sortedEvents = finalEvents.sort((a, b) => b.created_at - a.created_at)
+    const relayListEvent = sortedEvents[0]
+
+    const relays: UserRelayInfo[] = []
+    for (const tag of relayListEvent.tags) {
+      if (tag[0] === 'r' && tag[1]) {
+        const url = tag[1]
+        const mode = tag[2] as 'read' | 'write' | undefined
+        relays.push({
+          url,
+          mode: mode || 'both'
+        })
+      }
+    }
+
+    return relays
+  } catch (error) {
+    console.error('Failed to load user relay list:', error)
+    return []
+  }
+}
+
+/**
+ * Loads blocked relays from kind 10006 (NIP-51 mute list)
+ */
+export async function loadBlockedRelays(
+  relayPool: RelayPool,
+  pubkey: string
+): Promise<string[]> {
+  try {
+    const events = await queryEvents(relayPool, {
+      kinds: [10006],
+      authors: [pubkey]
+    })
+
+    if (events.length === 0) return []
+
+    // Get most recent event
+    const sortedEvents = events.sort((a, b) => b.created_at - a.created_at)
+    const muteListEvent = sortedEvents[0]
+
+    const blocked: string[] = []
+    for (const tag of muteListEvent.tags) {
+      if (tag[0] === 'r' && tag[1]) {
+        blocked.push(tag[1])
+      }
+    }
+
+    return blocked
+  } catch (error) {
+    console.error('Failed to load blocked relays:', error)
+    return []
+  }
+}
+
+/**
+ * Computes final relay set by merging inputs and removing blocked relays
+ */
+export function computeRelaySet(params: {
+  hardcoded: string[]
+  bunker?: string[]
+  userList?: UserRelayInfo[]
+  blocked?: string[]
+  alwaysIncludeLocal: string[]
+}): string[] {
+  const {
+    hardcoded,
+    bunker = [],
+    userList = [],
+    blocked = [],
+    alwaysIncludeLocal
+  } = params
+
+  const relaySet = new Set<string>()
+  const blockedSet = new Set(blocked)
+
+  // Helper to check if relay should be included
+  const shouldInclude = (url: string): boolean => {
+    // Always include local relays
+    if (alwaysIncludeLocal.includes(url)) return true
+    // Otherwise check if blocked
+    return !blockedSet.has(url)
+  }
+
+  // Add hardcoded relays
+  for (const url of hardcoded) {
+    if (shouldInclude(url)) relaySet.add(url)
+  }
+
+  // Add bunker relays
+  for (const url of bunker) {
+    if (shouldInclude(url)) relaySet.add(url)
+  }
+
+  // Add user relays (treating 'both' and 'read' as applicable for queries)
+  for (const relay of userList) {
+    if (shouldInclude(relay.url)) relaySet.add(relay.url)
+  }
+
+  // Always ensure local relays are present
+  for (const url of alwaysIncludeLocal) {
+    relaySet.add(url)
+  }
+
+  return Array.from(relaySet)
+}
+

src/services/relayManager.ts

@@ -0,0 +1,91 @@
+import { RelayPool } from 'applesauce-relay'
+import { prioritizeLocalRelays } from '../utils/helpers'
+
+/**
+ * Local relays that are always included
+ */
+export const ALWAYS_LOCAL_RELAYS = [
+  'ws://localhost:10547',
+  'ws://localhost:4869'
+]
+
+/**
+ * Hardcoded relays that are always included
+ */
+export const HARDCODED_RELAYS = [
+  'wss://relay.nostr.band'
+]
+
+/**
+ * Gets active relay URLs from the relay pool
+ */
+export function getActiveRelayUrls(relayPool: RelayPool): string[] {
+  const urls = Array.from(relayPool.relays.keys())
+  return prioritizeLocalRelays(urls)
+}
+
+/**
+ * Normalizes a relay URL to match what applesauce-relay stores internally
+ * Adds trailing slash for URLs without a path
+ */
+function normalizeRelayUrl(url: string): string {
+  try {
+    const parsed = new URL(url)
+    // If the pathname is empty or just "/", ensure it ends with "/"
+    if (parsed.pathname === '' || parsed.pathname === '/') {
+      return url.endsWith('/') ? url : url + '/'
+    }
+    return url
+  } catch {
+    // If URL parsing fails, return as-is
+    return url
+  }
+}
+
+/**
+ * Applies a new relay set to the pool: adds missing relays, removes extras
+ */
+export function applyRelaySetToPool(
+  relayPool: RelayPool,
+  finalUrls: string[]
+): void {
+  // Normalize all URLs to match pool's internal format
+  const currentUrls = new Set(Array.from(relayPool.relays.keys()))
+  const normalizedTargetUrls = new Set(finalUrls.map(normalizeRelayUrl))
+
+  
+
+  // Add new relays (use original URLs for adding, not normalized)
+  const toAdd = finalUrls.filter(url => !currentUrls.has(normalizeRelayUrl(url)))
+  
+  if (toAdd.length > 0) {
+    relayPool.group(toAdd)
+  }
+
+  // Remove relays not in target (but always keep local relays)
+  const toRemove: string[] = []
+  for (const url of currentUrls) {
+    // Check if this normalized URL is in the target set
+    if (!normalizedTargetUrls.has(url)) {
+      // Also check if it's a local relay (check both normalized and original forms)
+      const isLocal = ALWAYS_LOCAL_RELAYS.some(localUrl => 
+        normalizeRelayUrl(localUrl) === url || localUrl === url
+      )
+      if (!isLocal) {
+        toRemove.push(url)
+      }
+    }
+  }
+  
+
+  for (const url of toRemove) {
+    const relay = relayPool.relays.get(url)
+    if (relay) {
+      relay.close()
+      relayPool.relays.delete(url)
+    }
+  }
+  
+  
+}
+

src/services/relayStatusService.ts

@@ -40,11 +40,7 @@ export function updateAndGetRelayStatuses(relayPool: RelayPool): RelayStatus[] {
   const connectedCount = statuses.filter(s => s.isInPool).length
   const disconnectedCount = statuses.filter(s => !s.isInPool).length
   if (connectedCount === 0 || disconnectedCount > 0) {
-    console.log(`🔌 Relay status: ${connectedCount} connected, ${disconnectedCount} disconnected`)
-    const connected = statuses.filter(s => s.isInPool).map(s => s.url.replace(/^wss?:\/\//, ''))
-    const disconnected = statuses.filter(s => !s.isInPool).map(s => s.url.replace(/^wss?:\/\//, ''))
-    if (connected.length > 0) console.log('✅ Connected:', connected.join(', '))
-    if (disconnected.length > 0) console.log('❌ Disconnected:', disconnected.join(', '))
+    // Debug: relay status changed, but we're not logging it
   }
   
   // Add recently seen relays that are no longer connected

src/services/settingsService.ts

@@ -58,98 +58,99 @@ export interface UserSettings {
   lightColorTheme?: 'paper-white' | 'sepia' | 'ivory' // default: sepia
   // Reading settings
   paragraphAlignment?: 'left' | 'justify' // default: justify
+  fullWidthImages?: boolean // default: false
+  renderVideoLinksAsEmbeds?: boolean // default: false
   // Reading position sync
   syncReadingPosition?: boolean // default: false (opt-in)
+  autoMarkAsReadOnCompletion?: boolean // default: false (opt-in)
+  // Bookmark filtering
+  hideBookmarksWithoutCreationDate?: boolean // default: false
+  // Content filtering
+  hideBotArticlesByName?: boolean // default: true - hide authors whose profile name includes "bot"
+  // TTS language selection
+  ttsUseSystemLanguage?: boolean // default: false
+  ttsDetectContentLanguage?: boolean // default: true
+  ttsLanguageMode?: 'system' | 'content' | string // default: 'content', can also be language code like 'en', 'es', etc.
+  // Text-to-Speech settings
+  ttsDefaultSpeed?: number // default: 2.1
 }
 
+/**
+ * Streaming settings loader (non-blocking, EOSE-driven)
+ * Seeds from local eventStore, streams relay updates to store in background
+ * @returns Unsubscribe function to cancel both store watch and network stream
+ */
+export function startSettingsStream(
+  relayPool: RelayPool,
+  eventStore: IEventStore,
+  pubkey: string,
+  relays: string[],
+  onSettings: (settings: UserSettings | null) => void
+): () => void {
+  // 1) Seed from local replaceable immediately and watch for updates
+  const storeSub = eventStore
+    .replaceable(APP_DATA_KIND, pubkey, SETTINGS_IDENTIFIER)
+    .subscribe((event: NostrEvent | undefined) => {
+      if (!event) {
+        onSettings(null)
+        return
+      }
+      const content = getAppDataContent<UserSettings>(event)
+      onSettings(content || null)
+    })
+
+  // 2) Stream from relays in background; pipe into store; no timeout/unsubscribe timer
+  const networkSub = relayPool
+    .subscription(relays, {
+      kinds: [APP_DATA_KIND],
+      authors: [pubkey],
+      '#d': [SETTINGS_IDENTIFIER]
+    })
+    .pipe(onlyEvents(), mapEventsToStore(eventStore))
+    .subscribe()
+
+  // Caller manages lifecycle
+  return () => {
+    try { storeSub.unsubscribe() } catch { /* ignore */ }
+    try { networkSub.unsubscribe() } catch { /* ignore */ }
+  }
+}
+
+/**
+ * @deprecated Use startSettingsStream + watchSettings for non-blocking behavior.
+ * Returns current local settings immediately (or null if not present) and starts background sync.
+ */
 export async function loadSettings(
   relayPool: RelayPool,
   eventStore: IEventStore,
   pubkey: string,
   relays: string[]
 ): Promise<UserSettings | null> {
-  console.log('⚙️ Loading settings from nostr...', { pubkey: pubkey.slice(0, 8) + '...', relays })
-  
-  // First, check if we already have settings in the local event store
+  let initial: UserSettings | null = null
+
   try {
     const localEvent = await firstValueFrom(
       eventStore.replaceable(APP_DATA_KIND, pubkey, SETTINGS_IDENTIFIER)
     )
     if (localEvent) {
       const content = getAppDataContent<UserSettings>(localEvent)
-      console.log('✅ Settings loaded from local store (cached):', content)
-      
-      // Still fetch from relays in the background to get any updates
-      relayPool
-        .subscription(relays, {
-          kinds: [APP_DATA_KIND],
-          authors: [pubkey],
-          '#d': [SETTINGS_IDENTIFIER]
-        })
-        .pipe(onlyEvents(), mapEventsToStore(eventStore))
-        .subscribe()
-      
-      return content || null
+      initial = content || null
     }
-  } catch (err) {
-    console.log('📭 No cached settings found, fetching from relays...')
+  } catch {
+    // ignore
   }
-  
-  // If not in local store, fetch from relays
-  return new Promise((resolve) => {
-    let hasResolved = false
-    const timeout = setTimeout(() => {
-      if (!hasResolved) {
-        console.warn('⚠️ Settings load timeout - no settings event found')
-        hasResolved = true
-        resolve(null)
-      }
-    }, 5000)
 
-    const sub = relayPool
-      .subscription(relays, {
-        kinds: [APP_DATA_KIND],
-        authors: [pubkey],
-        '#d': [SETTINGS_IDENTIFIER]
-      })
-      .pipe(onlyEvents(), mapEventsToStore(eventStore))
-      .subscribe({
-        complete: async () => {
-          clearTimeout(timeout)
-          if (!hasResolved) {
-            hasResolved = true
-            try {
-              const event = await firstValueFrom(
-                eventStore.replaceable(APP_DATA_KIND, pubkey, SETTINGS_IDENTIFIER)
-              )
-              if (event) {
-                const content = getAppDataContent<UserSettings>(event)
-                console.log('✅ Settings loaded from relays:', content)
-                resolve(content || null)
-              } else {
-                console.log('📭 No settings event found - using defaults')
-                resolve(null)
-              }
-            } catch (err) {
-              console.error('❌ Error loading settings:', err)
-              resolve(null)
-            }
-          }
-        },
-        error: (err) => {
-          console.error('❌ Settings subscription error:', err)
-          clearTimeout(timeout)
-          if (!hasResolved) {
-            hasResolved = true
-            resolve(null)
-          }
-        }
-      })
+  // Start background sync (fire-and-forget; no timeout)
+  relayPool
+    .subscription(relays, {
+      kinds: [APP_DATA_KIND],
+      authors: [pubkey],
+      '#d': [SETTINGS_IDENTIFIER]
+    })
+    .pipe(onlyEvents(), mapEventsToStore(eventStore))
+    .subscribe()
 
-    setTimeout(() => {
-      sub.unsubscribe()
-    }, 5000)
-  })
+  return initial
 }
 
 export async function saveSettings(
@@ -158,7 +159,6 @@ export async function saveSettings(
   factory: EventFactory,
   settings: UserSettings
 ): Promise<void> {
-  console.log('💾 Saving settings to nostr:', settings)
 
   // Create NIP-78 application data event manually
   // Note: AppDataBlueprint is not available in the npm package
@@ -174,7 +174,6 @@ export async function saveSettings(
   // Use unified write service
   await publishEvent(relayPool, eventStore, signed)
 
-  console.log('✅ Settings published successfully')
 }
 
 export function watchSettings(