chore: bump version to 0.10.13

- Web bookmarks (kind:39701) are replaceable events and should be deduplicated by d-tag
- Update dedupeNip51Events to include kind:39701 in d-tag deduplication logic
- Use coordinate format (kind:pubkey:d-tag) for web bookmark IDs instead of event IDs
- Ensures same URL bookmarked multiple times only appears once
- Keeps newest version when duplicates exist

.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,356 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [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
@@ -2149,7 +2499,21 @@ 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.8.3...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

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.
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "boris",
-  "version": "0.9.0",
+  "version": "0.10.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "boris",
-      "version": "0.9.0",
+      "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.9.1",
+  "version": "0.10.13",
   "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",

src/App.tsx

@@ -8,18 +8,20 @@ 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 { loadUserRelayList, loadBlockedRelays, computeRelaySet } from './services/relayListService'
-import { applyRelaySetToPool, getActiveRelayUrls, ALWAYS_LOCAL_RELAYS } from './services/relayManager'
+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'
@@ -93,7 +95,7 @@ function AppRoutes({
       
       // Load bookmarks
       if (bookmarks.length === 0 && !bookmarksLoading) {
-        bookmarkController.start({ relayPool, activeAccount, accountManager })
+        bookmarkController.start({ relayPool, activeAccount, accountManager, eventStore: eventStore || undefined })
       }
       
       // Load contacts
@@ -158,6 +160,10 @@ function AppRoutes({
 
   return (
     <Routes>
+      <Route 
+        path="/share-target" 
+        element={<ShareTargetHandler relayPool={relayPool} />} 
+      />
       <Route 
         path="/a/:naddr" 
         element={
@@ -247,7 +253,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/reading-list" 
+        path="/me/bookmarks" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -342,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={
@@ -386,23 +404,14 @@ 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()
       }
       
       // Create a relay group for better event deduplication and management
       pool.group(RELAYS)
-      console.log('[relay-init] Initial pool setup - added RELAYS:', RELAYS.length, 'relays')
-      console.log('[relay-init] Pool now has:', Array.from(pool.relays.keys()).length, 'relays')
       
       // Load persisted accounts from localStorage
       try {
@@ -569,8 +578,6 @@ function App() {
       
       // Handle user relay list and blocked relays when account changes
       const userRelaysSub = accounts.active$.subscribe((account) => {
-        console.log('[relay-init] userRelaysSub fired, account:', account ? 'logged in' : 'logged out')
-        console.log('[relay-init] Pool has', Array.from(pool.relays.keys()).length, 'relays before applying changes')
         if (account) {
           // User logged in - start with hardcoded relays immediately, then stream user relay list updates
           const pubkey = account.pubkey
@@ -582,7 +589,7 @@ function App() {
             const signerData = nostrConnectAccount.toJSON().signer
             bunkerRelays = signerData.relays || []
           }
-          console.log('[relay-init] Bunker relays:', bunkerRelays.length, 'relays', bunkerRelays)
+          
 
           // Start with hardcoded + bunker relays immediately (non-blocking)
           const initialRelays = computeRelaySet({
@@ -592,11 +599,10 @@ function App() {
             blocked: [],
             alwaysIncludeLocal: ALWAYS_LOCAL_RELAYS
           })
-          console.log('[relay-init] Initial relay set (hardcoded):', initialRelays.length, 'relays', initialRelays)
+          
 
           // Apply initial set immediately
           applyRelaySetToPool(pool, initialRelays)
-          console.log('[relay-init] After initial applyRelaySetToPool, pool has:', Array.from(pool.relays.keys()).length, 'relays')
 
           // Prepare keep-alive helper
           const updateKeepAlive = () => {
@@ -619,32 +625,29 @@ function App() {
           loadUserRelayList(pool, pubkey, {
             onUpdate: (userRelays) => {
               const interimRelays = computeRelaySet({
-                hardcoded: [],
+                hardcoded: HARDCODED_RELAYS,
                 bunker: bunkerRelays,
                 userList: userRelays,
                 blocked: [],
                 alwaysIncludeLocal: ALWAYS_LOCAL_RELAYS
               })
-              console.log('[relay-init] Interim relay set from first user list:', interimRelays.length, 'relays', interimRelays)
+              
               applyRelaySetToPool(pool, interimRelays)
               updateKeepAlive()
             }
           }).then(async (userRelayList) => {
             const blockedRelays = await blockedPromise.catch(() => [])
-            console.log('[relay-init] User relay list (10002):', userRelayList.length, 'relays', userRelayList.map(r => r.url))
-            console.log('[relay-init] Blocked relays (10006):', blockedRelays.length, 'relays', blockedRelays)
 
             const finalRelays = computeRelaySet({
-              hardcoded: userRelayList.length > 0 ? [] : RELAYS,
+              hardcoded: userRelayList.length > 0 ? HARDCODED_RELAYS : RELAYS,
               bunker: bunkerRelays,
               userList: userRelayList,
               blocked: blockedRelays,
               alwaysIncludeLocal: ALWAYS_LOCAL_RELAYS
             })
-            console.log('[relay-init] Final relay set (with user preferences):', finalRelays.length, 'relays', finalRelays)
+            
             applyRelaySetToPool(pool, finalRelays)
-            console.log('[relay-init] After user relay list apply, pool has:', Array.from(pool.relays.keys()).length, 'relays')
-            console.log('[relay-init] Final relay URLs:', Array.from(pool.relays.keys()))
+            
             updateKeepAlive()
             
             // Update address loader with new relays
@@ -661,10 +664,9 @@ function App() {
           })
         } else {
           // User logged out - reset to hardcoded relays
-          console.log('[relay-init] Applying RELAYS for logged out user, RELAYS.length:', RELAYS.length)
+          
           applyRelaySetToPool(pool, RELAYS)
-          console.log('[relay-init] After applyRelaySetToPool (logged out), pool has:', Array.from(pool.relays.keys()).length, 'relays')
-          console.log('[relay-init] Relay URLs:', Array.from(pool.relays.keys()))
+          
           
           // Update keep-alive subscription
           const poolWithSub = pool as unknown as { _keepAliveSubscription?: { unsubscribe: () => void } }

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(), { 
@@ -42,6 +50,14 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingP
   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

@@ -145,8 +145,20 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
   }
 
   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,
+      eventNevent,
+      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,7 +14,7 @@ import { ViewMode } from './Bookmarks'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { BookmarkSkeleton } from './Skeletons'
-import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWithoutSet, hasCreationDate } 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'
@@ -71,7 +72,7 @@ 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())
@@ -120,6 +121,18 @@ 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')
@@ -140,39 +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)
-    .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b))
+  // 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: '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
-  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
@@ -285,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}
@@ -296,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

@@ -112,10 +112,10 @@ export const CardView: React.FC<CardViewProps> = ({
             title="Open event in search"
             onClick={(e) => e.stopPropagation()}
           >
-            {formatDate(bookmark.created_at)}
+            {formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}
           </a>
         ) : (
-          <span className="bookmark-date">{formatDate(bookmark.created_at)}</span>
+          <span className="bookmark-date">{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
         )}
       </div>
       

src/components/BookmarkViews/CompactView.tsx

@@ -1,4 +1,5 @@
 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'
@@ -26,11 +27,15 @@ export const CompactView: React.FC<CompactViewProps> = ({
   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
   
-  // Calculate progress color (matching BlogPostCard logic)
+  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)
@@ -39,20 +44,15 @@ export const CompactView: React.FC<CompactViewProps> = ({
   }
 
   const handleCompactClick = () => {
-    if (!onSelectUrl) return
-    
     if (isArticle) {
-      onSelectUrl('', { id: bookmark.id, kind: bookmark.kind, tags: bookmark.tags, pubkey: bookmark.pubkey })
+      onSelectUrl?.('', { id: bookmark.id, kind: bookmark.kind, tags: bookmark.tags, pubkey: bookmark.pubkey })
     } else if (hasUrls) {
-      onSelectUrl(extractedUrls[0])
+      onSelectUrl?.(extractedUrls[0])
+    } else if (isNote) {
+      navigate(`/e/${bookmark.id}`)
     }
   }
 
-  // For articles, prefer summary; for others, use content
-  const displayText = isArticle && articleSummary 
-    ? articleSummary 
-    : bookmark.content
-
   return (
     <div key={`${bookmark.id}-${index}`} className={`individual-bookmark compact ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
       <div 
@@ -64,12 +64,16 @@ 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">
             <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>
       

src/components/BookmarkViews/LargeView.tsx

@@ -144,7 +144,7 @@ export const LargeView: React.FC<LargeViewProps> = ({
               className="bookmark-date-link"
               onClick={(e) => e.stopPropagation()}
             >
-              {formatDate(bookmark.created_at)}
+              {formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}
             </a>
           )}
           

src/components/Bookmarks.tsx

@@ -13,6 +13,7 @@ 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'
@@ -38,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>()
@@ -55,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'
@@ -62,7 +64,7 @@ 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.startsWith('/me/links') ? 'links' :
                 location.pathname === '/me/writings' ? 'writings' : 'highlights'
@@ -228,6 +230,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   useArticleLoader({
     naddr,
     relayPool,
+    eventStore,
     setSelectedUrl,
     setReaderContent,
     setReaderLoading,
@@ -255,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)

src/components/ContentPanel.tsx

@@ -43,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
@@ -75,6 +76,7 @@ interface ContentPanelProps {
   // For reading progress indicator positioning
   isSidebarCollapsed?: boolean
   isHighlightsCollapsed?: boolean
+  onOpenHighlights?: () => void
 }
 
 const ContentPanel: React.FC<ContentPanelProps> = ({ 
@@ -102,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)
@@ -131,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,
@@ -206,7 +214,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   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) {
       return
@@ -215,15 +223,12 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       return
     }
 
-    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) {
           // Wait for content to be fully rendered before scrolling
           setTimeout(() => {
@@ -236,19 +241,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
               behavior: 'smooth'
             })
           }, 500) // Give content time to render
-        } else if (savedPosition) {
-          if (savedPosition.position === 1) {
-            // Article was completed, start from top
-          } else {
-            // Position was too early, skip restore
-          }
         }
-      } 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
@@ -321,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)
@@ -465,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)
@@ -552,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)
   }
@@ -729,7 +756,7 @@ 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]}
@@ -758,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">
@@ -844,6 +877,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
           {markdown ? (
             renderedMarkdownHtml && finalHtml ? (
               <VideoEmbedProcessor
+                key={`content:${contentKey}`}
                 ref={contentRef}
                 html={finalHtml}
                 renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
@@ -860,6 +894,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             )
           ) : (
             <VideoEmbedProcessor
+              key={`content:${contentKey}`}
               ref={contentRef}
               html={finalHtml || html || ''}
               renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
@@ -897,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}

src/components/Debug.tsx

@@ -434,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) {
@@ -655,7 +651,9 @@ const Debug: React.FC<DebugProps> = ({
               return timeB - timeA
             })
           })
-        }
+        },
+        100,
+        eventStore || undefined
       )
       
       setWritingPosts(posts)
@@ -783,9 +781,16 @@ const Debug: React.FC<DebugProps> = ({
         }
       })
 
-      // Load deduplicated results via controller
+      // 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
@@ -798,11 +803,7 @@ const Debug: React.FC<DebugProps> = ({
 
       const elapsed = Math.round(performance.now() - start)
       setTLoadReadingProgress(elapsed)
-      setLiveTiming(prev => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-        const { loadReadingProgress, ...rest } = prev
-        return rest
-      })
+      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`)
@@ -871,11 +872,7 @@ const Debug: React.FC<DebugProps> = ({
       const totalEvents = kind7Events.length + kind17Events.length
       const elapsed = Math.round(performance.now() - start)
       setTLoadMarkAsRead(elapsed)
-      setLiveTiming(prev => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-        const { loadMarkAsRead, ...rest } = prev
-        return rest
-      })
+      setLiveTiming(prev => ({ ...prev, loadMarkAsRead: undefined }))
 
       DebugBus.info('debug', `Loaded ${totalEvents} mark-as-read reactions in ${elapsed}ms`)
     } catch (err) {
@@ -929,11 +926,7 @@ const Debug: React.FC<DebugProps> = ({
       
       const elapsed = Math.round(performance.now() - start)
       setTLoadRelayList(elapsed)
-      setLiveTiming(prev => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-        const { loadRelayList, ...rest } = prev
-        return rest
-      })
+      setLiveTiming(prev => ({ ...prev, loadRelayList: undefined }))
 
       DebugBus.info('debug', `Loaded ${events.length} relay list events in ${elapsed}ms`)
       

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,20 +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
@@ -55,27 +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, [])
 
   
   
@@ -105,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[]) => {
@@ -230,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(() => {
@@ -509,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(() => {
@@ -586,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)
@@ -604,7 +486,7 @@ 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 => {
@@ -641,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">
@@ -653,6 +537,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
                 href={getPostUrl(post)}
                 level={post.level}
                 readingProgress={getReadingProgress(post)}
+                hideBotByName={settings?.hideBotArticlesByName !== false}
               />
             ))}
           </div>
@@ -701,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>
         
@@ -773,7 +658,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
         </div>
       </div>
 
-      <div key={activeTab}>
+      <div>
         {renderTabContent()}
       </div>
     </div>

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">
@@ -101,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/Me.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHighlighter, faBookmark, 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 } from 'applesauce-core'
 import { BlogPostSkeleton, HighlightSkeleton, BookmarkSkeleton } from './Skeletons'
@@ -23,7 +24,7 @@ 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, hasCreationDate } 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'
@@ -42,7 +43,7 @@ interface MeProps {
   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', 'highlighted', 'archive']
@@ -57,7 +58,7 @@ const Me: React.FC<MeProps> = ({
   const activeAccount = Hooks.useActiveAccount()
   const navigate = useNavigate()
   const { filter: urlFilter } = useParams<{ filter?: string }>()
-  const [activeTab, setActiveTab] = useState<TabType>(propActiveTab || 'highlights')
+  const activeTab = propActiveTab || 'highlights'
   
   // Only for own profile
   const viewingPubkey = activeAccount?.pubkey
@@ -129,13 +130,6 @@ 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 normalized = urlFilter === 'emoji' ? 'archive' : urlFilter
@@ -205,15 +199,15 @@ const Me: React.FC<MeProps> = ({
   }, [viewingPubkey, relayPool, eventStore, refreshTrigger])
 
   // Tab-specific loading functions
-  const loadHighlightsTab = async () => {
+  const loadHighlightsTab = useCallback(async () => {
     if (!viewingPubkey) return
     
     // 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
     
     try {
@@ -230,28 +224,29 @@ const Me: React.FC<MeProps> = ({
       console.error('Failed to load writings:', err)
       setLoading(false)
     }
-  }
+  }, [viewingPubkey, relayPool, eventStore, refreshTrigger])
 
-  const loadReadingListTab = async () => {
+  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)
-    }
-  }
+      return new Set(prev).add('bookmarks')
+    })
+    
+    // Always turn off loading after a tick
+    setTimeout(() => setLoading(false), 0)
+  }, [viewingPubkey, activeAccount])
 
-  const loadReadsTab = async () => {
+  const loadReadsTab = useCallback(async () => {
     if (!viewingPubkey || !activeAccount) return
     
-    const hasBeenLoaded = loadedTabs.has('reads')
+    let hasBeenLoaded = false
+    setLoadedTabs(prev => {
+      hasBeenLoaded = prev.has('reads')
+      return prev
+    })
     
     try {
       if (!hasBeenLoaded) setLoading(true)
@@ -270,12 +265,16 @@ const Me: React.FC<MeProps> = ({
       console.error('Failed to load reads:', err)
       if (!hasBeenLoaded) setLoading(false)
     }
-  }
+  }, [viewingPubkey, activeAccount, relayPool, eventStore])
 
-  const loadLinksTab = async () => {
+  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)
@@ -310,10 +309,10 @@ 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
@@ -336,7 +335,7 @@ const Me: React.FC<MeProps> = ({
       case 'writings':
         loadWritingsTab()
         break
-      case 'reading-list':
+      case 'bookmarks':
         loadReadingListTab()
         break
       case 'reads':
@@ -346,8 +345,11 @@ const Me: React.FC<MeProps> = ({
         loadLinksTab()
         break
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeTab, viewingPubkey, refreshTrigger, bookmarks])
+  }, [viewingPubkey, activeTab, loadHighlightsTab, loadWritingsTab, loadReadingListTab, loadReadsTab, loadLinksTab])
+
+  useEffect(() => {
+    loadActiveTab()
+  }, [loadActiveTab])
 
   // Sync myHighlights from controller
   useEffect(() => {
@@ -417,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',
@@ -564,9 +566,21 @@ const Me: React.FC<MeProps> = ({
     ? 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 },
@@ -608,7 +622,7 @@ const Me: React.FC<MeProps> = ({
           </div>
         )
 
-      case 'reading-list':
+      case 'bookmarks':
         if (showSkeletons) {
           return (
             <div className="bookmarks-list">
@@ -663,7 +677,7 @@ 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'}
@@ -829,6 +843,7 @@ const Me: React.FC<MeProps> = ({
                 post={post}
                 href={getPostUrl(post)}
                 readingProgress={getWritingReadingProgress(post)}
+                hideBotByName={settings.hideBotArticlesByName !== false}
               />
             ))}
           </div>
@@ -858,9 +873,9 @@ const Me: React.FC<MeProps> = ({
             <span className="tab-label">Highlights</span>
           </button>
           <button
-            className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
-            data-tab="reading-list"
-            onClick={() => navigate('/me/reading-list')}
+            className={`me-tab ${activeTab === 'bookmarks' ? 'active' : ''}`}
+            data-tab="bookmarks"
+            onClick={() => navigate('/me/bookmarks')}
           >
             <FontAwesomeIcon icon={faBookmark} />
             <span className="tab-label">Bookmarks</span>

src/components/Profile.tsx

@@ -107,24 +107,14 @@ const Profile: React.FC<ProfileProps> = ({
   useEffect(() => {
     if (!pubkey || !relayPool || !eventStore) return
     
+    // Fetch all highlights and writings in background (no limits)
+    const relayUrls = getActiveRelayUrls(relayPool)
     
-    // Fetch highlights in background
     fetchHighlights(relayPool, pubkey, undefined, undefined, false, eventStore)
-      .then(() => {
-        // Highlights fetched
-      })
-      .catch(err => {
-        console.warn('⚠️ [Profile] Failed to fetch highlights:', err)
-      })
+      .catch(err => console.warn('⚠️ [Profile] Failed to fetch highlights:', err))
     
-    // Fetch writings in background (no limit for single user profile)
-    fetchBlogPostsFromAuthors(relayPool, [pubkey], getActiveRelayUrls(relayPool), undefined, null)
-      .then(writings => {
-        writings.forEach(w => eventStore.add(w.event))
-      })
-      .catch(err => {
-        console.warn('⚠️ [Profile] Failed to fetch writings:', 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

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/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

@@ -12,6 +12,7 @@ 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'
 
@@ -45,6 +46,10 @@ const DEFAULT_SETTINGS: UserSettings = {
   syncReadingPosition: true,
   autoMarkAsReadOnCompletion: false,
   hideBookmarksWithoutCreationDate: true,
+  ttsUseSystemLanguage: false,
+  ttsDetectContentLanguage: true,
+  ttsLanguageMode: 'content',
+  ttsDefaultSpeed: 2.1,
 }
 
 interface SettingsProps {
@@ -175,6 +180,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
         <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/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/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/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/hooks/useArticleLoader.ts

@@ -1,5 +1,11 @@
 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,9 +13,17 @@ 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
@@ -25,6 +39,7 @@ interface UseArticleLoaderProps {
 export function useArticleLoader({
   naddr,
   relayPool,
+  eventStore,
   setSelectedUrl,
   setReaderContent,
   setReaderLoading,
@@ -36,7 +51,18 @@ 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
@@ -44,67 +70,198 @@ export function useArticleLoader({
     if (!relayPool || !naddr) return
     
     const loadArticle = async () => {
+      const requestId = ++currentRequestIdRef.current
       if (!mountedRef.current) return
       
-      setReaderLoading(true)
-      setReaderContent(undefined)
       setSelectedUrl(`nostr:${naddr}`)
       setIsCollapsed(true)
       
-      try {
-        const article = await fetchArticleByNaddr(relayPool, naddr, false, settings)
-        
-        if (!mountedRef.current) return
-        
+      // 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)
-        setReaderLoading(false)
-        
-        // Fetch highlights asynchronously without blocking article display
+        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 {
           if (!mountedRef.current) return
-          
           setHighlightsLoading(true)
           setHighlights([])
-          
-          await fetchHighlightsForArticle(
-            relayPool, 
-            articleCoordinate, 
-            article.event.id,
-            (highlight) => {
-              if (!mountedRef.current) 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)
-              })
-            },
-            settings
-          )
+          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) {
+            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
+            )
+          }
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
-          if (mountedRef.current) {
+          if (mountedRef.current && currentRequestIdRef.current === requestId) {
             setHighlightsLoading(false)
           }
         }
       } catch (err) {
         console.error('Failed to load article:', err)
-        if (mountedRef.current) {
+        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>`,
@@ -120,7 +277,19 @@ export function useArticleLoader({
     return () => {
       mountedRef.current = false
     }
-    // Intentionally excluding setter functions from dependencies to prevent race conditions
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [naddr, relayPool, settings])
+  }, [
+    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

@@ -49,6 +49,8 @@ export function useExternalUrlLoader({
   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(() => {
@@ -70,6 +72,7 @@ export function useExternalUrlLoader({
     if (!relayPool || !url) return
     
     const loadExternalUrl = async () => {
+      const requestId = ++currentRequestIdRef.current
       if (!mountedRef.current) return
       
       setReaderLoading(true)
@@ -83,6 +86,7 @@ export function useExternalUrlLoader({
         const content = await fetchReadableContent(url)
         
         if (!mountedRef.current) return
+        if (currentRequestIdRef.current !== requestId) return
         
         setReaderContent(content)
         setReaderLoading(false)
@@ -114,6 +118,7 @@ export function useExternalUrlLoader({
               url,
               (highlight) => {
                 if (!mountedRef.current) return
+                if (currentRequestIdRef.current !== requestId) return
                 
                 if (seen.has(highlight.id)) return
                 seen.add(highlight.id)
@@ -131,13 +136,13 @@ export function useExternalUrlLoader({
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
-          if (mountedRef.current) {
+          if (mountedRef.current && currentRequestIdRef.current === requestId) {
             setHighlightsLoading(false)
           }
         }
       } catch (err) {
         console.error('Failed to load external URL:', err)
-        if (mountedRef.current) {
+        if (mountedRef.current && currentRequestIdRef.current === requestId) {
           const filename = getFilenameFromUrl(url)
           setReaderContent({
             title: filename,
@@ -154,9 +159,20 @@ export function useExternalUrlLoader({
     return () => {
       mountedRef.current = false
     }
-    // Intentionally excluding setter functions from dependencies to prevent race conditions
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [url, relayPool, eventStore, cachedUrlHighlights])
+  }, [
+    url,
+    relayPool,
+    eventStore,
+    cachedUrlHighlights,
+    setReaderContent,
+    setReaderLoading,
+    setIsCollapsed,
+    setSelectedUrl,
+    setHighlights,
+    setCurrentArticleCoordinate,
+    setCurrentArticleEventId,
+    setHighlightsLoading
+  ])
 
   // Keep UI highlights synced with cached store updates without reloading content
   useEffect(() => {
@@ -169,8 +185,6 @@ export function useExternalUrlLoader({
       const next = [...additions, ...prev]
       return next.sort((a, b) => b.created_at - a.created_at)
     })
-    // setHighlights is intentionally excluded from dependencies - it's stable
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [cachedUrlHighlights, url])
+  }, [cachedUrlHighlights, url, setHighlights])
 }
 

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
     }
 

src/hooks/useReadingPosition.ts

@@ -29,6 +29,7 @@ export const useReadingPosition = ({
   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) => {
@@ -36,14 +37,49 @@ export const useReadingPosition = ({
       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
-    const isInitialSave = !hasSavedOnce.current
-    
-    if (!hasSignificantChange && !hasReachedCompletion && !isInitialSave) {
-      // Not significant enough to save
+    // 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
     }
 
@@ -52,27 +88,26 @@ export const useReadingPosition = ({
       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
     }
-
-    // Always allow immediate save (including 0%)
     lastSavedPosition.current = position
     hasSavedOnce.current = true
+    lastSavedAtRef.current = Date.now()
     onSave(position)
   }, [syncEnabled, onSave, position])
 
@@ -97,13 +132,6 @@ export const useReadingPosition = ({
       const isAtBottom = scrollTop + windowHeight >= documentHeight - 5
       const clampedProgress = isAtBottom ? 1 : Math.max(0, Math.min(1, scrollProgress))
       
-      // Only log on significant changes (every 5%) to avoid flooding console
-      const prevPercent = Math.floor(position * 20) // Groups by 5%
-      const newPercent = Math.floor(clampedProgress * 20)
-      if (prevPercent !== newPercent) {
-        // Position threshold crossed
-      }
-      
       setPosition(clampedProgress)
       positionRef.current = clampedProgress
       onPositionChange?.(clampedProgress)
@@ -160,9 +188,7 @@ export const useReadingPosition = ({
         clearTimeout(completionTimerRef.current)
       }
     }
-    // position is intentionally not in deps - it's computed from scroll and would cause infinite re-renders
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold, scheduleSave])
+  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold, scheduleSave, completionHoldMs])
 
   // Reset reading complete state when enabled changes
   useEffect(() => {

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>({ renderVideoLinksAsEmbeds: true })
+  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({ renderVideoLinksAsEmbeds: true, ...loadedSettings })
-      } catch (err) {
-        console.error('Failed to load settings:', err)
-      }
-    }
-
-    loadAndWatch()
-
-    const subscription = watchSettings(eventStore, pubkey, (loadedSettings) => {
-      if (loadedSettings) setSettings({ renderVideoLinksAsEmbeds: true, ...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

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,13 +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 => {
-        
         // Check for updates periodically
         setInterval(() => {
           registration.update()
@@ -24,8 +23,6 @@ if ('serviceWorker' in navigator) {
             newWorker.addEventListener('statechange', () => {
               if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                 // New service worker available
-                
-                // Optionally show a toast notification
                 const updateAvailable = new CustomEvent('sw-update-available')
                 window.dispatchEvent(updateAvailable)
               }

src/services/articleService.ts

@@ -97,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)
 
@@ -114,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,15 +110,15 @@ 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) {
+  ): Promise<void> {
+    if (!this.relayPool) {
       return
     }
 
@@ -135,71 +128,146 @@ class BookmarkController {
       return
     }
     
-    // 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: () => {
-        // Silent error - EventLoader handles retries
       }
-    })
+    )
   }
 
   /**
-   * 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) {
+  ): Promise<void> {
+    if (!this.relayPool) {
       return
     }
 
-    if (coords.length === 0) return
+    if (coords.length === 0) {
+      return
+    }
 
-    // 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: () => {
-        // Silent error - AddressLoader handles retries
+    // 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(
@@ -244,42 +312,58 @@ class BookmarkController {
       })
 
       const allItems = [...publicItemsAll, ...privateItemsAll]
+      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>) => {
-        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)
-        ])
-
+        ]
+        
         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)))
+          .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
+          })
 
         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]),
@@ -295,7 +379,7 @@ class BookmarkController {
       const idToEvent: Map<string, NostrEvent> = new Map()
       emitBookmarks(idToEvent)
 
-      // Now fetch events progressively in background using batched hydrators
+      // Now fetch events progressively in background using local-first queries
       
       const generation = this.hydrationGeneration
       const onProgress = () => emitBookmarks(idToEvent)
@@ -310,10 +394,14 @@ 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('Failed to build bookmarks:', error)
       this.bookmarksListeners.forEach(cb => cb([]))
@@ -324,8 +412,13 @@ 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') {
       return
@@ -336,16 +429,6 @@ class BookmarkController {
     // Increment generation to cancel any in-flight hydration
     this.hydrationGeneration++
     
-    // Initialize loaders for this session
-    this.eventLoader = createEventLoader(relayPool, { 
-      eventStore: this.eventStore,
-      extraRelays: RELAYS 
-    })
-    this.addressLoader = createAddressLoader(relayPool, { 
-      eventStore: this.eventStore,
-      extraRelays: RELAYS
-    })
-    
     this.setLoading(true)
 
     try {

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 {
@@ -77,14 +81,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: note.id,
           content: '',
-          created_at: parentCreatedAt || 0,
+          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: parentCreatedAt || 0
+          listUpdatedAt: parentCreatedAt || 0
         })
       })
     }
@@ -97,14 +101,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: coordinate,
           content: '',
-          created_at: parentCreatedAt || 0,
+          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: parentCreatedAt || 0
+          listUpdatedAt: parentCreatedAt ?? null
         })
       })
     }
@@ -115,14 +119,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: `hashtag-${hashtag}`,
           content: `#${hashtag}`,
-          created_at: parentCreatedAt || 0,
+          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: parentCreatedAt || 0
+          listUpdatedAt: parentCreatedAt ?? null
         })
       })
     }
@@ -133,14 +137,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: `url-${url}`,
           content: url,
-          created_at: parentCreatedAt || 0,
+          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: parentCreatedAt || 0
+          listUpdatedAt: parentCreatedAt || 0
         })
       })
     }
@@ -149,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 || parentCreatedAt || 0,
-      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 || parentCreatedAt || 0
-    }))
+    .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
@@ -184,6 +192,9 @@ export function hydrateItems(
         }
       }
       
+      // 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,
@@ -191,7 +202,7 @@ export function hydrateItems(
         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
+        parsedContent: parsedContent || item.parsedContent
       }
     })
     .filter(item => {

src/services/bookmarkProcessing.ts

@@ -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, evt.created_at).map(i => ({
+      ...processedPub.map(i => ({
         ...i,
         sourceKind: evt.kind,
         setName: dTag,

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'
 
@@ -22,6 +22,7 @@ export interface BlogPostPreview {
  * @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 (
@@ -29,7 +30,8 @@ export const fetchBlogPostsFromAuthors = async (
   pubkeys: string[],
   relayUrls: string[],
   onPost?: (post: BlogPostPreview) => void,
-  limit: number | null = 100
+  limit: number | null = 100,
+  eventStore?: IEventStore
 ): Promise<BlogPostPreview[]> => {
   try {
     if (pubkeys.length === 0) {
@@ -45,12 +47,17 @@ export const fetchBlogPostsFromAuthors = async (
       ? { kinds: [KINDS.BlogPost], authors: pubkeys, limit }
       : { kinds: [KINDS.BlogPost], authors: pubkeys }
 
-    await queryEvents(
+    const events = await queryEvents(
       relayPool,
       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)
@@ -73,6 +80,10 @@ export const fetchBlogPostsFromAuthors = async (
       }
     )
 
+    // 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())

src/services/readingDataProcessor.ts

@@ -75,10 +75,17 @@ export function processReadingProgress(
           continue
         }
       } else if (dTag.startsWith('url:')) {
-        // It's a URL with base64url encoding
-        const encoded = dTag.replace('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(encoded.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) {

src/services/readingPositionService.ts

@@ -98,11 +98,8 @@ 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
 }
 
 /**
@@ -138,8 +135,53 @@ export async function saveReadingPosition(
   await publishEvent(relayPool, eventStore, signed)
 }
 
+/**
+ * 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,
@@ -149,101 +191,29 @@ export async function loadReadingPosition(
 ): Promise<ReadingPosition | null> {
   const dTag = generateDTag(articleIdentifier)
 
-  // Check local event store first
+  let initial: ReadingPosition | null = null
   try {
     const localEvent = await firstValueFrom(
       eventStore.replaceable(READING_PROGRESS_KIND, pubkey, dTag)
     )
     if (localEvent) {
       const content = getReadingProgressContent(localEvent)
-      if (content) {
-        // Fetch from relays in background to get any updates
-        relayPool
-          .subscription(RELAYS, {
-            kinds: [READING_PROGRESS_KIND],
-            authors: [pubkey],
-            '#d': [dTag]
-          })
-          .pipe(onlyEvents(), mapEventsToStore(eventStore))
-          .subscribe()
-        
-        return content
-      }
+      if (content) initial = content
     }
-  } catch (err) {
-    // Ignore errors and fetch from relays
+  } catch {
+    // ignore
   }
 
-  // Fetch from relays
-  const result = await fetchFromRelays(
-    relayPool,
-    eventStore,
-    pubkey,
-    READING_PROGRESS_KIND,
-    dTag,
-    getReadingProgressContent
-  )
-  
-  return result || null
-}
-
-// Helper function to fetch from relays with timeout
-async function fetchFromRelays(
-  relayPool: RelayPool,
-  eventStore: IEventStore,
-  pubkey: string,
-  kind: number,
-  dTag: string,
-  parser: (event: NostrEvent) => ReadingPosition | undefined
-): Promise<ReadingPosition | null> {
-  return new Promise((resolve) => {
-    let hasResolved = false
-    const timeout = setTimeout(() => {
-      if (!hasResolved) {
-        hasResolved = true
-        resolve(null)
-      }
-    }, 3000)
-
-    const sub = relayPool
-      .subscription(RELAYS, {
-        kinds: [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(kind, pubkey, dTag)
-              )
-              if (event) {
-                const content = parser(event)
-                resolve(content || null)
-              } else {
-                resolve(null)
-              }
-            } catch (err) {
-              resolve(null)
-            }
-          }
-        },
-        error: () => {
-          clearTimeout(timeout)
-          if (!hasResolved) {
-            hasResolved = true
-            resolve(null)
-          }
-        }
-      })
-
-    setTimeout(() => {
-      sub.unsubscribe()
-    }, 3000)
-  })
+  // Start background sync (fire-and-forget; no timeout)
+  relayPool
+    .subscription(RELAYS, {
+      kinds: [READING_PROGRESS_KIND],
+      authors: [pubkey],
+      '#d': [dTag]
+    })
+    .pipe(onlyEvents(), mapEventsToStore(eventStore))
+    .subscribe()
+
+  return initial
 }
 

src/services/readingProgressController.ts

@@ -276,10 +276,10 @@ class ReadingProgressController {
     // Process new events
     processReadingProgress(events, readsMap)
     
-    // Convert back to progress map (naddr -> progress)
+    // 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 && item.type === 'article') {
+      if (item.readingProgress !== undefined) {
         newProgressMap.set(id, item.readingProgress)
       }
     }

src/services/readsService.ts

@@ -76,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)

src/services/relayListService.ts

@@ -18,11 +18,7 @@ export async function loadUserRelayList(
   }
 ): Promise<UserRelayInfo[]> {
   try {
-    console.log('[relayListService] Loading user relay list for pubkey:', pubkey.slice(0, 16) + '...')
-    console.log('[relayListService] Available relays:', Array.from(relayPool.relays.keys()))
     
-    console.log('[relayListService] Starting query for kind 10002...')
-    const startTime = Date.now()
     
     // Try querying with streaming callback for faster results
     const events: NostrEvent[] = []
@@ -64,22 +60,13 @@ export async function loadUserRelayList(
     // Use the streaming results if we got any, otherwise fall back to the full result
     const finalEvents = events.length > 0 ? events : result
     
-    const queryTime = Date.now() - startTime
-    console.log('[relayListService] Query completed in', queryTime, 'ms')
-    
     // Also try a broader query to see if we get any events at all
-    console.log('[relayListService] Trying broader query for any kind 10002 events...')
-    const allEvents = await queryEvents(relayPool, {
+    await queryEvents(relayPool, {
       kinds: [10002],
       limit: 5
     })
-    console.log('[relayListService] Found', allEvents.length, 'total kind 10002 events from any author')
     
-
-    console.log('[relayListService] Found', finalEvents.length, 'kind 10002 events')
-    if (finalEvents.length > 0) {
-      console.log('[relayListService] Event details:', finalEvents.map(e => ({ id: e.id, created_at: e.created_at, tags: e.tags.length })))
-    }
+    
 
     if (finalEvents.length === 0) return []
 
@@ -99,7 +86,6 @@ export async function loadUserRelayList(
       }
     }
 
-    console.log('[relayListService] Parsed', relays.length, 'relays from event')
     return relays
   } catch (error) {
     console.error('Failed to load user relay list:', error)

src/services/relayManager.ts

@@ -9,6 +9,13 @@ export const ALWAYS_LOCAL_RELAYS = [
   '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
  */
@@ -46,13 +53,11 @@ export function applyRelaySetToPool(
   const currentUrls = new Set(Array.from(relayPool.relays.keys()))
   const normalizedTargetUrls = new Set(finalUrls.map(normalizeRelayUrl))
 
-  console.log('[relayManager] applyRelaySetToPool called')
-  console.log('[relayManager] Current pool has:', currentUrls.size, 'relays')
-  console.log('[relayManager] Target has:', finalUrls.length, 'relays')
+  
 
   // Add new relays (use original URLs for adding, not normalized)
   const toAdd = finalUrls.filter(url => !currentUrls.has(normalizeRelayUrl(url)))
-  console.log('[relayManager] Will add:', toAdd.length, 'relays', toAdd)
+  
   if (toAdd.length > 0) {
     relayPool.group(toAdd)
   }
@@ -71,7 +76,7 @@ export function applyRelaySetToPool(
       }
     }
   }
-  console.log('[relayManager] Will remove:', toRemove.length, 'relays', toRemove)
+  
 
   for (const url of toRemove) {
     const relay = relayPool.relays.get(url)
@@ -81,6 +86,6 @@ export function applyRelaySetToPool(
     }
   }
   
-  console.log('[relayManager] After apply, pool has:', relayPool.relays.size, 'relays')
+  
 }
 

src/services/settingsService.ts

@@ -65,92 +65,92 @@ export interface UserSettings {
   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> {
-  
-  // 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)
-      
-      // 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) {
-    // Ignore local store errors
+  } 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)
-                resolve(content || null)
-              } else {
-                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(

src/styles/components/forms.css

@@ -43,7 +43,7 @@
   word-wrap: break-word;
   text-align: var(--paragraph-alignment, justify);
 }
-.setting-select { width: 100%; padding: 0.5rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 4px; color: var(--color-text); font-size: 1rem; }
+.setting-select { width: 100%; padding: 0.5rem 1.75rem 0.5rem 0.5rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 4px; color: var(--color-text); font-size: 1rem; }
 .setting-inline .setting-select { width: auto; min-width: 200px; flex: 1; }
 .setting-select:focus { outline: none; border-color: var(--color-primary); }
 .font-select option { padding: 0.5rem; font-size: 1rem; }

src/styles/components/reader.css

@@ -35,6 +35,8 @@
 .reading-time svg { font-size: 0.875rem; }
 .highlight-indicator { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 6px; font-size: 0.875rem; color: var(--color-text); }
 .highlight-indicator svg { font-size: 0.875rem; }
+.highlight-indicator.clickable { cursor: pointer; transition: all 0.2s ease; }
+.highlight-indicator.clickable:hover { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.5); transform: translateY(-1px); }
 .reader-html { color: var(--color-text); line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; font-family: var(--reading-font); font-size: var(--reading-font-size); }
 .reader-markdown { color: var(--color-text); line-height: 1.7; font-family: var(--reading-font); font-size: var(--reading-font-size); }
 /* Ensure font inheritance */

src/styles/layout/sidebar.css

@@ -59,6 +59,8 @@
   align-items: center;
   gap: 0.5rem;
   margin-left: auto;
+  flex: 1;
+  justify-content: flex-end;
 }
 
 /* Mobile hamburger button now uses Tailwind utilities in ThreePaneLayout */
@@ -92,7 +94,7 @@
   gap: 0.5rem;
 }
 
-.profile-avatar {
+.profile-avatar-button {
   min-width: 33px;
   min-height: 33px;
   width: 33px;
@@ -108,10 +110,27 @@
   color: var(--color-text);
   box-sizing: border-box;
   padding: 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
-.profile-avatar svg { font-size: 1rem; }
+/* Mobile touch target improvements */
+@media (max-width: 768px) {
+  .profile-avatar-button {
+    min-width: var(--min-touch-target);
+    min-height: var(--min-touch-target);
+    width: var(--min-touch-target);
+    height: var(--min-touch-target);
+  }
+}
+
+.profile-avatar-button:hover {
+  background: var(--color-bg-hover);
+  border-color: var(--color-border);
+}
+
+.profile-avatar-button img { width: 100%; height: 100%; object-fit: cover; }
+.profile-avatar-button svg { font-size: 1rem; }
 
 .sidebar-header-bar .toggle-sidebar-btn {
   background: transparent;

src/sw.ts

@@ -98,10 +98,42 @@ sw.addEventListener('message', (event: ExtendableMessageEvent) => {
   }
 })
 
-// Log fetch errors for debugging (doesn't affect functionality)
+// Handle Web Share Target POST requests
 sw.addEventListener('fetch', (event: FetchEvent) => {
   const url = new URL(event.request.url)
   
+  // Handle POST to /share-target (Web Share Target API)
+  if (event.request.method === 'POST' && url.pathname === '/share-target') {
+    event.respondWith((async () => {
+      const formData = await event.request.formData()
+      const title = (formData.get('title') || '').toString()
+      const text = (formData.get('text') || '').toString()
+      // Accept multiple possible field names just in case different casings are used
+      let link = (
+        formData.get('link') ||
+        formData.get('Link') ||
+        formData.get('url') ||
+        ''
+      ).toString()
+      
+      // Android often omits url param, extract from text
+      if (!link && text) {
+        const urlMatch = text.match(/https?:\/\/[^\s]+/)
+        if (urlMatch) {
+          link = urlMatch[0]
+        }
+      }
+      
+      const queryParams = new URLSearchParams()
+      if (link) queryParams.set('link', link)
+      if (title) queryParams.set('title', title)
+      if (text) queryParams.set('text', text)
+      
+      return Response.redirect(`/share-target?${queryParams.toString()}`, 303)
+    })())
+    return
+  }
+  
   // Don't interfere with WebSocket connections (relay traffic)
   if (url.protocol === 'ws:' || url.protocol === 'wss:') {
     return

src/types/bookmarks.ts

@@ -31,7 +31,8 @@ export interface Bookmark {
 export interface IndividualBookmark {
   id: string
   content: string
-  created_at: number
+  // Timestamp when the content was created (from the content event itself)
+  created_at: number | null
   pubkey: string
   kind: number
   tags: string[][]
@@ -40,8 +41,6 @@ export interface IndividualBookmark {
   type: 'event' | 'article' | 'web'
   isPrivate?: boolean
   encryptedContent?: string
-  // When the item was added to the bookmark list (synthetic, for sorting)
-  added_at?: number
   // The kind of the source list/set that produced this bookmark (e.g., 10003, 30003, 30001, or 39701 for web)
   sourceKind?: number
   // The 'd' tag value from kind 30003 bookmark sets
@@ -50,6 +49,9 @@ export interface IndividualBookmark {
   setTitle?: string
   setDescription?: string
   setImage?: string
+  // Timestamp of the bookmark list event (best proxy for "when bookmarked")
+  // Note: This is imperfect - it's when the list was last updated, not necessarily when this item was added
+  listUpdatedAt?: number | null
 }
 
 export interface ActiveAccount {

src/utils/bookmarkUtils.tsx

@@ -4,13 +4,15 @@ import { ParsedContent, ParsedNode, IndividualBookmark } from '../types/bookmark
 import ResolvedMention from '../components/ResolvedMention'
 // Note: RichContent is imported by components directly to keep this file component-only for fast refresh
 
-export const formatDate = (timestamp: number) => {
+export const formatDate = (timestamp: number | null | undefined) => {
+  if (!timestamp || !isFinite(timestamp) || timestamp <= 0) return ''
   const date = new Date(timestamp * 1000)
   return formatDistanceToNow(date, { addSuffix: true })
 }
 
 // Ultra-compact date format for tight spaces (e.g., compact view)
-export const formatDateCompact = (timestamp: number) => {
+export const formatDateCompact = (timestamp: number | null | undefined) => {
+  if (!timestamp || !isFinite(timestamp) || timestamp <= 0) return ''
   const date = new Date(timestamp * 1000)
   const now = new Date()
   
@@ -85,9 +87,8 @@ export const renderParsedContent = (parsedContent: ParsedContent) => {
 
 // Sorting and grouping for bookmarks
 export const sortIndividualBookmarks = (items: IndividualBookmark[]) => {
-  return items
-    .slice()
-    .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
+  const getSortTime = (b: IndividualBookmark) => b.created_at ?? b.listUpdatedAt ?? -Infinity
+  return items.slice().sort((a, b) => getSortTime(b) - getSortTime(a))
 }
 
 export function groupIndividualBookmarks(items: IndividualBookmark[]) {
@@ -122,10 +123,7 @@ export function hasContent(bookmark: IndividualBookmark): boolean {
 export function hasCreationDate(bookmark: IndividualBookmark): boolean {
   if (!bookmark.created_at) return false
   // If timestamp is missing or equals current time (within 1 second), consider it invalid
-  const now = Math.floor(Date.now() / 1000)
-  const createdAt = Math.floor(bookmark.created_at)
-  // If created_at is within 1 second of now, it's likely missing/placeholder
-  return Math.abs(createdAt - now) > 1
+  return true
 }
 
 // Bookmark sets helpers (kind 30003)

src/utils/linksFromBookmarks.ts

@@ -51,7 +51,7 @@ export function deriveLinksFromBookmarks(bookmarks: Bookmark[]): ReadItem[] {
           summary,
           image,
           readingProgress: 0,
-          readingTimestamp: bookmark.added_at || bookmark.created_at
+          readingTimestamp: bookmark.created_at ?? undefined
         }
         
         linksMap.set(url, item)

src/utils/readsFromBookmarks.ts

@@ -49,7 +49,7 @@ export function deriveReadsFromBookmarks(bookmarks: Bookmark[]): ReadItem[] {
         source: 'bookmark',
         type: 'article',
         readingProgress: 0,
-        readingTimestamp: bookmark.added_at || bookmark.created_at,
+        readingTimestamp: bookmark.created_at ?? undefined,
         title,
         summary,
         image,

vite.config.ts

@@ -114,6 +114,17 @@ export default defineConfig({
         background_color: '#0b1220',
         orientation: 'any',
         categories: ['productivity', 'social', 'utilities'],
+        // Web Share Target configuration so the installed PWA shows up in the system share sheet
+        share_target: {
+          action: '/share-target',
+          method: 'POST',
+          enctype: 'multipart/form-data',
+          params: {
+            title: 'title',
+            text: 'text',
+            url: 'link'
+          }
+        },
         icons: [
           { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
           { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },