chore: bump version to 0.10.23

Merge pull request #26 from dergigi/tts-fixes-and-stuff
Fix highlight loading issues and improve article performance
2026-02-16 12:34:41 +01:00 · 2025-10-25 01:03:57 +02:00 · 2025-10-25 01:03:35 +02:00 · 2025-10-25 01:02:42 +02:00 · 2025-10-25 01:00:36 +02:00 · 2025-10-25 00:59:26 +02:00
50 changed files with 1401 additions and 908 deletions
--- a/.cursor/rules/fetching-data-with-controllers.mdc
+++ b/.cursor/rules/fetching-data-with-controllers.mdc
@@ -3,8 +3,11 @@ description: fetching data from relays
 alwaysApply: false
 ---

+# Fetching Data with Controllers
+
 We fetch data from relays using controllers:
- Start controllers immediatly; don’t await.
+
+- 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.
--- a/.cursor/rules/mobile-first-ui-ux.mdc
+++ b/.cursor/rules/mobile-first-ui-ux.mdc
@@ -3,6 +3,8 @@ description: anything related to UI/UX
 alwaysApply: false
 ---

+# Mobile-First UI/UX
+
 This is a mobile-first application. All UI elements should be designed with that in mind. The application should work well on small screens, including older smartphones. The UX should be immaculate on mobile, even when in flight mode. (We use local caches and local relays, so that app works offline too.)

 Let's not show too many error messages, and more importantly: let's not make them red. Nothing is ever this tragic.
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,28 +7,246 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+## [0.10.22] - 2025-01-27
+
 ### Added

- Comprehensive debug logging for reading position system
-  - All position restore, save, and suppression events logged with `[reading-position]` prefix
-  - Emoji indicators for easy visual scanning (🎯 restore, 💾 save, 🛡️ suppression, etc.)
-  - Detailed metrics for troubleshooting scroll behavior
+- Mobile-optimized tab interface for `/my` and `/p/` pages
+  - Tab text labels hidden on mobile screens (≤768px) to save space
+  - Shows only icons for highlights, bookmarks, reads, links, and writings tabs
+  - Maintains full functionality while improving mobile UX

 ### Changed

- Reading position auto-save now uses simple 3-second debounce
-  - Saves only after 3s of no scrolling (was 15s minimum interval)
-  - Much less aggressive, reduces relay traffic
-  - Still saves instantly at 100% completion
+- Updated brand tagline from "Nostr Bookmarks" to "Read, Highlight, Explore"
+  - Updated across HTML meta tags, PWA manifest, and Open Graph metadata
+  - Better reflects core functionality: reading, highlighting, and exploring content
+- Reordered bookmarks bar navigation buttons
+  - New order: Home, Explore, Settings (previously: Home, Settings, Explore)
+- Moved highlight button higher up on screen
+  - Changed position from `bottom: 32px` to `bottom: 80px` for better accessibility

 ### Fixed

- Reading position restore no longer causes jumpy scrolling
-  - Stabilized position collector buffers updates for ~700ms, then applies best one (newest timestamp, tie-break by highest progress)
-  - Auto-saves suppressed for 1.5s after programmatic restore to prevent feedback loops
-  - Tiny scroll deltas (<48px or <5%) ignored to avoid unnecessary movement
-  - Instant scroll (behavior: auto) instead of smooth animation reduces perceived oscillation
-  - Fixes jumpy behavior from conflicting relay updates and save-restore loops
+- Mobile sidebar not closing when navigating to profile sections
+  - Fixed issue where clicking "My Reads", "My Highlights", etc. didn't close mobile sidebar
+  - Added mobile sidebar close logic to all navigation buttons
+  - Improved mobile navigation experience
+- Removed unnecessary versioning from reading progress implementation
+  - Simplified reading progress events by removing `ver` field
+  - Updated cache key to remove version suffix
+  - Cleaner, more maintainable code
+
+## [0.10.21] - 2025-10-23
+
+### Fixed
+
+- Reading position tracking for internal event URLs
+  - Prevents tracking for `nostr-event:` sentinel URLs (internal convention, not a valid Nostr URI per NIP-21)
+  - Fixes "String must be lowercase or uppercase" error when loading base64-encoded event URLs
+  - These internal sentinels are no longer saved to reading position data
+- Compact bookmark view display
+  - Articles now show title instead of summary in compact view
+  - Extracts article title from NIP-23 metadata tags
+  - Removed unused `articleSummary` prop to keep code DRY
+- Bookmark deduplication in profile view
+  - Same article appearing in multiple bookmark lists/sets now displays only once
+  - Uses coordinate-based deduplication (`kind:pubkey:identifier`) for articles
+  - Applies `dedupeBookmarksById` when flattening bookmarks from different sources
+
+## [0.10.20] - 2025-10-23
+
+### Added
+
+- Web Bookmarks section now appears first when bookmarks are grouped by source
+  - Provides quicker access to external URL bookmarks
+  - Better organization for mixed bookmark collections
+
+### Fixed
+
+- Mobile scroll position preservation when toggling highlights panel
+  - Opening/closing the highlights sidebar no longer resets scroll to top
+  - Scroll position is saved before locking and restored after unlocking
+  - Uses `requestAnimationFrame` to ensure DOM updates before restoring
+- Infinite loop in reading position tracking
+  - Fixed "Maximum update depth exceeded" error in `useReadingPosition` hook
+  - Callbacks now stored in refs to avoid dependency array issues
+  - Prevents unnecessary re-renders during scroll tracking
+- Skeleton loading state for articles with zero highlights
+  - Articles without highlights no longer show infinite loading skeletons
+  - Properly transitions to empty state message
+- Navigation to bookmarked articles
+  - Clicking bookmarked kind:30023 articles now navigates to `/a/:naddr` route
+  - Fixes issue where clicking showed "Select a bookmark" message instead
+  - Applies to both compact view and bookmark item interactions
+
+## [0.10.19] - 2025-10-23
+
+### Added
+
+- Profile dropdown menu in sidebar header
+  - Click profile picture to access quick navigation menu
+  - Menu items: My Highlights, My Bookmarks, My Reads, My Links, My Writings
+  - Logout option included with separator
+  - Click outside to close
+  - Smooth slide-in animation
+
+### Changed
+
+- Profile picture interaction updated
+  - Now triggers dropdown menu instead of navigating to profile page
+  - More efficient access to all profile sections
+- Collapse buttons repositioned for symmetry
+  - Highlights collapse button moved to left side of header
+  - Both bookmarks and highlights collapse buttons now left-aligned
+  - Consistent visual hierarchy across panels
+- Grouping toggle button repositioned
+  - Moved from right/center to left side
+  - Now next to support button (orange heart)
+  - Better logical grouping of controls
+- Collapse button styling standardized
+  - Highlights collapse button now matches bookmarks style
+  - Consistent 33x33px size, border radius, and hover states
+  - Uses native button element for better consistency
+
+### Removed
+
+- Redundant logout button from sidebar header
+  - Previously next to Explore button
+  - Now only accessible via profile dropdown menu
+- Refresh buttons from sidebars
+  - Removed from bookmarks sidebar
+  - Removed from highlights sidebar
+  - Pull-to-refresh functionality remains available
+
+### Fixed
+
+- Cleaned up unused component props and parameters
+  - Removed `lastFetchTime` from BookmarkList
+  - Removed `loading` and `onRefresh` from HighlightsPanelHeader
+  - All linting errors resolved
+  - Type checking passing
+
+## [0.10.18] - 2025-10-23
+
+### Changed
+
+- User profile routes renamed from `/me` to `/my`
+  - `/my/highlights` - User's highlights
+  - `/my/bookmarks` - User's bookmarks
+  - `/my/reads` - Nostr-native articles with reading progress
+  - `/my/links` - External URLs with reading progress
+  - `/my/writings` - User's published articles
+  - All navigation, tabs, and internal links updated
+  - Documentation updated to reflect new paths
+
+### Fixed
+
+- `/my/writings` now displays all user writings
+  - Removed incremental loading with `since` filters from writingsController
+  - Controller now fetches ALL writings without limits
+  - Ensures complete results on profile and my pages
+- `/my/highlights` now displays all user highlights
+  - Removed incremental loading with `since` filters from highlightsController
+  - Controller now fetches ALL highlights without limits
+  - Consistent behavior across all profile views
+
+### Refactored
+
+- Centralized data fetching in controllers
+  - Removed duplicate background fetch logic from Me.tsx and Profile.tsx
+  - All writings fetching now handled by writingsController
+  - All highlights fetching now handled by highlightsController
+  - Single source of truth following controller pattern: stream, dedupe, store, emit
+  - Cleaner, more maintainable code (DRY principle)
+
+## [0.10.17] - 2025-10-23
+
+### Added
+
+- Setting to control auto-scroll to reading position
+  - New toggle in Settings > Reading Experience
+  - Allows users to disable automatic scroll restoration
+  - Defaults to enabled (preserves existing behavior)
+
+### Fixed
+
+- Blockquote styling on mobile devices
+  - Added equal right padding to match left padding (2rem on both sides)
+  - Prevents awkward text cutoff on narrow screens
+- Timestamp clicks in highlight cards now navigate within app
+  - Articles (kind:30023) open via `/a/{naddr}` route
+  - External URLs open via `/r/{encodedUrl}` route
+  - Previously opened external search portal (ants.sh)
+  - Highlight automatically scrolls into view with sidebar open
+- Hero images now properly extend edge-to-edge on mobile
+  - Adjusted negative margins to match new reader padding
+  - Image bleeds to screen edges while text maintains comfortable margins
+- Article relay links now open via `/a/` path instead of `/r/`
+  - Ensures nostr-native articles route correctly
+  - External links continue to use `/r/` path
+
+### Changed
+
+- Mobile reader padding increased for better readability
+  - Horizontal padding increased from 0.5rem to 1rem
+  - Title, summary, and body text now properly aligned
+  - More comfortable reading experience on small screens
+- Reading position save interval reduced from 3s to 1s
+  - More frequent auto-saves during active reading
+  - Better preservation of reading progress
+
+## [0.10.16] - 2025-10-22
+
+### Fixed
+
+- Reading position auto-save now works correctly during continuous scrolling
+  - Fixed critical bug where save timer was cleared when tracking toggled
+  - Timer now persists across tracking state changes
+  - Saves fire reliably every 3 seconds during active reading
+  - Throttle mechanism now works as intended
+- Reading position tracking stability improved
+  - Tracking state no longer toggles erratically
+  - Content stability checks refined to prevent false negatives
+  - Infinite loop fixed in position save handler
+
+### Changed
+
+- Reading position save mechanism changed from debounce to throttle
+  - Ensures saves happen at regular 3-second intervals during continuous scrolling
+  - Previous debounce approach could skip saves during slow continuous scrolling
+  - More predictable save behavior for users
+- Simplified reading position logic by removing unused complexity
+  - Removed 5% delta requirement for scheduling saves
+  - Removed unnecessary state tracking (lastSavedPosition, hasSavedOnce, lastSavedAtRef)
+  - Cleaner, more maintainable code
+
+### Fixed
+
+- Highlights now scroll into view when clicked from `/my/highlights` page
+  - Navigation state properly passes highlight ID and openHighlights flag
+  - Works for both article links and external URL links
+
+## [0.10.15] - 2025-01-22
+
+### Changed
+
+- Reading position restore now uses pre-loaded data from controller
+  - No longer fetches position from scratch when opening articles
+  - Uses position already loaded and displayed on bookmark cards
+  - Faster restore with no network wait
+  - Simpler code without stabilization window complexity
+- Reading position scroll animation restored to smooth behavior
+  - Changed from instant jump back to smooth animated scroll
+  - Better user experience when restoring position
+
+### Fixed
+
+- Reading position no longer saves 0% during back navigation on mobile
+  - Removed save-on-unmount behavior that was error-prone
+  - Browser scroll-to-top during back gesture no longer overwrites progress
+  - Auto-save with 3-second debounce is sufficient for normal reading
+  - Prevents accidental reset of reading progress when navigating away

 ## [0.10.14] - 2025-01-27

