docs: update changelog for v0.6.2

- Add consistent 2rem horizontal padding to reader-header on desktop
- Apply same padding to reader-summary-below-image, article-menu-container, and mark-as-read-container
- All content elements now align properly with body text
- Mobile (< 769px) retains base padding only

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

@@ -0,0 +1,6 @@
+---
+description: anything related to UI/UX
+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.)

.cursor/rules/zaps-and-zap-splits.mdc

@@ -0,0 +1,20 @@
+---
+description: Specification for zaps and zaps splits
+alwaysApply: false
+---
+
+When we create highlights, we want to add `zap` tags to the event, to allow for value splits between the highlighter/curator and the author (or authors).
+
+`zap` tags are defined in Appendix G of NIP-57:
+- https://github.com/nostr-protocol/nips/blob/master/57.md
+
+More on `zap` tags here:
+- https://nostrbook.dev/tags/zap
+
+Note that nostr-native content might have `zap` tags already, which can be seen as the "author group" of e.g. the long-form article (writer, editor, designer, etc). We should respect these `zap` tags and include them into our "zap splits" appropriately.
+
+Example: if our zap-split setting is 50/50, and the nostr-native blog post has two authors, our zap splits should be as follows:
+
+- Highlighter: 50%
+- Author1: 25%
+- Author2: 25%

.gitignore

@@ -7,3 +7,7 @@ dist
 # Misc
 *.log
 .DS_Store
+
+# Applesauce Reference
+applesauce
+

COLOR_SYSTEM.md

@@ -0,0 +1,98 @@
+# Boris Color System
+
+All colors now use Tailwind CSS color palette for consistency and maintainability.
+
+## Semantic Color Aliases (Tailwind Config)
+
+```javascript
+'app-bg': '#18181b',           // zinc-900 - Main backgrounds
+'app-bg-elevated': '#27272a',  // zinc-800 - Elevated surfaces (cards, modals)
+'app-bg-subtle': '#1e1e1e',    // Custom ~zinc-850 - Subtle backgrounds
+'app-border': '#3f3f46',       // zinc-700 - Primary borders
+'app-border-subtle': '#52525b', // zinc-600 - Subtle borders
+'app-text': '#e4e4e7',         // zinc-200 - Primary text
+'app-text-secondary': '#a1a1aa', // zinc-400 - Secondary text
+'app-text-muted': '#71717a',   // zinc-500 - Muted text
+'primary': '#6366f1',          // indigo-500 - Primary accent
+'primary-hover': '#4f46e5',    // indigo-600 - Primary hover state
+'highlight-mine': '#fde047',   // yellow-300 - User highlights
+'highlight-friends': '#f97316', // orange-500 - Friends highlights
+'highlight-nostrverse': '#9333ea', // purple-600 - Nostrverse highlights
+```
+
+## Highlight Colors (User-Settable)
+
+Default colors in the color picker:
+- **Yellow** (default): `#fde047` - yellow-300
+- **Orange**: `#f97316` - orange-500
+- **Pink**: `#ec4899` - pink-500
+- **Green**: `#22c55e` - green-500
+- **Blue**: `#3b82f6` - blue-500
+- **Purple**: `#9333ea` - purple-600
+
+## Common Color Mappings
+
+| Old Hex   | Tailwind Color | Usage |
+|-----------|----------------|-------|
+| `#18181b` | zinc-900       | Main app background |
+| `#1a1a1a` | zinc-900       | Component backgrounds |
+| `#1e1e1e` | ~zinc-850      | Code blocks, subtle surfaces |
+| `#252525` | zinc-800       | Hover states |
+| `#27272a` | zinc-800       | Elevated surfaces |
+| `#2a2a2a` | zinc-800       | Buttons, inputs |
+| `#333`    | zinc-700       | Primary borders |
+| `#3f3f46` | zinc-700       | Component borders |
+| `#444`    | zinc-600       | Subtle borders |
+| `#52525b` | zinc-600       | Input borders |
+| `#555`    | zinc-500       | Hover borders |
+| `#666`    | zinc-500       | Muted text |
+| `#71717a` | zinc-500       | Secondary text |
+| `#888`    | zinc-400       | Secondary text |
+| `#999`    | zinc-400       | Muted labels |
+| `#a1a1aa` | zinc-400       | Placeholder text |
+| `#aaa`    | zinc-300       | Light text |
+| `#ccc`    | zinc-300       | Primary text on dark |
+| `#ddd`    | zinc-200       | Bright text |
+| `#e4e4e7` | zinc-200       | Primary text |
+| `#646cff` | indigo-500     | Primary accent |
+| `#535bf2` | indigo-600     | Primary hover |
+| `#fde047` | yellow-300     | Default highlight (brighter) |
+| `#f97316` | orange-500     | Friends highlights |
+| `#9333ea` | purple-600     | Nostrverse highlights |
+
+## Usage Guidelines
+
+### In CSS
+Use Tailwind utilities whenever possible:
+```css
+.example {
+  background: rgb(24 24 27); /* zinc-900 */
+  border: 1px solid rgb(63 63 70); /* zinc-700 */
+  color: rgb(228 228 231); /* zinc-200 */
+}
+```
+
+### In TSX
+Use Tailwind classes:
+```tsx
+<div className="bg-zinc-900 border border-zinc-700 text-zinc-200">
+```
+
+Or semantic aliases:
+```tsx
+<div className="bg-app-bg border border-app-border text-app-text">
+```
+
+### CSS Variables (User-Settable)
+For colors that users can customize:
+```css
+background: var(--highlight-color-mine, #fde047);
+```
+
+## Notes
+
+- All hex colors are now Tailwind palette colors
+- CSS variables remain for user-customizable colors
+- Semantic aliases provide easier maintenance
+- RGB format in CSS allows for opacity control
+

README.md

@@ -6,7 +6,7 @@ Boris turns your Nostr bookmarks into a calm, fast, and focused reading experien
 
 ## Live
 
-- App: [https://xn--bris-v0b.com/](https://xn--bris-v0b.com/)
+- App: [https://read.withboris.com/](https://read.withboris.com/)
 
 ## The Vision
 
@@ -35,6 +35,7 @@ If you bookmark something on nostr, Boris will show it in the bookmarks bar. If
 - Collects your saved links from Nostr and shows them as a tidy reading list
 - Opens articles in a distraction‑free reader with clear typography
 - Shows community highlights layered on the article (yours, friends, everyone)
+- Splits zaps between you and the author(s) when you highlight
 - Lets you collapse sidebars anytime for full‑focus reading
 - Remembers simple preferences like view mode, fonts, and highlight style
 

TAILWIND_MIGRATION.md

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

api/video-meta.ts

@@ -0,0 +1,201 @@
+import type { VercelRequest, VercelResponse } from '@vercel/node'
+import { getSubtitles } from '@treeee/youtube-caption-extractor'
+
+type Caption = { start: number; dur: number; text: string }
+
+type Subtitle = { start: string | number; dur: string | number; text: string }
+
+type CacheEntry = {
+  body: unknown
+  expires: number
+}
+
+type VimeoOEmbedResponse = {
+  title: string
+  description: string
+  author_name: string
+  author_url: string
+  provider_name: string
+  provider_url: string
+  type: string
+  version: string
+  width: number
+  height: number
+  html: string
+  thumbnail_url: string
+  thumbnail_width: number
+  thumbnail_height: number
+}
+
+// In-memory cache for 7 days
+const WEEK_MS = 7 * 24 * 60 * 60 * 1000
+const memoryCache = new Map<string, CacheEntry>()
+
+function buildKey(videoId: string, lang: string, preferAuto?: string | string[], source?: string) {
+  return `${source || 'video'}|${videoId}|${lang}|${preferAuto ? 'auto' : 'manual'}`
+}
+
+function ok(res: VercelResponse, data: unknown) {
+  res.setHeader('Cache-Control', 'public, max-age=86400, s-maxage=604800') // client: 1d, CDN: 7d
+  return res.status(200).json(data)
+}
+
+function bad(res: VercelResponse, code: number, message: string) {
+  return res.status(code).json({ error: message })
+}
+
+function extractVideoId(url: string): { id: string; source: 'youtube' | 'vimeo' } | null {
+  // YouTube patterns
+  const youtubePatterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+    /youtube\.com\/v\/([^&\n?#]+)/
+  ]
+  
+  for (const pattern of youtubePatterns) {
+    const match = url.match(pattern)
+    if (match) {
+      return { id: match[1], source: 'youtube' }
+    }
+  }
+  
+  // Vimeo patterns
+  const vimeoPatterns = [
+    /vimeo\.com\/(\d+)/,
+    /player\.vimeo\.com\/video\/(\d+)/
+  ]
+  
+  for (const pattern of vimeoPatterns) {
+    const match = url.match(pattern)
+    if (match) {
+      return { id: match[1], source: 'vimeo' }
+    }
+  }
+  
+  return null
+}
+
+async function pickCaptions(videoID: string, preferredLangs: string[], manualFirst: boolean): Promise<{ caps: Caption[]; lang: string; isAuto: boolean } | null> {
+  for (const lang of preferredLangs) {
+    try {
+      const caps = await getSubtitles({ videoID, lang })
+      if (Array.isArray(caps) && caps.length > 0) {
+        // Convert the returned subtitles to our Caption format
+        const convertedCaps: Caption[] = caps.map((cap: Subtitle) => ({
+          start: typeof cap.start === 'string' ? parseFloat(cap.start) : cap.start,
+          dur: typeof cap.dur === 'string' ? parseFloat(cap.dur) : cap.dur,
+          text: cap.text
+        }))
+        return { caps: convertedCaps, lang, isAuto: !manualFirst }
+      }
+    } catch {
+      // try next
+    }
+  }
+  return null
+}
+
+async function getVimeoMetadata(videoId: string): Promise<{ title: string; description: string }> {
+  const vimeoUrl = `https://vimeo.com/${videoId}`
+  const oembedUrl = `https://vimeo.com/api/oembed.json?url=${encodeURIComponent(vimeoUrl)}`
+  
+  const response = await fetch(oembedUrl)
+  if (!response.ok) {
+    throw new Error(`Vimeo oEmbed API returned ${response.status}`)
+  }
+  
+  const data: VimeoOEmbedResponse = await response.json()
+  
+  return {
+    title: data.title || '',
+    description: data.description || ''
+  }
+}
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  const url = (req.query.url as string | undefined)?.trim()
+  const videoId = (req.query.videoId as string | undefined)?.trim()
+  
+  if (!url && !videoId) {
+    return bad(res, 400, 'Missing url or videoId parameter')
+  }
+
+  // Extract video info from URL or use provided videoId
+  let videoInfo: { id: string; source: 'youtube' | 'vimeo' }
+  
+  if (url) {
+    const extracted = extractVideoId(url)
+    if (!extracted) {
+      return bad(res, 400, 'Unsupported video URL. Only YouTube and Vimeo are supported.')
+    }
+    videoInfo = extracted
+  } else {
+    // If only videoId is provided, assume YouTube for backward compatibility
+    videoInfo = { id: videoId!, source: 'youtube' }
+  }
+
+  const lang = ((req.query.lang as string | undefined) || 'en').toLowerCase()
+  const uiLocale = (req.headers['x-ui-locale'] as string | undefined)?.toLowerCase()
+  const preferAuto = req.query.preferAuto === 'true'
+
+  const cacheKey = buildKey(videoInfo.id, lang, preferAuto ? 'auto' : undefined, videoInfo.source)
+  const now = Date.now()
+  const cached = memoryCache.get(cacheKey)
+  if (cached && cached.expires > now) {
+    return ok(res, cached.body)
+  }
+
+  try {
+    if (videoInfo.source === 'youtube') {
+      // YouTube handling
+      // Note: getVideoDetails doesn't exist in the library, so we use a simplified approach
+      const title = ''
+      const description = ''
+
+      // Language order: manual en -> uiLocale -> lang -> any manual, then auto with same order
+      const langs: string[] = Array.from(new Set(['en', uiLocale, lang].filter(Boolean) as string[]))
+
+      let selected = null as null | { caps: Caption[]; lang: string; isAuto: boolean }
+      // Manual first
+      selected = await pickCaptions(videoInfo.id, langs, true)
+      if (!selected) {
+        // Try auto
+        selected = await pickCaptions(videoInfo.id, langs, false)
+      }
+
+      const captions = selected?.caps || []
+      const transcript = captions.map(c => c.text).join(' ').trim()
+      const response = {
+        title,
+        description,
+        captions,
+        transcript,
+        lang: selected?.lang || lang,
+        isAuto: selected?.isAuto || false,
+        source: 'youtube'
+      }
+
+      memoryCache.set(cacheKey, { body: response, expires: now + WEEK_MS })
+      return ok(res, response)
+    } else if (videoInfo.source === 'vimeo') {
+      // Vimeo handling
+      const { title, description } = await getVimeoMetadata(videoInfo.id)
+      
+      const response = {
+        title,
+        description,
+        captions: [], // Vimeo doesn't provide captions through oEmbed API
+        transcript: '', // No transcript available
+        lang: 'en', // Default language
+        isAuto: false, // Not applicable for Vimeo
+        source: 'vimeo'
+      }
+
+      memoryCache.set(cacheKey, { body: response, expires: now + WEEK_MS })
+      return ok(res, response)
+    } else {
+      return bad(res, 400, 'Unsupported video source')
+    }
+  } catch (e) {
+    return bad(res, 500, `Failed to fetch ${videoInfo.source} metadata`)
+  }
+}

api/vimeo-meta.ts

@@ -0,0 +1,93 @@
+import type { VercelRequest, VercelResponse } from '@vercel/node'
+
+type CacheEntry = {
+  body: unknown
+  expires: number
+}
+
+type VimeoOEmbedResponse = {
+  title: string
+  description: string
+  author_name: string
+  author_url: string
+  provider_name: string
+  provider_url: string
+  type: string
+  version: string
+  width: number
+  height: number
+  html: string
+  thumbnail_url: string
+  thumbnail_width: number
+  thumbnail_height: number
+}
+
+// In-memory cache for 7 days
+const WEEK_MS = 7 * 24 * 60 * 60 * 1000
+const memoryCache = new Map<string, CacheEntry>()
+
+function buildKey(videoId: string) {
+  return `vimeo|${videoId}`
+}
+
+function ok(res: VercelResponse, data: unknown) {
+  res.setHeader('Cache-Control', 'public, max-age=86400, s-maxage=604800') // client: 1d, CDN: 7d
+  return res.status(200).json(data)
+}
+
+function bad(res: VercelResponse, code: number, message: string) {
+  return res.status(code).json({ error: message })
+}
+
+async function getVimeoMetadata(videoId: string): Promise<{ title: string; description: string }> {
+  const vimeoUrl = `https://vimeo.com/${videoId}`
+  const oembedUrl = `https://vimeo.com/api/oembed.json?url=${encodeURIComponent(vimeoUrl)}`
+  
+  const response = await fetch(oembedUrl)
+  if (!response.ok) {
+    throw new Error(`Vimeo oEmbed API returned ${response.status}`)
+  }
+  
+  const data: VimeoOEmbedResponse = await response.json()
+  
+  return {
+    title: data.title || '',
+    description: data.description || ''
+  }
+}
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  const videoId = (req.query.videoId as string | undefined)?.trim()
+  if (!videoId) return bad(res, 400, 'Missing videoId')
+
+  // Validate that videoId is a number
+  if (!/^\d+$/.test(videoId)) {
+    return bad(res, 400, 'Invalid Vimeo video ID - must be numeric')
+  }
+
+  const cacheKey = buildKey(videoId)
+  const now = Date.now()
+  const cached = memoryCache.get(cacheKey)
+  if (cached && cached.expires > now) {
+    return ok(res, cached.body)
+  }
+
+  try {
+    const { title, description } = await getVimeoMetadata(videoId)
+    
+    const response = {
+      title,
+      description,
+      captions: [], // Vimeo doesn't provide captions through oEmbed API
+      transcript: '', // No transcript available
+      lang: 'en', // Default language
+      isAuto: false, // Not applicable for Vimeo
+      source: 'vimeo'
+    }
+
+    memoryCache.set(cacheKey, { body: response, expires: now + WEEK_MS })
+    return ok(res, response)
+  } catch (e) {
+    return bad(res, 500, 'Failed to fetch Vimeo metadata')
+  }
+}

api/youtube-meta.ts

@@ -0,0 +1,101 @@
+import type { VercelRequest, VercelResponse } from '@vercel/node'
+import { getSubtitles } from '@treeee/youtube-caption-extractor'
+
+type Caption = { start: number; dur: number; text: string }
+
+type Subtitle = { start: string | number; dur: string | number; text: string }
+
+type CacheEntry = {
+  body: unknown
+  expires: number
+}
+
+// In-memory cache for 7 days
+const WEEK_MS = 7 * 24 * 60 * 60 * 1000
+const memoryCache = new Map<string, CacheEntry>()
+
+function buildKey(videoId: string, lang: string, preferAuto?: string | string[]) {
+  return `${videoId}|${lang}|${preferAuto ? 'auto' : 'manual'}`
+}
+
+function ok(res: VercelResponse, data: unknown) {
+  res.setHeader('Cache-Control', 'public, max-age=86400, s-maxage=604800') // client: 1d, CDN: 7d
+  return res.status(200).json(data)
+}
+
+function bad(res: VercelResponse, code: number, message: string) {
+  return res.status(code).json({ error: message })
+}
+
+async function pickCaptions(videoID: string, preferredLangs: string[], manualFirst: boolean): Promise<{ caps: Caption[]; lang: string; isAuto: boolean } | null> {
+  for (const lang of preferredLangs) {
+    try {
+      const caps = await getSubtitles({ videoID, lang })
+      if (Array.isArray(caps) && caps.length > 0) {
+        // Convert the returned subtitles to our Caption format
+        const convertedCaps: Caption[] = caps.map((cap: Subtitle) => ({
+          start: typeof cap.start === 'string' ? parseFloat(cap.start) : cap.start,
+          dur: typeof cap.dur === 'string' ? parseFloat(cap.dur) : cap.dur,
+          text: cap.text
+        }))
+        return { caps: convertedCaps, lang, isAuto: !manualFirst }
+      }
+    } catch {
+      // try next
+    }
+  }
+  return null
+}
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  const videoId = (req.query.videoId as string | undefined)?.trim()
+  if (!videoId) return bad(res, 400, 'Missing videoId')
+
+  const lang = ((req.query.lang as string | undefined) || 'en').toLowerCase()
+  const uiLocale = (req.headers['x-ui-locale'] as string | undefined)?.toLowerCase()
+  const preferAuto = req.query.preferAuto === 'true'
+
+  const cacheKey = buildKey(videoId, lang, preferAuto ? 'auto' : undefined)
+  const now = Date.now()
+  const cached = memoryCache.get(cacheKey)
+  if (cached && cached.expires > now) {
+    return ok(res, cached.body)
+  }
+
+  try {
+    // Since getVideoDetails doesn't exist, we'll use a simple approach
+    // In a real implementation, you might want to use YouTube's API or other methods
+    const title = '' // Will be populated from captions or other sources
+    const description = ''
+
+    // Language order: manual en -> uiLocale -> lang -> any manual, then auto with same order
+    const langs: string[] = Array.from(new Set(['en', uiLocale, lang].filter(Boolean) as string[]))
+
+    let selected = null as null | { caps: Caption[]; lang: string; isAuto: boolean }
+    // Manual first
+    selected = await pickCaptions(videoId, langs, true)
+    if (!selected) {
+      // Try auto
+      selected = await pickCaptions(videoId, langs, false)
+    }
+
+    const captions = selected?.caps || []
+    const transcript = captions.map(c => c.text).join(' ').trim()
+    const response = {
+      title,
+      description,
+      captions,
+      transcript,
+      lang: selected?.lang || lang,
+      isAuto: selected?.isAuto || false,
+      source: 'youtube'
+    }
+
+    memoryCache.set(cacheKey, { body: response, expires: now + WEEK_MS })
+    return ok(res, response)
+  } catch (e) {
+    return bad(res, 500, 'Failed to fetch YouTube metadata')
+  }
+}
+
+

index.html

@@ -2,22 +2,27 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="theme-color" content="#0f172a" />
+    <link rel="manifest" href="/manifest.webmanifest" />
     <title>Boris - Nostr Bookmarks</title>
     <meta name="description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
-    <link rel="canonical" href="https://xn--bris-v0b.com/" />
+    <link rel="canonical" href="https://read.withboris.com/" />
     
     <!-- Open Graph / Social Media -->
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://xn--bris-v0b.com/" />
+    <meta property="og:url" content="https://read.withboris.com/" />
     <meta property="og:title" content="Boris - Nostr Bookmarks" />
     <meta property="og:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
     <meta property="og:site_name" content="Boris" />
     
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:url" content="https://xn--bris-v0b.com/" />
+    <meta name="twitter:url" content="https://read.withboris.com/" />
     <meta name="twitter:title" content="Boris - Nostr Bookmarks" />
     <meta name="twitter:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
   </head>

package.json

