fix: resolve all linter errors and type issues

- Remove unused state variables (readsMap, linksMap) by using only setters
- Move VALID_FILTERS constant outside component to fix exhaustive-deps warning
- Remove unused isReading variable in ReadingProgressIndicator
- Remove unused extractUrlFromBookmark function and IndividualBookmark import
- Fix type errors in linksFromBookmarks by extracting metadata from tags instead of non-existent properties

.cursor/plans/rename-archive-to-reads-658dc3b5.plan.md

@@ -0,0 +1,136 @@
+<!-- 658dc3b5-4b0b-4d30-8cfa-a9326f1d467e f1d78d5b-786d-4658-ae4b-56278aba318e -->
+# Lazy Load Me Component Tabs
+
+## Overview
+
+Currently, the Me component loads all data for all tabs upfront, causing 30+ second load times even when viewing a single tab. This plan implements lazy loading where only the active tab's data is fetched on demand.
+
+## Implementation Strategy
+
+Based on user requirements:
+
+- Load only the active tab's data (pure lazy loading)
+- No background prefetching
+- Show cached data immediately, refresh in background when revisiting tabs
+- Works for both `/me` (own profile) and `/p/` (other profiles) using the same code
+
+## Key Insight
+
+The Me component already handles both own profile and other profiles via the `isOwnProfile` flag. The lazy loading will naturally work for both cases:
+
+- Own profile (`/me`): Loads all tabs including private data (bookmarks, reads)
+- Other profiles (`/p/npub...`): Only loads public tabs (highlights, writings)
+
+## Changes Required
+
+### 1. Update Me.tsx Loading Logic
+
+**Current behavior**: Single `useEffect` loads all data (highlights, writings, bookmarks, reads) regardless of active tab.
+
+**New behavior**:
+
+- Create separate loading functions per tab
+- Load only active tab's data on mount and tab switches
+- Show cached data immediately if available
+- Refresh cached data in background when tab is revisited
+
+**Key changes**:
+
+- Remove the monolithic `loadData()` function
+- Add `loadedTabs` state to track which tabs have been fetched
+- Create tab-specific loaders: `loadHighlights()`, `loadWritings()`, `loadBookmarks()`, `loadReads()`
+- Add `useEffect` that watches `activeTab` and loads data for current tab only
+- Check cache first, display cached data, then refresh in background
+
+**Code location**: Lines 64-123 in `src/components/Me.tsx`
+
+### 2. Per-Tab Loading State
+
+Add tab-specific loading tracking:
+
+```typescript
+const [loadedTabs, setLoadedTabs] = useState<Set<TabType>>(new Set())
+```
+
+This prevents unnecessary reloads and allows showing cached data instantly.
+
+### 3. Tab-Specific Load Functions
+
+Create individual functions:
+
+- `loadHighlightsTab()` - fetch highlights
+- `loadWritingsTab()` - fetch writings  
+- `loadReadingListTab()` - fetch bookmarks
+- `loadReadsTab()` - fetch bookmarks first, then reads
+
+Each function:
+
+1. Checks cache, displays if available
+2. Sets loading state
+3. Fetches fresh data
+4. Updates state and cache
+5. Marks tab as loaded
+
+### 4. Tab Switch Effect
+
+Replace the current useEffect with:
+
+```typescript
+useEffect(() => {
+  if (!activeTab || !viewingPubkey) return
+  
+  // Check if we have cached data
+  const cached = getCachedMeData(viewingPubkey)
+  if (cached) {
+    // Show cached data immediately
+    setHighlights(cached.highlights)
+    setBookmarks(cached.bookmarks)
+    setReads(cached.reads)
+    // Continue to refresh in background
+  }
+  
+  // Load data for active tab
+  switch (activeTab) {
+    case 'highlights':
+      loadHighlightsTab()
+      break
+    case 'writings':
+      loadWritingsTab()
+      break
+    case 'reading-list':
+      loadReadingListTab()
+      break
+    case 'reads':
+      loadReadsTab()
+      break
+  }
+}, [activeTab, viewingPubkey, refreshTrigger])
+```
+
+### 5. Handle Pull-to-Refresh
+
+Update pull-to-refresh logic to only reload the active tab instead of all tabs.
+
+## Benefits
+
+- Initial load: ~2-5s instead of 30+ seconds (only loads one tab)
+- Tab switching: Instant with cached data, refreshes in background
+- Network efficiency: Only fetches what the user views
+- Better UX: Users see content immediately from cache
+
+## Testing Checklist
+
+- Verify each tab loads independently
+- Confirm cached data shows immediately on tab switch
+- Ensure background refresh works without flickering
+- Test pull-to-refresh only reloads active tab
+- Verify loading states per tab work correctly
+
+### To-dos
+
+- [ ] Create src/services/readsService.ts with fetchAllReads function
+- [ ] Update Me.tsx to use reads instead of archive
+- [ ] Update routes from /me/archive to /me/reads
+- [ ] Update meCache.ts to use reads field
+- [ ] Update filter logic to handle actual reading progress
+- [ ] Test all 5 filters and data sources work correctly

.cursor/rules/fontawesome.mdc

@@ -5,4 +5,4 @@ alwaysApply: false
 
 We use FontAwesome. If you can use a fa-icon (instead of text) use a fa-icon. Always strive to keep the UI modern, beautiful, and minimalistic. Shy away from using too many colors, borders, glow, and animations.
 
-Never write "Loading" - always show a spinner, and just a spinner.
+Never write "Loading" - always show a loading placeholder (or a loading spinner, when appropriate).

.cursor/rules/mobile-first-ui-ux.mdc

@@ -4,3 +4,5 @@ alwaysApply: false
 ---
 
 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.

.gitignore

@@ -8,6 +8,7 @@ dist
 *.log
 .DS_Store
 
-# Applesauce Reference
+# Reference Projects
 applesauce
+primal-web-app
 

CHANGELOG.md

@@ -7,6 +7,492 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.6.20] - 2025-10-15
+
+### Added
+
+- 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
+  - Separate filter for external articles with link icon
+  - Multiple filters can be active simultaneously
+- Private Bookmarks section for encrypted legacy bookmarks
+  - Encrypted legacy bookmarks now grouped in separate section
+  - Better organization and clarity for different bookmark types
+
+### Changed
+
+- Bookmark section labels improved for clarity
+  - More descriptive section headings throughout
+  - 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
+- Lock icon removed from individual bookmarks
+  - Encryption status now indicated by section grouping
+  - Cleaner bookmark item appearance
+- External article icon changed to link icon (`faLink`)
+  - More intuitive icon for external content
+
+### Fixed
+
+- Highlight button positioning and visibility
+  - Fixed to viewport for consistent placement
+  - Sticky and always visible when needed
+  - Properly positioned inside reader pane
+
+## [0.6.19] - 2025-10-15
+
+### Fixed
+
+- Highlights disappearing on external URLs after a few seconds
+  - Fixed `useBookmarksData` from fetching general highlights when viewing external URLs
+  - External URL highlights now managed exclusively by `useExternalUrlLoader`
+  - Removed redundant `setHighlights` call that was overwriting streamed highlights
+  - Improved error handling in `fetchHighlightsForUrl` to prevent silent failures
+  - Isolated rebroadcast errors so they don't break highlight display
+  - Added logging to help diagnose highlight fetching issues
+
+## [0.6.18] - 2025-10-15
+
+### Changed
+
+- Zap split labels simplified and terminology updated
+  - Removed redundant "Weight: xy" label to save space
+  - Changed "Author(s) Share" to "Author's Share" (possessive singular)
+  - Changed "Support Boris" to "Boris' Share" for consistency
+  - Weight value now shown directly in label (e.g., "Your Share: 50")
+  - Share and percentage now displayed on same line for cleaner layout
+- Zap preset buttons on desktop now expand to match slider width
+  - Added `flex: 1` to buttons for equal width distribution
+  - Buttons still wrap properly on smaller screens
+- PWA install section now always visible in settings
+  - Section shows regardless of installation or device capability status
+  - Button adapts with proper disabled states and visual feedback
+  - "Installed" state shows checkmark icon and disabled button
+  - Non-installable state shows disabled button
+
+### Fixed
+
+- PWA install button now properly disabled when installation is not possible on device
+  - Button only enabled when browser fires `beforeinstallprompt` event
+  - Removed hardcoded testing state that always showed button as installable
+- App & Airplane Mode section now always visible regardless of PWA status
+  - Image cache and local relay settings always accessible
+  - Previously entire section was hidden if PWA not installable/installed
+  - Only PWA-specific install button is conditionally affected
+
+## [0.6.17] - 2025-10-15
+
+### Added
+
+- PWA settings illustration (`pwa.svg`) displayed on right side of section
+  - Responsive design: hidden on mobile, 30% width on desktop
+  - Visual enhancement for App & Airplane Mode section
+- Zaps illustration (`zaps.svg`) displayed on right side of Zap Splits section
+  - Matching responsive layout and styling as PWA illustration
+- Visual 50% indicators on zap split sliders
+  - Linear gradient background using highlight colors (yellow/orange) at 50% opacity
+  - Datalist tick marks at 50% for "Your Share" and "Author(s) Share" sliders
+  - Tick mark at 5 for "Support Boris" slider
+- Lightning bolt icons as slider thumbs for zap splits
+  - Replaces default circular slider handles
+  - White lightning bolt SVG embedded in slider thumb background
+  - 24px square thumb with 4px border radius
+- Offline-first description paragraph at beginning of App & Airplane Mode section
+  - Explains Boris's offline capabilities upfront
+- Settings page width constraint (900px max-width)
+  - Matches article view max-width for consistent reading experience
+  - Centered layout with proper margins
+
+### Changed
+
+- Settings section reorganization
+  - "PWA & Flight Mode" merged into single "App & Airplane Mode" section
+  - "Layout & Navigation" and "Startup & Behavior" merged into "Layout & Behavior"
+  - Section order: Theme → Reading & Display → Zap Splits → Layout & Behavior → App & Airplane Mode → Relays
+  - "Startup & Behavior" moved after "Zap Splits"
+  - "Layout & Navigation" moved below "Zap Splits"
+- PWA settings section restructure
+  - Checkboxes moved to top (image cache, local relays)
+  - Descriptive paragraphs in middle
+  - Install button at bottom
+  - Note about local relays moved before install paragraph
+- Zap split sliders styling
+  - Left side (0-50%): highlight color (yellow) at 50% opacity
+  - Right side (50-100%): friend-highlight color (orange) at 50% opacity
+  - Creates visual distinction tied to app's highlight color scheme
+- Zap split description text styling
+  - Now matches offline-first paragraph style with secondary color and smaller font size
+- Clear cache button styling
+  - Replaced `IconButton` with plain `FontAwesomeIcon` for subtler appearance
+  - No border or background, just icon with opacity
+- Font Size buttons alignment
+  - Now properly align to the right using `setting-control` wrapper
+  - Matches alignment of highlight color picker buttons
+- Default Highlight Visibility position
+  - Moved back to original position after "Paragraph Alignment"
+  - Grouped with other reading display controls
+- Spacing adjustments in App & Airplane Mode section
+  - Reduced gap between elements from 1rem → 0.5rem → 0.25rem for tighter layout
+
+### Fixed
+
+- PWA settings paragraph wrapping
+  - Moved offline-first paragraph inside flex container to prevent extending above image
+- Font Size buttons alignment issues
+  - Properly implemented `setting-control` wrapper for right alignment
+  - Previously attempted alignment didn't work correctly
+- Slider thumb icon centering
+  - Lightning bolt icons properly centered vertically on slider
+  - Added `position: relative`, `top: 0`, `margin-top: 0` for accurate positioning
+
+## [0.6.16] - 2025-10-15
+
+### Changed
+
+- Replaced delete dialog popup with inline confirmation UI
+  - Shows red "Confirm?" text with trash icon when delete is clicked
+  - Clicking the red trash icon confirms deletion
+  - No more modal overlay or backdrop
+  - Click outside or reopen menu to cancel
+- Reordered Reading & Display settings for better organization
+  - Highlight Style, Paragraph Alignment, and Default Highlight Visibility moved to top
+  - Followed by Reading Font, Font Size, and color pickers
+- Setting buttons now align vertically with fixed label width (220px)
+  - Creates consistent "tab stops" for cleaner visual alignment
+
+### Fixed
+
+- Removed unused `handleCancelDelete` function after dialog removal
+
+## [0.6.15] - 2025-10-15
+
+### Added
+
+- Paragraph alignment setting with left-aligned and justified text options
+  - Icon buttons in Reading & Display settings for switching alignment
+  - CSS variable system for applying alignment to reader content
+  - Real-time preview of alignment changes in settings
+  - Headings remain left-aligned for optimal readability
+
+### Changed
+
+- Default paragraph alignment changed to justified for improved reading experience
+  - Applies to paragraphs, list items, divs, and blockquotes
+  - Settings stored and synced via Nostr (NIP-78)
+
+## [0.6.14] - 2025-10-15
+
+### Added
+
+- Support for bookmark sets (NIP-51 kind:30003)
+  - Bookmark sets now display alongside regular bookmark lists
+  - Properly handles AddressPointer bookmarks for long-form articles
+- Content type icons for bookmarks
+  - Article, video, web, and image icons to indicate bookmark content type
+  - 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
+  - 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
+  - Automatically detects image brightness and adjusts text color
+  - Improved contrast for better readability
+
+### Changed
+
+- Renamed "Amethyst-style bookmarks" to "Old Bookmarks (Legacy)"
+- Hide cover images in compact view for cleaner layout
+- Support button improvements
+  - Moved to bottom-left of bookmarks bar
+  - Changed icon from lightning bolt to heart (orange color)
+  - Left-aligned support button, right-aligned view mode buttons
+- Section headings improved with better typography (removed counts)
+- Icon changed from book to file-lines for default bookmarks
+- Use regular (outlined) icon variants for lighter, more refined appearance
+- Add bookmark button moved to web bookmarks section
+- Empty state messages replaced with loading spinners
+- Section dividers made more subtle
+- Simplified bookmark filtering to only exclude empty content
+
+### Fixed
+
+- Removed borders from compact bookmark cards for cleaner look
+- Removed duplicate type indicator icons from bookmark cards
+- Reduced section heading bottom padding for better spacing
+- Aligned add bookmark button with section heading
+- Removed redundant loading spinner above tabs
+- Resolved linter and type errors
+- Include kind:30003 in default bookmark list detection
+- Removed text shadows from publication date for cleaner look
+- Improved shadow contrast without background overlay
+- Corrected async handling in adaptive color detection
+- Corrected FastAverageColor import to use named export
+- Section heading styles now properly override with `!important`
+- Removed unused articleImage prop from CompactView
+
+## [0.6.13] - 2025-10-15
+
+### Added
+
+- Support for `nprofile` identifiers on `/p/` profile pages (NIP-19)
+  - Profile pages now accept both `npub` and `nprofile` identifiers
+  - Extracts pubkey from nprofile data structure
+  - Users can share profiles with relay metadata included
+- Gradient placeholder images for articles without cover images
+  - Blog post cards show subtle diagonal gradient using theme colors
+  - Reader view displays gradient background with newspaper icon
+  - Placeholders adapt automatically to light/dark themes
+  - Large view bookmarks use matching gradient backgrounds
+
+### Changed
+
+- PWA install section styling in settings
+  - Heading now matches other section headings with proper styling
+  - Install button uses standard app button styling instead of custom gradient
+  - Consistent with app's design system and theme colors
+
+### Fixed
+
+- Mobile bookmark button visibility across all pages
+  - Now visible on `/p/` (profile), `/explore`, `/me`, 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
+  - Hidden when scrolled to the very top of the page
+  - Appears when scrolling up from below
+  - Bookmark button remains visible at top (only hides on scroll down)
+  - Separate visibility logic for each button improves UX
+
+## [0.6.12] - 2025-10-15
+
+### Changed
+
+- Horizontal dividers (`<hr>`) in blog posts now display with more subtle styling
+  - Reduced visual weight with 69% opacity for better readability
+  - Added increased vertical padding (2.5rem) above and below dividers
+  - Improved visual separation without disrupting reading flow
+
+## [0.6.11] - 2025-10-15
+
+### Added
+
+- Colored borders to blog post and highlight cards based on relationship
+  - Mine: yellow border
+  - Friends: orange border
+  - Nostrverse: purple border
+  - Visual distinction helps identify content source at a glance
+- Mobile sidebar toggle buttons on explore page
+  - Bookmark and highlights buttons now visible on explore page
+  - Improves mobile navigation UX
+
+### Fixed
+
+- Mobile bookmarks sidebar opening and closing immediately
+  - Memoized `toggleSidebar` function to prevent unnecessary re-renders
+  - Updated route-change effect to only close sidebar on actual pathname changes
+  - Sidebar now stays open when opened on mobile PWA
+
+## [0.6.10] - 2025-10-15
+
+### Added
+
+- Support page (`/support`) displaying zappers with avatar grid
+  - Shows "Absolute Legends" (69420+ sats) and regular supporters (2100+ sats)
+  - Clickable supporter avatars link to profiles
+  - Bolt icon button in sidebar navigation
+  - Thank-you illustration and call-to-action
+  - Links to pricing page and Boris profile
+- Refresh button to explore page
+  - Positioned next to filter buttons
+  - Spinning animation during loading and pull-to-refresh
+- Unified event publishing and querying services
+  - `publishEvent` service for highlights and settings
+  - `queryEvents` helper with local-first fetching
+  - Centralized relay timeouts configuration
+- FEATURES.md documentation file
+- MIT License
+
+### Changed
+
+- Explore page improvements
+  - Filter defaults to friends only (instead of all)
+  - Tabs moved below filter buttons
+  - Filter buttons positioned on the right
+  - Writings tab now uses newspaper icon
+  - Subtitle removed for cleaner layout
+- Pull-to-refresh library
+  - Replaced custom implementation with `use-pull-to-refresh`
+  - Updated HighlightsPanel to use new library
+- Loading states now show progressive loading with skeletons instead of blocking error screens
+- All event fetching services migrated to unified `queryEvents` helper
+  - `nostrverseService`, `bookmarkService`, `libraryService`
+  - `exploreService`, `fetchHighlightsFromAuthors`
+- Contact streaming with extended timeout and partial results
+
+### Fixed
+
+- All ESLint and TypeScript linting errors
+  - Removed all `eslint-disable` statements
+  - Fixed `react-hooks/exhaustive-deps` warnings
+  - Resolved all type errors
+- Explore page refresh loop and false empty-follows error
+- Zap receipt scanning with applesauce helpers and more relays
+- Support page theme colors for proper readability
+
+### Refactored
+
+- Event publishing to use unified `publishEvent` service
+- Event fetching to use unified `queryEvents` helper
+- Image cache and bookmark components (removed unused settings parameter)
+- Support page spacing and visual hierarchy
+
+## [0.6.9] - 2025-10-14
+
+### Documentation
+
+- Minor changelog formatting updates
+
+## [0.6.8] - 2025-10-14
+
+### Changed
+
+- Updated favicon and app icons to purple theme
+  - Replaced all 8 icon files (apple-touch-icon, favicon variants, and Android Chrome icons)
+  - New purple color scheme for better brand recognition
+
+## [0.6.7] - 2025-10-14
+
+### Added
+
+- Skeleton loading placeholders using `react-loading-skeleton` package
+  - Replaced loading spinners with skeleton loaders across all major components
+  - BookmarkList, Explore, Me, ContentPanel, and HighlightsPanel now use skeleton placeholders
+  - Theme-aware skeleton animations matching app color scheme
+- Nostr identifier parsing and rendering in highlight comments
+  - Support for `nostr:npub`, `nostr:nprofile`, `nostr:naddr`, `nostr:note`, `nostr:nevent`
+  - Clickable links to profiles and articles from highlight comments
+  - Shortened display format for better readability
+- Visibility filters for explore page content
+  - Toggle filters for nostrverse, friends, and own content
+  - Icon buttons with color coding matching highlight levels
+  - Filter state persists across tab switches
+
+### Changed
+
+- Loading states now use skeleton placeholders instead of spinners for more polished UX
+- Removed incremental loading spinner from explore page refresh
+  - Pull-to-refresh indicator provides refresh state feedback
+
+### Fixed
+
+- Type error in `HighlightItem.tsx` using `React.ReactElement` instead of `JSX.Element`
+- Me page skeleton loading now handles undefined `viewingPubkey` gracefully
+
+### Documentation
+
+- Updated FontAwesome rule to prefer skeleton placeholders over loading text or spinners
+
+## [0.6.6] - 2025-10-14
+
+### Added
+
+- Profile fetching and caching for explore page
+  - Automatically fetches kind:0 metadata for all blog post authors
+  - Stores profiles in event store for instant access across app
+  - Rebroadcasts profiles to local/all relays per user settings
+  - Fixes "Unknown" author names by proactively caching profiles
+- Rich content rendering in highlight comments
+  - URLs automatically detected and rendered as clickable links
+  - Image URLs (jpg, png, gif, webp, etc.) render as inline images
+  - Images lazy-load with responsive sizing and rounded borders
+  - Links open in new tab with security attributes
+
+### Changed
+
+- Hide citation in highlights sidebar when viewing article
+  - Citation removed from sidebar since all highlights are from same source
+  - Citation still shown in Explore and Me pages where context is needed
+  - Reduces visual clutter and redundant information
+
+### Fixed
+
+- Blog posts with far-future publication dates no longer appear in explore
+  - Filter excludes posts with dates more than 1 day in future
+  - Allows 1 day tolerance for clock skew between systems
+  - Prevents spam posts with unrealistic dates (e.g., "53585 years from now")
+- Layout breaks from long URLs in highlight comments
+  - Added word-wrap, overflow-wrap, and word-break CSS properties
+  - Set min-width: 0 to allow flex child to shrink properly
+  - Long URLs now wrap correctly instead of causing horizontal overflow
+- Profile fetching implementation
+  - Use eventStore.add() directly for immediate profile storage
+  - Use tap() operator to process events as they arrive
+  - Correct TypeScript types and dependency array
+
+## [0.6.5] - 2025-10-14
+
+### Added
+
+- Highlights tab on `/explore` page
+  - View highlights from friends and followed users
+  - Tab structure matching `/me` and profile pages
+  - Grid layout for highlights with cards
+  - Highlights shown first, writings second
+  - Clicking highlight opens source article and scrolls to position
+  - Opens highlights sidebar automatically when clicking from explore
+- Citation attribution on highlight items
+  - Shows "— Author, Article Title" for Nostr-native content
+  - Shows "— domain.com" for web URLs
+  - Resolves author profiles and article titles automatically
+- Comment icon (fa-comments) for highlights with comments
+  - Flipped horizontally for better visual alignment
+  - Colored based on highlight level (mine/friends/nostrverse)
+  - No background or extra indent for cleaner look
+- Click timestamp to open highlight in native Nostr app
+  - Uses nostr:nevent links for native app integration
+
+### Changed
+
+- Highlight counter text color now matches article text (var(--color-text))
+  - Better readability in both light and dark modes
+  - Only forces white in overlay context (hero images)
+- Highlight level colors applied to explore page highlights
+  - Yellow for own highlights
+  - Orange for friends' highlights
+  - Purple for nostrverse highlights
+- Explore page tab order: Highlights first, Writings second
+- Explore page tabs now extend full width to match content grid
+
+### Fixed
+
+- Highlight counter readability in light mode
+  - Theme-aware text color instead of hardcoded blue
+  - Consistent with reading time indicator styling
+- Scroll-to-highlight reliability in article view
+  - Added retry mechanism for asynchronous content loading
+  - Attempts to find highlight element up to 20 times over 2 seconds
+- Author attribution in highlight citations
+  - Correctly extracts author pubkey from highlight's p tag
+  - No more "Unknown" author names
+- Explore page grid layout
+  - Removed max-width constraint blocking full-width display
+  - Tabs and content now properly aligned
+
+### Style
+
+- Replaced server icon with highlighter icon in highlight items
+- Switch from solid comment icon to outlined comments icon (fa-regular)
+- Removed background from highlight comments for cleaner appearance
+- Removed extra left margin from comments (icon provides sufficient indent)
+- Comment icon colored by highlight level with no opacity
+
+### Dependencies
+
+- Added @fortawesome/free-regular-svg-icons package for outlined icons
+
 ## [0.6.4] - 2025-10-14
 
 ### Added
@@ -1155,7 +1641,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Optimize relay usage following applesauce-relay best practices
 - Use applesauce-react event models for better profile handling
 
-[Unreleased]: https://github.com/dergigi/boris/compare/v0.6.4...HEAD
+[Unreleased]: https://github.com/dergigi/boris/compare/v0.6.20...HEAD
+[0.6.20]: https://github.com/dergigi/boris/compare/v0.6.19...v0.6.20
+[0.6.19]: https://github.com/dergigi/boris/compare/v0.6.18...v0.6.19
+[0.6.18]: https://github.com/dergigi/boris/compare/v0.6.17...v0.6.18
+[0.6.17]: https://github.com/dergigi/boris/compare/v0.6.16...v0.6.17
+[0.6.16]: https://github.com/dergigi/boris/compare/v0.6.15...v0.6.16
+[0.6.15]: https://github.com/dergigi/boris/compare/v0.6.14...v0.6.15
+[0.6.14]: https://github.com/dergigi/boris/compare/v0.6.13...v0.6.14
+[0.6.13]: https://github.com/dergigi/boris/compare/v0.6.12...v0.6.13
+[0.6.12]: https://github.com/dergigi/boris/compare/v0.6.11...v0.6.12
+[0.6.11]: https://github.com/dergigi/boris/compare/v0.6.10...v0.6.11
+[0.6.10]: https://github.com/dergigi/boris/compare/v0.6.9...v0.6.10
+[0.6.9]: https://github.com/dergigi/boris/compare/v0.6.8...v0.6.9
+[0.6.8]: https://github.com/dergigi/boris/compare/v0.6.7...v0.6.8
+[0.6.7]: https://github.com/dergigi/boris/compare/v0.6.6...v0.6.7
+[0.6.6]: https://github.com/dergigi/boris/compare/v0.6.5...v0.6.6
+[0.6.5]: https://github.com/dergigi/boris/compare/v0.6.4...v0.6.5
 [0.6.4]: https://github.com/dergigi/boris/compare/v0.6.3...v0.6.4
 [0.6.3]: https://github.com/dergigi/boris/compare/v0.6.2...v0.6.3
 [0.6.2]: https://github.com/dergigi/boris/compare/v0.6.1...v0.6.2

FEATURES.md

@@ -0,0 +1,89 @@
+# Boris Features
+## Overview
+
+- **Purpose**: A calm, fast, Nostr‑first reader that turns your bookmarks into a focused reading app.
+- **Layout**: Three‑pane interface — bookmarks (left), reader (center), highlights (right). Collapsible sidebars.
+- **Content**: Renders both Nostr long‑form posts (kind:30023) and regular web URLs.
+- **Social layer**: Highlights shown by level — mine, friends, nostrverse — each with its own color and visibility toggle.
+
+## Reader Experience
+
+- **Distraction‑free view**: Clean typography, optional hero image, summary, and published date.
+- **Reading time**: Displays estimated reading time for text or duration for supported videos.
+- **Progress**: Reading progress indicator with completion state.
+- **Menus**: Quick actions to open, share, or copy links (for both Nostr and web content).
+- **Performance**: Lightweight fetching and caching for speed; skeleton loaders to avoid empty flashes.
+
+## Highlights (NIP‑84)
+
+- **Levels**: Mine, friends, nostrverse; toggle per level; colors configurable in settings.
+- **Interactions**: Click a highlight to scroll to its position; count indicator in the header.
+- **Creation**: Select text and use the floating highlighter button to publish a highlight.
+- **Attribution**: Automatically tags article authors for Nostr posts so they can see highlights.
+
+## Zap Splits (NIP‑57)
+
+- **Configurable splits**: Weight‑based sliders for highlighter, author(s), and Boris (defaults 50/50/2.1).
+- **Presets**: Quick buttons for common split configurations.
+- **Respect source**: If the source article has zap tags, author weights are proportionally preserved.
+
+## Bookmarks & Reading List (NIP‑51 + Web)
+
+- **Ingestion**: Collects list bookmarks and items from kinds 10003/30003/30001.
+- **Web bookmarks**: Supports NIP‑B0 (kind:39701) for standalone URL bookmarks.
+- **Add Bookmark**: Modal with auto title/description extraction and keywords/tags suggestion (adds “boris” when helpful).
+- **Views**: Reading list in compact, cards, or large preview modes; quick toggles to switch.
+- **Archive**: “Read” items appear in your archive; can mark articles/web pages as read.
+
+## Explore & Profiles
+
+- **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.
+
+## Support
+
+- **Supporter page**: Displays avatars of users who zapped Boris (kind:9735 receipts).
+- **Thresholds**: Shows supporters who sent ≥ 2100 sats; whales (≥ 69420 sats) get special styling with a bolt badge.
+- **Profile integration**: Fetches and displays profile pictures and names for all supporters.
+- **Stats**: Total supporter count and zap count displayed at the bottom.
+
+## Video
+
+- **Embedded player**: Plays supported videos (e.g., YouTube) inline with duration display.
+- **Metadata**: Fetches YouTube title/description/transcript when available.
+- **Deep links**: Open in native apps via platform‑specific URL schemes.
+
+## Settings (NIP‑78 Application Data)
+
+- **Theme**: System/light/dark with color variants (dark: black/midnight/charcoal; light: paper‑white/sepia/ivory).
+- **Reading**: Font family (preloaded), font size, highlight style (marker/underline), per‑level colors.
+- **Layout & startup**: Default view modes, auto‑collapse preferences, show/hide highlights.
+- **Zap Splits**: Weight sliders and presets for NIP‑57 splits.
+- **Offline/Flight Mode**: Local image cache with size limit and clear controls; “use local relay as cache”; rebroadcast preferences.
+- **Relays**: Relay overview and status in Settings; educational links.
+- **PWA**: Install prompt when available.
+
+## Offline, PWA, and Sync
+
+- **PWA**: Installable; service worker registered; periodic update checks with in‑app toast.
+- **Flight Mode**: Operates with local relays only; highlights created offline are stored locally and synced later.
+- **Relay indicator**: Floating status indicator shows Connecting/Offline/Flight Mode and connected counts.
+
+## Relays & Accounts
+
+- **Applesauce stack**: Accounts, event store, relay pool, and blueprints power Nostr interactions.
+- **Multi‑relay**: Grouped connections with keep‑alive subscription; local+remote partitioning for fast queries.
+- **Persistence**: Accounts restored from local storage; settings saved to NIP‑78 and watched for updates.
+
+## Privacy
+
+- **Identity**: No email or new account; uses your existing Nostr signer/identity.
+- **Data**: Bookmarks and highlights live on Nostr; reading/rendering happens locally in your browser.
+
+## Conveniences
+
+- **Share/copy**: One‑click copy or share for articles and videos.
+- **Open on Nostr**: Deep links to portals and `nostr:` schemes for long‑form articles.
+- **Mobile UX**: Floating open buttons for Bookmarks/Highlights, focus trapping, and backdrop controls.
+

LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Gigi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "boris",
-  "version": "0.6.5",
+  "version": "0.6.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "boris",
-      "version": "0.6.5",
+      "version": "0.6.13",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.1.0",
         "@fortawesome/free-regular-svg-icons": "^7.1.0",
@@ -22,17 +22,20 @@
         "applesauce-react": "^4.0.0",
         "applesauce-relay": "^4.0.0",
         "date-fns": "^4.1.0",
+        "fast-average-color": "^9.5.0",
         "nostr-tools": "^2.4.0",
         "prismjs": "^1.30.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-loading-skeleton": "^3.5.0",
         "react-markdown": "^10.1.0",
         "react-player": "^2.16.0",
         "react-router-dom": "^7.9.3",
         "reading-time-estimator": "^1.14.0",
         "rehype-prism-plus": "^2.0.1",
         "rehype-raw": "^7.0.0",
-        "remark-gfm": "^4.0.1"
+        "remark-gfm": "^4.0.1",
+        "use-pull-to-refresh": "^2.4.1"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.1.14",
@@ -6084,6 +6087,15 @@
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "license": "MIT"
     },
+    "node_modules/fast-average-color": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/fast-average-color/-/fast-average-color-9.5.0.tgz",
+      "integrity": "sha512-nC6x2YIlJ9xxgkMFMd1BNoM1ctMjNoRKfRliPmiEWW3S6rLTHiQcy9g3pt/xiKv/D0NAAkhb9VyV+WJFvTqMGg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -9820,6 +9832,15 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz",
+      "integrity": "sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-markdown": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
@@ -11685,6 +11706,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-pull-to-refresh": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/use-pull-to-refresh/-/use-pull-to-refresh-2.4.1.tgz",
+      "integrity": "sha512-mI3utetwSPT3ovZHUJ4LBW29EtmkrzpK/O38msP5WnI8ocFmM5boy3QZALosgeQwqwdmtQgC+8xnJIYHXeABew==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "18.x || 19.x"
+      }
+    },
     "node_modules/v8-compile-cache-lib": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boris",
-  "version": "0.6.5",
+  "version": "0.6.20",
   "description": "A minimal nostr client for bookmark management",
   "homepage": "https://read.withboris.com/",
   "type": "module",
@@ -25,17 +25,20 @@
     "applesauce-react": "^4.0.0",
     "applesauce-relay": "^4.0.0",
     "date-fns": "^4.1.0",
+    "fast-average-color": "^9.5.0",
     "nostr-tools": "^2.4.0",
     "prismjs": "^1.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-loading-skeleton": "^3.5.0",
     "react-markdown": "^10.1.0",
     "react-player": "^2.16.0",
     "react-router-dom": "^7.9.3",
     "reading-time-estimator": "^1.14.0",
     "rehype-prism-plus": "^2.0.1",
     "rehype-raw": "^7.0.0",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+    "use-pull-to-refresh": "^2.4.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.14",

public/pwa.svg

@@ -0,0 +1,215 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="649.67538"
+   height="568.22024"
+   viewBox="0 0 649.67538 568.22024"
+   role="img"
+   artist="Katerina Limpitsouni"
+   source="https://undraw.co/"
+   version="1.1"
+   id="svg31"
+   sodipodi:docname="pwa.svg"
+   inkscape:version="1.4.2 (ebf0e940, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs31" />
+  <sodipodi:namedview
+     id="namedview31"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.6866359"
+     inkscape:cx="303.56285"
+     inkscape:cy="531.82789"
+     inkscape:window-width="3840"
+     inkscape:window-height="1027"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg31" />
+  <path
+     d="M397.23858,566.04035,390.539,618.81819l-9.85909-59.95407c-47.3817-18.18194-102.78179-21.713-102.78179-21.713s-12.22552,114.50728,28.139,162.38683,82.92182,40.60129,118.03379,11.00042c35.1114-29.60039,49.48123-70.31412,9.11675-118.19368C424.20327,581.68766,411.521,573.04476,397.23858,566.04035Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#f2f2f2"
+     id="path1" />
+  <path
+     d="M384.1004,626.79762l1.98958,2.36c22.98681,27.551,36.40476,52.8555,40.0327,75.5803.05864.33032.09573.65881.15431.98919l-1.53846.23773-1.48187.20991c-3.64942-24.76543-19.47993-50.77428-39.52347-74.8103-.63842-.781-1.28663-1.57364-1.95824-2.34655-8.57477-10.1-17.832-19.82437-27.217-28.9415-.72021-.712-1.46191-1.42587-2.20361-2.13968-12.44963-11.96994-25.01434-22.84351-36.237-32.03036-.7903-.653-1.59224-1.296-2.38439-1.92739-19.05943-15.4717-33.9044-25.802-37.21424-28.06849-.39875-.28343-.62465-.43273-.67573-.46958l.844-1.25121.00183-.02155.85568-1.26106c.05113.03692.81117.53546,2.18233,1.49814,5.15056,3.57268,18.987,13.39417,36.1433,27.27236.77059.62957,1.57259,1.27267,2.36284,1.92555,9.11521,7.44575,19.072,15.96086,29.1037,25.25221q3.78542,3.49455,7.37706,6.9724c.75332.704,1.495,1.41783,2.21523,2.12988Q372.14864,612.73905,384.1004,626.79762Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#fff"
+     id="path2" />
+  <path
+     d="M315.8701,561.67759c-.6941.76509-1.39989,1.54-2.13716,2.30139a84.299,84.299,0,0,1-6.3038,5.89408,82.00518,82.00518,0,0,1-32.26683,16.72907c.03131,1.03285.06269,2.06578.09217,3.12018a85.04164,85.04164,0,0,0,34.14459-17.51256,87.22471,87.22471,0,0,0,6.71826-6.30338c.72551-.75156,1.43131-1.52651,2.11561-2.30323a84.3256,84.3256,0,0,0,13.87772-21.35332q-1.56615-.32858-3.06776-.65165A81.72351,81.72351,0,0,1,315.8701,561.67759Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#fff"
+     id="path3" />
+  <path
+     d="M354.7137,595.82775q-1.15019,1.08949-2.35939,2.109c-.23552.21856-.49252.43522-.7379.64208a82.4401,82.4401,0,0,1-74.51659,16.59042c.1138,1.08323.22759,2.1666.36294,3.25167a85.5013,85.5013,0,0,0,76.12358-17.5054c.32717-.27581.65427-.55157.97158-.83909.80793-.70112,1.59437-1.40414,2.371-2.11878a85.04917,85.04917,0,0,0,24.39782-41.355c-.955-.37409-1.91-.74825-2.87668-1.11248A81.874,81.874,0,0,1,354.7137,595.82775Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#fff"
+     id="path4" />
+  <path
+     d="M384.1004,626.79762c-.75869.75952-1.53717,1.49572-2.32545,2.22029-.84674.77374-1.70328,1.53585-2.57954,2.27457a82.66307,82.66307,0,0,1-98.92522,5.60818c.27211,1.38968.5343,2.76759.82973,4.13747a85.69022,85.69022,0,0,0,100.06542-7.409c.87626-.73872,1.74266-1.48914,2.56785-2.26471.80983-.72274,1.58831-1.45893,2.35679-2.20683a85.43958,85.43958,0,0,0,25.37276-57.38712c-.97424-.6577-1.97364-1.27419-2.98289-1.90237A82.39644,82.39644,0,0,1,384.1004,626.79762Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#fff"
+     id="path5" />
+  <path
+     d="M648.03621,300.20693V215.13007a49.24034,49.24034,0,0,0-49.24-49.24019H418.54942a49.24029,49.24029,0,0,0-49.2406,49.24V271.632h-3.16709v19.90855h3.16709V312.7763h-3.16709v30.52644h3.16709V356.5751h-3.16709v30.52643h3.16709v294.7669a49.23993,49.23993,0,0,0,49.23995,49.24019H598.79561a49.24028,49.24028,0,0,0,49.2406-49.24V360.76613h3.10552v-60.5592Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#3f3d56"
+     id="path6" />
+  <path
+     d="M600.78268,178.70047H577.2545a17.47031,17.47031,0,0,1-16.17511,24.06836H457.81825a17.4703,17.4703,0,0,1-16.17512-24.06839H419.66775a36.772,36.772,0,0,0-36.772,36.772V681.526a36.772,36.772,0,0,0,36.772,36.77205h181.115a36.772,36.772,0,0,0,36.772-36.772h0V215.47244A36.772,36.772,0,0,0,600.78268,178.70047Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#fff"
+     id="path7" />
+  <path
+     d="M605.33827,340.8917H415.11207a5.0058,5.0058,0,0,1-5-5V258.70616a5.0058,5.0058,0,0,1,5-5h190.2262a5.00573,5.00573,0,0,1,5,5V335.8917A5.00573,5.00573,0,0,1,605.33827,340.8917Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#6c63ff"
+     id="path8" />
+  <path
+     d="M587.22522,377.41807h-154a5.5,5.5,0,0,1,0-11h154a5.5,5.5,0,0,1,0,11Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#6c63ff"
+     id="path9" />
+  <path
+     d="M587.22523,405.41807h-154a6,6,0,0,1,0-12h154a6,6,0,0,1,0,12Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#e4e4e4"
+     id="path10" />
+  <path
+     d="M587.22523,432.91807h-154a6,6,0,0,1,0-12h154a6,6,0,0,1,0,12Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#e4e4e4"
+     id="path11" />
+  <path
+     d="M605.33827,571.8917H415.11207a5.0058,5.0058,0,0,1-5-5V489.70616a5.0058,5.0058,0,0,1,5-5h190.2262a5.00573,5.00573,0,0,1,5,5V566.8917A5.00573,5.00573,0,0,1,605.33827,571.8917Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#e4e4e4"
+     id="path12" />
+  <path
+     d="M587.22523,608.91807h-154a6,6,0,0,1,0-12h154a6,6,0,0,1,0,12Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#e4e4e4"
+     id="path13" />
+  <path
+     d="M587.22523,636.41807h-154a6,6,0,0,1,0-12h154a6,6,0,0,1,0,12Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#e4e4e4"
+     id="path14" />
+  <path
+     d="M587.22523,663.91807h-154a6,6,0,0,1,0-12h154a6,6,0,0,1,0,12Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#e4e4e4"
+     id="path15" />
+  <path
+     d="M760.06605,312.22721c-1.93457-14.18963-4.36084-29.42431-14.3689-39.66754a33.65518,33.65518,0,0,0-48.62622.5033c-7.28515,7.77185-10.50244,18.68475-10.79687,29.33325s2.07714,21.17865,4.708,31.50122a97.0913,97.0913,0,0,0,40.52124-7.97583,65.28916,65.28916,0,0,1,9.71558-3.81427c3.376-.85925,5.78247,1.303,8.92285,2.81073l1.72388-3.30078c1.41113,2.62616,5.78076,1.84772,7.36572-.67737C760.81605,318.41483,760.46888,315.18107,760.06605,312.22721Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#2f2e41"
+     id="path16" />
+  <polygon
+     points="612.434 535.007 602.208 541.77 571.257 505.545 586.349 495.564 612.434 535.007"
+     fill="#9e616a"
+     id="polygon16" />
+  <path
+     d="M896.7595,709.08432,863.787,730.89015l-.27582-.417a15.38729,15.38729,0,0,1,4.34573-21.32122l.00081-.00054,20.13853-13.31819Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#2f2e41"
+     id="path17" />
+  <polygon
+     points="480.429 553.116 468.169 553.116 462.337 505.828 480.431 505.829 480.429 553.116"
+     fill="#9e616a"
+     id="polygon17" />
+  <path
+     d="M758.71777,730.89015l-39.53076-.00146v-.5a15.3873,15.3873,0,0,1,15.38647-15.38623h.001l24.144.001Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#2f2e41"
+     id="path18" />
+  <path
+     d="M668.3639,394.03709l-46.28906-33.06561a8.99743,8.99743,0,1,0-10.80762,7.74816c5.78613,4.85816,48.04785,46.88825,54.09888,44.67127,6.1416-2.25012,32.99341-6.32324,32.99341-6.32324l.74755-25.4953Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#9e616a"
+     id="path19" />
+  <path
+     d="M704.73272,454.19782l.437,58.1781s10.01741,86.201,13.712,100.76318,18.69148,81.94564,18.69148,81.94564l24.3788-3.93292-15.69975-88.09791,4.74535-73.017,27.36445,73.178L847.847,675.848l17.61024-14.2095-60.48051-88.88116-18.47283-72.811s2.29785-37.66031-18.40081-52.16322Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#2f2e41"
+     id="path20" />
+  <circle
+     cx="443.5739"
+     cy="133.65539"
+     r="26.72083"
+     fill="#9e616a"
+     id="circle20" />
+  <rect
+     x="722.98731"
+     y="465.33587"
+     width="24.29166"
+     height="31.57916"
+     transform="translate(-279.66359 789.41207) rotate(-65.86746)"
+     fill="#2f2e41"
+     id="rect20" />
+  <path
+     d="M593.23271,362.65743"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#6c63ff"
+     id="path21" />
+  <path
+     d="M761.53382,350.95884c-3.14892-6.267-4.67895-14.009-11.39209-16.04077-4.5332-1.372-22.86841.68408-27,3-6.87231,3.85236-.64453,11.07111-4.699,17.82642q-6.61121,11.01552-13.22241,22.031c-3.03,5.04852-6.0918,10.16889-7.73023,15.82434-1.63818,5.65546-1.717,12.00305,1.074,17.18756,2.4978,4.64045,7.02294,7.93158,9.53515,12.56433,2.61231,4.81806-2.07715,26.33136-4.50854,31.24341l1.167.539a263.08934,263.08934,0,0,0,48.448-1.63024c3.9873-.50489,8.12744-1.16449,11.41308-3.47895,4.83985-3.40918,6.75318-9.5954,7.949-15.39337A129.67713,129.67713,0,0,0,761.53382,350.95884Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#e4e4e4"
+     id="path22" />
+  <path
+     d="M706.84845,411.65133c7.23924-7.1146,14.51542-14.27181,20.47486-22.48827s10.5936-17.62115,11.88744-27.68835a20.50914,20.50914,0,0,0-.64136-9.62007c-1.11054-3.049-3.56912-5.755-6.73861-6.45068-5.07194-1.11355-9.6829,2.93435-13.30226,6.6577q-16.00732,16.46812-32.01478,32.936,10.19649,13.42191,20.393,26.84353Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#e4e4e4"
+     id="path23" />
+  <path
+     d="M785.75257,417.13127c-2.25-6.14148-6.32324-32.99323-6.32324-32.99323l-25.49512-.74756,12.4646,30.7431-34.01367,47.61615s.063.10462.17749.2912a8.99538,8.99538,0,1,0,7.54468,9.55927.62106.62106,0,0,0,.77978-.13385C744.67176,466.7169,788.00257,423.27281,785.75257,417.13127Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#9e616a"
+     id="path24" />
+  <path
+     d="M788.34461,400.17338c-2.34008-9.87665-4.69751-19.807-8.64282-29.15894s-9.59326-18.18512-17.53711-24.50317a20.50909,20.50909,0,0,0-8.563-4.43085c-3.18359-.62805-6.77148.07483-9.00732,2.42658-3.57813,3.76318-2.50147,9.80365-1.18921,14.8277q5.80444,22.2203,11.60864,44.44061,16.76184-1.77667,33.52344-3.55347Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#e4e4e4"
+     id="path25" />
+  <path
+     d="M752.14124,301.6237c-.83545-6.464-1.708-12.98224-3.67065-19.06879-1.96265-6.08661-5.12622-11.78747-9.66431-15.23547-7.1853-5.459-16.488-4.40613-24.54394-1.266-6.23,2.42846-12.31153,6.1195-16.70484,12.05346-4.39355,5.934-6.86108,14.40119-5.2268,22.1601q12.88989-3.58722,25.77954-7.1745l-.94068.783c5.57642,3.14221,9.81153,9.64361,11.07691,17.00482a28.7171,28.7171,0,0,1-4.53662,21.03778q8.79089-3.67337,17.58178-7.34662c3.61744-1.51153,7.489-3.25317,9.634-7.13025C753.41273,312.94608,752.83485,306.98814,752.14124,301.6237Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#2f2e41"
+     id="path26" />
+  <path
+     d="M625.98113,343.51431,608.792,369.31226a4.46863,4.46863,0,0,1-3.75549,2.00125,4.47943,4.47943,0,0,1-4.13509-2.75491,4.12763,4.12763,0,0,1-.2689-.85745,4.51165,4.51165,0,0,1,.66976-3.37929l17.18913-25.79794a4.5,4.5,0,1,1,7.48973,4.99039Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#6c63ff"
+     id="path27" />
+  <path
+     d="M610.17821,367.23178l-3.47923,5.19091-6.15652,5.42689a2.45095,2.45095,0,0,1-3.94221-2.627l2.69471-7.8881,3.39353-5.09311Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#3f3d56"
+     id="path28" />
+  <path
+     d="M626.74053,329.98545l-8.6142,7.59289a2.45233,2.45233,0,0,0,.26168,3.88081l1.62984,1.086-4.71315,7.07363a1,1,0,0,0,1.66439,1.109l4.71314-7.07362,1.62985,1.086a2.45552,2.45552,0,0,0,3.39872-.675,2.46816,2.46816,0,0,0,.28357-.57793l3.69013-10.8738a2.45251,2.45251,0,0,0-3.944-2.62786Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#3f3d56"
+     id="path29" />
+  <path
+     d="M516.97522,187.41807h-27a2,2,0,0,1,0-4h27a2,2,0,0,1,0,4Z"
+     transform="translate(-275.16231 -165.88988)"
+     fill="#fff"
+     id="path31" />
+  <circle
+     cx="255.31291"
+     cy="19.52819"
+     r="2"
+     fill="#fff"
+     id="circle31" />
+</svg>

public/zaps.svg

@@ -0,0 +1,235 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="720.44"
+   height="718.635"
+   viewBox="0 0 720.44 718.635"
+   role="img"
+   artist="Katerina Limpitsouni"
+   source="https://undraw.co/"
+   version="1.1"
+   id="svg30"
+   sodipodi:docname="zaps.svg"
+   xml:space="preserve"
+   inkscape:version="1.4.2 (ebf0e940, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs30" /><sodipodi:namedview
+     id="namedview30"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.6746164"
+     inkscape:cx="38.510195"
+     inkscape:cy="485.67712"
+     inkscape:window-width="3840"
+     inkscape:window-height="1027"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g27" /><g
+     transform="translate(-600 -181)"
+     id="g30"><g
+       transform="translate(783.85 181)"
+       id="g2"><path
+         d="M624.7,249.968h-3.952V141.8a62.6,62.6,0,0,0-62.6-62.6H328.97a62.6,62.6,0,0,0-62.6,62.6V735.225a62.6,62.6,0,0,0,62.6,62.6H558.143a62.6,62.6,0,0,0,62.6-62.6V326.965H624.7Z"
+         transform="translate(-266.365 -79.193)"
+         fill="#090814"
+         id="path1" /><path
+         d="M560.888,95.686H530.974a22.212,22.212,0,0,1-20.565,30.6h-131.3a22.212,22.212,0,0,1-20.566-30.6H330.607a46.752,46.752,0,0,0-46.752,46.752V735a46.752,46.752,0,0,0,46.752,46.752H560.879A46.752,46.752,0,0,0,607.63,735V142.439a46.752,46.752,0,0,0-46.744-46.752Z"
+         transform="translate(-266.577 -79.397)"
+         fill="#fff"
+         id="path2" /></g><path
+       d="M8,0H256a8,8,0,0,1,8,8V72a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8V8A8,8,0,0,1,8,0Z"
+       transform="translate(828 265)"
+       fill="#f2f2f2"
+       id="path3" /><path
+       d="M8,0H256a8.065,8.065,0,0,1,8,8.128V475.474a8.065,8.065,0,0,1-8,8.128H8a8.065,8.065,0,0,1-8-8.128V8.128A8.065,8.065,0,0,1,8,0Z"
+       transform="translate(828 358.398)"
+       fill="#f2f2f2"
+       id="path4" /><g
+       transform="translate(623.104 296.398)"
+       id="g9"><rect
+         width="278.304"
+         height="69.313"
+         rx="16"
+         transform="translate(0 0)"
+         fill="#090814"
+         id="rect4" /><rect
+         width="272.003"
+         height="63.012"
+         rx="15"
+         transform="translate(3.151 3.151)"
+         fill="#fff"
+         id="rect5" /><path
+         d="M301.207,370.636a2.238,2.238,0,0,1-1.791-.9l-5.489-7.318a2.238,2.238,0,0,1,3.581-2.686l3.591,4.788,9.223-13.834a2.238,2.238,0,0,1,3.725,2.483L303.07,369.639a2.239,2.239,0,0,1-1.8,1Z"
+         transform="translate(-53.047 -325.676)"
+         fill="#6c63ff"
+         id="path5" /><g
+         transform="translate(17.038 13.546)"
+         id="g7"><path
+           d="M8.377,0H33.509a8.377,8.377,0,0,1,8.377,8.377V33.509a8.377,8.377,0,0,1-8.377,8.377H8.377A8.377,8.377,0,0,1,0,33.509V8.377A8.377,8.377,0,0,1,8.377,0Z"
+           transform="translate(0 0)"
+           fill="#6c63ff"
+           id="path6" /><path
+           fill="#ffffff"
+           d="m 29.707386,18.657657 c 0.366641,-2.450824 -1.499389,-3.768325 -4.05094,-4.647244 l 0.827682,-3.319949 -2.020864,-0.503633 -0.805812,3.232462 C 23.126191,13.286911 22.580541,13.16201 22.038338,13.038257 L 22.849909,9.7844991 20.830193,9.2808662 20.001937,12.599667 c -0.439747,-0.100152 -0.87143,-0.199148 -1.290455,-0.303328 l 0.0023,-0.0104 -2.786965,-0.695882 -0.537594,2.158431 c 0,0 1.49939,0.343622 1.467733,0.364918 0.818479,0.204332 0.966398,0.745954 0.941649,1.17534 l -0.942797,3.782139 c 0.05642,0.01436 0.129503,0.03508 0.210083,0.06736 -0.06736,-0.01669 -0.13929,-0.03516 -0.213537,-0.05293 l -1.321536,5.29823 c -0.100152,0.248646 -0.353983,0.621627 -0.926112,0.480032 0.02018,0.02934 -1.468882,-0.366648 -1.468882,-0.366648 l -1.003261,2.313258 2.629833,0.65558 c 0.489237,0.122604 0.968703,0.250959 1.44068,0.371832 l -0.83632,3.357938 2.018559,0.503633 0.828264,-3.322254 c 0.551408,0.14965 1.086697,0.287791 1.610477,0.417869 l -0.825385,3.306717 2.020864,0.503632 0.83632,-3.351612 c 3.446006,0.652134 6.037269,0.3891 7.127993,-2.727673 0.878911,-2.509534 -0.04377,-3.957121 -1.856825,-4.901074 1.320388,-0.304485 2.314988,-1.173035 2.580335,-2.967123 z m -4.61731,6.474711 c -0.624507,2.509534 -4.849846,1.152888 -6.219732,0.812719 l 1.109723,-4.448662 c 1.369878,0.341891 5.762717,1.018775 5.110009,3.635943 z m 0.62508,-6.510969 c -0.569824,2.28275 -4.086632,1.122955 -5.227429,0.838617 l 1.006118,-4.034821 c 1.140796,0.284338 4.814736,0.815024 4.221311,3.196204 z"
+           id="path2-8-2"
+           style="stroke-width:0.575581" /></g><path
+         d="M6.981,0h125.66a6.981,6.981,0,1,1,0,13.962H6.981A6.981,6.981,0,0,1,6.981,0Z"
+         transform="translate(72.886 17.036)"
+         fill="#e6e6e6"
+         id="path8" /><path
+         d="M6.981,0H76.792a6.981,6.981,0,1,1,0,13.962H6.981A6.981,6.981,0,0,1,6.981,0Z"
+         transform="translate(72.886 37.98)"
+         fill="#e6e6e6"
+         id="path9" /></g><g
+       transform="translate(1003.278 402.469)"
+       id="g14"><rect
+         width="279.354"
+         height="69.313"
+         rx="16"
+         transform="translate(0 0)"
+         fill="#090814"
+         id="rect9" /><rect
+         width="272.003"
+         height="63.012"
+         rx="15"
+         transform="translate(3.151 3.151)"
+         fill="#fff"
+         id="rect10" /><path
+         d="M301.207,370.636a2.238,2.238,0,0,1-1.791-.9l-5.489-7.318a2.238,2.238,0,0,1,3.581-2.686l3.591,4.788,9.223-13.834a2.238,2.238,0,0,1,3.725,2.483L303.07,369.639a2.239,2.239,0,0,1-1.8,1Z"
+         transform="translate(-52.751 -325.287)"
+         fill="#6c63ff"
+         id="path10" /><g
+         transform="translate(17.334 13.936)"
+         id="g12"><path
+           d="M8.377,0H33.509a8.377,8.377,0,0,1,8.377,8.377V33.509a8.377,8.377,0,0,1-8.377,8.377H8.377A8.377,8.377,0,0,1,0,33.509V8.377A8.377,8.377,0,0,1,8.377,0Z"
+           transform="translate(0 0)"
+           fill="#6c63ff"
+           id="path11" /><path
+           fill="#ffffff"
+           d="m 29.707386,18.657657 c 0.366641,-2.450824 -1.499389,-3.768325 -4.05094,-4.647244 l 0.827682,-3.319949 -2.020864,-0.503633 -0.805812,3.232462 C 23.126191,13.286911 22.580541,13.16201 22.038338,13.038257 l 0.811571,-3.253758 -2.019716,-0.503633 -0.828256,3.318801 c -0.439747,-0.100152 -0.87143,-0.199148 -1.290455,-0.303328 l 0.0023,-0.0104 -2.786965,-0.695882 -0.537594,2.158431 c 0,0 1.49939,0.343622 1.467733,0.364918 0.818479,0.204332 0.966398,0.745954 0.941649,1.17534 l -0.942797,3.782139 c 0.05642,0.01436 0.129503,0.03508 0.210083,0.06736 -0.06736,-0.01669 -0.13929,-0.03516 -0.213537,-0.05293 l -1.321536,5.29823 c -0.100152,0.248646 -0.353983,0.621627 -0.926112,0.480032 0.02018,0.02934 -1.468882,-0.366648 -1.468882,-0.366648 l -1.003261,2.313258 2.629833,0.65558 c 0.489237,0.122604 0.968703,0.250959 1.44068,0.371832 l -0.83632,3.357938 2.018559,0.503633 0.828264,-3.322254 c 0.551408,0.14965 1.086697,0.287791 1.610477,0.417869 l -0.825385,3.306717 2.020864,0.503632 0.83632,-3.351612 c 3.446006,0.652134 6.037269,0.3891 7.127993,-2.727673 0.878911,-2.509534 -0.04377,-3.957121 -1.856825,-4.901074 1.320388,-0.304485 2.314988,-1.173035 2.580335,-2.967123 z m -4.61731,6.474711 c -0.624507,2.509534 -4.849846,1.152888 -6.219732,0.812719 l 1.109723,-4.448662 c 1.369878,0.341891 5.762717,1.018775 5.110009,3.635943 z m 0.62508,-6.510969 c -0.569824,2.28275 -4.086632,1.122955 -5.227429,0.838617 l 1.006118,-4.034821 c 1.140796,0.284338 4.814736,0.815024 4.221311,3.196204 z"
+           id="path2-8-2-7"
+           style="stroke-width:0.575581" /></g><path
+         d="M6.981,0h125.66a6.981,6.981,0,1,1,0,13.962H6.981A6.981,6.981,0,0,1,6.981,0Z"
+         transform="translate(73.181 17.426)"
+         fill="#e6e6e6"
+         id="path13" /><path
+         d="M6.981,0H76.792a6.981,6.981,0,1,1,0,13.962H6.981A6.981,6.981,0,0,1,6.981,0Z"
+         transform="translate(73.181 38.369)"
+         fill="#e6e6e6"
+         id="path14" /></g><g
+       transform="translate(663.012 510.639)"
+       id="g19"><rect
+         width="279.354"
+         height="69.313"
+         rx="16"
+         transform="translate(0 0)"
+         fill="#090814"
+         id="rect14" /><rect
+         width="272.003"
+         height="63.012"
+         rx="15"
+         transform="translate(3.151 3.151)"
+         fill="#fff"
+         id="rect15" /><path
+         d="M301.207,370.636a2.238,2.238,0,0,1-1.791-.9l-5.489-7.318a2.238,2.238,0,0,1,3.581-2.686l3.591,4.788,9.223-13.834a2.238,2.238,0,0,1,3.725,2.483L303.07,369.639a2.239,2.239,0,0,1-1.8,1Z"
+         transform="translate(-52.814 -325.25)"
+         fill="#6c63ff"
+         id="path15" /><g
+         transform="translate(17.272 13.972)"
+         id="g17"><path
+           d="M8.377,0H33.509a8.377,8.377,0,0,1,8.377,8.377V33.509a8.377,8.377,0,0,1-8.377,8.377H8.377A8.377,8.377,0,0,1,0,33.509V8.377A8.377,8.377,0,0,1,8.377,0Z"
+           transform="translate(0 0)"
+           fill="#6c63ff"
+           id="path16" /><path
+           fill="#ffffff"
+           d="m 29.707386,18.657657 c 0.366641,-2.450824 -1.499389,-3.768325 -4.05094,-4.647244 l 0.827682,-3.319949 -2.020864,-0.503633 -0.805812,3.232462 C 23.126191,13.286911 22.580541,13.16201 22.038338,13.038257 L 22.849909,9.784499 20.830193,9.2808661 20.001937,12.599667 c -0.439747,-0.100152 -0.87143,-0.199148 -1.290455,-0.303328 l 0.0023,-0.0104 -2.786965,-0.695882 -0.537594,2.158431 c 0,0 1.49939,0.343622 1.467733,0.364918 0.818479,0.204332 0.966398,0.745954 0.941649,1.17534 l -0.942797,3.782139 c 0.05642,0.01436 0.129503,0.03508 0.210083,0.06736 -0.06736,-0.01669 -0.13929,-0.03516 -0.213537,-0.05293 l -1.321536,5.29823 c -0.100152,0.248646 -0.353983,0.621627 -0.926112,0.480032 0.02018,0.02934 -1.468882,-0.366648 -1.468882,-0.366648 l -1.003261,2.313258 2.629833,0.65558 c 0.489237,0.122604 0.968703,0.250959 1.44068,0.371832 l -0.83632,3.357938 2.018559,0.503633 0.828264,-3.322254 c 0.551408,0.14965 1.086697,0.287791 1.610477,0.417869 l -0.825385,3.306717 2.020864,0.503632 0.83632,-3.351612 c 3.446006,0.652134 6.037269,0.3891 7.127993,-2.727673 0.878911,-2.509534 -0.04377,-3.957121 -1.856825,-4.901074 1.320388,-0.304485 2.314988,-1.173035 2.580335,-2.967123 z m -4.61731,6.474711 c -0.624507,2.509534 -4.849846,1.152888 -6.219732,0.812719 l 1.109723,-4.448662 c 1.369878,0.341891 5.762717,1.018775 5.110009,3.635943 z m 0.62508,-6.510969 c -0.569824,2.28275 -4.086632,1.122955 -5.227429,0.838617 l 1.006118,-4.034821 c 1.140796,0.284338 4.814736,0.815024 4.221311,3.196204 z"
+           id="path2-8-2-0"
+           style="stroke-width:0.575581" /></g><path
+         d="M6.981,0h125.66a6.981,6.981,0,1,1,0,13.962H6.981A6.981,6.981,0,0,1,6.981,0Z"
+         transform="translate(73.119 17.463)"
+         fill="#e6e6e6"
+         id="path18" /><path
+         d="M6.981,0H76.792a6.981,6.981,0,1,1,0,13.962H6.981A6.981,6.981,0,0,1,6.981,0Z"
+         transform="translate(73.119 38.406)"
+         fill="#e6e6e6"
+         id="path19" /></g><g
+       transform="translate(1041.086 616.711)"
+       id="g24"><rect
+         width="279.354"
+         height="70.364"
+         rx="16"
+         transform="translate(0 0)"
+         fill="#090814"
+         id="rect19" /><rect
+         width="272.003"
+         height="63.012"
+         rx="15"
+         transform="translate(4.201 4.201)"
+         fill="#fff"
+         id="rect20" /><path
+         d="M301.207,370.636a2.238,2.238,0,0,1-1.791-.9l-5.489-7.318a2.238,2.238,0,0,1,3.581-2.686l3.591,4.788,9.223-13.834a2.238,2.238,0,0,1,3.725,2.483L303.07,369.639a2.239,2.239,0,0,1-1.8,1Z"
+         transform="translate(-52.163 -324.86)"
+         fill="#6c63ff"
+         id="path20" /><g
+         transform="translate(17.922 14.362)"
+         id="g22"><path
+           d="M8.377,0H33.509a8.377,8.377,0,0,1,8.377,8.377V33.509a8.377,8.377,0,0,1-8.377,8.377H8.377A8.377,8.377,0,0,1,0,33.509V8.377A8.377,8.377,0,0,1,8.377,0Z"
+           transform="translate(0 0)"
+           fill="#6c63ff"
+           id="path21" /><path
+           fill="#ffffff"
+           d="m 29.707386,18.657657 c 0.366641,-2.450824 -1.499389,-3.768325 -4.05094,-4.647244 l 0.827682,-3.319949 -2.020864,-0.503633 -0.805812,3.232462 C 23.126191,13.286911 22.580541,13.16201 22.038338,13.038257 L 22.849909,9.784499 20.830193,9.2808661 20.001937,12.599667 c -0.439747,-0.100152 -0.87143,-0.199148 -1.290455,-0.303328 l 0.0023,-0.0104 -2.786965,-0.695882 -0.537594,2.158431 c 0,0 1.49939,0.343622 1.467733,0.364918 0.818479,0.204332 0.966398,0.745954 0.941649,1.17534 l -0.942797,3.782139 c 0.05642,0.01436 0.129503,0.03508 0.210083,0.06736 -0.06736,-0.01669 -0.13929,-0.03516 -0.213537,-0.05293 l -1.321536,5.29823 c -0.100152,0.248646 -0.353983,0.621627 -0.926112,0.480032 0.02018,0.02934 -1.468882,-0.366648 -1.468882,-0.366648 l -1.003261,2.313258 2.629833,0.65558 c 0.489237,0.122604 0.968703,0.250959 1.44068,0.371832 l -0.83632,3.357938 2.018559,0.503633 0.828264,-3.322254 c 0.551408,0.14965 1.086697,0.287791 1.610477,0.417869 l -0.825385,3.306717 2.020864,0.503632 0.83632,-3.351612 c 3.446006,0.652134 6.037269,0.3891 7.127993,-2.727673 0.878911,-2.509534 -0.04377,-3.957121 -1.856825,-4.901074 1.320388,-0.304485 2.314988,-1.173035 2.580335,-2.967123 z m -4.61731,6.474711 c -0.624507,2.509534 -4.849846,1.152888 -6.219732,0.812719 l 1.109723,-4.448662 c 1.369878,0.341891 5.762717,1.018775 5.110009,3.635943 z m 0.62508,-6.510969 c -0.569824,2.28275 -4.086632,1.122955 -5.227429,0.838617 l 1.006118,-4.034821 c 1.140796,0.284338 4.814736,0.815024 4.221311,3.196204 z"
+           id="path2-8-2-9"
+           style="stroke-width:0.575581" /></g><path
+         d="M6.981,0h125.66a6.981,6.981,0,1,1,0,13.962H6.981A6.981,6.981,0,0,1,6.981,0Z"
+         transform="translate(73.77 17.853)"
+         fill="#e6e6e6"
+         id="path23" /><path
+         d="M6.981,0H76.792a6.981,6.981,0,1,1,0,13.962H6.981A6.981,6.981,0,0,1,6.981,0Z"
+         transform="translate(73.77 38.796)"
+         fill="#e6e6e6"
+         id="path24" /></g><g
+       transform="translate(600 723.832)"
+       id="g29"><rect
+         width="279.354"
+         height="69.313"
+         rx="16"
+         transform="translate(0 0)"
+         fill="#090814"
+         id="rect24" /><rect
+         width="273.053"
+         height="63.012"
+         rx="15"
+         transform="translate(3.151 3.151)"
+         fill="#fff"
+         id="rect25" /><path
+         d="M301.207,370.636a2.238,2.238,0,0,1-1.791-.9l-5.489-7.318a2.238,2.238,0,0,1,3.581-2.686l3.591,4.788,9.223-13.834a2.238,2.238,0,0,1,3.725,2.483L303.07,369.639a2.239,2.239,0,0,1-1.8,1Z"
+         transform="translate(-52.631 -325.518)"
+         fill="#6c63ff"
+         id="path25" /><g
+         transform="translate(17.454 13.704)"
+         id="g27"><path
+           d="M8.377,0H33.509a8.377,8.377,0,0,1,8.377,8.377V33.509a8.377,8.377,0,0,1-8.377,8.377H8.377A8.377,8.377,0,0,1,0,33.509V8.377A8.377,8.377,0,0,1,8.377,0Z"
+           transform="translate(0 0)"
+           fill="#6c63ff"
+           id="path26" /><path
+           fill="#ffffff"
+           d="m 29.707386,18.657657 c 0.366641,-2.450824 -1.499389,-3.768325 -4.05094,-4.647244 l 0.827682,-3.319949 -2.020864,-0.503633 -0.805812,3.232462 C 23.126191,13.286911 22.580541,13.16201 22.038338,13.038257 l 0.811571,-3.253758 -2.019716,-0.503633 -0.828256,3.318801 c -0.439747,-0.100152 -0.87143,-0.199148 -1.290455,-0.303328 l 0.0023,-0.0104 -2.786965,-0.695882 -0.537594,2.158431 c 0,0 1.49939,0.343622 1.467733,0.364918 0.818479,0.204332 0.966398,0.745954 0.941649,1.17534 l -0.942797,3.782139 c 0.05642,0.01436 0.129503,0.03508 0.210083,0.06736 -0.06736,-0.01669 -0.13929,-0.03516 -0.213537,-0.05293 l -1.321536,5.29823 c -0.100152,0.248646 -0.353983,0.621627 -0.926112,0.480032 0.02018,0.02934 -1.468882,-0.366648 -1.468882,-0.366648 l -1.003261,2.313258 2.629833,0.65558 c 0.489237,0.122604 0.968703,0.250959 1.44068,0.371832 l -0.83632,3.357938 2.018559,0.503633 0.828264,-3.322254 c 0.551408,0.14965 1.086697,0.287791 1.610477,0.417869 l -0.825385,3.306717 2.020864,0.503632 0.83632,-3.351612 c 3.446006,0.652134 6.037269,0.3891 7.127993,-2.727673 0.878911,-2.509534 -0.04377,-3.957121 -1.856825,-4.901074 1.320388,-0.304485 2.314988,-1.173035 2.580335,-2.967123 z m -4.61731,6.474711 c -0.624507,2.509534 -4.849846,1.152888 -6.219732,0.812719 l 1.109723,-4.448662 c 1.369878,0.341891 5.762717,1.018775 5.110009,3.635943 z m 0.62508,-6.510969 c -0.569824,2.28275 -4.086632,1.122955 -5.227429,0.838617 l 1.006118,-4.034821 c 1.140796,0.284338 4.814736,0.815024 4.221311,3.196204 z"
+           id="path2-8-2-98"
+           style="stroke-width:0.575581" /></g><path
+         d="M6.981,0h125.66a6.981,6.981,0,1,1,0,13.962H6.981A6.981,6.981,0,0,1,6.981,0Z"
+         transform="translate(73.301 17.194)"
+         fill="#e6e6e6"
+         id="path28" /><path
+         d="M6.981,0H76.792a6.981,6.981,0,1,1,0,13.962H6.981A6.981,6.981,0,0,1,6.981,0Z"
+         transform="translate(73.301 38.138)"
+         fill="#e6e6e6"
+         id="path29" /></g></g></svg>

src/App.tsx

@@ -13,6 +13,7 @@ import Toast from './components/Toast'
 import { useToast } from './hooks/useToast'
 import { useOnlineStatus } from './hooks/useOnlineStatus'
 import { RELAYS } from './config/relays'
+import { SkeletonThemeProvider } from './components/Skeletons'
 
 const DEFAULT_ARTICLE = import.meta.env.VITE_DEFAULT_ARTICLE_NADDR || 
   'naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqqxnzd3cxqmrzv3exgmr2wfesgsmew'
@@ -61,6 +62,15 @@ function AppRoutes({
           />
         } 
       />
+      <Route 
+        path="/support" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
       <Route 
         path="/explore" 
         element={
@@ -102,7 +112,25 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/archive" 
+        path="/me/reads" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
+      <Route 
+        path="/me/reads/:filter" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
+      <Route 
+        path="/me/links" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -205,8 +233,7 @@ function App() {
       console.log('🔗 Created keep-alive subscription for', RELAYS.length, 'relay(s)')
       
       // Store subscription for cleanup
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ;(pool as any)._keepAliveSubscription = keepAliveSub
+      ;(pool as unknown as { _keepAliveSubscription: typeof keepAliveSub })._keepAliveSubscription = keepAliveSub
       
       // Attach address/replaceable loaders so ProfileModel can fetch profiles
       const addressLoader = createAddressLoader(pool, {
@@ -225,10 +252,9 @@ function App() {
         accountsSub.unsubscribe()
         activeSub.unsubscribe()
         // Clean up keep-alive subscription if it exists
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if ((pool as any)._keepAliveSubscription) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (pool as any)._keepAliveSubscription.unsubscribe()
+        const poolWithSub = pool as unknown as { _keepAliveSubscription?: { unsubscribe: () => void } }
+        if (poolWithSub._keepAliveSubscription) {
+          poolWithSub._keepAliveSubscription.unsubscribe()
         }
       }
     }
@@ -271,22 +297,24 @@ function App() {
   }
 
   return (
-    <EventStoreProvider eventStore={eventStore}>
-      <AccountsProvider manager={accountManager}>
-        <BrowserRouter>
-          <div className="min-h-screen p-0 max-w-none m-0 relative">
-            <AppRoutes relayPool={relayPool} showToast={showToast} />
-          </div>
-        </BrowserRouter>
-        {toastMessage && (
-          <Toast
-            message={toastMessage}
-            type={toastType}
-            onClose={clearToast}
-          />
-        )}
-      </AccountsProvider>
-    </EventStoreProvider>
+    <SkeletonThemeProvider>
+      <EventStoreProvider eventStore={eventStore}>
+        <AccountsProvider manager={accountManager}>
+          <BrowserRouter>
+            <div className="min-h-screen p-0 max-w-none m-0 relative">
+              <AppRoutes relayPool={relayPool} showToast={showToast} />
+            </div>
+          </BrowserRouter>
+          {toastMessage && (
+            <Toast
+              message={toastMessage}
+              type={toastType}
+              onClose={clearToast}
+            />
+          )}
+        </AccountsProvider>
+      </EventStoreProvider>
+    </SkeletonThemeProvider>
   )
 }
 

src/components/AddBookmarkModal.tsx

@@ -140,8 +140,7 @@ const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave })
         clearTimeout(fetchTimeoutRef.current)
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [url]) // Only depend on url - title, description, tagsInput are intentionally checked but not dependencies
+  }, [url, title, description, tagsInput])
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()

src/components/BlogPostCard.tsx

@@ -10,9 +10,11 @@ import { Models } from 'applesauce-core'
 interface BlogPostCardProps {
   post: BlogPostPreview
   href: string
+  level?: 'mine' | 'friends' | 'nostrverse'
+  readingProgress?: number // 0-1 reading progress (optional)
 }
 
-const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href }) => {
+const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingProgress }) => {
   const profile = useEventModel(Models.ProfileModel, [post.author])
   const displayName = profile?.name || profile?.display_name || 
     `${post.author.slice(0, 8)}...${post.author.slice(-4)}`
@@ -22,10 +24,20 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href }) => {
     addSuffix: true 
   })
 
+  // Calculate progress percentage and determine color (matching readingProgressUtils.ts logic)
+  const progressPercent = readingProgress ? Math.round(readingProgress * 100) : 0
+  let progressColor = '#6366f1' // Default blue (reading)
+  
+  if (readingProgress && readingProgress >= 0.95) {
+    progressColor = '#10b981' // Green (completed)
+  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
+    progressColor = 'var(--color-text)' // Neutral text color (started)
+  }
+
   return (
     <Link 
       to={href}
-      className="blog-post-card"
+      className={`blog-post-card ${level ? `level-${level}` : ''}`}
       style={{ textDecoration: 'none', color: 'inherit' }}
     >
       <div className="blog-post-card-image">
@@ -46,7 +58,37 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href }) => {
         {post.summary && (
           <p className="blog-post-card-summary">{post.summary}</p>
         )}
-        <div className="blog-post-card-meta">
+        
+        {/* Reading progress indicator - replaces the dividing line */}
+        {readingProgress !== undefined && readingProgress > 0 ? (
+          <div 
+            className="blog-post-reading-progress"
+            style={{
+              height: '3px',
+              width: '100%',
+              background: 'var(--color-border)',
+              overflow: 'hidden',
+              marginTop: '1rem'
+            }}
+          >
+            <div
+              style={{
+                height: '100%',
+                width: `${progressPercent}%`,
+                background: progressColor,
+                transition: 'width 0.3s ease, background 0.3s ease'
+              }}
+            />
+          </div>
+        ) : (
+          <div style={{ 
+            height: '1px', 
+            background: 'var(--color-border)', 
+            marginTop: '1rem' 
+          }} />
+        )}
+        
+        <div className="blog-post-card-meta" style={{ borderTop: 'none', paddingTop: '0.75rem' }}>
           <span className="blog-post-card-author">
             <FontAwesomeIcon icon={faUser} />
             {displayName}

src/components/BookmarkFilters.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faNewspaper, faStickyNote, faCirclePlay } from '@fortawesome/free-regular-svg-icons'
+import { faGlobe, faAsterisk, faLink } from '@fortawesome/free-solid-svg-icons'
+
+export type BookmarkFilterType = 'all' | 'article' | 'external' | 'video' | 'note' | 'web'
+
+interface BookmarkFiltersProps {
+  selectedFilter: BookmarkFilterType
+  onFilterChange: (filter: BookmarkFilterType) => void
+}
+
+const BookmarkFilters: React.FC<BookmarkFiltersProps> = ({
+  selectedFilter,
+  onFilterChange
+}) => {
+  const filters = [
+    { type: 'all' as const, icon: faAsterisk, label: 'All' },
+    { type: 'article' as const, icon: faNewspaper, label: 'Articles' },
+    { type: 'external' as const, icon: faLink, label: 'External Articles' },
+    { type: 'video' as const, icon: faCirclePlay, label: 'Videos' },
+    { type: 'note' as const, icon: faStickyNote, label: 'Notes' },
+    { type: 'web' as const, icon: faGlobe, label: 'Web' }
+  ]
+
+  return (
+    <div className="bookmark-filters">
+      {filters.map(filter => (
+        <button
+          key={filter.type}
+          onClick={() => onFilterChange(filter.type)}
+          className={`filter-btn ${selectedFilter === filter.type ? 'active' : ''}`}
+          title={filter.label}
+          aria-label={`Filter by ${filter.label}`}
+        >
+          <FontAwesomeIcon icon={filter.icon} />
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export default BookmarkFilters
+

src/components/BookmarkItem.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { faBookOpen, faPlay, faEye } from '@fortawesome/free-solid-svg-icons'
+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, neventEncode } from 'nostr-tools/nip19'
@@ -11,17 +13,16 @@ import { getPreviewImage, fetchOgImage } from '../utils/imagePreview'
 import { CompactView } from './BookmarkViews/CompactView'
 import { LargeView } from './BookmarkViews/LargeView'
 import { CardView } from './BookmarkViews/CardView'
-import { UserSettings } from '../services/settingsService'
 
 interface BookmarkItemProps {
   bookmark: IndividualBookmark
   index: number
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
   viewMode?: ViewMode
-  settings?: UserSettings
+  readingProgress?: number // 0-1 reading progress (optional)
 }
 
-export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards', settings }) => {
+export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards', readingProgress }) => {
   const [ogImage, setOgImage] = useState<string | null>(null)
 
   const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
@@ -68,18 +69,41 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     return short(bookmark.pubkey) // fallback to short pubkey
   }
 
-  // use helper from kindIcon.ts
+  // Get content type icon based on bookmark kind and URL classification
+  const getContentTypeIcon = (): IconDefinition => {
+    if (isArticle) return faNewspaper // Nostr-native article
+    
+    // For web bookmarks, classify the URL to determine icon
+    if (isWebBookmark && firstUrlClassification) {
+      switch (firstUrlClassification.type) {
+        case 'youtube':
+        case 'video':
+          return faCirclePlay
+        case 'image':
+          return faCamera
+        case 'article':
+          return faLink // External article
+        default:
+          return faGlobe
+      }
+    }
+    
+    if (!hasUrls) return faStickyNote // Just a text note
+    if (firstUrlClassification?.type === 'youtube' || firstUrlClassification?.type === 'video') return faCirclePlay
+    if (firstUrlClassification?.type === 'article') return faLink // External article
+    return faFileLines
+  }
 
   const getIconForUrlType = (url: string) => {
     const classification = classifyUrl(url)
     switch (classification.type) {
       case 'youtube':
       case 'video':
-        return faPlay
+        return faCirclePlay
       case 'image':
-        return faEye
+        return faCamera
       default:
-        return faBookOpen
+        return faFileLines
     }
   }
 
@@ -116,17 +140,19 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     handleReadNow,
     articleImage,
     articleSummary,
-    settings
+    contentTypeIcon: getContentTypeIcon()
   }
 
   if (viewMode === 'compact') {
-    return <CompactView {...sharedProps} />
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    const { articleImage, ...compactProps } = sharedProps
+    return <CompactView {...compactProps} />
   }
 
   if (viewMode === 'large') {
     const previewImage = articleImage || instantPreview || ogImage
-    return <LargeView {...sharedProps} getIconForUrlType={getIconForUrlType} previewImage={previewImage} />
+    return <LargeView {...sharedProps} getIconForUrlType={getIconForUrlType} previewImage={previewImage} readingProgress={readingProgress} />
   }
 
-  return <CardView {...sharedProps} getIconForUrlType={getIconForUrlType} articleImage={articleImage} />
+  return <CardView {...sharedProps} articleImage={articleImage} />
 }

src/components/BookmarkList.tsx

@@ -1,17 +1,27 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faBookmark, faSpinner, faList, faThLarge, faImage, faRotate } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faBookmark, faList, faThLarge, faImage, faRotate, faHeart, faPlus } from '@fortawesome/free-solid-svg-icons'
 import { formatDistanceToNow } from 'date-fns'
 import { RelayPool } from 'applesauce-relay'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import { BookmarkItem } from './BookmarkItem'
 import SidebarHeader from './SidebarHeader'
 import IconButton from './IconButton'
+import CompactButton from './CompactButton'
 import { ViewMode } from './Bookmarks'
-import { extractUrlsFromContent } from '../services/bookmarkHelpers'
+import { usePullToRefresh } from 'use-pull-to-refresh'
+import RefreshIndicator from './RefreshIndicator'
+import { BookmarkSkeleton } from './Skeletons'
+import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWithoutSet } from '../utils/bookmarkUtils'
 import { UserSettings } from '../services/settingsService'
-import { usePullToRefresh } from '../hooks/usePullToRefresh'
-import PullToRefreshIndicator from './PullToRefreshIndicator'
+import AddBookmarkModal from './AddBookmarkModal'
+import { createWebBookmark } from '../services/webBookmarkService'
+import { RELAYS } from '../config/relays'
+import { Hooks } from 'applesauce-react'
+import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
+import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
+import ReadingProgressFilters, { ReadingProgressFilterType } from './ReadingProgressFilters'
 
 interface BookmarkListProps {
   bookmarks: Bookmark[]
@@ -28,8 +38,10 @@ interface BookmarkListProps {
   lastFetchTime?: number | null
   loading?: boolean
   relayPool: RelayPool | null
-  settings?: UserSettings
   isMobile?: boolean
+  settings?: UserSettings
+  readingPositions?: Map<string, number>
+  markedAsReadIds?: Set<string>
 }
 
 export const BookmarkList: React.FC<BookmarkListProps> = ({
@@ -47,52 +59,101 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   lastFetchTime,
   loading = false,
   relayPool,
+  isMobile = false,
   settings,
-  isMobile = false
+  readingPositions,
+  markedAsReadIds
 }) => {
+  const navigate = useNavigate()
   const bookmarksListRef = useRef<HTMLDivElement>(null)
+  const friendsColor = settings?.highlightColorFriends || '#f97316'
+  const [showAddModal, setShowAddModal] = useState(false)
+  const [selectedFilter, setSelectedFilter] = useState<BookmarkFilterType>('all')
+  const [readingProgressFilter, setReadingProgressFilter] = useState<ReadingProgressFilterType>('all')
+  const activeAccount = Hooks.useActiveAccount()
+
+  const handleSaveBookmark = async (url: string, title?: string, description?: string, tags?: string[]) => {
+    if (!activeAccount || !relayPool) {
+      throw new Error('Please login to create bookmarks')
+    }
+
+    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, RELAYS)
+  }
 
   // Pull-to-refresh for bookmarks
-  const pullToRefreshState = usePullToRefresh(bookmarksListRef, {
+  const { isRefreshing: isPulling, pullPosition } = usePullToRefresh({
     onRefresh: () => {
       if (onRefresh) {
         onRefresh()
       }
     },
-    isRefreshing: isRefreshing || false,
-    disabled: !onRefresh
+    maximumPullLength: 240,
+    refreshThreshold: 80,
+    isDisabled: !onRefresh
   })
 
-  // Helper to check if a bookmark has either content or a URL
-  const hasContentOrUrl = (ib: IndividualBookmark) => {
-    // Check if has content (text)
-    const hasContent = ib.content && ib.content.trim().length > 0
+  // Merge and flatten all individual bookmarks from all lists
+  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
+    .filter(hasContent)
+  
+  // Apply type filter
+  const typeFilteredBookmarks = filterBookmarksByType(allIndividualBookmarks, selectedFilter)
+  
+  // Apply reading progress filter (only affects kind:30023 articles)
+  const filteredBookmarks = typeFilteredBookmarks.filter(bookmark => {
+    // Only apply reading progress filter to kind:30023 articles
+    if (bookmark.kind !== 30023) return true
     
-    // Check if has URL
-    let hasUrl = false
+    // If reading progress filter is 'all', show all articles
+    if (readingProgressFilter === 'all') return true
     
-    // For web bookmarks (kind:39701), URL is in the 'd' tag
-    if (ib.kind === 39701) {
-      const dTag = ib.tags?.find((t: string[]) => t[0] === 'd')?.[1]
-      hasUrl = !!dTag && dTag.trim().length > 0
-    } else {
-      // For other bookmarks, extract URLs from content
-      const urls = extractUrlsFromContent(ib.content || '')
-      hasUrl = urls.length > 0
+    const isMarkedAsRead = markedAsReadIds?.has(bookmark.id)
+    const position = readingPositions?.get(bookmark.id)
+    
+    // Marked-as-read articles are always treated as 100% complete
+    if (isMarkedAsRead) {
+      return readingProgressFilter === 'completed'
     }
     
-    // Always show articles (kind:30023) as they have special handling
-    if (ib.kind === 30023) return true
-    
-    // Otherwise, must have either content or URL
-    return hasContent || hasUrl
-  }
+    switch (readingProgressFilter) {
+      case 'unopened':
+        // No reading progress - never opened
+        return !position || position === 0
+      case 'started':
+        // 0-10% reading progress - opened but not read far
+        return position !== undefined && position > 0 && position <= 0.10
+      case 'reading':
+        // Has some progress but not completed (11% - 94%)
+        return position !== undefined && position > 0.10 && position <= 0.94
+      case 'completed':
+        // 95% or more read
+        return position !== undefined && position >= 0.95
+      default:
+        return true
+    }
+  })
   
-  // Merge and flatten all individual bookmarks from all lists
-  // Re-sort after flattening to ensure newest first across all lists
-  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
-    .filter(hasContentOrUrl)
-    .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
+  // Separate bookmarks with setName (kind 30003) from regular bookmarks
+  const bookmarksWithoutSet = getBookmarksWithoutSet(filteredBookmarks)
+  const bookmarkSets = getBookmarkSets(filteredBookmarks)
+  
+  // Group non-set bookmarks as before
+  const groups = groupIndividualBookmarks(bookmarksWithoutSet)
+  const sections: Array<{ key: string; title: string; items: IndividualBookmark[] }> = [
+    { key: 'private', title: 'Private Bookmarks', items: groups.privateItems },
+    { key: 'public', title: 'Public Bookmarks', items: groups.publicItems },
+    { key: 'web', title: 'Web Bookmarks', items: groups.web },
+    { key: 'amethyst', title: 'Legacy Bookmarks', items: groups.amethyst }
+  ]
+  
+  // Add bookmark sets as additional sections
+  bookmarkSets.forEach(set => {
+    sections.push({
+      key: `set-${set.name}`,
+      title: set.title || set.name,
+      items: set.bookmarks
+    })
+  })
   
   if (isCollapsed) {
     // Check if the selected URL is in bookmarks
@@ -122,14 +183,28 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
         onToggleCollapse={onToggleCollapse} 
         onLogout={onLogout}
         onOpenSettings={onOpenSettings}
-        relayPool={relayPool}
         isMobile={isMobile}
       />
       
-      {allIndividualBookmarks.length === 0 ? (
+      {allIndividualBookmarks.length > 0 && (
+        <BookmarkFilters
+          selectedFilter={selectedFilter}
+          onFilterChange={setSelectedFilter}
+        />
+      )}
+      
+      {filteredBookmarks.length === 0 && allIndividualBookmarks.length > 0 ? (
+        <div className="empty-state">
+          <p>No bookmarks match this filter.</p>
+        </div>
+      ) : allIndividualBookmarks.length === 0 ? (
         loading ? (
-          <div className="loading">
-            <FontAwesomeIcon icon={faSpinner} spin />
+          <div className={`bookmarks-list ${viewMode}`} aria-busy="true">
+            <div className={`bookmarks-grid bookmarks-${viewMode}`}>
+              {Array.from({ length: viewMode === 'large' ? 4 : viewMode === 'cards' ? 6 : 8 }).map((_, i) => (
+                <BookmarkSkeleton key={i} viewMode={viewMode} />
+              ))}
+            </div>
           </div>
         ) : (
           <div className="empty-state">
@@ -141,62 +216,105 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
       ) : (
         <div 
           ref={bookmarksListRef}
-          className={`bookmarks-list pull-to-refresh-container ${pullToRefreshState.isPulling ? 'is-pulling' : ''}`}
+          className="bookmarks-list"
         >
-          <PullToRefreshIndicator
-            isPulling={pullToRefreshState.isPulling}
-            pullDistance={pullToRefreshState.pullDistance}
-            canRefresh={pullToRefreshState.canRefresh}
-            isRefreshing={isRefreshing || false}
+          <RefreshIndicator
+            isRefreshing={isPulling || isRefreshing || false}
+            pullPosition={pullPosition}
           />
-          <div className={`bookmarks-grid bookmarks-${viewMode}`}>
-            {allIndividualBookmarks.map((individualBookmark, index) => 
-              <BookmarkItem 
-                key={`${individualBookmark.id}-${index}`}
-                bookmark={individualBookmark} 
-                index={index} 
-                onSelectUrl={onSelectUrl}
-                viewMode={viewMode}
-                settings={settings}
-              />
-            )}
-          </div>
+          {sections.filter(s => s.items.length > 0).map(section => (
+            <div key={section.key} className="bookmarks-section">
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <h3 className="bookmarks-section-title" style={{ margin: 0, padding: '1.5rem 0.5rem 0.375rem', flex: 1 }}>{section.title}</h3>
+                {section.key === 'web' && activeAccount && (
+                  <CompactButton
+                    icon={faPlus}
+                    onClick={() => setShowAddModal(true)}
+                    title="Add web bookmark"
+                    ariaLabel="Add web bookmark"
+                    className="bookmark-section-action"
+                  />
+                )}
+              </div>
+              <div className={`bookmarks-grid bookmarks-${viewMode}`}>
+                {section.items.map((individualBookmark, index) => (
+                  <BookmarkItem 
+                    key={`${section.key}-${individualBookmark.id}-${index}`}
+                    bookmark={individualBookmark} 
+                    index={index} 
+                    onSelectUrl={onSelectUrl}
+                    viewMode={viewMode}
+                    readingProgress={markedAsReadIds?.has(individualBookmark.id) ? 1.0 : readingPositions?.get(individualBookmark.id)}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
         </div>
       )}
-      <div className="view-mode-controls">
-        {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}
+      
+      {/* Reading progress filters - only show if there are kind:30023 articles */}
+      {typeFilteredBookmarks.some(b => b.kind === 30023) && (
+        <div className="reading-progress-filters-wrapper">
+          <ReadingProgressFilters
+            selectedFilter={readingProgressFilter}
+            onFilterChange={setReadingProgressFilter}
           />
-        )}
-        <IconButton
-          icon={faList}
-          onClick={() => onViewModeChange('compact')}
-          title="Compact list view"
-          ariaLabel="Compact list view"
-          variant={viewMode === 'compact' ? 'primary' : 'ghost'}
-        />
-        <IconButton
-          icon={faThLarge}
-          onClick={() => onViewModeChange('cards')}
-          title="Cards view"
-          ariaLabel="Cards view"
-          variant={viewMode === 'cards' ? 'primary' : 'ghost'}
-        />
-        <IconButton
-          icon={faImage}
-          onClick={() => onViewModeChange('large')}
-          title="Large preview view"
-          ariaLabel="Large preview view"
-          variant={viewMode === 'large' ? 'primary' : 'ghost'}
-        />
+        </div>
+      )}
+      
+      <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: friendsColor }}
+          />
+        </div>
+        <div className="view-mode-right">
+          {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}
+            />
+          )}
+          <IconButton
+            icon={faList}
+            onClick={() => onViewModeChange('compact')}
+            title="Compact list view"
+            ariaLabel="Compact list view"
+            variant={viewMode === 'compact' ? 'primary' : 'ghost'}
+          />
+          <IconButton
+            icon={faThLarge}
+            onClick={() => onViewModeChange('cards')}
+            title="Cards view"
+            ariaLabel="Cards view"
+            variant={viewMode === 'cards' ? 'primary' : 'ghost'}
+          />
+          <IconButton
+            icon={faImage}
+            onClick={() => onViewModeChange('large')}
+            title="Large preview view"
+            ariaLabel="Large preview view"
+            variant={viewMode === 'large' ? 'primary' : 'ghost'}
+          />
+        </div>
       </div>
+      {showAddModal && (
+        <AddBookmarkModal
+          onClose={() => setShowAddModal(false)}
+          onSave={handleSaveBookmark}
+        />
+      )}
     </div>
   )
 }

src/components/BookmarkViews/CardView.tsx

@@ -1,16 +1,14 @@
 import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBookmark, faUserLock, faChevronDown, faChevronUp, faGlobe } from '@fortawesome/free-solid-svg-icons'
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate, renderParsedContent } from '../../utils/bookmarkUtils'
 import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
-import IconButton from '../IconButton'
 import { classifyUrl } from '../../utils/helpers'
-import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
 import { getPreviewImage, fetchOgImage } from '../../utils/imagePreview'
-import { UserSettings } from '../../services/settingsService'
 import { getEventUrl } from '../../config/nostrGateways'
 
 interface CardViewProps {
@@ -19,14 +17,13 @@ interface CardViewProps {
   hasUrls: boolean
   extractedUrls: string[]
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
-  getIconForUrlType: IconGetter
   authorNpub: string
   eventNevent?: string
   getAuthorDisplayName: () => string
   handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
   articleImage?: string
   articleSummary?: string
-  settings?: UserSettings
+  contentTypeIcon: IconDefinition
 }
 
 export const CardView: React.FC<CardViewProps> = ({
@@ -35,14 +32,13 @@ export const CardView: React.FC<CardViewProps> = ({
   hasUrls,
   extractedUrls,
   onSelectUrl,
-  getIconForUrlType,
   authorNpub,
   eventNevent,
   getAuthorDisplayName,
   handleReadNow,
   articleImage,
   articleSummary,
-  settings
+  contentTypeIcon
 }) => {
   const firstUrl = hasUrls ? extractedUrls[0] : null
   const firstUrlClassificationType = firstUrl ? classifyUrl(firstUrl)?.type : null
@@ -55,11 +51,10 @@ export const CardView: React.FC<CardViewProps> = ({
   const contentLength = (bookmark.content || '').length
   const shouldTruncate = !expanded && contentLength > 210
   const isArticle = bookmark.kind === 30023
-  const isWebBookmark = bookmark.kind === 39701
   
   // Determine which image to use (article image, instant preview, or OG image)
   const previewImage = articleImage || instantPreview || ogImage
-  const cachedImage = useImageCache(previewImage || undefined, settings)
+  const cachedImage = useImageCache(previewImage || undefined)
   
   // Fetch OG image if we don't have any other image
   React.useEffect(() => {
@@ -95,19 +90,7 @@ export const CardView: React.FC<CardViewProps> = ({
       )}
       <div className="bookmark-header">
         <span className="bookmark-type">
-          {isWebBookmark ? (
-            <span className="fa-layers fa-fw">
-              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-              <FontAwesomeIcon icon={faGlobe} className="bookmark-visibility public" transform="shrink-8 down-2" />
-            </span>
-          ) : bookmark.isPrivate ? (
-            <>
-              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-              <FontAwesomeIcon icon={faUserLock} className="bookmark-visibility private" />
-            </>
-          ) : (
-            <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-          )}
+          <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
         </span>
         
         {eventNevent ? (
@@ -130,23 +113,14 @@ export const CardView: React.FC<CardViewProps> = ({
         <div className="bookmark-urls">
           {(urlsExpanded ? extractedUrls : extractedUrls.slice(0, 1)).map((url, urlIndex) => {
             return (
-              <div key={urlIndex} className="url-row">
-                <button
-                  className="bookmark-url"
-                  onClick={(e) => { e.stopPropagation(); onSelectUrl?.(url) }}
-                  title="Open in reader"
-                >
-                  {url}
-                </button>
-                <IconButton
-                  icon={getIconForUrlType(url)}
-                  ariaLabel="Open"
-                  title="Open"
-                  variant="success"
-                  size={32}
-                  onClick={(e) => { e.preventDefault(); e.stopPropagation(); onSelectUrl?.(url) }}
-                />
-              </div>
+              <button
+                key={urlIndex}
+                className="bookmark-url"
+                onClick={(e) => { e.stopPropagation(); onSelectUrl?.(url) }}
+                title="Open in reader"
+              >
+                {url}
+              </button>
             )
           })}
           {extractedUrls.length > 1 && (

src/components/BookmarkViews/CompactView.tsx

@@ -1,11 +1,9 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBookmark, faUserLock, faGlobe } from '@fortawesome/free-solid-svg-icons'
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDateCompact } from '../../utils/bookmarkUtils'
 import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
-import { useImageCache } from '../../hooks/useImageCache'
-import { UserSettings } from '../../services/settingsService'
 
 interface CompactViewProps {
   bookmark: IndividualBookmark
@@ -13,9 +11,8 @@ interface CompactViewProps {
   hasUrls: boolean
   extractedUrls: string[]
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
-  articleImage?: string
   articleSummary?: string
-  settings?: UserSettings
+  contentTypeIcon: IconDefinition
 }
 
 export const CompactView: React.FC<CompactViewProps> = ({
@@ -24,17 +21,13 @@ export const CompactView: React.FC<CompactViewProps> = ({
   hasUrls,
   extractedUrls,
   onSelectUrl,
-  articleImage,
   articleSummary,
-  settings
+  contentTypeIcon
 }) => {
   const isArticle = bookmark.kind === 30023
   const isWebBookmark = bookmark.kind === 39701
   const isClickable = hasUrls || isArticle || isWebBookmark
   
-  // Get cached image for thumbnail
-  const cachedImage = useImageCache(articleImage || undefined, settings)
-  
   const handleCompactClick = () => {
     if (!onSelectUrl) return
     
@@ -58,27 +51,8 @@ export const CompactView: React.FC<CompactViewProps> = ({
         role={isClickable ? 'button' : undefined}
         tabIndex={isClickable ? 0 : undefined}
       >
-        {/* Thumbnail image */}
-        {cachedImage && (
-          <div className="compact-thumbnail">
-            <img src={cachedImage} alt="" />
-          </div>
-        )}
-        
         <span className="bookmark-type-compact">
-          {isWebBookmark ? (
-            <span className="fa-layers fa-fw">
-              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-              <FontAwesomeIcon icon={faGlobe} className="bookmark-visibility public" transform="shrink-8 down-2" />
-            </span>
-          ) : bookmark.isPrivate ? (
-            <>
-              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-              <FontAwesomeIcon icon={faUserLock} className="bookmark-visibility private" />
-            </>
-          ) : (
-            <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-          )}
+          <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
         </span>
         {displayText && (
           <div className="compact-text">

src/components/BookmarkViews/LargeView.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate } from '../../utils/bookmarkUtils'
 import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
 import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
-import { UserSettings } from '../../services/settingsService'
 import { getEventUrl } from '../../config/nostrGateways'
 
 interface LargeViewProps {
@@ -22,7 +22,8 @@ interface LargeViewProps {
   getAuthorDisplayName: () => string
   handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
   articleSummary?: string
-  settings?: UserSettings
+  contentTypeIcon: IconDefinition
+  readingProgress?: number // 0-1 reading progress (optional)
 }
 
 export const LargeView: React.FC<LargeViewProps> = ({
@@ -38,11 +39,22 @@ export const LargeView: React.FC<LargeViewProps> = ({
   getAuthorDisplayName,
   handleReadNow,
   articleSummary,
-  settings
+  contentTypeIcon,
+  readingProgress
 }) => {
-  const cachedImage = useImageCache(previewImage || undefined, settings)
+  const cachedImage = useImageCache(previewImage || undefined)
   const isArticle = bookmark.kind === 30023
   
+  // Calculate progress display (matching readingProgressUtils.ts logic)
+  const progressPercent = readingProgress ? Math.round(readingProgress * 100) : 0
+  let progressColor = '#6366f1' // Default blue (reading)
+  
+  if (readingProgress && readingProgress >= 0.95) {
+    progressColor = '#10b981' // Green (completed)
+  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
+    progressColor = 'var(--color-text)' // Neutral text color (started)
+  }
+  
   const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
   const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
     if (e.key === 'Enter' || e.key === ' ') {
@@ -92,7 +104,32 @@ export const LargeView: React.FC<LargeViewProps> = ({
           </div>
         )}
         
+        {/* Reading progress indicator for articles - shown only if there's progress */}
+        {isArticle && readingProgress !== undefined && readingProgress > 0 && (
+          <div 
+            style={{
+              height: '3px',
+              width: '100%',
+              background: 'var(--color-border)',
+              overflow: 'hidden',
+              marginTop: '0.75rem'
+            }}
+          >
+            <div
+              style={{
+                height: '100%',
+                width: `${progressPercent}%`,
+                background: progressColor,
+                transition: 'width 0.3s ease, background 0.3s ease'
+              }}
+            />
+          </div>
+        )}
+        
         <div className="large-footer">
+          <span className="bookmark-type-large">
+            <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
+          </span>
           <span className="large-author">
             <Link
               to={`/p/${authorNpub}`}

src/components/Bookmarks.tsx

@@ -16,6 +16,7 @@ import { useOfflineSync } from '../hooks/useOfflineSync'
 import ThreePaneLayout from './ThreePaneLayout'
 import Explore from './Explore'
 import Me from './Me'
+import Support from './Support'
 import { classifyHighlights } from '../utils/highlightClassification'
 
 export type ViewMode = 'compact' | 'cards' | 'large'
@@ -42,6 +43,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   const showExplore = location.pathname.startsWith('/explore')
   const showMe = location.pathname.startsWith('/me')
   const showProfile = location.pathname.startsWith('/p/')
+  const showSupport = location.pathname === '/support'
   
   // Extract tab from explore routes
   const exploreTab = location.pathname === '/explore/writings' ? 'writings' : 'highlights'
@@ -50,22 +52,25 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   const meTab = location.pathname === '/me' ? 'highlights' : 
                 location.pathname === '/me/highlights' ? 'highlights' :
                 location.pathname === '/me/reading-list' ? 'reading-list' :
-                location.pathname === '/me/archive' ? 'archive' :
+                location.pathname.startsWith('/me/reads') ? 'reads' :
+                location.pathname === '/me/links' ? 'links' :
                 location.pathname === '/me/writings' ? 'writings' : 'highlights'
   
   // Extract tab from profile routes
   const profileTab = location.pathname.endsWith('/writings') ? 'writings' : 'highlights'
   
-  // Decode npub to pubkey for profile view
+  // Decode npub or nprofile to pubkey for profile view
   let profilePubkey: string | undefined
   if (npub && showProfile) {
     try {
       const decoded = nip19.decode(npub)
       if (decoded.type === 'npub') {
         profilePubkey = decoded.data
+      } else if (decoded.type === 'nprofile') {
+        profilePubkey = decoded.data.pubkey
       }
     } catch (err) {
-      console.error('Failed to decode npub:', err)
+      console.error('Failed to decode npub/nprofile:', err)
     }
   }
   
@@ -124,12 +129,14 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   } = useBookmarksUI({ settings })
 
   // Close sidebar on mobile when route changes (e.g., clicking on blog posts in Explore)
+  const prevPathnameRef = useRef<string>(location.pathname)
   useEffect(() => {
-    if (isMobile && isSidebarOpen) {
+    // Only close if pathname actually changed, not on initial render or other state changes
+    if (isMobile && isSidebarOpen && prevPathnameRef.current !== location.pathname) {
       toggleSidebar()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location.pathname])
+    prevPathnameRef.current = location.pathname
+  }, [location.pathname, isMobile, isSidebarOpen, toggleSidebar])
 
   // Handle highlight navigation from explore page
   useEffect(() => {
@@ -155,15 +162,19 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     isRefreshing,
     lastFetchTime,
     handleFetchHighlights,
-    handleRefreshAll
+    handleRefreshAll,
+    readingPositions,
+    markedAsReadIds
   } = useBookmarksData({
     relayPool,
     activeAccount,
     accountManager,
     naddr,
+    externalUrl,
     currentArticleCoordinate,
     currentArticleEventId,
-    settings
+    settings,
+    eventStore
   })
 
   const {
@@ -250,6 +261,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       showExplore={showExplore}
       showMe={showMe}
       showProfile={showProfile}
+      showSupport={showSupport}
       bookmarks={bookmarks}
       bookmarksLoading={bookmarksLoading}
       viewMode={viewMode}
@@ -304,8 +316,10 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       highlightButtonRef={highlightButtonRef}
       onCreateHighlight={handleCreateHighlight}
       hasActiveAccount={!!(activeAccount && relayPool)}
+      readingPositions={readingPositions}
+      markedAsReadIds={markedAsReadIds}
       explore={showExplore ? (
-        relayPool ? <Explore relayPool={relayPool} activeTab={exploreTab} /> : null
+        relayPool ? <Explore relayPool={relayPool} eventStore={eventStore} settings={settings} activeTab={exploreTab} /> : null
       ) : undefined}
       me={showMe ? (
         relayPool ? <Me relayPool={relayPool} activeTab={meTab} /> : null
@@ -313,6 +327,9 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       profile={showProfile && profilePubkey ? (
         relayPool ? <Me relayPool={relayPool} activeTab={profileTab} pubkey={profilePubkey} /> : null
       ) : undefined}
+      support={showSupport ? (
+        relayPool ? <Support relayPool={relayPool} eventStore={eventStore} settings={settings} /> : null
+      ) : undefined}
       toastMessage={toastMessage ?? undefined}
       toastType={toastType}
       onClearToast={clearToast}

src/components/ContentPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect, useRef } from 'react'
+import React, { useMemo, useState, useEffect, useRef, useCallback } from 'react'
 import ReactPlayer from 'react-player'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -6,9 +6,10 @@ import rehypeRaw from 'rehype-raw'
 import rehypePrism from 'rehype-prism-plus'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import 'prismjs/themes/prism-tomorrow.css'
-import { faSpinner, faCheckCircle, faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner, faCheckCircle, faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare, faSearch } from '@fortawesome/free-solid-svg-icons'
+import { ContentSkeleton } from './Skeletons'
 import { nip19 } from 'nostr-tools'
-import { getNostrUrl } from '../config/nostrGateways'
+import { getNostrUrl, getSearchUrl } from '../config/nostrGateways'
 import { RELAYS } from '../config/relays'
 import { RelayPool } from 'applesauce-relay'
 import { IAccount } from 'applesauce-accounts'
@@ -35,6 +36,13 @@ import { classifyUrl } from '../utils/helpers'
 import { buildNativeVideoUrl } from '../utils/videoHelpers'
 import { useReadingPosition } from '../hooks/useReadingPosition'
 import { ReadingProgressIndicator } from './ReadingProgressIndicator'
+import { EventFactory } from 'applesauce-factory'
+import { Hooks } from 'applesauce-react'
+import { 
+  generateArticleIdentifier, 
+  loadReadingPosition, 
+  saveReadingPosition 
+} from '../services/readingPositionService'
 
 interface ContentPanelProps {
   loading: boolean
@@ -99,6 +107,9 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   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)
@@ -125,17 +136,200 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     onClearSelection
   })
 
+  // Get event store for reading position service
+  const eventStore = Hooks.useEventStore()
+  
   // Reading position tracking - only for text content, not videos
   const isTextContent = !loading && !!(markdown || html) && !selectedUrl?.includes('youtube') && !selectedUrl?.includes('vimeo')
-  const { isReadingComplete, progressPercentage } = useReadingPosition({
+  
+  // Generate article identifier for saving/loading position
+  const articleIdentifier = useMemo(() => {
+    if (!selectedUrl) return null
+    return generateArticleIdentifier(selectedUrl)
+  }, [selectedUrl])
+
+  // Callback to save reading position
+  const handleSavePosition = useCallback(async (position: number) => {
+    if (!activeAccount || !relayPool || !eventStore || !articleIdentifier) {
+      console.log('⏭️ [ContentPanel] Skipping save - missing requirements:', {
+        hasAccount: !!activeAccount,
+        hasRelayPool: !!relayPool,
+        hasEventStore: !!eventStore,
+        hasIdentifier: !!articleIdentifier
+      })
+      return
+    }
+    if (!settings?.syncReadingPosition) {
+      console.log('⏭️ [ContentPanel] Sync disabled in settings')
+      return
+    }
+
+    console.log('💾 [ContentPanel] Saving position:', Math.round(position * 100) + '%', 'for article:', selectedUrl?.slice(0, 50))
+
+    try {
+      const factory = new EventFactory({ signer: activeAccount })
+      await saveReadingPosition(
+        relayPool,
+        eventStore,
+        factory,
+        articleIdentifier,
+        {
+          position,
+          timestamp: Math.floor(Date.now() / 1000),
+          scrollTop: window.pageYOffset || document.documentElement.scrollTop
+        }
+      )
+    } catch (error) {
+      console.error('❌ [ContentPanel] Failed to save reading position:', error)
+    }
+  }, [activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, selectedUrl])
+
+  const { isReadingComplete, progressPercentage, saveNow } = useReadingPosition({
     enabled: isTextContent,
-    onReadingComplete: () => {
-      // Optional: Auto-mark as read when reading is complete
-      if (activeAccount && !isMarkedAsRead) {
-        // Could trigger auto-mark as read here if desired
+    syncEnabled: settings?.syncReadingPosition,
+    onSave: handleSavePosition
+  })
+
+  // Determine if we're on a nostr-native article (/a/) or external URL (/r/)
+  const isNostrArticle = selectedUrl && selectedUrl.startsWith('nostr:')
+
+  // Define handleMarkAsRead with useCallback to use in auto-mark effect
+  const handleMarkAsRead = useCallback(() => {
+    if (!activeAccount || !relayPool || isMarkedAsRead) {
+      return
+    }
+
+    // Instantly update UI with checkmark animation
+    setIsMarkedAsRead(true)
+    setShowCheckAnimation(true)
+
+    // Reset animation after it completes (2.5s for full fancy animation)
+    setTimeout(() => {
+      setShowCheckAnimation(false)
+    }, 2500)
+
+    // Fire-and-forget: publish in background without blocking UI
+    ;(async () => {
+      try {
+        if (isNostrArticle && currentArticle) {
+          await createEventReaction(
+            currentArticle.id,
+            currentArticle.pubkey,
+            currentArticle.kind,
+            activeAccount,
+            relayPool
+          )
+          console.log('✅ Marked nostr article as read')
+        } else if (selectedUrl) {
+          await createWebsiteReaction(
+            selectedUrl,
+            activeAccount,
+            relayPool
+          )
+          console.log('✅ Marked website as read')
+        }
+      } catch (error) {
+        console.error('Failed to mark as read:', error)
+        // Revert UI state on error
+        setIsMarkedAsRead(false)
+      }
+    })()
+  }, [activeAccount, relayPool, isMarkedAsRead, isNostrArticle, currentArticle, selectedUrl])
+
+  // Auto-mark as read when reaching 100% for 2 seconds
+  useEffect(() => {
+    if (!settings?.autoMarkAsReadAt100 || isMarkedAsRead || !activeAccount || !relayPool) {
+      return
+    }
+
+    // Only trigger when progress is exactly 100%
+    if (progressPercentage === 100) {
+      console.log('📍 [ContentPanel] Progress at 100%, starting 2-second timer for auto-mark')
+      
+      const timer = setTimeout(() => {
+        console.log('✅ [ContentPanel] Auto-marking as read after 2 seconds at 100%')
+        handleMarkAsRead()
+      }, 2000)
+
+      return () => {
+        console.log('⏹️ [ContentPanel] Canceling auto-mark timer (progress changed or unmounting)')
+        clearTimeout(timer)
       }
     }
-  })
+  }, [progressPercentage, settings?.autoMarkAsReadAt100, isMarkedAsRead, activeAccount, relayPool, handleMarkAsRead])
+
+  // Load saved reading position when article loads
+  useEffect(() => {
+    if (!isTextContent || !activeAccount || !relayPool || !eventStore || !articleIdentifier) {
+      console.log('⏭️ [ContentPanel] Skipping position restore - missing requirements:', {
+        isTextContent,
+        hasAccount: !!activeAccount,
+        hasRelayPool: !!relayPool,
+        hasEventStore: !!eventStore,
+        hasIdentifier: !!articleIdentifier
+      })
+      return
+    }
+    if (!settings?.syncReadingPosition) {
+      console.log('⏭️ [ContentPanel] Sync disabled - not restoring position')
+      return
+    }
+
+    console.log('📖 [ContentPanel] Loading position for article:', selectedUrl?.slice(0, 50))
+
+    const loadPosition = async () => {
+      try {
+        const savedPosition = await loadReadingPosition(
+          relayPool,
+          eventStore,
+          activeAccount.pubkey,
+          articleIdentifier
+        )
+
+        if (savedPosition && savedPosition.position > 0.05 && savedPosition.position < 1) {
+          console.log('🎯 [ContentPanel] Restoring position:', Math.round(savedPosition.position * 100) + '%')
+          
+          // Only auto-scroll if the setting is enabled (default: true)
+          if (settings?.autoScrollToPosition !== false) {
+            // Wait for content to be fully rendered before scrolling
+            setTimeout(() => {
+              const documentHeight = document.documentElement.scrollHeight
+              const windowHeight = window.innerHeight
+              const scrollTop = savedPosition.position * (documentHeight - windowHeight)
+              
+              window.scrollTo({
+                top: scrollTop,
+                behavior: 'smooth'
+              })
+              
+              console.log('✅ [ContentPanel] Restored to position:', Math.round(savedPosition.position * 100) + '%', 'scrollTop:', scrollTop)
+            }, 500) // Give content time to render
+          } else {
+            console.log('⏭️ [ContentPanel] Auto-scroll disabled in settings')
+          }
+        } else if (savedPosition) {
+          if (savedPosition.position === 1) {
+            console.log('✅ [ContentPanel] Article completed (100%), starting from top')
+          } else {
+            console.log('⏭️ [ContentPanel] Position too early (<5%):', Math.round(savedPosition.position * 100) + '%')
+          }
+        }
+      } catch (error) {
+        console.error('❌ [ContentPanel] Failed to load reading position:', error)
+      }
+    }
+
+    loadPosition()
+  }, [isTextContent, activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, settings?.autoScrollToPosition, selectedUrl])
+
+  // Save position before unmounting or changing article
+  useEffect(() => {
+    return () => {
+      if (saveNow) {
+        saveNow()
+      }
+    }
+  }, [saveNow, selectedUrl])
 
   // Close menu when clicking outside
   useEffect(() => {
@@ -160,6 +354,35 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     }
   }, [showArticleMenu, showVideoMenu, showExternalMenu])
 
+  // Check available space and position menu upward if needed
+  useEffect(() => {
+    const checkMenuPosition = (menuRef: React.RefObject<HTMLDivElement>, setOpenUpward: (value: boolean) => void) => {
+      if (!menuRef.current) return
+
+      const menuWrapper = menuRef.current
+      const menuElement = menuWrapper.querySelector('.article-menu') as HTMLElement
+      if (!menuElement) return
+
+      const rect = menuWrapper.getBoundingClientRect()
+      const viewportHeight = window.innerHeight
+      const spaceBelow = viewportHeight - rect.bottom
+      const menuHeight = menuElement.offsetHeight || 300 // estimate if not rendered yet
+
+      // Open upward if there's not enough space below (with 20px buffer)
+      setOpenUpward(spaceBelow < menuHeight + 20 && rect.top > menuHeight)
+    }
+
+    if (showArticleMenu) {
+      checkMenuPosition(articleMenuRef, setArticleMenuOpenUpward)
+    }
+    if (showVideoMenu) {
+      checkMenuPosition(videoMenuRef, setVideoMenuOpenUpward)
+    }
+    if (showExternalMenu) {
+      checkMenuPosition(externalMenuRef, setExternalMenuOpenUpward)
+    }
+  }, [showArticleMenu, showVideoMenu, showExternalMenu])
+
   const readingStats = useMemo(() => {
     const content = markdown || html || ''
     if (!content) return null
@@ -169,8 +392,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
   const hasHighlights = relevantHighlights.length > 0
 
-  // 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
@@ -217,9 +438,15 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       relays: relayHints
     })
 
+    // Check for source URL in 'r' tags
+    const sourceUrl = currentArticle.tags.find(t => t[0] === 'r')?.[1]
+
     return {
       portal: getNostrUrl(naddr),
-      native: `nostr:${naddr}`
+      native: `nostr:${naddr}`,
+      naddr,
+      sourceUrl,
+      borisUrl: `${window.location.origin}/a/${naddr}`
     }
   }
 
@@ -244,6 +471,73 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     }
     setShowArticleMenu(false)
   }
+
+  const handleShareBoris = async () => {
+    try {
+      if (!articleLinks) return
+      
+      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: title || 'Article', 
+          url: articleLinks.borisUrl 
+        })
+      } else {
+        await navigator.clipboard.writeText(articleLinks.borisUrl)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowArticleMenu(false)
+    }
+  }
+
+  const handleShareOriginal = async () => {
+    try {
+      if (!articleLinks?.sourceUrl) return
+      
+      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: title || 'Article', 
+          url: articleLinks.sourceUrl 
+        })
+      } else {
+        await navigator.clipboard.writeText(articleLinks.sourceUrl)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowArticleMenu(false)
+    }
+  }
+
+  const handleCopyBoris = async () => {
+    try {
+      if (!articleLinks) return
+      await navigator.clipboard.writeText(articleLinks.borisUrl)
+    } catch (e) {
+      console.warn('Copy failed', e)
+    } finally {
+      setShowArticleMenu(false)
+    }
+  }
+
+  const handleCopyOriginal = async () => {
+    try {
+      if (!articleLinks?.sourceUrl) return
+      await navigator.clipboard.writeText(articleLinks.sourceUrl)
+    } catch (e) {
+      console.warn('Copy failed', e)
+    } finally {
+      setShowArticleMenu(false)
+    }
+  }
+
+  const handleOpenSearch = () => {
+    if (articleLinks) {
+      window.open(getSearchUrl(articleLinks.naddr), '_blank', 'noopener,noreferrer')
+    }
+    setShowArticleMenu(false)
+  }
   
   // Video actions
   const handleOpenVideoExternal = () => {
@@ -306,10 +600,16 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
   const handleShareExternalUrl = 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 || 'Article', url: selectedUrl })
-      } else if (selectedUrl) {
-        await navigator.clipboard.writeText(selectedUrl)
+      if (!selectedUrl) return
+      const borisUrl = `${window.location.origin}/r/${encodeURIComponent(selectedUrl)}`
+      
+      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: title || 'Article', 
+          url: borisUrl 
+        })
+      } else {
+        await navigator.clipboard.writeText(borisUrl)
       }
     } catch (e) {
       console.warn('Share failed', e)
@@ -317,6 +617,13 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       setShowExternalMenu(false)
     }
   }
+
+  const handleSearchExternalUrl = () => {
+    if (selectedUrl) {
+      window.open(getSearchUrl(selectedUrl), '_blank', 'noopener,noreferrer')
+    }
+    setShowExternalMenu(false)
+  }
   
   // Check if article is already marked as read when URL/article changes
   useEffect(() => {
@@ -353,48 +660,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
     checkReadStatus()
   }, [selectedUrl, currentArticle, activeAccount, relayPool, isNostrArticle])
-  
-  const handleMarkAsRead = () => {
-    if (!activeAccount || !relayPool || isMarkedAsRead) {
-      return
-    }
-
-    // Instantly update UI with checkmark animation
-    setIsMarkedAsRead(true)
-    setShowCheckAnimation(true)
-
-    // Reset animation after it completes
-    setTimeout(() => {
-      setShowCheckAnimation(false)
-    }, 600)
-
-    // Fire-and-forget: publish in background without blocking UI
-    ;(async () => {
-      try {
-        if (isNostrArticle && currentArticle) {
-          await createEventReaction(
-            currentArticle.id,
-            currentArticle.pubkey,
-            currentArticle.kind,
-            activeAccount,
-            relayPool
-          )
-          console.log('✅ Marked nostr article as read')
-        } else if (selectedUrl) {
-          await createWebsiteReaction(
-            selectedUrl,
-            activeAccount,
-            relayPool
-          )
-          console.log('✅ Marked website as read')
-        }
-      } catch (error) {
-        console.error('Failed to mark as read:', error)
-        // Revert UI state on error
-        setIsMarkedAsRead(false)
-      }
-    })()
-  }
 
   if (!selectedUrl) {
     return (
@@ -406,10 +671,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
   if (loading) {
     return (
-      <div className="reader loading">
-        <div className="loading-spinner">
-          <FontAwesomeIcon icon={faSpinner} spin />
-        </div>
+      <div className="reader" aria-busy="true">
+        <ContentSkeleton />
       </div>
     )
   }
@@ -502,7 +765,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                 <FontAwesomeIcon icon={faEllipsisH} />
               </button>
               {showVideoMenu && (
-                <div className="article-menu">
+                <div className={`article-menu ${videoMenuOpenUpward ? 'open-upward' : ''}`}>
                   <button className="article-menu-item" onClick={handleOpenVideoExternal}>
                     <FontAwesomeIcon icon={faExternalLinkAlt} />
                     <span>Open Link</span>
@@ -583,13 +846,13 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                 </button>
                 
                 {showExternalMenu && (
-                  <div className="article-menu">
+                  <div className={`article-menu ${externalMenuOpenUpward ? 'open-upward' : ''}`}>
                     <button
                       className="article-menu-item"
-                      onClick={handleOpenExternalUrl}
+                      onClick={handleShareExternalUrl}
                     >
-                      <FontAwesomeIcon icon={faExternalLinkAlt} />
-                      <span>Open Original URL</span>
+                      <FontAwesomeIcon icon={faShare} />
+                      <span>Share</span>
                     </button>
                     <button
                       className="article-menu-item"
@@ -600,10 +863,17 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                     </button>
                     <button
                       className="article-menu-item"
-                      onClick={handleShareExternalUrl}
+                      onClick={handleOpenExternalUrl}
                     >
-                      <FontAwesomeIcon icon={faShare} />
-                      <span>Share</span>
+                      <FontAwesomeIcon icon={faExternalLinkAlt} />
+                      <span>Open Original</span>
+                    </button>
+                    <button
+                      className="article-menu-item"
+                      onClick={handleSearchExternalUrl}
+                    >
+                      <FontAwesomeIcon icon={faSearch} />
+                      <span>Search</span>
                     </button>
                   </div>
                 )}
@@ -624,13 +894,52 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                 </button>
                 
                 {showArticleMenu && (
-                  <div className="article-menu">
+                  <div className={`article-menu ${articleMenuOpenUpward ? 'open-upward' : ''}`}>
+                    <button
+                      className="article-menu-item"
+                      onClick={handleShareBoris}
+                    >
+                      <FontAwesomeIcon icon={faShare} />
+                      <span>Share</span>
+                    </button>
+                    {articleLinks.sourceUrl && (
+                      <button
+                        className="article-menu-item"
+                        onClick={handleShareOriginal}
+                      >
+                        <FontAwesomeIcon icon={faShare} />
+                        <span>Share Original</span>
+                      </button>
+                    )}
+                    <button
+                      className="article-menu-item"
+                      onClick={handleCopyBoris}
+                    >
+                      <FontAwesomeIcon icon={faCopy} />
+                      <span>Copy Link</span>
+                    </button>
+                    {articleLinks.sourceUrl && (
+                      <button
+                        className="article-menu-item"
+                        onClick={handleCopyOriginal}
+                      >
+                        <FontAwesomeIcon icon={faCopy} />
+                        <span>Copy Original</span>
+                      </button>
+                    )}
+                    <button
+                      className="article-menu-item"
+                      onClick={handleOpenSearch}
+                    >
+                      <FontAwesomeIcon icon={faSearch} />
+                      <span>Search</span>
+                    </button>
                     <button
                       className="article-menu-item"
                       onClick={handleOpenPortal}
                     >
                       <FontAwesomeIcon icon={faExternalLinkAlt} />
-                      <span>Open on Nostr</span>
+                      <span>Open with njump</span>
                     </button>
                     <button
                       className="article-menu-item"

src/components/Explore.tsx

@@ -1,29 +1,40 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faExclamationCircle, faNewspaper, faPenToSquare, faHighlighter } from '@fortawesome/free-solid-svg-icons'
+import { faNewspaper, faHighlighter, faUser, faUserGroup, faNetworkWired, faArrowsRotate, faSpinner } from '@fortawesome/free-solid-svg-icons'
+import IconButton from './IconButton'
+import { BlogPostSkeleton, HighlightSkeleton } from './Skeletons'
 import { Hooks } from 'applesauce-react'
 import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
 import { nip19 } from 'nostr-tools'
 import { useNavigate } from 'react-router-dom'
 import { fetchContacts } from '../services/contactService'
 import { fetchBlogPostsFromAuthors, BlogPostPreview } from '../services/exploreService'
 import { fetchHighlightsFromAuthors } from '../services/highlightService'
+import { fetchProfiles } from '../services/profileService'
+import { fetchNostrverseBlogPosts, fetchNostrverseHighlights } from '../services/nostrverseService'
 import { Highlight } from '../types/highlights'
+import { UserSettings } from '../services/settingsService'
 import BlogPostCard from './BlogPostCard'
 import { HighlightItem } from './HighlightItem'
 import { getCachedPosts, upsertCachedPost, setCachedPosts, getCachedHighlights, upsertCachedHighlight, setCachedHighlights } from '../services/exploreCache'
-import { usePullToRefresh } from '../hooks/usePullToRefresh'
-import PullToRefreshIndicator from './PullToRefreshIndicator'
+import { usePullToRefresh } from 'use-pull-to-refresh'
+import RefreshIndicator from './RefreshIndicator'
 import { classifyHighlights } from '../utils/highlightClassification'
+import { HighlightVisibility } from './HighlightsPanel'
+import { loadReadingPosition, generateArticleIdentifier } from '../services/readingPositionService'
+import { fetchReadArticles } from '../services/libraryService'
 
 interface ExploreProps {
   relayPool: RelayPool
+  eventStore: IEventStore
+  settings?: UserSettings
   activeTab?: TabType
 }
 
 type TabType = 'writings' | 'highlights'
 
-const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }) => {
+const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, activeTab: propActiveTab }) => {
   const activeAccount = Hooks.useActiveAccount()
   const navigate = useNavigate()
   const [activeTab, setActiveTab] = useState<TabType>(propActiveTab || 'highlights')
@@ -31,9 +42,16 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
   const [highlights, setHighlights] = useState<Highlight[]>([])
   const [followedPubkeys, setFollowedPubkeys] = useState<Set<string>>(new Set())
   const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const exploreContainerRef = useRef<HTMLDivElement>(null)
   const [refreshTrigger, setRefreshTrigger] = useState(0)
+  const [readingPositions, setReadingPositions] = useState<Map<string, number>>(new Map())
+  const [markedAsReadIds, setMarkedAsReadIds] = useState<Set<string>>(new Set())
+  
+  // Visibility filters (defaults from settings, or friends only)
+  const [visibility, setVisibility] = useState<HighlightVisibility>({
+    nostrverse: settings?.defaultHighlightVisibilityNostrverse ?? false,
+    friends: settings?.defaultHighlightVisibilityFriends ?? true,
+    mine: settings?.defaultHighlightVisibilityMine ?? false
+  })
 
   // Update local state when prop changes
   useEffect(() => {
@@ -45,7 +63,6 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
   useEffect(() => {
     const loadData = async () => {
       if (!activeAccount) {
-        setError('Please log in to explore content from your friends')
         setLoading(false)
         return
       }
@@ -53,16 +70,16 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
       try {
         // show spinner but keep existing data
         setLoading(true)
-        setError(null)
 
         // Seed from in-memory cache if available to avoid empty flash
+        // Use functional update to check current state without creating dependency
         const cachedPosts = getCachedPosts(activeAccount.pubkey)
-        if (cachedPosts && cachedPosts.length > 0 && blogPosts.length === 0) {
-          setBlogPosts(cachedPosts)
+        if (cachedPosts && cachedPosts.length > 0) {
+          setBlogPosts(prev => prev.length === 0 ? cachedPosts : prev)
         }
         const cachedHighlights = getCachedHighlights(activeAccount.pubkey)
-        if (cachedHighlights && cachedHighlights.length > 0 && highlights.length === 0) {
-          setHighlights(cachedHighlights)
+        if (cachedHighlights && cachedHighlights.length > 0) {
+          setHighlights(prev => prev.length === 0 ? cachedHighlights : prev)
         }
 
         // Fetch the user's contacts (friends)
@@ -135,63 +152,161 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
           }
         )
         
-        if (contacts.size === 0) {
-          setError('You are not following anyone yet. Follow some people to see their content!')
-          setLoading(false)
-          return
-        }
+        // Always proceed to load nostrverse content even if no contacts
+        // (removed blocking error for empty contacts)
 
         // Store final followed pubkeys
         setFollowedPubkeys(contacts)
 
-        // After full contacts, do a final pass for completeness
+        // Fetch both friends content and nostrverse content in parallel
         const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
         const contactsArray = Array.from(contacts)
-        const [posts, userHighlights] = await Promise.all([
+        const [friendsPosts, friendsHighlights, nostrversePosts, nostriverseHighlights] = await Promise.all([
           fetchBlogPostsFromAuthors(relayPool, contactsArray, relayUrls),
-          fetchHighlightsFromAuthors(relayPool, contactsArray)
+          fetchHighlightsFromAuthors(relayPool, contactsArray),
+          fetchNostrverseBlogPosts(relayPool, relayUrls, 50),
+          fetchNostrverseHighlights(relayPool, 100)
         ])
 
-        if (posts.length === 0 && userHighlights.length === 0) {
-          setError('No content found from your friends yet')
+        // Merge and deduplicate all posts
+        const allPosts = [...friendsPosts, ...nostrversePosts]
+        const postsByKey = new Map<string, BlogPostPreview>()
+        for (const post of allPosts) {
+          const key = `${post.author}:${post.event.tags.find(t => t[0] === 'd')?.[1] || ''}`
+          const existing = postsByKey.get(key)
+          if (!existing || post.event.created_at > existing.event.created_at) {
+            postsByKey.set(key, post)
+          }
+        }
+        const uniquePosts = Array.from(postsByKey.values()).sort((a, b) => {
+          const timeA = a.published || a.event.created_at
+          const timeB = b.published || b.event.created_at
+          return timeB - timeA
+        })
+
+        // Merge and deduplicate all highlights
+        const allHighlights = [...friendsHighlights, ...nostriverseHighlights]
+        const highlightsByKey = new Map<string, Highlight>()
+        for (const highlight of allHighlights) {
+          highlightsByKey.set(highlight.id, highlight)
+        }
+        const uniqueHighlights = Array.from(highlightsByKey.values()).sort((a, b) => b.created_at - a.created_at)
+
+        // Fetch profiles for all blog post authors to cache them
+        if (uniquePosts.length > 0) {
+          const authorPubkeys = Array.from(new Set(uniquePosts.map(p => p.author)))
+          fetchProfiles(relayPool, eventStore, authorPubkeys, settings).catch(err => {
+            console.error('Failed to fetch author profiles:', err)
+          })
         }
 
-        setBlogPosts((prev) => {
-          const byId = new Map(prev.map(p => [p.event.id, p]))
-          for (const post of posts) byId.set(post.event.id, post)
-          const merged = Array.from(byId.values()).sort((a, b) => {
-            const timeA = a.published || a.event.created_at
-            const timeB = b.published || b.event.created_at
-            return timeB - timeA
-          })
-          setCachedPosts(activeAccount.pubkey, merged)
-          return merged
-        })
+        // No blocking errors - let empty states handle messaging
+        setBlogPosts(uniquePosts)
+        setCachedPosts(activeAccount.pubkey, uniquePosts)
 
-        setHighlights((prev) => {
-          const byId = new Map(prev.map(h => [h.id, h]))
-          for (const highlight of userHighlights) byId.set(highlight.id, highlight)
-          const merged = Array.from(byId.values()).sort((a, b) => b.created_at - a.created_at)
-          setCachedHighlights(activeAccount.pubkey, merged)
-          return merged
-        })
+        setHighlights(uniqueHighlights)
+        setCachedHighlights(activeAccount.pubkey, uniqueHighlights)
       } catch (err) {
         console.error('Failed to load data:', err)
-        setError('Failed to load content. Please try again.')
+        // No blocking error - user can pull-to-refresh
       } finally {
         setLoading(false)
       }
     }
 
     loadData()
-  }, [relayPool, activeAccount, blogPosts.length, highlights.length, refreshTrigger])
+  }, [relayPool, activeAccount, refreshTrigger, eventStore, settings])
+
+  // Fetch marked-as-read articles
+  useEffect(() => {
+    const loadMarkedAsRead = async () => {
+      if (!activeAccount || !eventStore) {
+        return
+      }
+
+      try {
+        const readArticles = await fetchReadArticles(relayPool, activeAccount.pubkey)
+        
+        // Create a set of article IDs that are marked as read
+        const markedArticleIds = new Set<string>()
+        
+        // For each read article, add both event ID and coordinate format
+        for (const readArticle of readArticles) {
+          // Add the event ID directly
+          markedArticleIds.add(readArticle.id)
+          
+          // For nostr-native articles (kind:7 reactions), also add the coordinate format
+          if (readArticle.eventId && readArticle.eventAuthor && readArticle.eventKind) {
+            // Try to get the event from the eventStore to find the 'd' tag
+            const event = eventStore.getEvent(readArticle.eventId)
+            if (event) {
+              const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+              const coordinate = `${event.kind}:${event.pubkey}:${dTag}`
+              markedArticleIds.add(coordinate)
+            }
+          }
+        }
+        
+        setMarkedAsReadIds(markedArticleIds)
+      } catch (error) {
+        console.warn('⚠️ [Explore] Failed to load marked-as-read articles:', error)
+      }
+    }
+
+    loadMarkedAsRead()
+  }, [relayPool, activeAccount, eventStore])
+
+  // Load reading positions for blog posts
+  useEffect(() => {
+    const loadPositions = async () => {
+      if (!activeAccount || !eventStore || blogPosts.length === 0 || !settings?.syncReadingPosition) {
+        return
+      }
+
+      const positions = new Map<string, number>()
+
+      await Promise.all(
+        blogPosts.map(async (post) => {
+          try {
+            const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
+            const naddr = nip19.naddrEncode({
+              kind: 30023,
+              pubkey: post.author,
+              identifier: dTag
+            })
+            const articleUrl = `nostr:${naddr}`
+            const identifier = generateArticleIdentifier(articleUrl)
+
+            const savedPosition = await loadReadingPosition(
+              relayPool,
+              eventStore,
+              activeAccount.pubkey,
+              identifier
+            )
+
+            if (savedPosition && savedPosition.position > 0) {
+              positions.set(post.event.id, savedPosition.position)
+            }
+          } catch (error) {
+            console.warn('⚠️ [Explore] Failed to load reading position for post:', error)
+          }
+        })
+      )
+
+      setReadingPositions(positions)
+    }
+
+    loadPositions()
+  }, [blogPosts, activeAccount, relayPool, eventStore, settings?.syncReadingPosition])
 
   // Pull-to-refresh
-  const pullToRefreshState = usePullToRefresh(exploreContainerRef, {
+  const { isRefreshing, pullPosition } = usePullToRefresh({
     onRefresh: () => {
       setRefreshTrigger(prev => prev + 1)
     },
-    isRefreshing: loading
+    maximumPullLength: 240,
+    refreshThreshold: 80,
+    isDisabled: !activeAccount
   })
 
   const getPostUrl = (post: BlogPostPreview) => {
@@ -208,64 +323,90 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
     return `/a/${naddr}`
   }
 
-  const handleHighlightClick = (highlightId: string) => {
-    const highlight = highlights.find(h => h.id === highlightId)
-    if (!highlight) return
 
-    // For nostr-native articles
-    if (highlight.eventReference) {
-      // Convert eventReference to naddr
-      if (highlight.eventReference.includes(':')) {
-        const parts = highlight.eventReference.split(':')
-        const kind = parseInt(parts[0])
-        const pubkey = parts[1]
-        const identifier = parts[2] || ''
-        
-        const naddr = nip19.naddrEncode({
-          kind,
-          pubkey,
-          identifier
-        })
-        navigate(`/a/${naddr}`, { state: { highlightId, openHighlights: true } })
-      } else {
-        // Already an naddr
-        navigate(`/a/${highlight.eventReference}`, { state: { highlightId, openHighlights: true } })
-      }
-    } 
-    // For web URLs
-    else if (highlight.urlReference) {
-      navigate(`/r/${encodeURIComponent(highlight.urlReference)}`, { state: { highlightId, openHighlights: true } })
-    }
-  }
-
-  // Classify highlights with levels based on user context
+  // Classify highlights with levels based on user context and apply visibility filters
   const classifiedHighlights = useMemo(() => {
-    return classifyHighlights(highlights, activeAccount?.pubkey, followedPubkeys)
-  }, [highlights, activeAccount?.pubkey, followedPubkeys])
+    const classified = classifyHighlights(highlights, activeAccount?.pubkey, followedPubkeys)
+    return classified.filter(h => {
+      if (h.level === 'mine' && !visibility.mine) return false
+      if (h.level === 'friends' && !visibility.friends) return false
+      if (h.level === 'nostrverse' && !visibility.nostrverse) return false
+      return true
+    })
+  }, [highlights, activeAccount?.pubkey, followedPubkeys, visibility])
+
+  // Filter blog posts by future dates and visibility, and add level classification
+  const filteredBlogPosts = useMemo(() => {
+    const maxFutureTime = Date.now() / 1000 + (24 * 60 * 60) // 1 day from now
+    return blogPosts
+      .filter(post => {
+        // Filter out future dates
+        const publishedTime = post.published || post.event.created_at
+        if (publishedTime > maxFutureTime) return false
+        
+        // Apply visibility filters
+        const isMine = activeAccount && post.author === activeAccount.pubkey
+        const isFriend = followedPubkeys.has(post.author)
+        const isNostrverse = !isMine && !isFriend
+        
+        if (isMine && !visibility.mine) return false
+        if (isFriend && !visibility.friends) return false
+        if (isNostrverse && !visibility.nostrverse) return false
+        
+        return true
+      })
+      .map(post => {
+        // Add level classification
+        const isMine = activeAccount && post.author === activeAccount.pubkey
+        const isFriend = followedPubkeys.has(post.author)
+        const level: 'mine' | 'friends' | 'nostrverse' = isMine ? 'mine' : isFriend ? 'friends' : 'nostrverse'
+        return { ...post, level }
+      })
+  }, [blogPosts, activeAccount, followedPubkeys, visibility])
 
   const renderTabContent = () => {
     switch (activeTab) {
       case 'writings':
-        return blogPosts.length === 0 ? (
-          <div className="explore-empty" style={{ gridColumn: '1/-1', textAlign: 'center', color: 'var(--text-secondary)' }}>
-            <p>No blog posts found yet.</p>
+        if (showSkeletons) {
+          return (
+            <div className="explore-grid">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <BlogPostSkeleton key={i} />
+              ))}
+            </div>
+          )
+        }
+        return filteredBlogPosts.length === 0 ? (
+          <div className="explore-loading" style={{ gridColumn: '1/-1', display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            <FontAwesomeIcon icon={faSpinner} spin size="2x" />
           </div>
         ) : (
           <div className="explore-grid">
-            {blogPosts.map((post) => (
+            {filteredBlogPosts.map((post) => (
               <BlogPostCard
                 key={`${post.author}:${post.event.tags.find(t => t[0] === 'd')?.[1]}`}
                 post={post}
                 href={getPostUrl(post)}
+                level={post.level}
+                readingProgress={markedAsReadIds.has(post.event.id) ? 1.0 : readingPositions.get(post.event.id)}
               />
             ))}
           </div>
         )
 
       case 'highlights':
+        if (showSkeletons) {
+          return (
+            <div className="explore-grid">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <HighlightSkeleton key={i} />
+              ))}
+            </div>
+          )
+        }
         return classifiedHighlights.length === 0 ? (
-          <div className="explore-empty" style={{ gridColumn: '1/-1', textAlign: 'center', color: 'var(--text-secondary)' }}>
-            <p>No highlights yet. Your friends should start highlighting content!</p>
+          <div className="explore-loading" style={{ gridColumn: '1/-1', display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            <FontAwesomeIcon icon={faSpinner} spin size="2x" />
           </div>
         ) : (
           <div className="explore-grid">
@@ -274,7 +415,6 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
                 key={highlight.id}
                 highlight={highlight}
                 relayPool={relayPool}
-                onHighlightClick={handleHighlightClick}
               />
             ))}
           </div>
@@ -285,55 +425,69 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
     }
   }
 
-  // Only show full loading screen if we don't have any data yet
+  // Show content progressively - no blocking error screens
   const hasData = highlights.length > 0 || blogPosts.length > 0
-
-  if (loading && !hasData) {
-    return (
-      <div className="explore-container">
-        <div className="explore-loading">
-          <FontAwesomeIcon icon={faSpinner} spin size="2x" />
-        </div>
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="explore-container">
-        <div className="explore-error">
-          <FontAwesomeIcon icon={faExclamationCircle} size="2x" />
-          <p>{error}</p>
-        </div>
-      </div>
-    )
-  }
+  const showSkeletons = loading && !hasData
 
   return (
-    <div 
-      ref={exploreContainerRef}
-      className={`explore-container pull-to-refresh-container ${pullToRefreshState.isPulling ? 'is-pulling' : ''}`}
-    >
-      <PullToRefreshIndicator
-        isPulling={pullToRefreshState.isPulling}
-        pullDistance={pullToRefreshState.pullDistance}
-        canRefresh={pullToRefreshState.canRefresh}
-        isRefreshing={loading && pullToRefreshState.canRefresh}
+    <div className="explore-container">
+      <RefreshIndicator
+        isRefreshing={isRefreshing}
+        pullPosition={pullPosition}
       />
       <div className="explore-header">
         <h1>
           <FontAwesomeIcon icon={faNewspaper} />
           Explore
         </h1>
-        <p className="explore-subtitle">
-          Discover highlights and blog posts from your friends and others
-        </p>
         
-        {loading && hasData && (
-          <div className="explore-loading" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0' }}>
-            <FontAwesomeIcon icon={faSpinner} spin />
-          </div>
-        )}
+        {/* Visibility filters */}
+        <div className="highlight-level-toggles" style={{ marginTop: '1rem', display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
+          <IconButton
+            icon={faArrowsRotate}
+            onClick={() => setRefreshTrigger(prev => prev + 1)}
+            title="Refresh content"
+            ariaLabel="Refresh content"
+            variant="ghost"
+            spin={loading || isRefreshing}
+            disabled={loading || isRefreshing}
+          />
+          <IconButton
+            icon={faNetworkWired}
+            onClick={() => setVisibility({ ...visibility, nostrverse: !visibility.nostrverse })}
+            title="Toggle nostrverse content"
+            ariaLabel="Toggle nostrverse content"
+            variant="ghost"
+            style={{ 
+              color: visibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined,
+              opacity: visibility.nostrverse ? 1 : 0.4 
+            }}
+          />
+          <IconButton
+            icon={faUserGroup}
+            onClick={() => setVisibility({ ...visibility, friends: !visibility.friends })}
+            title={activeAccount ? "Toggle friends content" : "Login to see friends content"}
+            ariaLabel="Toggle friends content"
+            variant="ghost"
+            disabled={!activeAccount}
+            style={{ 
+              color: visibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined,
+              opacity: visibility.friends ? 1 : 0.4 
+            }}
+          />
+          <IconButton
+            icon={faUser}
+            onClick={() => setVisibility({ ...visibility, mine: !visibility.mine })}
+            title={activeAccount ? "Toggle my content" : "Login to see your content"}
+            ariaLabel="Toggle my content"
+            variant="ghost"
+            disabled={!activeAccount}
+            style={{ 
+              color: visibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined,
+              opacity: visibility.mine ? 1 : 0.4 
+            }}
+          />
+        </div>
         
         <div className="me-tabs">
           <button
@@ -349,7 +503,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
             data-tab="writings"
             onClick={() => navigate('/explore/writings')}
           >
-            <FontAwesomeIcon icon={faPenToSquare} />
+            <FontAwesomeIcon icon={faNewspaper} />
             <span className="tab-label">Writings</span>
           </button>
         </div>

src/components/HighlightItem.tsx

@@ -13,10 +13,162 @@ import { areAllRelaysLocal } from '../utils/helpers'
 import { nip19 } from 'nostr-tools'
 import { formatDateCompact } from '../utils/bookmarkUtils'
 import { createDeletionRequest } from '../services/deletionService'
-import ConfirmDialog from './ConfirmDialog'
 import { getNostrUrl } from '../config/nostrGateways'
 import CompactButton from './CompactButton'
 import { HighlightCitation } from './HighlightCitation'
+import { useNavigate } from 'react-router-dom'
+
+// Helper to detect if a URL is an image
+const isImageUrl = (url: string): boolean => {
+  try {
+    const urlObj = new URL(url)
+    const pathname = urlObj.pathname.toLowerCase()
+    return /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\?.*)?$/.test(pathname)
+  } catch {
+    return false
+  }
+}
+
+// Helper to render a nostr identifier
+const renderNostrId = (nostrUri: string, index: number): React.ReactElement => {
+  try {
+    // Remove nostr: prefix
+    const identifier = nostrUri.replace(/^nostr:/, '')
+    const decoded = nip19.decode(identifier)
+    
+    switch (decoded.type) {
+      case 'npub': {
+        const pubkey = decoded.data
+        return (
+          <a
+            key={index}
+            href={`/p/${nip19.npubEncode(pubkey)}`}
+            className="highlight-comment-link"
+            onClick={(e) => e.stopPropagation()}
+          >
+            @{pubkey.slice(0, 8)}...
+          </a>
+        )
+      }
+      case 'nprofile': {
+        const { pubkey } = decoded.data
+        const npub = nip19.npubEncode(pubkey)
+        return (
+          <a
+            key={index}
+            href={`/p/${npub}`}
+            className="highlight-comment-link"
+            onClick={(e) => e.stopPropagation()}
+          >
+            @{pubkey.slice(0, 8)}...
+          </a>
+        )
+      }
+      case 'naddr': {
+        const { kind, pubkey, identifier } = decoded.data
+        // Check if it's a blog post (kind:30023)
+        if (kind === 30023) {
+          const naddr = nip19.naddrEncode({ kind, pubkey, identifier })
+          return (
+            <a
+              key={index}
+              href={`/a/${naddr}`}
+              className="highlight-comment-link"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {identifier || 'Article'}
+            </a>
+          )
+        }
+        // For other kinds, show shortened identifier
+        return (
+          <span key={index} className="highlight-comment-nostr-id">
+            nostr:{identifier.slice(0, 12)}...
+          </span>
+        )
+      }
+      case 'note': {
+        const eventId = decoded.data
+        return (
+          <span key={index} className="highlight-comment-nostr-id">
+            note:{eventId.slice(0, 12)}...
+          </span>
+        )
+      }
+      case 'nevent': {
+        const { id } = decoded.data
+        return (
+          <span key={index} className="highlight-comment-nostr-id">
+            event:{id.slice(0, 12)}...
+          </span>
+        )
+      }
+      default:
+        // Fallback for unrecognized types
+        return (
+          <span key={index} className="highlight-comment-nostr-id">
+            {identifier.slice(0, 20)}...
+          </span>
+        )
+    }
+  } catch (error) {
+    // If decoding fails, show shortened identifier
+    const identifier = nostrUri.replace(/^nostr:/, '')
+    return (
+      <span key={index} className="highlight-comment-nostr-id">
+        {identifier.slice(0, 20)}...
+      </span>
+    )
+  }
+}
+
+// Component to render comment with links, inline images, and nostr identifiers
+const CommentContent: React.FC<{ text: string }> = ({ text }) => {
+  // Pattern to match both http(s) URLs and nostr: URIs
+  const urlPattern = /((?:https?:\/\/|nostr:)[^\s]+)/g
+  const parts = text.split(urlPattern)
+  
+  return (
+    <>
+      {parts.map((part, index) => {
+        // Handle nostr: URIs
+        if (part.startsWith('nostr:')) {
+          return renderNostrId(part, index)
+        }
+        
+        // Handle http(s) URLs
+        if (part.match(/^https?:\/\//)) {
+          if (isImageUrl(part)) {
+            return (
+              <img
+                key={index}
+                src={part}
+                alt="Comment attachment"
+                className="highlight-comment-image"
+                loading="lazy"
+              />
+            )
+          } else {
+            return (
+              <a
+                key={index}
+                href={part}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="highlight-comment-link"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {part}
+              </a>
+            )
+          }
+        }
+        
+        return <span key={index}>{part}</span>
+      })}
+    </>
+  )
+}
 
 interface HighlightWithLevel extends Highlight {
   level?: 'mine' | 'friends' | 'nostrverse'
@@ -31,6 +183,7 @@ interface HighlightItemProps {
   eventStore?: IEventStore | null
   onHighlightUpdate?: (highlight: Highlight) => void
   onHighlightDelete?: (highlightId: string) => void
+  showCitation?: boolean
 }
 
 export const HighlightItem: React.FC<HighlightItemProps> = ({ 
@@ -41,7 +194,8 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   relayPool,
   eventStore,
   onHighlightUpdate,
-  onHighlightDelete
+  onHighlightDelete,
+  showCitation = true
 }) => {
   const itemRef = useRef<HTMLDivElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
@@ -53,6 +207,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   const [showMenu, setShowMenu] = useState(false)
   
   const activeAccount = Hooks.useActiveAccount()
+  const navigate = useNavigate()
   
   // Resolve the profile of the user who made the highlight
   const profile = useEventModel(Models.ProfileModel, [highlight.pubkey])
@@ -103,25 +258,52 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     }
   }, [isSelected])
   
-  // Close menu when clicking outside
+  // Close menu and reset delete confirm when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
         setShowMenu(false)
+        setShowDeleteConfirm(false)
       }
     }
     
-    if (showMenu) {
+    if (showMenu || showDeleteConfirm) {
       document.addEventListener('mousedown', handleClickOutside)
       return () => {
         document.removeEventListener('mousedown', handleClickOutside)
       }
     }
-  }, [showMenu])
+  }, [showMenu, showDeleteConfirm])
   
   const handleItemClick = () => {
+    // If onHighlightClick is provided, use it (legacy behavior)
     if (onHighlightClick) {
       onHighlightClick(highlight.id)
+      return
+    }
+    
+    // Otherwise, navigate to the article that this highlight references
+    if (highlight.eventReference) {
+      // Parse the event reference - it can be an event ID or article coordinate (kind:pubkey:identifier)
+      const parts = highlight.eventReference.split(':')
+      
+      // If it's an article coordinate (3 parts) and kind is 30023, navigate to it
+      if (parts.length === 3) {
+        const [kind, pubkey, identifier] = parts
+        
+        if (kind === '30023') {
+          // Encode as naddr and navigate
+          const naddr = nip19.naddrEncode({
+            kind: 30023,
+            pubkey,
+            identifier
+          })
+          navigate(`/a/${naddr}`)
+        }
+      }
+    } else if (highlight.urlReference) {
+      // Navigate to external URL
+      navigate(`/r/${encodeURIComponent(highlight.urlReference)}`)
     }
   }
   
@@ -280,12 +462,12 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     }
   }
   
-  const handleCancelDelete = () => {
-    setShowDeleteConfirm(false)
-  }
-  
   const handleMenuToggle = (e: React.MouseEvent) => {
     e.stopPropagation()
+    // Reset delete confirm state when opening/closing menu
+    if (!showMenu) {
+      setShowDeleteConfirm(false)
+    }
     setShowMenu(!showMenu)
   }
   
@@ -307,6 +489,11 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     setShowDeleteConfirm(true)
   }
   
+  const handleConfirmDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    handleConfirmDelete()
+  }
+  
   return (
     <>
     <div 
@@ -314,7 +501,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
       className={`highlight-item ${isSelected ? 'selected' : ''} ${highlight.level ? `level-${highlight.level}` : ''}`} 
       data-highlight-id={highlight.id}
       onClick={handleItemClick}
-      style={{ cursor: onHighlightClick ? 'pointer' : 'default' }}
+      style={{ cursor: (onHighlightClick || highlight.eventReference || highlight.urlReference) ? 'pointer' : 'default' }}
     >
       <div className="highlight-header">
         <CompactButton
@@ -343,15 +530,19 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
           {highlight.content}
         </blockquote>
         
-        <HighlightCitation
-          highlight={highlight}
-          relayPool={relayPool}
-        />
+        {showCitation && (
+          <HighlightCitation
+            highlight={highlight}
+            relayPool={relayPool}
+          />
+        )}
         
         {highlight.comment && (
           <div className="highlight-comment">
             <FontAwesomeIcon icon={faComments} flip="horizontal" className="highlight-comment-icon" />
-            {highlight.comment}
+            <div className="highlight-comment-text">
+              <CommentContent text={highlight.comment} />
+            </div>
           </div>
         )}
         
@@ -375,6 +566,33 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
           </div>
           
           <div className="highlight-menu-wrapper" ref={menuRef}>
+            {showDeleteConfirm && canDelete && (
+              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginRight: '0.5rem' }}>
+                <span style={{ fontSize: '0.875rem', color: 'rgb(220 38 38)', fontWeight: 500 }}>Confirm?</span>
+                <button
+                  onClick={handleConfirmDeleteClick}
+                  disabled={isDeleting}
+                  title="Confirm deletion"
+                  style={{ 
+                    color: 'rgb(220 38 38)',
+                    background: 'rgba(220, 38, 38, 0.1)',
+                    border: '1px solid rgb(220 38 38)',
+                    borderRadius: '4px',
+                    padding: '0.375rem',
+                    cursor: isDeleting ? 'not-allowed' : 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minWidth: '33px',
+                    minHeight: '33px',
+                    transition: 'all 0.2s'
+                  }}
+                >
+                  <FontAwesomeIcon icon={isDeleting ? faSpinner : faTrash} spin={isDeleting} />
+                </button>
+              </div>
+            )}
+            
             <CompactButton
               icon={faEllipsisH}
               onClick={handleMenuToggle}
@@ -388,7 +606,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
                   onClick={handleOpenPortal}
                 >
                   <FontAwesomeIcon icon={faExternalLinkAlt} />
-                  <span>Open on Nostr</span>
+                  <span>Open with njump</span>
                 </button>
                 <button
                   className="highlight-menu-item"
@@ -413,17 +631,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         </div>
       </div>
     </div>
-    
-    <ConfirmDialog
-      isOpen={showDeleteConfirm}
-      title="Delete Highlight?"
-      message="This will request deletion of your highlight. It may still be visible on some relays that don't honor deletion requests."
-      confirmText="Delete"
-      cancelText="Cancel"
-      variant="danger"
-      onConfirm={handleConfirmDelete}
-      onCancel={handleCancelDelete}
-    />
     </>
   )
 }

src/components/HighlightsPanel.tsx

@@ -1,16 +1,17 @@
-import React, { useState, useRef } from 'react'
+import React, { useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHighlighter } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { HighlightItem } from './HighlightItem'
 import { useFilteredHighlights } from '../hooks/useFilteredHighlights'
-import { usePullToRefresh } from '../hooks/usePullToRefresh'
+import { usePullToRefresh } from 'use-pull-to-refresh'
 import HighlightsPanelCollapsed from './HighlightsPanel/HighlightsPanelCollapsed'
 import HighlightsPanelHeader from './HighlightsPanel/HighlightsPanelHeader'
-import PullToRefreshIndicator from './PullToRefreshIndicator'
+import RefreshIndicator from './RefreshIndicator'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { UserSettings } from '../services/settingsService'
+import { HighlightSkeleton } from './Skeletons'
 
 export interface HighlightVisibility {
   nostrverse: boolean
@@ -59,7 +60,6 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
 }) => {
   const [showHighlights, setShowHighlights] = useState(true)
   const [localHighlights, setLocalHighlights] = useState(highlights)
-  const highlightsListRef = useRef<HTMLDivElement>(null)
   
   const handleToggleHighlights = () => {
     const newValue = !showHighlights
@@ -68,14 +68,15 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   }
 
   // Pull-to-refresh for highlights
-  const pullToRefreshState = usePullToRefresh(highlightsListRef, {
+  const { isRefreshing, pullPosition } = usePullToRefresh({
     onRefresh: () => {
       if (onRefresh) {
         onRefresh()
       }
     },
-    isRefreshing: loading,
-    disabled: !onRefresh
+    maximumPullLength: 240,
+    refreshThreshold: 80,
+    isDisabled: !onRefresh
   })
   
   // Keep track of highlight updates
@@ -127,8 +128,10 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
       />
 
       {loading && filteredHighlights.length === 0 ? (
-        <div className="highlights-loading">
-          <FontAwesomeIcon icon={faHighlighter} spin />
+        <div className="highlights-list" aria-busy="true">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <HighlightSkeleton key={i} />
+          ))}
         </div>
       ) : filteredHighlights.length === 0 ? (
         <div className="highlights-empty">
@@ -141,15 +144,10 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
           </p>
         </div>
       ) : (
-        <div 
-          ref={highlightsListRef}
-          className={`highlights-list pull-to-refresh-container ${pullToRefreshState.isPulling ? 'is-pulling' : ''}`}
-        >
-          <PullToRefreshIndicator
-            isPulling={pullToRefreshState.isPulling}
-            pullDistance={pullToRefreshState.pullDistance}
-            canRefresh={pullToRefreshState.canRefresh}
-            isRefreshing={loading}
+        <div className="highlights-list">
+          <RefreshIndicator
+            isRefreshing={isRefreshing}
+            pullPosition={pullPosition}
           />
           {filteredHighlights.map((highlight) => (
             <HighlightItem
@@ -162,6 +160,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
               eventStore={eventStore}
               onHighlightUpdate={handleHighlightUpdate}
               onHighlightDelete={handleHighlightDelete}
+              showCitation={false}
             />
           ))}
         </div>

src/components/Me.tsx

@@ -1,15 +1,17 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faExclamationCircle, faHighlighter, faBookmark, faList, faThLarge, faImage, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter, faBookmark, faList, faThLarge, faImage, faPenToSquare, faLink } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
+import { BlogPostSkeleton, HighlightSkeleton, BookmarkSkeleton } from './Skeletons'
 import { RelayPool } from 'applesauce-relay'
 import { nip19 } from 'nostr-tools'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import { Highlight } from '../types/highlights'
 import { HighlightItem } from './HighlightItem'
 import { fetchHighlights } from '../services/highlightService'
 import { fetchBookmarks } from '../services/bookmarkService'
-import { fetchReadArticlesWithData } from '../services/libraryService'
+import { fetchAllReads, ReadItem } from '../services/readsService'
+import { fetchLinks } from '../services/linksService'
 import { BlogPostPreview, fetchBlogPostsFromAuthors } from '../services/exploreService'
 import { RELAYS } from '../config/relays'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
@@ -18,12 +20,18 @@ import BlogPostCard from './BlogPostCard'
 import { BookmarkItem } from './BookmarkItem'
 import IconButton from './IconButton'
 import { ViewMode } from './Bookmarks'
-import { extractUrlsFromContent } from '../services/bookmarkHelpers'
-import { getCachedMeData, setCachedMeData, updateCachedHighlights } from '../services/meCache'
+import { getCachedMeData, updateCachedHighlights } from '../services/meCache'
 import { faBooks } from '../icons/customIcons'
-import { usePullToRefresh } from '../hooks/usePullToRefresh'
-import PullToRefreshIndicator from './PullToRefreshIndicator'
-import { getProfileUrl } from '../config/nostrGateways'
+import { usePullToRefresh } from 'use-pull-to-refresh'
+import RefreshIndicator from './RefreshIndicator'
+import { groupIndividualBookmarks, hasContent } from '../utils/bookmarkUtils'
+import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
+import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
+import ReadingProgressFilters, { ReadingProgressFilterType } from './ReadingProgressFilters'
+import { filterByReadingProgress } from '../utils/readingProgressUtils'
+import { deriveReadsFromBookmarks } from '../utils/readsFromBookmarks'
+import { deriveLinksFromBookmarks } from '../utils/linksFromBookmarks'
+import { mergeReadItem } from '../utils/readItemMerge'
 
 interface MeProps {
   relayPool: RelayPool
@@ -31,11 +39,15 @@ interface MeProps {
   pubkey?: string // Optional pubkey for viewing other users' profiles
 }
 
-type TabType = 'highlights' | 'reading-list' | 'archive' | 'writings'
+type TabType = 'highlights' | 'reading-list' | 'reads' | 'links' | 'writings'
+
+// Valid reading progress filters
+const VALID_FILTERS: ReadingProgressFilterType[] = ['all', 'unopened', 'started', 'reading', 'completed']
 
 const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: propPubkey }) => {
   const activeAccount = Hooks.useActiveAccount()
   const navigate = useNavigate()
+  const { filter: urlFilter } = useParams<{ filter?: string }>()
   const [activeTab, setActiveTab] = useState<TabType>(propActiveTab || 'highlights')
   
   // Use provided pubkey or fall back to active account
@@ -43,13 +55,22 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
   const isOwnProfile = !propPubkey || (activeAccount?.pubkey === propPubkey)
   const [highlights, setHighlights] = useState<Highlight[]>([])
   const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
-  const [readArticles, setReadArticles] = useState<BlogPostPreview[]>([])
+  const [reads, setReads] = useState<ReadItem[]>([])
+  const [, setReadsMap] = useState<Map<string, ReadItem>>(new Map())
+  const [links, setLinks] = useState<ReadItem[]>([])
+  const [, setLinksMap] = useState<Map<string, ReadItem>>(new Map())
   const [writings, setWritings] = useState<BlogPostPreview[]>([])
   const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+  const [loadedTabs, setLoadedTabs] = useState<Set<TabType>>(new Set())
   const [viewMode, setViewMode] = useState<ViewMode>('cards')
-  const meContainerRef = useRef<HTMLDivElement>(null)
   const [refreshTrigger, setRefreshTrigger] = useState(0)
+  const [bookmarkFilter, setBookmarkFilter] = useState<BookmarkFilterType>('all')
+  
+  // Initialize reading progress filter from URL param
+  const initialFilter = urlFilter && VALID_FILTERS.includes(urlFilter as ReadingProgressFilterType) 
+    ? (urlFilter as ReadingProgressFilterType) 
+    : 'all'
+  const [readingProgressFilter, setReadingProgressFilter] = useState<ReadingProgressFilterType>(initialFilter)
 
   // Update local state when prop changes
   useEffect(() => {
@@ -58,77 +79,251 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
     }
   }, [propActiveTab])
 
+  // Sync filter state with URL changes
   useEffect(() => {
-    const loadData = async () => {
-      if (!viewingPubkey) {
-        setError(isOwnProfile ? 'Please log in to view your data' : 'Invalid profile')
-        setLoading(false)
-        return
+    const filterFromUrl = urlFilter && VALID_FILTERS.includes(urlFilter as ReadingProgressFilterType) 
+      ? (urlFilter as ReadingProgressFilterType) 
+      : 'all'
+    setReadingProgressFilter(filterFromUrl)
+  }, [urlFilter])
+
+  // Handler to change reading progress filter and update URL
+  const handleReadingProgressFilterChange = (filter: ReadingProgressFilterType) => {
+    setReadingProgressFilter(filter)
+    if (activeTab === 'reads') {
+      if (filter === 'all') {
+        navigate('/me/reads', { replace: true })
+      } else {
+        navigate(`/me/reads/${filter}`, { replace: true })
+      }
+    }
+  }
+
+  // Tab-specific loading functions
+  const loadHighlightsTab = async () => {
+    if (!viewingPubkey) return
+    
+    // Only show loading skeleton if tab hasn't been loaded yet
+    const hasBeenLoaded = loadedTabs.has('highlights')
+    
+    try {
+      if (!hasBeenLoaded) setLoading(true)
+      const userHighlights = await fetchHighlights(relayPool, viewingPubkey)
+      setHighlights(userHighlights)
+      setLoadedTabs(prev => new Set(prev).add('highlights'))
+    } catch (err) {
+      console.error('Failed to load highlights:', err)
+    } finally {
+      if (!hasBeenLoaded) setLoading(false)
+    }
+  }
+
+  const loadWritingsTab = async () => {
+    if (!viewingPubkey) return
+    
+    const hasBeenLoaded = loadedTabs.has('writings')
+    
+    try {
+      if (!hasBeenLoaded) setLoading(true)
+      const userWritings = await fetchBlogPostsFromAuthors(relayPool, [viewingPubkey], RELAYS)
+      setWritings(userWritings)
+      setLoadedTabs(prev => new Set(prev).add('writings'))
+    } catch (err) {
+      console.error('Failed to load writings:', err)
+    } finally {
+      if (!hasBeenLoaded) setLoading(false)
+    }
+  }
+
+  const loadReadingListTab = async () => {
+    if (!viewingPubkey || !isOwnProfile || !activeAccount) return
+    
+    const hasBeenLoaded = loadedTabs.has('reading-list')
+    
+    try {
+      if (!hasBeenLoaded) setLoading(true)
+      try {
+        await fetchBookmarks(relayPool, activeAccount, (newBookmarks) => {
+          setBookmarks(newBookmarks)
+        })
+      } catch (err) {
+        console.warn('Failed to load bookmarks:', err)
+        setBookmarks([])
+      }
+      setLoadedTabs(prev => new Set(prev).add('reading-list'))
+    } catch (err) {
+      console.error('Failed to load reading list:', err)
+    } finally {
+      if (!hasBeenLoaded) setLoading(false)
+    }
+  }
+
+  const loadReadsTab = async () => {
+    if (!viewingPubkey || !isOwnProfile || !activeAccount) return
+    
+    const hasBeenLoaded = loadedTabs.has('reads')
+    
+    try {
+      if (!hasBeenLoaded) setLoading(true)
+      
+      // Ensure bookmarks are loaded
+      let fetchedBookmarks: Bookmark[] = bookmarks
+      if (bookmarks.length === 0) {
+        try {
+          await fetchBookmarks(relayPool, activeAccount, (newBookmarks) => {
+            fetchedBookmarks = newBookmarks
+            setBookmarks(newBookmarks)
+          })
+        } catch (err) {
+          console.warn('Failed to load bookmarks:', err)
+          fetchedBookmarks = []
+        }
       }
 
-      try {
-        setLoading(true)
-        setError(null)
-
-        // Seed from cache if available to avoid empty flash (own profile only)
-        if (isOwnProfile) {
-          const cached = getCachedMeData(viewingPubkey)
-          if (cached) {
-            setHighlights(cached.highlights)
-            setBookmarks(cached.bookmarks)
-            setReadArticles(cached.readArticles)
+      // Derive reads from bookmarks immediately
+      const initialReads = deriveReadsFromBookmarks(fetchedBookmarks)
+      const initialMap = new Map(initialReads.map(item => [item.id, item]))
+      setReadsMap(initialMap)
+      setReads(initialReads)
+      setLoadedTabs(prev => new Set(prev).add('reads'))
+      if (!hasBeenLoaded) setLoading(false)
+      
+      // Background enrichment: merge reading progress and mark-as-read
+      // Only update items that are already in our map
+      fetchAllReads(relayPool, viewingPubkey, fetchedBookmarks, (item) => {
+        console.log('📈 [Reads] Enrichment item received:', {
+          id: item.id.slice(0, 20) + '...',
+          progress: item.readingProgress,
+          hasProgress: item.readingProgress !== undefined && item.readingProgress > 0
+        })
+        
+        setReadsMap(prevMap => {
+          // Only update if item exists in our current map
+          if (!prevMap.has(item.id)) {
+            console.log('⚠️ [Reads] Item not in map, skipping:', item.id.slice(0, 20) + '...')
+            return prevMap
           }
-        }
-
-        // Fetch highlights and writings (public data)
-        const [userHighlights, userWritings] = await Promise.all([
-          fetchHighlights(relayPool, viewingPubkey),
-          fetchBlogPostsFromAuthors(relayPool, [viewingPubkey], RELAYS)
-        ])
-
-        setHighlights(userHighlights)
-        setWritings(userWritings)
-
-        // Only fetch private data for own profile
-        if (isOwnProfile && activeAccount) {
-          const userReadArticles = await fetchReadArticlesWithData(relayPool, viewingPubkey)
-          setReadArticles(userReadArticles)
-
-          // Fetch bookmarks using callback pattern
-          let fetchedBookmarks: Bookmark[] = []
-          try {
-            await fetchBookmarks(relayPool, activeAccount, (newBookmarks) => {
-              fetchedBookmarks = newBookmarks
-              setBookmarks(newBookmarks)
-            })
-          } catch (err) {
-            console.warn('Failed to load bookmarks:', err)
-            setBookmarks([])
+          
+          const newMap = new Map(prevMap)
+          const merged = mergeReadItem(newMap, item)
+          if (merged) {
+            console.log('✅ [Reads] Merged progress:', item.id.slice(0, 20) + '...', item.readingProgress)
+            // Update reads array after map is updated
+            setReads(Array.from(newMap.values()))
+            return newMap
           }
+          return prevMap
+        })
+      }).catch(err => console.warn('Failed to enrich reads:', err))
+      
+    } catch (err) {
+      console.error('Failed to load reads:', err)
+      if (!hasBeenLoaded) setLoading(false)
+    }
+  }
 
-          // Update cache with all fetched data
-          setCachedMeData(viewingPubkey, userHighlights, fetchedBookmarks, userReadArticles)
-        } else {
-          setBookmarks([])
-          setReadArticles([])
+  const loadLinksTab = async () => {
+    if (!viewingPubkey || !isOwnProfile || !activeAccount) return
+    
+    const hasBeenLoaded = loadedTabs.has('links')
+    
+    try {
+      if (!hasBeenLoaded) setLoading(true)
+      
+      // Ensure bookmarks are loaded
+      let fetchedBookmarks: Bookmark[] = bookmarks
+      if (bookmarks.length === 0) {
+        try {
+          await fetchBookmarks(relayPool, activeAccount, (newBookmarks) => {
+            fetchedBookmarks = newBookmarks
+            setBookmarks(newBookmarks)
+          })
+        } catch (err) {
+          console.warn('Failed to load bookmarks:', err)
+          fetchedBookmarks = []
         }
-      } catch (err) {
-        console.error('Failed to load data:', err)
-        setError('Failed to load data. Please try again.')
-      } finally {
-        setLoading(false)
+      }
+
+      // Derive links from bookmarks immediately
+      const initialLinks = deriveLinksFromBookmarks(fetchedBookmarks)
+      const initialMap = new Map(initialLinks.map(item => [item.id, item]))
+      setLinksMap(initialMap)
+      setLinks(initialLinks)
+      setLoadedTabs(prev => new Set(prev).add('links'))
+      if (!hasBeenLoaded) setLoading(false)
+      
+      // Background enrichment: merge reading progress and mark-as-read
+      // Only update items that are already in our map
+      fetchLinks(relayPool, viewingPubkey, (item) => {
+        setLinksMap(prevMap => {
+          // Only update if item exists in our current map
+          if (!prevMap.has(item.id)) return prevMap
+          
+          const newMap = new Map(prevMap)
+          if (mergeReadItem(newMap, item)) {
+            // Update links array after map is updated
+            setLinks(Array.from(newMap.values()))
+            return newMap
+          }
+          return prevMap
+        })
+      }).catch(err => console.warn('Failed to enrich links:', err))
+      
+    } catch (err) {
+      console.error('Failed to load links:', err)
+      if (!hasBeenLoaded) setLoading(false)
+    }
+  }
+
+  // Load active tab data
+  useEffect(() => {
+    if (!viewingPubkey || !activeTab) {
+      setLoading(false)
+      return
+    }
+
+    // Load cached data immediately if available
+    if (isOwnProfile) {
+      const cached = getCachedMeData(viewingPubkey)
+      if (cached) {
+        setHighlights(cached.highlights)
+        setBookmarks(cached.bookmarks)
+        setReads(cached.reads || [])
+        setLinks(cached.links || [])
       }
     }
 
-    loadData()
-  }, [relayPool, viewingPubkey, isOwnProfile, activeAccount, refreshTrigger])
+    // Load data for active tab (refresh in background if already loaded)
+    switch (activeTab) {
+      case 'highlights':
+        loadHighlightsTab()
+        break
+      case 'writings':
+        loadWritingsTab()
+        break
+      case 'reading-list':
+        loadReadingListTab()
+        break
+      case 'reads':
+        loadReadsTab()
+        break
+      case 'links':
+        loadLinksTab()
+        break
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeTab, viewingPubkey, refreshTrigger])
 
-  // Pull-to-refresh
-  const pullToRefreshState = usePullToRefresh(meContainerRef, {
+
+  // Pull-to-refresh - reload active tab without clearing state
+  const { isRefreshing, pullPosition } = usePullToRefresh({
     onRefresh: () => {
+      // Just trigger refresh - loaders will merge new data
       setRefreshTrigger(prev => prev + 1)
     },
-    isRefreshing: loading
+    maximumPullLength: 240,
+    refreshThreshold: 80,
+    isDisabled: !viewingPubkey
   })
 
   const handleHighlightDelete = (highlightId: string) => {
@@ -152,21 +347,47 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
     return `/a/${naddr}`
   }
 
-  // Helper to check if a bookmark has either content or a URL (same logic as BookmarkList)
-  const hasContentOrUrl = (ib: IndividualBookmark) => {
-    const hasContent = ib.content && ib.content.trim().length > 0
-    
-    let hasUrl = false
-    if (ib.kind === 39701) {
-      const dTag = ib.tags?.find((t: string[]) => t[0] === 'd')?.[1]
-      hasUrl = !!dTag && dTag.trim().length > 0
-    } else {
-      const urls = extractUrlsFromContent(ib.content || '')
-      hasUrl = urls.length > 0
+  const getReadItemUrl = (item: ReadItem) => {
+    if (item.type === 'article') {
+      // ID is already in naddr format
+      return `/a/${item.id}`
+    } else if (item.url) {
+      return `/r/${encodeURIComponent(item.url)}`
+    }
+    return '#'
+  }
+
+  const convertReadItemToBlogPostPreview = (item: ReadItem): BlogPostPreview => {
+    if (item.event) {
+      return {
+        event: item.event,
+        title: item.title || 'Untitled',
+        summary: item.summary,
+        image: item.image,
+        published: item.published,
+        author: item.author || item.event.pubkey
+      }
     }
     
-    if (ib.kind === 30023) return true
-    return hasContent || hasUrl
+    // Create a mock event for external URLs
+    const mockEvent = {
+      id: item.id,
+      pubkey: item.author || '',
+      created_at: item.readingTimestamp || Math.floor(Date.now() / 1000),
+      kind: 1,
+      tags: [] as string[][],
+      content: item.title || item.url || 'Untitled',
+      sig: ''
+    } as const
+    
+    return {
+      event: mockEvent as unknown as import('nostr-tools').NostrEvent,
+      title: item.title || item.url || 'Untitled',
+      summary: item.summary,
+      image: item.image,
+      published: item.published,
+      author: item.author || ''
+    }
   }
 
   const handleSelectUrl = (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => {
@@ -188,45 +409,44 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
     }
   }
 
-  // Merge and flatten all individual bookmarks (same logic as BookmarkList)
+  // Merge and flatten all individual bookmarks
   const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
-    .filter(hasContentOrUrl)
-    .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
-
-  // Only show full loading screen if we don't have any data yet
-  const hasData = highlights.length > 0 || bookmarks.length > 0 || readArticles.length > 0 || writings.length > 0
+    .filter(hasContent)
   
-  if (loading && !hasData) {
-    return (
-      <div className="explore-container">
-        <div className="explore-loading">
-          <FontAwesomeIcon icon={faSpinner} spin size="2x" />
-        </div>
-      </div>
-    )
-  }
+  // Apply bookmark filter
+  const filteredBookmarks = filterBookmarksByType(allIndividualBookmarks, bookmarkFilter)
+  
+  const groups = groupIndividualBookmarks(filteredBookmarks)
 
-  if (error) {
-    return (
-      <div className="explore-container">
-        <div className="explore-error">
-          <FontAwesomeIcon icon={faExclamationCircle} size="2x" />
-          <p>{error}</p>
-        </div>
-      </div>
-    )
-  }
+  // Apply reading progress filter
+  const filteredReads = filterByReadingProgress(reads, readingProgressFilter)
+  const filteredLinks = filterByReadingProgress(links, readingProgressFilter)
+  const sections: Array<{ key: string; title: string; items: IndividualBookmark[] }> = [
+    { key: 'private', title: 'Private Bookmarks', items: groups.privateItems },
+    { key: 'public', title: 'Public Bookmarks', items: groups.publicItems },
+    { key: 'web', title: 'Web Bookmarks', items: groups.web },
+    { key: 'amethyst', title: 'Legacy Bookmarks', items: groups.amethyst }
+  ]
+
+  // Show content progressively - no blocking error screens
+  const hasData = highlights.length > 0 || bookmarks.length > 0 || reads.length > 0 || links.length > 0 || writings.length > 0
+  const showSkeletons = loading && !hasData
 
   const renderTabContent = () => {
     switch (activeTab) {
       case 'highlights':
-        return highlights.length === 0 ? (
-          <div className="explore-empty">
-            <p>
-              {isOwnProfile 
-                ? 'No highlights yet. Start highlighting content to see them here!'
-                : 'No highlights yet. You should shame them on nostr!'}
-            </p>
+        if (showSkeletons) {
+          return (
+            <div className="explore-grid">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <HighlightSkeleton key={i} />
+              ))}
+            </div>
+          )
+        }
+        return highlights.length === 0 && !loading ? (
+          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            No highlights yet.
           </div>
         ) : (
           <div className="highlights-list me-highlights-list">
@@ -242,23 +462,50 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
         )
 
       case 'reading-list':
-        return allIndividualBookmarks.length === 0 ? (
-          <div className="explore-empty">
-            <p>No bookmarks yet. Bookmark articles to see them here!</p>
+        if (showSkeletons) {
+          return (
+            <div className="bookmarks-list">
+              <div className={`bookmarks-grid bookmarks-${viewMode}`}>
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <BookmarkSkeleton key={i} viewMode={viewMode} />
+                ))}
+              </div>
+            </div>
+          )
+        }
+        return allIndividualBookmarks.length === 0 && !loading ? (
+          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            No bookmarks yet.
           </div>
         ) : (
           <div className="bookmarks-list">
-            <div className={`bookmarks-grid bookmarks-${viewMode}`}>
-              {allIndividualBookmarks.map((individualBookmark, index) => (
-                <BookmarkItem
-                  key={`${individualBookmark.id}-${index}`}
-                  bookmark={individualBookmark}
-                  index={index}
-                  viewMode={viewMode}
-                  onSelectUrl={handleSelectUrl}
-                />
-              ))}
-            </div>
+            {allIndividualBookmarks.length > 0 && (
+              <BookmarkFilters
+                selectedFilter={bookmarkFilter}
+                onFilterChange={setBookmarkFilter}
+              />
+            )}
+            {filteredBookmarks.length === 0 ? (
+              <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+                No bookmarks match this filter.
+              </div>
+            ) : (
+              sections.filter(s => s.items.length > 0).map(section => (
+              <div key={section.key} className="bookmarks-section">
+                <h3 className="bookmarks-section-title">{section.title}</h3>
+                <div className={`bookmarks-grid bookmarks-${viewMode}`}>
+                  {section.items.map((individualBookmark, index) => (
+                    <BookmarkItem
+                      key={`${section.key}-${individualBookmark.id}-${index}`}
+                      bookmark={individualBookmark}
+                      index={index}
+                      viewMode={viewMode}
+                      onSelectUrl={handleSelectUrl}
+                    />
+                  ))}
+                </div>
+              </div>
+            )))}
             <div className="view-mode-controls" style={{
               display: 'flex',
               justifyContent: 'center',
@@ -292,44 +539,113 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
           </div>
         )
 
-      case 'archive':
-        return readArticles.length === 0 ? (
-          <div className="explore-empty">
-            <p>No read articles yet. Mark articles as read to see them here!</p>
-          </div>
-        ) : (
-          <div className="explore-grid">
-            {readArticles.map((post) => (
-              <BlogPostCard
-                key={post.event.id}
-                post={post}
-                href={getPostUrl(post)}
-              />
-            ))}
-          </div>
+      case 'reads':
+        // Show loading skeletons only while initially loading
+        if (loading && !loadedTabs.has('reads')) {
+          return (
+            <div className="explore-grid">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <BlogPostSkeleton key={i} />
+              ))}
+            </div>
+          )
+        }
+        
+        // Show empty state if loaded but no reads
+        if (reads.length === 0 && loadedTabs.has('reads')) {
+          return (
+            <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+              No articles read yet.
+            </div>
+          )
+        }
+        
+        // Show reads with filters
+        return (
+          <>
+            <ReadingProgressFilters
+              selectedFilter={readingProgressFilter}
+              onFilterChange={handleReadingProgressFilterChange}
+            />
+            {filteredReads.length === 0 ? (
+              <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+                No articles match this filter.
+              </div>
+            ) : (
+              <div className="explore-grid">
+              {filteredReads.map((item) => (
+                <BlogPostCard
+                  key={item.id}
+                  post={convertReadItemToBlogPostPreview(item)}
+                  href={getReadItemUrl(item)}
+                  readingProgress={item.readingProgress}
+                />
+              ))}
+              </div>
+            )}
+          </>
+        )
+
+      case 'links':
+        // Show loading skeletons only while initially loading
+        if (loading && !loadedTabs.has('links')) {
+          return (
+            <div className="explore-grid">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <BlogPostSkeleton key={i} />
+              ))}
+            </div>
+          )
+        }
+        
+        // Show empty state if loaded but no links
+        if (links.length === 0 && loadedTabs.has('links')) {
+          return (
+            <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+              No links with reading progress yet.
+            </div>
+          )
+        }
+        
+        // Show links with filters
+        return (
+          <>
+            <ReadingProgressFilters
+              selectedFilter={readingProgressFilter}
+              onFilterChange={handleReadingProgressFilterChange}
+            />
+            {filteredLinks.length === 0 ? (
+              <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+                No links match this filter.
+              </div>
+            ) : (
+              <div className="explore-grid">
+              {filteredLinks.map((item) => (
+                <BlogPostCard
+                  key={item.id}
+                  post={convertReadItemToBlogPostPreview(item)}
+                  href={getReadItemUrl(item)}
+                  readingProgress={item.readingProgress}
+                />
+              ))}
+              </div>
+            )}
+          </>
         )
 
       case 'writings':
-        return writings.length === 0 ? (
-          <div className="explore-empty">
-            <p>
-              {isOwnProfile 
-                ? 'No articles written yet. Publish your first article to see it here!'
-                : (
-                  <>
-                    No articles written. You can find other stuff from this user using{' '}
-                    <a 
-                      href={viewingPubkey ? getProfileUrl(nip19.npubEncode(viewingPubkey)) : '#'} 
-                      target="_blank" 
-                      rel="noopener noreferrer"
-                      style={{ color: 'rgb(99 102 241)', textDecoration: 'underline' }}
-                    >
-                      ants
-                    </a>
-                    .
-                  </>
-                )}
-            </p>
+        if (showSkeletons) {
+          return (
+            <div className="explore-grid">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <BlogPostSkeleton key={i} />
+              ))}
+            </div>
+          )
+        }
+        return writings.length === 0 && !loading ? (
+          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            No articles written yet.
           </div>
         ) : (
           <div className="explore-grid">
@@ -349,25 +665,14 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
   }
 
   return (
-    <div 
-      ref={meContainerRef}
-      className={`explore-container pull-to-refresh-container ${pullToRefreshState.isPulling ? 'is-pulling' : ''}`}
-    >
-      <PullToRefreshIndicator
-        isPulling={pullToRefreshState.isPulling}
-        pullDistance={pullToRefreshState.pullDistance}
-        canRefresh={pullToRefreshState.canRefresh}
-        isRefreshing={loading && pullToRefreshState.canRefresh}
+    <div className="explore-container">
+      <RefreshIndicator
+        isRefreshing={isRefreshing}
+        pullPosition={pullPosition}
       />
       <div className="explore-header">
         {viewingPubkey && <AuthorCard authorPubkey={viewingPubkey} clickable={false} />}
         
-        {loading && hasData && (
-          <div className="explore-loading" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0' }}>
-            <FontAwesomeIcon icon={faSpinner} spin />
-          </div>
-        )}
-        
         <div className="me-tabs">
           <button
             className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
@@ -388,12 +693,20 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
                 <span className="tab-label">Bookmarks</span>
               </button>
               <button
-                className={`me-tab ${activeTab === 'archive' ? 'active' : ''}`}
-                data-tab="archive"
-                onClick={() => navigate('/me/archive')}
+                className={`me-tab ${activeTab === 'reads' ? 'active' : ''}`}
+                data-tab="reads"
+                onClick={() => navigate('/me/reads')}
               >
                 <FontAwesomeIcon icon={faBooks} />
-                <span className="tab-label">Archive</span>
+                <span className="tab-label">Reads</span>
+              </button>
+              <button
+                className={`me-tab ${activeTab === 'links' ? 'active' : ''}`}
+                data-tab="links"
+                onClick={() => navigate('/me/links')}
+              >
+                <FontAwesomeIcon icon={faLink} />
+                <span className="tab-label">Links</span>
               </button>
             </>
           )}

src/components/PullToRefreshIndicator.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
-
-interface PullToRefreshIndicatorProps {
-  isPulling: boolean
-  pullDistance: number
-  canRefresh: boolean
-  isRefreshing: boolean
-  threshold?: number
-}
-
-const PullToRefreshIndicator: React.FC<PullToRefreshIndicatorProps> = ({
-  isPulling,
-  pullDistance,
-  canRefresh,
-  threshold = 80
-}) => {
-  // Only show when actively pulling, not when refreshing
-  if (!isPulling) return null
-
-  const opacity = Math.min(pullDistance / threshold, 1)
-  const rotation = (pullDistance / threshold) * 180
-
-  return (
-    <div 
-      className="pull-to-refresh-indicator"
-      style={{
-        opacity,
-        transform: `translateY(${-20 + pullDistance / 2}px)`
-      }}
-    >
-      <div 
-        className="pull-to-refresh-icon"
-        style={{
-          transform: `rotate(${rotation}deg)`
-        }}
-      >
-        <FontAwesomeIcon 
-          icon={faArrowDown} 
-          style={{ color: canRefresh ? 'var(--accent-color, #3b82f6)' : 'var(--text-secondary)' }}
-        />
-      </div>
-      <div className="pull-to-refresh-text">
-        {canRefresh ? 'Release to refresh' : 'Pull to refresh'}
-      </div>
-    </div>
-  )
-}
-
-export default PullToRefreshIndicator
-

src/components/ReaderHeader.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter, faClock, faNewspaper } from '@fortawesome/free-solid-svg-icons'
 import { format } from 'date-fns'
 import { useImageCache } from '../hooks/useImageCache'
+import { useAdaptiveTextColor } from '../hooks/useAdaptiveTextColor'
 import { UserSettings } from '../services/settingsService'
 import { Highlight, HighlightLevel } from '../types/highlights'
 import { HighlightVisibility } from './HighlightsPanel'
@@ -33,7 +34,8 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   highlights = [],
   highlightVisibility = { nostrverse: true, friends: true, mine: true }
 }) => {
-  const cachedImage = useImageCache(image, settings)
+  const cachedImage = useImageCache(image)
+  const { textColor } = useAdaptiveTextColor(cachedImage)
   const formattedDate = published ? format(new Date(published * 1000), 'MMM d, yyyy') : null
   const isLongSummary = summary && summary.length > 150
   
@@ -70,13 +72,25 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
     }
   }, [highlights, highlightVisibility, settings])
   
-  if (cachedImage) {
+  // Show hero section if we have an image OR a title
+  if (cachedImage || title) {
     return (
       <>
         <div className="reader-hero-image">
-          <img src={cachedImage} alt={title || 'Article image'} />
+          {cachedImage ? (
+            <img src={cachedImage} alt={title || 'Article image'} />
+          ) : (
+            <div className="reader-hero-placeholder">
+              <FontAwesomeIcon icon={faNewspaper} />
+            </div>
+          )}
           {formattedDate && (
-            <div className="publish-date-topright">
+            <div 
+              className="publish-date-topright"
+              style={{ 
+                color: textColor
+              }}
+            >
               {formattedDate}
             </div>
           )}
@@ -118,7 +132,12 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
       {title && (
         <div className="reader-header">
           {formattedDate && (
-            <div className="publish-date-topright">
+            <div 
+              className="publish-date-topright"
+              style={{ 
+                color: textColor
+              }}
+            >
               {formattedDate}
             </div>
           )}

src/components/ReadingProgressFilters.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBookOpen, faCheckCircle, faAsterisk } from '@fortawesome/free-solid-svg-icons'
+import { faEnvelope, faEnvelopeOpen } from '@fortawesome/free-regular-svg-icons'
+
+export type ReadingProgressFilterType = 'all' | 'unopened' | 'started' | 'reading' | 'completed'
+
+interface ReadingProgressFiltersProps {
+  selectedFilter: ReadingProgressFilterType
+  onFilterChange: (filter: ReadingProgressFilterType) => void
+}
+
+const ReadingProgressFilters: React.FC<ReadingProgressFiltersProps> = ({ selectedFilter, onFilterChange }) => {
+  const filters = [
+    { type: 'all' as const, icon: faAsterisk, label: 'All' },
+    { type: 'unopened' as const, icon: faEnvelope, label: 'Unopened' },
+    { type: 'started' as const, icon: faEnvelopeOpen, label: 'Started' },
+    { type: 'reading' as const, icon: faBookOpen, label: 'Reading' },
+    { type: 'completed' as const, icon: faCheckCircle, label: 'Completed' }
+  ]
+
+  return (
+    <div className="bookmark-filters">
+      {filters.map(filter => {
+        const isActive = selectedFilter === filter.type
+        // Only "completed" gets green color, everything else uses default blue
+        const activeStyle = isActive && filter.type === 'completed' ? { color: '#10b981' } : undefined
+        
+        return (
+          <button
+            key={filter.type}
+            onClick={() => onFilterChange(filter.type)}
+            className={`filter-btn ${isActive ? 'active' : ''}`}
+            title={filter.label}
+            aria-label={`Filter by ${filter.label}`}
+            style={activeStyle}
+          >
+            <FontAwesomeIcon icon={filter.icon} />
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default ReadingProgressFilters
+

src/components/ReadingProgressIndicator.tsx

@@ -19,6 +19,21 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
 }) => {
   const clampedProgress = Math.min(100, Math.max(0, progress))
   
+  // Determine reading state based on progress (matching readingProgressUtils.ts logic)
+  const progressDecimal = clampedProgress / 100
+  const isStarted = progressDecimal > 0 && progressDecimal <= 0.10
+  
+  // Determine bar color based on state
+  let barColorClass = ''
+  let barColorStyle: string | undefined = 'var(--color-primary)' // Default blue
+  
+  if (isComplete) {
+    barColorClass = 'bg-green-500'
+    barColorStyle = undefined
+  } else if (isStarted) {
+    barColorStyle = 'var(--color-text)' // Neutral text color (matches card titles)
+  }
+  
   // Calculate left and right offsets based on sidebar states (desktop only)
   const leftOffset = isSidebarCollapsed 
     ? 'var(--sidebar-collapsed-width)' 
@@ -42,14 +57,10 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
         style={{ backgroundColor: 'var(--color-border)' }}
       >
         <div 
-          className={`h-full rounded-full transition-all duration-300 relative ${
-            isComplete 
-              ? 'bg-green-500' 
-              : ''
-          }`}
+          className={`h-full rounded-full transition-all duration-300 relative ${barColorClass}`}
           style={{ 
             width: `${clampedProgress}%`,
-            backgroundColor: isComplete ? undefined : 'var(--color-primary)'
+            backgroundColor: barColorStyle
           }}
         >
           <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-[shimmer_2s_infinite]" />
@@ -60,7 +71,9 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
           className={`text-[0.625rem] font-normal min-w-[32px] text-right tabular-nums ${
             isComplete ? 'text-green-500' : ''
           }`}
-          style={{ color: isComplete ? undefined : 'var(--color-text-muted)' }}
+          style={{ 
+            color: isComplete ? undefined : isStarted ? 'var(--color-text)' : 'var(--color-text-muted)' 
+          }}
         >
           {isComplete ? '✓' : `${clampedProgress}%`}
         </div>

src/components/RefreshIndicator.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowRotateRight } from '@fortawesome/free-solid-svg-icons'
+
+interface RefreshIndicatorProps {
+  isRefreshing: boolean
+  pullPosition: number
+}
+
+const THRESHOLD = 80
+
+/**
+ * Simple pull-to-refresh visual indicator
+ */
+const RefreshIndicator: React.FC<RefreshIndicatorProps> = ({
+  isRefreshing,
+  pullPosition
+}) => {
+  const isVisible = isRefreshing || pullPosition > 0
+  if (!isVisible) return null
+
+  const opacity = Math.min(pullPosition / THRESHOLD, 1)
+  const translateY = isRefreshing ? THRESHOLD / 3 : pullPosition / 3
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: `${translateY}px`,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 30,
+        opacity,
+        transition: isRefreshing ? 'opacity 0.2s' : 'none'
+      }}
+    >
+      <div
+        style={{
+          width: '32px',
+          height: '32px',
+          borderRadius: '50%',
+          backgroundColor: 'var(--surface-secondary, #ffffff)',
+          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+      >
+        <FontAwesomeIcon
+          icon={faArrowRotateRight}
+          style={{
+            transform: isRefreshing ? 'none' : `rotate(${pullPosition}deg)`,
+            color: 'var(--accent-color, #3b82f6)'
+          }}
+          className={isRefreshing ? 'fa-spin' : ''}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default RefreshIndicator
+

src/components/Settings.tsx

@@ -6,10 +6,8 @@ import IconButton from './IconButton'
 import { loadFont } from '../utils/fontLoader'
 import ThemeSettings from './Settings/ThemeSettings'
 import ReadingDisplaySettings from './Settings/ReadingDisplaySettings'
-import LayoutNavigationSettings from './Settings/LayoutNavigationSettings'
-import StartupPreferencesSettings from './Settings/StartupPreferencesSettings'
+import LayoutBehaviorSettings from './Settings/LayoutBehaviorSettings'
 import ZapSettings from './Settings/ZapSettings'
-import OfflineModeSettings from './Settings/OfflineModeSettings'
 import RelaySettings from './Settings/RelaySettings'
 import PWASettings from './Settings/PWASettings'
 import { useRelayStatus } from '../hooks/useRelayStatus'
@@ -23,10 +21,10 @@ const DEFAULT_SETTINGS: UserSettings = {
   readingFont: 'source-serif-4',
   fontSize: 21,
   highlightStyle: 'marker',
-  highlightColor: '#ffff00',
+  highlightColor: '#fde047',
   highlightColorNostrverse: '#9333ea',
   highlightColorFriends: '#f97316',
-  highlightColorMine: '#ffff00',
+  highlightColorMine: '#fde047',
   defaultHighlightVisibilityNostrverse: true,
   defaultHighlightVisibilityFriends: true,
   defaultHighlightVisibilityMine: true,
@@ -35,6 +33,8 @@ const DEFAULT_SETTINGS: UserSettings = {
   zapSplitAuthorWeight: 50,
   useLocalRelayAsCache: true,
   rebroadcastToAllRelays: false,
+  paragraphAlignment: 'justify',
+  syncReadingPosition: false,
 }
 
 interface SettingsProps {
@@ -162,12 +162,10 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
       <div className="settings-content">
         <ThemeSettings settings={localSettings} onUpdate={handleUpdate} />
         <ReadingDisplaySettings settings={localSettings} onUpdate={handleUpdate} />
-        <LayoutNavigationSettings settings={localSettings} onUpdate={handleUpdate} />
-        <StartupPreferencesSettings settings={localSettings} onUpdate={handleUpdate} />
         <ZapSettings settings={localSettings} onUpdate={handleUpdate} />
-        <OfflineModeSettings settings={localSettings} onUpdate={handleUpdate} onClose={onClose} />
+        <LayoutBehaviorSettings settings={localSettings} onUpdate={handleUpdate} />
+        <PWASettings settings={localSettings} onUpdate={handleUpdate} onClose={onClose} />
         <RelaySettings relayStatuses={relayStatuses} onClose={onClose} />
-        <PWASettings />
       </div>
     </div>
   )

src/components/Settings/LayoutBehaviorSettings.tsx

@@ -0,0 +1,151 @@
+import React from 'react'
+import { faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../../services/settingsService'
+import IconButton from '../IconButton'
+
+interface LayoutBehaviorSettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+}
+
+const LayoutBehaviorSettings: React.FC<LayoutBehaviorSettingsProps> = ({ settings, onUpdate }) => {
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Layout & Behavior</h3>
+      
+      <div className="setting-group setting-inline">
+        <label>Default Bookmark View</label>
+        <div className="setting-buttons">
+          <IconButton 
+            icon={faList} 
+            onClick={() => onUpdate({ defaultViewMode: 'compact' })} 
+            title="Compact list view" 
+            ariaLabel="Compact list view" 
+            variant={(settings.defaultViewMode || 'compact') === 'compact' ? 'primary' : 'ghost'} 
+          />
+          <IconButton 
+            icon={faThLarge} 
+            onClick={() => onUpdate({ defaultViewMode: 'cards' })} 
+            title="Cards view" 
+            ariaLabel="Cards view" 
+            variant={settings.defaultViewMode === 'cards' ? 'primary' : 'ghost'} 
+          />
+          <IconButton 
+            icon={faImage} 
+            onClick={() => onUpdate({ defaultViewMode: 'large' })} 
+            title="Large preview view" 
+            ariaLabel="Large preview view" 
+            variant={settings.defaultViewMode === 'large' ? 'primary' : 'ghost'} 
+          />
+        </div>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="collapseOnArticleOpen" className="checkbox-label">
+          <input
+            id="collapseOnArticleOpen"
+            type="checkbox"
+            checked={settings.collapseOnArticleOpen !== false}
+            onChange={(e) => onUpdate({ collapseOnArticleOpen: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Collapse bookmark bar when opening an article</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="sidebarCollapsed" className="checkbox-label">
+          <input
+            id="sidebarCollapsed"
+            type="checkbox"
+            checked={settings.sidebarCollapsed !== false}
+            onChange={(e) => onUpdate({ sidebarCollapsed: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Start with bookmarks sidebar collapsed</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="highlightsCollapsed" className="checkbox-label">
+          <input
+            id="highlightsCollapsed"
+            type="checkbox"
+            checked={settings.highlightsCollapsed !== false}
+            onChange={(e) => onUpdate({ highlightsCollapsed: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Start with highlights panel collapsed</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="rebroadcastToAllRelays" className="checkbox-label">
+          <input
+            id="rebroadcastToAllRelays"
+            type="checkbox"
+            checked={settings.rebroadcastToAllRelays ?? false}
+            onChange={(e) => onUpdate({ rebroadcastToAllRelays: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Rebroadcast events while browsing</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="autoCollapseSidebarOnMobile" className="checkbox-label">
+          <input
+            id="autoCollapseSidebarOnMobile"
+            type="checkbox"
+            checked={settings.autoCollapseSidebarOnMobile !== false}
+            onChange={(e) => onUpdate({ autoCollapseSidebarOnMobile: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Auto-collapse sidebar on small screens</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="syncReadingPosition" className="checkbox-label">
+          <input
+            id="syncReadingPosition"
+            type="checkbox"
+            checked={settings.syncReadingPosition ?? false}
+            onChange={(e) => onUpdate({ syncReadingPosition: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Sync reading position across devices</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="autoScrollToPosition" className="checkbox-label">
+          <input
+            id="autoScrollToPosition"
+            type="checkbox"
+            checked={settings.autoScrollToPosition !== false}
+            onChange={(e) => onUpdate({ autoScrollToPosition: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Auto-scroll to last reading position</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="autoMarkAsReadAt100" className="checkbox-label">
+          <input
+            id="autoMarkAsReadAt100"
+            type="checkbox"
+            checked={settings.autoMarkAsReadAt100 ?? false}
+            onChange={(e) => onUpdate({ autoMarkAsReadAt100: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Automatically mark as read when reading progress is 100%</span>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+export default LayoutBehaviorSettings
+

src/components/Settings/LayoutNavigationSettings.tsx

@@ -3,15 +3,15 @@ import { faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../../services/settingsService'
 import IconButton from '../IconButton'
 
-interface LayoutNavigationSettingsProps {
+interface LayoutBehaviorSettingsProps {
   settings: UserSettings
   onUpdate: (updates: Partial<UserSettings>) => void
 }
 
-const LayoutNavigationSettings: React.FC<LayoutNavigationSettingsProps> = ({ settings, onUpdate }) => {
+const LayoutBehaviorSettings: React.FC<LayoutBehaviorSettingsProps> = ({ settings, onUpdate }) => {
   return (
     <div className="settings-section">
-      <h3 className="section-title">Layout & Navigation</h3>
+      <h3 className="section-title">Layout & Behavior</h3>
       
       <div className="setting-group setting-inline">
         <label>Default Bookmark View</label>
@@ -52,9 +52,61 @@ const LayoutNavigationSettings: React.FC<LayoutNavigationSettingsProps> = ({ set
           <span>Collapse bookmark bar when opening an article</span>
         </label>
       </div>
+
+      <div className="setting-group">
+        <label htmlFor="sidebarCollapsed" className="checkbox-label">
+          <input
+            id="sidebarCollapsed"
+            type="checkbox"
+            checked={settings.sidebarCollapsed !== false}
+            onChange={(e) => onUpdate({ sidebarCollapsed: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Start with bookmarks sidebar collapsed</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="highlightsCollapsed" className="checkbox-label">
+          <input
+            id="highlightsCollapsed"
+            type="checkbox"
+            checked={settings.highlightsCollapsed !== false}
+            onChange={(e) => onUpdate({ highlightsCollapsed: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Start with highlights panel collapsed</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="rebroadcastToAllRelays" className="checkbox-label">
+          <input
+            id="rebroadcastToAllRelays"
+            type="checkbox"
+            checked={settings.rebroadcastToAllRelays ?? false}
+            onChange={(e) => onUpdate({ rebroadcastToAllRelays: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Rebroadcast events while browsing</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="autoCollapseSidebarOnMobile" className="checkbox-label">
+          <input
+            id="autoCollapseSidebarOnMobile"
+            type="checkbox"
+            checked={settings.autoCollapseSidebarOnMobile !== false}
+            onChange={(e) => onUpdate({ autoCollapseSidebarOnMobile: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Auto-collapse sidebar on small screens</span>
+        </label>
+      </div>
     </div>
   )
 }
 
-export default LayoutNavigationSettings
+export default LayoutBehaviorSettings
 

src/components/Settings/OfflineModeSettings.tsx

@@ -1,173 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { faTrash } from '@fortawesome/free-solid-svg-icons'
-import { UserSettings } from '../../services/settingsService'
-import { getImageCacheStatsAsync, clearImageCache } from '../../services/imageCacheService'
-import IconButton from '../IconButton'
-
-interface OfflineModeSettingsProps {
-  settings: UserSettings
-  onUpdate: (updates: Partial<UserSettings>) => void
-  onClose?: () => void
-}
-
-const OfflineModeSettings: React.FC<OfflineModeSettingsProps> = ({ settings, onUpdate, onClose }) => {
-  const navigate = useNavigate()
-  const [cacheStats, setCacheStats] = useState<{
-    totalSizeMB: number
-    itemCount: number
-    items: Array<{ url: string, sizeMB: number }>
-  }>({ totalSizeMB: 0, itemCount: 0, items: [] })
-
-  const handleLinkClick = (url: string) => {
-    if (onClose) onClose()
-    navigate(`/r/${encodeURIComponent(url)}`)
-  }
-
-  const handleClearCache = async () => {
-    if (confirm('Are you sure you want to clear all cached images?')) {
-      await clearImageCache()
-      const stats = await getImageCacheStatsAsync()
-      setCacheStats(stats)
-    }
-  }
-
-  // Update cache stats periodically
-  useEffect(() => {
-    const updateStats = async () => {
-      const stats = await getImageCacheStatsAsync()
-      setCacheStats(stats)
-    }
-    
-    updateStats() // Initial load
-    const interval = setInterval(updateStats, 3000) // Update every 3 seconds
-    return () => clearInterval(interval)
-  }, [])
-
-  return (
-    <div className="settings-section">
-      <h3 className="section-title">Flight Mode</h3>
-      
-      <div className="setting-group" style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
-        <label htmlFor="enableImageCache" className="checkbox-label" style={{ marginBottom: 0 }}>
-          <input
-            id="enableImageCache"
-            type="checkbox"
-            checked={settings.enableImageCache ?? true}
-            onChange={(e) => onUpdate({ enableImageCache: e.target.checked })}
-            className="setting-checkbox"
-          />
-          <span>Use local image cache</span>
-        </label>
-
-        {(settings.enableImageCache ?? true) && (
-          <div style={{ 
-            fontSize: '0.85rem',
-            color: 'var(--text-secondary)',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '0.5rem'
-          }}>
-            <span style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
-              ( {cacheStats.totalSizeMB.toFixed(1)} MB / 
-              <input
-                id="imageCacheSizeMB"
-                type="number"
-                min="10"
-                max="500"
-                value={settings.imageCacheSizeMB ?? 210}
-                onChange={(e) => onUpdate({ imageCacheSizeMB: parseInt(e.target.value) || 210 })}
-                style={{
-                  width: '50px',
-                  padding: '0.15rem 0.35rem',
-                  background: 'var(--surface-secondary)',
-                  border: '1px solid var(--border-color, #333)',
-                  borderRadius: '4px',
-                  color: 'inherit',
-                  fontSize: 'inherit',
-                  fontFamily: 'inherit',
-                  textAlign: 'center'
-                }}
-              />
-              MB used )
-            </span>
-            <IconButton
-              icon={faTrash}
-              onClick={handleClearCache}
-              title="Clear cache"
-              variant="ghost"
-              size={28}
-            />
-          </div>
-        )}
-      </div>
-
-      <div className="setting-group">
-        <label htmlFor="useLocalRelayAsCache" className="checkbox-label">
-          <input
-            id="useLocalRelayAsCache"
-            type="checkbox"
-            checked={settings.useLocalRelayAsCache ?? true}
-            onChange={(e) => onUpdate({ useLocalRelayAsCache: e.target.checked })}
-            className="setting-checkbox"
-          />
-          <span>Use local relays as cache</span>
-        </label>
-      </div>
-
-      <div style={{ 
-        marginTop: '1.5rem', 
-        padding: '1rem',
-        background: 'var(--surface-secondary)',
-        borderRadius: '6px',
-        fontSize: '0.9rem',
-        lineHeight: '1.6'
-      }}>
-        <p style={{ margin: 0, color: 'var(--text-secondary)' }}>
-          Boris works best with a local relay. Consider running{' '}
-          <a 
-            href="https://github.com/greenart7c3/Citrine?tab=readme-ov-file#download" 
-            target="_blank" 
-            rel="noopener noreferrer"
-            style={{ color: 'var(--accent, #8b5cf6)' }}
-          >
-            Citrine
-          </a>
-          {' or '}
-          <a 
-            href="https://github.com/CodyTseng/nostr-relay-tray/releases" 
-            target="_blank" 
-            rel="noopener noreferrer"
-            style={{ color: 'var(--accent, #8b5cf6)' }}
-          >
-            nostr-relay-tray
-          </a>
-          . Don't know what relays are? Learn more{' '}
-          <a 
-            onClick={(e) => {
-              e.preventDefault()
-              handleLinkClick('https://nostr.how/en/relays')
-            }}
-            style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
-          >
-            here
-          </a>
-          {' and '}
-          <a 
-            onClick={(e) => {
-              e.preventDefault()
-              handleLinkClick('https://davidebtc186.substack.com/p/the-importance-of-hosting-your-own')
-            }}
-            style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
-          >
-            here
-          </a>
-          .
-        </p>
-      </div>
-    </div>
-  )
-}
-
-export default OfflineModeSettings
-

src/components/Settings/PWASettings.tsx

@@ -1,80 +1,206 @@
-import React from 'react'
-import { faDownload, faCheckCircle, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
+import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { faDownload, faCheckCircle, faTrash } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { usePWAInstall } from '../../hooks/usePWAInstall'
+import { useIsMobile } from '../../hooks/useMediaQuery'
+import { UserSettings } from '../../services/settingsService'
+import { getImageCacheStatsAsync, clearImageCache } from '../../services/imageCacheService'
 
-const PWASettings: React.FC = () => {
+interface PWASettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+  onClose?: () => void
+}
+
+const PWASettings: React.FC<PWASettingsProps> = ({ settings, onUpdate, onClose }) => {
+  const navigate = useNavigate()
+  const isMobile = useIsMobile()
   const { isInstallable, isInstalled, installApp } = usePWAInstall()
+  const [cacheStats, setCacheStats] = useState<{
+    totalSizeMB: number
+    itemCount: number
+    items: Array<{ url: string, sizeMB: number }>
+  }>({ totalSizeMB: 0, itemCount: 0, items: [] })
 
   const handleInstall = async () => {
+    if (isInstalled) return
     const success = await installApp()
     if (success) {
       console.log('App installed successfully')
     }
   }
 
-  if (isInstalled) {
-    return (
-      <div className="settings-section">
-        <h3>Progressive Web App</h3>
-        <div className="setting-item">
-          <div className="setting-info">
-            <FontAwesomeIcon icon={faCheckCircle} style={{ color: '#22c55e', marginRight: '8px' }} />
-            <span>Boris is installed as an app</span>
-          </div>
-          <p className="setting-description">
-            You can launch Boris from your home screen or app drawer.
-          </p>
-        </div>
-      </div>
-    )
+  const handleLinkClick = (url: string) => {
+    if (onClose) onClose()
+    navigate(`/r/${encodeURIComponent(url)}`)
   }
 
-  if (!isInstallable) {
-    return null
+  const handleClearCache = async () => {
+    if (confirm('Are you sure you want to clear all cached images?')) {
+      await clearImageCache()
+      const stats = await getImageCacheStatsAsync()
+      setCacheStats(stats)
+    }
   }
 
+  // Update cache stats periodically
+  useEffect(() => {
+    const updateStats = async () => {
+      const stats = await getImageCacheStatsAsync()
+      setCacheStats(stats)
+    }
+    
+    updateStats() // Initial load
+    const interval = setInterval(updateStats, 3000) // Update every 3 seconds
+    return () => clearInterval(interval)
+  }, [])
+
   return (
     <div className="settings-section">
-      <h3>Progressive Web App</h3>
-      <div className="setting-item">
-        <div className="setting-info">
-          <FontAwesomeIcon icon={faMobileAlt} style={{ marginRight: '8px' }} />
-          <span>Install Boris as an app</span>
+      <h3 className="section-title">App & Airplane Mode</h3>
+      
+      <div style={{ display: 'flex', gap: '2rem', alignItems: 'stretch' }}>
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+          <p className="setting-description" style={{ marginBottom: '1rem', color: 'var(--color-text-secondary)', fontSize: '0.875rem' }}>
+            Boris is offline‑first by design. You can read, create highlights, and browse your library without being connected to the internet. Boris will store changes locally and sync later.
+          </p>
+          
+          {/* Flight Mode Section - Checkboxes First */}
+          <div className="setting-group" style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+            <label htmlFor="enableImageCache" className="checkbox-label" style={{ marginBottom: 0 }}>
+              <input
+                id="enableImageCache"
+                type="checkbox"
+                checked={settings.enableImageCache ?? true}
+                onChange={(e) => onUpdate({ enableImageCache: e.target.checked })}
+                className="setting-checkbox"
+              />
+              <span>Use local image cache</span>
+            </label>
+
+            {(settings.enableImageCache ?? true) && (
+              <div style={{ 
+                fontSize: '0.85rem',
+                color: 'var(--text-secondary)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.5rem'
+              }}>
+                <span style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                  ( {cacheStats.totalSizeMB.toFixed(1)} MB / 
+                  <input
+                    id="imageCacheSizeMB"
+                    type="number"
+                    min="10"
+                    max="500"
+                    value={settings.imageCacheSizeMB ?? 210}
+                    onChange={(e) => onUpdate({ imageCacheSizeMB: parseInt(e.target.value) || 210 })}
+                    style={{
+                      width: '50px',
+                      padding: '0.15rem 0.35rem',
+                      background: 'var(--surface-secondary)',
+                      border: '1px solid var(--border-color, #333)',
+                      borderRadius: '4px',
+                      color: 'inherit',
+                      fontSize: 'inherit',
+                      fontFamily: 'inherit',
+                      textAlign: 'center'
+                    }}
+                  />
+                  MB used )
+                </span>
+                <FontAwesomeIcon 
+                  icon={faTrash}
+                  onClick={handleClearCache}
+                  title="Clear cache"
+                  style={{ cursor: 'pointer', fontSize: '0.85rem', opacity: 0.7 }}
+                />
+              </div>
+            )}
+          </div>
+
+          {/* PWA Install Section - Paragraphs */}
+          <div className="setting-group">
+            <p className="setting-description" style={{ marginTop: '0.5rem', marginBottom: '0.75rem', color: 'var(--color-text-secondary)', fontSize: '0.875rem' }}>
+              <strong>Note:</strong> Boris works best with a local relay. Consider running{' '}
+              <a 
+                href="https://github.com/greenart7c3/Citrine?tab=readme-ov-file#download" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                style={{ color: 'var(--accent, #8b5cf6)' }}
+              >
+                Citrine
+              </a>
+              {' or '}
+              <a 
+                href="https://github.com/CodyTseng/nostr-relay-tray/releases" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                style={{ color: 'var(--accent, #8b5cf6)' }}
+              >
+                nostr-relay-tray
+              </a>
+              {' '}to bring full offline functionality to Boris. Don't know what relays are? Learn more{' '}
+              <a 
+                onClick={(e) => {
+                  e.preventDefault()
+                  handleLinkClick('https://nostr.how/en/relays')
+                }}
+                style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
+              >
+                here
+              </a>
+              {' and '}
+              <a 
+                onClick={(e) => {
+                  e.preventDefault()
+                  handleLinkClick('https://davidebtc186.substack.com/p/the-importance-of-hosting-your-own')
+                }}
+                style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
+              >
+                here
+              </a>
+              .
+            </p>
+          </div>
+
+          <div className="setting-group">
+            <label htmlFor="useLocalRelayAsCache" className="checkbox-label">
+              <input
+                id="useLocalRelayAsCache"
+                type="checkbox"
+                checked={settings.useLocalRelayAsCache ?? true}
+                onChange={(e) => onUpdate({ useLocalRelayAsCache: e.target.checked })}
+                className="setting-checkbox"
+              />
+              <span>Use local relays as cache</span>
+            </label>
+          </div>
+
+          <div className="setting-group">
+            <p className="setting-description" style={{ marginBottom: '1rem', color: 'var(--color-text-secondary)', fontSize: '0.875rem' }}>
+              Install Boris on your device for a native app experience.
+            </p>
+            <button
+              onClick={handleInstall}
+              className="zap-preset-btn"
+              style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+              disabled={isInstalled || !isInstallable}
+            >
+              <FontAwesomeIcon icon={isInstalled ? faCheckCircle : faDownload} />
+              {isInstalled ? 'Installed' : 'Install App'}
+            </button>
+          </div>
         </div>
-        <p className="setting-description">
-          Install Boris on your device for a native app experience with offline support.
-        </p>
-        <button
-          onClick={handleInstall}
-          className="install-button"
-          style={{
-            marginTop: '12px',
-            padding: '8px 16px',
-            background: 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)',
-            color: 'white',
-            border: 'none',
-            borderRadius: '8px',
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            fontSize: '14px',
-            fontWeight: '500',
-            transition: 'transform 0.2s, box-shadow 0.2s',
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.transform = 'translateY(-2px)'
-            e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.3)'
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.transform = 'translateY(0)'
-            e.currentTarget.style.boxShadow = 'none'
-          }}
-        >
-          <FontAwesomeIcon icon={faDownload} />
-          Install App
-        </button>
+
+        {!isMobile && (
+          <img 
+            src="/pwa.svg" 
+            alt="Progressive Web App" 
+            style={{ width: '30%', height: 'auto', flexShrink: 0, opacity: 0.8 }}
+          />
+        )}
       </div>
     </div>
   )

src/components/Settings/ReadingDisplaySettings.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { faHighlighter, faUnderline, faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter, faUnderline, faNetworkWired, faUserGroup, faUser, faAlignLeft, faAlignJustify } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../../services/settingsService'
 import IconButton from '../IconButton'
 import ColorPicker from '../ColorPicker'
@@ -19,35 +19,6 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
     <div className="settings-section">
       <h3 className="section-title">Reading & Display</h3>
       
-      <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-        <div className="setting-group setting-inline" style={{ flex: '1 1 auto', minWidth: '200px' }}>
-          <label htmlFor="readingFont">Reading Font</label>
-          <div className="setting-control">
-            <FontSelector
-              value={settings.readingFont || 'source-serif-4'}
-              onChange={(font) => onUpdate({ readingFont: font })}
-            />
-          </div>
-        </div>
-
-        <div className="setting-group setting-inline" style={{ flex: '0 1 auto' }}>
-          <label>Font Size</label>
-          <div className="setting-buttons">
-            {[16, 18, 21, 24, 28, 32].map(size => (
-              <button
-                key={size}
-                onClick={() => onUpdate({ fontSize: size })}
-                className={`font-size-btn ${(settings.fontSize || 21) === size ? 'active' : ''}`}
-                title={`${size}px`}
-                style={{ fontSize: `${size - 2}px` }}
-              >
-                A
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-
       <div className="setting-group setting-inline">
         <label>Highlight Style</label>
         <div className="setting-buttons">
@@ -69,31 +40,21 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
       </div>
 
       <div className="setting-group setting-inline">
-        <label className="setting-label">My Highlights</label>
-        <div className="setting-control">
-          <ColorPicker
-            selectedColor={settings.highlightColorMine || '#fde047'}
-            onColorChange={(color) => onUpdate({ highlightColorMine: color })}
+        <label>Paragraph Alignment</label>
+        <div className="setting-buttons">
+          <IconButton 
+            icon={faAlignLeft} 
+            onClick={() => onUpdate({ paragraphAlignment: 'left' })} 
+            title="Left aligned" 
+            ariaLabel="Left aligned" 
+            variant={settings.paragraphAlignment === 'left' ? 'primary' : 'ghost'} 
           />
-        </div>
-      </div>
-
-      <div className="setting-group setting-inline">
-        <label className="setting-label">Friends Highlights</label>
-        <div className="setting-control">
-          <ColorPicker
-            selectedColor={settings.highlightColorFriends || '#f97316'}
-            onColorChange={(color) => onUpdate({ highlightColorFriends: color })}
-          />
-        </div>
-      </div>
-
-      <div className="setting-group setting-inline">
-        <label className="setting-label">Nostrverse Highlights</label>
-        <div className="setting-control">
-          <ColorPicker
-            selectedColor={settings.highlightColorNostrverse || '#9333ea'}
-            onColorChange={(color) => onUpdate({ highlightColorNostrverse: color })}
+          <IconButton 
+            icon={faAlignJustify} 
+            onClick={() => onUpdate({ paragraphAlignment: 'justify' })} 
+            title="Justified" 
+            ariaLabel="Justified" 
+            variant={(settings.paragraphAlignment || 'justify') === 'justify' ? 'primary' : 'ghost'} 
           />
         </div>
       </div>
@@ -137,6 +98,65 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
         </div>
       </div>
 
+      <div className="setting-group setting-inline">
+        <label htmlFor="readingFont">Reading Font</label>
+        <div className="setting-control">
+          <FontSelector
+            value={settings.readingFont || 'source-serif-4'}
+            onChange={(font) => onUpdate({ readingFont: font })}
+          />
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label className="setting-label">Font Size</label>
+        <div className="setting-control">
+          <div className="setting-buttons">
+            {[16, 18, 21, 24, 28, 32].map(size => (
+              <button
+                key={size}
+                onClick={() => onUpdate({ fontSize: size })}
+                className={`font-size-btn ${(settings.fontSize || 21) === size ? 'active' : ''}`}
+                title={`${size}px`}
+                style={{ fontSize: `${size - 2}px` }}
+              >
+                A
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label className="setting-label">My Highlights</label>
+        <div className="setting-control">
+          <ColorPicker
+            selectedColor={settings.highlightColorMine || '#fde047'}
+            onColorChange={(color) => onUpdate({ highlightColorMine: color })}
+          />
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label className="setting-label">Friends Highlights</label>
+        <div className="setting-control">
+          <ColorPicker
+            selectedColor={settings.highlightColorFriends || '#f97316'}
+            onColorChange={(color) => onUpdate({ highlightColorFriends: color })}
+          />
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label className="setting-label">Nostrverse Highlights</label>
+        <div className="setting-control">
+          <ColorPicker
+            selectedColor={settings.highlightColorNostrverse || '#9333ea'}
+            onColorChange={(color) => onUpdate({ highlightColorNostrverse: color })}
+          />
+        </div>
+      </div>
+
       <div className="setting-group">
         <label htmlFor="showHighlights" className="checkbox-label">
           <input
@@ -157,7 +177,8 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
           style={{ 
             fontFamily: previewFontFamily,
             fontSize: `${settings.fontSize || 21}px`,
-            '--highlight-rgb': hexToRgb(settings.highlightColor || '#ffff00')
+            '--highlight-rgb': hexToRgb(settings.highlightColor || '#ffff00'),
+            '--paragraph-alignment': settings.paragraphAlignment || 'justify'
           } as React.CSSProperties}
         >
           <h3>The Quick Brown Fox</h3>

src/components/Settings/StartupPreferencesSettings.tsx

@@ -1,70 +0,0 @@
-import React from 'react'
-import { UserSettings } from '../../services/settingsService'
-
-interface StartupPreferencesSettingsProps {
-  settings: UserSettings
-  onUpdate: (updates: Partial<UserSettings>) => void
-}
-
-const StartupPreferencesSettings: React.FC<StartupPreferencesSettingsProps> = ({ settings, onUpdate }) => {
-  return (
-    <div className="settings-section">
-      <h3 className="section-title">Startup & Behavior</h3>
-      
-      <div className="setting-group">
-        <label htmlFor="sidebarCollapsed" className="checkbox-label">
-          <input
-            id="sidebarCollapsed"
-            type="checkbox"
-            checked={settings.sidebarCollapsed !== false}
-            onChange={(e) => onUpdate({ sidebarCollapsed: e.target.checked })}
-            className="setting-checkbox"
-          />
-          <span>Start with bookmarks sidebar collapsed</span>
-        </label>
-      </div>
-
-      <div className="setting-group">
-        <label htmlFor="highlightsCollapsed" className="checkbox-label">
-          <input
-            id="highlightsCollapsed"
-            type="checkbox"
-            checked={settings.highlightsCollapsed !== false}
-            onChange={(e) => onUpdate({ highlightsCollapsed: e.target.checked })}
-            className="setting-checkbox"
-          />
-          <span>Start with highlights panel collapsed</span>
-        </label>
-      </div>
-
-      <div className="setting-group">
-        <label htmlFor="rebroadcastToAllRelays" className="checkbox-label">
-          <input
-            id="rebroadcastToAllRelays"
-            type="checkbox"
-            checked={settings.rebroadcastToAllRelays ?? false}
-            onChange={(e) => onUpdate({ rebroadcastToAllRelays: e.target.checked })}
-            className="setting-checkbox"
-          />
-          <span>Rebroadcast events while browsing</span>
-        </label>
-      </div>
-
-      <div className="setting-group">
-        <label htmlFor="autoCollapseSidebarOnMobile" className="checkbox-label">
-          <input
-            id="autoCollapseSidebarOnMobile"
-            type="checkbox"
-            checked={settings.autoCollapseSidebarOnMobile !== false}
-            onChange={(e) => onUpdate({ autoCollapseSidebarOnMobile: e.target.checked })}
-            className="setting-checkbox"
-          />
-          <span>Auto-collapse sidebar on small screens</span>
-        </label>
-      </div>
-    </div>
-  )
-}
-
-export default StartupPreferencesSettings
-

src/components/Settings/ZapSettings.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { UserSettings } from '../../services/settingsService'
+import { useIsMobile } from '../../hooks/useMediaQuery'
 
 interface ZapSettingsProps {
   settings: UserSettings
@@ -7,6 +8,7 @@ interface ZapSettingsProps {
 }
 
 const ZapSettings: React.FC<ZapSettingsProps> = ({ settings, onUpdate }) => {
+  const isMobile = useIsMobile()
   const highlighterWeight = settings.zapSplitHighlighterWeight ?? 50
   const borisWeight = settings.zapSplitBorisWeight ?? 2.1
   const authorWeight = settings.zapSplitAuthorWeight ?? 50
@@ -42,98 +44,119 @@ const ZapSettings: React.FC<ZapSettingsProps> = ({ settings, onUpdate }) => {
     <div className="settings-section">
       <h3 className="section-title">Zap Splits</h3>
       
-      <div className="setting-group">
-        <label className="setting-label">Presets</label>
-        <div className="zap-preset-buttons">
-          <button
-            onClick={() => applyPreset(presets.default)}
-            className={`zap-preset-btn ${isPresetActive(presets.default) ? 'active' : ''}`}
-            title="You: 49%, Author: 49%, Boris: 2%"
-          >
-            Default
-          </button>
-          <button
-            onClick={() => applyPreset(presets.generous)}
-            className={`zap-preset-btn ${isPresetActive(presets.generous) ? 'active' : ''}`}
-            title="You: 6%, Author: 83%, Boris: 11%"
-          >
-            Generous
-          </button>
-          <button
-            onClick={() => applyPreset(presets.selfless)}
-            className={`zap-preset-btn ${isPresetActive(presets.selfless) ? 'active' : ''}`}
-            title="You: 1%, Author: 80%, Boris: 19%"
-          >
-            Selfless
-          </button>
-          <button
-            onClick={() => applyPreset(presets.boris)}
-            className={`zap-preset-btn ${isPresetActive(presets.boris) ? 'active' : ''}`}
-            title="You: 10%, Author: 10%, Boris: 80%"
-          >
-            Boris 🧡
-          </button>
-        </div>
-      </div>
-      
-      <div className="setting-group">
-        <label className="setting-label">Your Share</label>
-        <div className="zap-split-container">
-          <div className="zap-split-labels">
-            <span className="zap-split-label">Weight: {highlighterWeight}</span>
-            <span className="zap-split-label">({highlighterPercentage.toFixed(1)}%)</span>
+      <div style={{ display: 'flex', gap: '2rem', alignItems: 'stretch' }}>
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+          <div className="setting-group">
+            <label className="setting-label">Presets</label>
+            <div className="zap-preset-buttons">
+              <button
+                onClick={() => applyPreset(presets.default)}
+                className={`zap-preset-btn ${isPresetActive(presets.default) ? 'active' : ''}`}
+                title="You: 49%, Author: 49%, Boris: 2%"
+              >
+                Default
+              </button>
+              <button
+                onClick={() => applyPreset(presets.generous)}
+                className={`zap-preset-btn ${isPresetActive(presets.generous) ? 'active' : ''}`}
+                title="You: 6%, Author: 83%, Boris: 11%"
+              >
+                Generous
+              </button>
+              <button
+                onClick={() => applyPreset(presets.selfless)}
+                className={`zap-preset-btn ${isPresetActive(presets.selfless) ? 'active' : ''}`}
+                title="You: 1%, Author: 80%, Boris: 19%"
+              >
+                Selfless
+              </button>
+              <button
+                onClick={() => applyPreset(presets.boris)}
+                className={`zap-preset-btn ${isPresetActive(presets.boris) ? 'active' : ''}`}
+                title="You: 10%, Author: 10%, Boris: 80%"
+              >
+                Boris 🧡
+              </button>
+            </div>
           </div>
-          <input
-            type="range"
-            min="0"
-            max="100"
-            value={highlighterWeight}
-            onChange={(e) => onUpdate({ zapSplitHighlighterWeight: parseInt(e.target.value) })}
-            className="zap-split-slider"
-          />
-        </div>
-      </div>
-
-      <div className="setting-group">
-        <label className="setting-label">Author(s) Share</label>
-        <div className="zap-split-container">
-          <div className="zap-split-labels">
-            <span className="zap-split-label">Weight: {authorWeight}</span>
-            <span className="zap-split-label">({authorPercentage.toFixed(1)}%)</span>
+          
+          <div className="setting-group">
+            <div className="zap-split-container">
+              <div className="zap-split-labels">
+                <span className="zap-split-label">Your Share: {highlighterWeight}</span>
+                <span className="zap-split-label">({highlighterPercentage.toFixed(1)}%)</span>
+              </div>
+              <input
+                type="range"
+                min="0"
+                max="100"
+                value={highlighterWeight}
+                onChange={(e) => onUpdate({ zapSplitHighlighterWeight: parseInt(e.target.value) })}
+                className="zap-split-slider"
+                list="highlighter-ticks"
+              />
+              <datalist id="highlighter-ticks">
+                <option value="50" label="50%"></option>
+              </datalist>
+            </div>
           </div>
-          <input
-            type="range"
-            min="0"
-            max="100"
-            value={authorWeight}
-            onChange={(e) => onUpdate({ zapSplitAuthorWeight: parseInt(e.target.value) })}
-            className="zap-split-slider"
-          />
-        </div>
-      </div>
 
-      <div className="setting-group">
-        <label className="setting-label">Support Boris</label>
-        <div className="zap-split-container">
-          <div className="zap-split-labels">
-            <span className="zap-split-label">Weight: {borisWeight.toFixed(1)}</span>
-            <span className="zap-split-label">({borisPercentage.toFixed(1)}%)</span>
+          <div className="setting-group">
+            <div className="zap-split-container">
+              <div className="zap-split-labels">
+                <span className="zap-split-label">Author's Share: {authorWeight}</span>
+                <span className="zap-split-label">({authorPercentage.toFixed(1)}%)</span>
+              </div>
+              <input
+                type="range"
+                min="0"
+                max="100"
+                value={authorWeight}
+                onChange={(e) => onUpdate({ zapSplitAuthorWeight: parseInt(e.target.value) })}
+                className="zap-split-slider"
+                list="author-ticks"
+              />
+              <datalist id="author-ticks">
+                <option value="50" label="50%"></option>
+              </datalist>
+            </div>
           </div>
-          <input
-            type="range"
-            min="0"
-            max="10"
-            step="0.1"
-            value={borisWeight}
-            onChange={(e) => onUpdate({ zapSplitBorisWeight: parseFloat(e.target.value) })}
-            className="zap-split-slider"
-          />
-        </div>
-      </div>
 
-      <div className="zap-split-description">
-        Weights determine zap splits when highlighting nostr-native content. 
-        If the content has multiple authors, their share is divided proportionally.
+          <div className="setting-group">
+            <div className="zap-split-container">
+              <div className="zap-split-labels">
+                <span className="zap-split-label">Boris' Share: {borisWeight.toFixed(1)}</span>
+                <span className="zap-split-label">({borisPercentage.toFixed(1)}%)</span>
+              </div>
+              <input
+                type="range"
+                min="0"
+                max="10"
+                step="0.1"
+                value={borisWeight}
+                onChange={(e) => onUpdate({ zapSplitBorisWeight: parseFloat(e.target.value) })}
+                className="zap-split-slider"
+                list="boris-ticks"
+              />
+              <datalist id="boris-ticks">
+                <option value="5" label="5"></option>
+              </datalist>
+            </div>
+          </div>
+
+          <p className="setting-description" style={{ marginBottom: '1rem', color: 'var(--color-text-secondary)', fontSize: '0.875rem' }}>
+            Weights determine zap splits when highlighting nostr-native content. 
+            If the content has multiple authors, their share is divided proportionally.
+          </p>
+        </div>
+
+        {!isMobile && (
+          <img 
+            src="/zaps.svg" 
+            alt="Zap Splits" 
+            style={{ width: '30%', height: 'auto', flexShrink: 0, opacity: 0.8 }}
+          />
+        )}
       </div>
     </div>
   )

src/components/SidebarHeader.tsx

@@ -1,28 +1,22 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faHome, faPlus, faNewspaper, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faHome, faNewspaper, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import { Accounts } from 'applesauce-accounts'
-import { RelayPool } from 'applesauce-relay'
 import IconButton from './IconButton'
-import AddBookmarkModal from './AddBookmarkModal'
-import { createWebBookmark } from '../services/webBookmarkService'
-import { RELAYS } from '../config/relays'
 
 interface SidebarHeaderProps {
   onToggleCollapse: () => void
   onLogout: () => void
   onOpenSettings: () => void
-  relayPool: RelayPool | null
   isMobile?: boolean
 }
 
-const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, relayPool, isMobile = false }) => {
+const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, isMobile = false }) => {
   const [isConnecting, setIsConnecting] = useState(false)
-  const [showAddModal, setShowAddModal] = useState(false)
   const navigate = useNavigate()
   const activeAccount = Hooks.useActiveAccount()
   const accountManager = Hooks.useAccountManager()
@@ -54,14 +48,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
     return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
   }
 
-  const handleSaveBookmark = async (url: string, title?: string, description?: string, tags?: string[]) => {
-    if (!activeAccount || !relayPool) {
-      throw new Error('Please login to create bookmarks')
-    }
-
-    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, RELAYS)
-  }
-
   const profileImage = getProfileImage()
 
   return (
@@ -124,15 +110,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
           ariaLabel="Settings"
           variant="ghost"
         />
-        {activeAccount && (
-          <IconButton
-            icon={faPlus}
-            onClick={() => setShowAddModal(true)}
-            title="Add bookmark"
-            ariaLabel="Add bookmark"
-            variant="ghost"
-          />
-        )}
         {activeAccount ? (
           <IconButton
             icon={faRightFromBracket}
@@ -152,12 +129,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
         )}
         </div>
       </div>
-      {showAddModal && (
-        <AddBookmarkModal
-          onClose={() => setShowAddModal(false)}
-          onSave={handleSaveBookmark}
-        />
-      )}
     </>
   )
 }

src/components/Skeletons/BlogPostSkeleton.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import Skeleton from 'react-loading-skeleton'
+
+export const BlogPostSkeleton: React.FC = () => {
+  return (
+    <div 
+      className="blog-post-card"
+      style={{ 
+        textDecoration: 'none',
+        color: 'inherit',
+        display: 'block'
+      }}
+      aria-hidden="true"
+    >
+      <div className="blog-post-card-image">
+        <Skeleton height={200} style={{ display: 'block' }} />
+      </div>
+      <div className="blog-post-card-content">
+        <Skeleton 
+          height={24} 
+          width="85%" 
+          style={{ marginBottom: '0.75rem' }} 
+          className="blog-post-card-title"
+        />
+        <Skeleton 
+          count={2} 
+          style={{ marginBottom: '0.5rem' }} 
+          className="blog-post-card-summary"
+        />
+        <div className="blog-post-card-meta" style={{ display: 'flex', gap: '1rem' }}>
+          <span className="blog-post-card-author" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <Skeleton width={100} height={14} />
+          </span>
+          <span className="blog-post-card-date" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <Skeleton width={80} height={14} />
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+

src/components/Skeletons/BookmarkSkeleton.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { ViewMode } from '../Bookmarks'
+
+interface BookmarkSkeletonProps {
+  viewMode: ViewMode
+}
+
+export const BookmarkSkeleton: React.FC<BookmarkSkeletonProps> = ({ viewMode }) => {
+  if (viewMode === 'compact') {
+    return (
+      <div 
+        className="bookmark-item-compact" 
+        style={{ padding: '0.75rem', marginBottom: '0.5rem' }}
+        aria-hidden="true"
+      >
+        <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'flex-start' }}>
+          <Skeleton width={40} height={40} />
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <Skeleton width="80%" height={16} style={{ marginBottom: '0.25rem' }} />
+            <Skeleton width="60%" height={14} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (viewMode === 'cards') {
+    return (
+      <div 
+        className="bookmark-card" 
+        style={{ 
+          borderRadius: '8px', 
+          overflow: 'hidden',
+          backgroundColor: 'var(--color-bg-elevated)',
+          marginBottom: '1rem'
+        }}
+        aria-hidden="true"
+      >
+        <Skeleton height={160} style={{ display: 'block' }} />
+        <div style={{ padding: '1rem' }}>
+          <Skeleton height={20} width="90%" style={{ marginBottom: '0.5rem' }} />
+          <Skeleton count={2} style={{ marginBottom: '0.5rem' }} />
+          <div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.75rem' }}>
+            <Skeleton width={80} height={14} />
+            <Skeleton width={60} height={14} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // large view
+  return (
+    <div 
+      className="bookmark-large" 
+      style={{ 
+        marginBottom: '1.5rem',
+        borderRadius: '8px',
+        overflow: 'hidden',
+        backgroundColor: 'var(--color-bg-elevated)'
+      }}
+      aria-hidden="true"
+    >
+      <Skeleton height={240} style={{ display: 'block' }} />
+      <div style={{ padding: '1.5rem' }}>
+        <Skeleton height={24} width="85%" style={{ marginBottom: '0.75rem' }} />
+        <Skeleton count={3} style={{ marginBottom: '0.5rem' }} />
+        <div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
+          <Skeleton circle width={32} height={32} />
+          <div style={{ flex: 1 }}>
+            <Skeleton width={120} height={14} style={{ marginBottom: '0.25rem' }} />
+            <Skeleton width={100} height={12} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+

src/components/Skeletons/ContentSkeleton.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import Skeleton from 'react-loading-skeleton'
+
+export const ContentSkeleton: React.FC = () => {
+  return (
+    <div 
+      className="reader-content"
+      style={{ 
+        maxWidth: '900px',
+        margin: '0 auto',
+        padding: '2rem 1rem'
+      }}
+      aria-hidden="true"
+    >
+      {/* Title */}
+      <Skeleton 
+        height={48} 
+        width="90%" 
+        style={{ marginBottom: '1rem' }} 
+      />
+      
+      {/* Byline / Meta */}
+      <div style={{ display: 'flex', gap: '1rem', marginBottom: '2rem', alignItems: 'center' }}>
+        <Skeleton circle width={40} height={40} />
+        <div style={{ flex: 1 }}>
+          <Skeleton width={150} height={16} style={{ marginBottom: '0.25rem' }} />
+          <Skeleton width={200} height={14} />
+        </div>
+      </div>
+      
+      {/* Cover image */}
+      <Skeleton 
+        height={400} 
+        style={{ marginBottom: '2rem', display: 'block', borderRadius: '8px' }} 
+      />
+      
+      {/* Paragraphs */}
+      <div style={{ marginBottom: '1.5rem' }}>
+        <Skeleton count={3} style={{ marginBottom: '0.5rem' }} />
+        <Skeleton width="80%" />
+      </div>
+      
+      <div style={{ marginBottom: '1.5rem' }}>
+        <Skeleton count={4} style={{ marginBottom: '0.5rem' }} />
+        <Skeleton width="65%" />
+      </div>
+      
+      <div style={{ marginBottom: '1.5rem' }}>
+        <Skeleton count={3} style={{ marginBottom: '0.5rem' }} />
+        <Skeleton width="90%" />
+      </div>
+      
+      {/* Another image placeholder */}
+      <Skeleton 
+        height={300} 
+        style={{ marginBottom: '2rem', display: 'block', borderRadius: '8px' }} 
+      />
+      
+      <div style={{ marginBottom: '1.5rem' }}>
+        <Skeleton count={3} style={{ marginBottom: '0.5rem' }} />
+        <Skeleton width="75%" />
+      </div>
+    </div>
+  )
+}
+

src/components/Skeletons/HighlightSkeleton.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import Skeleton from 'react-loading-skeleton'
+
+export const HighlightSkeleton: React.FC = () => {
+  return (
+    <div 
+      className="highlight-item"
+      style={{ 
+        padding: '1rem',
+        marginBottom: '0.75rem',
+        borderRadius: '8px',
+        backgroundColor: 'var(--color-bg-elevated)'
+      }}
+      aria-hidden="true"
+    >
+      {/* Author line with avatar */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>
+        <Skeleton circle width={24} height={24} />
+        <Skeleton width={120} height={14} />
+        <Skeleton width={60} height={12} style={{ marginLeft: 'auto' }} />
+      </div>
+      
+      {/* Highlight content */}
+      <div style={{ marginBottom: '0.5rem' }}>
+        <Skeleton count={2} style={{ marginBottom: '0.25rem' }} />
+        <Skeleton width="70%" />
+      </div>
+      
+      {/* Citation/context */}
+      <div style={{ marginTop: '0.75rem' }}>
+        <Skeleton width="90%" height={12} />
+      </div>
+    </div>
+  )
+}
+

src/components/Skeletons/SkeletonThemeProvider.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react'
+import { SkeletonTheme } from 'react-loading-skeleton'
+
+interface SkeletonThemeProviderProps {
+  children: React.ReactNode
+}
+
+export const SkeletonThemeProvider: React.FC<SkeletonThemeProviderProps> = ({ children }) => {
+  const [colors, setColors] = useState({
+    baseColor: '#27272a',
+    highlightColor: '#52525b'
+  })
+
+  useEffect(() => {
+    const updateColors = () => {
+      const rootStyles = getComputedStyle(document.documentElement)
+      const baseColor = rootStyles.getPropertyValue('--color-bg-elevated').trim() || '#27272a'
+      const highlightColor = rootStyles.getPropertyValue('--color-border-subtle').trim() || '#52525b'
+      
+      setColors({ baseColor, highlightColor })
+    }
+
+    // Initial update
+    updateColors()
+
+    // Watch for theme changes via MutationObserver
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          updateColors()
+        }
+      })
+    })
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <SkeletonTheme baseColor={colors.baseColor} highlightColor={colors.highlightColor}>
+      {children}
+    </SkeletonTheme>
+  )
+}
+

src/components/Skeletons/index.ts

@@ -0,0 +1,6 @@
+export { SkeletonThemeProvider } from './SkeletonThemeProvider'
+export { BookmarkSkeleton } from './BookmarkSkeleton'
+export { BlogPostSkeleton } from './BlogPostSkeleton'
+export { HighlightSkeleton } from './HighlightSkeleton'
+export { ContentSkeleton } from './ContentSkeleton'
+

src/components/Support.tsx

@@ -0,0 +1,235 @@
+import React, { useEffect, useState } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHeart, faSpinner, faUserCircle } from '@fortawesome/free-solid-svg-icons'
+import { fetchBorisZappers, ZapSender } from '../services/zapReceiptService'
+import { fetchProfiles } from '../services/profileService'
+import { UserSettings } from '../services/settingsService'
+import { Models } from 'applesauce-core'
+import { useEventModel } from 'applesauce-react/hooks'
+import { useNavigate } from 'react-router-dom'
+import { nip19 } from 'nostr-tools'
+
+interface SupportProps {
+  relayPool: RelayPool
+  eventStore: IEventStore
+  settings: UserSettings
+}
+
+type SupporterProfile = ZapSender
+
+const Support: React.FC<SupportProps> = ({ relayPool, eventStore, settings }) => {
+  const [supporters, setSupporters] = useState<SupporterProfile[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadSupporters = async () => {
+      setLoading(true)
+      try {
+        const zappers = await fetchBorisZappers(relayPool)
+        
+        if (zappers.length > 0) {
+          const pubkeys = zappers.map(z => z.pubkey)
+          await fetchProfiles(relayPool, eventStore, pubkeys, settings)
+        }
+        
+        setSupporters(zappers)
+      } catch (error) {
+        console.error('Failed to load supporters:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadSupporters()
+  }, [relayPool, eventStore, settings])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen p-4">
+        <FontAwesomeIcon icon={faSpinner} spin size="2x" className="text-zinc-400" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: 'var(--color-bg)', color: 'var(--color-text)' }}>
+      <div className="max-w-5xl mx-auto px-4 py-12 md:py-16">
+        <div className="text-center mb-16 md:mb-20">
+          <div className="flex justify-center mb-8">
+            <img 
+              src="/thank-you.svg" 
+              alt="Thank you" 
+              className="w-56 h-56 md:w-72 md:h-72 opacity-90"
+            />
+          </div>
+          <h1 className="text-4xl md:text-5xl font-bold mb-4" style={{ color: 'var(--color-text)' }}>
+            Thank You!
+          </h1>
+          <p className="text-lg md:text-xl max-w-2xl mx-auto leading-relaxed" style={{ color: 'var(--color-text-secondary)' }}>
+            Your{' '}
+            <a 
+              href="https://www.readwithboris.com/#pricing" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="underline hover:no-underline"
+              style={{ color: 'var(--color-primary)' }}
+            >
+              zaps
+            </a>
+            {' '}help keep this project alive.
+          </p>
+        </div>
+
+        {supporters.length === 0 ? (
+          <div className="text-center py-12" style={{ color: 'var(--color-text-muted)' }}>
+            <p>No supporters yet. Be the first to zap Boris!</p>
+          </div>
+        ) : (
+          <>
+            {/* Whales Section */}
+            {supporters.filter(s => s.isWhale).length > 0 && (
+              <div className="mb-16 md:mb-20">
+                <h2 className="text-2xl md:text-3xl font-semibold mb-8 md:mb-10 text-center" style={{ color: 'var(--color-text)' }}>
+                  Legends
+                </h2>
+                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8 md:gap-10">
+                  {supporters.filter(s => s.isWhale).map(supporter => (
+                    <SupporterCard key={supporter.pubkey} supporter={supporter} isWhale={true} />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Regular Supporters Section */}
+            {supporters.filter(s => !s.isWhale).length > 0 && (
+              <div className="mb-12">
+                <h2 className="text-xl md:text-2xl font-semibold mb-8 text-center" style={{ color: 'var(--color-text)' }}>
+                  Supporters
+                </h2>
+                <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-4 md:gap-5">
+                  {supporters.filter(s => !s.isWhale).map(supporter => (
+                    <SupporterCard key={supporter.pubkey} supporter={supporter} isWhale={false} />
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+
+        <div className="mt-16 md:mt-20 pt-8 border-t" style={{ borderColor: 'var(--color-border-subtle)' }}>
+          <div className="text-center space-y-4">
+            <p className="text-base" style={{ color: 'var(--color-text-secondary)' }}>
+              Zap{' '}
+              <a 
+                href="https://njump.me/npub19802see0gnk3vjlus0dnmfdagusqrtmsxpl5yfmkwn9uvnfnqylqduhr0x" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="underline hover:no-underline"
+                style={{ color: 'var(--color-primary)' }}
+              >
+                Boris
+              </a>
+              {' '}a{' '}
+              <a 
+                href="https://www.readwithboris.com/#pricing" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="underline hover:no-underline"
+                style={{ color: 'var(--color-primary)' }}
+              >
+              meaningful amount of sats
+            </a>
+            {' '}and your avatar will show above.
+            </p>
+            <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+              Total supporters: {supporters.length} • 
+              Total zaps: {supporters.reduce((sum, s) => sum + s.zapCount, 0)}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface SupporterCardProps {
+  supporter: SupporterProfile
+  isWhale: boolean
+}
+
+const SupporterCard: React.FC<SupporterCardProps> = ({ supporter, isWhale }) => {
+  const navigate = useNavigate()
+  const profile = useEventModel(Models.ProfileModel, [supporter.pubkey])
+
+  const picture = profile?.picture
+  const name = profile?.name || profile?.display_name || `${supporter.pubkey.slice(0, 8)}...`
+
+  const handleClick = () => {
+    const npub = nip19.npubEncode(supporter.pubkey)
+    navigate(`/p/${npub}`)
+  }
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative">
+        {/* Avatar */}
+        <div
+          className={`rounded-full overflow-hidden flex items-center justify-center cursor-pointer transition-transform hover:scale-105
+            ${isWhale ? 'w-24 h-24 md:w-28 md:h-28 ring-4 ring-yellow-400' : 'w-10 h-10 md:w-12 md:h-12'}
+          `}
+          style={{ 
+            backgroundColor: 'var(--color-bg-elevated)'
+          }}
+          title={`${name} • ${supporter.totalSats.toLocaleString()} sats`}
+          onClick={handleClick}
+        >
+          {picture ? (
+            <img
+              src={picture}
+              alt={name}
+              className="w-full h-full object-cover"
+              loading="lazy"
+            />
+          ) : (
+            <FontAwesomeIcon
+              icon={faUserCircle}
+              className={isWhale ? 'text-5xl' : 'text-3xl'}
+              style={{ color: 'var(--color-border)' }}
+            />
+          )}
+        </div>
+
+        {/* Whale Badge */}
+        {isWhale && (
+          <div 
+            className="absolute -bottom-1 -right-1 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center border-2"
+            style={{ borderColor: 'var(--color-bg)' }}
+          >
+            <FontAwesomeIcon icon={faHeart} className="text-zinc-900 text-sm" />
+          </div>
+        )}
+      </div>
+
+      {/* Name and Total */}
+      <div className="mt-2 text-center">
+        <p 
+          className={`font-medium truncate max-w-full ${isWhale ? 'text-sm' : 'text-xs'}`}
+          style={{ color: 'var(--color-text)' }}
+        >
+          {name}
+        </p>
+        <p 
+          className={isWhale ? 'text-xs' : 'text-[10px]'}
+          style={{ color: 'var(--color-text-muted)' }}
+        >
+          {supporter.totalSats.toLocaleString()} sats
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default Support
+

src/components/ThreePaneLayout.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBookmark, faHighlighter } from '@fortawesome/free-solid-svg-icons'
 import { RelayPool } from 'applesauce-relay'
@@ -32,6 +32,7 @@ interface ThreePaneLayoutProps {
   showExplore?: boolean
   showMe?: boolean
   showProfile?: boolean
+  showSupport?: boolean
   
   // Bookmarks pane
   bookmarks: Bookmark[]
@@ -46,6 +47,8 @@ interface ThreePaneLayoutProps {
   onRefresh: () => void
   relayPool: RelayPool | null
   eventStore: IEventStore | null
+  readingPositions?: Map<string, number>
+  markedAsReadIds?: Set<string>
   
   // Content pane
   readerLoading: boolean
@@ -93,6 +96,9 @@ interface ThreePaneLayoutProps {
   
   // Optional Profile content
   profile?: React.ReactNode
+  
+  // Optional Support content
+  support?: React.ReactNode
 }
 
 const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
@@ -101,13 +107,33 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
   const highlightsRef = useRef<HTMLDivElement>(null)
   const mainPaneRef = useRef<HTMLDivElement>(null)
   
-  // Detect scroll direction to hide/show mobile buttons
-  // Now using window scroll (document scroll) instead of pane scroll
+  // Detect scroll direction and position to hide/show mobile buttons
+  // Only hide on scroll down when viewing article content
+  const isViewingArticle = !!(props.selectedUrl)
   const scrollDirection = useScrollDirection({ 
     threshold: 10, 
-    enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed
+    enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && isViewingArticle
   })
-  const showMobileButtons = scrollDirection !== 'down'
+  
+  // Track if we're at the top of the page
+  const [isAtTop, setIsAtTop] = useState(true)
+  useEffect(() => {
+    if (!isMobile || !isViewingArticle) return
+    
+    const handleScroll = () => {
+      setIsAtTop(window.scrollY <= 10)
+    }
+    
+    handleScroll() // Check initial position
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [isMobile, isViewingArticle])
+  
+  // Bookmark button: hide only when scrolling down
+  const showBookmarkButton = scrollDirection !== 'down'
+  // Highlights button: hide when scrolling down OR at the top
+  const showHighlightsButton = scrollDirection !== 'down' && !isAtTop
 
   // Lock body scroll when mobile sidebar or highlights is open
   useEffect(() => {
@@ -225,11 +251,11 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
 
   return (
     <>
-      {/* Mobile bookmark button - only show when viewing article (not on settings/explore/me/profile) */}
-      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && !props.showProfile && (
+      {/* Mobile bookmark button - always show except on settings page */}
+      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && (
         <button
           className={`fixed z-[900] bg-zinc-800/70 border border-zinc-600/40 rounded-lg text-zinc-200 flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${
-            showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
+            showBookmarkButton ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
           }`}
           style={{
             top: 'calc(1rem + env(safe-area-inset-top))',
@@ -245,11 +271,11 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
         </button>
       )}
 
-      {/* Mobile highlights button - only show when viewing article (not on settings/explore/me/profile) */}
-      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && !props.showProfile && (
+      {/* Mobile highlights button - only show when viewing article content */}
+      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && isViewingArticle && (
         <button
           className={`fixed z-[900] border border-zinc-600/40 rounded-lg flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${
-            showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
+            showHighlightsButton ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
           }`}
           style={{ 
             top: 'calc(1rem + env(safe-area-inset-top))',
@@ -299,8 +325,10 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             lastFetchTime={props.lastFetchTime}
             loading={props.bookmarksLoading}
             relayPool={props.relayPool}
-            settings={props.settings}
             isMobile={isMobile}
+            readingPositions={props.readingPositions}
+            markedAsReadIds={props.markedAsReadIds}
+            settings={props.settings}
           />
         </div>
         <div 
@@ -329,6 +357,11 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             <>
               {props.profile}
             </>
+          ) : props.showSupport && props.support ? (
+            // Render Support inside the main pane to keep side panels
+            <>
+              {props.support}
+            </>
           ) : (
             <ContentPanel 
               loading={props.readerLoading}
@@ -394,7 +427,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
       )}
       <RelayStatusIndicator 
         relayPool={props.relayPool}
-        showOnMobile={showMobileButtons}
+        showOnMobile={showBookmarkButton}
       />
       {props.toastMessage && (
         <Toast

src/config/kinds.ts

@@ -0,0 +1,15 @@
+// Nostr event kinds used throughout the application
+export const KINDS = {
+  Highlights: 9802,              // NIP-?? user highlights
+  BlogPost: 30023,               // NIP-23 long-form article
+  AppData: 30078,                // NIP-78 application data (reading positions)
+  List: 30001,                   // NIP-51 list (addressable)
+  ListReplaceable: 30003,        // NIP-51 replaceable list
+  ListSimple: 10003,             // NIP-51 simple list
+  WebBookmark: 39701,            // NIP-B0 web bookmark
+  ReactionToEvent: 7,            // emoji reaction to event (used for mark-as-read)
+  ReactionToUrl: 17              // emoji reaction to URL (used for mark-as-read)
+} as const
+
+export type KindValue = typeof KINDS[keyof typeof KINDS]
+

src/config/network.ts

@@ -0,0 +1,12 @@
+// Centralized network configuration for relay queries
+// Keep timeouts modest for local-first, longer for remote; tweak per use-case
+
+export const LOCAL_TIMEOUT_MS = 1200
+export const REMOTE_TIMEOUT_MS = 6000
+
+// Contacts often need a bit more time on mobile networks
+export const CONTACTS_REMOTE_TIMEOUT_MS = 9000
+
+// Future knobs could live here (e.g., max limits per kind)
+
+

src/config/nostrGateways.ts

@@ -2,20 +2,21 @@
  * Nostr gateway URLs for viewing events and profiles on the web
  */
 
-export const NOSTR_GATEWAY = 'https://ants.sh' as const
+export const NOSTR_GATEWAY = 'https://nostr.at' as const
+export const SEARCH_PORTAL = 'https://ants.sh' as const
 
 /**
  * Get a profile URL on the gateway
  */
 export function getProfileUrl(npub: string): string {
-  return `${NOSTR_GATEWAY}/p/${npub}`
+  return `${NOSTR_GATEWAY}/${npub}`
 }
 
 /**
  * Get an event URL on the gateway
  */
 export function getEventUrl(nevent: string): string {
-  return `${NOSTR_GATEWAY}/e/${nevent}`
+  return `${NOSTR_GATEWAY}/${nevent}`
 }
 
 /**
@@ -23,12 +24,14 @@ export function getEventUrl(nevent: string): string {
  * Automatically detects if it's a profile (npub/nprofile) or event (note/nevent/naddr)
  */
 export function getNostrUrl(identifier: string): string {
-  // Check the prefix to determine if it's a profile or event
-  if (identifier.startsWith('npub') || identifier.startsWith('nprofile')) {
-    return `${NOSTR_GATEWAY}/p/${identifier}`
-  }
-  
-  // Everything else (note, nevent, naddr) goes to /e/
-  return `${NOSTR_GATEWAY}/e/${identifier}`
+  // nostr.at uses simple /{identifier} format for all types
+  return `${NOSTR_GATEWAY}/${identifier}`
+}
+
+/**
+ * Get a search portal URL with a query
+ */
+export function getSearchUrl(query: string): string {
+  return `${SEARCH_PORTAL}/?q=${encodeURIComponent(query)}`
 }
 

src/hooks/useAdaptiveTextColor.ts

@@ -0,0 +1,90 @@
+import { useEffect, useState } from 'react'
+import { FastAverageColor } from 'fast-average-color'
+
+interface AdaptiveTextColor {
+  textColor: string
+}
+
+/**
+ * Hook to determine optimal text color based on image background
+ * Samples the top-right corner of the image to ensure publication date is readable
+ * 
+ * @param imageUrl - The URL of the image to analyze
+ * @returns Object containing textColor for optimal contrast
+ */
+export function useAdaptiveTextColor(imageUrl: string | undefined): AdaptiveTextColor {
+  const [colors, setColors] = useState<AdaptiveTextColor>({
+    textColor: '#ffffff'
+  })
+
+  useEffect(() => {
+    if (!imageUrl) {
+      // No image, use default white text
+      setColors({
+        textColor: '#ffffff'
+      })
+      return
+    }
+
+    const fac = new FastAverageColor()
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    
+    img.onload = () => {
+      try {
+        const width = img.naturalWidth
+        const height = img.naturalHeight
+        
+        // Sample top-right corner (last 25% width, first 25% height)
+        const color = fac.getColor(img, {
+          left: Math.floor(width * 0.75),
+          top: 0,
+          width: Math.floor(width * 0.25),
+          height: Math.floor(height * 0.25)
+        })
+        
+        console.log('Adaptive color detected:', {
+          hex: color.hex,
+          rgb: color.rgb,
+          isLight: color.isLight,
+          isDark: color.isDark
+        })
+        
+        // Use library's built-in isLight check for optimal contrast
+        if (color.isLight) {
+          console.log('Light background detected, using black text')
+          setColors({
+            textColor: '#000000'
+          })
+        } else {
+          console.log('Dark background detected, using white text')
+          setColors({
+            textColor: '#ffffff'
+          })
+        }
+      } catch (error) {
+        // Fallback to default on error
+        console.error('Error analyzing image color:', error)
+        setColors({
+          textColor: '#ffffff'
+        })
+      }
+    }
+    
+    img.onerror = () => {
+      // Fallback to default if image fails to load
+      setColors({
+        textColor: '#ffffff'
+      })
+    }
+    
+    img.src = imageUrl
+
+    return () => {
+      fac.destroy()
+    }
+  }, [imageUrl])
+
+  return colors
+}
+

src/hooks/useBookmarksData.ts

@@ -1,22 +1,27 @@
 import { useState, useEffect, useCallback } from 'react'
 import { RelayPool } from 'applesauce-relay'
+import { IAccount, AccountManager } from 'applesauce-accounts'
+import { IEventStore } from 'applesauce-core'
 import { Bookmark } from '../types/bookmarks'
 import { Highlight } from '../types/highlights'
 import { fetchBookmarks } from '../services/bookmarkService'
 import { fetchHighlights, fetchHighlightsForArticle } from '../services/highlightService'
 import { fetchContacts } from '../services/contactService'
 import { UserSettings } from '../services/settingsService'
+import { loadReadingPosition, generateArticleIdentifier } from '../services/readingPositionService'
+import { fetchReadArticles } from '../services/libraryService'
+import { nip19 } from 'nostr-tools'
 
 interface UseBookmarksDataParams {
   relayPool: RelayPool | null
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  activeAccount: any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  accountManager: any
+  activeAccount: IAccount | undefined
+  accountManager: AccountManager
   naddr?: string
+  externalUrl?: string
   currentArticleCoordinate?: string
   currentArticleEventId?: string
   settings?: UserSettings
+  eventStore?: IEventStore
 }
 
 export const useBookmarksData = ({
@@ -24,9 +29,11 @@ export const useBookmarksData = ({
   activeAccount,
   accountManager,
   naddr,
+  externalUrl,
   currentArticleCoordinate,
   currentArticleEventId,
-  settings
+  settings,
+  eventStore
 }: UseBookmarksDataParams) => {
   const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
   const [bookmarksLoading, setBookmarksLoading] = useState(true)
@@ -35,6 +42,8 @@ export const useBookmarksData = ({
   const [followedPubkeys, setFollowedPubkeys] = useState<Set<string>>(new Set())
   const [isRefreshing, setIsRefreshing] = useState(false)
   const [lastFetchTime, setLastFetchTime] = useState<number | null>(null)
+  const [readingPositions, setReadingPositions] = useState<Map<string, number>>(new Map())
+  const [markedAsReadIds, setMarkedAsReadIds] = useState<Set<string>>(new Set())
 
   const handleFetchContacts = useCallback(async () => {
     if (!relayPool || !activeAccount) return
@@ -116,11 +125,100 @@ export const useBookmarksData = ({
   // Fetch highlights/contacts independently to avoid disturbing bookmarks
   useEffect(() => {
     if (!relayPool || !activeAccount) return
-    if (!naddr) {
+    // Only fetch general highlights when not viewing an article (naddr) or external URL
+    // External URLs have their highlights fetched by useExternalUrlLoader
+    if (!naddr && !externalUrl) {
       handleFetchHighlights()
     }
     handleFetchContacts()
-  }, [relayPool, activeAccount, naddr, handleFetchHighlights, handleFetchContacts])
+  }, [relayPool, activeAccount, naddr, externalUrl, handleFetchHighlights, handleFetchContacts])
+
+  // Fetch marked-as-read articles
+  useEffect(() => {
+    const loadMarkedAsRead = async () => {
+      if (!activeAccount || !relayPool || !eventStore || bookmarks.length === 0) {
+        return
+      }
+
+      try {
+        const readArticles = await fetchReadArticles(relayPool, activeAccount.pubkey)
+        
+        // Create a set of bookmark IDs that are marked as read
+        const markedBookmarkIds = new Set<string>()
+        
+        // For each read article, we need to match it to bookmark IDs
+        for (const readArticle of readArticles) {
+          // Add the event ID directly (for web bookmarks and legacy compatibility)
+          markedBookmarkIds.add(readArticle.id)
+          
+          // For nostr-native articles (kind:7 reactions), also add the coordinate format
+          if (readArticle.eventId && readArticle.eventAuthor && readArticle.eventKind) {
+            // Try to get the event from the eventStore to find the 'd' tag
+            const event = eventStore.getEvent(readArticle.eventId)
+            if (event) {
+              const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+              const coordinate = `${event.kind}:${event.pubkey}:${dTag}`
+              markedBookmarkIds.add(coordinate)
+            }
+          }
+        }
+        
+        setMarkedAsReadIds(markedBookmarkIds)
+      } catch (error) {
+        console.warn('⚠️ [Bookmarks] Failed to load marked-as-read articles:', error)
+      }
+    }
+
+    loadMarkedAsRead()
+  }, [relayPool, activeAccount, eventStore, bookmarks])
+
+  // Load reading positions for bookmarked articles (kind:30023)
+  useEffect(() => {
+    const loadPositions = async () => {
+      if (!activeAccount || !relayPool || !eventStore || bookmarks.length === 0 || !settings?.syncReadingPosition) {
+        return
+      }
+
+      const positions = new Map<string, number>()
+
+      // Extract all kind:30023 articles from bookmarks
+      const articles = bookmarks.flatMap(bookmark => 
+        (bookmark.individualBookmarks || []).filter(item => item.kind === 30023)
+      )
+
+      await Promise.all(
+        articles.map(async (article) => {
+          try {
+            const dTag = article.tags.find(t => t[0] === 'd')?.[1] || ''
+            const naddr = nip19.naddrEncode({
+              kind: 30023,
+              pubkey: article.pubkey,
+              identifier: dTag
+            })
+            const articleUrl = `nostr:${naddr}`
+            const identifier = generateArticleIdentifier(articleUrl)
+
+            const savedPosition = await loadReadingPosition(
+              relayPool,
+              eventStore,
+              activeAccount.pubkey,
+              identifier
+            )
+
+            if (savedPosition && savedPosition.position > 0) {
+              positions.set(article.id, savedPosition.position)
+            }
+          } catch (error) {
+            console.warn('⚠️ [Bookmarks] Failed to load reading position for article:', error)
+          }
+        })
+      )
+
+      setReadingPositions(positions)
+    }
+
+    loadPositions()
+  }, [bookmarks, activeAccount, relayPool, eventStore, settings?.syncReadingPosition])
 
   return {
     bookmarks,
@@ -134,7 +232,9 @@ export const useBookmarksData = ({
     lastFetchTime,
     handleFetchBookmarks,
     handleFetchHighlights,
-    handleRefreshAll
+    handleRefreshAll,
+    readingPositions,
+    markedAsReadIds
   }
 }
 

src/hooks/useBookmarksUI.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { NostrEvent } from 'nostr-tools'
 import { HighlightVisibility } from '../components/HighlightsPanel'
 import { UserSettings } from '../services/settingsService'
@@ -47,9 +47,9 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
     })
   }, [settings])
 
-  const toggleSidebar = () => {
+  const toggleSidebar = useCallback(() => {
     setIsSidebarOpen(prev => !prev)
-  }
+  }, [])
 
   return {
     isMobile,

src/hooks/useExternalUrlLoader.ts

@@ -71,7 +71,7 @@ export function useExternalUrlLoader({
           // Check if fetchHighlightsForUrl exists, otherwise skip
           if (typeof fetchHighlightsForUrl === 'function') {
             const seen = new Set<string>()
-            const highlightsList = await fetchHighlightsForUrl(
+            await fetchHighlightsForUrl(
               relayPool,
               url,
               (highlight) => {
@@ -84,9 +84,9 @@ export function useExternalUrlLoader({
                 })
               }
             )
-            // Ensure final list is sorted and contains all items
-            setHighlights(highlightsList.sort((a, b) => b.created_at - a.created_at))
-            console.log(`📌 Found ${highlightsList.length} highlights for URL`)
+            // Highlights are already set via the streaming callback
+            // No need to set them again as that could cause a flash/disappearance
+            console.log(`📌 Finished fetching highlights for URL`)
           } else {
             console.log('📌 Highlight fetching for URLs not yet implemented')
           }

src/hooks/useHighlightCreation.ts

@@ -3,6 +3,7 @@ import { flushSync } from 'react-dom'
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
 import { IEventStore } from 'applesauce-core'
+import { IAccount } from 'applesauce-accounts'
 import { Highlight } from '../types/highlights'
 import { ReadableContent } from '../services/readerService'
 import { createHighlight } from '../services/highlightCreationService'
@@ -10,8 +11,7 @@ import { HighlightButtonRef } from '../components/HighlightButton'
 import { UserSettings } from '../services/settingsService'
 
 interface UseHighlightCreationParams {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  activeAccount: any
+  activeAccount: IAccount | undefined
   relayPool: RelayPool | null
   eventStore: IEventStore | null
   currentArticle: NostrEvent | undefined

src/hooks/useImageCache.ts

@@ -1,5 +1,3 @@
-import { UserSettings } from '../services/settingsService'
-
 /**
  * Hook to return image URL for display
  * Service Worker handles all caching transparently
@@ -9,9 +7,7 @@ import { UserSettings } from '../services/settingsService'
  * @returns The image URL (Service Worker handles caching)
  */
 export function useImageCache(
-  imageUrl: string | undefined,
-  // eslint-disable-next-line no-unused-vars
-  _settings?: UserSettings
+  imageUrl: string | undefined
 ): string | undefined {
   // Service Worker handles everything - just return the URL as-is
   return imageUrl
@@ -22,9 +18,7 @@ export function useImageCache(
  * Triggers a fetch so the SW can cache it even if not visible yet
  */
 export function useCacheImageOnLoad(
-  imageUrl: string | undefined,
-  // eslint-disable-next-line no-unused-vars
-  _settings?: UserSettings
+  imageUrl: string | undefined
 ): void {
   // Service Worker will cache on first fetch
   // This hook is now a no-op, kept for API compatibility

src/hooks/usePullToRefresh.ts

@@ -1,153 +0,0 @@
-import { useEffect, useRef, useState, RefObject } from 'react'
-import { useIsCoarsePointer } from './useMediaQuery'
-
-interface UsePullToRefreshOptions {
-  onRefresh: () => void | Promise<void>
-  isRefreshing?: boolean
-  disabled?: boolean
-  threshold?: number // Distance in pixels to trigger refresh
-  resistance?: number // Resistance factor (higher = harder to pull)
-}
-
-interface PullToRefreshState {
-  isPulling: boolean
-  pullDistance: number
-  canRefresh: boolean
-}
-
-/**
- * Hook to enable pull-to-refresh gesture on touch devices
- * @param containerRef - Ref to the scrollable container element
- * @param options - Configuration options
- * @returns State of the pull gesture
- */
-export function usePullToRefresh(
-  containerRef: RefObject<HTMLElement>,
-  options: UsePullToRefreshOptions
-): PullToRefreshState {
-  const {
-    onRefresh,
-    isRefreshing = false,
-    disabled = false,
-    threshold = 80,
-    resistance = 2.5
-  } = options
-
-  const isTouch = useIsCoarsePointer()
-  const [pullState, setPullState] = useState<PullToRefreshState>({
-    isPulling: false,
-    pullDistance: 0,
-    canRefresh: false
-  })
-
-  const touchStartY = useRef<number>(0)
-  const startScrollTop = useRef<number>(0)
-  const isDragging = useRef<boolean>(false)
-
-  useEffect(() => {
-    const container = containerRef.current
-    if (!container || !isTouch || disabled || isRefreshing) return
-
-    const handleTouchStart = (e: TouchEvent) => {
-      // Only start if scrolled to top
-      const scrollTop = container.scrollTop
-      if (scrollTop <= 0) {
-        touchStartY.current = e.touches[0].clientY
-        startScrollTop.current = scrollTop
-        isDragging.current = true
-      }
-    }
-
-    const handleTouchMove = (e: TouchEvent) => {
-      if (!isDragging.current) return
-
-      const currentY = e.touches[0].clientY
-      const deltaY = currentY - touchStartY.current
-      const scrollTop = container.scrollTop
-
-      // Only pull down when at top and pulling down
-      if (scrollTop <= 0 && deltaY > 0) {
-        // Prevent default scroll behavior
-        e.preventDefault()
-
-        // Apply resistance to make pulling feel natural
-        const distance = Math.min(deltaY / resistance, threshold * 1.5)
-        const canRefresh = distance >= threshold
-
-        setPullState({
-          isPulling: true,
-          pullDistance: distance,
-          canRefresh
-        })
-      } else {
-        // Reset if scrolled or pulling up
-        isDragging.current = false
-        setPullState({
-          isPulling: false,
-          pullDistance: 0,
-          canRefresh: false
-        })
-      }
-    }
-
-    const handleTouchEnd = async () => {
-      if (!isDragging.current) return
-
-      isDragging.current = false
-
-      if (pullState.canRefresh && !isRefreshing) {
-        // Keep the indicator visible while refreshing
-        setPullState(prev => ({
-          ...prev,
-          isPulling: false
-        }))
-
-        // Trigger refresh
-        await onRefresh()
-      }
-
-      // Reset state
-      setPullState({
-        isPulling: false,
-        pullDistance: 0,
-        canRefresh: false
-      })
-    }
-
-    const handleTouchCancel = () => {
-      isDragging.current = false
-      setPullState({
-        isPulling: false,
-        pullDistance: 0,
-        canRefresh: false
-      })
-    }
-
-    // Add event listeners with passive: false to allow preventDefault
-    container.addEventListener('touchstart', handleTouchStart, { passive: true })
-    container.addEventListener('touchmove', handleTouchMove, { passive: false })
-    container.addEventListener('touchend', handleTouchEnd, { passive: true })
-    container.addEventListener('touchcancel', handleTouchCancel, { passive: true })
-
-    return () => {
-      container.removeEventListener('touchstart', handleTouchStart)
-      container.removeEventListener('touchmove', handleTouchMove)
-      container.removeEventListener('touchend', handleTouchEnd)
-      container.removeEventListener('touchcancel', handleTouchCancel)
-    }
-  }, [containerRef, isTouch, disabled, isRefreshing, threshold, resistance, onRefresh, pullState.canRefresh])
-
-  // Reset pull state when refresh completes
-  useEffect(() => {
-    if (!isRefreshing && pullState.isPulling) {
-      setPullState({
-        isPulling: false,
-        pullDistance: 0,
-        canRefresh: false
-      })
-    }
-  }, [isRefreshing, pullState.isPulling])
-
-  return pullState
-}
-

src/hooks/useReadingPosition.ts

@@ -1,21 +1,72 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, useCallback } from 'react'
 
 interface UseReadingPositionOptions {
   enabled?: boolean
   onPositionChange?: (position: number) => void
   onReadingComplete?: () => void
   readingCompleteThreshold?: number // Default 0.9 (90%)
+  syncEnabled?: boolean // Whether to sync positions to Nostr
+  onSave?: (position: number) => void // Callback for saving position
+  autoSaveInterval?: number // Auto-save interval in ms (default 5000)
 }
 
 export const useReadingPosition = ({
   enabled = true,
   onPositionChange,
   onReadingComplete,
-  readingCompleteThreshold = 0.9
+  readingCompleteThreshold = 0.9,
+  syncEnabled = false,
+  onSave,
+  autoSaveInterval = 5000
 }: UseReadingPositionOptions = {}) => {
   const [position, setPosition] = useState(0)
   const [isReadingComplete, setIsReadingComplete] = useState(false)
   const hasTriggeredComplete = useRef(false)
+  const lastSavedPosition = useRef(0)
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // Debounced save function
+  const scheduleSave = useCallback((currentPosition: number) => {
+    if (!syncEnabled || !onSave) return
+    
+    // Don't save if position is too low (< 5%)
+    if (currentPosition < 0.05) return
+    
+    // Don't save if position hasn't changed significantly (less than 1%)
+    // But always save if we've reached 100% (completion)
+    const hasSignificantChange = Math.abs(currentPosition - lastSavedPosition.current) >= 0.01
+    const hasReachedCompletion = currentPosition === 1 && lastSavedPosition.current < 1
+    
+    if (!hasSignificantChange && !hasReachedCompletion) return
+
+    // Clear existing timer
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current)
+    }
+
+    // Schedule new save
+    saveTimerRef.current = setTimeout(() => {
+      lastSavedPosition.current = currentPosition
+      onSave(currentPosition)
+    }, autoSaveInterval)
+  }, [syncEnabled, onSave, autoSaveInterval])
+
+  // Immediate save function
+  const saveNow = useCallback(() => {
+    if (!syncEnabled || !onSave) return
+    
+    // Cancel any pending saves
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current)
+      saveTimerRef.current = null
+    }
+
+    // Save if position is meaningful (>= 5%)
+    if (position >= 0.05) {
+      lastSavedPosition.current = position
+      onSave(position)
+    }
+  }, [syncEnabled, onSave, position])
 
   useEffect(() => {
     if (!enabled) return
@@ -30,12 +81,20 @@ export const useReadingPosition = ({
       const documentHeight = document.documentElement.scrollHeight
       
       // Calculate position based on how much of the content has been scrolled through
-      const scrollProgress = Math.min(scrollTop / (documentHeight - windowHeight), 1)
-      const clampedProgress = Math.max(0, Math.min(1, scrollProgress))
+      // Add a small threshold (5px) to account for rounding and make it easier to reach 100%
+      const maxScroll = documentHeight - windowHeight
+      const scrollProgress = maxScroll > 0 ? scrollTop / maxScroll : 0
+      
+      // If we're within 5px of the bottom, consider it 100%
+      const isAtBottom = scrollTop + windowHeight >= documentHeight - 5
+      const clampedProgress = isAtBottom ? 1 : Math.max(0, Math.min(1, scrollProgress))
       
       setPosition(clampedProgress)
       onPositionChange?.(clampedProgress)
 
+      // Schedule auto-save if sync is enabled
+      scheduleSave(clampedProgress)
+
       // Check if reading is complete
       if (clampedProgress >= readingCompleteThreshold && !hasTriggeredComplete.current) {
         setIsReadingComplete(true)
@@ -54,8 +113,13 @@ export const useReadingPosition = ({
     return () => {
       window.removeEventListener('scroll', handleScroll)
       window.removeEventListener('resize', handleScroll)
+      
+      // Clear save timer on unmount
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current)
+      }
     }
-  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold])
+  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold, scheduleSave])
 
   // Reset reading complete state when enabled changes
   useEffect(() => {
@@ -68,6 +132,7 @@ export const useReadingPosition = ({
   return {
     position,
     isReadingComplete,
-    progressPercentage: Math.round(position * 100)
+    progressPercentage: Math.round(position * 100),
+    saveNow
   }
 }

src/hooks/useSettings.ts

@@ -73,6 +73,9 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       root.setProperty('--highlight-color-friends', settings.highlightColorFriends || '#f97316')
       root.setProperty('--highlight-color-nostrverse', settings.highlightColorNostrverse || '#9333ea')
       
+      // Set paragraph alignment
+      root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify')
+      
       console.log('✅ All styles applied')
     }
     
@@ -85,7 +88,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       const fullAccount = accountManager.getActive()
       if (!fullAccount) throw new Error('No active account')
       const factory = new EventFactory({ signer: fullAccount })
-      await saveSettings(relayPool, eventStore, factory, newSettings, RELAYS)
+      await saveSettings(relayPool, eventStore, factory, newSettings)
       setSettings(newSettings)
       setToastType('success')
       setToastMessage('Settings saved')

src/index.css

@@ -13,6 +13,7 @@
 @import './styles/components/settings.css';
 @import './styles/components/me.css';
 @import './styles/components/pull-to-refresh.css';
+@import './styles/components/skeletons.css';
 @import './styles/utils/animations.css';
 @import './styles/utils/utilities.css';
 @import './styles/utils/legacy.css';

src/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './styles/tailwind.css'
 import './index.css'
+import 'react-loading-skeleton/dist/skeleton.css'
 
 // Register Service Worker for PWA functionality
 if ('serviceWorker' in navigator) {

src/services/bookmarkEvents.ts

@@ -19,7 +19,7 @@ export function dedupeNip51Events(events: NostrEvent[]): NostrEvent[] {
   const webBookmarks = unique.filter(e => e.kind === 39701)
 
   const bookmarkLists = unique
-    .filter(e => e.kind === 10003 || e.kind === 30001)
+    .filter(e => e.kind === 10003 || e.kind === 30003 || e.kind === 30001)
     .sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
   const latestBookmarkList = bookmarkLists.find(list => !list.tags?.some((t: string[]) => t[0] === 'd'))
 

src/services/bookmarkHelpers.ts

@@ -16,11 +16,24 @@ export interface BookmarkData {
   tags?: string[][]
 }
 
+export interface AddressPointer {
+  kind: number
+  pubkey: string
+  identifier: string
+  relays?: string[]
+}
+
+export interface EventPointer {
+  id: string
+  relays?: string[]
+  author?: string
+}
+
 export interface ApplesauceBookmarks {
-  notes?: BookmarkData[]
-  articles?: BookmarkData[]
-  hashtags?: BookmarkData[]
-  urls?: BookmarkData[]
+  notes?: EventPointer[]
+  articles?: AddressPointer[]
+  hashtags?: string[]
+  urls?: string[]
 }
 
 export interface AccountWithExtension {
@@ -55,25 +68,83 @@ export const processApplesauceBookmarks = (
 
   if (typeof bookmarks === 'object' && bookmarks !== null && !Array.isArray(bookmarks)) {
     const applesauceBookmarks = bookmarks as ApplesauceBookmarks
-    const allItems: BookmarkData[] = []
-    if (applesauceBookmarks.notes) allItems.push(...applesauceBookmarks.notes)
-    if (applesauceBookmarks.articles) allItems.push(...applesauceBookmarks.articles)
-    if (applesauceBookmarks.hashtags) allItems.push(...applesauceBookmarks.hashtags)
-    if (applesauceBookmarks.urls) allItems.push(...applesauceBookmarks.urls)
+    const allItems: IndividualBookmark[] = []
+    
+    // Process notes (EventPointer[])
+    if (applesauceBookmarks.notes) {
+      applesauceBookmarks.notes.forEach((note: EventPointer) => {
+        allItems.push({
+          id: note.id,
+          content: '',
+          created_at: Math.floor(Date.now() / 1000),
+          pubkey: note.author || activeAccount.pubkey,
+          kind: 1, // Short note kind
+          tags: [],
+          parsedContent: undefined,
+          type: 'event' as const,
+          isPrivate,
+          added_at: Math.floor(Date.now() / 1000)
+        })
+      })
+    }
+    
+    // Process articles (AddressPointer[])
+    if (applesauceBookmarks.articles) {
+      applesauceBookmarks.articles.forEach((article: AddressPointer) => {
+        // Convert AddressPointer to coordinate format: kind:pubkey:identifier
+        const coordinate = `${article.kind}:${article.pubkey}:${article.identifier || ''}`
+        allItems.push({
+          id: coordinate,
+          content: '',
+          created_at: Math.floor(Date.now() / 1000),
+          pubkey: article.pubkey,
+          kind: article.kind, // Usually 30023 for long-form articles
+          tags: [],
+          parsedContent: undefined,
+          type: 'event' as const,
+          isPrivate,
+          added_at: Math.floor(Date.now() / 1000)
+        })
+      })
+    }
+    
+    // Process hashtags (string[])
+    if (applesauceBookmarks.hashtags) {
+      applesauceBookmarks.hashtags.forEach((hashtag: string) => {
+        allItems.push({
+          id: `hashtag-${hashtag}`,
+          content: `#${hashtag}`,
+          created_at: Math.floor(Date.now() / 1000),
+          pubkey: activeAccount.pubkey,
+          kind: 1,
+          tags: [['t', hashtag]],
+          parsedContent: undefined,
+          type: 'event' as const,
+          isPrivate,
+          added_at: Math.floor(Date.now() / 1000)
+        })
+      })
+    }
+    
+    // Process URLs (string[])
+    if (applesauceBookmarks.urls) {
+      applesauceBookmarks.urls.forEach((url: string) => {
+        allItems.push({
+          id: `url-${url}`,
+          content: url,
+          created_at: Math.floor(Date.now() / 1000),
+          pubkey: activeAccount.pubkey,
+          kind: 1,
+          tags: [['r', url]],
+          parsedContent: undefined,
+          type: 'event' as const,
+          isPrivate,
+          added_at: Math.floor(Date.now() / 1000)
+        })
+      })
+    }
+    
     return allItems
-      .filter((bookmark: BookmarkData) => bookmark.id) // Skip bookmarks without valid IDs
-      .map((bookmark: BookmarkData) => ({
-        id: bookmark.id!,
-        content: bookmark.content || '',
-        created_at: bookmark.created_at || Math.floor(Date.now() / 1000),
-        pubkey: activeAccount.pubkey,
-        kind: bookmark.kind || 30001,
-        tags: bookmark.tags || [],
-        parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
-        type: 'event' as const,
-        isPrivate,
-        added_at: bookmark.created_at || Math.floor(Date.now() / 1000)
-      }))
   }
 
   const bookmarkArray = Array.isArray(bookmarks) ? bookmarks : [bookmarks]

src/services/bookmarkProcessing.ts

@@ -33,6 +33,12 @@ export async function collectBookmarksFromEvents(
     if (!latestContent && evt.content && !Helpers.hasHiddenContent(evt)) latestContent = evt.content
     if (Array.isArray(evt.tags)) allTags = allTags.concat(evt.tags)
 
+    // Extract the 'd' tag and metadata for bookmark sets (kind 30003)
+    const dTag = evt.kind === 30003 ? evt.tags?.find((t: string[]) => t[0] === 'd')?.[1] : undefined
+    const setTitle = evt.kind === 30003 ? evt.tags?.find((t: string[]) => t[0] === 'title')?.[1] : undefined
+    const setDescription = evt.kind === 30003 ? evt.tags?.find((t: string[]) => t[0] === 'description')?.[1] : undefined
+    const setImage = evt.kind === 30003 ? evt.tags?.find((t: string[]) => t[0] === 'image')?.[1] : undefined
+
     // Handle web bookmarks (kind:39701) as individual bookmarks
     if (evt.kind === 39701) {
       publicItemsAll.push({
@@ -45,13 +51,27 @@ export async function collectBookmarksFromEvents(
         parsedContent: undefined,
         type: 'web' as const,
         isPrivate: false,
-        added_at: evt.created_at || Math.floor(Date.now() / 1000)
+        added_at: evt.created_at || Math.floor(Date.now() / 1000),
+        sourceKind: 39701,
+        setName: dTag,
+        setTitle,
+        setDescription,
+        setImage
       })
       continue
     }
 
     const pub = Helpers.getPublicBookmarks(evt)
-    publicItemsAll.push(...processApplesauceBookmarks(pub, activeAccount, false))
+    publicItemsAll.push(
+      ...processApplesauceBookmarks(pub, activeAccount, false).map(i => ({
+        ...i,
+        sourceKind: evt.kind,
+        setName: dTag,
+        setTitle,
+        setDescription,
+        setImage
+      }))
+    )
 
     try {
       if (Helpers.hasHiddenTags(evt) && !Helpers.isHiddenTagsUnlocked(evt) && signerCandidate) {
@@ -94,7 +114,16 @@ export async function collectBookmarksFromEvents(
           try {
             const hiddenTags = JSON.parse(decryptedContent) as string[][]
             const manualPrivate = Helpers.parseBookmarkTags(hiddenTags)
-            privateItemsAll.push(...processApplesauceBookmarks(manualPrivate, activeAccount, true))
+            privateItemsAll.push(
+              ...processApplesauceBookmarks(manualPrivate, activeAccount, true).map(i => ({
+                ...i,
+                sourceKind: evt.kind,
+                setName: dTag,
+                setTitle,
+                setDescription,
+                setImage
+              }))
+            )
             Reflect.set(evt, BookmarkHiddenSymbol, manualPrivate)
             Reflect.set(evt, 'EncryptedContentSymbol', decryptedContent)
             // Don't set latestContent to decrypted JSON - it's not user-facing content
@@ -106,7 +135,16 @@ export async function collectBookmarksFromEvents(
 
       const priv = Helpers.getHiddenBookmarks(evt)
       if (priv) {
-        privateItemsAll.push(...processApplesauceBookmarks(priv, activeAccount, true))
+        privateItemsAll.push(
+          ...processApplesauceBookmarks(priv, activeAccount, true).map(i => ({
+            ...i,
+            sourceKind: evt.kind,
+            setName: dTag,
+            setTitle,
+            setDescription,
+            setImage
+          }))
+        )
       }
     } catch {
       // ignore individual event failures

src/services/bookmarkService.ts

@@ -1,12 +1,10 @@
-import { RelayPool, completeOnEose } from 'applesauce-relay'
-import { lastValueFrom, merge, Observable, takeUntil, timer, toArray } from 'rxjs'
+import { RelayPool } from 'applesauce-relay'
 import {
   AccountWithExtension,
   NostrEvent,
   dedupeNip51Events,
   hydrateItems,
   isAccountWithExtension,
-  isHexId,
   hasNip04Decrypt,
   hasNip44Decrypt,
   dedupeBookmarksById,
@@ -16,7 +14,8 @@ import { Bookmark } from '../types/bookmarks'
 import { collectBookmarksFromEvents } from './bookmarkProcessing.ts'
 import { UserSettings } from './settingsService'
 import { rebroadcastEvents } from './rebroadcastService'
-import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
+import { queryEvents } from './dataFetch'
+import { KINDS } from '../config/kinds'
 
 
 
@@ -31,23 +30,14 @@ export const fetchBookmarks = async (
     if (!isAccountWithExtension(activeAccount)) {
       throw new Error('Invalid account object provided')
     }
-    // Get relay URLs from the pool
-    const relayUrls = prioritizeLocalRelays(Array.from(relayPool.relays.values()).map(relay => relay.url))
-    const { local: localRelays, remote: remoteRelays } = partitionRelays(relayUrls)
     // Fetch bookmark events - NIP-51 standards, legacy formats, and web bookmarks (NIP-B0)
-    console.log('🔍 Fetching bookmark events from relays:', relayUrls)
-    // Try local-first quickly, then full set fallback
-    const local$ = localRelays.length > 0
-      ? relayPool
-          .req(localRelays, { kinds: [10003, 30003, 30001, 39701], authors: [activeAccount.pubkey] })
-          .pipe(completeOnEose(), takeUntil(timer(1200)))
-      : new Observable<NostrEvent>((sub) => sub.complete())
-    const remote$ = remoteRelays.length > 0
-      ? relayPool
-          .req(remoteRelays, { kinds: [10003, 30003, 30001, 39701], authors: [activeAccount.pubkey] })
-          .pipe(completeOnEose(), takeUntil(timer(6000)))
-      : new Observable<NostrEvent>((sub) => sub.complete())
-    const rawEvents = await lastValueFrom(merge(local$, remote$).pipe(toArray()))
+    console.log('🔍 Fetching bookmark events')
+
+    const rawEvents = await queryEvents(
+      relayPool,
+      { kinds: [KINDS.ListSimple, KINDS.ListReplaceable, KINDS.List, KINDS.WebBookmark], authors: [activeAccount.pubkey] },
+      {}
+    )
     console.log('📊 Raw events fetched:', rawEvents.length, 'events')
     
     // Rebroadcast bookmark events to local/all relays based on settings
@@ -67,11 +57,28 @@ export const fetchBookmarks = async (
     rawEvents.forEach((evt, i) => {
       const dTag = evt.tags?.find((t: string[]) => t[0] === 'd')?.[1] || 'none'
       const contentPreview = evt.content ? evt.content.slice(0, 50) + (evt.content.length > 50 ? '...' : '') : 'empty'
-      console.log(`  Event ${i}: kind=${evt.kind}, id=${evt.id?.slice(0, 8)}, dTag=${dTag}, contentLength=${evt.content?.length || 0}, contentPreview=${contentPreview}`)
+      const eTags = evt.tags?.filter((t: string[]) => t[0] === 'e').length || 0
+      const aTags = evt.tags?.filter((t: string[]) => t[0] === 'a').length || 0
+      console.log(`  Event ${i}: kind=${evt.kind}, id=${evt.id?.slice(0, 8)}, dTag=${dTag}, contentLength=${evt.content?.length || 0}, eTags=${eTags}, aTags=${aTags}, contentPreview=${contentPreview}`)
     })
 
     const bookmarkListEvents = dedupeNip51Events(rawEvents)
     console.log('📋 After deduplication:', bookmarkListEvents.length, 'bookmark events')
+    
+    // Log which events made it through deduplication
+    bookmarkListEvents.forEach((evt, i) => {
+      const dTag = evt.tags?.find((t: string[]) => t[0] === 'd')?.[1] || 'none'
+      console.log(`  Dedupe ${i}: kind=${evt.kind}, id=${evt.id?.slice(0, 8)}, dTag="${dTag}"`)
+    })
+    
+    // Check specifically for Primal's "reads" list
+    const primalReads = rawEvents.find(e => e.kind === KINDS.ListSimple && e.tags?.find((t: string[]) => t[0] === 'd' && t[1] === 'reads'))
+    if (primalReads) {
+      console.log('✅ Found Primal reads list:', primalReads.id.slice(0, 8))
+    } else {
+      console.log('❌ No Primal reads list found (kind:10003 with d="reads")')
+    }
+    
     if (bookmarkListEvents.length === 0) {
       // Keep existing bookmarks visible; do not clear list if nothing new found
       return
@@ -107,23 +114,88 @@ export const fetchBookmarks = async (
     )
 
     const allItems = [...publicItemsAll, ...privateItemsAll]
-    const noteIds = Array.from(new Set(allItems.map(i => i.id).filter(isHexId)))
-    let idToEvent: Map<string, NostrEvent> = new Map()
+    
+    // Separate hex IDs (regular events) from coordinates (addressable events)
+    const noteIds: string[] = []
+    const coordinates: string[] = []
+    
+    allItems.forEach(i => {
+      // Check if it's a hex ID (64 character hex string)
+      if (/^[0-9a-f]{64}$/i.test(i.id)) {
+        noteIds.push(i.id)
+      } else if (i.id.includes(':')) {
+        // Coordinate format: kind:pubkey:identifier
+        coordinates.push(i.id)
+      }
+    })
+    
+    const idToEvent: Map<string, NostrEvent> = new Map()
+    
+    // Fetch regular events by ID
     if (noteIds.length > 0) {
       try {
-        const { local: localHydrate, remote: remoteHydrate } = partitionRelays(relayUrls)
-        const localHydrate$ = localHydrate.length > 0
-          ? relayPool.req(localHydrate, { ids: noteIds }).pipe(completeOnEose(), takeUntil(timer(800)))
-          : new Observable<NostrEvent>((sub) => sub.complete())
-        const remoteHydrate$ = remoteHydrate.length > 0
-          ? relayPool.req(remoteHydrate, { ids: noteIds }).pipe(completeOnEose(), takeUntil(timer(2500)))
-          : new Observable<NostrEvent>((sub) => sub.complete())
-        const events: NostrEvent[] = await lastValueFrom(merge(localHydrate$, remoteHydrate$).pipe(toArray()))
-        idToEvent = new Map(events.map((e: NostrEvent) => [e.id, e]))
+        const events = await queryEvents(
+          relayPool,
+          { ids: Array.from(new Set(noteIds)) },
+          { localTimeoutMs: 800, remoteTimeoutMs: 2500 }
+        )
+        events.forEach((e: NostrEvent) => {
+          idToEvent.set(e.id, e)
+          // Also store by coordinate if it's an addressable event
+          if (e.kind && e.kind >= 30000 && e.kind < 40000) {
+            const dTag = e.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+            const coordinate = `${e.kind}:${e.pubkey}:${dTag}`
+            idToEvent.set(coordinate, e)
+          }
+        })
       } catch (error) {
-        console.warn('Failed to fetch events for hydration:', error)
+        console.warn('Failed to fetch events by ID:', error)
       }
     }
+    
+    // Fetch addressable events by coordinates
+    if (coordinates.length > 0) {
+      try {
+        // Group by kind for more efficient querying
+        const byKind = new Map<number, Array<{ pubkey: string; identifier: string }>>()
+        
+        coordinates.forEach(coord => {
+          const parts = coord.split(':')
+          const kind = parseInt(parts[0])
+          const pubkey = parts[1]
+          const identifier = parts[2] || ''
+          
+          if (!byKind.has(kind)) {
+            byKind.set(kind, [])
+          }
+          byKind.get(kind)!.push({ pubkey, identifier })
+        })
+        
+        // Query each kind group
+        for (const [kind, items] of byKind.entries()) {
+          const authors = Array.from(new Set(items.map(i => i.pubkey)))
+          const identifiers = Array.from(new Set(items.map(i => i.identifier)))
+          
+          const events = await queryEvents(
+            relayPool,
+            { kinds: [kind], authors, '#d': identifiers },
+            { localTimeoutMs: 800, remoteTimeoutMs: 2500 }
+          )
+          
+          events.forEach((e: NostrEvent) => {
+            const dTag = e.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+            const coordinate = `${e.kind}:${e.pubkey}:${dTag}`
+            idToEvent.set(coordinate, e)
+            // Also store by event ID
+            idToEvent.set(e.id, e)
+          })
+        }
+      } catch (error) {
+        console.warn('Failed to fetch addressable events:', error)
+      }
+    }
+    
+    console.log(`📦 Hydration: fetched ${idToEvent.size} events for ${allItems.length} bookmarks (${noteIds.length} notes, ${coordinates.length} articles)`)
     const allBookmarks = dedupeBookmarksById([
       ...hydrateItems(publicItemsAll, idToEvent),
       ...hydrateItems(privateItemsAll, idToEvent)

src/services/contactService.ts

@@ -1,6 +1,7 @@
-import { RelayPool, completeOnEose } from 'applesauce-relay'
-import { lastValueFrom, merge, Observable, takeUntil, timer, toArray } from 'rxjs'
+import { RelayPool } from 'applesauce-relay'
 import { prioritizeLocalRelays } from '../utils/helpers'
+import { queryEvents } from './dataFetch'
+import { CONTACTS_REMOTE_TIMEOUT_MS } from '../config/network'
 
 /**
  * Fetches the contact list (follows) for a specific user
@@ -15,24 +16,27 @@ export const fetchContacts = async (
 ): Promise<Set<string>> => {
   try {
     const relayUrls = prioritizeLocalRelays(Array.from(relayPool.relays.values()).map(relay => relay.url))
-    
     console.log('🔍 Fetching contacts (kind 3) for user:', pubkey)
-    
-    // Local-first quick attempt
-    const localRelays = relayUrls.filter(url => url.includes('localhost') || url.includes('127.0.0.1'))
-    const remoteRelays = relayUrls.filter(url => !url.includes('localhost') && !url.includes('127.0.0.1'))
-    const local$ = localRelays.length > 0
-      ? relayPool
-          .req(localRelays, { kinds: [3], authors: [pubkey] })
-          .pipe(completeOnEose(), takeUntil(timer(1200)))
-      : new Observable<{ created_at: number; tags: string[][] }>((sub) => sub.complete())
-    const remote$ = remoteRelays.length > 0
-      ? relayPool
-          .req(remoteRelays, { kinds: [3], authors: [pubkey] })
-          .pipe(completeOnEose(), takeUntil(timer(6000)))
-      : new Observable<{ created_at: number; tags: string[][] }>((sub) => sub.complete())
-    const events = await lastValueFrom(
-      merge(local$, remote$).pipe(toArray())
+
+    const partialFollowed = new Set<string>()
+    const events = await queryEvents(
+      relayPool,
+      { kinds: [3], authors: [pubkey] },
+      {
+        relayUrls,
+        remoteTimeoutMs: CONTACTS_REMOTE_TIMEOUT_MS,
+        onEvent: (event: { created_at: number; tags: string[][] }) => {
+          // Stream partials as we see any contact list
+          for (const tag of event.tags) {
+            if (tag[0] === 'p' && tag[1]) {
+              partialFollowed.add(tag[1])
+            }
+          }
+          if (onPartial && partialFollowed.size > 0) {
+            onPartial(new Set(partialFollowed))
+          }
+        }
+      }
     )
     const followed = new Set<string>()
     if (events.length > 0) {

src/services/dataFetch.ts

@@ -0,0 +1,70 @@
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
+import { Observable, merge, takeUntil, timer, toArray, tap, lastValueFrom } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import { Filter } from 'nostr-tools/filter'
+import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
+import { LOCAL_TIMEOUT_MS, REMOTE_TIMEOUT_MS } from '../config/network'
+
+export interface QueryOptions {
+  relayUrls?: string[]
+  localTimeoutMs?: number
+  remoteTimeoutMs?: number
+  onEvent?: (event: NostrEvent) => void
+}
+
+/**
+ * Unified local-first query helper with optional streaming callback.
+ * Returns all collected events (deduped by id) after both streams complete or time out.
+ */
+export async function queryEvents(
+  relayPool: RelayPool,
+  filter: Filter,
+  options: QueryOptions = {}
+): Promise<NostrEvent[]> {
+  const {
+    relayUrls,
+    localTimeoutMs = LOCAL_TIMEOUT_MS,
+    remoteTimeoutMs = REMOTE_TIMEOUT_MS,
+    onEvent
+  } = options
+
+  const urls = relayUrls && relayUrls.length > 0
+    ? relayUrls
+    : Array.from(relayPool.relays.values()).map(r => r.url)
+
+  const ordered = prioritizeLocalRelays(urls)
+  const { local: localRelays, remote: remoteRelays } = partitionRelays(ordered)
+
+  const local$: Observable<NostrEvent> = localRelays.length > 0
+    ? relayPool
+        .req(localRelays, filter)
+        .pipe(
+          onlyEvents(),
+          onEvent ? tap((e: NostrEvent) => onEvent(e)) : tap(() => {}),
+          completeOnEose(),
+          takeUntil(timer(localTimeoutMs))
+        ) as unknown as Observable<NostrEvent>
+    : new Observable<NostrEvent>((sub) => sub.complete())
+
+  const remote$: Observable<NostrEvent> = remoteRelays.length > 0
+    ? relayPool
+        .req(remoteRelays, filter)
+        .pipe(
+          onlyEvents(),
+          onEvent ? tap((e: NostrEvent) => onEvent(e)) : tap(() => {}),
+          completeOnEose(),
+          takeUntil(timer(remoteTimeoutMs))
+        ) as unknown as Observable<NostrEvent>
+    : new Observable<NostrEvent>((sub) => sub.complete())
+
+  const events = await lastValueFrom(merge(local$, remote$).pipe(toArray()))
+
+  // Deduplicate by id (callers can perform higher-level replaceable grouping if needed)
+  const byId = new Map<string, NostrEvent>()
+  for (const ev of events) {
+    if (!byId.has(ev.id)) byId.set(ev.id, ev)
+  }
+  return Array.from(byId.values())
+}
+
+

src/services/exploreService.ts

@@ -1,8 +1,8 @@
-import { RelayPool, completeOnEose } from 'applesauce-relay'
-import { lastValueFrom, merge, Observable, takeUntil, timer, toArray } from 'rxjs'
-import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
+import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
+import { queryEvents } from './dataFetch'
+import { KINDS } from '../config/kinds'
 
 const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
@@ -35,49 +35,38 @@ export const fetchBlogPostsFromAuthors = async (
     }
 
     console.log('📚 Fetching blog posts (kind 30023) from', pubkeys.length, 'authors')
-    
-    const prioritized = prioritizeLocalRelays(relayUrls)
-    const { local: localRelays, remote: remoteRelays } = partitionRelays(prioritized)
 
     // Deduplicate replaceable events by keeping the most recent version
     // Group by author + d-tag identifier
     const uniqueEvents = new Map<string, NostrEvent>()
 
-    const processEvents = (incoming: NostrEvent[]) => {
-      for (const event of incoming) {
-        const dTag = event.tags.find(t => t[0] === 'd')?.[1] || ''
-        const key = `${event.pubkey}:${dTag}`
-        const existing = uniqueEvents.get(key)
-        if (!existing || event.created_at > existing.created_at) {
-          uniqueEvents.set(key, event)
-          // Emit as we incorporate
-          if (onPost) {
-            const post: BlogPostPreview = {
-              event,
-              title: getArticleTitle(event) || 'Untitled',
-              summary: getArticleSummary(event),
-              image: getArticleImage(event),
-              published: getArticlePublished(event),
-              author: event.pubkey
+    await queryEvents(
+      relayPool,
+      { kinds: [KINDS.BlogPost], authors: pubkeys, limit: 100 },
+      {
+        relayUrls,
+        onEvent: (event: NostrEvent) => {
+          const dTag = event.tags.find(t => t[0] === 'd')?.[1] || ''
+          const key = `${event.pubkey}:${dTag}`
+          const existing = uniqueEvents.get(key)
+          if (!existing || event.created_at > existing.created_at) {
+            uniqueEvents.set(key, event)
+            // Emit as we incorporate
+            if (onPost) {
+              const post: BlogPostPreview = {
+                event,
+                title: getArticleTitle(event) || 'Untitled',
+                summary: getArticleSummary(event),
+                image: getArticleImage(event),
+                published: getArticlePublished(event),
+                author: event.pubkey
+              }
+              onPost(post)
             }
-            onPost(post)
           }
         }
       }
-    }
-
-    const local$ = localRelays.length > 0
-      ? relayPool
-          .req(localRelays, { kinds: [30023], authors: pubkeys, limit: 100 })
-          .pipe(completeOnEose(), takeUntil(timer(1200)))
-      : new Observable<NostrEvent>((sub) => sub.complete())
-    const remote$ = remoteRelays.length > 0
-      ? relayPool
-          .req(remoteRelays, { kinds: [30023], authors: pubkeys, limit: 100 })
-          .pipe(completeOnEose(), takeUntil(timer(6000)))
-      : new Observable<NostrEvent>((sub) => sub.complete())
-    const events = await lastValueFrom(merge(local$, remote$).pipe(toArray()))
-    processEvents(events)
+    )
 
     console.log('📊 Blog post events fetched (unique):', uniqueEvents.size)
     

src/services/highlightCreationService.ts

@@ -7,12 +7,12 @@ import { Helpers, IEventStore } from 'applesauce-core'
 import { RELAYS } from '../config/relays'
 import { Highlight } from '../types/highlights'
 import { UserSettings } from './settingsService'
-import { areAllRelaysLocal } from '../utils/helpers'
-import { markEventAsOfflineCreated } from './offlineSyncService'
+import { isLocalRelay, areAllRelaysLocal } from '../utils/helpers'
+import { publishEvent } from './writeService'
 
 // Boris pubkey for zap splits
 // npub19802see0gnk3vjlus0dnmfdagusqrtmsxpl5yfmkwn9uvnfnqylqduhr0x
-const BORIS_PUBKEY = '29dea8672f44ed164bfc83db3da5bd472001af70307f42277674cbc64d33013e'
+export const BORIS_PUBKEY = '29dea8672f44ed164bfc83db3da5bd472001af70307f42277674cbc64d33013e'
 
 const {
   getHighlightText,
@@ -118,59 +118,26 @@ export async function createHighlight(
   // Sign the event
   const signedEvent = await factory.sign(highlightEvent)
 
-  // Publish to all configured relays - let the relay pool handle connection state
-  const targetRelays = RELAYS
-  
-  // Store the event in the local EventStore FIRST for immediate UI display
-  eventStore.add(signedEvent)
-  console.log('💾 Stored highlight in EventStore:', signedEvent.id.slice(0, 8))
-  
-  // Check current connection status - are we online or in flight mode?
+  // Use unified write service to store and publish
+  await publishEvent(relayPool, eventStore, signedEvent)
+
+  // Check current connection status for UI feedback
   const connectedRelays = Array.from(relayPool.relays.values())
     .filter(relay => relay.connected)
     .map(relay => relay.url)
-  
-  const hasRemoteConnection = connectedRelays.some(url => 
-    !url.includes('localhost') && !url.includes('127.0.0.1')
-  )
-  
-  // Determine which relays we expect to succeed
-  const expectedSuccessRelays = hasRemoteConnection 
-    ? RELAYS 
-    : RELAYS.filter(r => r.includes('localhost') || r.includes('127.0.0.1'))
-  
+
+  const hasRemoteConnection = connectedRelays.some(url => !isLocalRelay(url))
+  const expectedSuccessRelays = hasRemoteConnection
+    ? RELAYS
+    : RELAYS.filter(isLocalRelay)
   const isLocalOnly = areAllRelaysLocal(expectedSuccessRelays)
-  
-  console.log('📍 Highlight relay status:', {
-    targetRelays: targetRelays.length,
-    expectedSuccessRelays,
-    isLocalOnly,
-    hasRemoteConnection,
-    eventId: signedEvent.id
-  })
-  
-  // If we're in local-only mode, mark this event for later sync
-  if (isLocalOnly) {
-    markEventAsOfflineCreated(signedEvent.id)
-  }
-  
+
   // Convert to Highlight with relay tracking info and return IMMEDIATELY
   const highlight = eventToHighlight(signedEvent)
-  highlight.publishedRelays = expectedSuccessRelays // Show only relays we expect to succeed
+  highlight.publishedRelays = expectedSuccessRelays
   highlight.isLocalOnly = isLocalOnly
-  highlight.isOfflineCreated = isLocalOnly // Mark as created offline if local-only
-  
-  // Publish to relays in the background (non-blocking)
-  // This allows instant UI updates while publishing happens asynchronously
-  relayPool.publish(targetRelays, signedEvent)
-    .then(() => {
-      console.log('✅ Highlight published to', targetRelays.length, 'relay(s):', targetRelays)
-    })
-    .catch((error) => {
-      console.warn('⚠️ Failed to publish highlight to relays (event still saved locally):', error)
-    })
-  
-  // Return the highlight immediately for instant UI updates
+  highlight.isOfflineCreated = isLocalOnly
+
   return highlight
 }
 

src/services/highlights/fetchByAuthor.ts

@@ -6,6 +6,7 @@ import { prioritizeLocalRelays, partitionRelays } from '../../utils/helpers'
 import { eventToHighlight, dedupeHighlights, sortHighlights } from '../highlightEventProcessor'
 import { UserSettings } from '../settingsService'
 import { rebroadcastEvents } from '../rebroadcastService'
+import { KINDS } from '../../config/kinds'
 
 export const fetchHighlights = async (
   relayPool: RelayPool,
@@ -21,7 +22,7 @@ export const fetchHighlights = async (
     const seenIds = new Set<string>()
     const local$ = localRelays.length > 0
       ? relayPool
-          .req(localRelays, { kinds: [9802], authors: [pubkey] })
+          .req(localRelays, { kinds: [KINDS.Highlights], authors: [pubkey] })
           .pipe(
             onlyEvents(),
             tap((event: NostrEvent) => {
@@ -36,7 +37,7 @@ export const fetchHighlights = async (
       : new Observable<NostrEvent>((sub) => sub.complete())
     const remote$ = remoteRelays.length > 0
       ? relayPool
-          .req(remoteRelays, { kinds: [9802], authors: [pubkey] })
+          .req(remoteRelays, { kinds: [KINDS.Highlights], authors: [pubkey] })
           .pipe(
             onlyEvents(),
             tap((event: NostrEvent) => {

src/services/highlights/fetchForUrl.ts

@@ -14,10 +14,11 @@ export const fetchHighlightsForUrl = async (
   onHighlight?: (highlight: Highlight) => void,
   settings?: UserSettings
 ): Promise<Highlight[]> => {
+  const seenIds = new Set<string>()
+  const orderedRelaysUrl = prioritizeLocalRelays(RELAYS)
+  const { local: localRelaysUrl, remote: remoteRelaysUrl } = partitionRelays(orderedRelaysUrl)
+  
   try {
-    const seenIds = new Set<string>()
-    const orderedRelaysUrl = prioritizeLocalRelays(RELAYS)
-    const { local: localRelaysUrl, remote: remoteRelaysUrl } = partitionRelays(orderedRelaysUrl)
     const local$ = localRelaysUrl.length > 0
       ? relayPool
           .req(localRelaysUrl, { kinds: [9802], '#r': [url] })
@@ -45,11 +46,23 @@ export const fetchHighlightsForUrl = async (
           )
       : new Observable<NostrEvent>((sub) => sub.complete())
     const rawEvents: NostrEvent[] = await lastValueFrom(merge(local$, remote$).pipe(toArray()))
-    await rebroadcastEvents(rawEvents, relayPool, settings)
+    
+    console.log(`📌 Fetched ${rawEvents.length} highlight events for URL:`, url)
+    
+    // Rebroadcast events - but don't let errors here break the highlight display
+    try {
+      await rebroadcastEvents(rawEvents, relayPool, settings)
+    } catch (err) {
+      console.warn('Failed to rebroadcast highlight events:', err)
+    }
+    
     const uniqueEvents = dedupeHighlights(rawEvents)
     const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
     return sortHighlights(highlights)
-  } catch {
+  } catch (err) {
+    console.error('Error fetching highlights for URL:', err)
+    // Return highlights that were already streamed via callback
+    // Don't return empty array as that would clear already-displayed highlights
     return []
   }
 }

src/services/highlights/fetchFromAuthors.ts

@@ -1,9 +1,8 @@
-import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
-import { lastValueFrom, merge, Observable, takeUntil, timer, tap, toArray } from 'rxjs'
+import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
 import { Highlight } from '../../types/highlights'
-import { prioritizeLocalRelays, partitionRelays } from '../../utils/helpers'
 import { eventToHighlight, dedupeHighlights, sortHighlights } from '../highlightEventProcessor'
+import { queryEvents } from '../dataFetch'
 
 /**
  * Fetches highlights (kind:9802) from a list of pubkeys (friends)
@@ -24,46 +23,20 @@ export const fetchHighlightsFromAuthors = async (
     }
 
     console.log('💡 Fetching highlights (kind 9802) from', pubkeys.length, 'authors')
-    
-    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
-    const prioritized = prioritizeLocalRelays(relayUrls)
-    const { local: localRelays, remote: remoteRelays } = partitionRelays(prioritized)
 
     const seenIds = new Set<string>()
-    
-    const local$ = localRelays.length > 0
-      ? relayPool
-          .req(localRelays, { kinds: [9802], authors: pubkeys, limit: 200 })
-          .pipe(
-            onlyEvents(),
-            tap((event: NostrEvent) => {
-              if (!seenIds.has(event.id)) {
-                seenIds.add(event.id)
-                if (onHighlight) onHighlight(eventToHighlight(event))
-              }
-            }),
-            completeOnEose(),
-            takeUntil(timer(1200))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-      
-    const remote$ = remoteRelays.length > 0
-      ? relayPool
-          .req(remoteRelays, { kinds: [9802], authors: pubkeys, limit: 200 })
-          .pipe(
-            onlyEvents(),
-            tap((event: NostrEvent) => {
-              if (!seenIds.has(event.id)) {
-                seenIds.add(event.id)
-                if (onHighlight) onHighlight(eventToHighlight(event))
-              }
-            }),
-            completeOnEose(),
-            takeUntil(timer(6000))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-      
-    const rawEvents: NostrEvent[] = await lastValueFrom(merge(local$, remote$).pipe(toArray()))
+    const rawEvents = await queryEvents(
+      relayPool,
+      { kinds: [9802], authors: pubkeys, limit: 200 },
+      {
+        onEvent: (event: NostrEvent) => {
+          if (!seenIds.has(event.id)) {
+            seenIds.add(event.id)
+            if (onHighlight) onHighlight(eventToHighlight(event))
+          }
+        }
+      }
+    )
 
     const uniqueEvents = dedupeHighlights(rawEvents)
     const highlights = uniqueEvents.map(eventToHighlight)

src/services/libraryService.ts

@@ -1,11 +1,11 @@
-import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
-import { lastValueFrom, merge, Observable, takeUntil, timer, toArray } from 'rxjs'
+import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
 import { RELAYS } from '../config/relays'
-import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
+import { KINDS } from '../config/kinds'
 import { MARK_AS_READ_EMOJI } from './reactionService'
 import { BlogPostPreview } from './exploreService'
+import { queryEvents } from './dataFetch'
 
 const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
@@ -28,58 +28,11 @@ export async function fetchReadArticles(
   userPubkey: string
 ): Promise<ReadArticle[]> {
   try {
-    const orderedRelays = prioritizeLocalRelays(RELAYS)
-    const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
-
-    // Fetch kind:7 reactions (nostr-native articles)
-    const kind7Local$ = localRelays.length > 0
-      ? relayPool
-          .req(localRelays, { kinds: [7], authors: [userPubkey] })
-          .pipe(
-            onlyEvents(),
-            completeOnEose(),
-            takeUntil(timer(1200))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-
-    const kind7Remote$ = remoteRelays.length > 0
-      ? relayPool
-          .req(remoteRelays, { kinds: [7], authors: [userPubkey] })
-          .pipe(
-            onlyEvents(),
-            completeOnEose(),
-            takeUntil(timer(6000))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-
-    const kind7Events: NostrEvent[] = await lastValueFrom(
-      merge(kind7Local$, kind7Remote$).pipe(toArray())
-    )
-
-    // Fetch kind:17 reactions (external URLs)
-    const kind17Local$ = localRelays.length > 0
-      ? relayPool
-          .req(localRelays, { kinds: [17], authors: [userPubkey] })
-          .pipe(
-            onlyEvents(),
-            completeOnEose(),
-            takeUntil(timer(1200))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-
-    const kind17Remote$ = remoteRelays.length > 0
-      ? relayPool
-          .req(remoteRelays, { kinds: [17], authors: [userPubkey] })
-          .pipe(
-            onlyEvents(),
-            completeOnEose(),
-            takeUntil(timer(6000))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-
-    const kind17Events: NostrEvent[] = await lastValueFrom(
-      merge(kind17Local$, kind17Remote$).pipe(toArray())
-    )
+    // Fetch kind:7 and kind:17 reactions in parallel
+    const [kind7Events, kind17Events] = await Promise.all([
+      queryEvents(relayPool, { kinds: [KINDS.ReactionToEvent], authors: [userPubkey] }, { relayUrls: RELAYS }),
+      queryEvents(relayPool, { kinds: [KINDS.ReactionToUrl], authors: [userPubkey] }, { relayUrls: RELAYS })
+    ])
 
     const readArticles: ReadArticle[] = []
 
@@ -150,41 +103,20 @@ export async function fetchReadArticlesWithData(
     
     // Filter to only nostr-native articles (kind 30023)
     const nostrArticles = readArticles.filter(
-      article => article.eventKind === 30023 && article.eventId
+      article => article.eventKind === KINDS.BlogPost && article.eventId
     )
 
     if (nostrArticles.length === 0) {
       return []
     }
 
-    const orderedRelays = prioritizeLocalRelays(RELAYS)
-    const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
-
     // Fetch the actual article events
     const eventIds = nostrArticles.map(a => a.eventId!).filter(Boolean)
     
-    const local$ = localRelays.length > 0
-      ? relayPool
-          .req(localRelays, { kinds: [30023], ids: eventIds })
-          .pipe(
-            onlyEvents(),
-            completeOnEose(),
-            takeUntil(timer(1200))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-
-    const remote$ = remoteRelays.length > 0
-      ? relayPool
-          .req(remoteRelays, { kinds: [30023], ids: eventIds })
-          .pipe(
-            onlyEvents(),
-            completeOnEose(),
-            takeUntil(timer(6000))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-
-    const articleEvents: NostrEvent[] = await lastValueFrom(
-      merge(local$, remote$).pipe(toArray())
+    const articleEvents = await queryEvents(
+      relayPool,
+      { kinds: [KINDS.BlogPost], ids: eventIds },
+      { relayUrls: RELAYS }
     )
 
     // Deduplicate article events by ID

src/services/linksService.ts

@@ -0,0 +1,90 @@
+import { RelayPool } from 'applesauce-relay'
+import { fetchReadArticles } from './libraryService'
+import { queryEvents } from './dataFetch'
+import { RELAYS } from '../config/relays'
+import { KINDS } from '../config/kinds'
+import { ReadItem } from './readsService'
+import { processReadingPositions, processMarkedAsRead, filterValidItems, sortByReadingActivity } from './readingDataProcessor'
+import { mergeReadItem } from '../utils/readItemMerge'
+
+/**
+ * Fetches external URL links with reading progress from:
+ * - URLs with reading progress (kind:30078)
+ * - Manually marked as read URLs (kind:7, kind:17)
+ */
+export async function fetchLinks(
+  relayPool: RelayPool,
+  userPubkey: string,
+  onItem?: (item: ReadItem) => void
+): Promise<ReadItem[]> {
+  console.log('🔗 [Links] Fetching external links for user:', userPubkey.slice(0, 8))
+  
+  const linksMap = new Map<string, ReadItem>()
+  
+  // Helper to emit items as they're added/updated
+  const emitItem = (item: ReadItem) => {
+    if (onItem && mergeReadItem(linksMap, item)) {
+      onItem(linksMap.get(item.id)!)
+    } else if (!onItem) {
+      linksMap.set(item.id, item)
+    }
+  }
+  
+  try {
+    // Fetch all data sources in parallel
+    const [readingPositionEvents, markedAsReadArticles] = await Promise.all([
+      queryEvents(relayPool, { kinds: [KINDS.AppData], authors: [userPubkey] }, { relayUrls: RELAYS }),
+      fetchReadArticles(relayPool, userPubkey)
+    ])
+
+    console.log('📊 [Links] Data fetched:', {
+      readingPositions: readingPositionEvents.length,
+      markedAsRead: markedAsReadArticles.length
+    })
+
+    // Process reading positions and emit external items
+    processReadingPositions(readingPositionEvents, linksMap)
+    if (onItem) {
+      linksMap.forEach(item => {
+        if (item.type === 'external') {
+          const hasProgress = (item.readingProgress && item.readingProgress > 0) || item.markedAsRead
+          if (hasProgress) emitItem(item)
+        }
+      })
+    }
+    
+    // Process marked-as-read and emit external items
+    processMarkedAsRead(markedAsReadArticles, linksMap)
+    if (onItem) {
+      linksMap.forEach(item => {
+        if (item.type === 'external') {
+          const hasProgress = (item.readingProgress && item.readingProgress > 0) || item.markedAsRead
+          if (hasProgress) emitItem(item)
+        }
+      })
+    }
+
+    // Filter for external URLs only with reading progress
+    const links = Array.from(linksMap.values())
+      .filter(item => {
+        // Only external URLs
+        if (item.type !== 'external') return false
+        
+        // Only include if there's reading progress or marked as read
+        const hasProgress = (item.readingProgress && item.readingProgress > 0) || item.markedAsRead
+        return hasProgress
+      })
+
+    // Apply common validation and sorting
+    const validLinks = filterValidItems(links)
+    const sortedLinks = sortByReadingActivity(validLinks)
+
+    console.log('✅ [Links] Processed', sortedLinks.length, 'total links')
+    return sortedLinks
+
+  } catch (error) {
+    console.error('Failed to fetch links:', error)
+    return []
+  }
+}
+

src/services/meCache.ts

@@ -1,11 +1,12 @@
 import { Highlight } from '../types/highlights'
 import { Bookmark } from '../types/bookmarks'
-import { BlogPostPreview } from './exploreService'
+import { ReadItem } from './readsService'
 
 export interface MeCache {
   highlights: Highlight[]
   bookmarks: Bookmark[]
-  readArticles: BlogPostPreview[]
+  reads: ReadItem[]
+  links: ReadItem[]
   timestamp: number
 }
 
@@ -21,12 +22,14 @@ export function setCachedMeData(
   pubkey: string,
   highlights: Highlight[],
   bookmarks: Bookmark[],
-  readArticles: BlogPostPreview[]
+  reads: ReadItem[],
+  links: ReadItem[] = []
 ): void {
   meCache.set(pubkey, {
     highlights,
     bookmarks,
-    readArticles,
+    reads,
+    links,
     timestamp: Date.now()
   })
 }
@@ -45,10 +48,10 @@ export function updateCachedBookmarks(pubkey: string, bookmarks: Bookmark[]): vo
   }
 }
 
-export function updateCachedReadArticles(pubkey: string, readArticles: BlogPostPreview[]): void {
+export function updateCachedReads(pubkey: string, reads: ReadItem[]): void {
   const existing = meCache.get(pubkey)
   if (existing) {
-    meCache.set(pubkey, { ...existing, readArticles, timestamp: Date.now() })
+    meCache.set(pubkey, { ...existing, reads, timestamp: Date.now() })
   }
 }
 

src/services/nostrverseService.ts

@@ -0,0 +1,102 @@
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { Helpers } from 'applesauce-core'
+import { BlogPostPreview } from './exploreService'
+import { Highlight } from '../types/highlights'
+import { eventToHighlight, dedupeHighlights, sortHighlights } from './highlightEventProcessor'
+import { queryEvents } from './dataFetch'
+
+const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
+
+/**
+ * Fetches public blog posts (kind:30023) from the nostrverse (not filtered by author)
+ * @param relayPool - The relay pool to query
+ * @param relayUrls - Array of relay URLs to query
+ * @param limit - Maximum number of posts to fetch (default: 50)
+ * @returns Array of blog post previews
+ */
+export const fetchNostrverseBlogPosts = async (
+  relayPool: RelayPool,
+  relayUrls: string[],
+  limit = 50
+): Promise<BlogPostPreview[]> => {
+  try {
+    console.log('📚 Fetching nostrverse blog posts (kind 30023), limit:', limit)
+
+    // Deduplicate replaceable events by keeping the most recent version
+    const uniqueEvents = new Map<string, NostrEvent>()
+
+    await queryEvents(
+      relayPool,
+      { kinds: [30023], limit },
+      {
+        relayUrls,
+        onEvent: (event: NostrEvent) => {
+          const dTag = event.tags.find(t => t[0] === 'd')?.[1] || ''
+          const key = `${event.pubkey}:${dTag}`
+          const existing = uniqueEvents.get(key)
+          if (!existing || event.created_at > existing.created_at) {
+            uniqueEvents.set(key, event)
+          }
+        }
+      }
+    )
+
+    console.log('📊 Nostrverse blog post events fetched (unique):', uniqueEvents.size)
+    
+    // Convert to blog post previews and sort by published date (most recent first)
+    const blogPosts: BlogPostPreview[] = Array.from(uniqueEvents.values())
+      .map(event => ({
+        event,
+        title: getArticleTitle(event) || 'Untitled',
+        summary: getArticleSummary(event),
+        image: getArticleImage(event),
+        published: getArticlePublished(event),
+        author: event.pubkey
+      }))
+      .sort((a, b) => {
+        const timeA = a.published || a.event.created_at
+        const timeB = b.published || b.event.created_at
+        return timeB - timeA // Most recent first
+      })
+    
+    console.log('📰 Processed', blogPosts.length, 'unique nostrverse blog posts')
+    
+    return blogPosts
+  } catch (error) {
+    console.error('Failed to fetch nostrverse blog posts:', error)
+    return []
+  }
+}
+
+/**
+ * Fetches public highlights (kind:9802) from the nostrverse (not filtered by author)
+ * @param relayPool - The relay pool to query
+ * @param limit - Maximum number of highlights to fetch (default: 100)
+ * @returns Array of highlights
+ */
+export const fetchNostrverseHighlights = async (
+  relayPool: RelayPool,
+  limit = 100
+): Promise<Highlight[]> => {
+  try {
+    console.log('💡 Fetching nostrverse highlights (kind 9802), limit:', limit)
+
+    const rawEvents = await queryEvents(
+      relayPool,
+      { kinds: [9802], limit },
+      {}
+    )
+
+    const uniqueEvents = dedupeHighlights(rawEvents)
+    const highlights = uniqueEvents.map(eventToHighlight)
+    
+    console.log('💡 Processed', highlights.length, 'unique nostrverse highlights')
+    
+    return sortHighlights(highlights)
+  } catch (error) {
+    console.error('Failed to fetch nostrverse highlights:', error)
+    return []
+  }
+}
+

src/services/profileService.ts

@@ -0,0 +1,81 @@
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
+import { lastValueFrom, merge, Observable, takeUntil, timer, toArray, tap } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
+import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
+import { rebroadcastEvents } from './rebroadcastService'
+import { UserSettings } from './settingsService'
+
+/**
+ * Fetches profile metadata (kind:0) for a list of pubkeys
+ * Stores profiles in the event store and optionally to local relays
+ */
+export const fetchProfiles = async (
+  relayPool: RelayPool,
+  eventStore: IEventStore,
+  pubkeys: string[],
+  settings?: UserSettings
+): Promise<NostrEvent[]> => {
+  try {
+    if (pubkeys.length === 0) {
+      return []
+    }
+
+    const uniquePubkeys = Array.from(new Set(pubkeys))
+    console.log('👤 Fetching profiles (kind:0) for', uniquePubkeys.length, 'authors')
+
+    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    const prioritized = prioritizeLocalRelays(relayUrls)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(prioritized)
+
+    // Keep only the most recent profile for each pubkey
+    const profilesByPubkey = new Map<string, NostrEvent>()
+
+    const processEvent = (event: NostrEvent) => {
+      const existing = profilesByPubkey.get(event.pubkey)
+      if (!existing || event.created_at > existing.created_at) {
+        profilesByPubkey.set(event.pubkey, event)
+        // Store in event store immediately
+        eventStore.add(event)
+      }
+    }
+
+    const local$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, { kinds: [0], authors: uniquePubkeys })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => processEvent(event)),
+            completeOnEose(),
+            takeUntil(timer(1200))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+
+    const remote$ = remoteRelays.length > 0
+      ? relayPool
+          .req(remoteRelays, { kinds: [0], authors: uniquePubkeys })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => processEvent(event)),
+            completeOnEose(),
+            takeUntil(timer(6000))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+
+    await lastValueFrom(merge(local$, remote$).pipe(toArray()))
+
+    const profiles = Array.from(profilesByPubkey.values())
+    console.log('✅ Fetched', profiles.length, 'unique profiles')
+
+    // Rebroadcast profiles to local/all relays based on settings
+    if (profiles.length > 0) {
+      await rebroadcastEvents(profiles, relayPool, settings)
+    }
+
+    return profiles
+  } catch (error) {
+    console.error('Failed to fetch profiles:', error)
+    return []
+  }
+}
+

src/services/readingDataProcessor.ts

@@ -0,0 +1,147 @@
+import { NostrEvent } from 'nostr-tools'
+import { ReadItem } from './readsService'
+import { fallbackTitleFromUrl } from '../utils/readItemMerge'
+
+const READING_POSITION_PREFIX = 'boris:reading-position:'
+
+interface ReadArticle {
+  id: string
+  url?: string
+  eventId?: string
+  eventKind?: number
+  markedAt: number
+}
+
+/**
+ * Processes reading position events into ReadItems
+ */
+export function processReadingPositions(
+  events: NostrEvent[],
+  readsMap: Map<string, ReadItem>
+): void {
+  for (const event of events) {
+    const dTag = event.tags.find(t => t[0] === 'd')?.[1]
+    if (!dTag || !dTag.startsWith(READING_POSITION_PREFIX)) continue
+
+    const identifier = dTag.replace(READING_POSITION_PREFIX, '')
+    
+    try {
+      const positionData = JSON.parse(event.content)
+      const position = positionData.position
+      const timestamp = positionData.timestamp
+
+      let itemId: string
+      let itemUrl: string | undefined
+      let itemType: 'article' | 'external' = 'external'
+
+      // Check if it's a nostr article (naddr format)
+      if (identifier.startsWith('naddr1')) {
+        itemId = identifier
+        itemType = 'article'
+      } else {
+        // It's a base64url-encoded URL
+        try {
+          itemUrl = atob(identifier.replace(/-/g, '+').replace(/_/g, '/'))
+          itemId = itemUrl
+          itemType = 'external'
+        } catch (e) {
+          console.warn('Failed to decode URL identifier:', identifier)
+          continue
+        }
+      }
+
+      // Add or update the item
+      const existing = readsMap.get(itemId)
+      if (!existing || !existing.readingTimestamp || timestamp > existing.readingTimestamp) {
+        readsMap.set(itemId, {
+          ...existing,
+          id: itemId,
+          source: 'reading-progress',
+          type: itemType,
+          url: itemUrl,
+          readingProgress: position,
+          readingTimestamp: timestamp
+        })
+      }
+    } catch (error) {
+      console.warn('Failed to parse reading position:', error)
+    }
+  }
+}
+
+/**
+ * Processes marked-as-read articles into ReadItems
+ */
+export function processMarkedAsRead(
+  articles: ReadArticle[],
+  readsMap: Map<string, ReadItem>
+): void {
+  for (const article of articles) {
+    const existing = readsMap.get(article.id)
+    
+    if (article.eventId && article.eventKind === 30023) {
+      // Nostr article
+      readsMap.set(article.id, {
+        ...existing,
+        id: article.id,
+        source: 'marked-as-read',
+        type: 'article',
+        markedAsRead: true,
+        markedAt: article.markedAt,
+        readingTimestamp: existing?.readingTimestamp || article.markedAt
+      })
+    } else if (article.url) {
+      // External URL
+      readsMap.set(article.id, {
+        ...existing,
+        id: article.id,
+        source: 'marked-as-read',
+        type: 'external',
+        url: article.url,
+        markedAsRead: true,
+        markedAt: article.markedAt,
+        readingTimestamp: existing?.readingTimestamp || article.markedAt
+      })
+    }
+  }
+}
+
+/**
+ * Sorts ReadItems by most recent reading activity
+ */
+export function sortByReadingActivity(items: ReadItem[]): ReadItem[] {
+  return items.sort((a, b) => {
+    const timeA = a.readingTimestamp || a.markedAt || 0
+    const timeB = b.readingTimestamp || b.markedAt || 0
+    return timeB - timeA
+  })
+}
+
+/**
+ * Filters out items without timestamps and enriches external items with fallback titles
+ */
+export function filterValidItems(items: ReadItem[]): ReadItem[] {
+  return items
+    .filter(item => {
+      // Only include items that have a timestamp
+      const hasTimestamp = (item.readingTimestamp && item.readingTimestamp > 0) || 
+                          (item.markedAt && item.markedAt > 0)
+      if (!hasTimestamp) return false
+      
+      // For Nostr articles, we need the event to be valid
+      if (item.type === 'article' && !item.event) return false
+      
+      // For external URLs, we need at least a URL
+      if (item.type === 'external' && !item.url) return false
+      
+      return true
+    })
+    .map(item => {
+      // Add fallback title for external URLs without titles
+      if (item.type === 'external' && !item.title && item.url) {
+        return { ...item, title: fallbackTitleFromUrl(item.url) }
+      }
+      return item
+    })
+}
+

src/services/readingPositionService.ts

@@ -0,0 +1,196 @@
+import { IEventStore, mapEventsToStore } from 'applesauce-core'
+import { EventFactory } from 'applesauce-factory'
+import { RelayPool, onlyEvents } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { firstValueFrom } from 'rxjs'
+import { publishEvent } from './writeService'
+import { RELAYS } from '../config/relays'
+
+const APP_DATA_KIND = 30078 // NIP-78 Application Data
+const READING_POSITION_PREFIX = 'boris:reading-position:'
+
+export interface ReadingPosition {
+  position: number // 0-1 scroll progress
+  timestamp: number // Unix timestamp
+  scrollTop?: number // Optional: pixel position
+}
+
+// Helper to extract and parse reading position from an event
+function getReadingPositionContent(event: NostrEvent): ReadingPosition | undefined {
+  if (!event.content || event.content.length === 0) return undefined
+  try {
+    return JSON.parse(event.content) as ReadingPosition
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * Generate a unique identifier for an article
+ * For Nostr articles: use the naddr directly
+ * For external URLs: use base64url encoding of the URL
+ */
+export function generateArticleIdentifier(naddrOrUrl: string): string {
+  // If it starts with "nostr:", extract the naddr
+  if (naddrOrUrl.startsWith('nostr:')) {
+    return naddrOrUrl.replace('nostr:', '')
+  }
+  // For URLs, use base64url encoding (URL-safe)
+  return btoa(naddrOrUrl)
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '')
+}
+
+/**
+ * Save reading position to Nostr (Kind 30078)
+ */
+export async function saveReadingPosition(
+  relayPool: RelayPool,
+  eventStore: IEventStore,
+  factory: EventFactory,
+  articleIdentifier: string,
+  position: ReadingPosition
+): Promise<void> {
+  console.log('💾 [ReadingPosition] Saving position:', {
+    identifier: articleIdentifier.slice(0, 32) + '...',
+    position: position.position,
+    positionPercent: Math.round(position.position * 100) + '%',
+    timestamp: position.timestamp,
+    scrollTop: position.scrollTop
+  })
+
+  const dTag = `${READING_POSITION_PREFIX}${articleIdentifier}`
+
+  const draft = await factory.create(async () => ({
+    kind: APP_DATA_KIND,
+    content: JSON.stringify(position),
+    tags: [
+      ['d', dTag],
+      ['client', 'boris']
+    ],
+    created_at: Math.floor(Date.now() / 1000)
+  }))
+
+  const signed = await factory.sign(draft)
+
+  // Use unified write service
+  await publishEvent(relayPool, eventStore, signed)
+
+  console.log('✅ [ReadingPosition] Position saved successfully, event ID:', signed.id.slice(0, 8))
+}
+
+/**
+ * Load reading position from Nostr
+ */
+export async function loadReadingPosition(
+  relayPool: RelayPool,
+  eventStore: IEventStore,
+  pubkey: string,
+  articleIdentifier: string
+): Promise<ReadingPosition | null> {
+  const dTag = `${READING_POSITION_PREFIX}${articleIdentifier}`
+
+  console.log('📖 [ReadingPosition] Loading position:', {
+    pubkey: pubkey.slice(0, 8) + '...',
+    identifier: articleIdentifier.slice(0, 32) + '...',
+    dTag: dTag.slice(0, 50) + '...'
+  })
+
+  // First, check if we already have the position in the local event store
+  try {
+    const localEvent = await firstValueFrom(
+      eventStore.replaceable(APP_DATA_KIND, pubkey, dTag)
+    )
+    if (localEvent) {
+      const content = getReadingPositionContent(localEvent)
+      if (content) {
+        console.log('✅ [ReadingPosition] Loaded from local store:', {
+          position: content.position,
+          positionPercent: Math.round(content.position * 100) + '%',
+          timestamp: content.timestamp
+        })
+        
+        // Still fetch from relays in the background to get any updates
+        relayPool
+          .subscription(RELAYS, {
+            kinds: [APP_DATA_KIND],
+            authors: [pubkey],
+            '#d': [dTag]
+          })
+          .pipe(onlyEvents(), mapEventsToStore(eventStore))
+          .subscribe()
+        
+        return content
+      }
+    }
+  } catch (err) {
+    console.log('📭 No cached reading position found, fetching from relays...')
+  }
+
+  // If not in local store, fetch from relays
+  return new Promise((resolve) => {
+    let hasResolved = false
+    const timeout = setTimeout(() => {
+      if (!hasResolved) {
+        console.log('⏱️ Reading position load timeout - no position found')
+        hasResolved = true
+        resolve(null)
+      }
+    }, 3000) // Shorter timeout for reading positions
+
+    const sub = relayPool
+      .subscription(RELAYS, {
+        kinds: [APP_DATA_KIND],
+        authors: [pubkey],
+        '#d': [dTag]
+      })
+      .pipe(onlyEvents(), mapEventsToStore(eventStore))
+      .subscribe({
+        complete: async () => {
+          clearTimeout(timeout)
+          if (!hasResolved) {
+            hasResolved = true
+            try {
+              const event = await firstValueFrom(
+                eventStore.replaceable(APP_DATA_KIND, pubkey, dTag)
+              )
+              if (event) {
+                const content = getReadingPositionContent(event)
+                if (content) {
+                  console.log('✅ [ReadingPosition] Loaded from relays:', {
+                    position: content.position,
+                    positionPercent: Math.round(content.position * 100) + '%',
+                    timestamp: content.timestamp
+                  })
+                  resolve(content)
+                } else {
+                  console.log('⚠️ [ReadingPosition] Event found but no valid content')
+                  resolve(null)
+                }
+              } else {
+                console.log('📭 [ReadingPosition] No position found on relays')
+                resolve(null)
+              }
+            } catch (err) {
+              console.error('❌ Error loading reading position:', err)
+              resolve(null)
+            }
+          }
+        },
+        error: (err) => {
+          console.error('❌ Reading position subscription error:', err)
+          clearTimeout(timeout)
+          if (!hasResolved) {
+            hasResolved = true
+            resolve(null)
+          }
+        }
+      })
+
+    setTimeout(() => {
+      sub.unsubscribe()
+    }, 3000)
+  })
+}
+

src/services/readsService.ts

@@ -0,0 +1,197 @@
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { Helpers } from 'applesauce-core'
+import { Bookmark } from '../types/bookmarks'
+import { fetchReadArticles } from './libraryService'
+import { queryEvents } from './dataFetch'
+import { RELAYS } from '../config/relays'
+import { KINDS } from '../config/kinds'
+import { classifyBookmarkType } from '../utils/bookmarkTypeClassifier'
+import { nip19 } from 'nostr-tools'
+import { processReadingPositions, processMarkedAsRead, filterValidItems, sortByReadingActivity } from './readingDataProcessor'
+import { mergeReadItem } from '../utils/readItemMerge'
+
+const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
+
+export interface ReadItem {
+  id: string // event ID or URL or coordinate
+  source: 'bookmark' | 'reading-progress' | 'marked-as-read'
+  type: 'article' | 'external' // article=kind:30023, external=URL
+  
+  // Article data
+  event?: NostrEvent
+  url?: string
+  title?: string
+  summary?: string
+  image?: string
+  published?: number
+  author?: string
+  
+  // Reading metadata
+  readingProgress?: number // 0-1
+  readingTimestamp?: number // Unix timestamp of last reading activity
+  markedAsRead?: boolean
+  markedAt?: number
+}
+
+/**
+ * Fetches all reads from multiple sources:
+ * - Bookmarked articles (kind:30023) and article/website URLs
+ * - Articles/URLs with reading progress (kind:30078)
+ * - Manually marked as read articles/URLs (kind:7, kind:17)
+ */
+export async function fetchAllReads(
+  relayPool: RelayPool,
+  userPubkey: string,
+  bookmarks: Bookmark[],
+  onItem?: (item: ReadItem) => void
+): Promise<ReadItem[]> {
+  console.log('📚 [Reads] Fetching all reads for user:', userPubkey.slice(0, 8))
+  
+  const readsMap = new Map<string, ReadItem>()
+  
+  // Helper to emit items as they're added/updated
+  const emitItem = (item: ReadItem) => {
+    if (onItem && mergeReadItem(readsMap, item)) {
+      onItem(readsMap.get(item.id)!)
+    } else if (!onItem) {
+      readsMap.set(item.id, item)
+    }
+  }
+  
+  try {
+    // Fetch all data sources in parallel
+    const [readingPositionEvents, markedAsReadArticles] = await Promise.all([
+      queryEvents(relayPool, { kinds: [KINDS.AppData], authors: [userPubkey] }, { relayUrls: RELAYS }),
+      fetchReadArticles(relayPool, userPubkey)
+    ])
+
+    console.log('📊 [Reads] Data fetched:', {
+      readingPositions: readingPositionEvents.length,
+      markedAsRead: markedAsReadArticles.length,
+      bookmarks: bookmarks.length
+    })
+
+    // Process reading positions and emit items
+    processReadingPositions(readingPositionEvents, readsMap)
+    if (onItem) {
+      readsMap.forEach(item => {
+        if (item.type === 'article') onItem(item)
+      })
+    }
+    
+    // Process marked-as-read and emit items
+    processMarkedAsRead(markedAsReadArticles, readsMap)
+    if (onItem) {
+      readsMap.forEach(item => {
+        if (item.type === 'article') onItem(item)
+      })
+    }
+
+    // 3. Process bookmarked articles and article/website URLs
+    const allBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
+    
+    for (const bookmark of allBookmarks) {
+      const bookmarkType = classifyBookmarkType(bookmark)
+      
+      // Only include articles
+      if (bookmarkType === 'article') {
+        // Kind:30023 nostr article
+        const coordinate = bookmark.id // Already in coordinate format
+        const existing = readsMap.get(coordinate)
+        
+        if (!existing) {
+          const item: ReadItem = {
+            id: coordinate,
+            source: 'bookmark',
+            type: 'article',
+            readingProgress: 0,
+            readingTimestamp: bookmark.added_at || bookmark.created_at
+          }
+          readsMap.set(coordinate, item)
+          if (onItem) emitItem(item)
+        }
+      }
+    }
+
+    // 4. Fetch full event data for nostr articles
+    const articleCoordinates = Array.from(readsMap.values())
+      .filter(item => item.type === 'article' && !item.event)
+      .map(item => item.id)
+
+    if (articleCoordinates.length > 0) {
+      console.log('📖 [Reads] Fetching article events for', articleCoordinates.length, 'articles')
+      
+      // Parse coordinates and fetch events
+      const articlesToFetch: Array<{ pubkey: string; identifier: string }> = []
+      
+      for (const coord of articleCoordinates) {
+        try {
+          // Try to decode as naddr
+          if (coord.startsWith('naddr1')) {
+            const decoded = nip19.decode(coord)
+            if (decoded.type === 'naddr' && decoded.data.kind === KINDS.BlogPost) {
+              articlesToFetch.push({
+                pubkey: decoded.data.pubkey,
+                identifier: decoded.data.identifier || ''
+              })
+            }
+          } else {
+            // Try coordinate format (kind:pubkey:identifier)
+            const parts = coord.split(':')
+            if (parts.length === 3 && parseInt(parts[0]) === KINDS.BlogPost) {
+              articlesToFetch.push({
+                pubkey: parts[1],
+                identifier: parts[2]
+              })
+            }
+          }
+        } catch (e) {
+          console.warn('Failed to decode article coordinate:', coord)
+        }
+      }
+
+      if (articlesToFetch.length > 0) {
+        const authors = Array.from(new Set(articlesToFetch.map(a => a.pubkey)))
+        const identifiers = Array.from(new Set(articlesToFetch.map(a => a.identifier)))
+        
+        const events = await queryEvents(
+          relayPool,
+          { kinds: [KINDS.BlogPost], authors, '#d': identifiers },
+          { relayUrls: RELAYS }
+        )
+
+        // Merge event data into ReadItems and emit
+        for (const event of events) {
+          const dTag = event.tags.find(t => t[0] === 'd')?.[1] || ''
+          const coordinate = `${KINDS.BlogPost}:${event.pubkey}:${dTag}`
+          
+          const item = readsMap.get(coordinate) || readsMap.get(event.id)
+          if (item) {
+            item.event = event
+            item.title = getArticleTitle(event) || 'Untitled'
+            item.summary = getArticleSummary(event)
+            item.image = getArticleImage(event)
+            item.published = getArticlePublished(event)
+            item.author = event.pubkey
+            if (onItem) emitItem(item)
+          }
+        }
+      }
+    }
+
+    // 5. Filter for Nostr articles only and apply common validation/sorting
+    const articles = Array.from(readsMap.values())
+      .filter(item => item.type === 'article')
+    
+    const validArticles = filterValidItems(articles)
+    const sortedReads = sortByReadingActivity(validArticles)
+
+    console.log('✅ [Reads] Processed', sortedReads.length, 'total reads')
+    return sortedReads
+
+  } catch (error) {
+    console.error('Failed to fetch all reads:', error)
+    return []
+  }
+}

src/services/settingsService.ts

@@ -3,6 +3,7 @@ import { EventFactory } from 'applesauce-factory'
 import { RelayPool, onlyEvents } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
 import { firstValueFrom } from 'rxjs'
+import { publishEvent } from './writeService'
 
 const SETTINGS_IDENTIFIER = 'com.dergigi.boris.user-settings'
 const APP_DATA_KIND = 30078 // NIP-78 Application Data
@@ -51,6 +52,12 @@ export interface UserSettings {
   theme?: 'dark' | 'light' | 'system' // default: system
   darkColorTheme?: 'black' | 'midnight' | 'charcoal' // default: midnight
   lightColorTheme?: 'paper-white' | 'sepia' | 'ivory' // default: sepia
+  // Reading settings
+  paragraphAlignment?: 'left' | 'justify' // default: justify
+  // Reading position sync
+  syncReadingPosition?: boolean // default: false (opt-in)
+  autoScrollToPosition?: boolean // default: true (auto-scroll to last reading position)
+  autoMarkAsReadAt100?: boolean // default: false (auto-mark as read when reaching 100% for 2 seconds)
 }
 
 export async function loadSettings(
@@ -147,11 +154,10 @@ export async function saveSettings(
   relayPool: RelayPool,
   eventStore: IEventStore,
   factory: EventFactory,
-  settings: UserSettings,
-  relays: string[]
+  settings: UserSettings
 ): Promise<void> {
   console.log('💾 Saving settings to nostr:', settings)
-  
+
   // Create NIP-78 application data event manually
   // Note: AppDataBlueprint is not available in the npm package
   const draft = await factory.create(async () => ({
@@ -160,14 +166,12 @@ export async function saveSettings(
     tags: [['d', SETTINGS_IDENTIFIER]],
     created_at: Math.floor(Date.now() / 1000)
   }))
-  
+
   const signed = await factory.sign(draft)
-  
-  console.log('📤 Publishing settings event:', signed.id, 'to', relays.length, 'relays')
-  
-  eventStore.add(signed)
-  await relayPool.publish(relays, signed)
-  
+
+  // Use unified write service
+  await publishEvent(relayPool, eventStore, signed)
+
   console.log('✅ Settings published successfully')
 }
 

src/services/writeService.ts

@@ -0,0 +1,57 @@
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
+import { RELAYS } from '../config/relays'
+import { isLocalRelay, areAllRelaysLocal } from '../utils/helpers'
+import { markEventAsOfflineCreated } from './offlineSyncService'
+
+/**
+ * Unified write helper: add event to EventStore, detect connectivity, 
+ * mark for offline sync if needed, and publish in background.
+ */
+export async function publishEvent(
+  relayPool: RelayPool,
+  eventStore: IEventStore,
+  event: NostrEvent
+): Promise<void> {
+  // Store the event in the local EventStore FIRST for immediate UI display
+  eventStore.add(event)
+  console.log('💾 Stored event in EventStore:', event.id.slice(0, 8), `(kind ${event.kind})`)
+
+  // Check current connection status - are we online or in flight mode?
+  const connectedRelays = Array.from(relayPool.relays.values())
+    .filter(relay => relay.connected)
+    .map(relay => relay.url)
+
+  const hasRemoteConnection = connectedRelays.some(url => !isLocalRelay(url))
+
+  // Determine which relays we expect to succeed
+  const expectedSuccessRelays = hasRemoteConnection
+    ? RELAYS
+    : RELAYS.filter(isLocalRelay)
+
+  const isLocalOnly = areAllRelaysLocal(expectedSuccessRelays)
+
+  console.log('📍 Event relay status:', {
+    targetRelays: RELAYS.length,
+    expectedSuccessRelays: expectedSuccessRelays.length,
+    isLocalOnly,
+    hasRemoteConnection,
+    eventId: event.id.slice(0, 8)
+  })
+
+  // If we're in local-only mode, mark this event for later sync
+  if (isLocalOnly) {
+    markEventAsOfflineCreated(event.id)
+  }
+
+  // Publish to all configured relays in the background (non-blocking)
+  relayPool.publish(RELAYS, event)
+    .then(() => {
+      console.log('✅ Event published to', RELAYS.length, 'relay(s):', event.id.slice(0, 8))
+    })
+    .catch((error) => {
+      console.warn('⚠️ Failed to publish event to relays (event still saved locally):', error)
+    })
+}
+

src/services/zapReceiptService.ts

@@ -0,0 +1,127 @@
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
+import { lastValueFrom, merge, Observable, takeUntil, timer, toArray } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import { isValidZap, getZapSender, getZapAmount } from 'applesauce-core/helpers'
+import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
+import { BORIS_PUBKEY } from './highlightCreationService'
+import { RELAYS } from '../config/relays'
+
+export interface ZapSender {
+  pubkey: string
+  totalSats: number
+  zapCount: number
+  isWhale: boolean // >= 69420 sats
+}
+
+/**
+ * Fetches zap receipts (kind:9735) for Boris and aggregates by sender
+ * @param relayPool - The relay pool to query
+ * @returns Array of senders who zapped >= 2100 sats, sorted by total desc
+ */
+export async function fetchBorisZappers(
+  relayPool: RelayPool
+): Promise<ZapSender[]> {
+  try {
+    console.log('⚡ Fetching zap receipts for Boris...', BORIS_PUBKEY)
+    
+    // Use all configured relays plus specific zap-heavy relays
+    const zapRelays = [
+      ...RELAYS,
+      'wss://nostr.mutinywallet.com', // Common zap relay
+      'wss://relay.getalby.com/v1', // Alby zap relay
+    ]
+    const prioritized = prioritizeLocalRelays(zapRelays)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(prioritized)
+
+    // Fetch zap receipts with Boris as recipient
+    const filter = {
+      kinds: [9735],
+      '#p': [BORIS_PUBKEY]
+    }
+
+    const local$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, filter)
+          .pipe(
+            onlyEvents(),
+            completeOnEose(),
+            takeUntil(timer(1200))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+
+    const remote$ = remoteRelays.length > 0
+      ? relayPool
+          .req(remoteRelays, filter)
+          .pipe(
+            onlyEvents(),
+            completeOnEose(),
+            takeUntil(timer(6000))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+
+    const zapReceipts = await lastValueFrom(
+      merge(local$, remote$).pipe(toArray())
+    )
+
+    console.log(`📊 Fetched ${zapReceipts.length} raw zap receipts`)
+
+    // Dedupe by event ID and validate
+    const uniqueReceipts = new Map<string, NostrEvent>()
+    let invalidCount = 0
+    
+    zapReceipts.forEach(receipt => {
+      if (!uniqueReceipts.has(receipt.id)) {
+        if (isValidZap(receipt)) {
+          uniqueReceipts.set(receipt.id, receipt)
+        } else {
+          invalidCount++
+        }
+      }
+    })
+
+    console.log(`✅ ${uniqueReceipts.size} valid zap receipts (${invalidCount} invalid)`)
+
+    // Aggregate by sender using applesauce helpers
+    const senderTotals = new Map<string, { totalSats: number; zapCount: number }>()
+
+    for (const receipt of uniqueReceipts.values()) {
+      const senderPubkey = getZapSender(receipt)
+      const amountMsats = getZapAmount(receipt)
+
+      if (!senderPubkey || !amountMsats || amountMsats === 0) {
+        console.warn('Invalid zap receipt - missing sender or amount:', receipt.id)
+        continue
+      }
+
+      const amountSats = Math.floor(amountMsats / 1000)
+
+      const existing = senderTotals.get(senderPubkey) || { totalSats: 0, zapCount: 0 }
+      senderTotals.set(senderPubkey, {
+        totalSats: existing.totalSats + amountSats,
+        zapCount: existing.zapCount + 1
+      })
+    }
+
+    console.log(`👥 Found ${senderTotals.size} unique senders`)
+
+    // Filter >= 2100 sats, mark whales >= 69420 sats, sort by total desc
+    const zappers: ZapSender[] = Array.from(senderTotals.entries())
+      .filter(([, data]) => data.totalSats >= 2100)
+      .map(([pubkey, data]) => ({
+        pubkey,
+        totalSats: data.totalSats,
+        zapCount: data.zapCount,
+        isWhale: data.totalSats >= 69420
+      }))
+      .sort((a, b) => b.totalSats - a.totalSats)
+
+    console.log(`✅ Found ${zappers.length} supporters (${zappers.filter(z => z.isWhale).length} whales)`)
+
+    return zappers
+  } catch (error) {
+    console.error('Failed to fetch zap receipts:', error)
+    return []
+  }
+}
+
+

src/styles/components/cards.css

@@ -7,6 +7,27 @@
 .bookmark-content { color: var(--color-text); margin: 0.5rem 0; line-height: 1.4; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }
 .bookmark-meta { color: var(--color-text-secondary); font-size: 0.9rem; margin-top: 0.5rem; }
 
+.bookmarks-section-title { 
+  font-size: 0.75rem !important; 
+  font-weight: 700 !important; 
+  text-transform: uppercase !important; 
+  letter-spacing: 0.05em !important; 
+  color: var(--color-text-muted) !important; 
+  padding: 1.5rem 0.5rem 0.375rem !important; 
+  margin: 0 !important; 
+  border-top: 1px solid rgba(255, 255, 255, 0.05); 
+}
+.bookmarks-section:first-of-type .bookmarks-section-title { 
+  border-top: none; 
+  padding-top: 0.5rem !important; 
+}
+.bookmark-section-action {
+  padding: 1.5rem 0.5rem 0.375rem;
+}
+.bookmarks-section:first-of-type .bookmark-section-action {
+  padding-top: 0.5rem;
+}
+
 .individual-bookmarks { margin: 1rem 0; }
 .individual-bookmarks h4 { margin: 0 0 1rem 0; font-size: 1rem; color: var(--color-text); }
 
@@ -23,8 +44,8 @@
 .individual-bookmark:hover { border-color: var(--color-border); background: var(--color-bg-elevated); }
 
 /* Compact view */
-.individual-bookmark.compact { padding: 0.5rem 0.5rem; background: transparent; border: none; border-bottom: 1px solid var(--color-bg-elevated); border-radius: 0; box-shadow: none; width: 100%; max-width: 100%; overflow: hidden; }
-.individual-bookmark.compact:hover { background: var(--color-bg-elevated); border-bottom-color: var(--color-border); transform: none; box-shadow: none; }
+.individual-bookmark.compact { padding: 0.5rem 0.5rem; background: transparent; border: none !important; border-radius: 0; box-shadow: none; width: 100%; max-width: 100%; overflow: hidden; }
+.individual-bookmark.compact:hover { background: var(--color-bg-elevated); transform: none; box-shadow: none; border: none !important; }
 .compact-row { display: flex; align-items: center; gap: 0.5rem; height: 28px; width: 100%; min-width: 0; overflow: hidden; }
 .compact-thumbnail { width: 24px; height: 24px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: var(--color-bg-elevated); display: flex; align-items: center; justify-content: center; }
 .compact-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
@@ -57,10 +78,10 @@
 
 /* Large preview view */
 .individual-bookmark.large { padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-bg-elevated); }
-.large-preview-image { width: 100%; height: 180px; background: var(--color-bg); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid var(--color-border); position: relative; }
+.large-preview-image { width: 100%; height: 180px; background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-subtle) 50%, var(--color-bg-elevated) 100%); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid var(--color-border); position: relative; }
 .large-preview-image:hover { opacity: 0.9; }
 .large-preview-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.3) 100%); pointer-events: none; }
-.preview-placeholder { font-size: 3rem; color: var(--color-border-subtle); }
+.preview-placeholder { font-size: 3rem; color: var(--color-border-subtle); opacity: 0.4; }
 .large-content { padding: 1.25rem; }
 .large-text { color: var(--color-text); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 .large-footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--color-text-secondary); padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
@@ -81,10 +102,13 @@
 .explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; }
 .blog-post-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; }
 .blog-post-card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15); }
-.blog-post-card-image { width: 100%; height: 200px; overflow: hidden; background: var(--color-bg-subtle); display: flex; align-items: center; justify-content: center; }
+.blog-post-card.level-mine { border-color: color-mix(in srgb, var(--highlight-color-mine, #fde047) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #fde047) 25%, transparent); }
+.blog-post-card.level-friends { border-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-friends, #f97316) 25%, transparent); }
+.blog-post-card.level-nostrverse { border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 25%, transparent); }
+.blog-post-card-image { width: 100%; height: 200px; overflow: hidden; background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-subtle) 50%, var(--color-bg-elevated) 100%); display: flex; align-items: center; justify-content: center; position: relative; }
 .blog-post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
 .blog-post-card:hover .blog-post-card-image img { transform: scale(1.05); }
-.blog-post-image-placeholder { font-size: 3rem; color: var(--color-border-subtle); display: flex; align-items: center; justify-content: center; }
+.blog-post-image-placeholder { font-size: 3rem; color: var(--color-border-subtle); opacity: 0.4; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
 .blog-post-card-content { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
 .blog-post-card-title { font-size: 1.25rem; font-weight: 600; margin: 0; color: var(--color-text); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 .blog-post-card-summary { font-size: 0.875rem; color: var(--color-text-secondary); margin: 0; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; flex: 1; }

src/styles/components/forms.css

@@ -3,7 +3,7 @@
 .setting-group.setting-inline { display: flex; align-items: center; gap: 1rem; }
 .setting-label { text-align: left; flex: 1; }
 .setting-control { display: flex; justify-content: flex-end; align-items: center; }
-.setting-group.setting-inline label { margin-bottom: 0; }
+.setting-group.setting-inline label { margin-bottom: 0; min-width: 220px; }
 .setting-group label { display: block; margin-bottom: 0.5rem; color: var(--color-text); font-weight: 500; text-align: left; }
 .setting-buttons { display: flex; align-items: center; gap: 0.5rem; }
 .color-picker { display: flex; align-items: center; gap: 0.5rem; }
@@ -41,6 +41,7 @@
 .preview-content p { 
   margin: 0.75rem 0;
   word-wrap: break-word;
+  text-align: var(--paragraph-alignment, justify);
 }
 .setting-select { width: 100%; padding: 0.5rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 4px; color: var(--color-text); font-size: 1rem; }
 .setting-inline .setting-select { width: auto; min-width: 200px; flex: 1; }
@@ -58,6 +59,10 @@
     gap: 0.75rem;
   }
   
+  .setting-group.setting-inline label {
+    min-width: unset;
+  }
+  
   .setting-inline .setting-select {
     width: 100%;
     min-width: unset;

src/styles/components/me.css

@@ -67,6 +67,10 @@
   width: 100%;
 }
 
+.me-tab-content:has(.bookmark-filters) {
+  padding-top: 0.25rem;
+}
+
 /* Align highlight list width with profile card width on /me */
 .me-highlights-list { padding-left: 0; padding-right: 0; }
 .explore-header .author-card { max-width: 600px; margin: 0 auto; width: 100%; }
@@ -79,6 +83,15 @@
   text-align: left; /* Override center alignment from .app */
 }
 
+/* Bookmark filters in Me page */
+.me-tab-content .bookmark-filters {
+  background: transparent;
+  border: none;
+  padding: 0;
+  justify-content: center;
+  margin-bottom: 0.25rem;
+}
+
 /* Ensure all reading list elements are left-aligned */
 .bookmarks-list .individual-bookmark,
 .bookmarks-list .individual-bookmark * {

src/styles/components/modals.css

@@ -25,3 +25,23 @@
 .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
 .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
 
+/* Confirm Dialog */
+.confirm-dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 1rem; }
+.confirm-dialog { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 12px; max-width: 400px; width: 100%; padding: 1.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }
+.confirm-dialog-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 1rem; font-size: 1.5rem; }
+.confirm-dialog-icon.danger { background: rgba(220, 38, 38, 0.1); color: rgb(220 38 38); }
+.confirm-dialog-icon.warning { background: rgba(251, 191, 36, 0.1); color: rgb(251 191 36); }
+.confirm-dialog-icon.info { background: rgba(59, 130, 246, 0.1); color: rgb(59 130 246); }
+.confirm-dialog-title { margin: 0 0 0.5rem 0; font-size: 1.25rem; font-weight: 600; color: var(--color-text); text-align: center; }
+.confirm-dialog-message { margin: 0 0 1.5rem 0; font-size: 0.9rem; color: var(--color-text-secondary); text-align: center; line-height: 1.5; }
+.confirm-dialog-actions { display: flex; gap: 0.75rem; }
+.confirm-dialog-btn { flex: 1; padding: 0.75rem 1rem; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
+.confirm-dialog-btn.cancel { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); }
+.confirm-dialog-btn.cancel:hover { background: var(--color-border); }
+.confirm-dialog-btn.confirm.danger { background: rgb(220 38 38); color: white; }
+.confirm-dialog-btn.confirm.danger:hover { background: rgb(185 28 28); }
+.confirm-dialog-btn.confirm.warning { background: rgb(251 191 36); color: rgb(17 24 39); }
+.confirm-dialog-btn.confirm.warning:hover { background: rgb(245 158 11); }
+.confirm-dialog-btn.confirm.info { background: rgb(59 130 246); color: white; }
+.confirm-dialog-btn.confirm.info:hover { background: rgb(37 99 235); }
+

src/styles/components/reader.css

@@ -30,16 +30,29 @@
 .reader-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
 .publish-date { display: flex; align-items: center; gap: 0.4rem; font-size: 0.813rem; color: var(--color-text-muted); opacity: 0.85; }
 .publish-date svg { font-size: 0.75rem; opacity: 0.6; }
-.publish-date-topright { position: absolute; top: 1rem; right: 1rem; font-size: 0.813rem; color: var(--color-text); padding: 0.4rem 0.75rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); z-index: 10; }
+.publish-date-topright { position: absolute; top: 1rem; right: 1rem; font-size: 0.813rem; color: var(--color-text); padding: 0.4rem 0.75rem; z-index: 10; }
 .reading-time { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.875rem; color: var(--color-text-secondary); }
 .reading-time svg { font-size: 0.875rem; }
 .highlight-indicator { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 6px; font-size: 0.875rem; color: var(--color-text); }
 .highlight-indicator svg { font-size: 0.875rem; }
 .reader-html { color: var(--color-text); line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; font-family: var(--reading-font); font-size: var(--reading-font-size); }
 .reader-markdown { color: var(--color-text); line-height: 1.7; font-family: var(--reading-font); font-size: var(--reading-font-size); }
-/* Ensure content is left-aligned even if source markup uses center */
-.reader .reader-html *, .reader .reader-markdown * { text-align: left !important; font-family: inherit !important; }
-.reader center, .reader [align="center"] { text-align: left !important; }
+/* Ensure font inheritance */
+.reader .reader-html *, .reader .reader-markdown * { font-family: inherit !important; }
+/* Apply paragraph alignment from settings */
+.reader .reader-html p,
+.reader .reader-markdown p,
+.reader .reader-html div,
+.reader .reader-markdown div,
+.reader .reader-html li,
+.reader .reader-markdown li,
+.reader .reader-html blockquote,
+.reader .reader-markdown blockquote { text-align: var(--paragraph-alignment, justify); }
+/* Override centered content with user preference */
+.reader center, .reader [align="center"] { text-align: var(--paragraph-alignment, justify) !important; }
+/* Keep headings left-aligned */
+.reader .reader-html h1, .reader .reader-html h2, .reader .reader-html h3, .reader .reader-html h4, .reader .reader-html h5, .reader .reader-html h6,
+.reader .reader-markdown h1, .reader .reader-markdown h2, .reader .reader-markdown h3, .reader .reader-markdown h4, .reader .reader-markdown h5, .reader .reader-markdown h6 { text-align: left !important; }
 /* Tame images from external content */
 .reader .reader-html img, .reader .reader-markdown img { max-width: 100%; max-height: 70vh; height: auto; width: auto; display: block; margin: 0.75rem 0; border-radius: 6px; }
 /* Headlines with Tailwind typography */
@@ -128,6 +141,13 @@
 .reader-markdown blockquote p, .reader-html blockquote p { margin: 0.5rem 0; }
 .reader-markdown blockquote p:first-child, .reader-html blockquote p:first-child { margin-top: 0; }
 .reader-markdown blockquote p:last-child, .reader-html blockquote p:last-child { margin-bottom: 0; }
+/* Horizontal rule - subtle divider */
+.reader-markdown hr, .reader-html hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  opacity: 0.69;
+  margin: 2.5rem 0;
+}
 .reader-markdown a { color: var(--color-primary); text-decoration: none; }
 .reader-markdown a:hover { text-decoration: underline; }
 .reader-markdown code { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
@@ -185,6 +205,7 @@
 .article-menu-btn { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; padding: 0.5rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease; border-radius: 6px; }
 .article-menu-btn:hover { color: var(--color-primary); background: rgba(99, 102, 241, 0.1); }
 .article-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; min-width: 180px; overflow: hidden; }
+.article-menu.open-upward { top: auto; bottom: calc(100% + 4px); }
 .article-menu-item { width: 100%; background: none; border: none; color: var(--color-text); padding: 0.75rem 1rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: all 0.15s ease; text-align: left; white-space: nowrap; }
 .article-menu-item:hover { background: rgba(99, 102, 241, 0.15); color: var(--color-text); }
 .article-menu-item svg { font-size: 0.875rem; flex-shrink: 0; }
@@ -195,7 +216,72 @@
 .mark-as-read-btn:hover:not(:disabled) { background: var(--color-border); border-color: var(--color-text-muted); transform: translateY(-1px); }
 .mark-as-read-btn:active:not(:disabled) { transform: translateY(0); }
 .mark-as-read-btn:disabled { opacity: 0.6; cursor: not-allowed; }
-.mark-as-read-btn svg { font-size: 1.1rem; }
+.mark-as-read-btn svg { font-size: 1.1rem; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
+
+/* Fancy Mark as Read animation */
+@keyframes markAsReadSuccess {
+  0% {
+    background: var(--color-bg-elevated);
+    border-color: var(--color-border-subtle);
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+  10% {
+    transform: scale(1.05);
+    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.3);
+  }
+  25% {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    border-color: #10b981;
+    color: white;
+    transform: scale(1.02);
+    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
+  }
+  65% {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    border-color: #10b981;
+    color: white;
+    transform: scale(1.02);
+    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
+  }
+  100% {
+    background: #6b7280;
+    border-color: #6b7280;
+    color: white;
+    transform: scale(1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+}
+
+@keyframes iconSpin {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  15% {
+    transform: rotate(0deg) scale(1.2);
+  }
+  50% {
+    transform: rotate(360deg) scale(1.2);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+.mark-as-read-btn.animating {
+  animation: markAsReadSuccess 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  pointer-events: none;
+}
+
+.mark-as-read-btn.animating svg {
+  animation: iconSpin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+.mark-as-read-btn.marked {
+  background: #6b7280;
+  border-color: #6b7280;
+  color: white;
+}
 @media (max-width: 768px) {
   .reader {
     max-width: 100%;
@@ -214,8 +300,9 @@
 .article-hero-image { width: 100%; height: 200px; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; transition: all 0.2s ease; border-radius: 8px 8px 0 0; position: relative; }
 .article-hero-image:hover { opacity: 0.9; }
 .article-hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.4) 100%); pointer-events: none; border-radius: 8px 8px 0 0; }
-.reader-hero-image { width: calc(100% + 1.5rem); margin: -0.75rem -0.75rem 2rem -0.75rem; border-radius: 0; overflow: hidden; position: relative; min-height: 300px; }
+.reader-hero-image { width: calc(100% + 1.5rem); margin: -0.75rem -0.75rem 2rem -0.75rem; border-radius: 0; overflow: hidden; position: relative; min-height: 300px; background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-subtle) 25%, var(--color-bg-elevated) 50%, var(--color-bg-subtle) 75%, var(--color-bg-elevated) 100%); }
 .reader-hero-image img { width: 100%; height: auto; max-height: 500px; object-fit: cover; display: block; }
+.reader-hero-placeholder { width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--color-border-subtle); opacity: 0.3; }
 .reader-header-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 2rem 1.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%); }
 .reader-header-overlay .reader-title { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); margin-bottom: 0.75rem; font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
 .reader-header-overlay .reader-summary { color: rgba(255, 255, 255, 0.9); font-size: 1.2rem; line-height: 1.6; margin: 0 0 1rem 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); font-family: var(--reading-font); }

src/styles/components/settings.css

@@ -1,9 +1,9 @@
 /* Settings view containers */
 .settings-view { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 0.75rem 1rem; text-align: left; }
-.settings-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding: 0; }
+.settings-header { display: flex; align-items: center; justify-content: space-between; padding: 0; max-width: 900px; margin: 0 auto 1.5rem auto; width: 100%; }
 .settings-header h2 { margin: 0; font-size: 1.5rem; font-weight: 600; text-align: left; }
 .settings-header-actions { display: flex; gap: 0.5rem; align-items: center; }
-.settings-content { overflow-y: auto; flex: 1; margin-bottom: 1rem; text-align: left; padding: 0 0.25rem 2rem 0.25rem; }
+.settings-content { overflow-y: auto; flex: 1; text-align: left; padding: 0 0.25rem 2rem 0.25rem; max-width: 900px; margin: 0 auto 1rem auto; width: 100%; }
 .settings-section { margin-bottom: 2.5rem; }
 .settings-section:last-child { margin-bottom: 0; }
 .section-title { font-size: 1rem; font-weight: 600; color: var(--color-text); margin: 0 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); text-transform: uppercase; letter-spacing: 0.05em; }
@@ -19,6 +19,7 @@
 /* Zap splits preset buttons */
 .zap-preset-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
 .zap-preset-btn {
+  flex: 1;
   padding: 0.625rem 1.25rem;
   background: var(--color-bg-elevated);
   border: 1px solid var(--color-border-subtle);
@@ -54,35 +55,56 @@
   width: 100%;
   height: 8px;
   border-radius: 4px;
-  background: var(--color-bg-elevated);
+  background: linear-gradient(
+    to right,
+    color-mix(in srgb, var(--highlight-color) 50%, transparent) 0%,
+    color-mix(in srgb, var(--highlight-color) 50%, transparent) 50%,
+    color-mix(in srgb, var(--highlight-color-friends) 50%, transparent) 50%,
+    color-mix(in srgb, var(--highlight-color-friends) 50%, transparent) 100%
+  );
   outline: none;
   -webkit-appearance: none;
+  position: relative;
 }
 .zap-split-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--color-primary);
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: var(--color-primary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M13 2L3 14h8l-1 8 10-12h-8l1-8z'/%3E%3C/svg%3E");
+  background-size: 14px 14px;
+  background-repeat: no-repeat;
+  background-position: center center;
   cursor: pointer;
   transition: all 0.2s ease;
+  position: relative;
+  top: 0;
+  margin-top: 0;
 }
 .zap-split-slider::-webkit-slider-thumb:hover {
-  background: var(--color-primary-hover);
+  background-color: var(--color-primary-hover);
   transform: scale(1.1);
 }
 .zap-split-slider::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--color-primary);
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: var(--color-primary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M13 2L3 14h8l-1 8 10-12h-8l1-8z'/%3E%3C/svg%3E");
+  background-size: 14px 14px;
+  background-repeat: no-repeat;
+  background-position: center center;
   cursor: pointer;
   border: none;
   transition: all 0.2s ease;
+  position: relative;
+  top: 0;
+  margin-top: 0;
 }
 .zap-split-slider::-moz-range-thumb:hover {
-  background: var(--color-primary-hover);
+  background-color: var(--color-primary-hover);
   transform: scale(1.1);
 }
 .zap-split-description {

src/styles/components/skeletons.css

@@ -0,0 +1,35 @@
+/* Skeleton loading animations - respects prefers-reduced-motion */
+@media (prefers-reduced-motion: reduce) {
+  .react-loading-skeleton {
+    animation: none !important;
+  }
+}
+
+/* Ensure skeletons have proper border radius to match design */
+.react-loading-skeleton {
+  border-radius: 4px;
+  line-height: 1.2;
+}
+
+/* Image skeleton aspect ratio boxes to prevent CLS */
+.blog-post-card-image .react-loading-skeleton,
+.bookmark-card .react-loading-skeleton:first-child {
+  aspect-ratio: 16 / 9;
+}
+
+/* Skeleton spacing adjustments */
+.highlights-list .react-loading-skeleton,
+.bookmarks-list .react-loading-skeleton {
+  margin-bottom: 0.5rem;
+}
+
+/* Ensure skeletons inherit theme colors properly */
+.react-loading-skeleton::after {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--color-border-subtle, rgba(255, 255, 255, 0.05)),
+    transparent
+  );
+}
+