@@ -130,8 +348,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### 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
+- Bookmark URL changed from `/my/reading-list` to `/my/bookmarks`
+- Router updated to handle `/my/reading-list` → `/my/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
@@ -237,7 +455,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Fixed

- Tab switching regression on `/me` page
+- Tab switching regression on `/my` 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
@@ -595,7 +813,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Changed

- `/me/bookmarks` tab now displays in cards view only
+- `/my/bookmarks` tab now displays in cards view only
  - Removed view mode toggle buttons (compact, large) from bookmarks tab
  - Cards view provides optimal bookmark browsing experience
  - Grouping toggle (grouped/flat) still available
@@ -708,7 +926,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Fixed

- Prevent "No highlights yet" flash on `/me/highlights` page
+- Prevent "No highlights yet" flash on `/my/highlights` page
 - Force React to remount tab content when switching tabs for proper state management
 - Deduplicate blog posts by author:d-tag instead of event ID for better accuracy
 - Show skeleton placeholders while highlights are loading for better UX
@@ -916,7 +1134,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
  - Filter icons colored when active (blue for most, green for completed)
  - URL routing support for reading progress filters
  - Reading progress filters available in Archive tab and bookmarks sidebar
- Reads and Links tabs on `/me` page
+- Reads and Links tabs on `/my` page
  - Reads tab shows nostr-native articles with reading progress
  - Links tab shows external URLs with reading progress
  - Both tabs populate instantly from bookmarks for fast loading
@@ -962,7 +1180,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 - Bookmark filter buttons by content type (articles, videos, images, web links)
  - Filter bookmarks by their content type on bookmarks sidebar
-  - Filters also available on `/me` page bookmarks tab
+  - Filters also available on `/my` page bookmarks tab
  - Separate filter for external articles with link icon
  - Multiple filters can be active simultaneously
 - Private Bookmarks section for encrypted legacy bookmarks
@@ -976,7 +1194,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
  - Better categorization of bookmark types
 - Bookmark filter button styling refined
  - Reduced whitespace around bookmark filters for cleaner layout
-  - Dramatically reduced whitespace on both sidebar and `/me` page
+  - Dramatically reduced whitespace on both sidebar and `/my` page
 - Lock icon removed from individual bookmarks
  - Encryption status now indicated by section grouping
  - Cleaner bookmark item appearance
@@ -1143,7 +1361,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
  - Camera icon for image bookmarks
  - Sticky note icon for text-only bookmarks without URLs
 - Bookmark grouping and sections
-  - Grouped sections in sidebar and `/me` reading-list
+  - Grouped sections in sidebar and `/my` reading-list
  - Web bookmarks, default bookmarks, and legacy bookmarks in separate sections
  - Grouping and sorting helpers for organizing bookmark sections
 - Adaptive text color for publication date over hero images
@@ -1206,7 +1424,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed

 - Mobile bookmark button visibility across all pages
-  - Now visible on `/p/` (profile), `/explore`, `/me`, and `/support` pages
+  - Now visible on `/p/` (profile), `/explore`, `/my`, and `/support` pages
  - Only hidden on settings page or when scrolling down while reading
  - Prevents users from getting stuck without navigation options
 - Mobile highlights button behavior at page top
@@ -1387,7 +1605,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 - Highlights tab on `/explore` page
  - View highlights from friends and followed users
-  - Tab structure matching `/me` and profile pages
+  - Tab structure matching `/my` and profile pages
  - Grid layout for highlights with cards
  - Highlights shown first, writings second
  - Clicking highlight opens source article and scrolls to position
@@ -1544,7 +1762,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Added

- Writings tab on `/me` page to display user's published articles
+- Writings tab on `/my` page to display user's published articles
 - Comprehensive headline styling (h1-h6) with Tailwind typography
 - List styling for ordered and unordered lists in articles
 - Blockquote styling with indentation and italics
@@ -1567,7 +1785,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Horizontal overflow from code blocks and wide content on mobile
 - Settings view now mobile-friendly with proper width constraints
 - Long relay URLs no longer cause horizontal overflow on mobile
- Sidebar/highlights toggle buttons hidden on settings/explore/me pages
+- Sidebar/highlights toggle buttons hidden on settings/explore/my pages
 - Video titles now show filename instead of 'Error Loading Content'
 - AddBookmarkModal z-index issue fixed using React Portal
 - Highlight matching for text spanning multiple DOM nodes/inline elements
@@ -1622,7 +1840,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - YouTube video metadata extraction with title, description, and captions
 - Responsive video player with aspect ratio support
 - Thumbnail images in compact view
- URL routing for /me page tabs
+- URL routing for /my page tabs
 - Bookmark navigation in reading list
 - Video duration display for video URLs
 - Three-dot menu for videos with open/native/copy/share actions
@@ -1652,7 +1870,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Style

- Hide tab counts on mobile for /me page
+- Hide tab counts on mobile for /my page
 - Remove max-width on main pane, constrain reader instead
 - Full width layout for videos
 - Reader-video specific styles
@@ -1665,11 +1883,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Prism.js syntax highlighting for code blocks
 - Inline image rendering in nostr-native blog posts
 - Image placeholders on blog post cards in `/explore`
- Caching on `/me` page for faster loading
+- Caching on `/my` page for faster loading

 ### Changed

- Reading List on `/me` now uses the same components as the bookmarks sidebar
+- Reading List on `/my` now uses the same components as the bookmarks sidebar
 - Improve bookmarks sidebar visual design
 - Make article menu button more subtle by removing border

@@ -1689,8 +1907,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Added

- `/me` page with tabbed layout featuring Highlights, Reading List, and Library tabs
- Two-pane layout for `/me` page with article sources and highlights
+- `/my` page with tabbed layout featuring Highlights, Reading List, and Library tabs
+- Two-pane layout for `/my` page with article sources and highlights
 - Custom FontAwesome Pro books icon for Archive tab
 - CompactButton component for highlight cards
 - Instant mark-as-read functionality with checkmark animation and read status checking
@@ -1699,7 +1917,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 - Rename Library tab to Archive
 - Move highlight timestamp to top-right corner of cards
- Replace username with AuthorCard component on `/me` page
+- Replace username with AuthorCard component on `/my` page
 - Use user's custom highlight color for Highlights tab
 - Render library articles using BlogPostCard component for consistency
 - Use faBooks icon for Mark as Read button
@@ -1719,12 +1937,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Style

- Match `/me` profile card width to highlight cards
- Improve Me page mobile tabs and avoid overlap with sidebar buttons
+- Match `/my` profile card width to highlight cards
+- Improve My page mobile tabs and avoid overlap with sidebar buttons
 - Reduce margins/paddings to make highlight cards more compact
 - Tighten vertical spacing on highlight cards
 - Left-align text inside author card
- Constrain `/me` page content width to match author card (600px)
+- Constrain `/my` page content width to match author card (600px)
 - Improve tab border styling for dark theme
 - Make relay indicator match CompactButton (same look as menu)
 - Align relay indicator within footer with symmetric spacing
@@ -1829,7 +2047,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Highlights: merge remote results after local for article/url
 - Explore: always query remote relays after local; stream merge into UI
 - Improve mobile touch targets for highlight icons
- Color `/me` highlights with "my highlights" color setting
+- Color `/my` highlights with "my highlights" color setting

 ### Performance

@@ -1861,7 +2079,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
  - Confirmation dialog prevents accidental deletions
  - Styled to match relay indicator (subtle, same size)
  - Removes highlights from UI immediately after deletion request
- `/me` page showing user's recent highlights
+- `/my` page showing user's recent highlights
  - Accessible by clicking profile picture in bookmark sidebar
  - Displays all highlights created by the logged-in user
  - Uses same rendering as Settings and Explore pages
--- a/FEATURES.md
+++ b/FEATURES.md
@@ -40,7 +40,7 @@

 - **Explore**: Discover friends' highlights and writings, plus a "nostrverse" feed.
 - **Filters**: Visibility toggles (mine, friends, nostrverse) apply to Explore highlights.
- **Profiles**: View your own (`/me`) or other users (`/p/:npub`) with tabs for Highlights, Bookmarks, Archive, and Writings.
+- **Profiles**: View your own (`/my`) or other users (`/p/:npub`) with tabs for Highlights, Bookmarks, Archive, and Writings.

 ## Support

--- a/TAILWIND_MIGRATION.md
+++ b/TAILWIND_MIGRATION.md
@@ -1,188 +0,0 @@
-# Tailwind CSS Migration Status
-
-## ✅ Completed (Core Infrastructure)
-
-### Phase 1: Setup & Foundation
- [x] Install Tailwind CSS with PostCSS and Autoprefixer
- [x] Configure `tailwind.config.js` with content globs and custom keyframes
- [x] Create `src/styles/tailwind.css` with base/components/utilities
- [x] Import Tailwind before existing CSS in `main.tsx`
- [x] Enable Tailwind preflight (CSS reset)
-
-### Phase 2: Base Styles Reconciliation
- [x] Add CSS variables for user-settable theme colors
-  - `--highlight-color-mine`, `--highlight-color-friends`, `--highlight-color-nostrverse`
-  - `--reading-font`, `--reading-font-size`
- [x] Simplify `global.css` to work with Tailwind preflight
- [x] Remove redundant base styles handled by Tailwind
- [x] Keep app-specific overrides (mobile sidebar lock, loading states)
-
-### Phase 3: Layout System Refactor ⭐ **CRITICAL FIX**
- [x] Switch from pane-scrolling to document-scrolling
- [x] Make sidebars sticky on desktop (`position: sticky`)
- [x] Update `app.css` to remove fixed container heights
- [x] Update `ThreePaneLayout.tsx` to use window scroll
- [x] Fix reading position tracking to work with document scroll
- [x] Maintain mobile overlay behavior
-
-### Phase 4: Component Migrations
- [x] **ReadingProgressIndicator**: Full Tailwind conversion
-  - Removed 80+ lines of CSS
-  - Added shimmer animation to Tailwind config
-  - Z-index layering maintained (1102)
-  
- [x] **Mobile UI Elements**: Tailwind utilities
-  - Mobile hamburger button
-  - Mobile highlights button  
-  - Mobile backdrop
-  - Removed 60+ lines of CSS
-
- [x] **App Container**: Tailwind utilities
-  - Responsive padding (p-0 md:p-4)
-  - Min-height viewport support
-
-## 📊 Impact & Metrics
-
-### Lines of CSS Removed
- `global.css`: ~50 lines removed
- `reader.css`: ~80 lines removed (progress indicator)
- `app.css`: ~30 lines removed (mobile buttons/backdrop)
- `sidebar.css`: ~30 lines removed (mobile hamburger)
- **Total**: ~190 lines removed
-
-### Key Achievements
-1. **Fixed Core Issue**: Reading position tracking now works correctly with document scroll
-2. **Tailwind Integration**: Fully functional with preflight enabled
-3. **No Breaking Changes**: All existing functionality preserved
-4. **Type Safety**: TypeScript checks passing
-5. **Lint Clean**: ESLint checks passing
-6. **Responsive**: Mobile/tablet/desktop layouts working
-
-## 🔄 Remaining Work (Incremental)
-
-The following migrations are **optional enhancements** that can be done as components are touched:
-
-### High-Value Components
- [ ] **ContentPanel** - Large component, high impact
-  - Reader header, meta info, loading states
-  - Mark as read button
-  - Article/video menus
-  
- [ ] **BookmarkList & BookmarkItem** - Core UI
-  - Card layouts (compact/cards/large views)
-  - Bookmark metadata display
-  - Interactive states
-
- [ ] **HighlightsPanel** - Feature-rich
-  - Header with toggles
-  - Highlight items
-  - Level-based styling
-
- [ ] **Settings Components** - Forms & controls
-  - Color pickers
-  - Font selectors
-  - Toggle switches
-  - Sliders
-
-### CSS Files to Prune
- `src/index.css` - Contains many inline bookmark/highlight styles (~3000+ lines)
- `src/styles/components/cards.css` - Bookmark card styles
- `src/styles/components/modals.css` - Modal dialogs
- `src/styles/layout/highlights.css` - Highlight panel layout
-
-## 🎯 Migration Strategy
-
-### For New Components
-Use Tailwind utilities from the start. Reference:
-```tsx
-// Good: Tailwind utilities
-<div className="flex items-center gap-2 p-4 bg-gray-800 rounded-lg">
-  
-// Avoid: New CSS classes
-<div className="custom-component">
-```
-
-### For Existing Components
-Migrate incrementally when touching files:
-1. Replace layout utilities (flex, grid, spacing, sizing)
-2. Replace color/background utilities
-3. Replace typography utilities
-4. Replace responsive variants
-5. Remove old CSS rules
-6. Keep file under 210 lines
-
-### CSS Variable Usage
-Dynamic values should still use CSS variables or inline styles:
-```tsx
-// User-settable colors
-style={{ backgroundColor: settings.highlightColorMine }}
-
-// Or reference CSS variable
-className="bg-[var(--highlight-color-mine)]"
-```
-
-## 📝 Technical Notes
-
-### Z-Index Layering
- Mobile sidepanes: `z-[1001]`
- Mobile backdrop: `z-[999]`
- Progress indicator: `z-[1102]`
- Mobile buttons: `z-[900]`
- Relay status: `z-[999]`
- Modals: `z-[10000]`
-
-### Responsive Breakpoints
- Mobile: `< 768px`
- Tablet: `768px - 1024px`
- Desktop: `> 1024px`
-
-Use Tailwind: `md:` (768px), `lg:` (1024px)
-
-### Safe Area Insets
-Mobile notch support:
-```tsx
-style={{ 
-  top: 'calc(1rem + env(safe-area-inset-top))',
-  left: 'calc(1rem + env(safe-area-inset-left))'
-}}
-```
-
-### Custom Animations
-Add to `tailwind.config.js`:
-```js
-keyframes: {
-  shimmer: {
-    '0%': { transform: 'translateX(-100%)' },
-    '100%': { transform: 'translateX(100%)' },
-  },
-}
-```
-
-## ✅ Success Criteria Met
-
- [x] Tailwind CSS fully integrated and functional
- [x] Document scrolling working correctly
- [x] Reading position tracking accurate
- [x] Progress indicator always visible
- [x] No TypeScript errors
- [x] No linting errors
- [x] Mobile responsiveness maintained
- [x] Theme colors (user settings) working
- [x] All existing features functional
-
-## 🚀 Next Steps
-
-1. **Ship It**: Current state is production-ready
-2. **Incremental Migration**: Convert components as you touch them
-3. **Monitor**: Watch for any CSS conflicts
-4. **Cleanup**: Eventually remove unused CSS files
-5. **Document**: Update component docs with Tailwind patterns
-
---
-
-**Status**: ✅ **CORE MIGRATION COMPLETE**  
-**Date**: 2025-01-14  
-**Commits**: 8 conventional commits  
-**Lines Removed**: ~190 lines of CSS  
-**Breaking Changes**: None
-
--- a/api/article-og.ts
+++ b/api/article-og.ts
@@ -147,7 +147,7 @@ function generateHtml(naddr: string, meta: ArticleMetadata | null): string {
  const baseUrl = 'https://read.withboris.com'
  const articleUrl = `${baseUrl}/a/${naddr}`
  
-  const title = meta?.title || 'Boris – Nostr Bookmarks'
+  const title = meta?.title || 'Boris – Read, Highlight, Explore'
  const description = meta?.summary || 'Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.'
  const image = meta?.image?.startsWith('http') ? meta.image : `${baseUrl}${meta?.image || '/boris-social-1200.png'}`
  const author = meta?.author || 'Boris'
--- a/api/video-meta.ts
+++ b/api/video-meta.ts
@@ -94,7 +94,7 @@ async function pickCaptions(videoID: string, preferredLangs: string[], manualFir
  return null
 }

-async function getVimeoMetadata(videoId: string): Promise<{ title: string; description: string }> {
+async function getVimeoMetadata(videoId: string): Promise<{ title: string; description: string; thumbnail_url?: string }> {
  const vimeoUrl = `https://vimeo.com/${videoId}`
  const oembedUrl = `https://vimeo.com/api/oembed.json?url=${encodeURIComponent(vimeoUrl)}`
  
@@ -107,7 +107,8 @@ async function getVimeoMetadata(videoId: string): Promise<{ title: string; descr
  
  return {
    title: data.title || '',
-    description: data.description || ''
+    description: data.description || '',
+    thumbnail_url: data.thumbnail_url || ''
  }
 }