@@ -1,8 +1,8 @@
 {
   "name": "boris",
-  "version": "0.2.6",
+  "version": "0.6.2",
   "description": "A minimal nostr client for bookmark management",
-  "homepage": "https://xn--bris-v0b.com/",
+  "homepage": "https://read.withboris.com/",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,6 +14,8 @@
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.0.2",
+    "@treeee/youtube-caption-extractor": "^1.5.5",
+    "@vercel/node": "^5.3.26",
     "applesauce-accounts": "^4.0.0",
     "applesauce-content": "^4.0.0",
     "applesauce-core": "^4.0.0",
@@ -23,24 +25,34 @@
     "applesauce-relay": "^4.0.0",
     "date-fns": "^4.1.0",
     "nostr-tools": "^2.4.0",
+    "prismjs": "^1.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.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"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.14",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.21",
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.14",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vite-plugin-pwa": "^1.0.3",
+    "workbox-window": "^7.3.0"
   },
   "eslintConfig": {
     "root": true,
@@ -59,7 +71,8 @@
     "parser": "@typescript-eslint/parser",
     "plugins": [
       "@typescript-eslint",
-      "react-refresh"
+      "react-refresh",
+      "react-hooks"
     ],
     "rules": {
       "react-refresh/only-export-components": [
@@ -68,6 +81,7 @@
           "allowConstantExport": true
         }
       ],
+      "react-hooks/exhaustive-deps": "warn",
       "@typescript-eslint/no-unused-vars": [
         "error",
         {

postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}
+

public/_routes.json

@@ -0,0 +1,6 @@
+{
+  "version": 1,
+  "include": ["/*"],
+  "exclude": ["/assets/*", "/robots.txt", "/sw.js", "/_headers", "/_redirects"]
+}
+

public/manifest.webmanifest

@@ -0,0 +1,37 @@
+{
+  "name": "Boris - Nostr Bookmarks",
+  "short_name": "Boris",
+  "description": "Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "theme_color": "#0f172a",
+  "background_color": "#0b1220",
+  "orientation": "any",
+  "categories": ["productivity", "social", "utilities"],
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-maskable-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/icon-maskable-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
+

public/robots.txt

@@ -1,5 +1,5 @@
 User-agent: *
 Allow: /
 
-Sitemap: https://xn--bris-v0b.com/sitemap.xml
+Sitemap: https://read.withboris.com/sitemap.xml
 

src/App.tsx

@@ -11,6 +11,7 @@ import { createAddressLoader } from 'applesauce-loaders/loaders'
 import Bookmarks from './components/Bookmarks'
 import Toast from './components/Toast'
 import { useToast } from './hooks/useToast'
+import { useOnlineStatus } from './hooks/useOnlineStatus'
 import { RELAYS } from './config/relays'
 
 const DEFAULT_ARTICLE = import.meta.env.VITE_DEFAULT_ARTICLE_NADDR || 
@@ -27,8 +28,7 @@ function AppRoutes({
   const accountManager = Hooks.useAccountManager()
 
   const handleLogout = () => {
-    accountManager.setActive(undefined as never)
-    localStorage.removeItem('active')
+    accountManager.clearActive()
     showToast('Logged out successfully')
   }
 
@@ -52,6 +52,64 @@ function AppRoutes({
           />
         } 
       />
+      <Route 
+        path="/settings" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
+      <Route 
+        path="/explore" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
+      <Route 
+        path="/me" 
+        element={<Navigate to="/me/highlights" replace />} 
+      />
+      <Route 
+        path="/me/highlights" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
+      <Route 
+        path="/me/reading-list" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
+      <Route 
+        path="/me/archive" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
+      <Route 
+        path="/me/writings" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
       <Route path="/" element={<Navigate to={`/a/${DEFAULT_ARTICLE}`} replace />} />
     </Routes>
   )
@@ -62,6 +120,7 @@ function App() {
   const [accountManager, setAccountManager] = useState<AccountManager | null>(null)
   const [relayPool, setRelayPool] = useState<RelayPool | null>(null)
   const { toastMessage, toastType, showToast, clearToast } = useToast()
+  const isOnline = useOnlineStatus()
 
   useEffect(() => {
     const initializeApp = async () => {
@@ -109,6 +168,19 @@ function App() {
       console.log('Created relay group with', RELAYS.length, 'relays (including local)')
       console.log('Relay URLs:', RELAYS)
       
+      // Keep all relay connections alive indefinitely by creating a persistent subscription
+      // This prevents disconnection when no other subscriptions are active
+      // Create a minimal subscription that never completes to keep connections alive
+      const keepAliveSub = pool.subscription(RELAYS, { kinds: [0], limit: 0 }).subscribe({
+        next: () => {}, // No-op, we don't care about events
+        error: (err) => console.warn('Keep-alive subscription error:', err)
+      })
+      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
+      
       // Attach address/replaceable loaders so ProfileModel can fetch profiles
       const addressLoader = createAddressLoader(pool, {
         eventStore: store,
@@ -125,6 +197,12 @@ function App() {
       return () => {
         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()
+        }
       }
     }
     
@@ -138,6 +216,25 @@ function App() {
     }
   }, [])
 
+  // Monitor online/offline status
+  useEffect(() => {
+    if (!isOnline) {
+      showToast('You are offline. Some features may be limited.')
+    }
+  }, [isOnline, showToast])
+
+  // Listen for service worker updates
+  useEffect(() => {
+    const handleSWUpdate = () => {
+      showToast('New version available! Refresh to update.')
+    }
+
+    window.addEventListener('sw-update-available', handleSWUpdate)
+    return () => {
+      window.removeEventListener('sw-update-available', handleSWUpdate)
+    }
+  }, [showToast])
+
   if (!eventStore || !accountManager || !relayPool) {
     return (
       <div className="loading">
@@ -150,7 +247,7 @@ function App() {
     <EventStoreProvider eventStore={eventStore}>
       <AccountsProvider manager={accountManager}>
         <BrowserRouter>
-          <div className="app">
+          <div className="min-h-screen p-0 max-w-none m-0 relative">
             <AppRoutes relayPool={relayPool} showToast={showToast} />
           </div>
         </BrowserRouter>

src/components/AddBookmarkModal.tsx

@@ -0,0 +1,290 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTimes, faSpinner } from '@fortawesome/free-solid-svg-icons'
+import IconButton from './IconButton'
+import { fetchReadableContent } from '../services/readerService'
+
+interface AddBookmarkModalProps {
+  onClose: () => void
+  onSave: (url: string, title?: string, description?: string, tags?: string[]) => Promise<void>
+}
+
+// Helper to extract metadata from HTML
+function extractMetaTag(html: string, patterns: string[]): string | null {
+  for (const pattern of patterns) {
+    const match = html.match(new RegExp(pattern, 'i'))
+    if (match) return match[1]
+  }
+  return null
+}
+
+function extractTags(html: string): string[] {
+  const tags: string[] = []
+  
+  // Extract keywords meta tag
+  const keywords = extractMetaTag(html, [
+    '<meta\\s+name=["\'"]keywords["\'"]\\s+content=["\'"]([^"\']+)["\']'
+  ])
+  if (keywords) {
+    keywords.split(/[,;]/)
+      .map(k => k.trim().toLowerCase())
+      .filter(k => k.length > 0 && k.length < 30)
+      .forEach(k => tags.push(k))
+  }
+  
+  // Extract article:tag (multiple possible)
+  const articleTagRegex = /<meta\s+property=["']article:tag["']\s+content=["']([^"']+)["']/gi
+  let match
+  while ((match = articleTagRegex.exec(html)) !== null) {
+    const tag = match[1].trim().toLowerCase()
+    if (tag && tag.length < 30) tags.push(tag)
+  }
+  
+  return Array.from(new Set(tags)).slice(0, 5)
+}
+
+const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave }) => {
+  const [url, setUrl] = useState('')
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [tagsInput, setTagsInput] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+  const [isFetchingMetadata, setIsFetchingMetadata] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const fetchTimeoutRef = useRef<number | null>(null)
+  const lastFetchedUrlRef = useRef<string>('')
+
+  // Fetch metadata when URL changes
+  useEffect(() => {
+    // Clear any pending fetch
+    if (fetchTimeoutRef.current) {
+      clearTimeout(fetchTimeoutRef.current)
+    }
+
+    // Don't fetch if URL is empty or invalid
+    if (!url.trim()) return
+
+    // Validate URL format first
+    let parsedUrl: URL
+    try {
+      parsedUrl = new URL(url.trim())
+    } catch {
+      return // Invalid URL, don't fetch
+    }
+
+    // Skip if we've already fetched this URL
+    const normalizedUrl = parsedUrl.toString()
+    if (lastFetchedUrlRef.current === normalizedUrl) {
+      return
+    }
+
+    // Debounce the fetch to avoid spamming the API
+    fetchTimeoutRef.current = window.setTimeout(async () => {
+      setIsFetchingMetadata(true)
+      try {
+        const content = await fetchReadableContent(normalizedUrl)
+        lastFetchedUrlRef.current = normalizedUrl
+        
+        let extractedAnything = false
+        
+        // Extract title: prioritize og:title > twitter:title > <title>
+        if (!title && content.html) {
+          const extractedTitle = extractMetaTag(content.html, [
+            '<meta\\s+property=["\'"]og:title["\'"]\\s+content=["\'"]([^"\']+)["\']',
+            '<meta\\s+name=["\'"]twitter:title["\'"]\\s+content=["\'"]([^"\']+)["\']'
+          ]) || content.title
+          
+          if (extractedTitle) {
+            setTitle(extractedTitle)
+            extractedAnything = true
+          }
+        }
+        
+        // Extract description: prioritize og:description > twitter:description > meta description
+        if (!description && content.html) {
+          const extractedDesc = extractMetaTag(content.html, [
+            '<meta\\s+property=["\'"]og:description["\'"]\\s+content=["\'"]([^"\']+)["\']',
+            '<meta\\s+name=["\'"]twitter:description["\'"]\\s+content=["\'"]([^"\']+)["\']',
+            '<meta\\s+name=["\'"]description["\'"]\\s+content=["\'"]([^"\']+)["\']'
+          ])
+          
+          if (extractedDesc) {
+            setDescription(extractedDesc)
+            extractedAnything = true
+          }
+        }
+        
+        // Extract tags from keywords and article:tag (only if user hasn't modified tags)
+        if (!tagsInput && content.html) {
+          const extractedTags = extractTags(content.html)
+          
+          // Only add boris tag if we extracted something
+          if (extractedAnything || extractedTags.length > 0) {
+            const allTags = extractedTags.length > 0 
+              ? ['boris', ...extractedTags] 
+              : ['boris']
+            setTagsInput(allTags.join(', '))
+          }
+        }
+      } catch (err) {
+        console.warn('Failed to fetch metadata:', err)
+        // Don't show error to user, just skip auto-fill
+      } finally {
+        setIsFetchingMetadata(false)
+      }
+    }, 800) // Wait 800ms after user stops typing
+
+    return () => {
+      if (fetchTimeoutRef.current) {
+        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
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+
+    if (!url.trim()) {
+      setError('URL is required')
+      return
+    }
+
+    // Validate URL
+    try {
+      new URL(url)
+    } catch {
+      setError('Please enter a valid URL')
+      return
+    }
+
+    try {
+      setIsSaving(true)
+      
+      // Parse tags from comma-separated input
+      const tags = tagsInput
+        .split(',')
+        .map(tag => tag.trim())
+        .filter(tag => tag.length > 0)
+      
+      await onSave(
+        url.trim(),
+        title.trim() || undefined,
+        description.trim() || undefined,
+        tags.length > 0 ? tags : undefined
+      )
+      onClose()
+    } catch (err) {
+      console.error('Failed to save bookmark:', err)
+      setError(err instanceof Error ? err.message : 'Failed to save bookmark')
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  return createPortal(
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>Add Bookmark</h2>
+          <IconButton
+            icon={faTimes}
+            onClick={onClose}
+            title="Close"
+            ariaLabel="Close modal"
+            variant="ghost"
+          />
+        </div>
+
+        <form onSubmit={handleSubmit} className="modal-form">
+          <div className="form-group">
+            <label htmlFor="bookmark-url">
+              URL *
+              {isFetchingMetadata && (
+                <span className="fetching-indicator">
+                  <FontAwesomeIcon icon={faSpinner} spin /> Fetching details...
+                </span>
+              )}
+            </label>
+            <input
+              id="bookmark-url"
+              type="text"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder="https://example.com"
+              disabled={isSaving}
+              autoFocus
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="bookmark-title">Title</label>
+            <input
+              id="bookmark-title"
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Optional title"
+              disabled={isSaving}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="bookmark-description">Description</label>
+            <textarea
+              id="bookmark-description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Optional description"
+              disabled={isSaving}
+              rows={3}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="bookmark-tags">Tags</label>
+            <input
+              id="bookmark-tags"
+              type="text"
+              value={tagsInput}
+              onChange={(e) => setTagsInput(e.target.value)}
+              placeholder="comma, separated, tags"
+              disabled={isSaving}
+            />
+            <div className="form-helper-text">
+              Separate tags with commas (e.g., "nostr, web3, article")
+            </div>
+          </div>
+
+          {error && (
+            <div className="modal-error">{error}</div>
+          )}
+
+          <div className="modal-actions">
+            <button
+              type="button"
+              onClick={onClose}
+              className="btn-secondary"
+              disabled={isSaving}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="btn-primary"
+              disabled={isSaving}
+            >
+              {isSaving ? 'Saving...' : 'Save Bookmark'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>,
+    document.body
+  )
+}
+
+export default AddBookmarkModal
+

src/components/AuthorCard.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+
+interface AuthorCardProps {
+  authorPubkey: string
+}
+
+const AuthorCard: React.FC<AuthorCardProps> = ({ authorPubkey }) => {
+  const profile = useEventModel(Models.ProfileModel, [authorPubkey])
+  
+  const getAuthorName = () => {
+    if (profile?.name) return profile.name
+    if (profile?.display_name) return profile.display_name
+    return `${authorPubkey.slice(0, 8)}...${authorPubkey.slice(-8)}`
+  }
+  
+  const authorImage = profile?.picture || profile?.image
+  const authorBio = profile?.about
+  
+  return (
+    <div className="author-card">
+      <div className="author-card-avatar">
+        {authorImage ? (
+          <img src={authorImage} alt={getAuthorName()} />
+        ) : (
+          <FontAwesomeIcon icon={faUserCircle} />
+        )}
+      </div>
+      <div className="author-card-content">
+        <div className="author-card-name">{getAuthorName()}</div>
+        {authorBio && (
+          <p className="author-card-bio">{authorBio}</p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default AuthorCard
+

src/components/BlogPostCard.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCalendar, faUser, faNewspaper } from '@fortawesome/free-solid-svg-icons'
+import { formatDistance } from 'date-fns'
+import { BlogPostPreview } from '../services/exploreService'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+
+interface BlogPostCardProps {
+  post: BlogPostPreview
+  href: string
+}
+
+const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href }) => {
+  const profile = useEventModel(Models.ProfileModel, [post.author])
+  const displayName = profile?.name || profile?.display_name || 
+    `${post.author.slice(0, 8)}...${post.author.slice(-4)}`
+  
+  const publishedDate = post.published || post.event.created_at
+  const formattedDate = formatDistance(new Date(publishedDate * 1000), new Date(), { 
+    addSuffix: true 
+  })
+
+  return (
+    <Link 
+      to={href}
+      className="blog-post-card"
+      style={{ textDecoration: 'none', color: 'inherit' }}
+    >
+      <div className="blog-post-card-image">
+        {post.image ? (
+          <img 
+            src={post.image} 
+            alt={post.title}
+            loading="lazy"
+          />
+        ) : (
+          <div className="blog-post-image-placeholder">
+            <FontAwesomeIcon icon={faNewspaper} />
+          </div>
+        )}
+      </div>
+      <div className="blog-post-card-content">
+        <h3 className="blog-post-card-title">{post.title}</h3>
+        {post.summary && (
+          <p className="blog-post-card-summary">{post.summary}</p>
+        )}
+        <div className="blog-post-card-meta">
+          <span className="blog-post-card-author">
+            <FontAwesomeIcon icon={faUser} />
+            {displayName}
+          </span>
+          <span className="blog-post-card-date">
+            <FontAwesomeIcon icon={faCalendar} />
+            {formattedDate}
+          </span>
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+export default BlogPostCard
+

src/components/BookmarkItem.tsx

@@ -11,15 +11,17 @@ 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
 }
 
-export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards' }) => {
+export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards', settings }) => {
   const [ogImage, setOgImage] = useState<string | null>(null)
 
   const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
@@ -108,14 +110,13 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     hasUrls,
     extractedUrls,
     onSelectUrl,
-    getIconForUrlType,
-    firstUrlClassification,
     authorNpub,
     eventNevent,
     getAuthorDisplayName,
     handleReadNow,
     articleImage,
-    articleSummary
+    articleSummary,
+    settings
   }
 
   if (viewMode === 'compact') {
@@ -124,8 +125,8 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
 
   if (viewMode === 'large') {
     const previewImage = articleImage || instantPreview || ogImage
-    return <LargeView {...sharedProps} previewImage={previewImage} />
+    return <LargeView {...sharedProps} getIconForUrlType={getIconForUrlType} previewImage={previewImage} />
   }
 
-  return <CardView {...sharedProps} articleImage={articleImage} />
+  return <CardView {...sharedProps} getIconForUrlType={getIconForUrlType} articleImage={articleImage} />
 }

src/components/BookmarkList.tsx

@@ -1,12 +1,17 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faBookmark, faSpinner, faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faBookmark, faSpinner, faList, faThLarge, faImage, faRotate } 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 { ViewMode } from './Bookmarks'
 import { extractUrlsFromContent } from '../services/bookmarkHelpers'
+import { UserSettings } from '../services/settingsService'
+import { usePullToRefresh } from '../hooks/usePullToRefresh'
+import PullToRefreshIndicator from './PullToRefreshIndicator'
 
 interface BookmarkListProps {
   bookmarks: Bookmark[]
@@ -20,7 +25,11 @@ interface BookmarkListProps {
   onOpenSettings: () => void
   onRefresh?: () => void
   isRefreshing?: boolean
+  lastFetchTime?: number | null
   loading?: boolean
+  relayPool: RelayPool | null
+  settings?: UserSettings
+  isMobile?: boolean
 }
 
 export const BookmarkList: React.FC<BookmarkListProps> = ({
@@ -35,8 +44,25 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   onOpenSettings,
   onRefresh,
   isRefreshing,
-  loading = false
+  lastFetchTime,
+  loading = false,
+  relayPool,
+  settings,
+  isMobile = false
 }) => {
+  const bookmarksListRef = useRef<HTMLDivElement>(null)
+
+  // Pull-to-refresh for bookmarks
+  const pullToRefreshState = usePullToRefresh(bookmarksListRef, {
+    onRefresh: () => {
+      if (onRefresh) {
+        onRefresh()
+      }
+    },
+    isRefreshing: isRefreshing || false,
+    disabled: !onRefresh
+  })
+
   // Helper to check if a bookmark has either content or a URL
   const hasContentOrUrl = (ib: IndividualBookmark) => {
     // Check if has content (text)
@@ -96,21 +122,33 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
         onToggleCollapse={onToggleCollapse} 
         onLogout={onLogout}
         onOpenSettings={onOpenSettings}
-        onRefresh={onRefresh}
-        isRefreshing={isRefreshing}
+        relayPool={relayPool}
+        isMobile={isMobile}
       />
       
-      {loading ? (
-        <div className="loading">
-          <FontAwesomeIcon icon={faSpinner} spin />
-        </div>
-      ) : allIndividualBookmarks.length === 0 ? (
-        <div className="empty-state">
-          <p>No bookmarks found.</p>
-          <p>Add bookmarks using your nostr client to see them here.</p>
-        </div>
+      {allIndividualBookmarks.length === 0 ? (
+        loading ? (
+          <div className="loading">
+            <FontAwesomeIcon icon={faSpinner} spin />
+          </div>
+        ) : (
+          <div className="empty-state">
+            <p>No bookmarks found.</p>
+            <p>Add bookmarks using your nostr client to see them here.</p>
+            <p>If you aren't on nostr yet, start here: <a href="https://nstart.me/" target="_blank" rel="noopener noreferrer">nstart.me</a></p>
+          </div>
+        )
       ) : (
-        <div className="bookmarks-list">
+        <div 
+          ref={bookmarksListRef}
+          className={`bookmarks-list pull-to-refresh-container ${pullToRefreshState.isPulling ? 'is-pulling' : ''}`}
+        >
+          <PullToRefreshIndicator
+            isPulling={pullToRefreshState.isPulling}
+            pullDistance={pullToRefreshState.pullDistance}
+            canRefresh={pullToRefreshState.canRefresh}
+            isRefreshing={isRefreshing || false}
+          />
           <div className={`bookmarks-grid bookmarks-${viewMode}`}>
             {allIndividualBookmarks.map((individualBookmark, index) => 
               <BookmarkItem 
@@ -119,12 +157,24 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
                 index={index} 
                 onSelectUrl={onSelectUrl}
                 viewMode={viewMode}
+                settings={settings}
               />
             )}
           </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}
+          />
+        )}
         <IconButton
           icon={faList}
           onClick={() => onViewModeChange('compact')}

src/components/BookmarkViews/CardView.tsx

@@ -7,6 +7,10 @@ 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 { getProfileUrl, getEventUrl } from '../../config/nostrGateways'
 
 interface CardViewProps {
   bookmark: IndividualBookmark
@@ -15,13 +19,13 @@ interface CardViewProps {
   extractedUrls: string[]
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
   getIconForUrlType: IconGetter
-  firstUrlClassification: { buttonText: string } | null
   authorNpub: string
   eventNevent?: string
   getAuthorDisplayName: () => string
   handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
   articleImage?: string
   articleSummary?: string
+  settings?: UserSettings
 }
 
 export const CardView: React.FC<CardViewProps> = ({
@@ -31,27 +35,60 @@ export const CardView: React.FC<CardViewProps> = ({
   extractedUrls,
   onSelectUrl,
   getIconForUrlType,
-  firstUrlClassification,
   authorNpub,
   eventNevent,
   getAuthorDisplayName,
   handleReadNow,
   articleImage,
-  articleSummary
+  articleSummary,
+  settings
 }) => {
+  const firstUrl = hasUrls ? extractedUrls[0] : null
+  const firstUrlClassificationType = firstUrl ? classifyUrl(firstUrl)?.type : null
+  const instantPreview = firstUrl ? getPreviewImage(firstUrl, firstUrlClassificationType || '') : null
+  
+  const [ogImage, setOgImage] = useState<string | null>(null)
   const [expanded, setExpanded] = useState(false)
   const [urlsExpanded, setUrlsExpanded] = useState(false)
+  
   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)
+  
+  // Fetch OG image if we don't have any other image
+  React.useEffect(() => {
+    if (firstUrl && !articleImage && !instantPreview && !ogImage) {
+      fetchOgImage(firstUrl).then(setOgImage)
+    }
+  }, [firstUrl, articleImage, instantPreview, ogImage])
+
+  const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      triggerOpen()
+    }
+  }
 
   return (
-    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
-      {isArticle && articleImage && (
+    <div 
+      key={`${bookmark.id}-${index}`}
+      className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}
+      onClick={triggerOpen}
+      role="button"
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+    >
+      {cachedImage && (
         <div 
           className="article-hero-image"
-          style={{ backgroundImage: `url(${articleImage})` }}
+          style={{ backgroundImage: `url(${cachedImage})` }}
           onClick={() => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)}
         />
       )}
@@ -74,11 +111,12 @@ export const CardView: React.FC<CardViewProps> = ({
         
         {eventNevent ? (
           <a
-            href={`https://search.dergigi.com/e/${eventNevent}`}
+            href={getEventUrl(eventNevent)}
             target="_blank"
             rel="noopener noreferrer"
             className="bookmark-date-link"
             title="Open event in search"
+            onClick={(e) => e.stopPropagation()}
           >
             {formatDate(bookmark.created_at)}
           </a>
@@ -90,23 +128,22 @@ export const CardView: React.FC<CardViewProps> = ({
       {extractedUrls.length > 0 && (
         <div className="bookmark-urls">
           {(urlsExpanded ? extractedUrls : extractedUrls.slice(0, 1)).map((url, urlIndex) => {
-            const classification = classifyUrl(url)
             return (
               <div key={urlIndex} className="url-row">
                 <button
                   className="bookmark-url"
-                  onClick={() => onSelectUrl?.(url)}
+                  onClick={(e) => { e.stopPropagation(); onSelectUrl?.(url) }}
                   title="Open in reader"
                 >
                   {url}
                 </button>
                 <IconButton
                   icon={getIconForUrlType(url)}
-                  ariaLabel={classification.buttonText}
-                  title={classification.buttonText}
+                  ariaLabel="Open"
+                  title="Open"
                   variant="success"
                   size={32}
-                  onClick={(e) => { e.preventDefault(); onSelectUrl?.(url) }}
+                  onClick={(e) => { e.preventDefault(); e.stopPropagation(); onSelectUrl?.(url) }}
                 />
               </div>
             )
@@ -114,7 +151,7 @@ export const CardView: React.FC<CardViewProps> = ({
           {extractedUrls.length > 1 && (
             <button
               className="expand-toggle-urls"
-              onClick={() => setUrlsExpanded(v => !v)}
+              onClick={(e) => { e.stopPropagation(); setUrlsExpanded(v => !v) }}
               aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
               title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
             >
@@ -143,7 +180,7 @@ export const CardView: React.FC<CardViewProps> = ({
       {contentLength > 210 && (
         <button
           className="expand-toggle"
-          onClick={() => setExpanded(v => !v)}
+          onClick={(e) => { e.stopPropagation(); setExpanded(v => !v) }}
           aria-label={expanded ? 'Collapse' : 'Expand'}
           title={expanded ? 'Collapse' : 'Expand'}
         >
@@ -154,20 +191,17 @@ export const CardView: React.FC<CardViewProps> = ({
       <div className="bookmark-footer">
         <div className="bookmark-meta-minimal">
           <a
-            href={`https://search.dergigi.com/p/${authorNpub}`}
+            href={getProfileUrl(authorNpub)}
             target="_blank"
             rel="noopener noreferrer"
             className="author-link-minimal"
             title="Open author in search"
+            onClick={(e) => e.stopPropagation()}
           >
             {getAuthorDisplayName()}
           </a>
         </div>
-        {(hasUrls && firstUrlClassification) || bookmark.kind === 30023 ? (
-          <button className="read-now-button-minimal" onClick={handleReadNow}>
-            {bookmark.kind === 30023 ? 'Read Article' : firstUrlClassification?.buttonText}
-          </button>
-        ) : null}
+        {/* CTA removed */}
       </div>
     </div>
   )

src/components/BookmarkViews/CompactView.tsx

@@ -2,9 +2,10 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBookmark, faUserLock, faGlobe } from '@fortawesome/free-solid-svg-icons'
 import { IndividualBookmark } from '../../types/bookmarks'
-import { formatDate } from '../../utils/bookmarkUtils'
+import { formatDateCompact } from '../../utils/bookmarkUtils'
 import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
-import { IconGetter } from './shared'
+import { useImageCache } from '../../hooks/useImageCache'
+import { UserSettings } from '../../services/settingsService'
 
 interface CompactViewProps {
   bookmark: IndividualBookmark
@@ -12,10 +13,9 @@ interface CompactViewProps {
   hasUrls: boolean
   extractedUrls: string[]
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
-  getIconForUrlType: IconGetter
-  firstUrlClassification: { buttonText: string } | null
   articleImage?: string
   articleSummary?: string
+  settings?: UserSettings
 }
 
 export const CompactView: React.FC<CompactViewProps> = ({
@@ -24,14 +24,17 @@ export const CompactView: React.FC<CompactViewProps> = ({
   hasUrls,
   extractedUrls,
   onSelectUrl,
-  getIconForUrlType,
-  firstUrlClassification,
-  articleSummary
+  articleImage,
+  articleSummary,
+  settings
 }) => {
   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
     
@@ -55,6 +58,13 @@ 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">
@@ -75,23 +85,8 @@ export const CompactView: React.FC<CompactViewProps> = ({
             <ContentWithResolvedProfiles content={displayText.slice(0, 60) + (displayText.length > 60 ? '…' : '')} />
           </div>
         )}
-        <span className="bookmark-date-compact">{formatDate(bookmark.created_at)}</span>
-        {isClickable && (
-          <button
-            className="compact-read-btn"
-            onClick={(e) => { 
-              e.stopPropagation()
-              if (isArticle) {
-                onSelectUrl?.('', { id: bookmark.id, kind: bookmark.kind, tags: bookmark.tags, pubkey: bookmark.pubkey })
-              } else {
-                onSelectUrl?.(extractedUrls[0])
-              }
-            }}
-            title={isArticle ? 'Read Article' : firstUrlClassification?.buttonText}
-          >
-            <FontAwesomeIcon icon={isArticle ? getIconForUrlType('') : getIconForUrlType(extractedUrls[0])} />
-          </button>
-        )}
+        <span className="bookmark-date-compact">{formatDateCompact(bookmark.created_at)}</span>
+        {/* CTA removed */}
       </div>
     </div>
   )

src/components/BookmarkViews/LargeView.tsx

@@ -4,6 +4,9 @@ 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 { getProfileUrl, getEventUrl } from '../../config/nostrGateways'
 
 interface LargeViewProps {
   bookmark: IndividualBookmark
@@ -12,13 +15,13 @@ interface LargeViewProps {
   extractedUrls: string[]
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
   getIconForUrlType: IconGetter
-  firstUrlClassification: { buttonText: string } | null
   previewImage: string | null
   authorNpub: string
   eventNevent?: string
   getAuthorDisplayName: () => string
   handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
   articleSummary?: string
+  settings?: UserSettings
 }
 
 export const LargeView: React.FC<LargeViewProps> = ({
@@ -28,29 +31,46 @@ export const LargeView: React.FC<LargeViewProps> = ({
   extractedUrls,
   onSelectUrl,
   getIconForUrlType,
-  firstUrlClassification,
   previewImage,
   authorNpub,
   eventNevent,
   getAuthorDisplayName,
   handleReadNow,
-  articleSummary
+  articleSummary,
+  settings
 }) => {
+  const cachedImage = useImageCache(previewImage || undefined, settings)
   const isArticle = bookmark.kind === 30023
   
+  const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
+  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      triggerOpen()
+    }
+  }
+
   return (
-    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark large ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
-      {(hasUrls || (isArticle && previewImage)) && (
+    <div 
+      key={`${bookmark.id}-${index}`} 
+      className={`individual-bookmark large ${bookmark.isPrivate ? 'private-bookmark' : ''}`}
+      onClick={triggerOpen}
+      role="button"
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+    >
+      {(hasUrls || (isArticle && cachedImage)) && (
         <div 
           className="large-preview-image" 
-          onClick={() => {
+          onClick={(e) => {
+            e.stopPropagation()
             if (isArticle) {
               handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
             } else {
               onSelectUrl?.(extractedUrls[0])
             }
           }}
-          style={previewImage ? { backgroundImage: `url(${previewImage})` } : undefined}
+          style={cachedImage ? { backgroundImage: `url(${cachedImage})` } : undefined}
         >
           {!previewImage && hasUrls && (
             <div className="preview-placeholder">
@@ -74,10 +94,11 @@ export const LargeView: React.FC<LargeViewProps> = ({
         <div className="large-footer">
           <span className="large-author">
             <a
-              href={`https://search.dergigi.com/p/${authorNpub}`}
+              href={getProfileUrl(authorNpub)}
               target="_blank"
               rel="noopener noreferrer"
               className="author-link-minimal"
+              onClick={(e) => e.stopPropagation()}
             >
               {getAuthorDisplayName()}
             </a>
@@ -85,21 +106,17 @@ export const LargeView: React.FC<LargeViewProps> = ({
           
           {eventNevent && (
             <a
-              href={`https://search.dergigi.com/e/${eventNevent}`}
+              href={getEventUrl(eventNevent)}
               target="_blank"
               rel="noopener noreferrer"
               className="bookmark-date-link"
+              onClick={(e) => e.stopPropagation()}
             >
               {formatDate(bookmark.created_at)}
             </a>
           )}
           
-          {(hasUrls && firstUrlClassification) || isArticle ? (
-            <button className="large-read-button" onClick={handleReadNow}>
-              <FontAwesomeIcon icon={isArticle ? getIconForUrlType('') : getIconForUrlType(extractedUrls[0])} />
-              {isArticle ? 'Read Article' : firstUrlClassification?.buttonText}
-            </button>
-          ) : null}
+          {/* CTA removed */}
         </div>
       </div>
     </div>

src/components/Bookmarks.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react'
-import { useParams, useLocation } from 'react-router-dom'
+import React, { useMemo, useEffect, useRef } from 'react'
+import { useParams, useLocation, useNavigate } from 'react-router-dom'
 import { Hooks } from 'applesauce-react'
 import { useEventStore } from 'applesauce-react/hooks'
 import { RelayPool } from 'applesauce-relay'
@@ -10,7 +10,11 @@ import { useBookmarksData } from '../hooks/useBookmarksData'
 import { useContentSelection } from '../hooks/useContentSelection'
 import { useHighlightCreation } from '../hooks/useHighlightCreation'
 import { useBookmarksUI } from '../hooks/useBookmarksUI'
+import { useRelayStatus } from '../hooks/useRelayStatus'
+import { useOfflineSync } from '../hooks/useOfflineSync'
 import ThreePaneLayout from './ThreePaneLayout'
+import Explore from './Explore'
+import Me from './Me'
 import { classifyHighlights } from '../utils/highlightClassification'
 
 export type ViewMode = 'compact' | 'cards' | 'large'
@@ -23,10 +27,30 @@ interface BookmarksProps {
 const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   const { naddr } = useParams<{ naddr?: string }>()
   const location = useLocation()
+  const navigate = useNavigate()
+  const previousLocationRef = useRef<string>()
   
   const externalUrl = location.pathname.startsWith('/r/') 
     ? decodeURIComponent(location.pathname.slice(3))
     : undefined
+  
+  const showSettings = location.pathname === '/settings'
+  const showExplore = location.pathname === '/explore'
+  const showMe = location.pathname.startsWith('/me')
+  
+  // Extract tab from me routes
+  const meTab = location.pathname === '/me' ? 'highlights' : 
+                location.pathname === '/me/highlights' ? 'highlights' :
+                location.pathname === '/me/reading-list' ? 'reading-list' :
+                location.pathname === '/me/archive' ? 'archive' :
+                location.pathname === '/me/writings' ? 'writings' : 'highlights'
+  
+  // Track previous location for going back from settings/me/explore
+  useEffect(() => {
+    if (!showSettings && !showMe && !showExplore) {
+      previousLocationRef.current = location.pathname
+    }
+  }, [location.pathname, showSettings, showMe, showExplore])
     
   const activeAccount = Hooks.useActiveAccount()
   const accountManager = Hooks.useAccountManager()
@@ -39,7 +63,22 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     accountManager
   })
 
+  // Monitor relay status for offline sync
+  const relayStatuses = useRelayStatus({ relayPool })
+
+  // Automatically sync local events to remote relays when coming back online
+  useOfflineSync({
+    relayPool,
+    account: activeAccount || null,
+    eventStore,
+    relayStatuses,
+    enabled: true
+  })
+
   const {
+    isMobile,
+    isSidebarOpen,
+    toggleSidebar,
     isCollapsed,
     setIsCollapsed,
     isHighlightsCollapsed,
@@ -50,8 +89,6 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setShowHighlights,
     selectedHighlightId,
     setSelectedHighlightId,
-    showSettings,
-    setShowSettings,
     currentArticleCoordinate,
     setCurrentArticleCoordinate,
     currentArticleEventId,
@@ -62,6 +99,14 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setHighlightVisibility
   } = useBookmarksUI({ settings })
 
+  // Close sidebar on mobile when route changes (e.g., clicking on blog posts in Explore)
+  useEffect(() => {
+    if (isMobile && isSidebarOpen) {
+      toggleSidebar()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname])
+
   const {
     bookmarks,
     bookmarksLoading,
@@ -71,6 +116,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setHighlightsLoading,
     followedPubkeys,
     isRefreshing,
+    lastFetchTime,
     handleFetchHighlights,
     handleRefreshAll
   } = useBookmarksData({
@@ -79,7 +125,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     accountManager,
     naddr,
     currentArticleCoordinate,
-    currentArticleEventId
+    currentArticleEventId,
+    settings
   })
 
   const {
@@ -89,15 +136,23 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setReaderLoading,
     readerContent,
     setReaderContent,
-    handleSelectUrl
+    handleSelectUrl: baseHandleSelectUrl
   } = useContentSelection({
     relayPool,
     settings,
     setIsCollapsed,
-    setShowSettings,
+    setShowSettings: () => {}, // No-op since we use route-based settings now
     setCurrentArticle
   })
 
+  // Wrap handleSelectUrl to close mobile sidebar when selecting content
+  const handleSelectUrl = (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => {
+    if (isMobile && isSidebarOpen) {
+      toggleSidebar()
+    }
+    baseHandleSelectUrl(url, bookmark)
+  }
+
   const {
     highlightButtonRef,
     handleTextSelection,
@@ -106,6 +161,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   } = useHighlightCreation({
     activeAccount,
     relayPool,
+    eventStore,
     currentArticle,
     selectedUrl,
     readerContent,
@@ -125,7 +181,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setHighlightsLoading,
     setCurrentArticleCoordinate,
     setCurrentArticleEventId,
-    setCurrentArticle
+    setCurrentArticle,
+    settings
   })
   
   // Load external URL if /r/* route is used
@@ -151,26 +208,40 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     <ThreePaneLayout
       isCollapsed={isCollapsed}
       isHighlightsCollapsed={isHighlightsCollapsed}
+      isSidebarOpen={isSidebarOpen}
       showSettings={showSettings}
+      showExplore={showExplore}
+      showMe={showMe}
       bookmarks={bookmarks}
       bookmarksLoading={bookmarksLoading}
       viewMode={viewMode}
       isRefreshing={isRefreshing}
-      onToggleSidebar={() => setIsCollapsed(!isCollapsed)}
+      lastFetchTime={lastFetchTime}
+      onToggleSidebar={isMobile ? toggleSidebar : () => setIsCollapsed(!isCollapsed)}
       onLogout={onLogout}
       onViewModeChange={setViewMode}
       onOpenSettings={() => {
-        setShowSettings(true)
-        setIsCollapsed(true)
+        navigate('/settings')
+        if (isMobile) {
+          toggleSidebar()
+        } else {
+          setIsCollapsed(true)
+        }
         setIsHighlightsCollapsed(true)
       }}
       onRefresh={handleRefreshAll}
+      relayPool={relayPool}
+      eventStore={eventStore}
       readerLoading={readerLoading}
       readerContent={readerContent}
       selectedUrl={selectedUrl}
       settings={settings}
       onSaveSettings={saveSettings}
-      onCloseSettings={() => setShowSettings(false)}
+      onCloseSettings={() => {
+        // Navigate back to previous location or default
+        const backTo = previousLocationRef.current || '/'
+        navigate(backTo)
+      }}
       classifiedHighlights={classifiedHighlights}
       showHighlights={showHighlights}
       selectedHighlightId={selectedHighlightId}
@@ -183,6 +254,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       onClearSelection={handleClearSelection}
       currentUserPubkey={activeAccount?.pubkey}
       followedPubkeys={followedPubkeys}
+      activeAccount={activeAccount}
+      currentArticle={currentArticle}
       highlights={highlights}
       highlightsLoading={highlightsLoading}
       onToggleHighlightsPanel={() => setIsHighlightsCollapsed(!isHighlightsCollapsed)}
@@ -193,6 +266,12 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       highlightButtonRef={highlightButtonRef}
       onCreateHighlight={handleCreateHighlight}
       hasActiveAccount={!!(activeAccount && relayPool)}
+      explore={showExplore ? (
+        relayPool ? <Explore relayPool={relayPool} /> : null
+      ) : undefined}
+      me={showMe ? (
+        relayPool ? <Me relayPool={relayPool} activeTab={meTab} /> : null
+      ) : undefined}
       toastMessage={toastMessage ?? undefined}
       toastType={toastType}
       onClearToast={clearToast}

src/components/CompactButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+
+interface CompactButtonProps {
+  icon?: IconDefinition
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  title?: string
+  ariaLabel?: string
+  disabled?: boolean
+  spin?: boolean
+  className?: string
+  children?: React.ReactNode
+}
+
+const CompactButton: React.FC<CompactButtonProps> = ({
+  icon,
+  onClick,
+  title,
+  ariaLabel,
+  disabled = false,
+  spin = false,
+  className = '',
+  children
+}) => {
+  return (
+    <button
+      className={`compact-button ${className}`.trim()}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel || title}
+      disabled={disabled}
+    >
+      {icon && <FontAwesomeIcon icon={icon} spin={spin} />}
+      {children}
+    </button>
+  )
+}
+
+export default CompactButton
+

src/components/ConfirmDialog.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
+
+interface ConfirmDialogProps {
+  isOpen: boolean
+  title: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  onConfirm: () => void
+  onCancel: () => void
+  variant?: 'danger' | 'warning' | 'info'
+}
+
+const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  isOpen,
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  onConfirm,
+  onCancel,
+  variant = 'warning'
+}) => {
+  if (!isOpen) return null
+
+  return (
+    <div className="confirm-dialog-overlay" onClick={onCancel}>
+      <div className="confirm-dialog" onClick={(e) => e.stopPropagation()}>
+        <div className={`confirm-dialog-icon ${variant}`}>
+          <FontAwesomeIcon icon={faExclamationTriangle} />
+        </div>
+        <h3 className="confirm-dialog-title">{title}</h3>
+        <p className="confirm-dialog-message">{message}</p>
+        <div className="confirm-dialog-actions">
+          <button
+            className="confirm-dialog-btn cancel"
+            onClick={onCancel}
+          >
+            {cancelText}
+          </button>
+          <button
+            className={`confirm-dialog-btn confirm ${variant}`}
+            onClick={onConfirm}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ConfirmDialog
+

src/components/ContentPanel.tsx

@@ -1,8 +1,18 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState, useEffect, useRef } from 'react'
+import ReactPlayer from 'react-player'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import rehypeRaw from 'rehype-raw'
+import rehypePrism from 'rehype-prism-plus'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+import 'prismjs/themes/prism-tomorrow.css'
+import { faSpinner, faCheckCircle, faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare } from '@fortawesome/free-solid-svg-icons'
+import { nip19 } from 'nostr-tools'
+import { getNostrUrl } from '../config/nostrGateways'
+import { RELAYS } from '../config/relays'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { NostrEvent } from 'nostr-tools'
 import { Highlight } from '../types/highlights'
 import { readingTime } from 'reading-time-estimator'
 import { hexToRgb } from '../utils/colorHelpers'
@@ -11,6 +21,20 @@ import { HighlightVisibility } from './HighlightsPanel'
 import { useMarkdownToHTML } from '../hooks/useMarkdownToHTML'
 import { useHighlightedContent } from '../hooks/useHighlightedContent'
 import { useHighlightInteractions } from '../hooks/useHighlightInteractions'
+import { UserSettings } from '../services/settingsService'
+import { 
+  createEventReaction, 
+  createWebsiteReaction,
+  hasMarkedEventAsRead,
+  hasMarkedWebsiteAsRead
+} from '../services/reactionService'
+import AuthorCard from './AuthorCard'
+import { faBooks } from '../icons/customIcons'
+import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
+import { classifyUrl } from '../utils/helpers'
+import { buildNativeVideoUrl } from '../utils/videoHelpers'
+import { useReadingPosition } from '../hooks/useReadingPosition'
+import { ReadingProgressIndicator } from './ReadingProgressIndicator'
 
 interface ContentPanelProps {
   loading: boolean
@@ -19,6 +43,8 @@ interface ContentPanelProps {
   markdown?: string
   selectedUrl?: string
   image?: string
+  summary?: string
+  published?: number
   highlights?: Highlight[]
   showHighlights?: boolean
   highlightStyle?: 'marker' | 'underline'
@@ -28,9 +54,16 @@ interface ContentPanelProps {
   highlightVisibility?: HighlightVisibility
   currentUserPubkey?: string
   followedPubkeys?: Set<string>
+  settings?: UserSettings
+  relayPool?: RelayPool | null
+  activeAccount?: IAccount | null
+  currentArticle?: NostrEvent | null
   // For highlight creation
   onTextSelection?: (text: string) => void
   onClearSelection?: () => void
+  // For reading progress indicator positioning
+  isSidebarCollapsed?: boolean
+  isHighlightsCollapsed?: boolean
 }
 
 const ContentPanel: React.FC<ContentPanelProps> = ({ 
@@ -40,19 +73,37 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   markdown, 
   selectedUrl,
   image,
+  summary,
+  published,
   highlights = [],
   showHighlights = true,
   highlightStyle = 'marker',
   highlightColor = '#ffff00',
+  settings,
+  relayPool,
+  activeAccount,
+  currentArticle,
   onHighlightClick,
   selectedHighlightId,
   highlightVisibility = { nostrverse: true, friends: true, mine: true },
   currentUserPubkey,
   followedPubkeys = new Set(),
   onTextSelection,
-  onClearSelection
+  onClearSelection,
+  isSidebarCollapsed = false,
+  isHighlightsCollapsed = false
 }) => {
-  const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef } = useMarkdownToHTML(markdown)
+  const [isMarkedAsRead, setIsMarkedAsRead] = useState(false)
+  const [isCheckingReadStatus, setIsCheckingReadStatus] = useState(false)
+  const [showCheckAnimation, setShowCheckAnimation] = useState(false)
+  const [showArticleMenu, setShowArticleMenu] = useState(false)
+  const [showVideoMenu, setShowVideoMenu] = useState(false)
+  const [showExternalMenu, setShowExternalMenu] = useState(false)
+  const articleMenuRef = useRef<HTMLDivElement>(null)
+  const videoMenuRef = useRef<HTMLDivElement>(null)
+  const externalMenuRef = useRef<HTMLDivElement>(null)
+  const [ytMeta, setYtMeta] = useState<{ title?: string; description?: string; transcript?: string } | null>(null)
+  const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef, processedMarkdown } = useMarkdownToHTML(markdown, relayPool)
   
   const { finalHtml, relevantHighlights } = useHighlightedContent({
     html,
@@ -67,13 +118,48 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     followedPubkeys
   })
 
-  const { contentRef, handleMouseUp } = useHighlightInteractions({
+  const { contentRef, handleSelectionEnd } = useHighlightInteractions({
     onHighlightClick,
     selectedHighlightId,
     onTextSelection,
     onClearSelection
   })
 
+  // Reading position tracking - only for text content, not videos
+  const isTextContent = !loading && !!(markdown || html) && !selectedUrl?.includes('youtube') && !selectedUrl?.includes('vimeo')
+  const { isReadingComplete, progressPercentage } = 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
+      }
+    }
+  })
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (articleMenuRef.current && !articleMenuRef.current.contains(target)) {
+        setShowArticleMenu(false)
+      }
+      if (videoMenuRef.current && !videoMenuRef.current.contains(target)) {
+        setShowVideoMenu(false)
+      }
+      if (externalMenuRef.current && !externalMenuRef.current.contains(target)) {
+        setShowExternalMenu(false)
+      }
+    }
+    
+    if (showArticleMenu || showVideoMenu || showExternalMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside)
+      }
+    }
+  }, [showArticleMenu, showVideoMenu, showExternalMenu])
+
   const readingStats = useMemo(() => {
     const content = markdown || html || ''
     if (!content) return null
@@ -83,6 +169,233 @@ 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
+  const [videoDurationSec, setVideoDurationSec] = useState<number | null>(null)
+  // Load YouTube metadata/captions when applicable
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!selectedUrl) return setYtMeta(null)
+        const id = extractYouTubeId(selectedUrl)
+        if (!id) return setYtMeta(null)
+        const locale = navigator?.language?.split('-')[0] || 'en'
+        const data = await getYouTubeMeta(id, locale)
+        if (data) setYtMeta({ title: data.title, description: data.description, transcript: data.transcript })
+      } catch {
+        setYtMeta(null)
+      }
+    })()
+  }, [selectedUrl])
+
+  const formatDuration = (totalSeconds: number): string => {
+    const hours = Math.floor(totalSeconds / 3600)
+    const minutes = Math.floor((totalSeconds % 3600) / 60)
+    const seconds = Math.floor(totalSeconds % 60)
+    const mm = hours > 0 ? String(minutes).padStart(2, '0') : String(minutes)
+    const ss = String(seconds).padStart(2, '0')
+    return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`
+  }
+  
+
+  // Get article links for menu
+  const getArticleLinks = () => {
+    if (!currentArticle) return null
+
+    const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1] || ''
+    const relayHints = RELAYS.filter(r => 
+      !r.includes('localhost') && !r.includes('127.0.0.1')
+    ).slice(0, 3)
+
+    const naddr = nip19.naddrEncode({
+      kind: 30023,
+      pubkey: currentArticle.pubkey,
+      identifier: dTag,
+      relays: relayHints
+    })
+
+    return {
+      portal: getNostrUrl(naddr),
+      native: `nostr:${naddr}`
+    }
+  }
+
+  const articleLinks = getArticleLinks()
+
+  const handleMenuToggle = () => {
+    setShowArticleMenu(!showArticleMenu)
+  }
+
+  const toggleVideoMenu = () => setShowVideoMenu(v => !v)
+
+  const handleOpenPortal = () => {
+    if (articleLinks) {
+      window.open(articleLinks.portal, '_blank', 'noopener,noreferrer')
+    }
+    setShowArticleMenu(false)
+  }
+
+  const handleOpenNative = () => {
+    if (articleLinks) {
+      window.location.href = articleLinks.native
+    }
+    setShowArticleMenu(false)
+  }
+  
+  // Video actions
+  const handleOpenVideoExternal = () => {
+    if (selectedUrl) window.open(selectedUrl, '_blank', 'noopener,noreferrer')
+    setShowVideoMenu(false)
+  }
+
+  const handleOpenVideoNative = () => {
+    if (!selectedUrl) return
+    const native = buildNativeVideoUrl(selectedUrl)
+    if (native) {
+      window.location.href = native
+    } else {
+      window.location.href = selectedUrl
+    }
+    setShowVideoMenu(false)
+  }
+
+  const handleCopyVideoUrl = async () => {
+    try {
+      if (selectedUrl) await navigator.clipboard.writeText(selectedUrl)
+    } catch (e) {
+      console.warn('Clipboard copy failed', e)
+    } finally {
+      setShowVideoMenu(false)
+    }
+  }
+
+  const handleShareVideoUrl = async () => {
+    try {
+      if (selectedUrl && (navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
+        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ title: title || 'Video', url: selectedUrl })
+      } else if (selectedUrl) {
+        await navigator.clipboard.writeText(selectedUrl)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowVideoMenu(false)
+    }
+  }
+
+  // External article actions
+  const toggleExternalMenu = () => setShowExternalMenu(v => !v)
+
+  const handleOpenExternalUrl = () => {
+    if (selectedUrl) window.open(selectedUrl, '_blank', 'noopener,noreferrer')
+    setShowExternalMenu(false)
+  }
+
+  const handleCopyExternalUrl = async () => {
+    try {
+      if (selectedUrl) await navigator.clipboard.writeText(selectedUrl)
+    } catch (e) {
+      console.warn('Clipboard copy failed', e)
+    } finally {
+      setShowExternalMenu(false)
+    }
+  }
+
+  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)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowExternalMenu(false)
+    }
+  }
+  
+  // Check if article is already marked as read when URL/article changes
+  useEffect(() => {
+    const checkReadStatus = async () => {
+      if (!activeAccount || !relayPool || !selectedUrl) {
+        setIsMarkedAsRead(false)
+        return
+      }
+
+      setIsCheckingReadStatus(true)
+
+      try {
+        let hasRead = false
+        if (isNostrArticle && currentArticle) {
+          hasRead = await hasMarkedEventAsRead(
+            currentArticle.id,
+            activeAccount.pubkey,
+            relayPool
+          )
+        } else {
+          hasRead = await hasMarkedWebsiteAsRead(
+            selectedUrl,
+            activeAccount.pubkey,
+            relayPool
+          )
+        }
+        setIsMarkedAsRead(hasRead)
+      } catch (error) {
+        console.error('Failed to check read status:', error)
+      } finally {
+        setIsCheckingReadStatus(false)
+      }
+    }
+
+    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 (
       <div className="reader empty">
@@ -104,53 +417,268 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   const highlightRgb = hexToRgb(highlightColor)
 
   return (
-    <div className="reader" style={{ '--highlight-rgb': highlightRgb } as React.CSSProperties}>
-      {/* Hidden markdown preview to convert markdown to HTML */}
+    <>
+      {/* Reading Progress Indicator - Outside reader for fixed positioning */}
+      {isTextContent && (
+        <ReadingProgressIndicator 
+          progress={progressPercentage}
+          isComplete={isReadingComplete}
+          showPercentage={true}
+          isSidebarCollapsed={isSidebarCollapsed}
+          isHighlightsCollapsed={isHighlightsCollapsed}
+        />
+      )}
+      
+      <div className="reader" style={{ '--highlight-rgb': highlightRgb } as React.CSSProperties}>
+        {/* Hidden markdown preview to convert markdown to HTML */}
       {markdown && (
         <div ref={markdownPreviewRef} style={{ display: 'none' }}>
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>
-            {markdown}
+          <ReactMarkdown 
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={[rehypeRaw, rehypePrism]}
+            components={{
+              img: ({ src, alt, ...props }) => (
+                <img 
+                  src={src} 
+                  alt={alt} 
+                  {...props}
+                />
+              )
+            }}
+          >
+            {processedMarkdown || markdown}
           </ReactMarkdown>
         </div>
       )}
       
       <ReaderHeader 
-        title={title}
+        title={ytMeta?.title || title}
         image={image}
-        readingTimeText={readingStats ? readingStats.text : null}
+        summary={summary}
+        published={published}
+        readingTimeText={isExternalVideo ? (videoDurationSec !== null ? formatDuration(videoDurationSec) : null) : (readingStats ? readingStats.text : null)}
         hasHighlights={hasHighlights}
         highlightCount={relevantHighlights.length}
+        settings={settings}
+        highlights={relevantHighlights}
+        highlightVisibility={highlightVisibility}
       />
-      {markdown || html ? (
-        markdown ? (
-          renderedMarkdownHtml && finalHtml ? (
-            <div 
-              ref={contentRef} 
-              className="reader-markdown" 
-              dangerouslySetInnerHTML={{ __html: finalHtml }}
-              onMouseUp={handleMouseUp}
+      {isExternalVideo ? (
+        <>
+          <div className="reader-video">
+            <ReactPlayer 
+              url={selectedUrl as string} 
+              controls 
+              width="100%"
+              height="auto"
+              style={{ 
+                width: '100%', 
+                height: 'auto', 
+                aspectRatio: '16/9' 
+              }}
+              onDuration={(d) => setVideoDurationSec(Math.floor(d))}
             />
-          ) : (
-            <div className="reader-markdown">
-              <div className="loading-spinner">
-                <FontAwesomeIcon icon={faSpinner} spin size="sm" />
+          </div>
+          {ytMeta?.description && (
+            <div className="large-text" style={{ color: '#ddd', padding: '0 0.75rem', whiteSpace: 'pre-wrap', marginBottom: '0.75rem' }}>
+              {ytMeta.description}
+            </div>
+          )}
+          {ytMeta?.transcript && (
+            <div style={{ padding: '0 0.75rem 1rem 0.75rem' }}>
+              <h3 style={{ margin: '1rem 0 0.5rem 0', fontSize: '1rem', color: '#aaa' }}>Transcript</h3>
+              <div className="large-text" style={{ whiteSpace: 'pre-wrap', color: '#ddd' }}>
+                {ytMeta.transcript}
               </div>
             </div>
-          )
-        ) : (
-          <div 
-            ref={contentRef} 
-            className="reader-html" 
-            dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
-            onMouseUp={handleMouseUp}
-          />
-        )
+          )}
+          <div className="article-menu-container">
+            <div className="article-menu-wrapper" ref={videoMenuRef}>
+              <button
+                className="article-menu-btn"
+                onClick={toggleVideoMenu}
+                title="More options"
+              >
+                <FontAwesomeIcon icon={faEllipsisH} />
+              </button>
+              {showVideoMenu && (
+                <div className="article-menu">
+                  <button className="article-menu-item" onClick={handleOpenVideoExternal}>
+                    <FontAwesomeIcon icon={faExternalLinkAlt} />
+                    <span>Open Link</span>
+                  </button>
+                  <button className="article-menu-item" onClick={handleOpenVideoNative}>
+                    <FontAwesomeIcon icon={faMobileAlt} />
+                    <span>Open in Native App</span>
+                  </button>
+                  <button className="article-menu-item" onClick={handleCopyVideoUrl}>
+                    <FontAwesomeIcon icon={faCopy} />
+                    <span>Copy URL</span>
+                  </button>
+                  <button className="article-menu-item" onClick={handleShareVideoUrl}>
+                    <FontAwesomeIcon icon={faShare} />
+                    <span>Share</span>
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+          {activeAccount && (
+            <div className="mark-as-read-container">
+              <button
+                className={`mark-as-read-btn ${isMarkedAsRead ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
+                onClick={handleMarkAsRead}
+                disabled={isMarkedAsRead || isCheckingReadStatus}
+                title={isMarkedAsRead ? 'Already Marked as Watched' : 'Mark as Watched'}
+              >
+                <FontAwesomeIcon 
+                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
+                  spin={isCheckingReadStatus} 
+                />
+                <span>
+                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Marked as Watched' : 'Mark as Watched'}
+                </span>
+              </button>
+            </div>
+          )}
+        </>
+      ) : markdown || html ? (
+        <>
+          {markdown ? (
+            renderedMarkdownHtml && finalHtml ? (
+              <div 
+                ref={contentRef} 
+                className="reader-markdown" 
+                dangerouslySetInnerHTML={{ __html: finalHtml }}
+                onMouseUp={handleSelectionEnd}
+                onTouchEnd={handleSelectionEnd}
+              />
+            ) : (
+              <div className="reader-markdown">
+                <div className="loading-spinner">
+                  <FontAwesomeIcon icon={faSpinner} spin size="sm" />
+                </div>
+              </div>
+            )
+          ) : (
+            <div 
+              ref={contentRef} 
+              className="reader-html" 
+              dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
+              onMouseUp={handleSelectionEnd}
+              onTouchEnd={handleSelectionEnd}
+            />
+          )}
+          
+          {/* Article menu for external URLs */}
+          {!isNostrArticle && !isExternalVideo && selectedUrl && (
+            <div className="article-menu-container">
+              <div className="article-menu-wrapper" ref={externalMenuRef}>
+                <button
+                  className="article-menu-btn"
+                  onClick={toggleExternalMenu}
+                  title="More options"
+                >
+                  <FontAwesomeIcon icon={faEllipsisH} />
+                </button>
+                
+                {showExternalMenu && (
+                  <div className="article-menu">
+                    <button
+                      className="article-menu-item"
+                      onClick={handleOpenExternalUrl}
+                    >
+                      <FontAwesomeIcon icon={faExternalLinkAlt} />
+                      <span>Open Original URL</span>
+                    </button>
+                    <button
+                      className="article-menu-item"
+                      onClick={handleCopyExternalUrl}
+                    >
+                      <FontAwesomeIcon icon={faCopy} />
+                      <span>Copy URL</span>
+                    </button>
+                    <button
+                      className="article-menu-item"
+                      onClick={handleShareExternalUrl}
+                    >
+                      <FontAwesomeIcon icon={faShare} />
+                      <span>Share</span>
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          
+          {/* Article menu for nostr-native articles */}
+          {isNostrArticle && currentArticle && articleLinks && (
+            <div className="article-menu-container">
+              <div className="article-menu-wrapper" ref={articleMenuRef}>
+                <button
+                  className="article-menu-btn"
+                  onClick={handleMenuToggle}
+                  title="More options"
+                >
+                  <FontAwesomeIcon icon={faEllipsisH} />
+                </button>
+                
+                {showArticleMenu && (
+                  <div className="article-menu">
+                    <button
+                      className="article-menu-item"
+                      onClick={handleOpenPortal}
+                    >
+                      <FontAwesomeIcon icon={faExternalLinkAlt} />
+                      <span>Open on Nostr</span>
+                    </button>
+                    <button
+                      className="article-menu-item"
+                      onClick={handleOpenNative}
+                    >
+                      <FontAwesomeIcon icon={faMobileAlt} />
+                      <span>Open with Native App</span>
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          
+          {/* Mark as Read button */}
+          {activeAccount && (
+            <div className="mark-as-read-container">
+              <button
+                className={`mark-as-read-btn ${isMarkedAsRead ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
+                onClick={handleMarkAsRead}
+                disabled={isMarkedAsRead || isCheckingReadStatus}
+                title={isMarkedAsRead ? 'Already Marked as Read' : 'Mark as Read'}
+              >
+                <FontAwesomeIcon 
+                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
+                  spin={isCheckingReadStatus} 
+                />
+                <span>
+                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Marked as Read' : 'Mark as Read'}
+                </span>
+              </button>
+            </div>
+          )}
+          
+          {/* Author info card for nostr-native articles */}
+          {isNostrArticle && currentArticle && (
+            <div className="author-card-container">
+              <AuthorCard authorPubkey={currentArticle.pubkey} />
+            </div>
+          )}
+        </>
       ) : (
         <div className="reader empty">
           <p>No readable content found for this URL.</p>
         </div>
       )}
-    </div>
+      </div>
+    </>
   )
 }
 

src/components/Explore.tsx

@@ -0,0 +1,202 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner, faExclamationCircle, faNewspaper } from '@fortawesome/free-solid-svg-icons'
+import { Hooks } from 'applesauce-react'
+import { RelayPool } from 'applesauce-relay'
+import { nip19 } from 'nostr-tools'
+import { fetchContacts } from '../services/contactService'
+import { fetchBlogPostsFromAuthors, BlogPostPreview } from '../services/exploreService'
+import BlogPostCard from './BlogPostCard'
+import { getCachedPosts, upsertCachedPost, setCachedPosts } from '../services/exploreCache'
+import { usePullToRefresh } from '../hooks/usePullToRefresh'
+import PullToRefreshIndicator from './PullToRefreshIndicator'
+
+interface ExploreProps {
+  relayPool: RelayPool
+}
+
+const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
+  const activeAccount = Hooks.useActiveAccount()
+  const [blogPosts, setBlogPosts] = useState<BlogPostPreview[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const exploreContainerRef = useRef<HTMLDivElement>(null)
+  const [refreshTrigger, setRefreshTrigger] = useState(0)
+
+  useEffect(() => {
+    const loadBlogPosts = async () => {
+      if (!activeAccount) {
+        setError('Please log in to explore content from your friends')
+        setLoading(false)
+        return
+      }
+
+      try {
+        // show spinner but keep existing posts
+        setLoading(true)
+        setError(null)
+
+        // Seed from in-memory cache if available to avoid empty flash
+        const cached = getCachedPosts(activeAccount.pubkey)
+        if (cached && cached.length > 0 && blogPosts.length === 0) {
+          setBlogPosts(cached)
+        }
+
+        // Fetch the user's contacts (friends)
+        const contacts = await fetchContacts(
+          relayPool,
+          activeAccount.pubkey,
+          (partial) => {
+            // When local contacts are available, kick off early posts fetch
+            if (partial.size > 0) {
+              const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+              fetchBlogPostsFromAuthors(
+                relayPool,
+                Array.from(partial),
+                relayUrls,
+                (post) => {
+                  // merge into UI and cache as we stream
+                  setBlogPosts((prev) => {
+                    const exists = prev.some(p => p.event.id === post.event.id)
+                    if (exists) return prev
+                    const next = [...prev, post]
+                    return next.sort((a, b) => {
+                      const timeA = a.published || a.event.created_at
+                      const timeB = b.published || b.event.created_at
+                      return timeB - timeA
+                    })
+                  })
+                  setCachedPosts(activeAccount.pubkey, upsertCachedPost(activeAccount.pubkey, post))
+                }
+              ).then((all) => {
+                // Ensure union of streamed + final is displayed
+                setBlogPosts((prev) => {
+                  const byId = new Map(prev.map(p => [p.event.id, p]))
+                  for (const post of all) 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
+                })
+              })
+            }
+          }
+        )
+        
+        if (contacts.size === 0) {
+          setError('You are not following anyone yet. Follow some people to see their blog posts!')
+          setLoading(false)
+          return
+        }
+
+        // After full contacts, do a final pass for completeness
+        const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+        const posts = await fetchBlogPostsFromAuthors(relayPool, Array.from(contacts), relayUrls)
+
+        if (posts.length === 0) {
+          setError('No blog posts found from your friends yet')
+        }
+
+        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
+        })
+      } catch (err) {
+        console.error('Failed to load blog posts:', err)
+        setError('Failed to load blog posts. Please try again.')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadBlogPosts()
+  }, [relayPool, activeAccount, blogPosts.length, refreshTrigger])
+
+  // Pull-to-refresh
+  const pullToRefreshState = usePullToRefresh(exploreContainerRef, {
+    onRefresh: () => {
+      setRefreshTrigger(prev => prev + 1)
+    },
+    isRefreshing: loading
+  })
+
+  const getPostUrl = (post: BlogPostPreview) => {
+    // Get the d-tag identifier
+    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
+    
+    // Create naddr
+    const naddr = nip19.naddrEncode({
+      kind: 30023,
+      pubkey: post.author,
+      identifier: dTag
+    })
+    
+    return `/a/${naddr}`
+  }
+
+  if (error) {
+    return (
+      <div className="explore-container">
+        <div className="explore-error">
+          <FontAwesomeIcon icon={faExclamationCircle} size="2x" />
+          <p>{error}</p>
+        </div>
+      </div>
+    )
+  }
+
+  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-header">
+        <h1>
+          <FontAwesomeIcon icon={faNewspaper} />
+          Explore
+        </h1>
+        <p className="explore-subtitle">
+          Discover blog posts from your friends on Nostr
+        </p>
+      </div>
+      {loading && (
+        <div className="explore-loading" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0' }}>
+          <FontAwesomeIcon icon={faSpinner} spin />
+        </div>
+      )}
+      <div className="explore-grid">
+        {blogPosts.map((post) => (
+          <BlogPostCard
+            key={`${post.author}:${post.event.tags.find(t => t[0] === 'd')?.[1]}`}
+            post={post}
+            href={getPostUrl(post)}
+          />
+        ))}
+        {!loading && blogPosts.length === 0 && (
+          <div className="explore-empty" style={{ gridColumn: '1/-1', textAlign: 'center', color: 'var(--text-secondary)' }}>
+            <p>No blog posts found yet.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Explore
+

src/components/HighlightItem.tsx

@@ -1,10 +1,20 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuoteLeft, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer, faTrash, faEllipsisH, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
-import { formatDistanceToNow } from 'date-fns'
 import { useEventModel } from 'applesauce-react/hooks'
-import { Models } from 'applesauce-core'
+import { Models, IEventStore } from 'applesauce-core'
+import { RelayPool } from 'applesauce-relay'
+import { Hooks } from 'applesauce-react'
+import { onSyncStateChange, isEventSyncing } from '../services/offlineSyncService'
+import { RELAYS } from '../config/relays'
+import { areAllRelaysLocal } from '../utils/helpers'
+import { 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'
 
 interface HighlightWithLevel extends Highlight {
   level?: 'mine' | 'friends' | 'nostrverse'
@@ -15,10 +25,32 @@ interface HighlightItemProps {
   onSelectUrl?: (url: string) => void
   isSelected?: boolean
   onHighlightClick?: (highlightId: string) => void
+  relayPool?: RelayPool | null
+  eventStore?: IEventStore | null
+  onHighlightUpdate?: (highlight: Highlight) => void
+  onHighlightDelete?: (highlightId: string) => void
 }
 
-export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelectUrl, isSelected, onHighlightClick }) => {
+export const HighlightItem: React.FC<HighlightItemProps> = ({ 
+  highlight, 
+  // onSelectUrl is not used but kept in props for API compatibility
+  isSelected, 
+  onHighlightClick,
+  relayPool,
+  eventStore,
+  onHighlightUpdate,
+  onHighlightDelete
+}) => {
   const itemRef = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const [isSyncing, setIsSyncing] = useState(() => isEventSyncing(highlight.id))
+  const [showOfflineIndicator, setShowOfflineIndicator] = useState(() => highlight.isOfflineCreated && !isSyncing)
+  const [isRebroadcasting, setIsRebroadcasting] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [showMenu, setShowMenu] = useState(false)
+  
+  const activeAccount = Hooks.useActiveAccount()
   
   // Resolve the profile of the user who made the highlight
   const profile = useEventModel(Models.ProfileModel, [highlight.pubkey])
@@ -30,35 +62,251 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
     return `${highlight.pubkey.slice(0, 8)}...` // fallback to short pubkey
   }
   
+  // Update offline indicator when highlight prop changes
+  useEffect(() => {
+    if (highlight.isOfflineCreated && !isSyncing) {
+      setShowOfflineIndicator(true)
+    }
+  }, [highlight.isOfflineCreated, isSyncing])
+  
+  // Listen to sync state changes
+  useEffect(() => {
+    const unsubscribe = onSyncStateChange((eventId, syncingState) => {
+      if (eventId === highlight.id) {
+        setIsSyncing(syncingState)
+        // When sync completes successfully, update highlight to show all relays
+        if (!syncingState) {
+          setShowOfflineIndicator(false)
+          
+          // Update the highlight with all relays after successful sync
+          if (onHighlightUpdate && highlight.isLocalOnly) {
+            const updatedHighlight = {
+              ...highlight,
+              publishedRelays: RELAYS,
+              isLocalOnly: false,
+              isOfflineCreated: false
+            }
+            onHighlightUpdate(updatedHighlight)
+          }
+        }
+      }
+    })
+    
+    return unsubscribe
+  }, [highlight, onHighlightUpdate])
+  
   useEffect(() => {
     if (isSelected && itemRef.current) {
       itemRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' })
     }
   }, [isSelected])
   
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setShowMenu(false)
+      }
+    }
+    
+    if (showMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside)
+      }
+    }
+  }, [showMenu])
+  
   const handleItemClick = () => {
     if (onHighlightClick) {
       onHighlightClick(highlight.id)
     }
   }
   
-  const handleLinkClick = (url: string, e: React.MouseEvent) => {
-    if (onSelectUrl) {
-      e.preventDefault()
-      onSelectUrl(url)
+  const getHighlightLinks = () => {
+    // Encode the highlight event itself (kind 9802) as a nevent
+    // Get non-local relays for the hint
+    const relayHints = RELAYS.filter(r => 
+      !r.includes('localhost') && !r.includes('127.0.0.1')
+    ).slice(0, 3) // Include up to 3 relay hints
+    
+    const nevent = nip19.neventEncode({
+      id: highlight.id,
+      relays: relayHints,
+      author: highlight.pubkey,
+      kind: 9802
+    })
+    
+    return {
+      portal: getNostrUrl(nevent),
+      native: `nostr:${nevent}`
     }
   }
   
-  const getSourceLink = () => {
-    if (highlight.eventReference) {
-      return `https://search.dergigi.com/e/${highlight.eventReference}`
+  const highlightLinks = getHighlightLinks()
+  
+  // Handle rebroadcast to all relays
+  const handleRebroadcast = async (e: React.MouseEvent) => {
+    e.stopPropagation() // Prevent triggering highlight selection
+    
+    if (!relayPool || !eventStore || isRebroadcasting) return
+    
+    setIsRebroadcasting(true)
+    
+    try {
+      // Get the event from the event store
+      const event = eventStore.getEvent(highlight.id)
+      if (!event) {
+        console.error('Event not found in store:', highlight.id)
+        return
+      }
+      
+      // Publish to all configured relays - let the relay pool handle connection state
+      const targetRelays = RELAYS
+      
+      console.log('📡 Rebroadcasting highlight to', targetRelays.length, 'relay(s):', targetRelays)
+      
+      await relayPool.publish(targetRelays, event)
+      
+      console.log('✅ Rebroadcast successful!')
+      
+      // Update the highlight with new relay info
+      const isLocalOnly = areAllRelaysLocal(targetRelays)
+      const updatedHighlight = {
+        ...highlight,
+        publishedRelays: targetRelays,
+        isLocalOnly,
+        isOfflineCreated: false
+      }
+      
+      // Notify parent of the update
+      if (onHighlightUpdate) {
+        onHighlightUpdate(updatedHighlight)
+      }
+      
+      // Update local state
+      setShowOfflineIndicator(false)
+      
+    } catch (error) {
+      console.error('❌ Failed to rebroadcast:', error)
+    } finally {
+      setIsRebroadcasting(false)
     }
-    return highlight.urlReference
   }
   
-  const sourceLink = getSourceLink()
+  // Determine relay indicator icon and tooltip
+  const getRelayIndicatorInfo = () => {
+    // Show spinner if manually rebroadcasting OR auto-syncing
+    if (isRebroadcasting || isSyncing) {
+      return {
+        icon: faSpinner,
+        tooltip: isRebroadcasting ? 'rebroadcasting...' : 'syncing...',
+        spin: true
+      }
+    }
+    
+    // Always show relay list, use plane icon for local-only
+    const isLocalOrOffline = highlight.isLocalOnly || showOfflineIndicator
+    
+    // Show server icon with relay info if available
+    if (highlight.publishedRelays && highlight.publishedRelays.length > 0) {
+      const relayNames = highlight.publishedRelays.map(url => 
+        url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
+      )
+      return {
+        icon: isLocalOrOffline ? faPlane : faServer,
+        tooltip: relayNames.join('\n'),
+        spin: false
+      }
+    }
+    
+    if (highlight.seenOnRelays && highlight.seenOnRelays.length > 0) {
+      const relayNames = highlight.seenOnRelays.map(url => 
+        url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
+      )
+      return {
+        icon: faServer,
+        tooltip: relayNames.join('\n'),
+        spin: false
+      }
+    }
+    
+    // Fallback: show all relays we queried (where this was likely fetched from)
+    const relayNames = RELAYS.map(url => 
+      url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
+    )
+    return {
+      icon: faServer,
+      tooltip: relayNames.join('\n'),
+      spin: false
+    }
+  }
+  
+  const relayIndicator = getRelayIndicatorInfo()
+  
+  // Check if current user can delete this highlight
+  const canDelete = activeAccount && highlight.pubkey === activeAccount.pubkey
+  
+  const handleConfirmDelete = async () => {
+    if (!activeAccount || !relayPool) {
+      console.warn('Cannot delete: no account or relay pool')
+      return
+    }
+    
+    setIsDeleting(true)
+    setShowDeleteConfirm(false)
+    
+    try {
+      await createDeletionRequest(
+        highlight.id,
+        9802, // kind for highlights
+        'Deleted by user',
+        activeAccount,
+        relayPool
+      )
+      
+      console.log('✅ Highlight deletion request published')
+      
+      // Notify parent to remove this highlight from the list
+      if (onHighlightDelete) {
+        onHighlightDelete(highlight.id)
+      }
+    } catch (error) {
+      console.error('Failed to delete highlight:', error)
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+  
+  const handleCancelDelete = () => {
+    setShowDeleteConfirm(false)
+  }
+  
+  const handleMenuToggle = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setShowMenu(!showMenu)
+  }
+  
+  const handleOpenPortal = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    window.open(highlightLinks.portal, '_blank', 'noopener,noreferrer')
+    setShowMenu(false)
+  }
+
+  const handleOpenNative = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    window.location.href = highlightLinks.native
+    setShowMenu(false)
+  }
+  
+  const handleMenuDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setShowMenu(false)
+    setShowDeleteConfirm(true)
+  }
   
   return (
+    <>
     <div 
       ref={itemRef} 
       className={`highlight-item ${isSelected ? 'selected' : ''} ${highlight.level ? `level-${highlight.level}` : ''}`} 
@@ -66,10 +314,25 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
       onClick={handleItemClick}
       style={{ cursor: onHighlightClick ? 'pointer' : 'default' }}
     >
-      <div className="highlight-quote-icon">
-        <FontAwesomeIcon icon={faQuoteLeft} />
+      <div className="highlight-header">
+        <CompactButton
+          className="highlight-timestamp"
+          title={new Date(highlight.created_at * 1000).toLocaleString()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {formatDateCompact(highlight.created_at)}
+        </CompactButton>
       </div>
       
+      <CompactButton
+        className="highlight-quote-button"
+        icon={faQuoteLeft}
+        title="Quote"
+        onClick={(e) => e.stopPropagation()}
+      />
+      
+      {/* relay indicator lives in footer for consistent padding/alignment */}
+      
       <div className="highlight-content">
         <blockquote className="highlight-text">
           {highlight.content}
@@ -82,30 +345,75 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
         )}
         
         
-        <div className="highlight-meta">
-          <span className="highlight-author">
-            {getUserDisplayName()}
-          </span>
-          <span className="highlight-meta-separator">•</span>
-          <span className="highlight-time">
-            {formatDistanceToNow(new Date(highlight.created_at * 1000), { addSuffix: true })}
-          </span>
+        <div className="highlight-footer">
+          <div className="highlight-footer-left">
+            {relayIndicator && (
+              <CompactButton
+                className="highlight-relay-indicator"
+                icon={relayIndicator.icon}
+                spin={relayIndicator.spin}
+                title={relayIndicator.tooltip}
+                onClick={handleRebroadcast}
+                disabled={!relayPool || !eventStore}
+              />
+            )}
+            
+            <span className="highlight-author">
+              {getUserDisplayName()}
+            </span>
+          </div>
           
-          {sourceLink && (
-            <a
-              href={sourceLink}
-              target="_blank"
-              rel="noopener noreferrer"
-              onClick={(e) => highlight.urlReference && onSelectUrl ? handleLinkClick(highlight.urlReference, e) : undefined}
-              className="highlight-source"
-              title={highlight.eventReference ? 'Open on Nostr' : 'Open source'}
-            >
-              <FontAwesomeIcon icon={faExternalLinkAlt} />
-            </a>
-          )}
+          <div className="highlight-menu-wrapper" ref={menuRef}>
+            <CompactButton
+              icon={faEllipsisH}
+              onClick={handleMenuToggle}
+              title="More options"
+            />
+            
+            {showMenu && (
+              <div className="highlight-menu">
+                <button
+                  className="highlight-menu-item"
+                  onClick={handleOpenPortal}
+                >
+                  <FontAwesomeIcon icon={faExternalLinkAlt} />
+                  <span>Open on Nostr</span>
+                </button>
+                <button
+                  className="highlight-menu-item"
+                  onClick={handleOpenNative}
+                >
+                  <FontAwesomeIcon icon={faMobileAlt} />
+                  <span>Open with Native App</span>
+                </button>
+                {canDelete && (
+                  <button
+                    className="highlight-menu-item highlight-menu-item-danger"
+                    onClick={handleMenuDeleteClick}
+                    disabled={isDeleting}
+                  >
+                    <FontAwesomeIcon icon={isDeleting ? faSpinner : faTrash} spin={isDeleting} />
+                    <span>Delete</span>
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
         </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,11 +1,16 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } 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 HighlightsPanelCollapsed from './HighlightsPanel/HighlightsPanelCollapsed'
 import HighlightsPanelHeader from './HighlightsPanel/HighlightsPanelHeader'
+import PullToRefreshIndicator from './PullToRefreshIndicator'
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
+import { UserSettings } from '../services/settingsService'
 
 export interface HighlightVisibility {
   nostrverse: boolean
@@ -28,6 +33,9 @@ interface HighlightsPanelProps {
   highlightVisibility?: HighlightVisibility
   onHighlightVisibilityChange?: (visibility: HighlightVisibility) => void
   followedPubkeys?: Set<string>
+  relayPool?: RelayPool | null
+  eventStore?: IEventStore | null
+  settings?: UserSettings
 }
 
 export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
@@ -44,18 +52,50 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   currentUserPubkey,
   highlightVisibility = { nostrverse: true, friends: true, mine: true },
   onHighlightVisibilityChange,
-  followedPubkeys = new Set()
+  followedPubkeys = new Set(),
+  relayPool,
+  eventStore,
+  settings
 }) => {
   const [showHighlights, setShowHighlights] = useState(true)
+  const [localHighlights, setLocalHighlights] = useState(highlights)
+  const highlightsListRef = useRef<HTMLDivElement>(null)
   
   const handleToggleHighlights = () => {
     const newValue = !showHighlights
     setShowHighlights(newValue)
     onToggleHighlights?.(newValue)
   }
+
+  // Pull-to-refresh for highlights
+  const pullToRefreshState = usePullToRefresh(highlightsListRef, {
+    onRefresh: () => {
+      if (onRefresh) {
+        onRefresh()
+      }
+    },
+    isRefreshing: loading,
+    disabled: !onRefresh
+  })
+  
+  // Keep track of highlight updates
+  React.useEffect(() => {
+    setLocalHighlights(highlights)
+  }, [highlights])
+  
+  const handleHighlightUpdate = (updatedHighlight: Highlight) => {
+    setLocalHighlights(prev => 
+      prev.map(h => h.id === updatedHighlight.id ? updatedHighlight : h)
+    )
+  }
+  
+  const handleHighlightDelete = (highlightId: string) => {
+    // Remove highlight from local state
+    setLocalHighlights(prev => prev.filter(h => h.id !== highlightId))
+  }
   
   const filteredHighlights = useFilteredHighlights({
-    highlights,
+    highlights: localHighlights,
     selectedUrl,
     highlightVisibility,
     currentUserPubkey,
@@ -67,6 +107,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
       <HighlightsPanelCollapsed 
         hasHighlights={filteredHighlights.length > 0} 
         onToggleCollapse={onToggleCollapse}
+        settings={settings}
       />
     )
   }
@@ -100,7 +141,16 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
           </p>
         </div>
       ) : (
-        <div className="highlights-list">
+        <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}
+          />
           {filteredHighlights.map((highlight) => (
             <HighlightItem
               key={highlight.id}
@@ -108,6 +158,10 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
               onSelectUrl={onSelectUrl}
               isSelected={highlight.id === selectedHighlightId}
               onHighlightClick={onHighlightClick}
+              relayPool={relayPool}
+              eventStore={eventStore}
+              onHighlightUpdate={handleHighlightUpdate}
+              onHighlightDelete={handleHighlightDelete}
             />
           ))}
         </div>

src/components/HighlightsPanel/HighlightsPanelCollapsed.tsx

@@ -1,16 +1,21 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHighlighter, faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../../services/settingsService'
 
 interface HighlightsPanelCollapsedProps {
   hasHighlights: boolean
   onToggleCollapse: () => void
+  settings?: UserSettings
 }
 
 const HighlightsPanelCollapsed: React.FC<HighlightsPanelCollapsedProps> = ({
   hasHighlights,
-  onToggleCollapse
+  onToggleCollapse,
+  settings
 }) => {
+  const highlightColor = settings?.highlightColorMine || '#ffff00'
+  
   return (
     <div className="highlights-container collapsed">
       <button
@@ -19,8 +24,12 @@ const HighlightsPanelCollapsed: React.FC<HighlightsPanelCollapsedProps> = ({
         title="Expand highlights panel"
         aria-label="Expand highlights panel"
       >
-        <FontAwesomeIcon icon={faHighlighter} className={hasHighlights ? 'glow' : ''} />
-        <FontAwesomeIcon icon={faChevronRight} />
+        <FontAwesomeIcon 
+          icon={faHighlighter} 
+          className={hasHighlights ? 'glow' : ''} 
+          style={{ color: highlightColor }}
+        />
+        <FontAwesomeIcon icon={faChevronRight} style={{ color: highlightColor }} />
       </button>
     </div>
   )

src/components/HighlightsPanel/HighlightsPanelHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faChevronRight, faEye, faEyeSlash, faRotate, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
 import { HighlightVisibility } from '../HighlightsPanel'
+import IconButton from '../IconButton'
 
 interface HighlightsPanelHeaderProps {
   loading: boolean
@@ -32,76 +32,72 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
         <div className="highlights-actions-left">
           {onHighlightVisibilityChange && (
             <div className="highlight-level-toggles">
-              <button
+              <IconButton
+                icon={faNetworkWired}
                 onClick={() => onHighlightVisibilityChange({ 
                   ...highlightVisibility, 
                   nostrverse: !highlightVisibility.nostrverse 
                 })}
-                className={`level-toggle-btn ${highlightVisibility.nostrverse ? 'active' : ''}`}
                 title="Toggle nostrverse highlights"
-                aria-label="Toggle nostrverse highlights"
+                ariaLabel="Toggle nostrverse highlights"
+                variant={highlightVisibility.nostrverse ? 'primary' : 'ghost'}
                 style={{ color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
-              >
-                <FontAwesomeIcon icon={faNetworkWired} />
-              </button>
-              <button
+              />
+              <IconButton
+                icon={faUserGroup}
                 onClick={() => onHighlightVisibilityChange({ 
                   ...highlightVisibility, 
                   friends: !highlightVisibility.friends 
                 })}
-                className={`level-toggle-btn ${highlightVisibility.friends ? 'active' : ''}`}
                 title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"}
-                aria-label="Toggle friends highlights"
-                style={{ color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined }}
+                ariaLabel="Toggle friends highlights"
+                variant={highlightVisibility.friends ? 'primary' : 'ghost'}
                 disabled={!currentUserPubkey}
-              >
-                <FontAwesomeIcon icon={faUserGroup} />
-              </button>
-              <button
+                style={{ color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined }}
+              />
+              <IconButton
+                icon={faUser}
                 onClick={() => onHighlightVisibilityChange({ 
                   ...highlightVisibility, 
                   mine: !highlightVisibility.mine 
                 })}
-                className={`level-toggle-btn ${highlightVisibility.mine ? 'active' : ''}`}
                 title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"}
-                aria-label="Toggle my highlights"
-                style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
+                ariaLabel="Toggle my highlights"
+                variant={highlightVisibility.mine ? 'primary' : 'ghost'}
                 disabled={!currentUserPubkey}
-              >
-                <FontAwesomeIcon icon={faUser} />
-              </button>
+                style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
+              />
             </div>
           )}
           {onRefresh && (
-            <button
+            <IconButton
+              icon={faRotate}
               onClick={onRefresh}
-              className="refresh-highlights-btn"
               title="Refresh highlights"
-              aria-label="Refresh highlights"
+              ariaLabel="Refresh highlights"
+              variant="ghost"
               disabled={loading}
-            >
-              <FontAwesomeIcon icon={faRotate} spin={loading} />
-            </button>
+              spin={loading}
+            />
           )}
           {hasHighlights && (
-            <button
+            <IconButton
+              icon={showHighlights ? faEye : faEyeSlash}
               onClick={onToggleHighlights}
-              className="toggle-highlight-display-btn"
               title={showHighlights ? 'Hide highlights' : 'Show highlights'}
-              aria-label={showHighlights ? 'Hide highlights' : 'Show highlights'}
-            >
-              <FontAwesomeIcon icon={showHighlights ? faEye : faEyeSlash} />
-            </button>
+              ariaLabel={showHighlights ? 'Hide highlights' : 'Show highlights'}
+              variant="ghost"
+            />
           )}
         </div>
-        <button
+        <IconButton
+          icon={faChevronRight}
           onClick={onToggleCollapse}
-          className="toggle-highlights-btn"
           title="Collapse highlights panel"
-          aria-label="Collapse highlights panel"
-        >
-          <FontAwesomeIcon icon={faChevronRight} rotation={180} />
-        </button>
+          ariaLabel="Collapse highlights panel"
+          variant="ghost"
+          style={{ transform: 'rotate(180deg)' }}
+        />
       </div>
     </div>
   )

src/components/IconButton.tsx

@@ -11,6 +11,8 @@ interface IconButtonProps {
   size?: number
   disabled?: boolean
   spin?: boolean
+  className?: string
+  style?: React.CSSProperties
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
@@ -21,15 +23,17 @@ const IconButton: React.FC<IconButtonProps> = ({
   variant = 'ghost',
   size = 33,
   disabled = false,
-  spin = false
+  spin = false,
+  className = '',
+  style
 }) => {
   return (
     <button
-      className={`icon-button ${variant}`}
+      className={`icon-button ${variant} ${className}`.trim()}
       onClick={onClick}
       title={title}
       aria-label={ariaLabel || title}
-      style={{ width: size, height: size }}
+      style={{ width: size, height: size, ...style }}
       disabled={disabled}
     >
       <FontAwesomeIcon icon={icon} spin={spin} />

src/components/Me.tsx

@@ -0,0 +1,383 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner, faExclamationCircle, faHighlighter, faBookmark, faList, faThLarge, faImage, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
+import { Hooks } from 'applesauce-react'
+import { RelayPool } from 'applesauce-relay'
+import { nip19 } from 'nostr-tools'
+import { useNavigate } 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 { BlogPostPreview, fetchBlogPostsFromAuthors } from '../services/exploreService'
+import { RELAYS } from '../config/relays'
+import { Bookmark, IndividualBookmark } from '../types/bookmarks'
+import AuthorCard from './AuthorCard'
+import BlogPostCard from './BlogPostCard'
+import { BookmarkItem } from './BookmarkItem'
+import IconButton from './IconButton'
+import { ViewMode } from './Bookmarks'
+import { extractUrlsFromContent } from '../services/bookmarkHelpers'
+import { getCachedMeData, setCachedMeData, updateCachedHighlights } from '../services/meCache'
+import { faBooks } from '../icons/customIcons'
+import { usePullToRefresh } from '../hooks/usePullToRefresh'
+import PullToRefreshIndicator from './PullToRefreshIndicator'
+
+interface MeProps {
+  relayPool: RelayPool
+  activeTab?: TabType
+}
+
+type TabType = 'highlights' | 'reading-list' | 'archive' | 'writings'
+
+const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab }) => {
+  const activeAccount = Hooks.useActiveAccount()
+  const navigate = useNavigate()
+  const [activeTab, setActiveTab] = useState<TabType>(propActiveTab || 'highlights')
+  const [highlights, setHighlights] = useState<Highlight[]>([])
+  const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
+  const [readArticles, setReadArticles] = useState<BlogPostPreview[]>([])
+  const [writings, setWritings] = useState<BlogPostPreview[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [viewMode, setViewMode] = useState<ViewMode>('cards')
+  const meContainerRef = useRef<HTMLDivElement>(null)
+  const [refreshTrigger, setRefreshTrigger] = useState(0)
+
+  // Update local state when prop changes
+  useEffect(() => {
+    if (propActiveTab) {
+      setActiveTab(propActiveTab)
+    }
+  }, [propActiveTab])
+
+  useEffect(() => {
+    const loadData = async () => {
+      if (!activeAccount) {
+        setError('Please log in to view your data')
+        setLoading(false)
+        return
+      }
+
+      try {
+        setLoading(true)
+        setError(null)
+
+        // Seed from cache if available to avoid empty flash
+        const cached = getCachedMeData(activeAccount.pubkey)
+        if (cached) {
+          setHighlights(cached.highlights)
+          setBookmarks(cached.bookmarks)
+          setReadArticles(cached.readArticles)
+        }
+
+        // Fetch highlights, read articles, and writings
+        const [userHighlights, userReadArticles, userWritings] = await Promise.all([
+          fetchHighlights(relayPool, activeAccount.pubkey),
+          fetchReadArticlesWithData(relayPool, activeAccount.pubkey),
+          fetchBlogPostsFromAuthors(relayPool, [activeAccount.pubkey], RELAYS)
+        ])
+
+        setHighlights(userHighlights)
+        setReadArticles(userReadArticles)
+        setWritings(userWritings)
+
+        // 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([])
+        }
+
+        // Update cache with all fetched data
+        setCachedMeData(activeAccount.pubkey, userHighlights, fetchedBookmarks, userReadArticles)
+      } catch (err) {
+        console.error('Failed to load data:', err)
+        setError('Failed to load data. Please try again.')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadData()
+  }, [relayPool, activeAccount, refreshTrigger])
+
+  // Pull-to-refresh
+  const pullToRefreshState = usePullToRefresh(meContainerRef, {
+    onRefresh: () => {
+      setRefreshTrigger(prev => prev + 1)
+    },
+    isRefreshing: loading
+  })
+
+  const handleHighlightDelete = (highlightId: string) => {
+    setHighlights(prev => {
+      const updated = prev.filter(h => h.id !== highlightId)
+      // Update cache when highlight is deleted
+      if (activeAccount) {
+        updateCachedHighlights(activeAccount.pubkey, updated)
+      }
+      return updated
+    })
+  }
+
+  const getPostUrl = (post: BlogPostPreview) => {
+    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
+    const naddr = nip19.naddrEncode({
+      kind: 30023,
+      pubkey: post.author,
+      identifier: dTag
+    })
+    return `/a/${naddr}`
+  }
+
+  // Helper to 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
+    }
+    
+    if (ib.kind === 30023) return true
+    return hasContent || hasUrl
+  }
+
+  const handleSelectUrl = (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => {
+    if (bookmark && bookmark.kind === 30023) {
+      // For kind:30023 articles, navigate to the article route
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1] || ''
+      if (dTag && bookmark.pubkey) {
+        const pointer = {
+          identifier: dTag,
+          kind: 30023,
+          pubkey: bookmark.pubkey,
+        }
+        const naddr = nip19.naddrEncode(pointer)
+        navigate(`/a/${naddr}`)
+      }
+    } else if (url) {
+      // For regular URLs, navigate to the reader route
+      navigate(`/r/${encodeURIComponent(url)}`)
+    }
+  }
+
+  // Merge and flatten all individual bookmarks (same logic as BookmarkList)
+  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
+  
+  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 renderTabContent = () => {
+    switch (activeTab) {
+      case 'highlights':
+        return highlights.length === 0 ? (
+          <div className="explore-error">
+            <p>No highlights yet. Start highlighting content to see them here!</p>
+          </div>
+        ) : (
+          <div className="highlights-list me-highlights-list">
+            {highlights.map((highlight) => (
+              <HighlightItem
+                key={highlight.id}
+                highlight={{ ...highlight, level: 'mine' }}
+                relayPool={relayPool}
+                onHighlightDelete={handleHighlightDelete}
+              />
+            ))}
+          </div>
+        )
+
+      case 'reading-list':
+        return allIndividualBookmarks.length === 0 ? (
+          <div className="explore-error">
+            <p>No bookmarks yet. Bookmark articles to see them here!</p>
+          </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>
+            <div className="view-mode-controls" style={{
+              display: 'flex',
+              justifyContent: 'center',
+              gap: '0.5rem',
+              padding: '1rem',
+              marginTop: '1rem',
+              borderTop: '1px solid var(--border-color)'
+            }}>
+              <IconButton
+                icon={faList}
+                onClick={() => setViewMode('compact')}
+                title="Compact list view"
+                ariaLabel="Compact list view"
+                variant={viewMode === 'compact' ? 'primary' : 'ghost'}
+              />
+              <IconButton
+                icon={faThLarge}
+                onClick={() => setViewMode('cards')}
+                title="Cards view"
+                ariaLabel="Cards view"
+                variant={viewMode === 'cards' ? 'primary' : 'ghost'}
+              />
+              <IconButton
+                icon={faImage}
+                onClick={() => setViewMode('large')}
+                title="Large preview view"
+                ariaLabel="Large preview view"
+                variant={viewMode === 'large' ? 'primary' : 'ghost'}
+              />
+            </div>
+          </div>
+        )
+
+      case 'archive':
+        return readArticles.length === 0 ? (
+          <div className="explore-error">
+            <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 'writings':
+        return writings.length === 0 ? (
+          <div className="explore-error">
+            <p>No articles written yet. Publish your first article to see it here!</p>
+          </div>
+        ) : (
+          <div className="explore-grid">
+            {writings.map((post) => (
+              <BlogPostCard
+                key={post.event.id}
+                post={post}
+                href={getPostUrl(post)}
+              />
+            ))}
+          </div>
+        )
+
+      default:
+        return null
+    }
+  }
+
+  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-header">
+        {activeAccount && <AuthorCard authorPubkey={activeAccount.pubkey} />}
+        
+        {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' : ''}`}
+            data-tab="highlights"
+            onClick={() => navigate('/me/highlights')}
+          >
+            <FontAwesomeIcon icon={faHighlighter} />
+            <span className="tab-label">Highlights</span>
+            <span className="tab-count">({highlights.length})</span>
+          </button>
+          <button
+            className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
+            data-tab="reading-list"
+            onClick={() => navigate('/me/reading-list')}
+          >
+            <FontAwesomeIcon icon={faBookmark} />
+            <span className="tab-label">Reading List</span>
+            <span className="tab-count">({allIndividualBookmarks.length})</span>
+          </button>
+          <button
+            className={`me-tab ${activeTab === 'archive' ? 'active' : ''}`}
+            data-tab="archive"
+            onClick={() => navigate('/me/archive')}
+          >
+            <FontAwesomeIcon icon={faBooks} />
+            <span className="tab-label">Archive</span>
+            <span className="tab-count">({readArticles.length})</span>
+          </button>
+          <button
+            className={`me-tab ${activeTab === 'writings' ? 'active' : ''}`}
+            data-tab="writings"
+            onClick={() => navigate('/me/writings')}
+          >
+            <FontAwesomeIcon icon={faPenToSquare} />
+            <span className="tab-label">Writings</span>
+            <span className="tab-count">({writings.length})</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="me-tab-content">
+        {renderTabContent()}
+      </div>
+    </div>
+  )
+}
+
+export default Me
+

src/components/PullToRefreshIndicator.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowDown, faSpinner } 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,
+  isRefreshing,
+  threshold = 80
+}) => {
+  // Don't show if not pulling and not refreshing
+  if (!isPulling && !isRefreshing) return null
+
+  const opacity = Math.min(pullDistance / threshold, 1)
+  const rotation = (pullDistance / threshold) * 180
+
+  return (
+    <div 
+      className="pull-to-refresh-indicator"
+      style={{
+        opacity: isRefreshing ? 1 : opacity,
+        transform: `translateY(${isRefreshing ? 0 : -20 + pullDistance / 2}px)`
+      }}
+    >
+      <div 
+        className="pull-to-refresh-icon"
+        style={{
+          transform: isRefreshing ? 'none' : `rotate(${rotation}deg)`
+        }}
+      >
+        {isRefreshing ? (
+          <FontAwesomeIcon icon={faSpinner} spin />
+        ) : (
+          <FontAwesomeIcon 
+            icon={faArrowDown} 
+            style={{ color: canRefresh ? 'var(--accent-color, #3b82f6)' : 'var(--text-secondary)' }}
+          />
+        )}
+      </div>
+      <div className="pull-to-refresh-text">
+        {isRefreshing 
+          ? 'Refreshing...' 
+          : canRefresh 
+            ? 'Release to refresh' 
+            : 'Pull to refresh'}
+      </div>
+    </div>
+  )
+}
+
+export default PullToRefreshIndicator
+

src/components/ReaderHeader.tsx

@@ -1,32 +1,128 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
+import { format } from 'date-fns'
+import { useImageCache } from '../hooks/useImageCache'
+import { UserSettings } from '../services/settingsService'
+import { Highlight, HighlightLevel } from '../types/highlights'
+import { HighlightVisibility } from './HighlightsPanel'
+import { hexToRgb } from '../utils/colorHelpers'
 
 interface ReaderHeaderProps {
   title?: string
   image?: string
+  summary?: string
+  published?: number
   readingTimeText?: string | null
   hasHighlights: boolean
   highlightCount: number
+  settings?: UserSettings
+  highlights?: Highlight[]
+  highlightVisibility?: HighlightVisibility
 }
 
 const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   title,
   image,
+  summary,
+  published,
   readingTimeText,
   hasHighlights,
-  highlightCount
+  highlightCount,
+  settings,
+  highlights = [],
+  highlightVisibility = { nostrverse: true, friends: true, mine: true }
 }) => {
+  const cachedImage = useImageCache(image, settings)
+  const formattedDate = published ? format(new Date(published * 1000), 'MMM d, yyyy') : null
+  const isLongSummary = summary && summary.length > 150
+  
+  // Determine the dominant highlight color based on visibility and priority
+  const highlightIndicatorStyles = useMemo(() => {
+    if (!highlights.length) return undefined
+    
+    // Count highlights by level that are visible
+    const visibleLevels = new Set<HighlightLevel>()
+    highlights.forEach(h => {
+      if (h.level && highlightVisibility[h.level]) {
+        visibleLevels.add(h.level)
+      }
+    })
+    
+    let hexColor: string | undefined
+    // Priority: nostrverse > friends > mine
+    if (visibleLevels.has('nostrverse') && highlightVisibility.nostrverse) {
+      hexColor = settings?.highlightColorNostrverse || '#9333ea'
+    } else if (visibleLevels.has('friends') && highlightVisibility.friends) {
+      hexColor = settings?.highlightColorFriends || '#f97316'
+    } else if (visibleLevels.has('mine') && highlightVisibility.mine) {
+      hexColor = settings?.highlightColorMine || '#ffff00'
+    }
+    
+    if (!hexColor) return undefined
+    
+    const rgb = hexToRgb(hexColor)
+    return {
+      backgroundColor: `rgba(${rgb}, 0.1)`,
+      borderColor: `rgba(${rgb}, 0.3)`,
+      color: '#fff'
+    }
+  }, [highlights, highlightVisibility, settings])
+  
+  if (cachedImage) {
+    return (
+      <>
+        <div className="reader-hero-image">
+          <img src={cachedImage} alt={title || 'Article image'} />
+          {formattedDate && (
+            <div className="publish-date-topright">
+              {formattedDate}
+            </div>
+          )}
+          {title && (
+            <div className="reader-header-overlay">
+              <h2 className="reader-title">{title}</h2>
+              {summary && <p className={`reader-summary ${isLongSummary ? 'hide-on-mobile' : ''}`}>{summary}</p>}
+              <div className="reader-meta">
+                {readingTimeText && (
+                  <div className="reading-time">
+                    <FontAwesomeIcon icon={faClock} />
+                    <span>{readingTimeText}</span>
+                  </div>
+                )}
+                {hasHighlights && (
+                  <div 
+                    className="highlight-indicator"
+                    style={highlightIndicatorStyles}
+                  >
+                    <FontAwesomeIcon icon={faHighlighter} />
+                    <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+        {isLongSummary && (
+          <div className="reader-summary-below-image">
+            <p className="reader-summary">{summary}</p>
+          </div>
+        )}
+      </>
+    )
+  }
+
   return (
     <>
-      {image && (
-        <div className="reader-hero-image">
-          <img src={image} alt={title || 'Article image'} />
-        </div>
-      )}
       {title && (
         <div className="reader-header">
+          {formattedDate && (
+            <div className="publish-date-topright">
+              {formattedDate}
+            </div>
+          )}
           <h2 className="reader-title">{title}</h2>
+          {summary && <p className="reader-summary">{summary}</p>}
           <div className="reader-meta">
             {readingTimeText && (
               <div className="reading-time">
@@ -35,7 +131,10 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
               </div>
             )}
             {hasHighlights && (
-              <div className="highlight-indicator">
+              <div 
+                className="highlight-indicator"
+                style={highlightIndicatorStyles}
+              >
                 <FontAwesomeIcon icon={faHighlighter} />
                 <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
               </div>

src/components/ReadingProgressIndicator.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+
+interface ReadingProgressIndicatorProps {
+  progress: number // 0 to 100
+  isComplete?: boolean
+  showPercentage?: boolean
+  className?: string
+  isSidebarCollapsed?: boolean
+  isHighlightsCollapsed?: boolean
+}
+
+export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> = ({
+  progress,
+  isComplete = false,
+  showPercentage = true,
+  className = '',
+  isSidebarCollapsed = false,
+  isHighlightsCollapsed = false
+}) => {
+  const clampedProgress = Math.min(100, Math.max(0, progress))
+  
+  // Calculate left and right offsets based on sidebar states (desktop only)
+  const leftOffset = isSidebarCollapsed 
+    ? 'var(--sidebar-collapsed-width)' 
+    : 'var(--sidebar-width)'
+  const rightOffset = isHighlightsCollapsed 
+    ? 'var(--highlights-collapsed-width)' 
+    : 'var(--highlights-width)'
+  
+  return (
+    <div 
+      className={`reading-progress-bar fixed bottom-0 left-0 right-0 z-[1102] bg-[rgba(26,26,26,0.85)] backdrop-blur-sm px-3 py-1 flex items-center gap-2 transition-all duration-300 ${className}`}
+      style={{
+        '--left-offset': leftOffset,
+        '--right-offset': rightOffset
+      } as React.CSSProperties}
+    >
+      <div className="flex-1 h-0.5 bg-white/10 rounded-full overflow-hidden relative">
+        <div 
+          className={`h-full rounded-full transition-all duration-300 relative ${
+            isComplete 
+              ? 'bg-green-500' 
+              : 'bg-indigo-500'
+          }`}
+          style={{ width: `${clampedProgress}%` }}
+        >
+          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-[shimmer_2s_infinite]" />
+        </div>
+      </div>
+      {showPercentage && (
+        <div className={`text-[0.625rem] font-normal min-w-[32px] text-right tabular-nums ${
+          isComplete ? 'text-green-500' : 'text-gray-500'
+        }`}>
+          {isComplete ? '✓' : `${clampedProgress}%`}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/RelayStatusIndicator.tsx

@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlane, faGlobe, faCircle, faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { RelayPool } from 'applesauce-relay'
+import { useRelayStatus } from '../hooks/useRelayStatus'
+import { isLocalRelay } from '../utils/helpers'
+import { useIsMobile } from '../hooks/useMediaQuery'
+
+interface RelayStatusIndicatorProps {
+  relayPool: RelayPool | null
+  showOnMobile?: boolean // Control visibility based on scroll
+}
+
+export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ 
+  relayPool,
+  showOnMobile = true
+}) => {
+  // Poll frequently for responsive offline indicator (5s instead of default 20s)
+  const relayStatuses = useRelayStatus({ relayPool, pollingInterval: 5000 })
+  const [isConnecting, setIsConnecting] = useState(true)
+  const [isExpanded, setIsExpanded] = useState(false)
+  const isMobile = useIsMobile()
+  
+  if (!relayPool) return null
+  
+  // Get currently connected relays
+  const connectedRelays = relayStatuses.filter(r => r.isInPool)
+  const connectedUrls = connectedRelays.map(r => r.url)
+  
+  // Determine connection status
+  const hasLocalRelay = connectedUrls.some(url => isLocalRelay(url))
+  const hasRemoteRelay = connectedUrls.some(url => !isLocalRelay(url))
+  const localOnlyMode = hasLocalRelay && !hasRemoteRelay
+  const offlineMode = connectedUrls.length === 0
+  
+  // Show "Connecting" for first few seconds or until relays connect
+  useEffect(() => {
+    if (connectedUrls.length > 0) {
+      // Connected! Stop showing connecting state
+      setIsConnecting(false)
+    } else {
+      // No connections yet - show connecting for 8 seconds
+      setIsConnecting(true)
+      const timeout = setTimeout(() => {
+        setIsConnecting(false)
+      }, 8000)
+      return () => clearTimeout(timeout)
+    }
+  }, [connectedUrls.length])
+  
+  // Debug logging
+  useEffect(() => {
+    console.log('🔌 Relay Status Indicator:', {
+      mode: isConnecting ? 'CONNECTING' : offlineMode ? 'OFFLINE' : localOnlyMode ? 'LOCAL_ONLY' : 'ONLINE',
+      totalStatuses: relayStatuses.length,
+      connectedCount: connectedUrls.length,
+      connectedUrls: connectedUrls.map(u => u.replace(/^wss?:\/\//, '')),
+      hasLocalRelay,
+      hasRemoteRelay,
+      isConnecting
+    })
+  }, [offlineMode, localOnlyMode, connectedUrls, relayStatuses.length, hasLocalRelay, hasRemoteRelay, isConnecting])
+  
+  // Don't show indicator when fully connected (but show when connecting)
+  if (!localOnlyMode && !offlineMode && !isConnecting) return null
+  
+  const handleClick = () => {
+    if (isMobile) {
+      setIsExpanded(!isExpanded)
+    }
+  }
+
+  const showDetails = !isMobile || isExpanded
+  
+  return (
+    <div 
+      className={`relay-status-indicator ${isConnecting ? 'connecting' : ''} ${isMobile ? 'mobile' : ''} ${isExpanded ? 'expanded' : ''} ${isMobile && !showOnMobile ? 'hidden' : 'visible'}`}
+      title={
+        !isMobile ? (
+          isConnecting
+            ? 'Connecting to relays...'
+            : offlineMode 
+              ? 'Offline - No relays connected'
+              : 'Local Relays Only - Highlights will be marked as local'
+        ) : undefined
+      }
+      onClick={handleClick}
+      style={{ cursor: isMobile ? 'pointer' : 'default' }}
+    >
+      <div className="relay-status-icon">
+        <FontAwesomeIcon icon={isConnecting ? faSpinner : offlineMode ? faCircle : faPlane} spin={isConnecting} />
+      </div>
+      {showDetails && (
+        <>
+          <div className="relay-status-text">
+            {isConnecting ? (
+              <span className="relay-status-title">Connecting</span>
+            ) : offlineMode ? (
+              <>
+                <span className="relay-status-title">Offline</span>
+                <span className="relay-status-subtitle">No relays connected</span>
+              </>
+            ) : (
+              <>
+                <span className="relay-status-title">Flight Mode</span>
+                <span className="relay-status-subtitle">{connectedUrls.length} local relay{connectedUrls.length !== 1 ? 's' : ''}</span>
+              </>
+            )}
+          </div>
+          {!offlineMode && !isConnecting && (
+            <div className="relay-status-pulse">
+              <FontAwesomeIcon icon={faGlobe} className="pulse-icon" />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+

src/components/ResolvedMention.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models, Helpers } from 'applesauce-core'
 import { decode, npubEncode } from 'nostr-tools/nip19'
+import { getProfileUrl } from '../config/nostrGateways'
 
 const { getPubkeyFromDecodeResult } = Helpers
 
@@ -25,7 +26,7 @@ const ResolvedMention: React.FC<ResolvedMentionProps> = ({ encoded }) => {
   if (npub) {
     return (
       <a
-        href={`https://search.dergigi.com/p/${npub}`}
+        href={getProfileUrl(npub)}
         className="nostr-mention"
         target="_blank"
         rel="noopener noreferrer"

src/components/Settings.tsx

@@ -1,11 +1,17 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { faTimes, faUndo } from '@fortawesome/free-solid-svg-icons'
+import { RelayPool } from 'applesauce-relay'
 import { UserSettings } from '../services/settingsService'
 import IconButton from './IconButton'
 import { loadFont } from '../utils/fontLoader'
 import ReadingDisplaySettings from './Settings/ReadingDisplaySettings'
 import LayoutNavigationSettings from './Settings/LayoutNavigationSettings'
 import StartupPreferencesSettings from './Settings/StartupPreferencesSettings'
+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'
 
 const DEFAULT_SETTINGS: UserSettings = {
   collapseOnArticleOpen: true,
@@ -14,7 +20,7 @@ const DEFAULT_SETTINGS: UserSettings = {
   sidebarCollapsed: true,
   highlightsCollapsed: true,
   readingFont: 'source-serif-4',
-  fontSize: 18,
+  fontSize: 21,
   highlightStyle: 'marker',
   highlightColor: '#ffff00',
   highlightColorNostrverse: '#9333ea',
@@ -23,21 +29,57 @@ const DEFAULT_SETTINGS: UserSettings = {
   defaultHighlightVisibilityNostrverse: true,
   defaultHighlightVisibilityFriends: true,
   defaultHighlightVisibilityMine: true,
-  zapSplitPercentage: 50,
+  zapSplitHighlighterWeight: 50,
+  zapSplitBorisWeight: 2.1,
+  zapSplitAuthorWeight: 50,
+  useLocalRelayAsCache: true,
+  rebroadcastToAllRelays: false,
 }
 
 interface SettingsProps {
   settings: UserSettings
   onSave: (settings: UserSettings) => Promise<void>
   onClose: () => void
+  relayPool: RelayPool | null
 }
 
-const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
-  const [localSettings, setLocalSettings] = useState<UserSettings>(settings)
+const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPool }) => {
+  const [localSettings, setLocalSettings] = useState<UserSettings>(() => {
+    // Migrate old settings format to new weight-based format
+    const migrated = { ...settings }
+    const anySettings = migrated as Record<string, unknown>
+    if ('zapSplitPercentage' in anySettings && !('zapSplitHighlighterWeight' in migrated)) {
+      migrated.zapSplitHighlighterWeight = (anySettings.zapSplitPercentage as number) ?? 50
+      migrated.zapSplitAuthorWeight = 100 - ((anySettings.zapSplitPercentage as number) ?? 50)
+    }
+    if ('borisSupportPercentage' in anySettings && !('zapSplitBorisWeight' in migrated)) {
+      migrated.zapSplitBorisWeight = (anySettings.borisSupportPercentage as number) ?? 2.1
+    }
+    return migrated
+  })
   const isInitialMount = useRef(true)
+  const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const isLocallyUpdating = useRef(false)
+  
+  // Poll for relay status updates
+  const relayStatuses = useRelayStatus({ relayPool })
 
   useEffect(() => {
-    setLocalSettings(settings)
+    // Don't update from external settings if we're currently making local changes
+    if (isLocallyUpdating.current) {
+      return
+    }
+    
+    const migrated = { ...settings }
+    const anySettings = migrated as Record<string, unknown>
+    if ('zapSplitPercentage' in anySettings && !('zapSplitHighlighterWeight' in migrated)) {
+      migrated.zapSplitHighlighterWeight = (anySettings.zapSplitPercentage as number) ?? 50
+      migrated.zapSplitAuthorWeight = 100 - ((anySettings.zapSplitPercentage as number) ?? 50)
+    }
+    if ('borisSupportPercentage' in anySettings && !('zapSplitBorisWeight' in migrated)) {
+      migrated.zapSplitBorisWeight = (anySettings.borisSupportPercentage as number) ?? 2.1
+    }
+    setLocalSettings(migrated)
   }, [settings])
 
   useEffect(() => {
@@ -58,7 +100,30 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
       isInitialMount.current = false
       return
     }
-    onSave(localSettings)
+    
+    // Mark that we're making local updates
+    isLocallyUpdating.current = true
+    
+    // Clear any pending save
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current)
+    }
+    
+    // Debounce the save to avoid rapid updates
+    saveTimeoutRef.current = setTimeout(() => {
+      onSave(localSettings).finally(() => {
+        // Allow external updates again after a short delay
+        setTimeout(() => {
+          isLocallyUpdating.current = false
+        }, 500)
+      })
+    }, 300)
+    
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current)
+      }
+    }
   }, [localSettings, onSave])
 
   const handleResetToDefaults = () => {
@@ -97,6 +162,10 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
         <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} />
+        <RelaySettings relayStatuses={relayStatuses} onClose={onClose} />
+        <PWASettings />
       </div>
     </div>
   )

src/components/Settings/LayoutNavigationSettings.tsx

@@ -14,7 +14,7 @@ const LayoutNavigationSettings: React.FC<LayoutNavigationSettingsProps> = ({ set
       <h3 className="section-title">Layout & Navigation</h3>
       
       <div className="setting-group setting-inline">
-        <label>Default View Mode</label>
+        <label>Default Bookmark View</label>
         <div className="setting-buttons">
           <IconButton 
             icon={faList} 

src/components/Settings/OfflineModeSettings.tsx

@@ -0,0 +1,173 @@
+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

@@ -0,0 +1,84 @@
+import React from 'react'
+import { faDownload, faCheckCircle, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { usePWAInstall } from '../../hooks/usePWAInstall'
+
+const PWASettings: React.FC = () => {
+  const { isInstallable, isInstalled, installApp } = usePWAInstall()
+
+  const handleInstall = async () => {
+    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>
+    )
+  }
+
+  if (!isInstallable) {
+    return null
+  }
+
+  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>
+        </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>
+      </div>
+    </div>
+  )
+}
+
+export default PWASettings
+

src/components/Settings/ReadingDisplaySettings.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { faHighlighter, faUnderline } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHighlighter, faUnderline, faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../../services/settingsService'
 import IconButton from '../IconButton'
 import ColorPicker from '../ColorPicker'
@@ -19,42 +20,33 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
     <div className="settings-section">
       <h3 className="section-title">Reading & Display</h3>
       
-      <div className="setting-group setting-inline">
-        <label htmlFor="readingFont">Reading Font</label>
-        <FontSelector
-          value={settings.readingFont || 'source-serif-4'}
-          onChange={(font) => onUpdate({ readingFont: font })}
-        />
-      </div>
-
-      <div className="setting-group setting-inline">
-        <label>Font Size</label>
-        <div className="setting-buttons">
-          {[14, 16, 18, 20, 22].map(size => (
-            <button
-              key={size}
-              onClick={() => onUpdate({ fontSize: size })}
-              className={`font-size-btn ${(settings.fontSize || 18) === size ? 'active' : ''}`}
-              title={`${size}px`}
-              style={{ fontSize: `${size - 2}px` }}
-            >
-              A
-            </button>
-          ))}
+      <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>
 
-      <div className="setting-group">
-        <label htmlFor="showHighlights" className="checkbox-label">
-          <input
-            id="showHighlights"
-            type="checkbox"
-            checked={settings.showHighlights !== false}
-            onChange={(e) => onUpdate({ showHighlights: e.target.checked })}
-            className="setting-checkbox"
-          />
-          <span>Show highlights</span>
-        </label>
+        <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">
@@ -81,7 +73,7 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
         <label className="setting-label">My Highlights</label>
         <div className="setting-control">
           <ColorPicker
-            selectedColor={settings.highlightColorMine || '#ffff00'}
+            selectedColor={settings.highlightColorMine || '#fde047'}
             onColorChange={(color) => onUpdate({ highlightColorMine: color })}
           />
         </div>
@@ -107,41 +99,66 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
         </div>
       </div>
 
-      <div className="setting-group">
-        <label className="setting-label">Zap Split for Highlights</label>
-        <div className="zap-split-container">
-          <div className="zap-split-labels">
-            <span className="zap-split-label">You: {settings.zapSplitPercentage ?? 50}%</span>
-            <span className="zap-split-label">Author: {100 - (settings.zapSplitPercentage ?? 50)}%</span>
-          </div>
-          <input
-            type="range"
-            min="0"
-            max="100"
-            value={settings.zapSplitPercentage ?? 50}
-            onChange={(e) => onUpdate({ zapSplitPercentage: parseInt(e.target.value) })}
-            className="zap-split-slider"
-          />
-          <div className="zap-split-description">
-            When highlighting nostr-native content, zaps will be split between you and the author.
-          </div>
+      <div className="setting-group setting-inline">
+        <label>Default Highlight Visibility</label>
+        <div className="highlight-level-toggles">
+          <button
+            onClick={() => onUpdate({ defaultHighlightVisibilityNostrverse: !(settings.defaultHighlightVisibilityNostrverse !== false) })}
+            className={`level-toggle-btn ${(settings.defaultHighlightVisibilityNostrverse !== false) ? 'active' : ''}`}
+            title="Nostrverse highlights"
+            aria-label="Toggle nostrverse highlights by default"
+            style={{ color: (settings.defaultHighlightVisibilityNostrverse !== false) ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
+          >
+            <FontAwesomeIcon icon={faNetworkWired} />
+          </button>
+          <button
+            onClick={() => onUpdate({ defaultHighlightVisibilityFriends: !(settings.defaultHighlightVisibilityFriends !== false) })}
+            className={`level-toggle-btn ${(settings.defaultHighlightVisibilityFriends !== false) ? 'active' : ''}`}
+            title="Friends highlights"
+            aria-label="Toggle friends highlights by default"
+            style={{ color: (settings.defaultHighlightVisibilityFriends !== false) ? 'var(--highlight-color-friends, #f97316)' : undefined }}
+          >
+            <FontAwesomeIcon icon={faUserGroup} />
+          </button>
+          <button
+            onClick={() => onUpdate({ defaultHighlightVisibilityMine: !(settings.defaultHighlightVisibilityMine !== false) })}
+            className={`level-toggle-btn ${(settings.defaultHighlightVisibilityMine !== false) ? 'active' : ''}`}
+            title="My highlights"
+            aria-label="Toggle my highlights by default"
+            style={{ color: (settings.defaultHighlightVisibilityMine !== false) ? 'var(--highlight-color-mine, #eab308)' : undefined }}
+          >
+            <FontAwesomeIcon icon={faUser} />
+          </button>
         </div>
       </div>
 
+      <div className="setting-group">
+        <label htmlFor="showHighlights" className="checkbox-label">
+          <input
+            id="showHighlights"
+            type="checkbox"
+            checked={settings.showHighlights !== false}
+            onChange={(e) => onUpdate({ showHighlights: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Show highlights</span>
+        </label>
+      </div>
+
       <div className="setting-preview">
         <div className="preview-label">Preview</div>
         <div 
           className="preview-content" 
           style={{ 
             fontFamily: previewFontFamily,
-            fontSize: `${settings.fontSize || 18}px`,
+            fontSize: `${settings.fontSize || 21}px`,
             '--highlight-rgb': hexToRgb(settings.highlightColor || '#ffff00')
           } as React.CSSProperties}
         >
           <h3>The Quick Brown Fox</h3>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span className={settings.showHighlights !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-mine` : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span className={settings.showHighlights !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-friends` : ""}>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
-          <p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <span className={settings.showHighlights !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-nostrverse` : ""}>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</span> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityMine !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-mine` : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityFriends !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-friends` : ""}>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+          <p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityNostrverse !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-nostrverse` : ""}>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</span> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
         </div>
       </div>

src/components/Settings/RelaySettings.tsx

@@ -0,0 +1,146 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheckCircle, faWifi, faClock, faPlane } from '@fortawesome/free-solid-svg-icons'
+import { RelayStatus } from '../../services/relayStatusService'
+import { formatDistanceToNow } from 'date-fns'
+import { isLocalRelay } from '../../utils/helpers'
+
+interface RelaySettingsProps {
+  relayStatuses: RelayStatus[]
+  onClose?: () => void
+}
+
+const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses }) => {
+  const formatRelayUrl = (url: string) => {
+    return url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
+  }
+
+  const formatLastSeen = (timestamp: number) => {
+    try {
+      return formatDistanceToNow(timestamp, { addSuffix: true })
+    } catch {
+      return 'just now'
+    }
+  }
+
+  // Sort relays: local relays first, then by connection status, then by URL
+  const sortedRelays = [...relayStatuses].sort((a, b) => {
+    const aIsLocal = isLocalRelay(a.url)
+    const bIsLocal = isLocalRelay(b.url)
+    
+    // Local relays always first
+    if (aIsLocal && !bIsLocal) return -1
+    if (!aIsLocal && bIsLocal) return 1
+    
+    // Within local or remote groups, connected before disconnected
+    if (a.isInPool !== b.isInPool) return a.isInPool ? -1 : 1
+    
+    // Finally sort by URL
+    return a.url.localeCompare(b.url)
+  })
+
+  const getRelayIcon = (relay: RelayStatus) => {
+    const isLocal = isLocalRelay(relay.url)
+    const isConnected = relay.isInPool
+    
+    if (isLocal) {
+      return {
+        icon: faPlane,
+        color: isConnected ? '#22c55e' : '#ef4444',
+        size: '1rem'
+      }
+    } else {
+      if (isConnected) {
+        return {
+          icon: faCheckCircle,
+          color: '#22c55e',
+          size: '1rem'
+        }
+      } else {
+        return {
+          icon: faWifi,
+          color: '#ef4444',
+          size: '1rem'
+        }
+      }
+    }
+  }
+
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Relays</h3>
+
+      {sortedRelays.length > 0 && (
+        <div className="relay-group">
+          <div className="relay-list">
+            {sortedRelays.map((relay) => {
+              const iconConfig = getRelayIcon(relay)
+              const isDisconnected = !relay.isInPool
+              
+              return (
+                <div 
+                  key={relay.url} 
+                  className="relay-item"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.75rem',
+                    padding: '0.75rem',
+                    background: 'var(--surface-secondary)',
+                    borderRadius: '6px',
+                    marginBottom: '0.5rem',
+                    opacity: isDisconnected ? 0.7 : 1
+                  }}
+                >
+                  <FontAwesomeIcon 
+                    icon={iconConfig.icon} 
+                    style={{ 
+                      color: iconConfig.color,
+                      fontSize: iconConfig.size
+                    }} 
+                  />
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div 
+                      className="relay-url"
+                      style={{ 
+                        fontSize: '0.9rem',
+                        fontFamily: 'var(--font-mono, monospace)',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis'
+                      }}
+                    >
+                      {formatRelayUrl(relay.url)}
+                    </div>
+                  </div>
+                  {isDisconnected && (
+                    <div style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '0.5rem',
+                      fontSize: '0.8rem',
+                      color: 'var(--text-tertiary)',
+                      whiteSpace: 'nowrap'
+                    }}>
+                      <FontAwesomeIcon icon={faClock} />
+                      {formatLastSeen(relay.lastSeen)}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {relayStatuses.length === 0 && (
+        <p style={{ color: 'var(--text-secondary)', fontStyle: 'italic' }}>
+          No relay connections found
+        </p>
+      )}
+    </div>
+  )
+}
+
+export default RelaySettings
+

src/components/Settings/StartupPreferencesSettings.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import { faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../../services/settingsService'
-import IconButton from '../IconButton'
 
 interface StartupPreferencesSettingsProps {
   settings: UserSettings
@@ -11,7 +9,7 @@ interface StartupPreferencesSettingsProps {
 const StartupPreferencesSettings: React.FC<StartupPreferencesSettingsProps> = ({ settings, onUpdate }) => {
   return (
     <div className="settings-section">
-      <h3 className="section-title">Startup Preferences</h3>
+      <h3 className="section-title">Startup & Behavior</h3>
       
       <div className="setting-group">
         <label htmlFor="sidebarCollapsed" className="checkbox-label">
@@ -39,31 +37,30 @@ const StartupPreferencesSettings: React.FC<StartupPreferencesSettingsProps> = ({
         </label>
       </div>
 
-      <div className="setting-group setting-inline">
-        <label>Default Highlight Visibility</label>
-        <div className="setting-buttons">
-          <IconButton 
-            icon={faNetworkWired} 
-            onClick={() => onUpdate({ defaultHighlightVisibilityNostrverse: !(settings.defaultHighlightVisibilityNostrverse !== false) })} 
-            title="Nostrverse highlights" 
-            ariaLabel="Toggle nostrverse highlights by default" 
-            variant={(settings.defaultHighlightVisibilityNostrverse !== false) ? 'primary' : 'ghost'} 
+      <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"
           />
-          <IconButton 
-            icon={faUserGroup} 
-            onClick={() => onUpdate({ defaultHighlightVisibilityFriends: !(settings.defaultHighlightVisibilityFriends !== false) })} 
-            title="Friends highlights" 
-            ariaLabel="Toggle friends highlights by default" 
-            variant={(settings.defaultHighlightVisibilityFriends !== false) ? 'primary' : 'ghost'} 
+          <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"
           />
-          <IconButton 
-            icon={faUser} 
-            onClick={() => onUpdate({ defaultHighlightVisibilityMine: !(settings.defaultHighlightVisibilityMine !== false) })} 
-            title="My highlights" 
-            ariaLabel="Toggle my highlights by default" 
-            variant={(settings.defaultHighlightVisibilityMine !== false) ? 'primary' : 'ghost'} 
-          />
-        </div>
+          <span>Auto-collapse sidebar on small screens</span>
+        </label>
       </div>
     </div>
   )

src/components/Settings/ZapSettings.tsx

@@ -0,0 +1,143 @@
+import React from 'react'
+import { UserSettings } from '../../services/settingsService'
+
+interface ZapSettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+}
+
+const ZapSettings: React.FC<ZapSettingsProps> = ({ settings, onUpdate }) => {
+  const highlighterWeight = settings.zapSplitHighlighterWeight ?? 50
+  const borisWeight = settings.zapSplitBorisWeight ?? 2.1
+  const authorWeight = settings.zapSplitAuthorWeight ?? 50
+  
+  // Calculate actual percentages from weights
+  const totalWeight = highlighterWeight + borisWeight + authorWeight
+  const highlighterPercentage = totalWeight > 0 ? (highlighterWeight / totalWeight) * 100 : 0
+  const borisPercentage = totalWeight > 0 ? (borisWeight / totalWeight) * 100 : 0
+  const authorPercentage = totalWeight > 0 ? (authorWeight / totalWeight) * 100 : 0
+
+  const presets = {
+    default: { highlighter: 50, boris: 2.1, author: 50 },
+    generous: { highlighter: 5, boris: 10, author: 75 },
+    selfless: { highlighter: 1, boris: 19, author: 80 },
+    boris: { highlighter: 10, boris: 80, author: 10 },
+  }
+
+  const isPresetActive = (preset: { highlighter: number; boris: number; author: number }) => {
+    return highlighterWeight === preset.highlighter &&
+           borisWeight === preset.boris &&
+           authorWeight === preset.author
+  }
+
+  const applyPreset = (preset: { highlighter: number; boris: number; author: number }) => {
+    onUpdate({
+      zapSplitHighlighterWeight: preset.highlighter,
+      zapSplitBorisWeight: preset.boris,
+      zapSplitAuthorWeight: preset.author,
+    })
+  }
+
+  return (
+    <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>
+          <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>
+          <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>
+          <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>
+    </div>
+  )
+}
+
+export default ZapSettings
+

src/components/SidebarHeader.tsx

@@ -1,23 +1,28 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faRotate, faHome } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faHome, faPlus, 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
-  onRefresh?: () => void
-  isRefreshing?: boolean
+  relayPool: RelayPool | null
+  isMobile?: boolean
 }
 
-const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, onRefresh, isRefreshing }) => {
+const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, relayPool, isMobile = false }) => {
   const [isConnecting, setIsConnecting] = useState(false)
+  const [showAddModal, setShowAddModal] = useState(false)
   const navigate = useNavigate()
   const activeAccount = Hooks.useActiveAccount()
   const accountManager = Hooks.useAccountManager()
@@ -31,7 +36,7 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
       accountManager.setActive(account)
     } catch (error) {
       console.error('Login failed:', error)
-      alert('Login failed. Please install a nostr browser extension and try again.')
+      alert('Login failed. Please install a nostr browser extension and try again.\n\nIf you aren\'t on nostr yet, start here: https://nstart.me/')
     } finally {
       setIsConnecting(false)
     }
@@ -49,50 +54,48 @@ 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 (
     <>
       <div className="sidebar-header-bar">
-        <button 
-          onClick={onToggleCollapse}
-          className="toggle-sidebar-btn"
-          title="Collapse bookmarks sidebar"
-          aria-label="Collapse bookmarks sidebar"
-        >
-          <FontAwesomeIcon icon={faChevronRight} />
-        </button>
-        <div className="sidebar-header-right">
-        <IconButton
-          icon={faHome}
-          onClick={() => navigate('/')}
-          title="Home"
-          ariaLabel="Home"
-          variant="ghost"
-        />
-        {onRefresh && (
+        {isMobile ? (
           <IconButton
-            icon={faRotate}
-            onClick={onRefresh}
-            title="Refresh bookmarks"
-            ariaLabel="Refresh bookmarks"
+            icon={faTimes}
+            onClick={onToggleCollapse}
+            title="Close sidebar"
+            ariaLabel="Close sidebar"
             variant="ghost"
-            disabled={isRefreshing}
-            spin={isRefreshing}
+            className="mobile-close-btn"
           />
+        ) : (
+          <button 
+            onClick={onToggleCollapse}
+            className="toggle-sidebar-btn"
+            title="Collapse bookmarks sidebar"
+            aria-label="Collapse bookmarks sidebar"
+          >
+            <FontAwesomeIcon icon={faChevronRight} />
+          </button>
         )}
-        <IconButton
-          icon={faGear}
-          onClick={onOpenSettings}
-          title="Settings"
-          ariaLabel="Settings"
-          variant="ghost"
-        />
+        <div className="sidebar-header-right">
         <div 
           className="profile-avatar" 
           title={activeAccount ? getUserDisplayName() : "Login"}
-          onClick={!activeAccount ? (isConnecting ? () => {} : handleLogin) : undefined}
-          style={{ cursor: !activeAccount ? 'pointer' : 'default' }}
+          onClick={
+            activeAccount 
+              ? () => navigate('/me')
+              : (isConnecting ? () => {} : handleLogin)
+          }
+          style={{ cursor: 'pointer' }}
         >
           {profileImage ? (
             <img src={profileImage} alt={getUserDisplayName()} />
@@ -100,6 +103,36 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
             <FontAwesomeIcon icon={faUserCircle} />
           )}
         </div>
+        <IconButton
+          icon={faHome}
+          onClick={() => navigate('/')}
+          title="Home"
+          ariaLabel="Home"
+          variant="ghost"
+        />
+        <IconButton
+          icon={faNewspaper}
+          onClick={() => navigate('/explore')}
+          title="Explore"
+          ariaLabel="Explore"
+          variant="ghost"
+        />
+        <IconButton
+          icon={faGear}
+          onClick={onOpenSettings}
+          title="Settings"
+          ariaLabel="Settings"
+          variant="ghost"
+        />
+        {activeAccount && (
+          <IconButton
+            icon={faPlus}
+            onClick={() => setShowAddModal(true)}
+            title="Add bookmark"
+            ariaLabel="Add bookmark"
+            variant="ghost"
+          />
+        )}
         {activeAccount ? (
           <IconButton
             icon={faRightFromBracket}
@@ -119,6 +152,12 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
         )}
         </div>
       </div>
+      {showAddModal && (
+        <AddBookmarkModal
+          onClose={() => setShowAddModal(false)}
+          onSave={handleSaveBookmark}
+        />
+      )}
     </>
   )
 }

src/components/ThreePaneLayout.tsx

@@ -1,10 +1,15 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBookmark, faHighlighter } from '@fortawesome/free-solid-svg-icons'
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
 import { BookmarkList } from './BookmarkList'
 import ContentPanel from './ContentPanel'
 import { HighlightsPanel } from './HighlightsPanel'
 import Settings from './Settings'
 import Toast from './Toast'
 import { HighlightButton } from './HighlightButton'
+import { RelayStatusIndicator } from './RelayStatusIndicator'
 import { ViewMode } from './Bookmarks'
 import { Bookmark } from '../types/bookmarks'
 import { Highlight } from '../types/highlights'
@@ -13,23 +18,33 @@ import { UserSettings } from '../services/settingsService'
 import { HighlightVisibility } from './HighlightsPanel'
 import { HighlightButtonRef } from './HighlightButton'
 import { BookmarkReference } from '../utils/contentLoader'
+import { useIsMobile } from '../hooks/useMediaQuery'
+import { useScrollDirection } from '../hooks/useScrollDirection'
+import { IAccount } from 'applesauce-accounts'
+import { NostrEvent } from 'nostr-tools'
 
 interface ThreePaneLayoutProps {
   // Layout state
   isCollapsed: boolean
   isHighlightsCollapsed: boolean
+  isSidebarOpen: boolean
   showSettings: boolean
+  showExplore?: boolean
+  showMe?: boolean
   
   // Bookmarks pane
   bookmarks: Bookmark[]
   bookmarksLoading: boolean
   viewMode: ViewMode
   isRefreshing: boolean
+  lastFetchTime?: number | null
   onToggleSidebar: () => void
   onLogout: () => void
   onViewModeChange: (mode: ViewMode) => void
   onOpenSettings: () => void
   onRefresh: () => void
+  relayPool: RelayPool | null
+  eventStore: IEventStore | null
   
   // Content pane
   readerLoading: boolean
@@ -47,6 +62,8 @@ interface ThreePaneLayoutProps {
   onClearSelection: () => void
   currentUserPubkey?: string
   followedPubkeys: Set<string>
+  activeAccount?: IAccount | null
+  currentArticle?: NostrEvent | null
   
   // Highlights pane
   highlights: Highlight[]
@@ -66,17 +83,207 @@ interface ThreePaneLayoutProps {
   toastMessage?: string
   toastType?: 'success' | 'error'
   onClearToast: () => void
+  
+  // Optional Explore content
+  explore?: React.ReactNode
+  
+  // Optional Me content
+  me?: React.ReactNode
 }
 
 const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
+  const isMobile = useIsMobile()
+  const sidebarRef = useRef<HTMLDivElement>(null)
+  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
+  const scrollDirection = useScrollDirection({ 
+    threshold: 10, 
+    enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed
+  })
+  const showMobileButtons = scrollDirection !== 'down'
+
+  // Lock body scroll when mobile sidebar or highlights is open
+  useEffect(() => {
+    if (isMobile && (props.isSidebarOpen || !props.isHighlightsCollapsed)) {
+      document.body.classList.add('mobile-sidebar-open')
+    } else {
+      document.body.classList.remove('mobile-sidebar-open')
+    }
+    
+    return () => {
+      document.body.classList.remove('mobile-sidebar-open')
+    }
+  }, [isMobile, props.isSidebarOpen, props.isHighlightsCollapsed])
+
+  // Handle ESC key to close sidebar or highlights
+  useEffect(() => {
+    const { isSidebarOpen, isHighlightsCollapsed, onToggleSidebar, onToggleHighlightsPanel } = props
+    
+    if (!isMobile) return
+    if (!isSidebarOpen && isHighlightsCollapsed) return
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (isSidebarOpen) {
+          onToggleSidebar()
+        } else if (!isHighlightsCollapsed) {
+          onToggleHighlightsPanel()
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [isMobile, props])
+
+  // Trap focus in sidebar when open on mobile
+  useEffect(() => {
+    if (!isMobile || !props.isSidebarOpen || !sidebarRef.current) return
+
+    const sidebar = sidebarRef.current
+    const focusableElements = sidebar.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+
+    const handleTab = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault()
+          lastElement?.focus()
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault()
+          firstElement?.focus()
+        }
+      }
+    }
+
+    sidebar.addEventListener('keydown', handleTab)
+    firstElement?.focus()
+
+    return () => {
+      sidebar.removeEventListener('keydown', handleTab)
+    }
+  }, [isMobile, props.isSidebarOpen])
+
+  // Trap focus in highlights panel when open on mobile
+  useEffect(() => {
+    if (!isMobile || props.isHighlightsCollapsed || !highlightsRef.current) return
+
+    const highlights = highlightsRef.current
+    const focusableElements = highlights.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+
+    const handleTab = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault()
+          lastElement?.focus()
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault()
+          firstElement?.focus()
+        }
+      }
+    }
+
+    highlights.addEventListener('keydown', handleTab)
+    firstElement?.focus()
+
+    return () => {
+      highlights.removeEventListener('keydown', handleTab)
+    }
+  }, [isMobile, props.isHighlightsCollapsed])
+
+  const handleBackdropClick = () => {
+    if (isMobile) {
+      if (props.isSidebarOpen) {
+        props.onToggleSidebar()
+      } else if (!props.isHighlightsCollapsed) {
+        props.onToggleHighlightsPanel()
+      }
+    }
+  }
+
   return (
     <>
+      {/* Mobile bookmark button - only show when viewing article (not on settings/explore/me) */}
+      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && (
+        <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'
+          }`}
+          style={{
+            top: 'calc(1rem + env(safe-area-inset-top))',
+            left: 'calc(1rem + env(safe-area-inset-left))',
+            width: '40px',
+            height: '40px'
+          }}
+          onClick={props.onToggleSidebar}
+          aria-label="Open bookmarks"
+          aria-expanded={props.isSidebarOpen}
+        >
+          <FontAwesomeIcon icon={faBookmark} size="sm" />
+        </button>
+      )}
+
+      {/* Mobile highlights button - only show when viewing article (not on settings/explore/me) */}
+      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && (
+        <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'
+          }`}
+          style={{ 
+            top: 'calc(1rem + env(safe-area-inset-top))',
+            right: 'calc(1rem + env(safe-area-inset-right))',
+            width: '40px',
+            height: '40px',
+            backgroundColor: `${props.settings.highlightColorMine || '#fde047'}B3`,
+            color: '#000'
+          }}
+          onClick={props.onToggleHighlightsPanel}
+          aria-label="Open highlights"
+          aria-expanded={!props.isHighlightsCollapsed}
+        >
+          <FontAwesomeIcon icon={faHighlighter} size="sm" />
+        </button>
+      )}
+
+      {/* Mobile backdrop */}
+      {isMobile && (
+        <div
+          className={`fixed inset-0 bg-black/45 z-[999] transition-opacity duration-300 ${
+            (props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'block opacity-100' : 'hidden opacity-0'
+          }`}
+          onClick={handleBackdropClick}
+          aria-hidden="true"
+        />
+      )}
+
       <div className={`three-pane ${props.isCollapsed ? 'sidebar-collapsed' : ''} ${props.isHighlightsCollapsed ? 'highlights-collapsed' : ''}`}>
-        <div className="pane sidebar">
+        <div 
+          ref={sidebarRef}
+          className={`pane sidebar ${isMobile && props.isSidebarOpen ? 'mobile-open' : ''}`}
+          aria-hidden={isMobile && !props.isSidebarOpen}
+        >
           <BookmarkList 
             bookmarks={props.bookmarks}
             onSelectUrl={props.onSelectUrl}
-            isCollapsed={props.isCollapsed}
+            isCollapsed={isMobile ? false : props.isCollapsed}
             onToggleCollapse={props.onToggleSidebar}
             onLogout={props.onLogout}
             viewMode={props.viewMode}
@@ -85,16 +292,34 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             onOpenSettings={props.onOpenSettings}
             onRefresh={props.onRefresh}
             isRefreshing={props.isRefreshing}
+            lastFetchTime={props.lastFetchTime}
             loading={props.bookmarksLoading}
+            relayPool={props.relayPool}
+            settings={props.settings}
+            isMobile={isMobile}
           />
         </div>
-        <div className="pane main">
+        <div 
+          ref={mainPaneRef}
+          className={`pane main ${isMobile && (props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'mobile-hidden' : ''}`}
+        >
           {props.showSettings ? (
             <Settings 
               settings={props.settings}
               onSave={props.onSaveSettings}
               onClose={props.onCloseSettings}
+              relayPool={props.relayPool}
             />
+          ) : props.showExplore && props.explore ? (
+            // Render Explore inside the main pane to keep side panels
+            <>
+              {props.explore}
+            </>
+          ) : props.showMe && props.me ? (
+            // Render Me inside the main pane to keep side panels
+            <>
+              {props.me}
+            </>
           ) : (
             <ContentPanel 
               loading={props.readerLoading}
@@ -102,6 +327,8 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               html={props.readerContent?.html}
               markdown={props.readerContent?.markdown}
               image={props.readerContent?.image}
+              summary={props.readerContent?.summary}
+              published={props.readerContent?.published}
               selectedUrl={props.selectedUrl}
               highlights={props.classifiedHighlights}
               showHighlights={props.showHighlights}
@@ -114,10 +341,20 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               onClearSelection={props.onClearSelection}
               currentUserPubkey={props.currentUserPubkey}
               followedPubkeys={props.followedPubkeys}
+              settings={props.settings}
+              relayPool={props.relayPool}
+              activeAccount={props.activeAccount}
+              currentArticle={props.currentArticle}
+              isSidebarCollapsed={props.isCollapsed}
+              isHighlightsCollapsed={props.isHighlightsCollapsed}
             />
           )}
         </div>
-        <div className="pane highlights">
+        <div 
+          ref={highlightsRef}
+          className={`pane highlights ${isMobile && !props.isHighlightsCollapsed ? 'mobile-open' : ''}`}
+          aria-hidden={isMobile && props.isHighlightsCollapsed}
+        >
           <HighlightsPanel
             highlights={props.highlights}
             loading={props.highlightsLoading}
@@ -133,6 +370,9 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             highlightVisibility={props.highlightVisibility}
             onHighlightVisibilityChange={props.onHighlightVisibilityChange}
             followedPubkeys={props.followedPubkeys}
+            relayPool={props.relayPool}
+            eventStore={props.eventStore}
+            settings={props.settings}
           />
         </div>
       </div>
@@ -140,9 +380,13 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
         <HighlightButton 
           ref={props.highlightButtonRef} 
           onHighlight={props.onCreateHighlight}
-          highlightColor={props.settings.highlightColor || '#ffff00'}
+          highlightColor={props.settings.highlightColorMine || '#ffff00'}
         />
       )}
+      <RelayStatusIndicator 
+        relayPool={props.relayPool}
+        showOnMobile={showMobileButtons}
+      />
       {props.toastMessage && (
         <Toast
           message={props.toastMessage}

src/config/nostrGateways.ts

@@ -0,0 +1,34 @@
+/**
+ * Nostr gateway URLs for viewing events and profiles on the web
+ */
+
+export const NOSTR_GATEWAY = 'https://ants.sh' as const
+
+/**
+ * Get a profile URL on the gateway
+ */
+export function getProfileUrl(npub: string): string {
+  return `${NOSTR_GATEWAY}/p/${npub}`
+}
+
+/**
+ * Get an event URL on the gateway
+ */
+export function getEventUrl(nevent: string): string {
+  return `${NOSTR_GATEWAY}/e/${nevent}`
+}
+
+/**
+ * Get a general nostr link on the gateway
+ * 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}`
+}
+

src/config/relays.ts

@@ -3,9 +3,10 @@
  * Single set of relays used throughout the application
  */
 
-// All relays including local relay
+// All relays including local relays
 export const RELAYS = [
   'ws://localhost:10547',
+  'ws://localhost:4869',
   'wss://relay.damus.io',
   'wss://nos.lol',
   'wss://relay.nostr.band',

src/hooks/useArticleLoader.ts

@@ -5,6 +5,7 @@ import { fetchHighlightsForArticle } from '../services/highlightService'
 import { ReadableContent } from '../services/readerService'
 import { Highlight } from '../types/highlights'
 import { NostrEvent } from 'nostr-tools'
+import { UserSettings } from '../services/settingsService'
 
 interface UseArticleLoaderProps {
   naddr: string | undefined
@@ -18,6 +19,7 @@ interface UseArticleLoaderProps {
   setCurrentArticleCoordinate: (coord: string | undefined) => void
   setCurrentArticleEventId: (id: string | undefined) => void
   setCurrentArticle?: (article: NostrEvent) => void
+  settings?: UserSettings
 }
 
 export function useArticleLoader({
@@ -31,7 +33,8 @@ export function useArticleLoader({
   setHighlightsLoading,
   setCurrentArticleCoordinate,
   setCurrentArticleEventId,
-  setCurrentArticle
+  setCurrentArticle,
+  settings
 }: UseArticleLoaderProps) {
   useEffect(() => {
     if (!relayPool || !naddr) return
@@ -44,11 +47,13 @@ export function useArticleLoader({
       // Keep highlights panel collapsed by default - only open on user interaction
       
       try {
-        const article = await fetchArticleByNaddr(relayPool, naddr)
+        const article = await fetchArticleByNaddr(relayPool, naddr, false, settings)
         setReaderContent({
           title: article.title,
           markdown: article.markdown,
           image: article.image,
+          summary: article.summary,
+          published: article.published,
           url: `nostr:${naddr}`
         })
         
@@ -71,19 +76,23 @@ export function useArticleLoader({
         try {
           setHighlightsLoading(true)
           setHighlights([]) // Clear old highlights
-          const highlightsList: Highlight[] = []
+          const highlightsMap = new Map<string, Highlight>()
           
           await fetchHighlightsForArticle(
             relayPool, 
             articleCoordinate, 
             article.event.id,
             (highlight) => {
-              // Render each highlight immediately as it arrives
-              highlightsList.push(highlight)
-              setHighlights([...highlightsList].sort((a, b) => b.created_at - a.created_at))
-            }
+              // Deduplicate highlights by ID as they arrive
+              if (!highlightsMap.has(highlight.id)) {
+                highlightsMap.set(highlight.id, highlight)
+                const highlightsList = Array.from(highlightsMap.values())
+                setHighlights(highlightsList.sort((a, b) => b.created_at - a.created_at))
+              }
+            },
+            settings
           )
-          console.log(`📌 Found ${highlightsList.length} highlights`)
+          console.log(`📌 Found ${highlightsMap.size} highlights`)
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
@@ -101,5 +110,5 @@ export function useArticleLoader({
     }
     
     loadArticle()
-  }, [naddr, relayPool, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId, setCurrentArticle])
+  }, [naddr, relayPool, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId, setCurrentArticle, settings])
 }

src/hooks/useBookmarksData.ts

@@ -5,6 +5,7 @@ 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'
 
 interface UseBookmarksDataParams {
   relayPool: RelayPool | null
@@ -15,6 +16,7 @@ interface UseBookmarksDataParams {
   naddr?: string
   currentArticleCoordinate?: string
   currentArticleEventId?: string
+  settings?: UserSettings
 }
 
 export const useBookmarksData = ({
@@ -23,7 +25,8 @@ export const useBookmarksData = ({
   accountManager,
   naddr,
   currentArticleCoordinate,
-  currentArticleEventId
+  currentArticleEventId,
+  settings
 }: UseBookmarksDataParams) => {
   const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
   const [bookmarksLoading, setBookmarksLoading] = useState(true)
@@ -31,6 +34,7 @@ export const useBookmarksData = ({
   const [highlightsLoading, setHighlightsLoading] = useState(true)
   const [followedPubkeys, setFollowedPubkeys] = useState<Set<string>>(new Set())
   const [isRefreshing, setIsRefreshing] = useState(false)
+  const [lastFetchTime, setLastFetchTime] = useState<number | null>(null)
 
   const handleFetchContacts = useCallback(async () => {
     if (!relayPool || !activeAccount) return
@@ -40,14 +44,18 @@ export const useBookmarksData = ({
 
   const handleFetchBookmarks = useCallback(async () => {
     if (!relayPool || !activeAccount) return
+    // don't clear existing bookmarks: we keep UI stable and show spinner unobtrusively
     setBookmarksLoading(true)
     try {
       const fullAccount = accountManager.getActive()
-      await fetchBookmarks(relayPool, fullAccount || activeAccount, setBookmarks)
+      // merge-friendly: updater form that preserves visible list until replacement
+      await fetchBookmarks(relayPool, fullAccount || activeAccount, (next) => {
+        setBookmarks(() => next)
+      }, settings)
     } finally {
       setBookmarksLoading(false)
     }
-  }, [relayPool, activeAccount, accountManager])
+  }, [relayPool, activeAccount, accountManager, settings])
 
   const handleFetchHighlights = useCallback(async () => {
     if (!relayPool) return
@@ -55,19 +63,24 @@ export const useBookmarksData = ({
     setHighlightsLoading(true)
     try {
       if (currentArticleCoordinate) {
-        const highlightsList: Highlight[] = []
+        const highlightsMap = new Map<string, Highlight>()
         await fetchHighlightsForArticle(
           relayPool, 
           currentArticleCoordinate, 
           currentArticleEventId,
           (highlight) => {
-            highlightsList.push(highlight)
-            setHighlights([...highlightsList].sort((a, b) => b.created_at - a.created_at))
-          }
+            // Deduplicate highlights by ID as they arrive
+            if (!highlightsMap.has(highlight.id)) {
+              highlightsMap.set(highlight.id, highlight)
+              const highlightsList = Array.from(highlightsMap.values())
+              setHighlights(highlightsList.sort((a, b) => b.created_at - a.created_at))
+            }
+          },
+          settings
         )
-        console.log(`🔄 Refreshed ${highlightsList.length} highlights for article`)
+        console.log(`🔄 Refreshed ${highlightsMap.size} highlights for article`)
       } else if (activeAccount) {
-        const fetchedHighlights = await fetchHighlights(relayPool, activeAccount.pubkey)
+        const fetchedHighlights = await fetchHighlights(relayPool, activeAccount.pubkey, undefined, settings)
         setHighlights(fetchedHighlights)
       }
     } catch (err) {
@@ -75,7 +88,7 @@ export const useBookmarksData = ({
     } finally {
       setHighlightsLoading(false)
     }
-  }, [relayPool, activeAccount, currentArticleCoordinate, currentArticleEventId])
+  }, [relayPool, activeAccount, currentArticleCoordinate, currentArticleEventId, settings])
 
   const handleRefreshAll = useCallback(async () => {
     if (!relayPool || !activeAccount || isRefreshing) return
@@ -85,6 +98,7 @@ export const useBookmarksData = ({
       await handleFetchBookmarks()
       await handleFetchHighlights()
       await handleFetchContacts()
+      setLastFetchTime(Date.now())
     } catch (err) {
       console.error('Failed to refresh data:', err)
     } finally {
@@ -92,15 +106,21 @@ export const useBookmarksData = ({
     }
   }, [relayPool, activeAccount, isRefreshing, handleFetchBookmarks, handleFetchHighlights, handleFetchContacts])
 
-  // Load initial data
+  // Load initial data (avoid clearing on route-only changes)
   useEffect(() => {
     if (!relayPool || !activeAccount) return
+    // Only (re)fetch bookmarks when account or relayPool changes, not on naddr route changes
     handleFetchBookmarks()
+  }, [relayPool, activeAccount, handleFetchBookmarks])
+
+  // Fetch highlights/contacts independently to avoid disturbing bookmarks
+  useEffect(() => {
+    if (!relayPool || !activeAccount) return
     if (!naddr) {
       handleFetchHighlights()
     }
     handleFetchContacts()
-  }, [relayPool, activeAccount?.pubkey, naddr, handleFetchBookmarks, handleFetchHighlights, handleFetchContacts])
+  }, [relayPool, activeAccount, naddr, handleFetchHighlights, handleFetchContacts])
 
   return {
     bookmarks,
@@ -111,6 +131,7 @@ export const useBookmarksData = ({
     setHighlightsLoading,
     followedPubkeys,
     isRefreshing,
+    lastFetchTime,
     handleFetchBookmarks,
     handleFetchHighlights,
     handleRefreshAll

src/hooks/useBookmarksUI.ts

@@ -3,18 +3,20 @@ import { NostrEvent } from 'nostr-tools'
 import { HighlightVisibility } from '../components/HighlightsPanel'
 import { UserSettings } from '../services/settingsService'
 import { ViewMode } from '../components/Bookmarks'
+import { useIsMobile } from './useMediaQuery'
 
 interface UseBookmarksUIParams {
   settings: UserSettings
 }
 
 export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
+  const isMobile = useIsMobile()
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
   const [isCollapsed, setIsCollapsed] = useState(true)
   const [isHighlightsCollapsed, setIsHighlightsCollapsed] = useState(true)
   const [viewMode, setViewMode] = useState<ViewMode>('compact')
   const [showHighlights, setShowHighlights] = useState(true)
   const [selectedHighlightId, setSelectedHighlightId] = useState<string | undefined>(undefined)
-  const [showSettings, setShowSettings] = useState(false)
   const [currentArticleCoordinate, setCurrentArticleCoordinate] = useState<string | undefined>(undefined)
   const [currentArticleEventId, setCurrentArticleEventId] = useState<string | undefined>(undefined)
   const [currentArticle, setCurrentArticle] = useState<NostrEvent | undefined>(undefined)
@@ -24,6 +26,16 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
     mine: true
   })
 
+  // Auto-collapse sidebar on mobile based on settings
+  useEffect(() => {
+    const autoCollapse = settings.autoCollapseSidebarOnMobile !== false
+    if (isMobile && autoCollapse) {
+      setIsSidebarOpen(false)
+    } else if (!isMobile) {
+      setIsSidebarOpen(true)
+    }
+  }, [isMobile, settings.autoCollapseSidebarOnMobile])
+
   // Apply UI settings
   useEffect(() => {
     if (settings.defaultViewMode) setViewMode(settings.defaultViewMode)
@@ -35,7 +47,15 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
     })
   }, [settings])
 
+  const toggleSidebar = () => {
+    setIsSidebarOpen(prev => !prev)
+  }
+
   return {
+    isMobile,
+    isSidebarOpen,
+    setIsSidebarOpen,
+    toggleSidebar,
     isCollapsed,
     setIsCollapsed,
     isHighlightsCollapsed,
@@ -46,8 +66,6 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
     setShowHighlights,
     selectedHighlightId,
     setSelectedHighlightId,
-    showSettings,
-    setShowSettings,
     currentArticleCoordinate,
     setCurrentArticleCoordinate,
     currentArticleEventId,

src/hooks/useExternalUrlLoader.ts

@@ -4,6 +4,19 @@ import { fetchReadableContent, ReadableContent } from '../services/readerService
 import { fetchHighlightsForUrl } from '../services/highlightService'
 import { Highlight } from '../types/highlights'
 
+// Helper to extract filename from URL
+function getFilenameFromUrl(url: string): string {
+  try {
+    const urlObj = new URL(url)
+    const pathname = urlObj.pathname
+    const filename = pathname.substring(pathname.lastIndexOf('/') + 1)
+    // Decode URI component to handle special characters
+    return decodeURIComponent(filename) || url
+  } catch {
+    return url
+  }
+}
+
 interface UseExternalUrlLoaderProps {
   url: string | undefined
   relayPool: RelayPool | null
@@ -11,7 +24,7 @@ interface UseExternalUrlLoaderProps {
   setReaderContent: (content: ReadableContent | undefined) => void
   setReaderLoading: (loading: boolean) => void
   setIsCollapsed: (collapsed: boolean) => void
-  setHighlights: (highlights: Highlight[]) => void
+  setHighlights: (highlights: Highlight[] | ((prev: Highlight[]) => Highlight[])) => void
   setHighlightsLoading: (loading: boolean) => void
   setCurrentArticleCoordinate: (coord: string | undefined) => void
   setCurrentArticleEventId: (id: string | undefined) => void
@@ -57,7 +70,21 @@ export function useExternalUrlLoader({
           
           // Check if fetchHighlightsForUrl exists, otherwise skip
           if (typeof fetchHighlightsForUrl === 'function') {
-            const highlightsList = await fetchHighlightsForUrl(relayPool, url)
+            const seen = new Set<string>()
+            const highlightsList = await fetchHighlightsForUrl(
+              relayPool,
+              url,
+              (highlight) => {
+                if (seen.has(highlight.id)) return
+                seen.add(highlight.id)
+                setHighlights((prev) => {
+                  if (prev.some(h => h.id === highlight.id)) return prev
+                  const next = [...prev, highlight]
+                  return next.sort((a, b) => b.created_at - a.created_at)
+                })
+              }
+            )
+            // 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`)
           } else {
@@ -70,8 +97,10 @@ export function useExternalUrlLoader({
         }
       } catch (err) {
         console.error('Failed to load external URL:', err)
+        // For videos and other media files, use the filename as the title
+        const filename = getFilenameFromUrl(url)
         setReaderContent({
-          title: 'Error Loading Content',
+          title: filename,
           html: `<p>Failed to load content: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
           url
         })

src/hooks/useHighlightCreation.ts

@@ -1,9 +1,11 @@
 import { useCallback, useRef } from 'react'
+import { flushSync } from 'react-dom'
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
 import { Highlight } from '../types/highlights'
 import { ReadableContent } from '../services/readerService'
-import { createHighlight, eventToHighlight } from '../services/highlightCreationService'
+import { createHighlight } from '../services/highlightCreationService'
 import { HighlightButtonRef } from '../components/HighlightButton'
 import { UserSettings } from '../services/settingsService'
 
@@ -11,6 +13,7 @@ interface UseHighlightCreationParams {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   activeAccount: any
   relayPool: RelayPool | null
+  eventStore: IEventStore | null
   currentArticle: NostrEvent | undefined
   selectedUrl: string | undefined
   readerContent: ReadableContent | undefined
@@ -21,6 +24,7 @@ interface UseHighlightCreationParams {
 export const useHighlightCreation = ({
   activeAccount,
   relayPool,
+  eventStore,
   currentArticle,
   selectedUrl,
   readerContent,
@@ -38,7 +42,7 @@ export const useHighlightCreation = ({
   }, [])
 
   const handleCreateHighlight = useCallback(async (text: string) => {
-    if (!activeAccount || !relayPool) {
+    if (!activeAccount || !relayPool || !eventStore) {
       console.error('Missing requirements for highlight creation')
       return
     }
@@ -54,25 +58,44 @@ export const useHighlightCreation = ({
         ? currentArticle.content 
         : readerContent?.markdown || readerContent?.html
       
-      const signedEvent = await createHighlight(
+      console.log('🎯 Creating highlight...', { text: text.substring(0, 50) + '...' })
+      
+      const newHighlight = await createHighlight(
         text,
         source,
         activeAccount,
         relayPool,
+        eventStore,
         contentForContext,
         undefined,
         settings
       )
       
-      console.log('✅ Highlight created successfully!')
+      console.log('✅ Highlight created successfully!', {
+        id: newHighlight.id,
+        isLocalOnly: newHighlight.isLocalOnly,
+        isOfflineCreated: newHighlight.isOfflineCreated,
+        publishedRelays: newHighlight.publishedRelays
+      })
+      
+      // Clear the browser's text selection immediately to allow DOM update
+      const selection = window.getSelection()
+      if (selection) {
+        selection.removeAllRanges()
+      }
+      
       highlightButtonRef.current?.clearSelection()
       
-      const newHighlight = eventToHighlight(signedEvent)
-      onHighlightCreated(newHighlight)
+      // Force synchronous render to show highlight immediately
+      flushSync(() => {
+        onHighlightCreated(newHighlight)
+      })
     } catch (error) {
-      console.error('Failed to create highlight:', error)
+      console.error('❌ Failed to create highlight:', error)
+      // Re-throw to allow parent to handle
+      throw error
     }
-  }, [activeAccount, relayPool, currentArticle, selectedUrl, readerContent, onHighlightCreated, settings])
+  }, [activeAccount, relayPool, eventStore, currentArticle, selectedUrl, readerContent, onHighlightCreated, settings])
 
   return {
     highlightButtonRef,

src/hooks/useHighlightInteractions.ts

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useRef } from 'react'
+import { useEffect, useCallback, useRef, useState } from 'react'
 
 interface UseHighlightInteractionsParams {
   onHighlightClick?: (highlightId: string) => void
@@ -14,6 +14,25 @@ export const useHighlightInteractions = ({
   onClearSelection
 }: UseHighlightInteractionsParams) => {
   const contentRef = useRef<HTMLDivElement>(null)
+  const [contentVersion, setContentVersion] = useState(0)
+
+  // Watch for DOM changes (highlights being added/removed)
+  useEffect(() => {
+    if (!contentRef.current) return
+    
+    const observer = new MutationObserver(() => {
+      // Increment version to trigger re-attachment of handlers
+      setContentVersion(prev => prev + 1)
+    })
+    
+    observer.observe(contentRef.current, {
+      childList: true,
+      subtree: true,
+      characterData: false
+    })
+    
+    return () => observer.disconnect()
+  }, [])
 
   // Attach click handlers to highlight marks
   useEffect(() => {
@@ -37,27 +56,36 @@ export const useHighlightInteractions = ({
         mark.removeEventListener('click', handler)
       })
     }
-  }, [onHighlightClick])
+  }, [onHighlightClick, contentVersion])
 
   // Scroll to selected highlight
   useEffect(() => {
     if (!selectedHighlightId || !contentRef.current) return
     
-    const markElement = contentRef.current.querySelector(`mark[data-highlight-id="${selectedHighlightId}"]`)
-    
-    if (markElement) {
-      markElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    // Use a small delay to ensure DOM is updated
+    const timeoutId = setTimeout(() => {
+      if (!contentRef.current) return
       
-      const htmlElement = markElement as HTMLElement
-      setTimeout(() => {
-        htmlElement.classList.add('highlight-pulse')
-        setTimeout(() => htmlElement.classList.remove('highlight-pulse'), 1500)
-      }, 500)
-    }
-  }, [selectedHighlightId])
+      const markElement = contentRef.current.querySelector(`mark[data-highlight-id="${selectedHighlightId}"]`)
+      
+      if (markElement) {
+        markElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        
+        const htmlElement = markElement as HTMLElement
+        setTimeout(() => {
+          htmlElement.classList.add('highlight-pulse')
+          setTimeout(() => htmlElement.classList.remove('highlight-pulse'), 1500)
+        }, 500)
+      } else {
+        console.warn('Could not find mark element for highlight:', selectedHighlightId)
+      }
+    }, 100)
+    
+    return () => clearTimeout(timeoutId)
+  }, [selectedHighlightId, contentVersion])
 
-  // Handle text selection
-  const handleMouseUp = useCallback(() => {
+  // Handle text selection (works for both mouse and touch)
+  const handleSelectionEnd = useCallback(() => {
     setTimeout(() => {
       const selection = window.getSelection()
       if (!selection || selection.rangeCount === 0) {
@@ -76,6 +104,6 @@ export const useHighlightInteractions = ({
     }, 10)
   }, [onTextSelection, onClearSelection])
 
-  return { contentRef, handleMouseUp }
+  return { contentRef, handleSelectionEnd }
 }
 

src/hooks/useImageCache.ts

@@ -0,0 +1,34 @@
+import { UserSettings } from '../services/settingsService'
+
+/**
+ * Hook to return image URL for display
+ * Service Worker handles all caching transparently
+ * Images are cached on first load and available offline automatically
+ * 
+ * @param imageUrl - The URL of the image to display
+ * @returns The image URL (Service Worker handles caching)
+ */
+export function useImageCache(
+  imageUrl: string | undefined,
+  // eslint-disable-next-line no-unused-vars
+  _settings?: UserSettings
+): string | undefined {
+  // Service Worker handles everything - just return the URL as-is
+  return imageUrl
+}
+
+/**
+ * Pre-load image to ensure it's cached by Service Worker
+ * 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
+): void {
+  // Service Worker will cache on first fetch
+  // This hook is now a no-op, kept for API compatibility
+  // The browser will automatically fetch and cache images when they're used in <img> tags
+  void imageUrl
+}
+

src/hooks/useMarkdownToHTML.ts

@@ -1,34 +1,86 @@
 import React, { useState, useEffect, useRef } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { extractNaddrUris, replaceNostrUrisInMarkdown, replaceNostrUrisInMarkdownWithTitles } from '../utils/nostrUriResolver'
+import { fetchArticleTitles } from '../services/articleTitleResolver'
 
 /**
  * Hook to convert markdown to HTML using a hidden ReactMarkdown component
+ * Also processes nostr: URIs in the markdown and resolves article titles
  */
-export const useMarkdownToHTML = (markdown?: string): { renderedHtml: string, previewRef: React.RefObject<HTMLDivElement> } => {
+export const useMarkdownToHTML = (
+  markdown?: string,
+  relayPool?: RelayPool | null
+): { 
+  renderedHtml: string
+  previewRef: React.RefObject<HTMLDivElement>
+  processedMarkdown: string 
+} => {
   const previewRef = useRef<HTMLDivElement>(null)
   const [renderedHtml, setRenderedHtml] = useState<string>('')
+  const [processedMarkdown, setProcessedMarkdown] = useState<string>('')
 
   useEffect(() => {
     if (!markdown) {
       setRenderedHtml('')
+      setProcessedMarkdown('')
       return
     }
 
-    console.log('📝 Converting markdown to HTML...')
-    
-    const rafId = requestAnimationFrame(() => {
-      if (previewRef.current) {
-        const html = previewRef.current.innerHTML
-        console.log('✅ Markdown converted to HTML:', html.length, 'chars')
-        setRenderedHtml(html)
+    let isCancelled = false
+
+    const processMarkdown = async () => {
+      // Extract all naddr references
+      const naddrs = extractNaddrUris(markdown)
+      
+      let processed: string
+      
+      if (naddrs.length > 0 && relayPool) {
+        // Fetch article titles for all naddrs
+        try {
+          const articleTitles = await fetchArticleTitles(relayPool, naddrs)
+          
+          if (isCancelled) return
+          
+          // Replace nostr URIs with resolved titles
+          processed = replaceNostrUrisInMarkdownWithTitles(markdown, articleTitles)
+          console.log(`📚 Resolved ${articleTitles.size} article titles`)
+        } catch (error) {
+          console.warn('Failed to fetch article titles:', error)
+          // Fall back to basic replacement
+          processed = replaceNostrUrisInMarkdown(markdown)
+        }
       } else {
-        console.warn('⚠️ markdownPreviewRef.current is null')
+        // No articles to resolve, use basic replacement
+        processed = replaceNostrUrisInMarkdown(markdown)
       }
-    })
+      
+      if (isCancelled) return
+      
+      setProcessedMarkdown(processed)
 
-    return () => cancelAnimationFrame(rafId)
-  }, [markdown])
+      console.log('📝 Converting markdown to HTML...')
+      
+      const rafId = requestAnimationFrame(() => {
+        if (previewRef.current && !isCancelled) {
+          const html = previewRef.current.innerHTML
+          console.log('✅ Markdown converted to HTML:', html.length, 'chars')
+          setRenderedHtml(html)
+        } else if (!isCancelled) {
+          console.warn('⚠️ markdownPreviewRef.current is null')
+        }
+      })
 
-  return { renderedHtml, previewRef }
+      return () => cancelAnimationFrame(rafId)
+    }
+
+    processMarkdown()
+
+    return () => {
+      isCancelled = true
+    }
+  }, [markdown, relayPool])
+
+  return { renderedHtml, previewRef, processedMarkdown }
 }
 
 // Removed separate useMarkdownPreviewRef; use useMarkdownToHTML to obtain previewRef

src/hooks/useMediaQuery.ts

@@ -0,0 +1,62 @@
+import { useState, useEffect } from 'react'
+
+/**
+ * Hook to detect if a media query matches
+ * @param query The media query string (e.g., '(max-width: 768px)')
+ * @returns true if the media query matches, false otherwise
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === 'undefined') return false
+    return window.matchMedia(query).matches
+  })
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const mediaQuery = window.matchMedia(query)
+    
+    // Update state if the media query changes
+    const handleChange = (event: MediaQueryListEvent) => {
+      setMatches(event.matches)
+    }
+
+    // Modern browsers
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange)
+      return () => mediaQuery.removeEventListener('change', handleChange)
+    } 
+    // Legacy browsers
+    else {
+      mediaQuery.addListener(handleChange)
+      return () => mediaQuery.removeListener(handleChange)
+    }
+  }, [query])
+
+  return matches
+}
+
+/**
+ * Hook to detect if the user is on a coarse pointer device (touch)
+ * @returns true if the user is using a coarse pointer (touch), false otherwise
+ */
+export function useIsCoarsePointer(): boolean {
+  return useMediaQuery('(pointer: coarse)')
+}
+
+/**
+ * Hook to detect if the viewport is mobile-sized
+ * @returns true if viewport width is <= 768px, false otherwise
+ */
+export function useIsMobile(): boolean {
+  return useMediaQuery('(max-width: 768px)')
+}
+
+/**
+ * Hook to detect if the viewport is tablet-sized
+ * @returns true if viewport width is <= 1024px, false otherwise
+ */
+export function useIsTablet(): boolean {
+  return useMediaQuery('(max-width: 1024px)')
+}
+

src/hooks/useOfflineSync.ts

@@ -0,0 +1,70 @@
+import { useEffect, useRef } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { IEventStore } from 'applesauce-core'
+import { syncLocalEventsToRemote } from '../services/offlineSyncService'
+import { isLocalRelay } from '../utils/helpers'
+import { RelayStatus } from '../services/relayStatusService'
+
+interface UseOfflineSyncParams {
+  relayPool: RelayPool | null
+  account: IAccount | null
+  eventStore: IEventStore | null
+  relayStatuses: RelayStatus[]
+  enabled?: boolean
+}
+
+export function useOfflineSync({
+  relayPool,
+  account: _account,
+  eventStore,
+  relayStatuses,
+  enabled = true
+}: UseOfflineSyncParams) {
+  const previousStateRef = useRef<{
+    hasRemoteRelays: boolean
+    initialized: boolean
+  }>({
+    hasRemoteRelays: false,
+    initialized: false
+  })
+
+  useEffect(() => {
+    if (!enabled || !relayPool || !_account || !eventStore) return
+
+    const connectedRelays = relayStatuses.filter(r => r.isInPool)
+    const hasRemoteRelays = connectedRelays.some(r => !isLocalRelay(r.url))
+    const hasLocalRelays = connectedRelays.some(r => isLocalRelay(r.url))
+
+    // Skip the first check to avoid syncing on initial load
+    if (!previousStateRef.current.initialized) {
+      previousStateRef.current = {
+        hasRemoteRelays,
+        initialized: true
+      }
+      return
+    }
+
+    // Detect transition: from local-only to having remote relays
+    const wasLocalOnly = !previousStateRef.current.hasRemoteRelays && hasLocalRelays
+    const isNowOnline = hasRemoteRelays
+
+    if (wasLocalOnly && isNowOnline) {
+      console.log('✈️ Detected transition: Flight Mode → Online')
+      console.log('📊 Relay state:', {
+        connectedRelays: connectedRelays.length,
+        remoteRelays: connectedRelays.filter(r => !isLocalRelay(r.url)).length,
+        localRelays: connectedRelays.filter(r => isLocalRelay(r.url)).length
+      })
+      
+      // Wait a moment for relays to fully establish connections
+      setTimeout(() => {
+        console.log('🚀 Starting sync after delay...')
+        syncLocalEventsToRemote(relayPool, eventStore)
+      }, 2000)
+    }
+
+    previousStateRef.current.hasRemoteRelays = hasRemoteRelays
+  }, [relayPool, _account, eventStore, relayStatuses, enabled])
+}
+

src/hooks/useOnlineStatus.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react'
+
+export function useOnlineStatus() {
+  const [isOnline, setIsOnline] = useState(navigator.onLine)
+
+  useEffect(() => {
+    const handleOnline = () => {
+      console.log('🌐 Back online')
+      setIsOnline(true)
+    }
+
+    const handleOffline = () => {
+      console.log('📴 Gone offline')
+      setIsOnline(false)
+    }
+
+    window.addEventListener('online', handleOnline)
+    window.addEventListener('offline', handleOffline)
+
+    return () => {
+      window.removeEventListener('online', handleOnline)
+      window.removeEventListener('offline', handleOffline)
+    }
+  }, [])
+
+  return isOnline
+}
+

src/hooks/usePWAInstall.ts

@@ -0,0 +1,74 @@
+import { useState, useEffect } from 'react'
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>
+}
+
+export function usePWAInstall() {
+  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null)
+  const [isInstallable, setIsInstallable] = useState(false)
+  const [isInstalled, setIsInstalled] = useState(false)
+
+  useEffect(() => {
+    // Check if app is already installed
+    if (window.matchMedia('(display-mode: standalone)').matches) {
+      setIsInstalled(true)
+      return
+    }
+
+    // Listen for the beforeinstallprompt event
+    const handleBeforeInstallPrompt = (e: Event) => {
+      e.preventDefault()
+      const installPromptEvent = e as BeforeInstallPromptEvent
+      setDeferredPrompt(installPromptEvent)
+      setIsInstallable(true)
+    }
+
+    // Listen for successful installation
+    const handleAppInstalled = () => {
+      setIsInstalled(true)
+      setIsInstallable(false)
+      setDeferredPrompt(null)
+    }
+
+    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+    window.addEventListener('appinstalled', handleAppInstalled)
+
+    return () => {
+      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+      window.removeEventListener('appinstalled', handleAppInstalled)
+    }
+  }, [])
+
+  const installApp = async () => {
+    if (!deferredPrompt) {
+      return false
+    }
+
+    try {
+      await deferredPrompt.prompt()
+      const choiceResult = await deferredPrompt.userChoice
+      
+      if (choiceResult.outcome === 'accepted') {
+        console.log('✅ PWA installed')
+        setIsInstallable(false)
+        setDeferredPrompt(null)
+        return true
+      } else {
+        console.log('❌ PWA installation dismissed')
+        return false
+      }
+    } catch (error) {
+      console.error('Error installing PWA:', error)
+      return false
+    }
+  }
+
+  return {
+    isInstallable,
+    isInstalled,
+    installApp,
+  }
+}
+

src/hooks/usePullToRefresh.ts

@@ -0,0 +1,153 @@
+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

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from 'react'
+
+interface UseReadingPositionOptions {
+  enabled?: boolean
+  onPositionChange?: (position: number) => void
+  onReadingComplete?: () => void
+  readingCompleteThreshold?: number // Default 0.9 (90%)
+}
+
+export const useReadingPosition = ({
+  enabled = true,
+  onPositionChange,
+  onReadingComplete,
+  readingCompleteThreshold = 0.9
+}: UseReadingPositionOptions = {}) => {
+  const [position, setPosition] = useState(0)
+  const [isReadingComplete, setIsReadingComplete] = useState(false)
+  const hasTriggeredComplete = useRef(false)
+
+  useEffect(() => {
+    if (!enabled) return
+
+    const handleScroll = () => {
+      // Get the main content area (reader content)
+      const readerContent = document.querySelector('.reader-html, .reader-markdown')
+      if (!readerContent) return
+
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+      const windowHeight = window.innerHeight
+      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))
+      
+      setPosition(clampedProgress)
+      onPositionChange?.(clampedProgress)
+
+      // Check if reading is complete
+      if (clampedProgress >= readingCompleteThreshold && !hasTriggeredComplete.current) {
+        setIsReadingComplete(true)
+        hasTriggeredComplete.current = true
+        onReadingComplete?.()
+      }
+    }
+
+    // Initial calculation
+    handleScroll()
+
+    // Add scroll listener
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    window.addEventListener('resize', handleScroll, { passive: true })
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('resize', handleScroll)
+    }
+  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold])
+
+  // Reset reading complete state when enabled changes
+  useEffect(() => {
+    if (!enabled) {
+      setIsReadingComplete(false)
+      hasTriggeredComplete.current = false
+    }
+  }, [enabled])
+
+  return {
+    position,
+    isReadingComplete,
+    progressPercentage: Math.round(position * 100)
+  }
+}

src/hooks/useRelayStatus.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { RelayStatus, updateAndGetRelayStatuses } from '../services/relayStatusService'
+
+interface UseRelayStatusParams {
+  relayPool: RelayPool | null
+  pollingInterval?: number // in milliseconds
+}
+
+export function useRelayStatus({ 
+  relayPool, 
+  pollingInterval = 20000 
+}: UseRelayStatusParams) {
+  const [relayStatuses, setRelayStatuses] = useState<RelayStatus[]>([])
+
+  useEffect(() => {
+    if (!relayPool) return
+
+    const updateStatuses = () => {
+      const statuses = updateAndGetRelayStatuses(relayPool)
+      setRelayStatuses(statuses)
+    }
+
+    // Initial update
+    updateStatuses()
+
+    // Poll for updates
+    const interval = setInterval(updateStatuses, pollingInterval)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [relayPool, pollingInterval])
+
+  return relayStatuses
+}
+

src/hooks/useScrollDirection.ts

@@ -0,0 +1,70 @@
+import { useState, useEffect, RefObject } from 'react'
+
+export type ScrollDirection = 'up' | 'down' | 'none'
+
+interface UseScrollDirectionOptions {
+  threshold?: number
+  enabled?: boolean
+  elementRef?: RefObject<HTMLElement>
+}
+
+/**
+ * Hook to detect scroll direction on window or a specific element
+ * @param options Configuration options
+ * @param options.threshold Minimum scroll distance to trigger direction change (default: 10)
+ * @param options.enabled Whether scroll detection is enabled (default: true)
+ * @param options.elementRef Optional ref to a scrollable element (uses window if not provided)
+ * @returns Current scroll direction ('up', 'down', or 'none')
+ */
+export function useScrollDirection({ 
+  threshold = 10, 
+  enabled = true,
+  elementRef
+}: UseScrollDirectionOptions = {}): ScrollDirection {
+  const [scrollDirection, setScrollDirection] = useState<ScrollDirection>('none')
+
+  useEffect(() => {
+    if (!enabled) return
+
+    const scrollElement = elementRef?.current || window
+    const getScrollY = () => {
+      if (elementRef?.current) {
+        return elementRef.current.scrollTop
+      }
+      return window.scrollY
+    }
+
+    let lastScrollY = getScrollY()
+    let ticking = false
+
+    const updateScrollDirection = () => {
+      const scrollY = getScrollY()
+
+      // Only update if scroll distance exceeds threshold
+      if (Math.abs(scrollY - lastScrollY) < threshold) {
+        ticking = false
+        return
+      }
+
+      setScrollDirection(scrollY > lastScrollY ? 'down' : 'up')
+      lastScrollY = scrollY > 0 ? scrollY : 0
+      ticking = false
+    }
+
+    const onScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(updateScrollDirection)
+        ticking = true
+      }
+    }
+
+    scrollElement.addEventListener('scroll', onScroll)
+
+    return () => {
+      scrollElement.removeEventListener('scroll', onScroll)
+    }
+  }, [threshold, enabled, elementRef])
+
+  return scrollDirection
+}
+

src/hooks/useSettings.ts

@@ -58,10 +58,10 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       
       // Apply font settings after font is loaded
       root.setProperty('--reading-font', getFontFamily(fontKey))
-      root.setProperty('--reading-font-size', `${settings.fontSize || 18}px`)
+      root.setProperty('--reading-font-size', `${settings.fontSize || 21}px`)
       
       // Set highlight colors for three levels
-      root.setProperty('--highlight-color-mine', settings.highlightColorMine || '#ffff00')
+      root.setProperty('--highlight-color-mine', settings.highlightColorMine || '#fde047')
       root.setProperty('--highlight-color-friends', settings.highlightColorFriends || '#f97316')
       root.setProperty('--highlight-color-nostrverse', settings.highlightColorNostrverse || '#9333ea')
       

src/icons/books.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M510.354 435.363L402.686 35.422C396.939 14.078 377.547 0 356.354 0C352.242 0 348.059 0.531 343.896 1.641L282.078 18.125C276.193 19.695 270.939 22.383 266.295 25.758C258.254 10.508 242.436 0 224 0H160C151.213 0 143.084 2.531 136 6.656C128.916 2.531 120.787 0 112 0H48C21.49 0 0 21.492 0 48V464C0 490.508 21.49 512 48 512H112C120.787 512 128.916 509.469 136 505.344C143.084 509.469 151.213 512 160 512H224C250.51 512 272 490.508 272 464V165.281L355.805 476.578C361.553 497.926 380.945 512 402.139 512C406.25 512 410.432 511.469 414.594 510.359L476.412 493.875C502.018 487.043 517.215 460.848 510.354 435.363ZM224 48V96H160V48H224ZM160 144H224V368H160V144ZM112 368H48V144H112V368ZM112 48V96H48V48H112ZM48 464V416H112V464H48ZM160 464V416H224V464H160ZM294.445 64.504L356.271 48.02L356.361 48L368.742 93.93L306.828 110.445L294.445 64.504ZM319.266 156.586L381.18 140.074L439.223 355.41L377.309 371.922L319.266 156.586ZM402.154 464.102L389.746 418.066L451.66 401.555L464.045 447.496L402.154 464.102Z"/></svg>

src/icons/customIcons.ts

@@ -0,0 +1,52 @@
+import { IconDefinition, IconPrefix, IconName } from '@fortawesome/fontawesome-svg-core'
+import booksSvg from './books.svg?raw'
+
+/**
+ * Custom icon definitions for FontAwesome Pro icons
+ * or any custom SVG icons that aren't in the free tier
+ */
+
+function parseSvgToIconDefinition(svg: string, options: { prefix: IconPrefix, iconName: IconName, unicode?: string }): IconDefinition {
+  const { prefix, iconName, unicode = 'e002' } = options
+
+  // Extract viewBox first; fallback to width/height
+  const viewBoxMatch = svg.match(/viewBox\s*=\s*"([^"]+)"/i)
+  let width = 512
+  let height = 512
+  if (viewBoxMatch) {
+    const parts = viewBoxMatch[1].trim().split(/\s+/)
+    if (parts.length === 4) {
+      const w = Number(parts[2])
+      const h = Number(parts[3])
+      if (!Number.isNaN(w)) width = Math.round(w)
+      if (!Number.isNaN(h)) height = Math.round(h)
+    }
+  } else {
+    const widthMatch = svg.match(/\bwidth\s*=\s*"(\d+(?:\.\d+)?)"/i)
+    const heightMatch = svg.match(/\bheight\s*=\s*"(\d+(?:\.\d+)?)"/i)
+    if (widthMatch) width = Math.round(Number(widthMatch[1]))
+    if (heightMatch) height = Math.round(Number(heightMatch[1]))
+  }
+
+  // Collect all path d attributes
+  const pathDs: string[] = []
+  const pathRegex = /<path[^>]*\sd=\s*"([^"]+)"[^>]*>/gi
+  let m: RegExpExecArray | null
+  while ((m = pathRegex.exec(svg)) !== null) {
+    pathDs.push(m[1])
+  }
+
+  const pathData = pathDs.length <= 1 ? (pathDs[0] || '') : pathDs
+
+  return {
+    prefix,
+    iconName,
+    icon: [width, height, [], unicode, pathData]
+  }
+}
+
+export const faBooks: IconDefinition = parseSvgToIconDefinition(booksSvg, {
+  prefix: 'far',
+  iconName: 'books'
+})
+

src/main.tsx

@@ -1,8 +1,45 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
+import './styles/tailwind.css'
 import './index.css'
 
+// Register Service Worker for PWA functionality
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker
+      .register('/sw.js', { type: 'module' })
+      .then(registration => {
+        console.log('✅ Service Worker registered:', registration.scope)
+        
+        // Check for updates periodically
+        setInterval(() => {
+          registration.update()
+        }, 60 * 60 * 1000) // Check every hour
+        
+        // Handle service worker updates
+        registration.addEventListener('updatefound', () => {
+          const newWorker = registration.installing
+          if (newWorker) {
+            newWorker.addEventListener('statechange', () => {
+              if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                // New service worker available
+                console.log('🔄 New version available! Reload to update.')
+                
+                // Optionally show a toast notification
+                const updateAvailable = new CustomEvent('sw-update-available')
+                window.dispatchEvent(updateAvailable)
+              }
+            })
+          }
+        })
+      })
+      .catch(error => {
+        console.error('❌ Service Worker registration failed:', error)
+      })
+  })
+}
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />

src/services/articleService.ts

@@ -1,10 +1,14 @@
-import { RelayPool, completeOnEose } from 'applesauce-relay'
-import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import { RelayPool } from 'applesauce-relay'
+import { lastValueFrom, take } from 'rxjs'
 import { nip19 } from 'nostr-tools'
 import { AddressPointer } from 'nostr-tools/nip19'
 import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
 import { RELAYS } from '../config/relays'
+import { prioritizeLocalRelays, partitionRelays, createParallelReqStreams } from '../utils/helpers'
+import { merge, toArray as rxToArray } from 'rxjs'
+import { UserSettings } from './settingsService'
+import { rebroadcastEvents } from './rebroadcastService'
 
 const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
@@ -71,11 +75,13 @@ function saveToCache(naddr: string, content: ArticleContent): void {
  * @param relayPool - The relay pool to query
  * @param naddr - The article's naddr
  * @param bypassCache - If true, skip cache and fetch fresh from relays
+ * @param settings - User settings for rebroadcast options
  */
 export async function fetchArticleByNaddr(
   relayPool: RelayPool,
   naddr: string,
-  bypassCache = false
+  bypassCache = false,
+  settings?: UserSettings
 ): Promise<ArticleContent> {
   try {
     // Check cache first unless bypassed
@@ -94,9 +100,11 @@ export async function fetchArticleByNaddr(
     const pointer = decoded.data as AddressPointer
 
     // Define relays to query - prefer relays from naddr, fallback to configured relays (including local)
-    const relays = pointer.relays && pointer.relays.length > 0 
+    const baseRelays = pointer.relays && pointer.relays.length > 0 
       ? pointer.relays 
       : RELAYS
+    const orderedRelays = prioritizeLocalRelays(baseRelays)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
 
     // Fetch the article event
     const filter = {
@@ -105,12 +113,10 @@ export async function fetchArticleByNaddr(
       '#d': [pointer.identifier]
     }
 
-    // Use applesauce relay pool pattern
-    const events = await lastValueFrom(
-      relayPool
-        .req(relays, filter)
-        .pipe(completeOnEose(), takeUntil(timer(10000)), toArray())
-    )
+    // Parallel local+remote, stream immediate, collect up to first from each
+    const { local$, remote$ } = createParallelReqStreams(relayPool, localRelays, remoteRelays, filter, 1200, 6000)
+    const collected = await lastValueFrom(merge(local$.pipe(take(1)), remote$.pipe(take(1))).pipe(rxToArray()))
+    const events = collected as NostrEvent[]
 
     if (events.length === 0) {
       throw new Error('Article not found')
@@ -120,6 +126,9 @@ export async function fetchArticleByNaddr(
     events.sort((a, b) => b.created_at - a.created_at)
     const article = events[0]
 
+    // Rebroadcast article to local/all relays based on settings
+    await rebroadcastEvents([article], relayPool, settings)
+
     const title = getArticleTitle(article) || 'Untitled Article'
     const image = getArticleImage(article)
     const published = getArticlePublished(article)
@@ -138,6 +147,8 @@ export async function fetchArticleByNaddr(
     // Save to cache before returning
     saveToCache(naddr, content)
     
+    // Image caching is handled automatically by Service Worker
+    
     return content
   } catch (err) {
     console.error('Failed to fetch article:', err)

src/services/articleTitleResolver.ts

@@ -0,0 +1,91 @@
+import { RelayPool } from 'applesauce-relay'
+import { lastValueFrom, take } from 'rxjs'
+import { nip19 } from 'nostr-tools'
+import { AddressPointer } from 'nostr-tools/nip19'
+import { Helpers } from 'applesauce-core'
+import { RELAYS } from '../config/relays'
+import { prioritizeLocalRelays, partitionRelays, createParallelReqStreams } from '../utils/helpers'
+import { merge, toArray as rxToArray } from 'rxjs'
+
+const { getArticleTitle } = Helpers
+
+/**
+ * Fetch article title for a single naddr
+ * Returns the title or null if not found/error
+ */
+export async function fetchArticleTitle(
+  relayPool: RelayPool,
+  naddr: string
+): Promise<string | null> {
+  try {
+    const decoded = nip19.decode(naddr)
+    
+    if (decoded.type !== 'naddr') {
+      return null
+    }
+
+    const pointer = decoded.data as AddressPointer
+
+    // Define relays to query
+    const baseRelays = pointer.relays && pointer.relays.length > 0 
+      ? pointer.relays 
+      : RELAYS
+    const orderedRelays = prioritizeLocalRelays(baseRelays)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
+
+    // Fetch the article event
+    const filter = {
+      kinds: [pointer.kind],
+      authors: [pointer.pubkey],
+      '#d': [pointer.identifier]
+    }
+
+    // Parallel local+remote: collect up to one event from each
+    const { local$, remote$ } = createParallelReqStreams(relayPool, localRelays, remoteRelays, filter, 1200, 5000)
+    const events = await lastValueFrom(
+      merge(local$.pipe(take(1)), remote$.pipe(take(1))).pipe(rxToArray())
+    ) as unknown as { created_at: number }[]
+
+    if (events.length === 0) {
+      return null
+    }
+
+    // Sort by created_at and take the most recent
+    events.sort((a, b) => b.created_at - a.created_at)
+    const article = events[0] as unknown as Parameters<typeof getArticleTitle>[0]
+
+    return getArticleTitle(article) || null
+  } catch (err) {
+    console.warn('Failed to fetch article title for', naddr, err)
+    return null
+  }
+}
+
+/**
+ * Fetch titles for multiple naddrs in parallel
+ * Returns a map of naddr -> title
+ */
+export async function fetchArticleTitles(
+  relayPool: RelayPool,
+  naddrs: string[]
+): Promise<Map<string, string>> {
+  const titleMap = new Map<string, string>()
+  
+  // Fetch all titles in parallel
+  const results = await Promise.allSettled(
+    naddrs.map(async (naddr) => {
+      const title = await fetchArticleTitle(relayPool, naddr)
+      return { naddr, title }
+    })
+  )
+
+  // Process results
+  results.forEach((result) => {
+    if (result.status === 'fulfilled' && result.value.title) {
+      titleMap.set(result.value.naddr, result.value.title)
+    }
+  })
+
+  return titleMap
+}
+

src/services/bookmarkHelpers.ts

@@ -60,8 +60,27 @@ export const processApplesauceBookmarks = (
     if (applesauceBookmarks.articles) allItems.push(...applesauceBookmarks.articles)
     if (applesauceBookmarks.hashtags) allItems.push(...applesauceBookmarks.hashtags)
     if (applesauceBookmarks.urls) allItems.push(...applesauceBookmarks.urls)
-    return allItems.map((bookmark: BookmarkData) => ({
-      id: bookmark.id || `${isPrivate ? 'private' : 'public'}-${Date.now()}`,
+    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]
+  return bookmarkArray
+    .filter((bookmark: BookmarkData) => bookmark.id) // Skip bookmarks without valid IDs
+    .map((bookmark: BookmarkData) => ({
+      id: bookmark.id!,
       content: bookmark.content || '',
       created_at: bookmark.created_at || Math.floor(Date.now() / 1000),
       pubkey: activeAccount.pubkey,
@@ -70,23 +89,8 @@ export const processApplesauceBookmarks = (
       parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
       type: 'event' as const,
       isPrivate,
-      added_at: Math.floor(Date.now() / 1000)
+      added_at: bookmark.created_at || Math.floor(Date.now() / 1000)
     }))
-  }
-
-  const bookmarkArray = Array.isArray(bookmarks) ? bookmarks : [bookmarks]
-  return bookmarkArray.map((bookmark: BookmarkData) => ({
-    id: bookmark.id || `${isPrivate ? 'private' : 'public'}-${Date.now()}`,
-    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: Math.floor(Date.now() / 1000)
-  }))
 }
 
 // Types and guards around signer/decryption APIs

src/services/bookmarkService.ts

@@ -1,5 +1,5 @@
 import { RelayPool, completeOnEose } from 'applesauce-relay'
-import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import { lastValueFrom, merge, Observable, takeUntil, timer, toArray } from 'rxjs'
 import {
   AccountWithExtension,
   NostrEvent,
@@ -14,13 +14,17 @@ import {
 } from './bookmarkHelpers'
 import { Bookmark } from '../types/bookmarks'
 import { collectBookmarksFromEvents } from './bookmarkProcessing.ts'
+import { UserSettings } from './settingsService'
+import { rebroadcastEvents } from './rebroadcastService'
+import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
 
 
 
 export const fetchBookmarks = async (
   relayPool: RelayPool,
   activeAccount: unknown, // Full account object with extension capabilities
-  setBookmarks: (bookmarks: Bookmark[]) => void
+  setBookmarks: (bookmarks: Bookmark[]) => void,
+  settings?: UserSettings
 ) => {
   try {
     
@@ -28,15 +32,26 @@ export const fetchBookmarks = async (
       throw new Error('Invalid account object provided')
     }
     // Get relay URLs from the pool
-    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    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)
-    const rawEvents = await lastValueFrom(
-      relayPool
-        .req(relayUrls, { kinds: [10003, 30003, 30001, 39701], authors: [activeAccount.pubkey] })
-        .pipe(completeOnEose(), takeUntil(timer(20000)), toArray())
-    )
+    // 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('📊 Raw events fetched:', rawEvents.length, 'events')
+    
+    // Rebroadcast bookmark events to local/all relays based on settings
+    await rebroadcastEvents(rawEvents, relayPool, settings)
 
     // Check for events with potentially encrypted content
     const eventsWithContent = rawEvents.filter(evt => evt.content && evt.content.length > 0)
@@ -58,7 +73,7 @@ export const fetchBookmarks = async (
     const bookmarkListEvents = dedupeNip51Events(rawEvents)
     console.log('📋 After deduplication:', bookmarkListEvents.length, 'bookmark events')
     if (bookmarkListEvents.length === 0) {
-      setBookmarks([])
+      // Keep existing bookmarks visible; do not clear list if nothing new found
       return
     }
     // Aggregate across events
@@ -96,9 +111,14 @@ export const fetchBookmarks = async (
     let idToEvent: Map<string, NostrEvent> = new Map()
     if (noteIds.length > 0) {
       try {
-        const events = await lastValueFrom(
-          relayPool.req(relayUrls, { ids: noteIds }).pipe(completeOnEose(), takeUntil(timer(10000)), toArray())
-        )
+        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]))
       } catch (error) {
         console.warn('Failed to fetch events for hydration:', error)

src/services/contactService.ts

@@ -1,5 +1,6 @@
 import { RelayPool, completeOnEose } from 'applesauce-relay'
-import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import { lastValueFrom, merge, Observable, takeUntil, timer, toArray } from 'rxjs'
+import { prioritizeLocalRelays } from '../utils/helpers'
 
 /**
  * Fetches the contact list (follows) for a specific user
@@ -9,40 +10,49 @@ import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
  */
 export const fetchContacts = async (
   relayPool: RelayPool,
-  pubkey: string
+  pubkey: string,
+  onPartial?: (contacts: Set<string>) => void
 ): Promise<Set<string>> => {
   try {
-    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    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(
-      relayPool
-        .req(relayUrls, { kinds: [3], authors: [pubkey] })
-        .pipe(completeOnEose(), takeUntil(timer(10000)), toArray())
+      merge(local$, remote$).pipe(toArray())
     )
+    const followed = new Set<string>()
+    if (events.length > 0) {
+      // Get the most recent contact list
+      const sortedEvents = events.sort((a, b) => b.created_at - a.created_at)
+      const contactList = sortedEvents[0]
+      // Extract pubkeys from 'p' tags
+      for (const tag of contactList.tags) {
+        if (tag[0] === 'p' && tag[1]) {
+          followed.add(tag[1])
+        }
+      }
+      if (onPartial) onPartial(new Set(followed))
+    }
+    // merged already via streams
     
     console.log('📊 Contact events fetched:', events.length)
     
-    if (events.length === 0) {
-      return new Set()
-    }
-    
-    // Get the most recent contact list
-    const sortedEvents = events.sort((a, b) => b.created_at - a.created_at)
-    const contactList = sortedEvents[0]
-    
-    // Extract pubkeys from 'p' tags
-    const followedPubkeys = new Set<string>()
-    for (const tag of contactList.tags) {
-      if (tag[0] === 'p' && tag[1]) {
-        followedPubkeys.add(tag[1])
-      }
-    }
-    
-    console.log('👥 Followed contacts:', followedPubkeys.size)
-    
-    return followedPubkeys
+    console.log('👥 Followed contacts:', followed.size)
+    return followed
   } catch (error) {
     console.error('Failed to fetch contacts:', error)
     return new Set()

src/services/deletionService.ts

@@ -0,0 +1,48 @@
+import { EventFactory } from 'applesauce-factory'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { NostrEvent } from 'nostr-tools'
+import { RELAYS } from '../config/relays'
+
+/**
+ * Creates a kind:5 event deletion request (NIP-09)
+ * @param eventId The ID of the event to delete
+ * @param eventKind The kind of the event being deleted
+ * @param reason Optional reason for deletion
+ * @param account The user's account for signing
+ * @param relayPool The relay pool for publishing
+ * @returns The signed deletion request event
+ */
+export async function createDeletionRequest(
+  eventId: string,
+  eventKind: number,
+  reason: string | undefined,
+  account: IAccount,
+  relayPool: RelayPool
+): Promise<NostrEvent> {
+  const factory = new EventFactory({ signer: account })
+
+  const tags: string[][] = [
+    ['e', eventId],
+    ['k', eventKind.toString()]
+  ]
+
+  const draft = await factory.create(async () => ({
+    kind: 5, // Event Deletion Request
+    content: reason || '',
+    tags,
+    created_at: Math.floor(Date.now() / 1000)
+  }))
+
+  const signed = await factory.sign(draft)
+
+  console.log('🗑️ Created kind:5 deletion request for event:', eventId.slice(0, 8))
+
+  // Publish to relays
+  await relayPool.publish(RELAYS, signed)
+
+  console.log('✅ Deletion request published to', RELAYS.length, 'relay(s)')
+
+  return signed
+}
+

src/services/exploreCache.ts

@@ -0,0 +1,42 @@
+import { NostrEvent } from 'nostr-tools'
+
+export interface CachedBlogPostPreview {
+  event: NostrEvent
+  title: string
+  summary?: string
+  image?: string
+  published?: number
+  author: string
+}
+
+type CacheValue = {
+  posts: CachedBlogPostPreview[]
+  timestamp: number
+}
+
+const exploreCache = new Map<string, CacheValue>() // key: pubkey
+
+export function getCachedPosts(pubkey: string): CachedBlogPostPreview[] | null {
+  const entry = exploreCache.get(pubkey)
+  if (!entry) return null
+  return entry.posts
+}
+
+export function setCachedPosts(pubkey: string, posts: CachedBlogPostPreview[]): void {
+  exploreCache.set(pubkey, { posts, timestamp: Date.now() })
+}
+
+export function upsertCachedPost(pubkey: string, post: CachedBlogPostPreview): CachedBlogPostPreview[] {
+  const current = exploreCache.get(pubkey)?.posts || []
+  const byId = new Map(current.map(p => [p.event.id, p]))
+  byId.set(post.event.id, post)
+  const merged = Array.from(byId.values()).sort((a, b) => {
+    const ta = a.published || a.event.created_at
+    const tb = b.published || b.event.created_at
+    return tb - ta
+  })
+  setCachedPosts(pubkey, merged)
+  return merged
+}
+
+

src/services/exploreService.ts

@@ -0,0 +1,112 @@
+import { RelayPool, completeOnEose } from 'applesauce-relay'
+import { lastValueFrom, merge, Observable, takeUntil, timer, toArray } from 'rxjs'
+import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
+import { NostrEvent } from 'nostr-tools'
+import { Helpers } from 'applesauce-core'
+
+const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
+
+export interface BlogPostPreview {
+  event: NostrEvent
+  title: string
+  summary?: string
+  image?: string
+  published?: number
+  author: string
+}
+
+/**
+ * Fetches blog posts (kind:30023) from a list of pubkeys (friends)
+ * @param relayPool - The relay pool to query
+ * @param pubkeys - Array of pubkeys to fetch posts from
+ * @param relayUrls - Array of relay URLs to query
+ * @returns Array of blog post previews
+ */
+export const fetchBlogPostsFromAuthors = async (
+  relayPool: RelayPool,
+  pubkeys: string[],
+  relayUrls: string[],
+  onPost?: (post: BlogPostPreview) => void
+): Promise<BlogPostPreview[]> => {
+  try {
+    if (pubkeys.length === 0) {
+      console.log('⚠️ No pubkeys to fetch blog posts from')
+      return []
+    }
+
+    console.log('📚 Fetching blog posts (kind 30023) from', pubkeys.length, 'authors')
+    
+    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
+            }
+            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)
+    
+    // Convert to blog post previews and sort by published date (most recent first)
+    const blogPosts: BlogPostPreview[] = Array.from(uniqueEvents.values())
+      .map(event => {
+        const post: BlogPostPreview = {
+          event,
+          title: getArticleTitle(event) || 'Untitled',
+          summary: getArticleSummary(event),
+          image: getArticleImage(event),
+          published: getArticlePublished(event),
+          author: event.pubkey
+        }
+        if (onPost) onPost(post)
+        return post
+      })
+      .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 blog posts')
+    
+    return blogPosts
+  } catch (error) {
+    console.error('Failed to fetch blog posts:', error)
+    return []
+  }
+}
+

src/services/highlightCreationService.ts

@@ -3,10 +3,16 @@ import { RelayPool } from 'applesauce-relay'
 import { IAccount } from 'applesauce-accounts'
 import { AddressPointer } from 'nostr-tools/nip19'
 import { NostrEvent } from 'nostr-tools'
-import { Helpers } from 'applesauce-core'
+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'
+
+// Boris pubkey for zap splits
+// npub19802see0gnk3vjlus0dnmfdagusqrtmsxpl5yfmkwn9uvnfnqylqduhr0x
+const BORIS_PUBKEY = '29dea8672f44ed164bfc83db3da5bd472001af70307f42277674cbc64d33013e'
 
 const {
   getHighlightText,
@@ -23,17 +29,18 @@ const { HighlightBlueprint } = Blueprints
 /**
  * Creates and publishes a highlight event (NIP-84)
  * Supports both nostr-native articles and external URLs
- * Returns the signed event for immediate UI updates
+ * Returns a Highlight object with relay tracking info for immediate UI updates
  */
 export async function createHighlight(
   selectedText: string,
   source: NostrEvent | string,
   account: IAccount,
   relayPool: RelayPool,
+  eventStore: IEventStore,
   contentForContext?: string,
   comment?: string,
   settings?: UserSettings
-): Promise<NostrEvent> {
+): Promise<Highlight> {
   if (!selectedText || !source) {
     throw new Error('Missing required data to create highlight')
   }
@@ -69,27 +76,102 @@ export async function createHighlight(
   // Update the alt tag to identify Boris as the creator
   const altTagIndex = highlightEvent.tags.findIndex(tag => tag[0] === 'alt')
   if (altTagIndex !== -1) {
-    highlightEvent.tags[altTagIndex] = ['alt', 'Highlight created by Boris. readwithboris.com']
+    highlightEvent.tags[altTagIndex] = ['alt', 'Highlight created by Boris. read.withboris.com']
   } else {
-    highlightEvent.tags.push(['alt', 'Highlight created by Boris. readwithboris.com'])
+    highlightEvent.tags.push(['alt', 'Highlight created by Boris. read.withboris.com'])
+  }
+
+  // Add p tag (author tag) for nostr-native content
+  // This tags the original author so they can see highlights of their work
+  if (typeof source === 'object' && 'kind' in source) {
+    // Only add p tag if it doesn't already exist
+    const hasPTag = highlightEvent.tags.some(tag => tag[0] === 'p' && tag[1] === source.pubkey)
+    if (!hasPTag) {
+      highlightEvent.tags.push(['p', source.pubkey])
+    }
   }
 
   // Add zap tags for nostr-native content (NIP-57 Appendix G)
   if (typeof source === 'object' && 'kind' in source) {
-    const zapSplitPercentage = settings?.zapSplitPercentage ?? 50
-    addZapTags(highlightEvent, account.pubkey, source.pubkey, zapSplitPercentage)
+    // Migrate old settings format to new weight-based format if needed
+    let highlighterWeight = settings?.zapSplitHighlighterWeight
+    let borisWeight = settings?.zapSplitBorisWeight
+    let authorWeight = settings?.zapSplitAuthorWeight
+    
+    const anySettings = settings as Record<string, unknown> | undefined
+    if (!highlighterWeight && anySettings && 'zapSplitPercentage' in anySettings) {
+      highlighterWeight = anySettings.zapSplitPercentage as number
+      authorWeight = 100 - (anySettings.zapSplitPercentage as number)
+    }
+    if (!borisWeight && anySettings && 'borisSupportPercentage' in anySettings) {
+      borisWeight = anySettings.borisSupportPercentage as number
+    }
+    
+    // Use defaults if still undefined
+    highlighterWeight = highlighterWeight ?? 50
+    borisWeight = borisWeight ?? 2.1
+    authorWeight = authorWeight ?? 50
+    
+    addZapTags(highlightEvent, account.pubkey, source, highlighterWeight, borisWeight, authorWeight)
   }
 
   // Sign the event
   const signedEvent = await factory.sign(highlightEvent)
 
-  // Publish to relays (including local relay)
-  await relayPool.publish(RELAYS, signedEvent)
+  // Publish to all configured relays - let the relay pool handle connection state
+  const targetRelays = RELAYS
   
-  console.log('✅ Highlight published to', RELAYS.length, 'relays (including local):', signedEvent)
+  // 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))
   
-  // Return the signed event for immediate UI updates
-  return signedEvent
+  // 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 => 
+    !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 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.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
+  return highlight
 }
 
 /**
@@ -186,31 +268,71 @@ function extractContext(selectedText: string, articleContent: string): string |
 
 /**
  * Adds zap tags to a highlight event for split payments (NIP-57 Appendix G)
- * @param event The highlight event to add zap tags to
+ * Respects existing zap tags in the source event (author group)
+ * @param event The highlight event to add zap tags to (can be EventTemplate or NostrEvent)
  * @param highlighterPubkey The pubkey of the user creating the highlight
- * @param authorPubkey The pubkey of the original article author
- * @param highlighterPercentage Percentage (0-100) to give to the highlighter (default 50)
+ * @param sourceEvent The source event (may contain existing zap tags)
+ * @param highlighterWeight Weight to give to the highlighter (default 50)
+ * @param borisWeight Weight to give to Boris (default 2.1)
+ * @param authorWeight Weight to give to author(s) (default 50)
  */
 function addZapTags(
-  event: NostrEvent,
+  event: { tags: string[][] },
   highlighterPubkey: string,
-  authorPubkey: string,
-  highlighterPercentage: number = 50
+  sourceEvent: NostrEvent,
+  highlighterWeight: number = 50,
+  borisWeight: number = 2.1,
+  authorWeight: number = 50
 ): void {
-  // Calculate weights based on percentage
-  // Using simple integer weights where highlighterPercentage:authorPercentage ratio is maintained
-  const highlighterWeight = Math.round(highlighterPercentage)
-  const authorWeight = Math.round(100 - highlighterPercentage)
-  
   // Use a reliable relay for zap metadata lookup (first non-local relay)
   const zapRelay = RELAYS.find(r => !r.includes('localhost')) || RELAYS[0]
   
-  // Add zap tag for the highlighter
-  event.tags.push(['zap', highlighterPubkey, zapRelay, highlighterWeight.toString()])
+  // Extract existing zap tags from source event (the "author group")
+  const existingZapTags = sourceEvent.tags.filter(tag => tag[0] === 'zap')
   
-  // Add zap tag for the original author (only if different from highlighter)
-  if (authorPubkey !== highlighterPubkey) {
-    event.tags.push(['zap', authorPubkey, zapRelay, authorWeight.toString()])
+  // Add zap tag for the highlighter
+  if (highlighterWeight > 0) {
+    event.tags.push(['zap', highlighterPubkey, zapRelay, highlighterWeight.toString()])
+  }
+  
+  // Add zap tag for Boris (if weight > 0 and Boris is not the highlighter)
+  if (borisWeight > 0 && BORIS_PUBKEY !== highlighterPubkey) {
+    event.tags.push(['zap', BORIS_PUBKEY, zapRelay, borisWeight.toFixed(1)])
+  }
+  
+  if (existingZapTags.length > 0 && authorWeight > 0) {
+    // Calculate total weight from existing zap tags
+    const totalExistingWeight = existingZapTags.reduce((sum, tag) => {
+      const weight = parseFloat(tag[3] || '1')
+      return sum + weight
+    }, 0)
+    
+    // Add proportionally adjusted zap tags for each existing author
+    // Don't add the highlighter or Boris again if they're already in the author group
+    for (const zapTag of existingZapTags) {
+      const authorPubkey = zapTag[1]
+      
+      // Skip if this is the highlighter or Boris (they already have their shares)
+      if (authorPubkey === highlighterPubkey || authorPubkey === BORIS_PUBKEY) continue
+      
+      const originalWeight = parseFloat(zapTag[3] || '1')
+      const originalRelay = zapTag[2] || zapRelay
+      
+      // Calculate proportional weight: (original weight / total weight) * author group weight
+      const adjustedWeight = (originalWeight / totalExistingWeight) * authorWeight
+      
+      // Only add if weight is greater than 0
+      if (adjustedWeight > 0) {
+        event.tags.push(['zap', authorPubkey, originalRelay, adjustedWeight.toFixed(1)])
+      }
+    }
+  } else if (authorWeight > 0) {
+    // No existing zap tags, give full author weight to source author
+    
+    // Add zap tag for the original author (only if different from highlighter and Boris)
+    if (sourceEvent.pubkey !== highlighterPubkey && sourceEvent.pubkey !== BORIS_PUBKEY) {
+      event.tags.push(['zap', sourceEvent.pubkey, zapRelay, authorWeight.toFixed(1)])
+    }
   }
 }
 

src/services/highlightService.ts

@@ -1,186 +1,5 @@
-import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
-import { lastValueFrom, takeUntil, timer, tap, toArray } from 'rxjs'
-import { NostrEvent } from 'nostr-tools'
-import { Highlight } from '../types/highlights'
-import { RELAYS } from '../config/relays'
-import { eventToHighlight, dedupeHighlights, sortHighlights } from './highlightEventProcessor'
+export * from './highlights/fetchForArticle'
+export * from './highlights/fetchForUrl'
+export * from './highlights/fetchByAuthor'
 
-/**
- * Fetches highlights for a specific article by its address coordinate and/or event ID
- * @param relayPool - The relay pool to query
- * @param articleCoordinate - The article's address in format "kind:pubkey:identifier" (e.g., "30023:abc...def:my-article")
- * @param eventId - Optional event ID to also query by 'e' tag
- */
-export const fetchHighlightsForArticle = async (
-  relayPool: RelayPool,
-  articleCoordinate: string,
-  eventId?: string,
-  onHighlight?: (highlight: Highlight) => void
-): Promise<Highlight[]> => {
-  try {
-    console.log('🔍 Fetching highlights (kind 9802) for article:', articleCoordinate)
-    console.log('🔍 Event ID:', eventId || 'none')
-    console.log('🔍 From relays (including local):', RELAYS)
-    
-    const seenIds = new Set<string>()
-    const processEvent = (event: NostrEvent): Highlight | null => {
-      if (seenIds.has(event.id)) return null
-      seenIds.add(event.id)
-      return eventToHighlight(event)
-    }
-    
-    // Query for highlights that reference this article via the 'a' tag
-    const aTagEvents = await lastValueFrom(
-      relayPool
-        .req(RELAYS, { kinds: [9802], '#a': [articleCoordinate] })
-        .pipe(
-          onlyEvents(),
-          tap((event: NostrEvent) => {
-            const highlight = processEvent(event)
-            if (highlight && onHighlight) {
-              onHighlight(highlight)
-            }
-          }),
-          completeOnEose(),
-          takeUntil(timer(10000)),
-          toArray()
-        )
-    )
-    
-    console.log('📊 Highlights via a-tag:', aTagEvents.length)
-    
-    // If we have an event ID, also query for highlights that reference via the 'e' tag
-    let eTagEvents: NostrEvent[] = []
-    if (eventId) {
-      eTagEvents = await lastValueFrom(
-        relayPool
-          .req(RELAYS, { kinds: [9802], '#e': [eventId] })
-          .pipe(
-            onlyEvents(),
-            tap((event: NostrEvent) => {
-              const highlight = processEvent(event)
-              if (highlight && onHighlight) {
-                onHighlight(highlight)
-              }
-            }),
-            completeOnEose(),
-            takeUntil(timer(10000)),
-            toArray()
-          )
-      )
-      console.log('📊 Highlights via e-tag:', eTagEvents.length)
-    }
-    
-    // Combine results from both queries
-    const rawEvents = [...aTagEvents, ...eTagEvents]
-    console.log('📊 Total raw highlight events fetched:', rawEvents.length)
-    
-    if (rawEvents.length > 0) {
-      console.log('📄 Sample highlight tags:', JSON.stringify(rawEvents[0].tags, null, 2))
-    } else {
-      console.log('❌ No highlights found. Article coordinate:', articleCoordinate)
-      console.log('❌ Event ID:', eventId || 'none')
-      console.log('💡 Try checking if there are any highlights on this article at https://highlighter.com')
-    }
-    
-    // Deduplicate events by ID
-    const uniqueEvents = dedupeHighlights(rawEvents)
-    console.log('📊 Unique highlight events after deduplication:', uniqueEvents.length)
-    
-    const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
-    return sortHighlights(highlights)
-  } catch (error) {
-    console.error('Failed to fetch highlights for article:', error)
-    return []
-  }
-}
-
-/**
- * Fetches highlights for a specific URL
- * @param relayPool - The relay pool to query
- * @param url - The external URL to find highlights for
- */
-export const fetchHighlightsForUrl = async (
-  relayPool: RelayPool,
-  url: string
-): Promise<Highlight[]> => {
-  try {
-    console.log('🔍 Fetching highlights (kind 9802) for URL:', url)
-    
-    const seenIds = new Set<string>()
-    const rawEvents = await lastValueFrom(
-      relayPool
-        .req(RELAYS, { kinds: [9802], '#r': [url] })
-        .pipe(
-          onlyEvents(),
-          tap((event: NostrEvent) => {
-            seenIds.add(event.id)
-          }),
-          completeOnEose(),
-          takeUntil(timer(10000)),
-          toArray()
-        )
-    )
-    
-    console.log('📊 Highlights for URL:', rawEvents.length)
-    
-    const uniqueEvents = dedupeHighlights(rawEvents)
-    const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
-    return sortHighlights(highlights)
-  } catch (error) {
-    console.error('Failed to fetch highlights for URL:', error)
-    return []
-  }
-}
-
-/**
- * Fetches highlights created by a specific user
- * @param relayPool - The relay pool to query
- * @param pubkey - The user's public key
- * @param onHighlight - Optional callback to receive highlights as they arrive
- */
-export const fetchHighlights = async (
-  relayPool: RelayPool,
-  pubkey: string,
-  onHighlight?: (highlight: Highlight) => void
-): Promise<Highlight[]> => {
-  try {
-    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
-    
-    console.log('🔍 Fetching highlights (kind 9802) by author:', pubkey)
-    
-    const seenIds = new Set<string>()
-    const rawEvents = await lastValueFrom(
-      relayPool
-        .req(relayUrls, { kinds: [9802], authors: [pubkey] })
-        .pipe(
-          onlyEvents(),
-          tap((event: NostrEvent) => {
-            if (!seenIds.has(event.id)) {
-              seenIds.add(event.id)
-              const highlight = eventToHighlight(event)
-              if (onHighlight) {
-                onHighlight(highlight)
-              }
-            }
-          }),
-          completeOnEose(),
-          takeUntil(timer(10000)),
-          toArray()
-        )
-    )
-    
-    console.log('📊 Raw highlight events fetched:', rawEvents.length)
-    
-    // Deduplicate and process events
-    const uniqueEvents = dedupeHighlights(rawEvents)
-    console.log('📊 Unique highlight events after deduplication:', uniqueEvents.length)
-    
-    const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
-    return sortHighlights(highlights)
-  } catch (error) {
-    console.error('Failed to fetch highlights by author:', error)
-    return []
-  }
-}
 

src/services/highlights/fetchByAuthor.ts

@@ -0,0 +1,63 @@
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
+import { lastValueFrom, merge, Observable, takeUntil, timer, tap, toArray } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import { Highlight } from '../../types/highlights'
+import { prioritizeLocalRelays, partitionRelays } from '../../utils/helpers'
+import { eventToHighlight, dedupeHighlights, sortHighlights } from '../highlightEventProcessor'
+import { UserSettings } from '../settingsService'
+import { rebroadcastEvents } from '../rebroadcastService'
+
+export const fetchHighlights = async (
+  relayPool: RelayPool,
+  pubkey: string,
+  onHighlight?: (highlight: Highlight) => void,
+  settings?: UserSettings
+): Promise<Highlight[]> => {
+  try {
+    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    const ordered = prioritizeLocalRelays(relayUrls)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(ordered)
+
+    const seenIds = new Set<string>()
+    const local$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, { kinds: [9802], authors: [pubkey] })
+          .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: [pubkey] })
+          .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()))
+
+    await rebroadcastEvents(rawEvents, relayPool, settings)
+    const uniqueEvents = dedupeHighlights(rawEvents)
+    const highlights = uniqueEvents.map(eventToHighlight)
+    return sortHighlights(highlights)
+  } catch {
+    return []
+  }
+}
+
+

src/services/highlights/fetchForArticle.ts

@@ -0,0 +1,98 @@
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
+import { lastValueFrom, merge, Observable, takeUntil, timer, tap, toArray } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import { Highlight } from '../../types/highlights'
+import { RELAYS } from '../../config/relays'
+import { prioritizeLocalRelays, partitionRelays } from '../../utils/helpers'
+import { eventToHighlight, dedupeHighlights, sortHighlights } from '../highlightEventProcessor'
+import { UserSettings } from '../settingsService'
+import { rebroadcastEvents } from '../rebroadcastService'
+
+export const fetchHighlightsForArticle = async (
+  relayPool: RelayPool,
+  articleCoordinate: string,
+  eventId?: string,
+  onHighlight?: (highlight: Highlight) => void,
+  settings?: UserSettings
+): Promise<Highlight[]> => {
+  try {
+    const seenIds = new Set<string>()
+    const processEvent = (event: NostrEvent): Highlight | null => {
+      if (seenIds.has(event.id)) return null
+      seenIds.add(event.id)
+      return eventToHighlight(event)
+    }
+
+    const orderedRelays = prioritizeLocalRelays(RELAYS)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
+
+    const aLocal$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, { kinds: [9802], '#a': [articleCoordinate] })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => {
+              const highlight = processEvent(event)
+              if (highlight && onHighlight) onHighlight(highlight)
+            }),
+            completeOnEose(),
+            takeUntil(timer(1200))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+    const aRemote$ = remoteRelays.length > 0
+      ? relayPool
+          .req(remoteRelays, { kinds: [9802], '#a': [articleCoordinate] })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => {
+              const highlight = processEvent(event)
+              if (highlight && onHighlight) onHighlight(highlight)
+            }),
+            completeOnEose(),
+            takeUntil(timer(6000))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+    const aTagEvents: NostrEvent[] = await lastValueFrom(merge(aLocal$, aRemote$).pipe(toArray()))
+
+    let eTagEvents: NostrEvent[] = []
+    if (eventId) {
+      const eLocal$ = localRelays.length > 0
+        ? relayPool
+            .req(localRelays, { kinds: [9802], '#e': [eventId] })
+            .pipe(
+              onlyEvents(),
+              tap((event: NostrEvent) => {
+                const highlight = processEvent(event)
+                if (highlight && onHighlight) onHighlight(highlight)
+              }),
+              completeOnEose(),
+              takeUntil(timer(1200))
+            )
+        : new Observable<NostrEvent>((sub) => sub.complete())
+      const eRemote$ = remoteRelays.length > 0
+        ? relayPool
+            .req(remoteRelays, { kinds: [9802], '#e': [eventId] })
+            .pipe(
+              onlyEvents(),
+              tap((event: NostrEvent) => {
+                const highlight = processEvent(event)
+                if (highlight && onHighlight) onHighlight(highlight)
+              }),
+              completeOnEose(),
+              takeUntil(timer(6000))
+            )
+        : new Observable<NostrEvent>((sub) => sub.complete())
+      eTagEvents = await lastValueFrom(merge(eLocal$, eRemote$).pipe(toArray()))
+    }
+
+    const rawEvents = [...aTagEvents, ...eTagEvents]
+    await rebroadcastEvents(rawEvents, relayPool, settings)
+    const uniqueEvents = dedupeHighlights(rawEvents)
+    const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
+    return sortHighlights(highlights)
+  } catch {
+    return []
+  }
+}
+
+

src/services/highlights/fetchForUrl.ts

@@ -0,0 +1,57 @@
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
+import { lastValueFrom, merge, Observable, takeUntil, timer, tap, toArray } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import { Highlight } from '../../types/highlights'
+import { RELAYS } from '../../config/relays'
+import { prioritizeLocalRelays, partitionRelays } from '../../utils/helpers'
+import { eventToHighlight, dedupeHighlights, sortHighlights } from '../highlightEventProcessor'
+import { UserSettings } from '../settingsService'
+import { rebroadcastEvents } from '../rebroadcastService'
+
+export const fetchHighlightsForUrl = async (
+  relayPool: RelayPool,
+  url: string,
+  onHighlight?: (highlight: Highlight) => void,
+  settings?: UserSettings
+): Promise<Highlight[]> => {
+  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] })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => {
+              seenIds.add(event.id)
+              if (onHighlight) onHighlight(eventToHighlight(event))
+            }),
+            completeOnEose(),
+            takeUntil(timer(1200))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+    const remote$ = remoteRelaysUrl.length > 0
+      ? relayPool
+          .req(remoteRelaysUrl, { kinds: [9802], '#r': [url] })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => {
+              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()))
+    await rebroadcastEvents(rawEvents, relayPool, settings)
+    const uniqueEvents = dedupeHighlights(rawEvents)
+    const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
+    return sortHighlights(highlights)
+  } catch {
+    return []
+  }
+}
+
+

src/services/imageCacheService.ts

@@ -0,0 +1,74 @@
+/**
+ * Image Cache Service
+ * 
+ * Utility functions for managing the Service Worker's image cache
+ * Service Worker automatically caches images on fetch
+ */
+
+const CACHE_NAME = 'boris-image-cache-v1'
+
+/**
+ * Clear all cached images
+ */
+export async function clearImageCache(): Promise<void> {
+  try {
+    await caches.delete(CACHE_NAME)
+    console.log('🗑️ Cleared all cached images')
+  } catch (err) {
+    console.error('Failed to clear image cache:', err)
+  }
+}
+
+/**
+ * Get cache statistics by inspecting Cache API directly
+ */
+export async function getImageCacheStatsAsync(): Promise<{
+  totalSizeMB: number
+  itemCount: number
+  items: Array<{ url: string, sizeMB: number }>
+}> {
+  try {
+    const cache = await caches.open(CACHE_NAME)
+    const requests = await cache.keys()
+    
+    let totalSize = 0
+    const items: Array<{ url: string, sizeMB: number }> = []
+    
+    for (const request of requests) {
+      const response = await cache.match(request)
+      if (response) {
+        const blob = await response.blob()
+        const sizeMB = blob.size / (1024 * 1024)
+        totalSize += blob.size
+        items.push({ url: request.url, sizeMB })
+      }
+    }
+    
+    return {
+      totalSizeMB: totalSize / (1024 * 1024),
+      itemCount: requests.length,
+      items
+    }
+  } catch (err) {
+    console.error('Failed to get cache stats:', err)
+    return { totalSizeMB: 0, itemCount: 0, items: [] }
+  }
+}
+
+/**
+ * Synchronous wrapper for cache stats (returns approximate values)
+ * For real-time stats, use getImageCacheStatsAsync
+ */
+export function getImageCacheStats(): {
+  totalSizeMB: number
+  itemCount: number
+  items: Array<{ url: string, sizeMB: number, lastAccessed: Date }>
+} {
+  // Return placeholder - actual stats require async Cache API access
+  // Component should use getImageCacheStatsAsync for real values
+  return {
+    totalSizeMB: 0,
+    itemCount: 0,
+    items: []
+  }
+}

src/services/libraryService.ts

@@ -0,0 +1,222 @@
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
+import { lastValueFrom, merge, Observable, takeUntil, timer, toArray } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import { Helpers } from 'applesauce-core'
+import { RELAYS } from '../config/relays'
+import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
+import { MARK_AS_READ_EMOJI } from './reactionService'
+import { BlogPostPreview } from './exploreService'
+
+const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
+
+export interface ReadArticle {
+  id: string
+  url?: string
+  eventId?: string
+  eventAuthor?: string
+  eventKind?: number
+  markedAt: number
+  reactionId: string
+}
+
+/**
+ * Fetches all articles that the user has marked as read
+ * Returns both nostr-native articles (kind:7) and external URLs (kind:17)
+ */
+export async function fetchReadArticles(
+  relayPool: RelayPool,
+  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())
+    )
+
+    const readArticles: ReadArticle[] = []
+
+    // Process kind:7 reactions (nostr-native articles)
+    for (const event of kind7Events) {
+      if (event.content === MARK_AS_READ_EMOJI) {
+        const eTag = event.tags.find((t) => t[0] === 'e')
+        const pTag = event.tags.find((t) => t[0] === 'p')
+        const kTag = event.tags.find((t) => t[0] === 'k')
+
+        if (eTag && eTag[1]) {
+          readArticles.push({
+            id: eTag[1],
+            eventId: eTag[1],
+            eventAuthor: pTag?.[1],
+            eventKind: kTag?.[1] ? parseInt(kTag[1]) : undefined,
+            markedAt: event.created_at,
+            reactionId: event.id
+          })
+        }
+      }
+    }
+
+    // Process kind:17 reactions (external URLs)
+    for (const event of kind17Events) {
+      if (event.content === MARK_AS_READ_EMOJI) {
+        const rTag = event.tags.find((t) => t[0] === 'r')
+
+        if (rTag && rTag[1]) {
+          readArticles.push({
+            id: rTag[1],
+            url: rTag[1],
+            markedAt: event.created_at,
+            reactionId: event.id
+          })
+        }
+      }
+    }
+
+    // Sort by markedAt (most recent first) and dedupe
+    const deduped = new Map<string, ReadArticle>()
+    readArticles
+      .sort((a, b) => b.markedAt - a.markedAt)
+      .forEach((article) => {
+        if (!deduped.has(article.id)) {
+          deduped.set(article.id, article)
+        }
+      })
+
+    return Array.from(deduped.values())
+  } catch (error) {
+    console.error('Failed to fetch read articles:', error)
+    return []
+  }
+}
+
+/**
+ * Fetches full article data for read nostr-native articles
+ * and converts them to BlogPostPreview format for rendering
+ */
+export async function fetchReadArticlesWithData(
+  relayPool: RelayPool,
+  userPubkey: string
+): Promise<BlogPostPreview[]> {
+  try {
+    // First get all read articles
+    const readArticles = await fetchReadArticles(relayPool, userPubkey)
+    
+    // Filter to only nostr-native articles (kind 30023)
+    const nostrArticles = readArticles.filter(
+      article => article.eventKind === 30023 && 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())
+    )
+
+    // Deduplicate article events by ID
+    const uniqueArticleEvents = new Map<string, NostrEvent>()
+    articleEvents.forEach(event => {
+      if (!uniqueArticleEvents.has(event.id)) {
+        uniqueArticleEvents.set(event.id, event)
+      }
+    })
+
+    // Convert to BlogPostPreview format
+    const blogPosts: BlogPostPreview[] = Array.from(uniqueArticleEvents.values()).map(event => ({
+      event,
+      title: getArticleTitle(event) || 'Untitled Article',
+      summary: getArticleSummary(event),
+      image: getArticleImage(event),
+      published: getArticlePublished(event),
+      author: event.pubkey
+    }))
+
+    // Sort by when they were marked as read (most recent first)
+    const articlesMap = new Map(nostrArticles.map(a => [a.eventId, a]))
+    blogPosts.sort((a, b) => {
+      const markedAtA = articlesMap.get(a.event.id)?.markedAt || 0
+      const markedAtB = articlesMap.get(b.event.id)?.markedAt || 0
+      return markedAtB - markedAtA
+    })
+
+    return blogPosts
+  } catch (error) {
+    console.error('Failed to fetch read articles with data:', error)
+    return []
+  }
+}
+

src/services/meCache.ts

@@ -0,0 +1,54 @@
+import { Highlight } from '../types/highlights'
+import { Bookmark } from '../types/bookmarks'
+import { BlogPostPreview } from './exploreService'
+
+export interface MeCache {
+  highlights: Highlight[]
+  bookmarks: Bookmark[]
+  readArticles: BlogPostPreview[]
+  timestamp: number
+}
+
+const meCache = new Map<string, MeCache>() // key: pubkey
+
+export function getCachedMeData(pubkey: string): MeCache | null {
+  const entry = meCache.get(pubkey)
+  if (!entry) return null
+  return entry
+}
+
+export function setCachedMeData(
+  pubkey: string,
+  highlights: Highlight[],
+  bookmarks: Bookmark[],
+  readArticles: BlogPostPreview[]
+): void {
+  meCache.set(pubkey, {
+    highlights,
+    bookmarks,
+    readArticles,
+    timestamp: Date.now()
+  })
+}
+
+export function updateCachedHighlights(pubkey: string, highlights: Highlight[]): void {
+  const existing = meCache.get(pubkey)
+  if (existing) {
+    meCache.set(pubkey, { ...existing, highlights, timestamp: Date.now() })
+  }
+}
+
+export function updateCachedBookmarks(pubkey: string, bookmarks: Bookmark[]): void {
+  const existing = meCache.get(pubkey)
+  if (existing) {
+    meCache.set(pubkey, { ...existing, bookmarks, timestamp: Date.now() })
+  }
+}
+
+export function updateCachedReadArticles(pubkey: string, readArticles: BlogPostPreview[]): void {
+  const existing = meCache.get(pubkey)
+  if (existing) {
+    meCache.set(pubkey, { ...existing, readArticles, timestamp: Date.now() })
+  }
+}
+

src/services/offlineSyncService.ts

@@ -0,0 +1,158 @@
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
+import { RELAYS } from '../config/relays'
+import { isLocalRelay } from '../utils/helpers'
+
+let isSyncing = false
+
+// Track events created during offline period
+const offlineCreatedEvents = new Set<string>()
+
+// Track events currently being synced
+const syncingEvents = new Set<string>()
+
+// Callbacks to notify when sync state changes
+const syncStateListeners: Array<(eventId: string, isSyncing: boolean) => void> = []
+
+/**
+ * Marks an event as created during offline period
+ */
+export function markEventAsOfflineCreated(eventId: string): void {
+  offlineCreatedEvents.add(eventId)
+  console.log(`📝 Marked event ${eventId.slice(0, 8)} as offline-created. Total: ${offlineCreatedEvents.size}`)
+}
+
+/**
+ * Check if an event is currently being synced
+ */
+export function isEventSyncing(eventId: string): boolean {
+  return syncingEvents.has(eventId)
+}
+
+/**
+ * Subscribe to sync state changes
+ */
+export function onSyncStateChange(callback: (eventId: string, isSyncing: boolean) => void): () => void {
+  syncStateListeners.push(callback)
+  return () => {
+    const index = syncStateListeners.indexOf(callback)
+    if (index > -1) syncStateListeners.splice(index, 1)
+  }
+}
+
+/**
+ * Notify listeners of sync state change
+ */
+function notifySyncStateChange(eventId: string, isSyncing: boolean): void {
+  syncStateListeners.forEach(listener => listener(eventId, isSyncing))
+}
+
+/**
+ * Syncs local-only events to remote relays when coming back online
+ * Now uses applesauce EventStore instead of querying relays
+ */
+export async function syncLocalEventsToRemote(
+  relayPool: RelayPool,
+  eventStore: IEventStore
+): Promise<void> {
+  if (isSyncing) {
+    console.log('⏳ Sync already in progress, skipping...')
+    return
+  }
+
+  console.log('🔄 Coming back online - syncing local events to remote relays...')
+  console.log(`📦 Offline events tracked: ${offlineCreatedEvents.size}`)
+  isSyncing = true
+
+  try {
+    const remoteRelays = RELAYS.filter(url => !isLocalRelay(url))
+
+    console.log(`📡 Remote relays: ${remoteRelays.length}`)
+    
+    if (remoteRelays.length === 0) {
+      console.log('⚠️ No remote relays available for sync')
+      isSyncing = false
+      return
+    }
+
+    if (offlineCreatedEvents.size === 0) {
+      console.log('✅ No offline events to sync')
+      isSyncing = false
+      return
+    }
+
+    // Get events from EventStore using the tracked IDs
+    const eventsToSync: NostrEvent[] = []
+    console.log(`🔍 Querying EventStore for ${offlineCreatedEvents.size} offline events...`)
+
+    for (const eventId of offlineCreatedEvents) {
+      const event = eventStore.getEvent(eventId)
+      if (event) {
+        console.log(`📥 Found event ${eventId.slice(0, 8)} (kind ${event.kind}) in EventStore`)
+        eventsToSync.push(event)
+      } else {
+        console.warn(`⚠️ Event ${eventId.slice(0, 8)} not found in EventStore`)
+      }
+    }
+
+    console.log(`📊 Total events to sync: ${eventsToSync.length}`)
+
+    if (eventsToSync.length === 0) {
+      console.log('✅ No events found in EventStore to sync')
+      isSyncing = false
+      offlineCreatedEvents.clear()
+      return
+    }
+
+    // Deduplicate events by id
+    const uniqueEvents = Array.from(
+      new Map(eventsToSync.map(e => [e.id, e])).values()
+    )
+
+    console.log(`📤 Syncing ${uniqueEvents.length} event(s) to remote relays...`)
+
+    // Mark all events as syncing
+    uniqueEvents.forEach(event => {
+      syncingEvents.add(event.id)
+      notifySyncStateChange(event.id, true)
+    })
+
+    // Publish to remote relays
+    let successCount = 0
+    const successfulIds: string[] = []
+    
+    for (const event of uniqueEvents) {
+      try {
+        await relayPool.publish(remoteRelays, event)
+        successCount++
+        successfulIds.push(event.id)
+        console.log(`✅ Synced event ${event.id.slice(0, 8)}`)
+      } catch (error) {
+        console.warn(`⚠️ Failed to sync event ${event.id.slice(0, 8)}:`, error)
+      }
+    }
+
+    console.log(`✅ Synced ${successCount}/${uniqueEvents.length} events to remote relays`)
+    
+    // Clear syncing state and offline tracking for successful events
+    successfulIds.forEach(eventId => {
+      syncingEvents.delete(eventId)
+      offlineCreatedEvents.delete(eventId)
+      notifySyncStateChange(eventId, false)
+    })
+    
+    // Clear syncing state for failed events
+    uniqueEvents.forEach(event => {
+      if (!successfulIds.includes(event.id)) {
+        syncingEvents.delete(event.id)
+        notifySyncStateChange(event.id, false)
+      }
+    })
+  } catch (error) {
+    console.error('❌ Error during offline sync:', error)
+  } finally {
+    isSyncing = false
+  }
+}
+