@@ -147,9 +148,28 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
  try {
    if (videoInfo.source === 'youtube') {
      // YouTube handling
-      // Note: getVideoDetails doesn't exist in the library, so we use a simplified approach
-      const title = ''
-      const description = ''
+      // Fetch basic metadata from YouTube page
+      let title = ''
+      let description = ''
+      
+      try {
+        const response = await fetch(`https://www.youtube.com/watch?v=${videoInfo.id}`)
+        if (response.ok) {
+          const html = await response.text()
+          // Extract title from HTML
+          const titleMatch = html.match(/<title>([^<]+)<\/title>/)
+          if (titleMatch) {
+            title = titleMatch[1].replace(' - YouTube', '').trim()
+          }
+          // Extract description from meta tag
+          const descMatch = html.match(/<meta name="description" content="([^"]+)"/)
+          if (descMatch) {
+            description = descMatch[1].trim()
+          }
+        }
+      } catch (error) {
+        console.warn('Failed to fetch YouTube metadata:', error)
+      }

      // Language order: manual en -> uiLocale -> lang -> any manual, then auto with same order
      const langs: string[] = Array.from(new Set(['en', uiLocale, lang].filter(Boolean) as string[]))
@@ -178,11 +198,12 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
      return ok(res, response)
    } else if (videoInfo.source === 'vimeo') {
      // Vimeo handling
-      const { title, description } = await getVimeoMetadata(videoInfo.id)
+      const { title, description, thumbnail_url } = await getVimeoMetadata(videoInfo.id)
      
      const response = {
        title,
        description,
+        thumbnail_url,
        captions: [], // Vimeo doesn't provide captions through oEmbed API
        transcript: '', // No transcript available
        lang: 'en', // Default language
--- a/api/youtube-meta.ts
+++ b/api/youtube-meta.ts
@@ -63,10 +63,28 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
  }

  try {
-    // Since getVideoDetails doesn't exist, we'll use a simple approach
-    // In a real implementation, you might want to use YouTube's API or other methods
-    const title = '' // Will be populated from captions or other sources
-    const description = ''
+    // Fetch basic metadata from YouTube page
+    let title = ''
+    let description = ''
+    
+    try {
+      const response = await fetch(`https://www.youtube.com/watch?v=${videoId}`)
+      if (response.ok) {
+        const html = await response.text()
+        // Extract title from HTML
+        const titleMatch = html.match(/<title>([^<]+)<\/title>/)
+        if (titleMatch) {
+          title = titleMatch[1].replace(' - YouTube', '').trim()
+        }
+        // Extract description from meta tag
+        const descMatch = html.match(/<meta name="description" content="([^"]+)"/)
+        if (descMatch) {
+          description = descMatch[1].trim()
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to fetch YouTube metadata:', error)
+    }

    // Language order: manual en -> uiLocale -> lang -> any manual, then auto with same order
    const langs: string[] = Array.from(new Set(['en', uiLocale, lang].filter(Boolean) as string[]))
--- a/index.html
+++ b/index.html
@@ -9,14 +9,14 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="theme-color" content="#0f172a" />
    <link rel="manifest" href="/manifest.webmanifest" />
-    <title>Boris - Nostr Bookmarks</title>
+    <title>Boris - Read, Highlight, Explore</title>
    <meta name="description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
    <link rel="canonical" href="https://read.withboris.com/" />
    
    <!-- Open Graph / Social Media -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://read.withboris.com/" />
-    <meta property="og:title" content="Boris - Nostr Bookmarks" />
+    <meta property="og:title" content="Boris - Read, Highlight, Explore" />
    <meta property="og:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
    <meta property="og:image" content="https://read.withboris.com/boris-social-1200.png" />
    <meta property="og:site_name" content="Boris" />
@@ -24,7 +24,7 @@
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://read.withboris.com/" />
-    <meta name="twitter:title" content="Boris - Nostr Bookmarks" />
+    <meta name="twitter:title" content="Boris - Read, Highlight, Explore" />
    <meta name="twitter:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
    <meta name="twitter:image" content="https://read.withboris.com/boris-social-1200.png" />
    
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "boris",
-  "version": "0.10.9",
+  "version": "0.10.19",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "boris",
-      "version": "0.10.9",
+      "version": "0.10.19",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^7.1.0",
        "@fortawesome/free-regular-svg-icons": "^7.1.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "boris",
-  "version": "0.10.15",
+  "version": "0.10.23",
  "description": "A minimal nostr client for bookmark management",
  "homepage": "https://read.withboris.com/",
  "type": "module",
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -1,5 +1,5 @@
 {
-  "name": "Boris - Nostr Bookmarks",
+  "name": "Boris - Read, Highlight, Explore",
  "short_name": "Boris",
  "description": "Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.",
  "start_url": "/",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -237,11 +237,11 @@ function AppRoutes({
        } 
      />
      <Route 
-        path="/me" 
-        element={<Navigate to="/me/highlights" replace />} 
+        path="/my" 
+        element={<Navigate to="/my/highlights" replace />} 
      />
      <Route 
-        path="/me/highlights" 
+        path="/my/highlights" 
        element={
          <Bookmarks 
            relayPool={relayPool}
@@ -253,7 +253,7 @@ function AppRoutes({
        } 
      />
      <Route 
-        path="/me/bookmarks" 
+        path="/my/bookmarks" 
        element={
          <Bookmarks 
            relayPool={relayPool}
@@ -265,7 +265,7 @@ function AppRoutes({
        } 
      />
      <Route 
-        path="/me/reads" 
+        path="/my/reads" 
        element={
          <Bookmarks 
            relayPool={relayPool}
@@ -277,7 +277,7 @@ function AppRoutes({
        } 
      />
      <Route 
-        path="/me/reads/:filter" 
+        path="/my/reads/:filter" 
        element={
          <Bookmarks 
            relayPool={relayPool}
@@ -289,7 +289,7 @@ function AppRoutes({
        } 
      />
      <Route 
-        path="/me/links" 
+        path="/my/links" 
        element={
          <Bookmarks 
            relayPool={relayPool}
@@ -301,7 +301,7 @@ function AppRoutes({
        } 
      />
      <Route 
-        path="/me/links/:filter" 
+        path="/my/links/:filter" 
        element={
          <Bookmarks 
            relayPool={relayPool}
@@ -313,7 +313,7 @@ function AppRoutes({
        } 
      />
      <Route 
-        path="/me/writings" 
+        path="/my/writings" 
        element={
          <Bookmarks 
            relayPool={relayPool}
--- a/src/components/BookmarkItem.tsx
+++ b/src/components/BookmarkItem.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { faNewspaper, faStickyNote, faCirclePlay, faCamera, faFileLines } from '@fortawesome/free-regular-svg-icons'
 import { faGlobe, faLink } from '@fortawesome/free-solid-svg-icons'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
-import { npubEncode } from 'nostr-tools/nip19'
+import { npubEncode, naddrEncode } from 'nostr-tools/nip19'
 import { IndividualBookmark } from '../types/bookmarks'
 import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 import { classifyUrl } from '../utils/helpers'
@@ -23,6 +24,7 @@ interface BookmarkItemProps {
 }

 export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards', readingProgress }) => {
+  const navigate = useNavigate()
  const [ogImage, setOgImage] = useState<string | null>(null)

  const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
@@ -40,10 +42,11 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
  const firstUrl = hasUrls ? extractedUrls[0] : null
  const firstUrlClassification = firstUrl ? classifyUrl(firstUrl) : null
  
-  // For kind:30023 articles, extract image and summary tags (per NIP-23)
+  // For kind:30023 articles, extract title, image and summary tags (per NIP-23)
  // Note: We extract directly from tags here since we don't have the full event.
  // When we have full events, we use getArticleImage() helper (see articleService.ts)
  const isArticle = bookmark.kind === 30023
+  const articleTitle = isArticle ? bookmark.tags.find(t => t[0] === 'title')?.[1] : undefined
  const articleImage = isArticle ? bookmark.tags.find(t => t[0] === 'image')?.[1] : undefined
  const articleSummary = isArticle ? bookmark.tags.find(t => t[0] === 'summary')?.[1] : undefined
  
@@ -108,10 +111,16 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
  const handleReadNow = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault()
    
-    // For kind:30023 articles, pass the bookmark data instead of URL
+    // For kind:30023 articles, navigate to /a/:naddr route
    if (bookmark.kind === 30023) {
-      if (onSelectUrl) {
-        onSelectUrl('', { id: bookmark.id, kind: bookmark.kind, tags: bookmark.tags, pubkey: bookmark.pubkey })
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (dTag) {
+        const naddr = naddrEncode({
+          kind: bookmark.kind,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        navigate(`/a/${naddr}`)
      }
      return
    }
@@ -148,10 +157,7 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
      hasUrls,
      extractedUrls,
      onSelectUrl,
-      authorNpub,
-      getAuthorDisplayName,
-      handleReadNow,
-      articleSummary,
+      articleTitle,
      contentTypeIcon: getContentTypeIcon(),
      readingProgress
    }
--- a/src/components/BookmarkList.tsx
+++ b/src/components/BookmarkList.tsx
@@ -1,9 +1,8 @@
 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 } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faBookmark, faList, faThLarge, faImage, 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'
 import { BookmarkItem } from './BookmarkItem'
@@ -59,7 +58,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
  onOpenSettings,
  onRefresh,
  isRefreshing,
-  lastFetchTime,
  loading = false,
  relayPool,
  isMobile = false,
@@ -107,7 +105,18 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
        return undefined
      }
    }
-    // For web bookmarks and other types, try to use URL if available
+    
+    // For web bookmarks (kind:39701), URL is in the 'd' tag
+    if (bookmark.kind === 39701) {
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (dTag) {
+        // Ensure URL has protocol
+        const url = dTag.startsWith('http') ? dTag : `https://${dTag}`
+        return readingProgressMap.get(url)
+      }
+    }
+    
+    // For other bookmark types, try to extract URL from content
    const urls = extractUrlsFromContent(bookmark.content)
    if (urls.length > 0) {
      return readingProgressMap.get(urls[0])
@@ -172,11 +181,11 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
      groupingMode === 'flat'
        ? [{ key: 'all', title: getFilterTitle(selectedFilter), items: sortIndividualBookmarks(filteredBookmarks) }]
        : [
+            { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb },
            { 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 }
+            { key: 'amethyst-public', title: 'My Lists', items: groups.amethystPublic }
          ]
    
    // Add bookmark sets as additional sections (only in grouped mode)
@@ -314,9 +323,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
            variant="ghost"
            style={{ color: friendsColor }}
          />
-        </div>
-        {activeAccount && (
-          <div className="view-mode-right">
+          {activeAccount && (
            <IconButton
              icon={groupingMode === 'grouped' ? faLayerGroup : faClock}
              onClick={toggleGroupingMode}
@@ -324,17 +331,10 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
              ariaLabel={groupingMode === 'grouped' ? 'Switch to flat view' : 'Switch to grouped view'}
              variant="ghost"
            />
-            {onRefresh && (
-              <IconButton
-                icon={faRotate}
-                onClick={onRefresh}
-                title={lastFetchTime ? `Refresh bookmarks (updated ${formatDistanceToNow(lastFetchTime, { addSuffix: true })})` : 'Refresh bookmarks'}
-                ariaLabel="Refresh bookmarks"
-                variant="ghost"
-                disabled={isRefreshing}
-                spin={isRefreshing}
-              />
-            )}
+          )}
+        </div>
+        {activeAccount && (
+          <div className="view-mode-right">
            <IconButton
              icon={faList}
              onClick={() => onViewModeChange('compact')}
--- a/src/components/BookmarkViews/CompactView.tsx
+++ b/src/components/BookmarkViews/CompactView.tsx
@@ -5,6 +5,7 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDateCompact } from '../../utils/bookmarkUtils'
 import RichContent from '../RichContent'
+import { naddrEncode } from 'nostr-tools/nip19'

 interface CompactViewProps {
  bookmark: IndividualBookmark
@@ -12,7 +13,7 @@ interface CompactViewProps {
  hasUrls: boolean
  extractedUrls: string[]
  onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
-  articleSummary?: string
+  articleTitle?: string
  contentTypeIcon: IconDefinition
  readingProgress?: number
 }
@@ -23,7 +24,7 @@ export const CompactView: React.FC<CompactViewProps> = ({
  hasUrls,
  extractedUrls,
  onSelectUrl,
-  articleSummary,
+  articleTitle,
  contentTypeIcon,
  readingProgress
 }) => {
@@ -33,7 +34,7 @@ export const CompactView: React.FC<CompactViewProps> = ({
  const isNote = bookmark.kind === 1
  const isClickable = hasUrls || isArticle || isWebBookmark || isNote
  
-  const displayText = isArticle && articleSummary ? articleSummary : bookmark.content
+  const displayText = isArticle && articleTitle ? articleTitle : bookmark.content

  // Calculate progress color
  let progressColor = '#6366f1' // Default blue (reading)
@@ -45,7 +46,15 @@ export const CompactView: React.FC<CompactViewProps> = ({

  const handleCompactClick = () => {
    if (isArticle) {
-      onSelectUrl?.('', { id: bookmark.id, kind: bookmark.kind, tags: bookmark.tags, pubkey: bookmark.pubkey })
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (dTag) {
+        const naddr = naddrEncode({
+          kind: bookmark.kind,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        navigate(`/a/${naddr}`)
+      }
    } else if (hasUrls) {
      onSelectUrl?.(extractedUrls[0])
    } else if (isNote) {
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -53,7 +53,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
  
  const showSettings = location.pathname === '/settings'
  const showExplore = location.pathname.startsWith('/explore')
-  const showMe = location.pathname.startsWith('/me')
+  const showMe = location.pathname.startsWith('/my')
  const showProfile = location.pathname.startsWith('/p/')
  const showSupport = location.pathname === '/support'
  const eventId = eventIdParam
@@ -62,12 +62,12 @@ const Bookmarks: React.FC<BookmarksProps> = ({
  const exploreTab = location.pathname === '/explore/writings' ? 'writings' : 'highlights'
  
  // Extract tab from me routes
-  const meTab = location.pathname === '/me' ? 'highlights' : 
-                location.pathname === '/me/highlights' ? 'highlights' :
-                location.pathname === '/me/bookmarks' ? 'bookmarks' :
-                location.pathname.startsWith('/me/reads') ? 'reads' :
-                location.pathname.startsWith('/me/links') ? 'links' :
-                location.pathname === '/me/writings' ? 'writings' : 'highlights'
+  const meTab = location.pathname === '/my' ? 'highlights' : 
+                location.pathname === '/my/highlights' ? 'highlights' :
+                location.pathname === '/my/bookmarks' ? 'bookmarks' :
+                location.pathname.startsWith('/my/reads') ? 'reads' :
+                location.pathname.startsWith('/my/links') ? 'links' :
+                location.pathname === '/my/writings' ? 'writings' : 'highlights'
  
  // Extract tab from profile routes
  const profileTab = location.pathname.endsWith('/writings') ? 'writings' : 'highlights'
@@ -87,7 +87,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
    }
  }
  
-  // Track previous location for going back from settings/me/explore/profile
+  // Track previous location for going back from settings/my/explore/profile
  useEffect(() => {
    if (!showSettings && !showMe && !showExplore && !showProfile) {
      previousLocationRef.current = location.pathname
@@ -226,9 +226,15 @@ const Bookmarks: React.FC<BookmarksProps> = ({
    settings
  })

+  // Determine which loader should be active based on route
+  // Only one loader should run at a time to prevent state conflicts
+  const shouldLoadArticle = !!naddr && !externalUrl && !eventId
+  const shouldLoadExternal = !!externalUrl && !naddr && !eventId  
+  const shouldLoadEvent = !!eventId && !naddr && !externalUrl
+
  // Load nostr-native article if naddr is in URL
  useArticleLoader({
-    naddr,
+    naddr: shouldLoadArticle ? naddr : undefined,
    relayPool,
    eventStore,
    setSelectedUrl,
@@ -245,7 +251,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
  
  // Load external URL if /r/* route is used
  useExternalUrlLoader({
-    url: externalUrl,
+    url: shouldLoadExternal ? externalUrl : undefined,
    relayPool,
    eventStore,
    setSelectedUrl,
@@ -260,7 +266,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({

  // Load event if /e/:eventId route is used
  useEventLoader({
-    eventId,
+    eventId: shouldLoadEvent ? eventId : undefined,
    relayPool,
    eventStore,
    setSelectedUrl,
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, useState, useEffect, useRef, useCallback } from 'react'
-import ReactPlayer from 'react-player'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
@@ -34,9 +33,7 @@ import { unarchiveEvent, unarchiveWebsite } from '../services/unarchiveService'
 import { archiveController } from '../services/archiveController'
 import AuthorCard from './AuthorCard'
 import { faBooks } from '../icons/customIcons'
-import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
-import { classifyUrl, shouldTrackReadingProgress } from '../utils/helpers'
-import { buildNativeVideoUrl } from '../utils/videoHelpers'
+import { shouldTrackReadingProgress } from '../utils/helpers'
 import { useReadingPosition } from '../hooks/useReadingPosition'
 import { ReadingProgressIndicator } from './ReadingProgressIndicator'
 import { EventFactory } from 'applesauce-factory'
@@ -111,15 +108,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
  const [isCheckingReadStatus, setIsCheckingReadStatus] = useState(false)
  const [showCheckAnimation, setShowCheckAnimation] = useState(false)
  const [showArticleMenu, setShowArticleMenu] = useState(false)
-  const [showVideoMenu, setShowVideoMenu] = useState(false)
  const [showExternalMenu, setShowExternalMenu] = useState(false)
  const [articleMenuOpenUpward, setArticleMenuOpenUpward] = useState(false)
-  const [videoMenuOpenUpward, setVideoMenuOpenUpward] = useState(false)
  const [externalMenuOpenUpward, setExternalMenuOpenUpward] = useState(false)
  const articleMenuRef = useRef<HTMLDivElement>(null)
-  const videoMenuRef = useRef<HTMLDivElement>(null)
  const externalMenuRef = useRef<HTMLDivElement>(null)
-  const [ytMeta, setYtMeta] = useState<{ title?: string; description?: string; transcript?: string } | null>(null)
  const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef, processedMarkdown } = useMarkdownToHTML(markdown, relayPool)
  
  const { finalHtml, relevantHighlights } = useHighlightedContent({
@@ -155,8 +148,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
  const isTextContent = useMemo(() => {
    if (loading) return false
    if (!markdown && !html) return false
+    // Don't track internal sentinel URLs (nostr-event: is not a real Nostr URI per NIP-21)
+    if (selectedUrl?.startsWith('nostr-event:')) return false
    if (selectedUrl?.includes('youtube') || selectedUrl?.includes('vimeo')) return false
    if (!shouldTrackReadingProgress(html, markdown)) return false
+    
    return true
  }, [loading, markdown, html, selectedUrl])
  
@@ -166,27 +162,31 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
    return generateArticleIdentifier(selectedUrl)
  }, [selectedUrl])

+  // Use refs for content to avoid recreating callback on every content change
+  const htmlRef = useRef(html)
+  const markdownRef = useRef(markdown)
+  useEffect(() => {
+    htmlRef.current = html
+    markdownRef.current = markdown
+  }, [html, markdown])
+
  // Callback to save reading position
  const handleSavePosition = useCallback(async (position: number) => {
    if (!activeAccount || !relayPool || !eventStore || !articleIdentifier) {
-      console.log('[reading-position] ❌ Cannot save: missing dependencies')
      return
    }
    if (!settings?.syncReadingPosition) {
-      console.log('[reading-position] ⚠️ Save skipped: sync disabled in settings')
      return
    }
    
    // Check if content is long enough to track reading progress
-    if (!shouldTrackReadingProgress(html, markdown)) {
-      console.log('[reading-position] ⚠️ Save skipped: content too short')
+    if (!shouldTrackReadingProgress(htmlRef.current, markdownRef.current)) {
      return
    }

    const scrollTop = window.pageYOffset || document.documentElement.scrollTop

    try {
-      console.log(`[reading-position] [${new Date().toISOString()}] 🚀 Publishing position ${Math.round(position * 100)}% to relays...`)
      const factory = new EventFactory({ signer: activeAccount })
      await saveReadingPosition(
        relayPool,
@@ -199,11 +199,10 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
          scrollTop
        }
      )
-      console.log(`[reading-position] [${new Date().toISOString()}] ✅ Position published successfully`)
    } catch (error) {
-      console.error(`[reading-position] [${new Date().toISOString()}] ❌ Failed to save reading position:`, error)
+      console.error('[reading-position] Failed to save reading position:', error)
    }
-  }, [activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, html, markdown])
+  }, [activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition])

  // Delay enabling position tracking to ensure content is stable
  const [isTrackingEnabled, setIsTrackingEnabled] = useState(false)
@@ -213,12 +212,19 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
    setIsTrackingEnabled(false)
  }, [selectedUrl])
  
-  // Enable tracking after content is stable
+  // Enable/disable tracking based on content state
  useEffect(() => {
-    if (isTextContent && !isTrackingEnabled) {
+    if (!isTextContent) {
+      // Disable tracking if content is not suitable
+      if (isTrackingEnabled) {
+        setIsTrackingEnabled(false)
+      }
+      return
+    }
+    
+    if (!isTrackingEnabled) {
      // Wait 500ms after content loads before enabling tracking
      const timer = setTimeout(() => {
-        console.log('[reading-position] ✅ Enabling tracking after stability delay')
        setIsTrackingEnabled(true)
      }, 500)
      return () => clearTimeout(timer)
@@ -258,35 +264,24 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
  const hasAttemptedRestoreRef = useRef<string | null>(null)

  useEffect(() => {
-    console.log('[reading-position] 🔍 Restore effect running:', {
-      isTextContent,
-      isTrackingEnabled,
-      hasAccount: !!activeAccount,
-      articleIdentifier,
-      restoreKey,
-      hasAttempted: hasAttemptedRestoreRef.current
-    })
-    
    if (!isTextContent || !activeAccount || !articleIdentifier) {
-      console.log('[reading-position] ⏭️ Restore skipped: missing dependencies or not text content')
      return
    }
    if (settings?.syncReadingPosition === false) {
-      console.log('[reading-position] ⏭️ Restore skipped: sync disabled in settings')
+      return
+    }
+    if (settings?.autoScrollToReadingPosition === false) {
      return
    }
    if (!isTrackingEnabled) {
-      console.log('[reading-position] ⏭️ Restore skipped: tracking not yet enabled (waiting for content stability)')
      return
    }

    // Only attempt restore once per article (after tracking is enabled)
    if (hasAttemptedRestoreRef.current === restoreKey) {
-      console.log('[reading-position] ⏭️ Restore skipped: already attempted for this article')
      return
    }

-    console.log('[reading-position] 🔄 Initiating restore for article:', articleIdentifier)
    // Mark as attempted using composite key
    hasAttemptedRestoreRef.current = restoreKey
    
@@ -294,15 +289,12 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
    const savedProgress = readingProgressController.getProgress(articleIdentifier)
    
    if (!savedProgress || savedProgress <= 0.05 || savedProgress >= 1) {
-      console.log('[reading-position] ℹ️ No position to restore (progress:', savedProgress, ')')
      return
    }

-    console.log('[reading-position] 🎯 Found saved position:', Math.round(savedProgress * 100) + '%')
-
-    // Suppress saves during restore (500ms render + 1000ms animation + 500ms buffer = 2000ms)
+    // Suppress saves during restore (500ms render + 1000ms smooth scroll = 1500ms)
    if (suppressSavesForRef.current) {
-      suppressSavesForRef.current(2000)
+      suppressSavesForRef.current(1500)
    }

    // Wait for content to be fully rendered
@@ -313,20 +305,10 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
      const currentTop = window.pageYOffset || document.documentElement.scrollTop
      const targetTop = savedProgress * maxScroll

-      console.log('[reading-position] 📐 Restore calculation:', {
-        docHeight: docH,
-        winHeight: winH,
-        maxScroll,
-        currentTop,
-        targetTop,
-        targetPercent: Math.round(savedProgress * 100) + '%'
-      })
-
      // Skip if delta is too small (< 48px or < 5%)
      const deltaPx = Math.abs(targetTop - currentTop)
      const deltaPct = maxScroll > 0 ? Math.abs((targetTop - currentTop) / maxScroll) : 0
      if (deltaPx < 48 || deltaPct < 0.05) {
-        console.log('[reading-position] ⏭️ Restore skipped: delta too small (', deltaPx, 'px,', Math.round(deltaPct * 100) + '%)')
        // Allow saves immediately since no scroll happened
        if (suppressSavesForRef.current) {
          suppressSavesForRef.current(0)
@@ -334,20 +316,17 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
        return
      }

-      console.log('[reading-position] 📜 Restoring scroll position (delta:', deltaPx, 'px,', Math.round(deltaPct * 100) + '%)')
-
      // Perform smooth animated restore
      window.scrollTo({
        top: targetTop,
        behavior: 'smooth'
      })
-      console.log('[reading-position] ✅ Scroll restored to', Math.round(savedProgress * 100) + '%')
    }, 500) // Give content time to render
-  }, [isTextContent, activeAccount, articleIdentifier, settings?.syncReadingPosition, selectedUrl, isTrackingEnabled, restoreKey])
+  }, [isTextContent, activeAccount, articleIdentifier, settings?.syncReadingPosition, settings?.autoScrollToReadingPosition, selectedUrl, isTrackingEnabled, restoreKey])

  // Note: We intentionally do NOT save on unmount because:
  // 1. Browser may scroll to top during back navigation, causing 0% saves
-  // 2. The auto-save with 3s debounce already captures position during reading
+  // 2. The auto-save with 1s throttle already captures position during reading
  // 3. Position state may not reflect actual reading position during navigation

  // Close menu when clicking outside
@@ -357,21 +336,18 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
      if (articleMenuRef.current && !articleMenuRef.current.contains(target)) {
        setShowArticleMenu(false)
      }
-      if (videoMenuRef.current && !videoMenuRef.current.contains(target)) {
-        setShowVideoMenu(false)
-      }
      if (externalMenuRef.current && !externalMenuRef.current.contains(target)) {
        setShowExternalMenu(false)
      }
    }
    
-    if (showArticleMenu || showVideoMenu || showExternalMenu) {
+    if (showArticleMenu || showExternalMenu) {
      document.addEventListener('mousedown', handleClickOutside)
      return () => {
        document.removeEventListener('mousedown', handleClickOutside)
      }
    }
-  }, [showArticleMenu, showVideoMenu, showExternalMenu])
+  }, [showArticleMenu, showExternalMenu])

  // Check available space and position menu upward if needed
  useEffect(() => {
@@ -394,13 +370,10 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
    if (showArticleMenu) {
      checkMenuPosition(articleMenuRef, setArticleMenuOpenUpward)
    }
-    if (showVideoMenu) {
-      checkMenuPosition(videoMenuRef, setVideoMenuOpenUpward)
-    }
    if (showExternalMenu) {
      checkMenuPosition(externalMenuRef, setExternalMenuOpenUpward)
    }
-  }, [showArticleMenu, showVideoMenu, showExternalMenu])
+  }, [showArticleMenu, showExternalMenu])

  const readingStats = useMemo(() => {
    const content = markdown || html || ''
@@ -432,34 +405,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({

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

-  // Track external video duration (in seconds) for display in header
-  const [videoDurationSec, setVideoDurationSec] = useState<number | null>(null)
-  // Load YouTube metadata/captions when applicable
-  useEffect(() => {
-    (async () => {
-      try {
-        if (!selectedUrl) return setYtMeta(null)
-        const id = extractYouTubeId(selectedUrl)
-        if (!id) return setYtMeta(null)
-        const locale = navigator?.language?.split('-')[0] || 'en'
-        const data = await getYouTubeMeta(id, locale)
-        if (data) setYtMeta({ title: data.title, description: data.description, transcript: data.transcript })
-      } catch {
-        setYtMeta(null)
-      }
-    })()
-  }, [selectedUrl])

-  const formatDuration = (totalSeconds: number): string => {
-    const hours = Math.floor(totalSeconds / 3600)
-    const minutes = Math.floor((totalSeconds % 3600) / 60)
-    const seconds = Math.floor(totalSeconds % 60)
-    const mm = hours > 0 ? String(minutes).padStart(2, '0') : String(minutes)
-    const ss = String(seconds).padStart(2, '0')
-    return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`
-  }
  

  // Get article links for menu
@@ -497,7 +444,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
    setShowArticleMenu(!showArticleMenu)
  }

-  const toggleVideoMenu = () => setShowVideoMenu(v => !v)

  const handleOpenPortal = () => {
    if (articleLinks) {
@@ -585,46 +531,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
    setShowArticleMenu(false)
  }
  
-  // Video actions
-  const handleOpenVideoExternal = () => {
-    if (selectedUrl) window.open(selectedUrl, '_blank', 'noopener,noreferrer')
-    setShowVideoMenu(false)
-  }
-
-  const handleOpenVideoNative = () => {
-    if (!selectedUrl) return
-    const native = buildNativeVideoUrl(selectedUrl)
-    if (native) {
-      window.location.href = native
-    } else {
-      window.location.href = selectedUrl
-    }
-    setShowVideoMenu(false)
-  }
-
-  const handleCopyVideoUrl = async () => {
-    try {
-      if (selectedUrl) await navigator.clipboard.writeText(selectedUrl)
-    } catch (e) {
-      console.warn('Clipboard copy failed', e)
-    } finally {
-      setShowVideoMenu(false)
-    }
-  }
-
-  const handleShareVideoUrl = async () => {
-    try {
-      if (selectedUrl && (navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
-        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ title: title || 'Video', url: selectedUrl })
-      } else if (selectedUrl) {
-        await navigator.clipboard.writeText(selectedUrl)
-      }
-    } catch (e) {
-      console.warn('Share failed', e)
-    } finally {
-      setShowVideoMenu(false)
-    }
-  }

  // External article actions
  const toggleExternalMenu = () => setShowExternalMenu(v => !v)
@@ -822,13 +728,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
    )
  }

-  if (loading) {
-    return (
-      <div className="reader" aria-busy="true">
-        <ContentSkeleton />
-      </div>
-    )
-  }

  const highlightRgb = hexToRgb(highlightColor)

@@ -868,11 +767,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
      )}
      
      <ReaderHeader 
-        title={ytMeta?.title || title}
+        title={title}
        image={image}
        summary={summary}
        published={published}
-        readingTimeText={isExternalVideo ? (videoDurationSec !== null ? formatDuration(videoDurationSec) : null) : (readingStats ? readingStats.text : null)}
+        readingTimeText={readingStats ? readingStats.text : null}
        hasHighlights={hasHighlights}
        highlightCount={relevantHighlights.length}
        settings={settings}
@@ -885,86 +784,10 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
          <TTSControls text={articleText} defaultLang={navigator?.language} settings={settings} />
        </div>
      )}
-      {isExternalVideo ? (
-        <>
-          <div className="reader-video">
-            <ReactPlayer 
-              url={selectedUrl as string} 
-              controls 
-              width="100%"
-              height="auto"
-              style={{ 
-                width: '100%', 
-                height: 'auto', 
-                aspectRatio: '16/9' 
-              }}
-              onDuration={(d) => setVideoDurationSec(Math.floor(d))}
-            />
-          </div>
-          {ytMeta?.description && (
-            <div className="large-text" style={{ color: '#ddd', padding: '0 0.75rem', whiteSpace: 'pre-wrap', marginBottom: '0.75rem' }}>
-              {ytMeta.description}
-            </div>
-          )}
-          {ytMeta?.transcript && (
-            <div style={{ padding: '0 0.75rem 1rem 0.75rem' }}>
-              <h3 style={{ margin: '1rem 0 0.5rem 0', fontSize: '1rem', color: '#aaa' }}>Transcript</h3>
-              <div className="large-text" style={{ whiteSpace: 'pre-wrap', color: '#ddd' }}>
-                {ytMeta.transcript}
-              </div>
-            </div>
-          )}
-          <div className="article-menu-container">
-            <div className="article-menu-wrapper" ref={videoMenuRef}>
-              <button
-                className="article-menu-btn"
-                onClick={toggleVideoMenu}
-                title="More options"
-              >
-                <FontAwesomeIcon icon={faEllipsisH} />
-              </button>
-              {showVideoMenu && (
-                <div className={`article-menu ${videoMenuOpenUpward ? 'open-upward' : ''}`}>
-                  <button className="article-menu-item" onClick={handleOpenVideoExternal}>
-                    <FontAwesomeIcon icon={faExternalLinkAlt} />
-                    <span>Open Link</span>
-                  </button>
-                  <button className="article-menu-item" onClick={handleOpenVideoNative}>
-                    <FontAwesomeIcon icon={faMobileAlt} />
-                    <span>Open in Native App</span>
-                  </button>
-                  <button className="article-menu-item" onClick={handleCopyVideoUrl}>
-                    <FontAwesomeIcon icon={faCopy} />
-                    <span>Copy URL</span>
-                  </button>
-                  <button className="article-menu-item" onClick={handleShareVideoUrl}>
-                    <FontAwesomeIcon icon={faShare} />
-                    <span>Share</span>
-                  </button>
-                </div>
-              )}
-            </div>
-          </div>
-          {activeAccount && (
-            <div className="mark-as-read-container">
-              <button
-                className={`mark-as-read-btn ${isMarkedAsRead ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
-                onClick={handleMarkAsRead}
-                disabled={isCheckingReadStatus}
-                title={isMarkedAsRead ? 'Already Marked as Watched' : 'Mark as Watched'}
-                style={isMarkedAsRead ? { opacity: 0.85 } : undefined}
-              >
-                <FontAwesomeIcon 
-                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
-                  spin={isCheckingReadStatus} 
-                />
-                <span>
-                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Marked as Watched' : 'Mark as Watched'}
-                </span>
-              </button>
-            </div>
-          )}
-        </>
+      {loading || !markdown && !html ? (
+        <div className="reader" aria-busy="true">
+          <ContentSkeleton />
+        </div>
      ) : markdown || html ? (
        <>
          {markdown ? (
@@ -973,16 +796,14 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                key={`content:${contentKey}`}
                ref={contentRef}
                html={finalHtml}
-                renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+                renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true}
                className="reader-markdown"
                onMouseUp={handleSelectionEnd}
                onTouchEnd={handleSelectionEnd}
              />
            ) : (
              <div className="reader-markdown">
-                <div className="loading-spinner">
-                  <FontAwesomeIcon icon={faSpinner} spin size="sm" />
-                </div>
+                <ContentSkeleton />
              </div>
            )
          ) : (
@@ -990,7 +811,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
              key={`content:${contentKey}`}
              ref={contentRef}
              html={finalHtml || html || ''}
-              renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+              renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true}
              className="reader-html"
              onMouseUp={handleSelectionEnd}
              onTouchEnd={handleSelectionEnd}
@@ -998,7 +819,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
          )}
          
          {/* Article menu for external URLs */}
-          {!isNostrArticle && !isExternalVideo && selectedUrl && (
+          {!isNostrArticle && selectedUrl && (
            <div className="article-menu-container">
              <div className="article-menu-wrapper" ref={externalMenuRef}>
                <button
@@ -1149,11 +970,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
            </div>
          )}
        </>
-      ) : (
-        <div className="reader empty">
-          <p>No readable content found for this URL.</p>
-        </div>
-      )}
+      ) : null}
      </div>
    </>
  )
--- a/src/components/Explore.tsx
+++ b/src/components/Explore.tsx
@@ -82,11 +82,28 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti

  
  
-  // Visibility filters (defaults from settings or nostrverse when logged out)
-  const [visibility, setVisibility] = useState<HighlightVisibility>({
-    nostrverse: activeAccount ? (settings?.defaultExploreScopeNostrverse ?? false) : true,
-    friends: settings?.defaultExploreScopeFriends ?? true,
-    mine: settings?.defaultExploreScopeMine ?? false
+  // Visibility filters - load from localStorage first, fallback to settings
+  const [visibility, setVisibility] = useState<HighlightVisibility>(() => {
+    // Try to load from localStorage first
+    try {
+      const saved = localStorage.getItem('exploreScopeVisibility')
+      if (saved) {
+        const parsed = JSON.parse(saved)
+        // Validate that at least one scope is enabled
+        if (parsed.nostrverse || parsed.friends || parsed.mine) {
+          return parsed
+        }
+      }
+    } catch (err) {
+      console.warn('Failed to load explore scope from localStorage:', err)
+    }
+    
+    // Fallback to settings or defaults
+    return {
+      nostrverse: activeAccount ? (settings?.defaultExploreScopeNostrverse ?? false) : true,
+      friends: settings?.defaultExploreScopeFriends ?? true,
+      mine: settings?.defaultExploreScopeMine ?? false
+    }
  })

  // Ensure at least one scope remains active
@@ -96,6 +113,12 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
      if (!next.nostrverse && !next.friends && !next.mine) {
        return prev // ignore toggle that would disable all scopes
      }
+      // Persist to localStorage
+      try {
+        localStorage.setItem('exploreScopeVisibility', JSON.stringify(next))
+      } catch (err) {
+        console.warn('Failed to save explore scope to localStorage:', err)
+      }
      return next
    })
  }, [])
@@ -224,18 +247,44 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti

  // Update visibility when settings/login state changes
  useEffect(() => {
+    // Check if user has a saved preference
+    const hasSavedPreference = (() => {
+      try {
+        return localStorage.getItem('exploreScopeVisibility') !== null
+      } catch {
+        return false
+      }
+    })()
+    
+    // Only reset to defaults if no saved preference exists
+    if (hasSavedPreference) {
+      return
+    }
+    
    if (!activeAccount) {
      // When logged out, show nostrverse by default
-      setVisibility(prev => ({ ...prev, nostrverse: true, friends: false, mine: false }))
+      const defaultVisibility = { nostrverse: true, friends: false, mine: false }
+      setVisibility(defaultVisibility)
+      try {
+        localStorage.setItem('exploreScopeVisibility', JSON.stringify(defaultVisibility))
+      } catch (err) {
+        console.warn('Failed to save explore scope to localStorage:', err)
+      }
      setHasLoadedNostrverse(true) // logged out path loads nostrverse immediately
      setHasLoadedNostrverseHighlights(true)
    } else {
      // When logged in, use settings defaults immediately
-      setVisibility({
+      const defaultVisibility = {
        nostrverse: settings?.defaultExploreScopeNostrverse ?? false,
        friends: settings?.defaultExploreScopeFriends ?? true,
        mine: settings?.defaultExploreScopeMine ?? false
-      })
+      }
+      setVisibility(defaultVisibility)
+      try {
+        localStorage.setItem('exploreScopeVisibility', JSON.stringify(defaultVisibility))
+      } catch (err) {
+        console.warn('Failed to save explore scope to localStorage:', err)
+      }
      setHasLoadedNostrverse(false)
      setHasLoadedNostrverseHighlights(false)
    }
--- a/src/components/HighlightButton.tsx
+++ b/src/components/HighlightButton.tsx
@@ -45,7 +45,7 @@ export const HighlightButton = React.forwardRef<HighlightButtonRef, HighlightBut
        className="highlight-fab"
        style={{
          position: 'fixed',
-          bottom: '32px',
+          bottom: '80px',
          right: '32px',
          zIndex: 1000,
          width: '56px',
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -212,12 +212,23 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
            pubkey,
            identifier
          })
-          navigate(`/a/${naddr}`)
+          // Pass highlight ID in navigation state to trigger scroll
+          navigate(`/a/${naddr}`, { 
+            state: { 
+              highlightId: highlight.id,
+              openHighlights: true 
+            } 
+          })
        }
      }
    } else if (highlight.urlReference) {
-      // Navigate to external URL
-      navigate(`/r/${encodeURIComponent(highlight.urlReference)}`)
+      // Navigate to external URL with highlight ID to trigger scroll
+      navigate(`/r/${encodeURIComponent(highlight.urlReference)}`, {
+        state: {
+          highlightId: highlight.id,
+          openHighlights: true
+        }
+      })
    }
  }
  
@@ -422,7 +433,31 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
          title={new Date(highlight.created_at * 1000).toLocaleString()}
          onClick={(e) => {
            e.stopPropagation()
-            window.location.href = highlightLinks.native
+            // Navigate within app using same logic as handleItemClick
+            if (highlight.eventReference) {
+              const parts = highlight.eventReference.split(':')
+              if (parts.length === 3 && parts[0] === '30023') {
+                const [, pubkey, identifier] = parts
+                const naddr = nip19.naddrEncode({
+                  kind: 30023,
+                  pubkey,
+                  identifier
+                })
+                navigate(`/a/${naddr}`, { 
+                  state: { 
+                    highlightId: highlight.id,
+                    openHighlights: true 
+                  } 
+                })
+              }
+            } else if (highlight.urlReference) {
+              navigate(`/r/${encodeURIComponent(highlight.urlReference)}`, {
+                state: {
+                  highlightId: highlight.id,
+                  openHighlights: true
+                }
+              })
+            }
          }}
        >
          {formatDateCompact(highlight.created_at)}
--- a/src/components/HighlightsPanel.tsx
+++ b/src/components/HighlightsPanel.tsx
@@ -118,13 +118,11 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
  return (
    <div className="highlights-container">
      <HighlightsPanelHeader
-        loading={loading}
        hasHighlights={filteredHighlights.length > 0}
        showHighlights={showHighlights}
        highlightVisibility={highlightVisibility}
        currentUserPubkey={currentUserPubkey}
        onToggleHighlights={handleToggleHighlights}
-        onRefresh={onRefresh}
        onToggleCollapse={onToggleCollapse}
        onHighlightVisibilityChange={onHighlightVisibilityChange}
        isMobile={isMobile}
--- a/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
+++ b/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
@@ -1,29 +1,26 @@
 import React from 'react'
-import { faChevronRight, faEye, faEyeSlash, faRotate, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronRight, faEye, faEyeSlash, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
 import { HighlightVisibility } from '../HighlightsPanel'
 import IconButton from '../IconButton'

 interface HighlightsPanelHeaderProps {
-  loading: boolean
  hasHighlights: boolean
  showHighlights: boolean
  highlightVisibility: HighlightVisibility
  currentUserPubkey?: string
  onToggleHighlights: () => void
-  onRefresh?: () => void
  onToggleCollapse: () => void
  onHighlightVisibilityChange?: (visibility: HighlightVisibility) => void
  isMobile?: boolean
 }

 const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
-  loading,
  hasHighlights,
  showHighlights,
  highlightVisibility,
  currentUserPubkey,
  onToggleHighlights,
-  onRefresh,
  onToggleCollapse,
  onHighlightVisibilityChange,
  isMobile = false
@@ -32,6 +29,16 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
    <div className="highlights-header">
      <div className="highlights-actions">
        <div className="highlights-actions-left">
+          {!isMobile && (
+            <button 
+              onClick={onToggleCollapse}
+              className="toggle-highlights-btn"
+              title="Collapse highlights panel"
+              aria-label="Collapse highlights panel"
+            >
+              <FontAwesomeIcon icon={faChevronRight} style={{ transform: 'rotate(180deg)' }} />
+            </button>
+          )}
          {onHighlightVisibilityChange && (
            <div className="highlight-level-toggles">
              <IconButton
@@ -82,17 +89,8 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
              )}
            </div>
          )}
-          {onRefresh && (
-            <IconButton
-              icon={faRotate}
-              onClick={onRefresh}
-              title="Refresh highlights"
-              ariaLabel="Refresh highlights"
-              variant="ghost"
-              disabled={loading}
-              spin={loading}
-            />
-          )}
+        </div>
+        <div className="highlights-actions-right">
          {hasHighlights && (
            <IconButton
              icon={showHighlights ? faEye : faEyeSlash}
@@ -103,16 +101,6 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
            />
          )}
        </div>
-        {!isMobile && (
-          <IconButton
-            icon={faChevronRight}
-            onClick={onToggleCollapse}
-            title="Collapse highlights panel"
-            ariaLabel="Collapse highlights panel"
-            variant="ghost"
-            style={{ transform: 'rotate(180deg)' }}
-          />
-        )}
      </div>
    </div>
  )
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHighlighter, faBookmark, faPenToSquare, faLink, faLayerGroup } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter, faBookmark, faPenToSquare, faLink, faLayerGroup, faHeart } from '@fortawesome/free-solid-svg-icons'
 import { faClock } from '@fortawesome/free-regular-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { IEventStore } from 'applesauce-core'
@@ -25,6 +25,7 @@ import { faBooks } from '../icons/customIcons'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { groupIndividualBookmarks, hasContent, hasCreationDate, sortIndividualBookmarks } from '../utils/bookmarkUtils'
+import { dedupeBookmarksById } from '../services/bookmarkHelpers'
 import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
 import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
 import ReadingProgressFilters, { ReadingProgressFilterType } from './ReadingProgressFilters'
@@ -144,15 +145,15 @@ const Me: React.FC<MeProps> = ({
    setReadingProgressFilter(filter)
    if (activeTab === 'reads') {
      if (filter === 'all') {
-        navigate('/me/reads', { replace: true })
+        navigate('/my/reads', { replace: true })
      } else {
-        navigate(`/me/reads/${filter}`, { replace: true })
+        navigate(`/my/reads/${filter}`, { replace: true })
      }
    } else if (activeTab === 'links') {
      if (filter === 'all') {
-        navigate('/me/links', { replace: true })
+        navigate('/my/links', { replace: true })
      } else {
-        navigate(`/me/links/${filter}`, { replace: true })
+        navigate(`/my/links/${filter}`, { replace: true })
      }
    }
  }
@@ -394,8 +395,7 @@ const Me: React.FC<MeProps> = ({
  }

  const getReadItemUrl = (item: ReadItem) => {
-    if (item.type === 'article') {
-      // ID is already in naddr format
+    if (item.type === 'article' && item.id.startsWith('naddr1')) {
      return `/a/${item.id}`
    } else if (item.url) {
      return `/r/${encodeURIComponent(item.url)}`
@@ -438,19 +438,16 @@ const Me: React.FC<MeProps> = ({

  const handleSelectUrl = (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => {
    if (bookmark && bookmark.kind === 30023) {
-      // For kind:30023 articles, navigate to the article route
      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1] || ''
      if (dTag && bookmark.pubkey) {
-        const pointer = {
-          identifier: dTag,
+        const naddr = nip19.naddrEncode({
          kind: 30023,
          pubkey: bookmark.pubkey,
-        }
-        const naddr = nip19.naddrEncode(pointer)
+          identifier: dTag
+        })
        navigate(`/a/${naddr}`)
      }
    } else if (url) {
-      // For regular URLs, navigate to the reader route
      navigate(`/r/${encodeURIComponent(url)}`)
    }
  }
@@ -491,8 +488,10 @@ const Me: React.FC<MeProps> = ({
    return undefined
  }

-  // Merge and flatten all individual bookmarks
-  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
+  // Merge and flatten all individual bookmarks with deduplication
+  const allIndividualBookmarks = dedupeBookmarksById(
+    bookmarks.flatMap(b => b.individualBookmarks || [])
+  )
    .filter(hasContent)
    .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b))
  
@@ -668,21 +667,26 @@ const Me: React.FC<MeProps> = ({
                </div>
              </div>
            )))}
-            <div className="view-mode-controls" style={{
-              display: 'flex',
-              justifyContent: 'center',
-              gap: '0.5rem',
-              padding: '1rem',
-              marginTop: '1rem',
-              borderTop: '1px solid var(--border-color)'
-            }}>
-              <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"
-              />
+            <div className="view-mode-controls">
+              <div className="view-mode-left">
+                <IconButton
+                  icon={faHeart}
+                  onClick={() => navigate('/support')}
+                  title="Support Boris"
+                  ariaLabel="Support"
+                  variant="ghost"
+                  style={{ color: 'rgb(251 146 60)' }}
+                />
+                <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"
+                />
+              </div>
+              <div className="view-mode-right">
+              </div>
            </div>
          </div>
        )
@@ -867,7 +871,7 @@ const Me: React.FC<MeProps> = ({
          <button
            className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
            data-tab="highlights"
-            onClick={() => navigate('/me/highlights')}
+            onClick={() => navigate('/my/highlights')}
          >
            <FontAwesomeIcon icon={faHighlighter} />
            <span className="tab-label">Highlights</span>
@@ -875,7 +879,7 @@ const Me: React.FC<MeProps> = ({
          <button
            className={`me-tab ${activeTab === 'bookmarks' ? 'active' : ''}`}
            data-tab="bookmarks"
-            onClick={() => navigate('/me/bookmarks')}
+            onClick={() => navigate('/my/bookmarks')}
          >
            <FontAwesomeIcon icon={faBookmark} />
            <span className="tab-label">Bookmarks</span>
@@ -883,7 +887,7 @@ const Me: React.FC<MeProps> = ({
          <button
            className={`me-tab ${activeTab === 'reads' ? 'active' : ''}`}
            data-tab="reads"
-            onClick={() => navigate('/me/reads')}
+            onClick={() => navigate('/my/reads')}
          >
            <FontAwesomeIcon icon={faBooks} />
            <span className="tab-label">Reads</span>
@@ -891,7 +895,7 @@ const Me: React.FC<MeProps> = ({
          <button
            className={`me-tab ${activeTab === 'links' ? 'active' : ''}`}
            data-tab="links"
-            onClick={() => navigate('/me/links')}
+            onClick={() => navigate('/my/links')}
          >
            <FontAwesomeIcon icon={faLink} />
            <span className="tab-label">Links</span>
@@ -899,7 +903,7 @@ const Me: React.FC<MeProps> = ({
          <button
            className={`me-tab ${activeTab === 'writings' ? 'active' : ''}`}
            data-tab="writings"
-            onClick={() => navigate('/me/writings')}
+            onClick={() => navigate('/my/writings')}
          >
            <FontAwesomeIcon icon={faPenToSquare} />
            <span className="tab-label">Writings</span>
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -6,10 +6,8 @@ import { RelayPool } from 'applesauce-relay'
 import { nip19 } from 'nostr-tools'
 import { useNavigate } from 'react-router-dom'
 import { HighlightItem } from './HighlightItem'
-import { BlogPostPreview, fetchBlogPostsFromAuthors } from '../services/exploreService'
-import { fetchHighlights } from '../services/highlightService'
+import { BlogPostPreview } from '../services/exploreService'
 import { KINDS } from '../config/kinds'
-import { getActiveRelayUrls } from '../services/relayManager'
 import AuthorCard from './AuthorCard'
 import BlogPostCard from './BlogPostCard'
 import { BlogPostSkeleton, HighlightSkeleton } from './Skeletons'
@@ -20,6 +18,8 @@ import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { Hooks } from 'applesauce-react'
 import { readingProgressController } from '../services/readingProgressController'
+import { writingsController } from '../services/writingsController'
+import { highlightsController } from '../services/highlightsController'

 interface ProfileProps {
  relayPool: RelayPool
@@ -103,17 +103,16 @@ const Profile: React.FC<ProfileProps> = ({
    })
  }, [activeAccount?.pubkey, relayPool, eventStore, refreshTrigger])

-  // Background fetch to populate event store (non-blocking)
+  // Background fetch via controllers to populate event store
  useEffect(() => {
    if (!pubkey || !relayPool || !eventStore) return
    
-    // Fetch all highlights and writings in background (no limits)
-    const relayUrls = getActiveRelayUrls(relayPool)
-    
-    fetchHighlights(relayPool, pubkey, undefined, undefined, false, eventStore)
+    // Start controllers to fetch and populate event store
+    // Controllers handle streaming, deduplication, and storage
+    highlightsController.start({ relayPool, eventStore, pubkey })
      .catch(err => console.warn('⚠️ [Profile] Failed to fetch highlights:', err))
    
-    fetchBlogPostsFromAuthors(relayPool, [pubkey], relayUrls, undefined, null, eventStore)
+    writingsController.start({ relayPool, eventStore, pubkey, force: refreshTrigger > 0 })
      .catch(err => console.warn('⚠️ [Profile] Failed to fetch writings:', err))
  }, [pubkey, relayPool, eventStore, refreshTrigger])

--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -44,6 +44,7 @@ const DEFAULT_SETTINGS: UserSettings = {
  fullWidthImages: true,
  renderVideoLinksAsEmbeds: true,
  syncReadingPosition: true,
+  autoScrollToReadingPosition: true,
  autoMarkAsReadOnCompletion: false,
  hideBookmarksWithoutCreationDate: true,
  ttsUseSystemLanguage: false,
--- a/src/components/Settings/LayoutBehaviorSettings.tsx
+++ b/src/components/Settings/LayoutBehaviorSettings.tsx
@@ -118,6 +118,19 @@ const LayoutBehaviorSettings: React.FC<LayoutBehaviorSettingsProps> = ({ setting
        </label>
      </div>

+      <div className="setting-group">
+        <label htmlFor="autoScrollToReadingPosition" className="checkbox-label">
+          <input
+            id="autoScrollToReadingPosition"
+            type="checkbox"
+            checked={settings.autoScrollToReadingPosition !== false}
+            onChange={(e) => onUpdate({ autoScrollToReadingPosition: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Auto-scroll to saved reading position</span>
+        </label>
+      </div>
+
      <div className="setting-group">
        <label htmlFor="autoMarkAsReadOnCompletion" className="checkbox-label">
          <input
--- a/src/components/Settings/PWASettings.tsx
+++ b/src/components/Settings/PWASettings.tsx
@@ -33,7 +33,13 @@ const PWASettings: React.FC<PWASettingsProps> = ({ settings, onUpdate, onClose }

  const handleLinkClick = (url: string) => {
    if (onClose) onClose()
-    navigate(`/r/${encodeURIComponent(url)}`)
+    // If it's an internal route (starts with /), navigate directly
+    if (url.startsWith('/')) {
+      navigate(url)
+    } else {
+      // External URL: wrap with /r/ path
+      navigate(`/r/${encodeURIComponent(url)}`)
+    }
  }

  const handleClearCache = async () => {
--- a/src/components/ShareTargetHandler.tsx
+++ b/src/components/ShareTargetHandler.tsx
@@ -60,7 +60,7 @@ export default function ShareTargetHandler({ relayPool }: ShareTargetHandlerProp
            getActiveRelayUrls(relayPool)
          )
          showToast('Bookmark saved!')
-          navigate('/me/links')
+          navigate('/my/links')
        } catch (err) {
          console.error('Failed to save shared bookmark:', err)
          showToast('Failed to save bookmark')
--- a/src/components/SidebarHeader.tsx
+++ b/src/components/SidebarHeader.tsx
@@ -1,11 +1,12 @@
-import React from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faRightFromBracket, faUserCircle, faGear, faHome, faPersonHiking } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faRightFromBracket, faUserCircle, faGear, faHome, faPersonHiking, faHighlighter, faBookmark, faPenToSquare, faLink } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import IconButton from './IconButton'
+import { faBooks } from '../icons/customIcons'

 interface SidebarHeaderProps {
  onToggleCollapse: () => void
@@ -18,6 +19,8 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
  const navigate = useNavigate()
  const activeAccount = Hooks.useActiveAccount()
  const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null)
+  const [showProfileMenu, setShowProfileMenu] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)

  const getProfileImage = () => {
    return profile?.picture || null
@@ -33,54 +36,137 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou

  const profileImage = getProfileImage()

+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setShowProfileMenu(false)
+      }
+    }
+
+    if (showProfileMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [showProfileMenu])
+
+  const handleMenuItemClick = (action: () => void) => {
+    setShowProfileMenu(false)
+    // Close mobile sidebar when navigating on mobile
+    if (isMobile) {
+      onToggleCollapse()
+    }
+    action()
+  }
+
  return (
    <>
      <div className="sidebar-header-bar">
-        {activeAccount && (
-          <button
-            className="profile-avatar-button" 
-            title={getUserDisplayName()}
-            onClick={() => navigate('/me')}
-            aria-label={`Profile: ${getUserDisplayName()}`}
-          >
-            {profileImage ? (
-              <img src={profileImage} alt={getUserDisplayName()} />
-            ) : (
-              <FontAwesomeIcon icon={faUserCircle} />
-            )}
-          </button>
-        )}
-        <div className="sidebar-header-right">
+        <div className="sidebar-header-left">
+          {activeAccount && (
+            <div className="profile-menu-wrapper" ref={menuRef}>
+              <button
+                className="profile-avatar-button" 
+                title={getUserDisplayName()}
+                onClick={() => setShowProfileMenu(!showProfileMenu)}
+                aria-label={`Profile: ${getUserDisplayName()}`}
+              >
+                {profileImage ? (
+                  <img src={profileImage} alt={getUserDisplayName()} />
+                ) : (
+                  <FontAwesomeIcon icon={faUserCircle} />
+                )}
+              </button>
+              {showProfileMenu && (
+                <div className="profile-dropdown-menu">
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/highlights'))}
+                  >
+                    <FontAwesomeIcon icon={faHighlighter} />
+                    <span>My Highlights</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/bookmarks'))}
+                  >
+                    <FontAwesomeIcon icon={faBookmark} />
+                    <span>My Bookmarks</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/reads'))}
+                  >
+                    <FontAwesomeIcon icon={faBooks} />
+                    <span>My Reads</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/links'))}
+                  >
+                    <FontAwesomeIcon icon={faLink} />
+                    <span>My Links</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/writings'))}
+                  >
+                    <FontAwesomeIcon icon={faPenToSquare} />
+                    <span>My Writings</span>
+                  </button>
+                  <div className="profile-menu-separator"></div>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(onLogout)}
+                  >
+                    <FontAwesomeIcon icon={faRightFromBracket} />
+                    <span>Logout</span>
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
          <IconButton
            icon={faHome}
-            onClick={() => navigate('/')}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              navigate('/')
+            }}
            title="Home"
            ariaLabel="Home"
            variant="ghost"
          />
-          <IconButton
-            icon={faGear}
-            onClick={onOpenSettings}
-            title="Settings"
-            ariaLabel="Settings"
-            variant="ghost"
-          />
+        </div>
+        <div className="sidebar-header-right">
          <IconButton
            icon={faPersonHiking}
-            onClick={() => navigate('/explore')}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              navigate('/explore')
+            }}
            title="Explore"
            ariaLabel="Explore"
            variant="ghost"
          />
-          {activeAccount && (
-            <IconButton
-              icon={faRightFromBracket}
-              onClick={onLogout}
-              title="Logout"
-              ariaLabel="Logout"
-              variant="ghost"
-            />
-          )}
+          <IconButton
+            icon={faGear}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              onOpenSettings()
+            }}
+            title="Settings"
+            ariaLabel="Settings"
+            variant="ghost"
+          />
          {!isMobile && (
            <button 
              onClick={onToggleCollapse}
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -5,6 +5,7 @@ import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { BookmarkList } from './BookmarkList'
 import ContentPanel from './ContentPanel'
+import VideoView from './VideoView'
 import { HighlightsPanel } from './HighlightsPanel'
 import Settings from './Settings'
 import Toast from './Toast'
@@ -19,6 +20,7 @@ import { HighlightVisibility } from './HighlightsPanel'
 import { HighlightButtonRef } from './HighlightButton'
 import { BookmarkReference } from '../utils/contentLoader'
 import { useIsMobile } from '../hooks/useMediaQuery'
+import { classifyUrl } from '../utils/helpers'
 import { useScrollDirection } from '../hooks/useScrollDirection'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
@@ -134,15 +136,30 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
  const showHighlightsButton = scrollDirection !== 'down' && !isAtTop

  // Lock body scroll when mobile sidebar or highlights is open
+  const savedScrollPosition = useRef<number>(0)
+  
  useEffect(() => {
    if (isMobile && (props.isSidebarOpen || !props.isHighlightsCollapsed)) {
+      // Save current scroll position
+      savedScrollPosition.current = window.scrollY
+      document.body.style.top = `-${savedScrollPosition.current}px`
      document.body.classList.add('mobile-sidebar-open')
    } else {
+      // Restore scroll position
      document.body.classList.remove('mobile-sidebar-open')
+      document.body.style.top = ''
+      if (savedScrollPosition.current > 0) {
+        // Use requestAnimationFrame to ensure DOM has updated
+        requestAnimationFrame(() => {
+          window.scrollTo(0, savedScrollPosition.current)
+          savedScrollPosition.current = 0
+        })
+      }
    }
    
    return () => {
      document.body.classList.remove('mobile-sidebar-open')
+      document.body.style.top = ''
    }
  }, [isMobile, props.isSidebarOpen, props.isHighlightsCollapsed])

@@ -306,7 +323,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
        <div 
          ref={sidebarRef}
          className={`pane sidebar ${isMobile && props.isSidebarOpen ? 'mobile-open' : ''}`}
-          aria-hidden={isMobile && !props.isSidebarOpen}
+          {...(isMobile && !props.isSidebarOpen ? { inert: '' } : {})}
        >
          <BookmarkList 
            bookmarks={props.bookmarks}
@@ -358,47 +375,73 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
            <>
              {props.support}
            </>
-          ) : (
-            <ContentPanel 
-              loading={props.readerLoading}
-              title={props.readerContent?.title}
-              html={props.readerContent?.html}
-              markdown={props.readerContent?.markdown}
-              image={props.readerContent?.image}
-              summary={props.readerContent?.summary}
-              published={props.readerContent?.published}
-              selectedUrl={props.selectedUrl}
-              highlights={props.selectedUrl && props.selectedUrl.startsWith('nostr:')
-                ? props.highlights // article-specific highlights only
-                : props.classifiedHighlights}
-              showHighlights={props.showHighlights}
-              highlightStyle={props.settings.highlightStyle || 'marker'}
-              highlightColor={props.settings.highlightColor || '#ffff00'}
-              onHighlightClick={props.onHighlightClick}
-              selectedHighlightId={props.selectedHighlightId}
-              highlightVisibility={props.highlightVisibility}
-              onTextSelection={props.onTextSelection}
-              onClearSelection={props.onClearSelection}
-              currentUserPubkey={props.currentUserPubkey}
-              followedPubkeys={props.followedPubkeys}
-              settings={props.settings}
-              relayPool={props.relayPool}
-              activeAccount={props.activeAccount}
-              currentArticle={props.currentArticle}
-              isSidebarCollapsed={props.isCollapsed}
-              isHighlightsCollapsed={props.isHighlightsCollapsed}
-              onOpenHighlights={() => {
-                if (props.isHighlightsCollapsed) {
-                  props.onToggleHighlightsPanel()
-                }
-              }}
-            />
-          )}
+          ) : (() => {
+            // Determine if this is a video URL
+            const isNostrArticle = props.selectedUrl && props.selectedUrl.startsWith('nostr:')
+            const isExternalVideo = !isNostrArticle && !!props.selectedUrl && ['youtube', 'video'].includes(classifyUrl(props.selectedUrl).type)
+            
+            if (isExternalVideo) {
+              return (
+                <VideoView
+                  videoUrl={props.selectedUrl!}
+                  title={props.readerContent?.title}
+                  image={props.readerContent?.image}
+                  summary={props.readerContent?.summary}
+                  published={props.readerContent?.published}
+                  settings={props.settings}
+                  relayPool={props.relayPool}
+                  activeAccount={props.activeAccount}
+                  onOpenHighlights={() => {
+                    if (props.isHighlightsCollapsed) {
+                      props.onToggleHighlightsPanel()
+                    }
+                  }}
+                />
+              )
+            }
+            
+            return (
+              <ContentPanel 
+                loading={props.readerLoading}
+                title={props.readerContent?.title}
+                html={props.readerContent?.html}
+                markdown={props.readerContent?.markdown}
+                image={props.readerContent?.image}
+                summary={props.readerContent?.summary}
+                published={props.readerContent?.published}
+                selectedUrl={props.selectedUrl}
+                highlights={props.selectedUrl && props.selectedUrl.startsWith('nostr:')
+                  ? props.highlights // article-specific highlights only
+                  : props.classifiedHighlights}
+                showHighlights={props.showHighlights}
+                highlightStyle={props.settings.highlightStyle || 'marker'}
+                highlightColor={props.settings.highlightColor || '#ffff00'}
+                onHighlightClick={props.onHighlightClick}
+                selectedHighlightId={props.selectedHighlightId}
+                highlightVisibility={props.highlightVisibility}
+                onTextSelection={props.onTextSelection}
+                onClearSelection={props.onClearSelection}
+                currentUserPubkey={props.currentUserPubkey}
+                followedPubkeys={props.followedPubkeys}
+                settings={props.settings}
+                relayPool={props.relayPool}
+                activeAccount={props.activeAccount}
+                currentArticle={props.currentArticle}
+                isSidebarCollapsed={props.isCollapsed}
+                isHighlightsCollapsed={props.isHighlightsCollapsed}
+                onOpenHighlights={() => {
+                  if (props.isHighlightsCollapsed) {
+                    props.onToggleHighlightsPanel()
+                  }
+                }}
+              />
+            )
+          })()}
        </div>
        <div 
          ref={highlightsRef}
          className={`pane highlights ${isMobile && !props.isHighlightsCollapsed ? 'mobile-open' : ''}`}
-          aria-hidden={isMobile && props.isHighlightsCollapsed}
+          {...(isMobile && props.isHighlightsCollapsed ? { inert: '' } : {})}
        >
          <HighlightsPanel
            highlights={props.highlights}
--- a/src/components/VideoView.tsx
+++ b/src/components/VideoView.tsx
@@ -0,0 +1,320 @@
+import React, { useState, useEffect, useRef } from 'react'
+import ReactPlayer from 'react-player'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { UserSettings } from '../services/settingsService'
+import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
+import { buildNativeVideoUrl } from '../utils/videoHelpers'
+import { getYouTubeThumbnail } from '../utils/imagePreview'
+
+// Helper function to get Vimeo thumbnail
+const getVimeoThumbnail = (url: string): string | null => {
+  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/)
+  if (!vimeoMatch) return null
+  
+  const videoId = vimeoMatch[1]
+  return `https://vumbnail.com/${videoId}.jpg`
+}
+import { 
+  createWebsiteReaction,
+  hasMarkedWebsiteAsRead
+} from '../services/reactionService'
+import { unarchiveWebsite } from '../services/unarchiveService'
+import ReaderHeader from './ReaderHeader'
+
+interface VideoViewProps {
+  videoUrl: string
+  title?: string
+  image?: string
+  summary?: string
+  published?: number
+  settings?: UserSettings
+  relayPool?: RelayPool | null
+  activeAccount?: IAccount | null
+  onOpenHighlights?: () => void
+}
+
+const VideoView: React.FC<VideoViewProps> = ({
+  videoUrl,
+  title,
+  image,
+  summary,
+  published,
+  settings,
+  relayPool,
+  activeAccount,
+  onOpenHighlights
+}) => {
+  const [isMarkedAsWatched, setIsMarkedAsWatched] = useState(false)
+  const [isCheckingWatchedStatus, setIsCheckingWatchedStatus] = useState(false)
+  const [showCheckAnimation, setShowCheckAnimation] = useState(false)
+  const [showVideoMenu, setShowVideoMenu] = useState(false)
+  const [videoMenuOpenUpward, setVideoMenuOpenUpward] = useState(false)
+  const [videoDurationSec, setVideoDurationSec] = useState<number | null>(null)
+  const [ytMeta, setYtMeta] = useState<{ title?: string; description?: string; transcript?: string } | null>(null)
+  const videoMenuRef = useRef<HTMLDivElement>(null)
+
+  // Load YouTube metadata when applicable
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!videoUrl) return setYtMeta(null)
+        const id = extractYouTubeId(videoUrl)
+        if (!id) return setYtMeta(null)
+        const locale = navigator?.language?.split('-')[0] || 'en'
+        const data = await getYouTubeMeta(id, locale)
+        if (data) setYtMeta({ title: data.title, description: data.description, transcript: data.transcript })
+      } catch {
+        setYtMeta(null)
+      }
+    })()
+  }, [videoUrl])
+
+  // Check if video is marked as watched
+  useEffect(() => {
+    const checkWatchedStatus = async () => {
+      if (!activeAccount || !videoUrl) return
+      
+      setIsCheckingWatchedStatus(true)
+      try {
+        const isWatched = relayPool ? await hasMarkedWebsiteAsRead(videoUrl, activeAccount.pubkey, relayPool) : false
+        setIsMarkedAsWatched(isWatched)
+      } catch (error) {
+        console.warn('Failed to check watched status:', error)
+      } finally {
+        setIsCheckingWatchedStatus(false)
+      }
+    }
+
+    checkWatchedStatus()
+  }, [activeAccount, videoUrl, relayPool])
+
+  // Handle click outside to close menu
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (videoMenuRef.current && !videoMenuRef.current.contains(target)) {
+        setShowVideoMenu(false)
+      }
+    }
+    
+    if (showVideoMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside)
+      }
+    }
+  }, [showVideoMenu])
+
+  // Check menu position for upward opening
+  useEffect(() => {
+    const checkMenuPosition = (menuRef: React.RefObject<HTMLDivElement>, setOpenUpward: (upward: boolean) => void) => {
+      if (!menuRef.current) return
+      
+      const rect = menuRef.current.getBoundingClientRect()
+      const viewportHeight = window.innerHeight
+      const spaceBelow = viewportHeight - rect.bottom
+      const spaceAbove = rect.top
+      
+      // Open upward if there's more space above and less space below
+      setOpenUpward(spaceAbove > spaceBelow && spaceBelow < 200)
+    }
+
+    if (showVideoMenu) {
+      checkMenuPosition(videoMenuRef, setVideoMenuOpenUpward)
+    }
+  }, [showVideoMenu])
+
+  const formatDuration = (totalSeconds: number): string => {
+    const hours = Math.floor(totalSeconds / 3600)
+    const minutes = Math.floor((totalSeconds % 3600) / 60)
+    const seconds = Math.floor(totalSeconds % 60)
+    const mm = hours > 0 ? String(minutes).padStart(2, '0') : String(minutes)
+    const ss = String(seconds).padStart(2, '0')
+    return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`
+  }
+
+  const handleMarkAsWatched = async () => {
+    if (!activeAccount || !videoUrl || isCheckingWatchedStatus) return
+
+    setIsCheckingWatchedStatus(true)
+    setShowCheckAnimation(true)
+
+    try {
+      if (isMarkedAsWatched) {
+        // Unmark as watched
+        if (relayPool) {
+          await unarchiveWebsite(videoUrl, activeAccount, relayPool)
+        }
+        setIsMarkedAsWatched(false)
+      } else {
+        // Mark as watched
+        if (relayPool) {
+          await createWebsiteReaction(videoUrl, activeAccount, relayPool)
+        }
+        setIsMarkedAsWatched(true)
+      }
+    } catch (error) {
+      console.warn('Failed to update watched status:', error)
+    } finally {
+      setIsCheckingWatchedStatus(false)
+      setTimeout(() => setShowCheckAnimation(false), 1000)
+    }
+  }
+
+  const toggleVideoMenu = () => setShowVideoMenu(v => !v)
+
+  const handleOpenVideoExternal = () => {
+    window.open(videoUrl, '_blank', 'noopener,noreferrer')
+    setShowVideoMenu(false)
+  }
+
+  const handleOpenVideoNative = () => {
+    const native = buildNativeVideoUrl(videoUrl)
+    if (native) {
+      window.location.href = native
+    } else {
+      window.location.href = videoUrl
+    }
+    setShowVideoMenu(false)
+  }
+
+  const handleCopyVideoUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(videoUrl)
+    } catch (e) {
+      console.warn('Clipboard copy failed', e)
+    } finally {
+      setShowVideoMenu(false)
+    }
+  }
+
+  const handleShareVideoUrl = async () => {
+    try {
+      if ((navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
+        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ 
+          title: ytMeta?.title || title || 'Video', 
+          url: videoUrl 
+        })
+      } else {
+        await navigator.clipboard.writeText(videoUrl)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowVideoMenu(false)
+    }
+  }
+
+  const displayTitle = ytMeta?.title || title
+  const displaySummary = ytMeta?.description || summary
+  const durationText = videoDurationSec !== null ? formatDuration(videoDurationSec) : null
+  
+  // Get video thumbnail for cover image
+  const youtubeThumbnail = getYouTubeThumbnail(videoUrl)
+  const vimeoThumbnail = getVimeoThumbnail(videoUrl)
+  const videoThumbnail = youtubeThumbnail || vimeoThumbnail
+  const displayImage = videoThumbnail || image
+
+  return (
+    <>
+      <ReaderHeader 
+        title={displayTitle}
+        image={displayImage}
+        summary={displaySummary}
+        published={published}
+        readingTimeText={durationText}
+        hasHighlights={false}
+        highlightCount={0}
+        settings={settings}
+        highlights={[]}
+        highlightVisibility={{ nostrverse: true, friends: true, mine: true }}
+        onHighlightCountClick={onOpenHighlights}
+      />
+      
+      <div className="reader-video">
+        <ReactPlayer 
+          url={videoUrl} 
+          controls 
+          width="100%"
+          height="auto"
+          style={{ 
+            width: '100%', 
+            height: 'auto', 
+            aspectRatio: '16/9' 
+          }}
+          onDuration={(d) => setVideoDurationSec(Math.floor(d))}
+        />
+      </div>
+      
+      {displaySummary && (
+        <div className="large-text" style={{ color: '#ddd', padding: '0 0.75rem', whiteSpace: 'pre-wrap', marginBottom: '0.75rem' }}>
+          {displaySummary}
+        </div>
+      )}
+      
+      {ytMeta?.transcript && (
+        <div style={{ padding: '0 0.75rem 1rem 0.75rem' }}>
+          <h3 style={{ margin: '1rem 0 0.5rem 0', fontSize: '1rem', color: '#aaa' }}>Transcript</h3>
+          <div className="large-text" style={{ whiteSpace: 'pre-wrap', color: '#ddd' }}>
+            {ytMeta.transcript}
+          </div>
+        </div>
+      )}
+      
+      <div className="article-menu-container">
+        <div className="article-menu-wrapper" ref={videoMenuRef}>
+          <button
+            className="article-menu-btn"
+            onClick={toggleVideoMenu}
+            title="More options"
+          >
+            <FontAwesomeIcon icon={faEllipsisH} />
+          </button>
+          {showVideoMenu && (
+            <div className={`article-menu ${videoMenuOpenUpward ? 'open-upward' : ''}`}>
+              <button className="article-menu-item" onClick={handleOpenVideoExternal}>
+                <FontAwesomeIcon icon={faExternalLinkAlt} />
+                <span>Open Link</span>
+              </button>
+              <button className="article-menu-item" onClick={handleOpenVideoNative}>
+                <FontAwesomeIcon icon={faMobileAlt} />
+                <span>Open in Native App</span>
+              </button>
+              <button className="article-menu-item" onClick={handleCopyVideoUrl}>
+                <FontAwesomeIcon icon={faCopy} />
+                <span>Copy URL</span>
+              </button>
+              <button className="article-menu-item" onClick={handleShareVideoUrl}>
+                <FontAwesomeIcon icon={faShare} />
+                <span>Share</span>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+      
+      {activeAccount && (
+        <div className="mark-as-read-container">
+          <button
+            className={`mark-as-read-btn ${isMarkedAsWatched ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
+            onClick={handleMarkAsWatched}
+            disabled={isCheckingWatchedStatus}
+            title={isMarkedAsWatched ? 'Already Marked as Watched' : 'Mark as Watched'}
+            style={isMarkedAsWatched ? { opacity: 0.85 } : undefined}
+          >
+            <FontAwesomeIcon 
+              icon={faCheckCircle} 
+              className={isMarkedAsWatched ? 'check-icon' : 'check-icon-empty'} 
+            />
+            <span>{isMarkedAsWatched ? 'Watched' : 'Mark as Watched'}</span>
+          </button>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default VideoView
--- a/src/hooks/useArticleLoader.ts
+++ b/src/hooks/useArticleLoader.ts
@@ -76,6 +76,10 @@ export function useArticleLoader({
      setSelectedUrl(`nostr:${naddr}`)
      setIsCollapsed(true)
      
+      // Don't clear highlights yet - let the smart filtering logic handle it
+      // when we know the article coordinate
+      setHighlightsLoading(false) // Don't show loading yet
+      
      // If we have preview data from navigation, show it immediately (no skeleton!)
      if (previewData) {
        setReaderContent({
@@ -237,7 +241,13 @@ export function useArticleLoader({
          
          if (coord && eventId) {
            setHighlightsLoading(true)
-            setHighlights([])
+            // Clear highlights that don't belong to this article coordinate
+            setHighlights((prev) => {
+              return prev.filter(h => {
+                // Keep highlights that match this article coordinate or event ID
+                return h.eventReference === coord || h.eventReference === eventId
+              })
+            })
            await fetchHighlightsForArticle(
              relayPool,
              coord,
@@ -251,7 +261,9 @@ export function useArticleLoader({
                  return next.sort((a, b) => b.created_at - a.created_at)
                })
              },
-              settingsRef.current
+              settingsRef.current,
+              false, // force
+              eventStore || undefined
            )
          } else {
            // No article event to fetch highlights for - clear and don't show loading
--- a/src/hooks/useBookmarksData.ts
+++ b/src/hooks/useBookmarksData.ts
@@ -158,7 +158,10 @@ export const useBookmarksData = ({

  // Fetch article-specific highlights when viewing an article
  useEffect(() => {
-    if (!relayPool || !activeAccount) return
+    if (!relayPool || !activeAccount) {
+      setHighlightsLoading(false)
+      return
+    }
    // Fetch article-specific highlights when viewing an article
    // External URLs have their highlights fetched by useExternalUrlLoader
    if (effectiveArticleCoordinate && !externalUrl) {
@@ -167,6 +170,9 @@ export const useBookmarksData = ({
      // Clear article highlights when not viewing an article
      setArticleHighlights([])
      setHighlightsLoading(false)
+    } else {
+      // For external URLs or other cases, loading is not needed
+      setHighlightsLoading(false)
    }
  }, [relayPool, activeAccount, effectiveArticleCoordinate, naddr, externalUrl, handleFetchHighlights])

--- a/src/hooks/useFilteredHighlights.ts
+++ b/src/hooks/useFilteredHighlights.ts
@@ -3,6 +3,7 @@ import { Highlight } from '../types/highlights'
 import { HighlightVisibility } from '../components/HighlightsPanel'
 import { normalizeUrl } from '../utils/urlHelpers'
 import { classifyHighlights } from '../utils/highlightClassification'
+import { nip19 } from 'nostr-tools'

 interface UseFilteredHighlightsParams {
  highlights: Highlight[]
@@ -24,8 +25,29 @@ export const useFilteredHighlights = ({
    
    let urlFiltered = highlights
    
-    // For Nostr articles, we already fetched highlights specifically for this article
-    if (!selectedUrl.startsWith('nostr:')) {
+    // Filter highlights based on URL type
+    if (selectedUrl.startsWith('nostr:')) {
+      // For Nostr articles, extract the article coordinate and filter by eventReference
+      try {
+        const decoded = nip19.decode(selectedUrl.replace('nostr:', ''))
+        if (decoded.type === 'naddr') {
+          const ptr = decoded.data as { kind: number; pubkey: string; identifier: string }
+          const articleCoordinate = `${ptr.kind}:${ptr.pubkey}:${ptr.identifier}`
+          
+          urlFiltered = highlights.filter(h => {
+            // Keep highlights that match this article coordinate
+            return h.eventReference === articleCoordinate
+          })
+        } else {
+          // Not a valid naddr, clear all highlights
+          urlFiltered = []
+        }
+      } catch {
+        // Invalid naddr, clear all highlights
+        urlFiltered = []
+      }
+    } else {
+      // For web URLs, filter by URL matching
      const normalizedSelected = normalizeUrl(selectedUrl)
      
      urlFiltered = highlights.filter(h => {
--- a/src/hooks/useReadingPosition.ts
+++ b/src/hooks/useReadingPosition.ts
@@ -23,101 +23,63 @@ export const useReadingPosition = ({
  const positionRef = useRef(0)
  const [isReadingComplete, setIsReadingComplete] = useState(false)
  const hasTriggeredComplete = useRef(false)
-  const lastSavedPosition = useRef(0)
  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const hasSavedOnce = useRef(false)
  const completionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const lastSavedAtRef = useRef<number>(0)
  const suppressUntilRef = useRef<number>(0)
-  const syncEnabledRef = useRef(syncEnabled)
+  const pendingPositionRef = useRef<number>(0) // Track latest position for throttled save
+  const lastSaved100Ref = useRef(false) // Track if we've saved 100% to avoid duplicate saves
+  
+  // Store callbacks in refs to avoid them being dependencies
+  const onPositionChangeRef = useRef(onPositionChange)
+  const onReadingCompleteRef = useRef(onReadingComplete)
  const onSaveRef = useRef(onSave)
-  const scheduleSaveRef = useRef<((pos: number) => void) | null>(null)
-
-  // Keep refs in sync with props
+  
  useEffect(() => {
-    syncEnabledRef.current = syncEnabled
+    onPositionChangeRef.current = onPositionChange
+    onReadingCompleteRef.current = onReadingComplete
    onSaveRef.current = onSave
-  }, [syncEnabled, onSave])
+  }, [onPositionChange, onReadingComplete, onSave])

  // Suppress auto-saves for a given duration (used after programmatic restore)
  const suppressSavesFor = useCallback((ms: number) => {
    const until = Date.now() + ms
    suppressUntilRef.current = until
-    console.log(`[reading-position] [${new Date().toISOString()}] 🛡️ Suppressing saves for ${ms}ms until ${new Date(until).toISOString()}`)
  }, [])

-  // Debounced save function - simple 2s debounce
+  // Throttled save function - saves at 1s intervals during scrolling
  const scheduleSave = useCallback((currentPosition: number) => {
-    if (!syncEnabledRef.current || !onSaveRef.current) {
+    if (!syncEnabled || !onSaveRef.current) {
      return
    }

    // Always save instantly when we reach completion (1.0)
-    if (currentPosition === 1 && lastSavedPosition.current < 1) {
+    if (currentPosition === 1 && !lastSaved100Ref.current) {
      if (saveTimerRef.current) {
        clearTimeout(saveTimerRef.current)
        saveTimerRef.current = null
      }
-      console.log(`[reading-position] [${new Date().toISOString()}] 💾 Instant save at 100% completion`)
-      lastSavedPosition.current = 1
-      hasSavedOnce.current = true
-      lastSavedAtRef.current = Date.now()
+      lastSaved100Ref.current = true
      onSaveRef.current(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
+    // Always update the pending position (latest position to save)
+    pendingPositionRef.current = currentPosition

-    if (!hasSignificantChange) {
-      return
-    }
-
-    // Clear any existing timer and schedule new save
+    // Throttle: only schedule a save if one isn't already pending
+    // This ensures saves happen at regular 1s intervals during continuous scrolling
    if (saveTimerRef.current) {
-      clearTimeout(saveTimerRef.current)
+      return // Already have a save scheduled, don't reset the timer
    }

-    const DEBOUNCE_MS = 3000 // Save max every 3 seconds
+    const THROTTLE_MS = 1000
    saveTimerRef.current = setTimeout(() => {
-      console.log(`[reading-position] [${new Date().toISOString()}] 💾 Auto-save at ${Math.round(currentPosition * 100)}%`)
-      lastSavedPosition.current = currentPosition
-      hasSavedOnce.current = true
-      lastSavedAtRef.current = Date.now()
-      if (onSaveRef.current) {
-        onSaveRef.current(currentPosition)
-      }
+      // Save the latest position, not the one from when timer was scheduled
+      const positionToSave = pendingPositionRef.current
+      onSaveRef.current?.(positionToSave)
      saveTimerRef.current = null
-    }, DEBOUNCE_MS)
-  }, [])
-
-  // Store scheduleSave in ref for use in scroll handler
-  useEffect(() => {
-    scheduleSaveRef.current = scheduleSave
-  }, [scheduleSave])
-
-  // Immediate save function
-  const saveNow = useCallback(() => {
-    if (!syncEnabledRef.current || !onSaveRef.current) return
-    
-    // Check suppression even for saveNow (e.g., during restore)
-    if (Date.now() < suppressUntilRef.current) {
-      const remainingMs = suppressUntilRef.current - Date.now()
-      console.log(`[reading-position] [${new Date().toISOString()}] ⏭️ saveNow() suppressed (${remainingMs}ms remaining) at ${Math.round(positionRef.current * 100)}%`)
-      return
-    }
-    
-    if (saveTimerRef.current) {
-      clearTimeout(saveTimerRef.current)
-      saveTimerRef.current = null
-    }
-    console.log(`[reading-position] [${new Date().toISOString()}] 💾 saveNow() called at ${Math.round(positionRef.current * 100)}%`)
-    lastSavedPosition.current = positionRef.current
-    hasSavedOnce.current = true
-    lastSavedAtRef.current = Date.now()
-    onSaveRef.current(positionRef.current)
-  }, [])
+    }, THROTTLE_MS)
+  }, [syncEnabled])

  useEffect(() => {
    if (!enabled) return
@@ -145,15 +107,13 @@ export const useReadingPosition = ({
      
      setPosition(clampedProgress)
      positionRef.current = clampedProgress
-      onPositionChange?.(clampedProgress)
+      onPositionChangeRef.current?.(clampedProgress)

      // Schedule auto-save if sync is enabled (unless suppressed)
      if (Date.now() >= suppressUntilRef.current) {
-        scheduleSaveRef.current?.(clampedProgress)
-      } else {
-        const remainingMs = suppressUntilRef.current - Date.now()
-        console.log(`[reading-position] [${new Date().toISOString()}] 🛡️ Save suppressed (${remainingMs}ms remaining) at ${Math.round(clampedProgress * 100)}%`)
+        scheduleSave(clampedProgress)
      }
+      // Note: Suppression is silent to avoid log spam during scrolling

      // Completion detection with 2s hold at 100%
      if (!hasTriggeredComplete.current) {
@@ -164,7 +124,7 @@ export const useReadingPosition = ({
              if (!hasTriggeredComplete.current && positionRef.current === 1) {
                setIsReadingComplete(true)
                hasTriggeredComplete.current = true
-                onReadingComplete?.()
+                onReadingCompleteRef.current?.()
              }
              completionTimerRef.current = null
            }, completionHoldMs)
@@ -178,7 +138,7 @@ export const useReadingPosition = ({
            if (clampedProgress >= readingCompleteThreshold) {
              setIsReadingComplete(true)
              hasTriggeredComplete.current = true
-              onReadingComplete?.()
+              onReadingCompleteRef.current?.()
            }
          }
        }
@@ -196,32 +156,20 @@ export const useReadingPosition = ({
      window.removeEventListener('scroll', handleScroll)
      window.removeEventListener('resize', handleScroll)
      
-      // Flush pending save before unmount (don't lose progress if navigating away during debounce window)
-      if (saveTimerRef.current && syncEnabledRef.current && onSaveRef.current) {
-        clearTimeout(saveTimerRef.current)
-        saveTimerRef.current = null
-        
-        // Only flush if we have unsaved progress (position differs from last saved)
-        const hasUnsavedProgress = Math.abs(positionRef.current - lastSavedPosition.current) >= 0.05
-        if (hasUnsavedProgress && Date.now() >= suppressUntilRef.current) {
-          console.log(`[reading-position] [${new Date().toISOString()}] 💾 Flushing pending save on unmount at ${Math.round(positionRef.current * 100)}%`)
-          onSaveRef.current(positionRef.current)
-        }
-      }
-      
+      // DON'T clear save timer - let it complete even if tracking is temporarily disabled
+      // Only clear completion timer since that's tied to the current scroll session
      if (completionTimerRef.current) {
        clearTimeout(completionTimerRef.current)
      }
    }
-  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold, completionHoldMs])
+  }, [enabled, readingCompleteThreshold, scheduleSave, completionHoldMs])

  // Reset reading complete state when enabled changes
  useEffect(() => {
    if (!enabled) {
      setIsReadingComplete(false)
      hasTriggeredComplete.current = false
-      hasSavedOnce.current = false
-      lastSavedPosition.current = 0
+      lastSaved100Ref.current = false
      if (completionTimerRef.current) {
        clearTimeout(completionTimerRef.current)
        completionTimerRef.current = null
@@ -233,7 +181,6 @@ export const useReadingPosition = ({
    position,
    isReadingComplete,
    progressPercentage: Math.round(position * 100),
-    saveNow,
    suppressSavesFor
  }
 }
--- a/src/services/highlights/fetchFromAuthors.ts
+++ b/src/services/highlights/fetchFromAuthors.ts
@@ -28,7 +28,7 @@ export const fetchHighlightsFromAuthors = async (
    const seenIds = new Set<string>()
    const rawEvents = await queryEvents(
      relayPool,
-      { kinds: [9802], authors: pubkeys, limit: 200 },
+      { kinds: [9802], authors: pubkeys, limit: 1000 },
      {
        onEvent: (event: NostrEvent) => {
          if (!seenIds.has(event.id)) {
--- a/src/services/highlightsController.ts
+++ b/src/services/highlightsController.ts
@@ -8,8 +8,6 @@ import { eventToHighlight, sortHighlights } from './highlightEventProcessor'
 type HighlightsCallback = (highlights: Highlight[]) => void
 type LoadingCallback = (loading: boolean) => void

-const LAST_SYNCED_KEY = 'highlights_last_synced'
-
 /**
 * Shared highlights controller
 * Manages the user's highlights centrally, similar to bookmarkController
@@ -68,37 +66,10 @@ class HighlightsController {
    this.emitHighlights(this.currentHighlights)
  }

-  /**
-   * Get last synced timestamp for incremental loading
-   */
-  private getLastSyncedAt(pubkey: string): number | null {
-    try {
-      const data = localStorage.getItem(LAST_SYNCED_KEY)
-      if (!data) return null
-      const parsed = JSON.parse(data)
-      return parsed[pubkey] || null
-    } catch {
-      return null
-    }
-  }
-
-  /**
-   * Update last synced timestamp
-   */
-  private setLastSyncedAt(pubkey: string, timestamp: number): void {
-    try {
-      const data = localStorage.getItem(LAST_SYNCED_KEY)
-      const parsed = data ? JSON.parse(data) : {}
-      parsed[pubkey] = timestamp
-      localStorage.setItem(LAST_SYNCED_KEY, JSON.stringify(parsed))
-    } catch (err) {
-      console.warn('[highlights] Failed to save last synced timestamp:', err)
-    }
-  }
-
  /**
   * Load highlights for a user
   * Streams results and stores in event store
+   * Always fetches ALL highlights to ensure completeness
   */
  async start(options: {
    relayPool: RelayPool
@@ -124,15 +95,12 @@ class HighlightsController {
      const seenIds = new Set<string>()
      const highlightsMap = new Map<string, Highlight>()

-      // Get last synced timestamp for incremental loading
-      const lastSyncedAt = force ? null : this.getLastSyncedAt(pubkey)
-      const filter: { kinds: number[]; authors: string[]; since?: number } = {
+      // Fetch ALL highlights without limits (no since filter)
+      // This ensures we get complete results for profile/my pages
+      const filter = {
        kinds: [KINDS.Highlights],
        authors: [pubkey]
      }
-      if (lastSyncedAt) {
-        filter.since = lastSyncedAt
-      }

      const events = await queryEvents(
        relayPool,
@@ -179,12 +147,6 @@ class HighlightsController {
      this.lastLoadedPubkey = pubkey
      this.emitHighlights(sorted)

-      // Update last synced timestamp
-      if (sorted.length > 0) {
-        const newestTimestamp = Math.max(...sorted.map(h => h.created_at))
-        this.setLastSyncedAt(pubkey, newestTimestamp)
-      }
-
    } catch (error) {
      console.error('[highlights] ❌ Failed to load highlights:', error)
      this.currentHighlights = []
--- a/src/services/nostrverseHighlightsController.ts
+++ b/src/services/nostrverseHighlightsController.ts
@@ -81,13 +81,21 @@ class NostrverseHighlightsController {
    const currentGeneration = this.generation
    this.setLoading(true)

-    try {
-      const seenIds = new Set<string>()
-      const highlightsMap = new Map<string, Highlight>()
+  try {
+    const seenIds = new Set<string>()
+    // Start with existing highlights when doing incremental sync
+    const highlightsMap = new Map<string, Highlight>(
+      this.currentHighlights.map(h => [h.id, h])
+    )

-      const lastSyncedAt = force ? null : this.getLastSyncedAt()
-      const filter: { kinds: number[]; since?: number } = { kinds: [KINDS.Highlights] }
-      if (lastSyncedAt) filter.since = lastSyncedAt
+    const lastSyncedAt = force ? null : this.getLastSyncedAt()
+    const filter: { kinds: number[]; since?: number; limit?: number } = { kinds: [KINDS.Highlights] }
+    if (lastSyncedAt) {
+      filter.since = lastSyncedAt
+    } else {
+      // On initial load, fetch more highlights
+      filter.limit = 1000
+    }

      const events = await queryEvents(
        relayPool,
@@ -111,22 +119,24 @@ class NostrverseHighlightsController {

      if (currentGeneration !== this.generation) return

-      events.forEach(evt => eventStore.add(evt))
+    events.forEach(evt => eventStore.add(evt))

-      const highlights = events.map(eventToHighlight)
-      const unique = Array.from(new Map(highlights.map(h => [h.id, h])).values())
-      const sorted = sortHighlights(unique)
+    const highlights = events.map(eventToHighlight)
+    // Merge new highlights with existing ones
+    highlights.forEach(h => highlightsMap.set(h.id, h))
+    const sorted = sortHighlights(Array.from(highlightsMap.values()))

-      this.currentHighlights = sorted
-      this.loaded = true
-      this.emitHighlights(sorted)
+    this.currentHighlights = sorted
+    this.loaded = true
+    this.emitHighlights(sorted)

      if (sorted.length > 0) {
        const newest = Math.max(...sorted.map(h => h.created_at))
        this.setLastSyncedAt(newest)
      }
    } catch (err) {
-      this.currentHighlights = []
+      // On error, keep existing highlights instead of clearing them
+      console.error('[nostrverse-highlights] Failed to sync:', err)
      this.emitHighlights(this.currentHighlights)
    } finally {
      if (currentGeneration === this.generation) this.setLoading(false)
--- a/src/services/readingPositionService.ts
+++ b/src/services/readingPositionService.ts
@@ -19,7 +19,6 @@ export interface ReadingProgressContent {
  progress: number // 0-1 scroll progress
  ts?: number // Unix timestamp (optional, for display)
  loc?: number // Optional: pixel position
-  ver?: string // Schema version
 }

 // Helper to extract and parse reading progress from event (kind 39802)
@@ -117,8 +116,7 @@ export async function saveReadingPosition(
  const progressContent: ReadingProgressContent = {
    progress: position.position,
    ts: position.timestamp,
-    loc: position.scrollTop,
-    ver: '1'
+    loc: position.scrollTop
  }
  
  const tags = generateProgressTags(articleIdentifier)
@@ -203,14 +201,10 @@ export function collectReadingPositionsOnce(params: {
    hasEmitted = true

    if (candidates.length === 0) {
-      console.log('[reading-position] 📊 No candidates collected during stabilization window')
      stableCallback(null)
      return
    }

-    console.log('[reading-position] 📊 Collected', candidates.length, 'position candidates:', 
-      candidates.map(c => `${Math.round(c.position * 100)}% @${new Date(c.timestamp * 1000).toLocaleTimeString()}`).join(', '))
-
    // Sort: newest first, then highest progress
    candidates.sort((a, b) => {
      const timeDiff = b.timestamp - a.timestamp
@@ -218,13 +212,10 @@ export function collectReadingPositionsOnce(params: {
      return b.position - a.position
    })

-    console.log('[reading-position] ✅ Best position selected:', Math.round(candidates[0].position * 100) + '%', 
-      'from', new Date(candidates[0].timestamp * 1000).toLocaleTimeString())
    stableCallback(candidates[0])
  }

  // Start streaming and collecting
-  console.log('[reading-position] 🎯 Starting stabilized position collector (window:', windowMs, 'ms)')
  streamStop = startReadingPositionStream(
    relayPool,
    eventStore,
@@ -233,21 +224,16 @@ export function collectReadingPositionsOnce(params: {
    (pos) => {
      if (hasEmitted) return
      if (!pos) {
-        console.log('[reading-position] 📥 Received null position')
        return
      }
      if (pos.position <= 0.05 || pos.position >= 1) {
-        console.log('[reading-position] 🚫 Ignoring position', Math.round(pos.position * 100) + '% (outside 5%-100% range)')
        return
      }
      
-      console.log('[reading-position] 📥 Received position candidate:', Math.round(pos.position * 100) + '%', 
-        'from', new Date(pos.timestamp * 1000).toLocaleTimeString())
      candidates.push(pos)

      // Schedule one-shot emission if not already scheduled
      if (!timer) {
-        console.log('[reading-position] ⏰ Starting', windowMs, 'ms stabilization timer')
        timer = setTimeout(() => {
          emitStable()
          if (streamStop) streamStop()
--- a/src/services/readingProgressController.ts
+++ b/src/services/readingProgressController.ts
@@ -13,7 +13,7 @@ type ProgressMapCallback = (progressMap: Map<string, number>) => void
 type LoadingCallback = (loading: boolean) => void

 const LAST_SYNCED_KEY = 'reading_progress_last_synced'
-const PROGRESS_CACHE_KEY = 'reading_progress_cache_v1'
+const PROGRESS_CACHE_KEY = 'reading_progress_cache'

 /**
 * Shared reading progress controller
--- a/src/services/relayManager.ts
+++ b/src/services/relayManager.ts
@@ -81,7 +81,15 @@ export function applyRelaySetToPool(
  for (const url of toRemove) {
    const relay = relayPool.relays.get(url)
    if (relay) {
-      relay.close()
+      try {
+        // Only close if relay is actually connected or attempting to connect
+        // This helps avoid WebSocket warnings for connections that never started
+        relay.close()
+      } catch (error) {
+        // Suppress errors when closing relays that haven't fully connected yet
+        // This can happen when switching relay sets before connections establish
+        console.debug('[relay-manager] Ignoring error when closing relay:', url, error)
+      }
      relayPool.relays.delete(url)
    }
  }
--- a/src/services/settingsService.ts
+++ b/src/services/settingsService.ts
@@ -62,6 +62,7 @@ export interface UserSettings {
  renderVideoLinksAsEmbeds?: boolean // default: false
  // Reading position sync
  syncReadingPosition?: boolean // default: false (opt-in)
+  autoScrollToReadingPosition?: boolean // default: true - automatically scroll to saved position when opening article
  autoMarkAsReadOnCompletion?: boolean // default: false (opt-in)
  // Bookmark filtering
  hideBookmarksWithoutCreationDate?: boolean // default: false
--- a/src/services/writingsController.ts
+++ b/src/services/writingsController.ts
@@ -10,8 +10,6 @@ const { getArticleTitle, getArticleSummary, getArticleImage, getArticlePublished
 type WritingsCallback = (posts: BlogPostPreview[]) => void
 type LoadingCallback = (loading: boolean) => void

-const LAST_SYNCED_KEY = 'writings_last_synced'
-
 /**
 * Shared writings controller
 * Manages the user's nostr-native long-form articles (kind:30023) centrally,
@@ -71,34 +69,6 @@ class WritingsController {
    this.emitWritings(this.currentPosts)
  }

-  /**
-   * Get last synced timestamp for incremental loading
-   */
-  private getLastSyncedAt(pubkey: string): number | null {
-    try {
-      const data = localStorage.getItem(LAST_SYNCED_KEY)
-      if (!data) return null
-      const parsed = JSON.parse(data)
-      return parsed[pubkey] || null
-    } catch {
-      return null
-    }
-  }
-
-  /**
-   * Update last synced timestamp
-   */
-  private setLastSyncedAt(pubkey: string, timestamp: number): void {
-    try {
-      const data = localStorage.getItem(LAST_SYNCED_KEY)
-      const parsed = data ? JSON.parse(data) : {}
-      parsed[pubkey] = timestamp
-      localStorage.setItem(LAST_SYNCED_KEY, JSON.stringify(parsed))
-    } catch (err) {
-      console.warn('[writings] Failed to save last synced timestamp:', err)
-    }
-  }
-
  /**
   * Convert NostrEvent to BlogPostPreview using applesauce Helpers
   */
@@ -127,6 +97,7 @@ class WritingsController {
  /**
   * Load writings for a user (kind:30023)
   * Streams results and stores in event store
+   * Always fetches ALL writings to ensure completeness
   */
  async start(options: {
    relayPool: RelayPool
@@ -152,15 +123,12 @@ class WritingsController {
      const seenIds = new Set<string>()
      const uniqueByReplaceable = new Map<string, BlogPostPreview>()

-      // Get last synced timestamp for incremental loading
-      const lastSyncedAt = force ? null : this.getLastSyncedAt(pubkey)
-      const filter: { kinds: number[]; authors: string[]; since?: number } = {
+      // Fetch ALL writings without limits (no since filter)
+      // This ensures we get complete results for profile/my pages
+      const filter = {
        kinds: [KINDS.BlogPost],
        authors: [pubkey]
      }
-      if (lastSyncedAt) {
-        filter.since = lastSyncedAt
-      }

      const events = await queryEvents(
        relayPool,
@@ -221,12 +189,6 @@ class WritingsController {
      this.lastLoadedPubkey = pubkey
      this.emitWritings(sorted)

-      // Update last synced timestamp
-      if (sorted.length > 0) {
-        const newestTimestamp = Math.max(...sorted.map(p => p.event.created_at))
-        this.setLastSyncedAt(pubkey, newestTimestamp)
-      }
-
    } catch (error) {
      console.error('[writings] ❌ Failed to load writings:', error)
      this.currentPosts = []
--- a/src/styles/components/me.css
+++ b/src/styles/components/me.css
@@ -1,4 +1,4 @@
-/* Me page tabs */
+/* My page tabs */
 .me-tabs {
  display: flex;
  gap: 0.5rem;
@@ -71,10 +71,22 @@
  padding-top: 0.25rem;
 }

-/* Align highlight list width with profile card width on /me */
+/* Align highlight list width with profile card width on /my */
 .me-highlights-list { padding-left: 0; padding-right: 0; }
 .explore-header .author-card { max-width: 600px; margin: 0 auto; width: 100%; }

+/* Hide tab labels on mobile to save space */
+@media (max-width: 768px) {
+  .me-tab .tab-label {
+    display: none;
+  }
+  
+  .me-tab {
+    padding: 0.75rem;
+    gap: 0;
+  }
+}
+
 /* Bookmarks list */
 .bookmarks-list {
  display: flex;
@@ -83,7 +95,7 @@
  text-align: left; /* Override center alignment from .app */
 }

-/* Bookmark filters in Me page */
+/* Bookmark filters in My page */
 .me-tab-content .bookmark-filters {
  background: transparent;
  border: none;
--- a/src/styles/components/reader.css
+++ b/src/styles/components/reader.css
@@ -145,7 +145,7 @@
 }
 .reader-markdown blockquote, .reader-html blockquote { 
  margin: 1.5rem 0; 
-  padding: 1rem 0 1rem 2rem;
+  padding: 1rem 2rem;
  font-style: italic;
 }
 .reader-markdown blockquote p, .reader-html blockquote p { margin: 0.5rem 0; }
@@ -192,7 +192,8 @@
  }
  
  .reader-markdown img, .reader-html img {
-    max-width: 100%;
+    max-width: 100% !important;
+    width: auto !important;
    height: auto;
  }
 }
@@ -232,7 +233,7 @@
    max-width: 100%;
    width: 100%;
    margin: 0;
-    padding: 0.5rem;
+    padding: 0.5rem 1rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
@@ -261,7 +262,7 @@
  .reader-header-overlay .reader-summary.hide-on-mobile { display: none; }
  .reader-summary-below-image { display: block; padding: 0 0 1.5rem 0; margin-top: -1rem; }
  .reader-summary-below-image .reader-summary { color: var(--color-text-secondary); font-size: 1rem; line-height: 1.6; margin: 0; }
-  .reader-hero-image { min-height: 280px; max-height: 400px; height: 50vh; }
+  .reader-hero-image { width: calc(100% + 2rem); margin: -0.5rem -1rem 2rem -1rem; min-height: 280px; max-height: 400px; height: 50vh; }
  .reader-hero-image img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
  .reader-header-overlay { padding: 1.5rem 1rem 1rem; }
  .reader-header-overlay .reader-title { font-size: 2rem; line-height: 1.3; }
--- a/src/styles/layout/highlights.css
+++ b/src/styles/layout/highlights.css
@@ -62,6 +62,28 @@

 .highlights-actions { display: flex; align-items: center; justify-content: space-between; width: 100%; }
 .highlights-actions-left { display: flex; align-items: center; gap: 0.5rem; }
+.highlights-actions-right { display: flex; align-items: center; gap: 0.5rem; }
+
+/* Collapse button in highlights header */
+.highlights-header .toggle-highlights-btn {
+  background: transparent;
+  color: var(--color-text);
+  border: 1px solid var(--color-border-subtle);
+  padding: 0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 33px;
+  height: 33px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.highlights-header .toggle-highlights-btn:hover { background: var(--color-bg-elevated); color: var(--color-text); }
+.highlights-header .toggle-highlights-btn:active { transform: translateY(1px); }

 .highlights-title { display: flex; align-items: center; gap: 0.5rem; }
 .highlights-title h3 { margin: 0; font-size: 1rem; font-weight: 600; }
--- a/src/styles/layout/sidebar.css
+++ b/src/styles/layout/sidebar.css
@@ -54,6 +54,13 @@
  }
 }

+.sidebar-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+}
+
 .sidebar-header-right {
  display: flex;
  align-items: center;
@@ -132,6 +139,70 @@
 .profile-avatar-button img { width: 100%; height: 100%; object-fit: cover; }
 .profile-avatar-button svg { font-size: 1rem; }

+/* Profile menu wrapper */
+.profile-menu-wrapper {
+  position: relative;
+}
+
+/* Dropdown menu */
+.profile-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 180px;
+  padding: 0.25rem;
+  z-index: 1000;
+  animation: profileMenuSlideIn 0.15s ease-out;
+}
+
+@keyframes profileMenuSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.profile-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--color-text);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 0.875rem;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.profile-menu-item:hover {
+  background: var(--color-bg-hover);
+}
+
+.profile-menu-item svg {
+  width: 1em;
+  font-size: 1rem;
+  color: var(--color-text-secondary);
+}
+
+.profile-menu-separator {
+  height: 1px;
+  background: var(--color-border);
+  margin: 0.25rem 0;
+}
+
 .sidebar-header-bar .toggle-sidebar-btn {
  background: transparent;
  color: var(--color-text);
--- a/src/utils/urlHelpers.ts
+++ b/src/utils/urlHelpers.ts
@@ -1,4 +1,5 @@
 import { Highlight } from '../types/highlights'
+import { nip19 } from 'nostr-tools'

 export function normalizeUrl(url: string): string {
  try {
@@ -15,10 +16,26 @@ export function filterHighlightsByUrl(highlights: Highlight[], selectedUrl: stri
  }
  
  
-  // For Nostr articles, we already fetched highlights specifically for this article
-  // So we don't need to filter them - they're all relevant
+  // For Nostr articles, filter by article coordinate
  if (selectedUrl.startsWith('nostr:')) {
-    return highlights
+    try {
+      const decoded = nip19.decode(selectedUrl.replace('nostr:', ''))
+      if (decoded.type === 'naddr') {
+        const ptr = decoded.data as { kind: number; pubkey: string; identifier: string }
+        const articleCoordinate = `${ptr.kind}:${ptr.pubkey}:${ptr.identifier}`
+        
+        return highlights.filter(h => {
+          // Keep highlights that match this article coordinate
+          return h.eventReference === articleCoordinate
+        })
+      } else {
+        // Not a valid naddr, return empty array
+        return []
+      }
+    } catch {
+      // Invalid naddr, return empty array
+      return []
+    }
  }
  
  // For web URLs, filter by URL matching
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -104,7 +104,7 @@ export default defineConfig({
      filename: 'sw.ts',
      injectRegister: null,
      manifest: {
-        name: 'Boris - Nostr Bookmarks',
+        name: 'Boris - Read, Highlight, Explore',
        short_name: 'Boris',
        description: 'Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.',
        start_url: '/',