chore: bump version to 0.6.5

- Click timestamp to open highlight event in user's native Nostr app
- Reuses existing native link logic (nostr:nevent)
- Simple and DRY implementation

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

@@ -25,6 +25,11 @@
     <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." />
+    
+    <!-- Default to system theme until settings load from Nostr -->
+    <script>
+      document.documentElement.className = 'theme-system';
+    </script>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boris",
-  "version": "0.5.5",
+  "version": "0.6.5",
   "description": "A minimal nostr client for bookmark management",
   "homepage": "https://read.withboris.com/",
   "type": "module",
@@ -12,8 +12,11 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-regular-svg-icons": "^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,22 +26,30 @@
     "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-plugin-pwa": "^1.0.3",

postcss.config.js

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

src/App.tsx

@@ -70,8 +70,66 @@ function AppRoutes({
           />
         } 
       />
+      <Route 
+        path="/explore/writings" 
+        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="/p/:npub" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
+      <Route 
+        path="/p/:npub/writings" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -216,7 +274,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

@@ -1,4 +1,5 @@
 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'
@@ -183,7 +184,7 @@ const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave })
     }
   }
 
-  return (
+  return createPortal(
     <div className="modal-overlay" onClick={onClose}>
       <div className="modal-content" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
@@ -280,7 +281,8 @@ const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave })
           </div>
         </form>
       </div>
-    </div>
+    </div>,
+    document.body
   )
 }
 

src/components/AuthorCard.tsx

@@ -1,14 +1,18 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 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'
+import { nip19 } from 'nostr-tools'
 
 interface AuthorCardProps {
   authorPubkey: string
+  clickable?: boolean
 }
 
-const AuthorCard: React.FC<AuthorCardProps> = ({ authorPubkey }) => {
+const AuthorCard: React.FC<AuthorCardProps> = ({ authorPubkey, clickable = true }) => {
+  const navigate = useNavigate()
   const profile = useEventModel(Models.ProfileModel, [authorPubkey])
   
   const getAuthorName = () => {
@@ -20,8 +24,19 @@ const AuthorCard: React.FC<AuthorCardProps> = ({ authorPubkey }) => {
   const authorImage = profile?.picture || profile?.image
   const authorBio = profile?.about
   
+  const handleClick = () => {
+    if (clickable) {
+      const npub = nip19.npubEncode(authorPubkey)
+      navigate(`/p/${npub}`)
+    }
+  }
+  
   return (
-    <div className="author-card">
+    <div 
+      className={`author-card ${clickable ? 'author-card-clickable' : ''}`}
+      onClick={handleClick}
+      style={clickable ? { cursor: 'pointer' } : undefined}
+    >
       <div className="author-card-avatar">
         {authorImage ? (
           <img src={authorImage} alt={getAuthorName()} />

src/components/BlogPostCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCalendar, faUser } from '@fortawesome/free-solid-svg-icons'
+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'
@@ -28,15 +28,19 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href }) => {
       className="blog-post-card"
       style={{ textDecoration: 'none', color: 'inherit' }}
     >
-      {post.image && (
-        <div className="blog-post-card-image">
+      <div className="blog-post-card-image">
+        {post.image ? (
           <img 
             src={post.image} 
             alt={post.title}
             loading="lazy"
           />
-        </div>
-      )}
+        ) : (
+          <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 && (

src/components/BookmarkItem.tsx

@@ -110,8 +110,6 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     hasUrls,
     extractedUrls,
     onSelectUrl,
-    getIconForUrlType,
-    firstUrlClassification,
     authorNpub,
     eventNevent,
     getAuthorDisplayName,
@@ -127,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,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faChevronLeft, faBookmark, faSpinner, faList, faThLarge, faImage, faRotate } from '@fortawesome/free-solid-svg-icons'
 import { formatDistanceToNow } from 'date-fns'
@@ -10,6 +10,8 @@ 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[]
@@ -48,6 +50,19 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   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)
@@ -124,7 +139,16 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
           </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 
@@ -137,37 +161,20 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
               />
             )}
           </div>
-          {onRefresh && (
-            <div className="refresh-section" style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: '0.5rem',
-              padding: '1rem',
-              marginTop: '1rem',
-              borderTop: '1px solid var(--border-color)',
-              fontSize: '0.85rem',
-              color: 'var(--text-secondary)'
-            }}>
-              <IconButton
-                icon={faRotate}
-                onClick={onRefresh}
-                title="Refresh bookmarks"
-                ariaLabel="Refresh bookmarks"
-                variant="ghost"
-                disabled={isRefreshing}
-                spin={isRefreshing}
-              />
-              {lastFetchTime && (
-                <span>
-                  Updated {formatDistanceToNow(lastFetchTime, { addSuffix: true })}
-                </span>
-              )}
-            </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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBookmark, faUserLock, faChevronDown, faChevronUp, faGlobe } from '@fortawesome/free-solid-svg-icons'
 import { IndividualBookmark } from '../../types/bookmarks'
@@ -8,8 +9,9 @@ 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'
+import { getEventUrl } from '../../config/nostrGateways'
 
 interface CardViewProps {
   bookmark: IndividualBookmark
@@ -18,7 +20,6 @@ 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
@@ -35,7 +36,6 @@ export const CardView: React.FC<CardViewProps> = ({
   extractedUrls,
   onSelectUrl,
   getIconForUrlType,
-  firstUrlClassification,
   authorNpub,
   eventNevent,
   getAuthorDisplayName,
@@ -44,17 +44,49 @@ export const CardView: React.FC<CardViewProps> = ({
   articleSummary,
   settings
 }) => {
-  const cachedImage = useImageCache(articleImage, 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 && cachedImage && (
+    <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(${cachedImage})` }}
@@ -85,6 +117,7 @@ export const CardView: React.FC<CardViewProps> = ({
             rel="noopener noreferrer"
             className="bookmark-date-link"
             title="Open event in search"
+            onClick={(e) => e.stopPropagation()}
           >
             {formatDate(bookmark.created_at)}
           </a>
@@ -96,23 +129,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>
             )
@@ -120,7 +152,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'}
             >
@@ -149,7 +181,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'}
         >
@@ -159,21 +191,16 @@ export const CardView: React.FC<CardViewProps> = ({
       
       <div className="bookmark-footer">
         <div className="bookmark-meta-minimal">
-          <a
-            href={getProfileUrl(authorNpub)}
-            target="_blank"
-            rel="noopener noreferrer"
+          <Link
+            to={`/p/${authorNpub}`}
             className="author-link-minimal"
-            title="Open author in search"
+            title="Open author profile"
+            onClick={(e) => e.stopPropagation()}
           >
             {getAuthorDisplayName()}
-          </a>
+          </Link>
         </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

@@ -4,7 +4,8 @@ import { faBookmark, faUserLock, faGlobe } from '@fortawesome/free-solid-svg-ico
 import { IndividualBookmark } from '../../types/bookmarks'
 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">
@@ -76,22 +86,7 @@ export const CompactView: React.FC<CompactViewProps> = ({
           </div>
         )}
         <span className="bookmark-date-compact">{formatDateCompact(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>
-        )}
+        {/* CTA removed */}
       </div>
     </div>
   )

src/components/BookmarkViews/LargeView.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate } from '../../utils/bookmarkUtils'
@@ -6,7 +7,7 @@ import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
 import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
 import { UserSettings } from '../../services/settingsService'
-import { getProfileUrl, getEventUrl } from '../../config/nostrGateways'
+import { getEventUrl } from '../../config/nostrGateways'
 
 interface LargeViewProps {
   bookmark: IndividualBookmark
@@ -15,7 +16,6 @@ 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
@@ -32,7 +32,6 @@ export const LargeView: React.FC<LargeViewProps> = ({
   extractedUrls,
   onSelectUrl,
   getIconForUrlType,
-  firstUrlClassification,
   previewImage,
   authorNpub,
   eventNevent,
@@ -44,12 +43,28 @@ export const LargeView: React.FC<LargeViewProps> = ({
   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' : ''}`}>
+    <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 {
@@ -79,14 +94,13 @@ export const LargeView: React.FC<LargeViewProps> = ({
         
         <div className="large-footer">
           <span className="large-author">
-            <a
-              href={getProfileUrl(authorNpub)}
-              target="_blank"
-              rel="noopener noreferrer"
+            <Link
+              to={`/p/${authorNpub}`}
               className="author-link-minimal"
+              onClick={(e) => e.stopPropagation()}
             >
               {getAuthorDisplayName()}
-            </a>
+            </Link>
           </span>
           
           {eventNevent && (
@@ -95,17 +109,13 @@ export const LargeView: React.FC<LargeViewProps> = ({
               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

@@ -3,6 +3,7 @@ import { useParams, useLocation, useNavigate } from 'react-router-dom'
 import { Hooks } from 'applesauce-react'
 import { useEventStore } from 'applesauce-react/hooks'
 import { RelayPool } from 'applesauce-relay'
+import { nip19 } from 'nostr-tools'
 import { useSettings } from '../hooks/useSettings'
 import { useArticleLoader } from '../hooks/useArticleLoader'
 import { useExternalUrlLoader } from '../hooks/useExternalUrlLoader'
@@ -25,25 +26,55 @@ interface BookmarksProps {
 }
 
 const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
-  const { naddr } = useParams<{ naddr?: string }>()
+  const { naddr, npub } = useParams<{ naddr?: string; npub?: string }>()
   const location = useLocation()
   const navigate = useNavigate()
   const previousLocationRef = useRef<string>()
   
+  // Check for highlight navigation state
+  const navigationState = location.state as { highlightId?: string; openHighlights?: boolean } | null
+  
   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 === '/me'
+  const showExplore = location.pathname.startsWith('/explore')
+  const showMe = location.pathname.startsWith('/me')
+  const showProfile = location.pathname.startsWith('/p/')
   
-  // Track previous location for going back from settings/me/explore
+  // Extract tab from explore routes
+  const exploreTab = location.pathname === '/explore/writings' ? 'writings' : 'highlights'
+  
+  // Extract tab from me routes
+  const meTab = location.pathname === '/me' ? 'highlights' : 
+                location.pathname === '/me/highlights' ? 'highlights' :
+                location.pathname === '/me/reading-list' ? 'reading-list' :
+                location.pathname === '/me/archive' ? 'archive' :
+                location.pathname === '/me/writings' ? 'writings' : 'highlights'
+  
+  // Extract tab from profile routes
+  const profileTab = location.pathname.endsWith('/writings') ? 'writings' : 'highlights'
+  
+  // Decode npub to pubkey for profile view
+  let profilePubkey: string | undefined
+  if (npub && showProfile) {
+    try {
+      const decoded = nip19.decode(npub)
+      if (decoded.type === 'npub') {
+        profilePubkey = decoded.data
+      }
+    } catch (err) {
+      console.error('Failed to decode npub:', err)
+    }
+  }
+  
+  // Track previous location for going back from settings/me/explore/profile
   useEffect(() => {
-    if (!showSettings && !showMe && !showExplore) {
+    if (!showSettings && !showMe && !showExplore && !showProfile) {
       previousLocationRef.current = location.pathname
     }
-  }, [location.pathname, showSettings, showMe, showExplore])
+  }, [location.pathname, showSettings, showMe, showExplore, showProfile])
     
   const activeAccount = Hooks.useActiveAccount()
   const accountManager = Hooks.useAccountManager()
@@ -100,6 +131,19 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location.pathname])
 
+  // Handle highlight navigation from explore page
+  useEffect(() => {
+    if (navigationState?.highlightId && navigationState?.openHighlights) {
+      // Open the highlights sidebar
+      setIsHighlightsCollapsed(false)
+      // Select the highlight (scroll happens automatically in useHighlightInteractions)
+      setSelectedHighlightId(navigationState.highlightId)
+      
+      // Clear the state after handling to avoid re-triggering
+      navigate(location.pathname, { replace: true, state: {} })
+    }
+  }, [navigationState, setIsHighlightsCollapsed, setSelectedHighlightId, navigate, location.pathname])
+
   const {
     bookmarks,
     bookmarksLoading,
@@ -205,6 +249,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       showSettings={showSettings}
       showExplore={showExplore}
       showMe={showMe}
+      showProfile={showProfile}
       bookmarks={bookmarks}
       bookmarksLoading={bookmarksLoading}
       viewMode={viewMode}
@@ -260,10 +305,13 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       onCreateHighlight={handleCreateHighlight}
       hasActiveAccount={!!(activeAccount && relayPool)}
       explore={showExplore ? (
-        relayPool ? <Explore relayPool={relayPool} /> : null
+        relayPool ? <Explore relayPool={relayPool} activeTab={exploreTab} /> : null
       ) : undefined}
       me={showMe ? (
-        relayPool ? <Me relayPool={relayPool} /> : null
+        relayPool ? <Me relayPool={relayPool} activeTab={meTab} /> : null
+      ) : undefined}
+      profile={showProfile && profilePubkey ? (
+        relayPool ? <Me relayPool={relayPool} activeTab={profileTab} pubkey={profilePubkey} /> : null
       ) : undefined}
       toastMessage={toastMessage ?? undefined}
       toastType={toastType}

src/components/ContentPanel.tsx

@@ -1,8 +1,15 @@
-import React, { useMemo, useState, useEffect } 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, faCheck } 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'
@@ -23,6 +30,11 @@ import {
 } 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
@@ -49,6 +61,9 @@ interface ContentPanelProps {
   // For highlight creation
   onTextSelection?: (text: string) => void
   onClearSelection?: () => void
+  // For reading progress indicator positioning
+  isSidebarCollapsed?: boolean
+  isHighlightsCollapsed?: boolean
 }
 
 const ContentPanel: React.FC<ContentPanelProps> = ({ 
@@ -74,11 +89,20 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   currentUserPubkey,
   followedPubkeys = new Set(),
   onTextSelection,
-  onClearSelection
+  onClearSelection,
+  isSidebarCollapsed = false,
+  isHighlightsCollapsed = false
 }) => {
   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({
@@ -101,6 +125,41 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     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
@@ -112,6 +171,152 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
   // Determine if we're on a nostr-native article (/a/) or external URL (/r/)
   const isNostrArticle = selectedUrl && selectedUrl.startsWith('nostr:')
+  const isExternalVideo = !isNostrArticle && !!selectedUrl && ['youtube', 'video'].includes(classifyUrl(selectedUrl).type)
+
+  // Track external video duration (in seconds) for display in header
+  const [videoDurationSec, setVideoDurationSec] = useState<number | null>(null)
+  // Load YouTube metadata/captions when applicable
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!selectedUrl) return setYtMeta(null)
+        const id = extractYouTubeId(selectedUrl)
+        if (!id) return setYtMeta(null)
+        const locale = navigator?.language?.split('-')[0] || 'en'
+        const data = await getYouTubeMeta(id, locale)
+        if (data) setYtMeta({ title: data.title, description: data.description, transcript: data.transcript })
+      } catch {
+        setYtMeta(null)
+      }
+    })()
+  }, [selectedUrl])
+
+  const formatDuration = (totalSeconds: number): string => {
+    const hours = Math.floor(totalSeconds / 3600)
+    const minutes = Math.floor((totalSeconds % 3600) / 60)
+    const seconds = Math.floor(totalSeconds % 60)
+    const mm = hours > 0 ? String(minutes).padStart(2, '0') : String(minutes)
+    const ss = String(seconds).padStart(2, '0')
+    return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`
+  }
+  
+
+  // Get article links for menu
+  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(() => {
@@ -212,29 +417,132 @@ 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]}>
+          <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}
         summary={summary}
         published={published}
-        readingTimeText={readingStats ? readingStats.text : null}
+        readingTimeText={isExternalVideo ? (videoDurationSec !== null ? formatDuration(videoDurationSec) : null) : (readingStats ? readingStats.text : null)}
         hasHighlights={hasHighlights}
         highlightCount={relevantHighlights.length}
         settings={settings}
         highlights={relevantHighlights}
         highlightVisibility={highlightVisibility}
       />
-      {markdown || html ? (
+      {isExternalVideo ? (
+        <>
+          <div className="reader-video">
+            <ReactPlayer 
+              url={selectedUrl as string} 
+              controls 
+              width="100%"
+              height="auto"
+              style={{ 
+                width: '100%', 
+                height: 'auto', 
+                aspectRatio: '16/9' 
+              }}
+              onDuration={(d) => setVideoDurationSec(Math.floor(d))}
+            />
+          </div>
+          {ytMeta?.description && (
+            <div className="large-text" style={{ color: '#ddd', padding: '0 0.75rem', whiteSpace: 'pre-wrap', marginBottom: '0.75rem' }}>
+              {ytMeta.description}
+            </div>
+          )}
+          {ytMeta?.transcript && (
+            <div style={{ padding: '0 0.75rem 1rem 0.75rem' }}>
+              <h3 style={{ margin: '1rem 0 0.5rem 0', fontSize: '1rem', color: '#aaa' }}>Transcript</h3>
+              <div className="large-text" style={{ whiteSpace: 'pre-wrap', color: '#ddd' }}>
+                {ytMeta.transcript}
+              </div>
+            </div>
+          )}
+          <div className="article-menu-container">
+            <div className="article-menu-wrapper" ref={videoMenuRef}>
+              <button
+                className="article-menu-btn"
+                onClick={toggleVideoMenu}
+                title="More options"
+              >
+                <FontAwesomeIcon icon={faEllipsisH} />
+              </button>
+              {showVideoMenu && (
+                <div className="article-menu">
+                  <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 ? (
@@ -262,6 +570,81 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             />
           )}
           
+          {/* 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">
@@ -272,7 +655,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                 title={isMarkedAsRead ? 'Already Marked as Read' : 'Mark as Read'}
               >
                 <FontAwesomeIcon 
-                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheck : faBooks} 
+                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
                   spin={isCheckingReadStatus} 
                 />
                 <span>
@@ -294,7 +677,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
           <p>No readable content found for this URL.</p>
         </div>
       )}
-    </div>
+      </div>
+    </>
   )
 }
 

src/components/Explore.tsx

@@ -1,26 +1,49 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faExclamationCircle, faNewspaper } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner, faExclamationCircle, faNewspaper, faPenToSquare, faHighlighter } 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 { fetchContacts } from '../services/contactService'
 import { fetchBlogPostsFromAuthors, BlogPostPreview } from '../services/exploreService'
+import { fetchHighlightsFromAuthors } from '../services/highlightService'
+import { Highlight } from '../types/highlights'
 import BlogPostCard from './BlogPostCard'
-import { getCachedPosts, upsertCachedPost, setCachedPosts } from '../services/exploreCache'
+import { HighlightItem } from './HighlightItem'
+import { getCachedPosts, upsertCachedPost, setCachedPosts, getCachedHighlights, upsertCachedHighlight, setCachedHighlights } from '../services/exploreCache'
+import { usePullToRefresh } from '../hooks/usePullToRefresh'
+import PullToRefreshIndicator from './PullToRefreshIndicator'
+import { classifyHighlights } from '../utils/highlightClassification'
 
 interface ExploreProps {
   relayPool: RelayPool
+  activeTab?: TabType
 }
 
-const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
+type TabType = 'writings' | 'highlights'
+
+const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }) => {
   const activeAccount = Hooks.useActiveAccount()
+  const navigate = useNavigate()
+  const [activeTab, setActiveTab] = useState<TabType>(propActiveTab || 'highlights')
   const [blogPosts, setBlogPosts] = useState<BlogPostPreview[]>([])
+  const [highlights, setHighlights] = useState<Highlight[]>([])
+  const [followedPubkeys, setFollowedPubkeys] = useState<Set<string>>(new Set())
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const exploreContainerRef = useRef<HTMLDivElement>(null)
+  const [refreshTrigger, setRefreshTrigger] = useState(0)
+
+  // Update local state when prop changes
+  useEffect(() => {
+    if (propActiveTab) {
+      setActiveTab(propActiveTab)
+    }
+  }, [propActiveTab])
 
   useEffect(() => {
-    const loadBlogPosts = async () => {
+    const loadData = async () => {
       if (!activeAccount) {
         setError('Please log in to explore content from your friends')
         setLoading(false)
@@ -28,14 +51,18 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
       }
 
       try {
-        // show spinner but keep existing posts
+        // show spinner but keep existing data
         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)
+        const cachedPosts = getCachedPosts(activeAccount.pubkey)
+        if (cachedPosts && cachedPosts.length > 0 && blogPosts.length === 0) {
+          setBlogPosts(cachedPosts)
+        }
+        const cachedHighlights = getCachedHighlights(activeAccount.pubkey)
+        if (cachedHighlights && cachedHighlights.length > 0 && highlights.length === 0) {
+          setHighlights(cachedHighlights)
         }
 
         // Fetch the user's contacts (friends)
@@ -43,15 +70,19 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
           relayPool,
           activeAccount.pubkey,
           (partial) => {
-            // When local contacts are available, kick off early posts fetch
+            // Store followed pubkeys for highlight classification
+            setFollowedPubkeys(partial)
+            // When local contacts are available, kick off early fetch
             if (partial.size > 0) {
               const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+              const partialArray = Array.from(partial)
+              
+              // Fetch blog posts
               fetchBlogPostsFromAuthors(
                 relayPool,
-                Array.from(partial),
+                partialArray,
                 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
@@ -65,7 +96,6 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
                   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)
@@ -78,22 +108,52 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
                   return merged
                 })
               })
+              
+              // Fetch highlights
+              fetchHighlightsFromAuthors(
+                relayPool,
+                partialArray,
+                (highlight) => {
+                  setHighlights((prev) => {
+                    const exists = prev.some(h => h.id === highlight.id)
+                    if (exists) return prev
+                    const next = [...prev, highlight]
+                    return next.sort((a, b) => b.created_at - a.created_at)
+                  })
+                  setCachedHighlights(activeAccount.pubkey, upsertCachedHighlight(activeAccount.pubkey, highlight))
+                }
+              ).then((all) => {
+                setHighlights((prev) => {
+                  const byId = new Map(prev.map(h => [h.id, h]))
+                  for (const highlight of all) byId.set(highlight.id, highlight)
+                  const merged = Array.from(byId.values()).sort((a, b) => b.created_at - a.created_at)
+                  setCachedHighlights(activeAccount.pubkey, merged)
+                  return merged
+                })
+              })
             }
           }
         )
         
         if (contacts.size === 0) {
-          setError('You are not following anyone yet. Follow some people to see their blog posts!')
+          setError('You are not following anyone yet. Follow some people to see their content!')
           setLoading(false)
           return
         }
 
+        // Store final followed pubkeys
+        setFollowedPubkeys(contacts)
+
         // 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)
+        const contactsArray = Array.from(contacts)
+        const [posts, userHighlights] = await Promise.all([
+          fetchBlogPostsFromAuthors(relayPool, contactsArray, relayUrls),
+          fetchHighlightsFromAuthors(relayPool, contactsArray)
+        ])
 
-        if (posts.length === 0) {
-          setError('No blog posts found from your friends yet')
+        if (posts.length === 0 && userHighlights.length === 0) {
+          setError('No content found from your friends yet')
         }
 
         setBlogPosts((prev) => {
@@ -107,16 +167,32 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
           setCachedPosts(activeAccount.pubkey, merged)
           return merged
         })
+
+        setHighlights((prev) => {
+          const byId = new Map(prev.map(h => [h.id, h]))
+          for (const highlight of userHighlights) byId.set(highlight.id, highlight)
+          const merged = Array.from(byId.values()).sort((a, b) => b.created_at - a.created_at)
+          setCachedHighlights(activeAccount.pubkey, merged)
+          return merged
+        })
       } catch (err) {
-        console.error('Failed to load blog posts:', err)
-        setError('Failed to load blog posts. Please try again.')
+        console.error('Failed to load data:', err)
+        setError('Failed to load content. Please try again.')
       } finally {
         setLoading(false)
       }
     }
 
-    loadBlogPosts()
-  }, [relayPool, activeAccount, blogPosts.length])
+    loadData()
+  }, [relayPool, activeAccount, blogPosts.length, highlights.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
@@ -132,6 +208,96 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
     return `/a/${naddr}`
   }
 
+  const handleHighlightClick = (highlightId: string) => {
+    const highlight = highlights.find(h => h.id === highlightId)
+    if (!highlight) return
+
+    // For nostr-native articles
+    if (highlight.eventReference) {
+      // Convert eventReference to naddr
+      if (highlight.eventReference.includes(':')) {
+        const parts = highlight.eventReference.split(':')
+        const kind = parseInt(parts[0])
+        const pubkey = parts[1]
+        const identifier = parts[2] || ''
+        
+        const naddr = nip19.naddrEncode({
+          kind,
+          pubkey,
+          identifier
+        })
+        navigate(`/a/${naddr}`, { state: { highlightId, openHighlights: true } })
+      } else {
+        // Already an naddr
+        navigate(`/a/${highlight.eventReference}`, { state: { highlightId, openHighlights: true } })
+      }
+    } 
+    // For web URLs
+    else if (highlight.urlReference) {
+      navigate(`/r/${encodeURIComponent(highlight.urlReference)}`, { state: { highlightId, openHighlights: true } })
+    }
+  }
+
+  // Classify highlights with levels based on user context
+  const classifiedHighlights = useMemo(() => {
+    return classifyHighlights(highlights, activeAccount?.pubkey, followedPubkeys)
+  }, [highlights, activeAccount?.pubkey, followedPubkeys])
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'writings':
+        return blogPosts.length === 0 ? (
+          <div className="explore-empty" style={{ gridColumn: '1/-1', textAlign: 'center', color: 'var(--text-secondary)' }}>
+            <p>No blog posts found yet.</p>
+          </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)}
+              />
+            ))}
+          </div>
+        )
+
+      case 'highlights':
+        return classifiedHighlights.length === 0 ? (
+          <div className="explore-empty" style={{ gridColumn: '1/-1', textAlign: 'center', color: 'var(--text-secondary)' }}>
+            <p>No highlights yet. Your friends should start highlighting content!</p>
+          </div>
+        ) : (
+          <div className="explore-grid">
+            {classifiedHighlights.map((highlight) => (
+              <HighlightItem
+                key={highlight.id}
+                highlight={highlight}
+                relayPool={relayPool}
+                onHighlightClick={handleHighlightClick}
+              />
+            ))}
+          </div>
+        )
+
+      default:
+        return null
+    }
+  }
+
+  // Only show full loading screen if we don't have any data yet
+  const hasData = highlights.length > 0 || blogPosts.length > 0
+
+  if (loading && !hasData) {
+    return (
+      <div className="explore-container">
+        <div className="explore-loading">
+          <FontAwesomeIcon icon={faSpinner} spin size="2x" />
+        </div>
+      </div>
+    )
+  }
+
   if (error) {
     return (
       <div className="explore-container">
@@ -144,35 +310,52 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
   }
 
   return (
-    <div className="explore-container">
+    <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
+          Discover highlights and blog posts from your friends and others
         </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>
+        
+        {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('/explore')}
+          >
+            <FontAwesomeIcon icon={faHighlighter} />
+            <span className="tab-label">Highlights</span>
+          </button>
+          <button
+            className={`me-tab ${activeTab === 'writings' ? 'active' : ''}`}
+            data-tab="writings"
+            onClick={() => navigate('/explore/writings')}
+          >
+            <FontAwesomeIcon icon={faPenToSquare} />
+            <span className="tab-label">Writings</span>
+          </button>
+        </div>
       </div>
+
+      {renderTabContent()}
     </div>
   )
 }

src/components/HighlightCitation.tsx

@@ -0,0 +1,104 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+import { nip19 } from 'nostr-tools'
+import { fetchArticleTitle } from '../services/articleTitleResolver'
+import { Highlight } from '../types/highlights'
+
+interface HighlightCitationProps {
+  highlight: Highlight
+  relayPool?: RelayPool | null
+}
+
+export const HighlightCitation: React.FC<HighlightCitationProps> = ({
+  highlight,
+  relayPool
+}) => {
+  const [articleTitle, setArticleTitle] = useState<string>()
+  
+  // Extract author pubkey from p tag directly
+  const authorPubkey = useMemo(() => {
+    // First try the extracted author from highlight.author
+    if (highlight.author) {
+      return highlight.author
+    }
+    
+    // Fallback: extract directly from p tag
+    const pTag = highlight.tags.find(t => t[0] === 'p')
+    if (pTag && pTag[1]) {
+      console.log('📝 Found author from p tag:', pTag[1])
+      return pTag[1]
+    }
+    
+    return undefined
+  }, [highlight.author, highlight.tags])
+  
+  const authorProfile = useEventModel(Models.ProfileModel, authorPubkey ? [authorPubkey] : null)
+  
+  useEffect(() => {
+    if (!highlight.eventReference || !relayPool) {
+      return
+    }
+    
+    const loadTitle = async () => {
+      try {
+        if (!highlight.eventReference) return
+        
+        // Convert eventReference to naddr if needed
+        let naddr: string
+        if (highlight.eventReference.includes(':')) {
+          const parts = highlight.eventReference.split(':')
+          const kind = parseInt(parts[0])
+          const pubkey = parts[1]
+          const identifier = parts[2] || ''
+          
+          naddr = nip19.naddrEncode({
+            kind,
+            pubkey,
+            identifier
+          })
+        } else {
+          naddr = highlight.eventReference
+        }
+        
+        const title = await fetchArticleTitle(relayPool, naddr)
+        if (title) {
+          setArticleTitle(title)
+        }
+      } catch (error) {
+        console.error('Failed to load article title:', error)
+      }
+    }
+    
+    loadTitle()
+  }, [highlight.eventReference, relayPool])
+  
+  const authorName = authorProfile?.name || authorProfile?.display_name
+  
+  // For nostr-native content with article reference
+  if (highlight.eventReference && (authorName || articleTitle)) {
+    return (
+      <div className="highlight-citation">
+        — {authorName || 'Unknown'}{articleTitle ? `, ${articleTitle}` : ''}
+      </div>
+    )
+  }
+  
+  // For web URLs
+  if (highlight.urlReference) {
+    try {
+      const url = new URL(highlight.urlReference)
+      return (
+        <div className="highlight-citation">
+          — {url.hostname}
+        </div>
+      )
+    } catch {
+      return null
+    }
+  }
+  
+  return null
+}
+

src/components/HighlightItem.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer, faTrash, faEllipsisH } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faHighlighter, faTrash, faEllipsisH, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
+import { faComments } from '@fortawesome/free-regular-svg-icons'
 import { Highlight } from '../types/highlights'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models, IEventStore } from 'applesauce-core'
@@ -15,6 +16,7 @@ import { createDeletionRequest } from '../services/deletionService'
 import ConfirmDialog from './ConfirmDialog'
 import { getNostrUrl } from '../config/nostrGateways'
 import CompactButton from './CompactButton'
+import { HighlightCitation } from './HighlightCitation'
 
 interface HighlightWithLevel extends Highlight {
   level?: 'mine' | 'friends' | 'nostrverse'
@@ -123,7 +125,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     }
   }
   
-  const getHighlightLink = () => {
+  const getHighlightLinks = () => {
     // Encode the highlight event itself (kind 9802) as a nevent
     // Get non-local relays for the hint
     const relayHints = RELAYS.filter(r => 
@@ -136,10 +138,14 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
       author: highlight.pubkey,
       kind: 9802
     })
-    return getNostrUrl(nevent)
+    
+    return {
+      portal: getNostrUrl(nevent),
+      native: `nostr:${nevent}`
+    }
   }
   
-  const highlightLink = getHighlightLink()
+  const highlightLinks = getHighlightLinks()
   
   // Handle rebroadcast to all relays
   const handleRebroadcast = async (e: React.MouseEvent) => {
@@ -204,13 +210,13 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     // Always show relay list, use plane icon for local-only
     const isLocalOrOffline = highlight.isLocalOnly || showOfflineIndicator
     
-    // Show server icon with relay info if available
+    // Show highlighter 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,
+        icon: isLocalOrOffline ? faPlane : faHighlighter,
         tooltip: relayNames.join('\n'),
         spin: false
       }
@@ -221,7 +227,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
       )
       return {
-        icon: faServer,
+        icon: faHighlighter,
         tooltip: relayNames.join('\n'),
         spin: false
       }
@@ -232,7 +238,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
       url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
     )
     return {
-      icon: faServer,
+      icon: faHighlighter,
       tooltip: relayNames.join('\n'),
       spin: false
     }
@@ -283,9 +289,15 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     setShowMenu(!showMenu)
   }
   
-  const handleOpenExternal = (e: React.MouseEvent) => {
+  const handleOpenPortal = (e: React.MouseEvent) => {
     e.stopPropagation()
-    window.open(highlightLink, '_blank', 'noopener,noreferrer')
+    window.open(highlightLinks.portal, '_blank', 'noopener,noreferrer')
+    setShowMenu(false)
+  }
+
+  const handleOpenNative = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    window.location.href = highlightLinks.native
     setShowMenu(false)
   }
   
@@ -308,7 +320,10 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         <CompactButton
           className="highlight-timestamp"
           title={new Date(highlight.created_at * 1000).toLocaleString()}
-          onClick={(e) => e.stopPropagation()}
+          onClick={(e) => {
+            e.stopPropagation()
+            window.location.href = highlightLinks.native
+          }}
         >
           {formatDateCompact(highlight.created_at)}
         </CompactButton>
@@ -328,8 +343,14 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
           {highlight.content}
         </blockquote>
         
+        <HighlightCitation
+          highlight={highlight}
+          relayPool={relayPool}
+        />
+        
         {highlight.comment && (
           <div className="highlight-comment">
+            <FontAwesomeIcon icon={faComments} flip="horizontal" className="highlight-comment-icon" />
             {highlight.comment}
           </div>
         )}
@@ -364,11 +385,18 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
               <div className="highlight-menu">
                 <button
                   className="highlight-menu-item"
-                  onClick={handleOpenExternal}
+                  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"

src/components/HighlightsPanel.tsx

@@ -1,11 +1,13 @@
-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'
@@ -57,12 +59,24 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
 }) => {
   const [showHighlights, setShowHighlights] = useState(true)
   const [localHighlights, setLocalHighlights] = useState(highlights)
+  const highlightsListRef = useRef<HTMLDivElement>(null)
   
   const handleToggleHighlights = () => {
     const newValue = !showHighlights
     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(() => {
@@ -127,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}

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,81 @@ 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"
-                style={{ color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
-              >
-                <FontAwesomeIcon icon={faNetworkWired} />
-              </button>
-              <button
+                ariaLabel="Toggle nostrverse highlights"
+                variant="ghost"
+                style={{ 
+                  color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined,
+                  opacity: highlightVisibility.nostrverse ? 1 : 0.4 
+                }}
+              />
+              <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="ghost"
                 disabled={!currentUserPubkey}
-              >
-                <FontAwesomeIcon icon={faUserGroup} />
-              </button>
-              <button
+                style={{ 
+                  color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined,
+                  opacity: highlightVisibility.friends ? 1 : 0.4 
+                }}
+              />
+              <IconButton
+                icon={faUser}
                 onClick={() => onHighlightVisibilityChange({ 
                   ...highlightVisibility, 
                   mine: !highlightVisibility.mine 
                 })}
-                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="ghost"
                 disabled={!currentUserPubkey}
-              >
-                <FontAwesomeIcon icon={faUser} />
-              </button>
+                style={{ 
+                  color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined,
+                  opacity: highlightVisibility.mine ? 1 : 0.4 
+                }}
+              />
             </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

@@ -12,6 +12,7 @@ interface IconButtonProps {
   disabled?: boolean
   spin?: boolean
   className?: string
+  style?: React.CSSProperties
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
@@ -23,7 +24,8 @@ const IconButton: React.FC<IconButtonProps> = ({
   size = 33,
   disabled = false,
   spin = false,
-  className = ''
+  className = '',
+  style
 }) => {
   return (
     <button
@@ -31,7 +33,7 @@ const IconButton: React.FC<IconButtonProps> = ({
       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

@@ -1,39 +1,67 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faExclamationCircle, faHighlighter, faBookmark } from '@fortawesome/free-solid-svg-icons'
+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 } from '../services/exploreService'
-import { Bookmark } from '../types/bookmarks'
+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'
+import { getProfileUrl } from '../config/nostrGateways'
 
 interface MeProps {
   relayPool: RelayPool
+  activeTab?: TabType
+  pubkey?: string // Optional pubkey for viewing other users' profiles
 }
 
-type TabType = 'highlights' | 'reading-list' | 'archive'
+type TabType = 'highlights' | 'reading-list' | 'archive' | 'writings'
 
-const Me: React.FC<MeProps> = ({ relayPool }) => {
+const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: propPubkey }) => {
   const activeAccount = Hooks.useActiveAccount()
-  const [activeTab, setActiveTab] = useState<TabType>('highlights')
+  const navigate = useNavigate()
+  const [activeTab, setActiveTab] = useState<TabType>(propActiveTab || 'highlights')
+  
+  // Use provided pubkey or fall back to active account
+  const viewingPubkey = propPubkey || activeAccount?.pubkey
+  const isOwnProfile = !propPubkey || (activeAccount?.pubkey === propPubkey)
   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')
+      if (!viewingPubkey) {
+        setError(isOwnProfile ? 'Please log in to view your data' : 'Invalid profile')
         setLoading(false)
         return
       }
@@ -42,21 +70,47 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
         setLoading(true)
         setError(null)
 
-        // Fetch highlights and read articles
-        const [userHighlights, userReadArticles] = await Promise.all([
-          fetchHighlights(relayPool, activeAccount.pubkey),
-          fetchReadArticlesWithData(relayPool, activeAccount.pubkey)
+        // Seed from cache if available to avoid empty flash (own profile only)
+        if (isOwnProfile) {
+          const cached = getCachedMeData(viewingPubkey)
+          if (cached) {
+            setHighlights(cached.highlights)
+            setBookmarks(cached.bookmarks)
+            setReadArticles(cached.readArticles)
+          }
+        }
+
+        // Fetch highlights and writings (public data)
+        const [userHighlights, userWritings] = await Promise.all([
+          fetchHighlights(relayPool, viewingPubkey),
+          fetchBlogPostsFromAuthors(relayPool, [viewingPubkey], RELAYS)
         ])
 
         setHighlights(userHighlights)
-        setReadArticles(userReadArticles)
+        setWritings(userWritings)
 
-        // Fetch bookmarks using callback pattern
-        try {
-          await fetchBookmarks(relayPool, activeAccount, setBookmarks)
-        } catch (err) {
-          console.warn('Failed to load bookmarks:', err)
+        // Only fetch private data for own profile
+        if (isOwnProfile && activeAccount) {
+          const userReadArticles = await fetchReadArticlesWithData(relayPool, viewingPubkey)
+          setReadArticles(userReadArticles)
+
+          // Fetch bookmarks using callback pattern
+          let fetchedBookmarks: Bookmark[] = []
+          try {
+            await fetchBookmarks(relayPool, activeAccount, (newBookmarks) => {
+              fetchedBookmarks = newBookmarks
+              setBookmarks(newBookmarks)
+            })
+          } catch (err) {
+            console.warn('Failed to load bookmarks:', err)
+            setBookmarks([])
+          }
+
+          // Update cache with all fetched data
+          setCachedMeData(viewingPubkey, userHighlights, fetchedBookmarks, userReadArticles)
+        } else {
           setBookmarks([])
+          setReadArticles([])
         }
       } catch (err) {
         console.error('Failed to load data:', err)
@@ -67,10 +121,25 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
     }
 
     loadData()
-  }, [relayPool, activeAccount])
+  }, [relayPool, viewingPubkey, isOwnProfile, activeAccount, refreshTrigger])
+
+  // Pull-to-refresh
+  const pullToRefreshState = usePullToRefresh(meContainerRef, {
+    onRefresh: () => {
+      setRefreshTrigger(prev => prev + 1)
+    },
+    isRefreshing: loading
+  })
 
   const handleHighlightDelete = (highlightId: string) => {
-    setHighlights(prev => prev.filter(h => h.id !== highlightId))
+    setHighlights(prev => {
+      const updated = prev.filter(h => h.id !== highlightId)
+      // Update cache when highlight is deleted (own profile only)
+      if (isOwnProfile && viewingPubkey) {
+        updateCachedHighlights(viewingPubkey, updated)
+      }
+      return updated
+    })
   }
 
   const getPostUrl = (post: BlogPostPreview) => {
@@ -83,7 +152,51 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
     return `/a/${naddr}`
   }
 
-  if (loading) {
+  // 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">
@@ -108,8 +221,12 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
     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 className="explore-empty">
+            <p>
+              {isOwnProfile 
+                ? 'No highlights yet. Start highlighting content to see them here!'
+                : 'No highlights yet. You should shame them on nostr!'}
+            </p>
           </div>
         ) : (
           <div className="highlights-list me-highlights-list">
@@ -125,26 +242,59 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
         )
 
       case 'reading-list':
-        return bookmarks.length === 0 ? (
-          <div className="explore-error">
+        return allIndividualBookmarks.length === 0 ? (
+          <div className="explore-empty">
             <p>No bookmarks yet. Bookmark articles to see them here!</p>
           </div>
         ) : (
           <div className="bookmarks-list">
-            {bookmarks.map((bookmark) => (
-              <div key={bookmark.id} className="bookmark-item">
-                <a href={bookmark.url} target="_blank" rel="noopener noreferrer">
-                  <h3>{bookmark.title || 'Untitled'}</h3>
-                  {bookmark.content && <p>{bookmark.content.slice(0, 150)}...</p>}
-                </a>
-              </div>
-            ))}
+            <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">
+          <div className="explore-empty">
             <p>No read articles yet. Mark articles as read to see them here!</p>
           </div>
         ) : (
@@ -159,40 +309,101 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
           </div>
         )
 
+      case 'writings':
+        return writings.length === 0 ? (
+          <div className="explore-empty">
+            <p>
+              {isOwnProfile 
+                ? 'No articles written yet. Publish your first article to see it here!'
+                : (
+                  <>
+                    No articles written. You can find other stuff from this user using{' '}
+                    <a 
+                      href={viewingPubkey ? getProfileUrl(nip19.npubEncode(viewingPubkey)) : '#'} 
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                      style={{ color: 'rgb(99 102 241)', textDecoration: 'underline' }}
+                    >
+                      ants
+                    </a>
+                    .
+                  </>
+                )}
+            </p>
+          </div>
+        ) : (
+          <div className="explore-grid">
+            {writings.map((post) => (
+              <BlogPostCard
+                key={post.event.id}
+                post={post}
+                href={getPostUrl(post)}
+              />
+            ))}
+          </div>
+        )
+
       default:
         return null
     }
   }
 
   return (
-    <div className="explore-container">
+    <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} />}
+        {viewingPubkey && <AuthorCard authorPubkey={viewingPubkey} clickable={false} />}
+        
+        {loading && hasData && (
+          <div className="explore-loading" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0' }}>
+            <FontAwesomeIcon icon={faSpinner} spin />
+          </div>
+        )}
         
         <div className="me-tabs">
           <button
             className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
             data-tab="highlights"
-            onClick={() => setActiveTab('highlights')}
+            onClick={() => navigate(isOwnProfile ? '/me/highlights' : `/p/${propPubkey && nip19.npubEncode(propPubkey)}`)}
           >
             <FontAwesomeIcon icon={faHighlighter} />
-            Highlights ({highlights.length})
+            <span className="tab-label">Highlights</span>
           </button>
+          {isOwnProfile && (
+            <>
+              <button
+                className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
+                data-tab="reading-list"
+                onClick={() => navigate('/me/reading-list')}
+              >
+                <FontAwesomeIcon icon={faBookmark} />
+                <span className="tab-label">Bookmarks</span>
+              </button>
+              <button
+                className={`me-tab ${activeTab === 'archive' ? 'active' : ''}`}
+                data-tab="archive"
+                onClick={() => navigate('/me/archive')}
+              >
+                <FontAwesomeIcon icon={faBooks} />
+                <span className="tab-label">Archive</span>
+              </button>
+            </>
+          )}
           <button
-            className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
-            data-tab="reading-list"
-            onClick={() => setActiveTab('reading-list')}
+            className={`me-tab ${activeTab === 'writings' ? 'active' : ''}`}
+            data-tab="writings"
+            onClick={() => navigate(isOwnProfile ? '/me/writings' : `/p/${propPubkey && nip19.npubEncode(propPubkey)}/writings`)}
           >
-            <FontAwesomeIcon icon={faBookmark} />
-            Reading List ({bookmarks.length})
-          </button>
-          <button
-            className={`me-tab ${activeTab === 'archive' ? 'active' : ''}`}
-            data-tab="archive"
-            onClick={() => setActiveTab('archive')}
-          >
-            <FontAwesomeIcon icon={faBooks} />
-            Archive ({readArticles.length})
+            <FontAwesomeIcon icon={faPenToSquare} />
+            <span className="tab-label">Writings</span>
           </button>
         </div>
       </div>

src/components/PullToRefreshIndicator.tsx

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

src/components/ReaderHeader.tsx

@@ -38,7 +38,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   const isLongSummary = summary && summary.length > 150
   
   // Determine the dominant highlight color based on visibility and priority
-  const highlightIndicatorStyles = useMemo(() => {
+  const getHighlightIndicatorStyles = useMemo(() => (isOverlay: boolean) => {
     if (!highlights.length) return undefined
     
     // Count highlights by level that are visible
@@ -65,7 +65,8 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
     return {
       backgroundColor: `rgba(${rgb}, 0.1)`,
       borderColor: `rgba(${rgb}, 0.3)`,
-      color: '#fff'
+      // Only force white color in overlay context, otherwise let CSS handle it
+      ...(isOverlay && { color: '#fff' })
     }
   }, [highlights, highlightVisibility, settings])
   
@@ -93,7 +94,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
                 {hasHighlights && (
                   <div 
                     className="highlight-indicator"
-                    style={highlightIndicatorStyles}
+                    style={getHighlightIndicatorStyles(true)}
                   >
                     <FontAwesomeIcon icon={faHighlighter} />
                     <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
@@ -133,7 +134,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
             {hasHighlights && (
               <div 
                 className="highlight-indicator"
-                style={highlightIndicatorStyles}
+                style={getHighlightIndicatorStyles(false)}
               >
                 <FontAwesomeIcon icon={faHighlighter} />
                 <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>

src/components/ReadingProgressIndicator.tsx

@@ -0,0 +1,70 @@
+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] backdrop-blur-sm px-3 py-1 flex items-center gap-2 transition-all duration-300 ${className}`}
+      style={{
+        '--left-offset': leftOffset,
+        '--right-offset': rightOffset,
+        backgroundColor: 'var(--color-bg-elevated)',
+        opacity: 0.95
+      } as React.CSSProperties}
+    >
+      <div 
+        className="flex-1 h-0.5 rounded-full overflow-hidden relative"
+        style={{ backgroundColor: 'var(--color-border)' }}
+      >
+        <div 
+          className={`h-full rounded-full transition-all duration-300 relative ${
+            isComplete 
+              ? 'bg-green-500' 
+              : ''
+          }`}
+          style={{ 
+            width: `${clampedProgress}%`,
+            backgroundColor: isComplete ? undefined : 'var(--color-primary)'
+          }}
+        >
+          <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' : ''
+          }`}
+          style={{ color: isComplete ? undefined : 'var(--color-text-muted)' }}
+        >
+          {isComplete ? '✓' : `${clampedProgress}%`}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/RelayStatusIndicator.tsx

@@ -70,8 +70,12 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({
     }
   }
 
+  // On mobile, default to collapsed (icon only). On desktop, always show details.
   const showDetails = !isMobile || isExpanded
   
+  // On mobile when collapsed, make it circular like the highlight button
+  const isCollapsedOnMobile = isMobile && !isExpanded
+  
   return (
     <div 
       className={`relay-status-indicator ${isConnecting ? 'connecting' : ''} ${isMobile ? 'mobile' : ''} ${isExpanded ? 'expanded' : ''} ${isMobile && !showOnMobile ? 'hidden' : 'visible'}`}
@@ -85,25 +89,75 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({
         ) : undefined
       }
       onClick={handleClick}
-      style={{ cursor: isMobile ? 'pointer' : 'default' }}
+      style={{ 
+        position: 'fixed',
+        bottom: '32px',
+        left: '32px',
+        zIndex: 1000,
+        display: 'flex',
+        alignItems: 'center',
+        gap: showDetails ? '0.5rem' : '0',
+        padding: isCollapsedOnMobile ? '0.875rem' : (showDetails ? '0.75rem 1rem' : '0.75rem'),
+        width: isCollapsedOnMobile ? '56px' : 'auto',
+        height: isCollapsedOnMobile ? '56px' : 'auto',
+        backgroundColor: 'rgba(39, 39, 42, 0.9)',
+        backdropFilter: 'blur(8px)',
+        border: '1px solid rgb(82, 82, 91)',
+        borderRadius: isCollapsedOnMobile ? '50%' : '12px',
+        color: 'rgb(228, 228, 231)',
+        fontSize: '0.875rem',
+        fontWeight: 500,
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+        cursor: isMobile ? 'pointer' : 'default',
+        opacity: isMobile && !showOnMobile ? 0 : 1,
+        visibility: isMobile && !showOnMobile ? 'hidden' : 'visible',
+        transition: 'all 0.3s ease',
+        userSelect: 'none',
+        justifyContent: isCollapsedOnMobile ? 'center' : 'flex-start'
+      }}
     >
       <div className="relay-status-icon">
         <FontAwesomeIcon icon={isConnecting ? faSpinner : offlineMode ? faCircle : faPlane} spin={isConnecting} />
       </div>
       {showDetails && (
         <>
-          <div className="relay-status-text">
+          <div 
+            className="relay-status-text"
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '0.125rem'
+            }}
+          >
             {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-subtitle"
+                  style={{
+                    fontSize: '0.75rem',
+                    opacity: 0.7,
+                    fontWeight: 400
+                  }}
+                >
+                  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>
+                <span 
+                  className="relay-status-subtitle"
+                  style={{
+                    fontSize: '0.75rem',
+                    opacity: 0.7,
+                    fontWeight: 400
+                  }}
+                >
+                  {connectedUrls.length} local relay{connectedUrls.length !== 1 ? 's' : ''}
+                </span>
               </>
             )}
           </div>

src/components/ResolvedMention.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 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,14 +25,12 @@ const ResolvedMention: React.FC<ResolvedMentionProps> = ({ encoded }) => {
 
   if (npub) {
     return (
-      <a
-        href={getProfileUrl(npub)}
+      <Link
+        to={`/p/${npub}`}
         className="nostr-mention"
-        target="_blank"
-        rel="noopener noreferrer"
       >
         @{display}
-      </a>
+      </Link>
     )
   }
 

src/components/Settings.tsx

@@ -4,6 +4,7 @@ import { RelayPool } from 'applesauce-relay'
 import { UserSettings } from '../services/settingsService'
 import IconButton from './IconButton'
 import { loadFont } from '../utils/fontLoader'
+import ThemeSettings from './Settings/ThemeSettings'
 import ReadingDisplaySettings from './Settings/ReadingDisplaySettings'
 import LayoutNavigationSettings from './Settings/LayoutNavigationSettings'
 import StartupPreferencesSettings from './Settings/StartupPreferencesSettings'
@@ -58,7 +59,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
     return migrated
   })
   const isInitialMount = useRef(true)
-  const saveTimeoutRef = useRef<number | null>(null)
+  const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const isLocallyUpdating = useRef(false)
   
   // Poll for relay status updates
@@ -159,6 +160,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
       </div>
 
       <div className="settings-content">
+        <ThemeSettings settings={localSettings} onUpdate={handleUpdate} />
         <ReadingDisplaySettings settings={localSettings} onUpdate={handleUpdate} />
         <LayoutNavigationSettings settings={localSettings} onUpdate={handleUpdate} />
         <StartupPreferencesSettings settings={localSettings} onUpdate={handleUpdate} />

src/components/Settings/ReadingDisplaySettings.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-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'
@@ -73,7 +72,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>
@@ -102,33 +101,39 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
       <div className="setting-group setting-inline">
         <label>Default Highlight Visibility</label>
         <div className="highlight-level-toggles">
-          <button
+          <IconButton
+            icon={faNetworkWired}
             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
+            ariaLabel="Toggle nostrverse highlights by default"
+            variant="ghost"
+            style={{ 
+              color: (settings.defaultHighlightVisibilityNostrverse !== false) ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined,
+              opacity: (settings.defaultHighlightVisibilityNostrverse !== false) ? 1 : 0.4
+            }}
+          />
+          <IconButton
+            icon={faUserGroup}
             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
+            ariaLabel="Toggle friends highlights by default"
+            variant="ghost"
+            style={{ 
+              color: (settings.defaultHighlightVisibilityFriends !== false) ? 'var(--highlight-color-friends, #f97316)' : undefined,
+              opacity: (settings.defaultHighlightVisibilityFriends !== false) ? 1 : 0.4
+            }}
+          />
+          <IconButton
+            icon={faUser}
             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>
+            ariaLabel="Toggle my highlights by default"
+            variant="ghost"
+            style={{ 
+              color: (settings.defaultHighlightVisibilityMine !== false) ? 'var(--highlight-color-mine, #eab308)' : undefined,
+              opacity: (settings.defaultHighlightVisibilityMine !== false) ? 1 : 0.4
+            }}
+          />
         </div>
       </div>
 

src/components/Settings/RelaySettings.tsx

@@ -100,13 +100,16 @@ const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses }) => {
                     }} 
                   />
                   <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{ 
-                      fontSize: '0.9rem',
-                      fontFamily: 'var(--font-mono, monospace)',
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis'
-                    }}>
+                    <div 
+                      className="relay-url"
+                      style={{ 
+                        fontSize: '0.9rem',
+                        fontFamily: 'var(--font-mono, monospace)',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis'
+                      }}
+                    >
                       {formatRelayUrl(relay.url)}
                     </div>
                   </div>

src/components/Settings/ThemeSettings.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import { faSun, faMoon, faDesktop } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../../services/settingsService'
+import IconButton from '../IconButton'
+
+type DarkColorTheme = 'black' | 'midnight' | 'charcoal'
+type LightColorTheme = 'paper-white' | 'sepia' | 'ivory'
+
+interface ThemeSettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+}
+
+const ThemeSettings: React.FC<ThemeSettingsProps> = ({ settings, onUpdate }) => {
+  const currentTheme = settings.theme ?? 'system'
+  const currentDarkColor = settings.darkColorTheme ?? 'midnight'
+  const currentLightColor = settings.lightColorTheme ?? 'sepia'
+  
+  // Determine which color picker to show based on current theme
+  const showDarkColors = currentTheme === 'dark' || currentTheme === 'system'
+  const showLightColors = currentTheme === 'light' || currentTheme === 'system'
+
+  // Color definitions for swatches
+  const darkColors = {
+    black: '#000000',
+    midnight: '#18181b',
+    charcoal: '#1c1c1e'
+  }
+
+  const lightColors = {
+    'paper-white': '#ffffff',
+    sepia: '#f4f1ea',
+    ivory: '#fffff0'
+  }
+
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Theme</h3>
+      
+      <div className="setting-group setting-inline">
+        <label>Appearance</label>
+        <div className="setting-buttons">
+          <IconButton 
+            icon={faSun} 
+            onClick={() => onUpdate({ theme: 'light' })} 
+            title="Light theme" 
+            ariaLabel="Light theme" 
+            variant={currentTheme === 'light' ? 'primary' : 'ghost'} 
+          />
+          <IconButton 
+            icon={faMoon} 
+            onClick={() => onUpdate({ theme: 'dark' })} 
+            title="Dark theme" 
+            ariaLabel="Dark theme" 
+            variant={currentTheme === 'dark' ? 'primary' : 'ghost'} 
+          />
+          <IconButton 
+            icon={faDesktop} 
+            onClick={() => onUpdate({ theme: 'system' })} 
+            title="Use system preference" 
+            ariaLabel="Use system preference" 
+            variant={currentTheme === 'system' ? 'primary' : 'ghost'} 
+          />
+        </div>
+      </div>
+
+      {showDarkColors && (
+        <div className="setting-group setting-inline">
+          <label>Dark Theme</label>
+          <div className="color-picker">
+            {Object.entries(darkColors).map(([key, color]) => (
+              <div
+                key={key}
+                className={`color-swatch ${currentDarkColor === key ? 'active' : ''}`}
+                style={{ backgroundColor: color }}
+                onClick={() => onUpdate({ darkColorTheme: key as DarkColorTheme })}
+                title={key.charAt(0).toUpperCase() + key.slice(1)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {showLightColors && (
+        <div className="setting-group setting-inline">
+          <label>Light Theme</label>
+          <div className="color-picker">
+            {Object.entries(lightColors).map(([key, color]) => (
+              <div
+                key={key}
+                className={`color-swatch ${currentLightColor === key ? 'active' : ''}`}
+                style={{ 
+                  backgroundColor: color,
+                  border: color === '#ffffff' ? '2px solid #e5e7eb' : '1px solid #e5e7eb'
+                }}
+                onClick={() => onUpdate({ lightColorTheme: key as LightColorTheme })}
+                title={key.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ThemeSettings

src/components/ThreePaneLayout.tsx

@@ -31,6 +31,7 @@ interface ThreePaneLayoutProps {
   showSettings: boolean
   showExplore?: boolean
   showMe?: boolean
+  showProfile?: boolean
   
   // Bookmarks pane
   bookmarks: Bookmark[]
@@ -89,6 +90,9 @@ interface ThreePaneLayoutProps {
   
   // Optional Me content
   me?: React.ReactNode
+  
+  // Optional Profile content
+  profile?: React.ReactNode
 }
 
 const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
@@ -98,11 +102,10 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
   const mainPaneRef = useRef<HTMLDivElement>(null)
   
   // Detect scroll direction to hide/show mobile buttons
-  // On mobile, scroll happens in the main pane, not on window
+  // Now using window scroll (document scroll) instead of pane scroll
   const scrollDirection = useScrollDirection({ 
     threshold: 10, 
-    enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed,
-    elementRef: mainPaneRef
+    enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed
   })
   const showMobileButtons = scrollDirection !== 'down'
 
@@ -222,38 +225,54 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
 
   return (
     <>
-      {/* Mobile bookmark button - only show when viewing article */}
-      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
+      {/* Mobile bookmark button - only show when viewing article (not on settings/explore/me/profile) */}
+      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && !props.showProfile && (
         <button
-          className={`mobile-hamburger-btn ${showMobileButtons ? 'visible' : 'hidden'}`}
+          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} />
+          <FontAwesomeIcon icon={faBookmark} size="sm" />
         </button>
       )}
 
-      {/* Mobile highlights button - only show when viewing article */}
-      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
+      {/* Mobile highlights button - only show when viewing article (not on settings/explore/me/profile) */}
+      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && !props.showProfile && (
         <button
-          className={`mobile-highlights-btn ${showMobileButtons ? 'visible' : 'hidden'}`}
+          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}
-          style={{ 
-            backgroundColor: props.settings.highlightColorMine || '#ffff00',
-            color: '#000'
-          }}
         >
-          <FontAwesomeIcon icon={faHighlighter} />
+          <FontAwesomeIcon icon={faHighlighter} size="sm" />
         </button>
       )}
 
       {/* Mobile backdrop */}
       {isMobile && (
         <div
-          className={`mobile-sidebar-backdrop ${(props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'visible' : ''}`}
+          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"
         />
@@ -305,6 +324,11 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             <>
               {props.me}
             </>
+          ) : props.showProfile && props.profile ? (
+            // Render Profile inside the main pane to keep side panels
+            <>
+              {props.profile}
+            </>
           ) : (
             <ContentPanel 
               loading={props.readerLoading}
@@ -330,6 +354,8 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               relayPool={props.relayPool}
               activeAccount={props.activeAccount}
               currentArticle={props.currentArticle}
+              isSidebarCollapsed={props.isCollapsed}
+              isHighlightsCollapsed={props.isHighlightsCollapsed}
             />
           )}
         </div>

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
@@ -84,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,4 +1,5 @@
 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'
@@ -77,8 +78,18 @@ export const useHighlightCreation = ({
         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()
-      onHighlightCreated(newHighlight)
+      
+      // Force synchronous render to show highlight immediately
+      flushSync(() => {
+        onHighlightCreated(newHighlight)
+      })
     } catch (error) {
       console.error('❌ Failed to create highlight:', error)
       // Re-throw to allow parent to handle

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,24 +56,42 @@ export const useHighlightInteractions = ({
         mark.removeEventListener('click', handler)
       })
     }
-  }, [onHighlightClick])
+  }, [onHighlightClick, contentVersion])
 
-  // Scroll to selected highlight
+  // Scroll to selected highlight with retry mechanism
   useEffect(() => {
     if (!selectedHighlightId || !contentRef.current) return
     
-    const markElement = contentRef.current.querySelector(`mark[data-highlight-id="${selectedHighlightId}"]`)
+    let attempts = 0
+    const maxAttempts = 20 // Try for up to 2 seconds
+    const retryDelay = 100
     
-    if (markElement) {
-      markElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    const tryScroll = () => {
+      if (!contentRef.current) return
       
-      const htmlElement = markElement as HTMLElement
-      setTimeout(() => {
-        htmlElement.classList.add('highlight-pulse')
-        setTimeout(() => htmlElement.classList.remove('highlight-pulse'), 1500)
-      }, 500)
+      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 if (attempts < maxAttempts) {
+        attempts++
+        setTimeout(tryScroll, retryDelay)
+      } else {
+        console.warn('Could not find mark element for highlight after', maxAttempts, 'attempts:', selectedHighlightId)
+      }
     }
-  }, [selectedHighlightId])
+    
+    // Start trying after a small initial delay
+    const timeoutId = setTimeout(tryScroll, 100)
+    
+    return () => clearTimeout(timeoutId)
+  }, [selectedHighlightId, contentVersion])
 
   // Handle text selection (works for both mouse and touch)
   const handleSelectionEnd = useCallback(() => {

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/useSettings.ts

@@ -5,6 +5,7 @@ import { EventFactory } from 'applesauce-factory'
 import { AccountManager } from 'applesauce-accounts'
 import { UserSettings, loadSettings, saveSettings, watchSettings } from '../services/settingsService'
 import { loadFont, getFontFamily } from '../utils/fontLoader'
+import { applyTheme } from '../utils/theme'
 import { RELAYS } from '../config/relays'
 
 interface UseSettingsParams {
@@ -47,7 +48,14 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       const root = document.documentElement.style
       const fontKey = settings.readingFont || 'system'
       
-      console.log('🎨 Applying settings styles:', { fontKey, fontSize: settings.fontSize })
+      console.log('🎨 Applying settings styles:', { fontKey, fontSize: settings.fontSize, theme: settings.theme })
+      
+      // Apply theme with color variants (defaults to 'system' if not set)
+      applyTheme(
+        settings.theme ?? 'system',
+        settings.darkColorTheme ?? 'midnight',
+        settings.lightColorTheme ?? 'sepia'
+      )
       
       // Load font first and wait for it to be ready
       if (fontKey !== 'system') {
@@ -61,7 +69,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       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/main.tsx

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

src/services/exploreCache.ts

@@ -1,4 +1,5 @@
 import { NostrEvent } from 'nostr-tools'
+import { Highlight } from '../types/highlights'
 
 export interface CachedBlogPostPreview {
   event: NostrEvent
@@ -11,6 +12,7 @@ export interface CachedBlogPostPreview {
 
 type CacheValue = {
   posts: CachedBlogPostPreview[]
+  highlights: Highlight[]
   timestamp: number
 }
 
@@ -22,8 +24,28 @@ export function getCachedPosts(pubkey: string): CachedBlogPostPreview[] | null {
   return entry.posts
 }
 
+export function getCachedHighlights(pubkey: string): Highlight[] | null {
+  const entry = exploreCache.get(pubkey)
+  if (!entry) return null
+  return entry.highlights
+}
+
 export function setCachedPosts(pubkey: string, posts: CachedBlogPostPreview[]): void {
-  exploreCache.set(pubkey, { posts, timestamp: Date.now() })
+  const current = exploreCache.get(pubkey)
+  exploreCache.set(pubkey, { 
+    posts, 
+    highlights: current?.highlights || [],
+    timestamp: Date.now() 
+  })
+}
+
+export function setCachedHighlights(pubkey: string, highlights: Highlight[]): void {
+  const current = exploreCache.get(pubkey)
+  exploreCache.set(pubkey, { 
+    posts: current?.posts || [],
+    highlights,
+    timestamp: Date.now() 
+  })
 }
 
 export function upsertCachedPost(pubkey: string, post: CachedBlogPostPreview): CachedBlogPostPreview[] {
@@ -39,4 +61,13 @@ export function upsertCachedPost(pubkey: string, post: CachedBlogPostPreview): C
   return merged
 }
 
+export function upsertCachedHighlight(pubkey: string, highlight: Highlight): Highlight[] {
+  const current = exploreCache.get(pubkey)?.highlights || []
+  const byId = new Map(current.map(h => [h.id, h]))
+  byId.set(highlight.id, highlight)
+  const merged = Array.from(byId.values()).sort((a, b) => b.created_at - a.created_at)
+  setCachedHighlights(pubkey, merged)
+  return merged
+}
+
 

src/services/highlightService.ts

@@ -1,5 +1,5 @@
 export * from './highlights/fetchForArticle'
 export * from './highlights/fetchForUrl'
 export * from './highlights/fetchByAuthor'
-
+export * from './highlights/fetchFromAuthors'
 

src/services/highlights/fetchFromAuthors.ts

@@ -0,0 +1,79 @@
+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'
+
+/**
+ * Fetches highlights (kind:9802) from a list of pubkeys (friends)
+ * @param relayPool - The relay pool to query
+ * @param pubkeys - Array of pubkeys to fetch highlights from
+ * @param onHighlight - Optional callback for streaming highlights as they arrive
+ * @returns Array of highlights
+ */
+export const fetchHighlightsFromAuthors = async (
+  relayPool: RelayPool,
+  pubkeys: string[],
+  onHighlight?: (highlight: Highlight) => void
+): Promise<Highlight[]> => {
+  try {
+    if (pubkeys.length === 0) {
+      console.log('⚠️ No pubkeys to fetch highlights from')
+      return []
+    }
+
+    console.log('💡 Fetching highlights (kind 9802) from', pubkeys.length, 'authors')
+    
+    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    const prioritized = prioritizeLocalRelays(relayUrls)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(prioritized)
+
+    const seenIds = new Set<string>()
+    
+    const local$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, { kinds: [9802], authors: pubkeys, limit: 200 })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => {
+              if (!seenIds.has(event.id)) {
+                seenIds.add(event.id)
+                if (onHighlight) onHighlight(eventToHighlight(event))
+              }
+            }),
+            completeOnEose(),
+            takeUntil(timer(1200))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+      
+    const remote$ = remoteRelays.length > 0
+      ? relayPool
+          .req(remoteRelays, { kinds: [9802], authors: pubkeys, limit: 200 })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => {
+              if (!seenIds.has(event.id)) {
+                seenIds.add(event.id)
+                if (onHighlight) onHighlight(eventToHighlight(event))
+              }
+            }),
+            completeOnEose(),
+            takeUntil(timer(6000))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+      
+    const rawEvents: NostrEvent[] = await lastValueFrom(merge(local$, remote$).pipe(toArray()))
+
+    const uniqueEvents = dedupeHighlights(rawEvents)
+    const highlights = uniqueEvents.map(eventToHighlight)
+    
+    console.log('💡 Processed', highlights.length, 'unique highlights')
+    
+    return sortHighlights(highlights)
+  } catch (error) {
+    console.error('Failed to fetch highlights from authors:', 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/settingsService.ts

@@ -47,6 +47,10 @@ export interface UserSettings {
   imageCacheSizeMB?: number // Maximum cache size in megabytes (default: 210MB)
   // Mobile settings
   autoCollapseSidebarOnMobile?: boolean // Auto-collapse sidebar on mobile (default: true)
+  // Theme preference
+  theme?: 'dark' | 'light' | 'system' // default: system
+  darkColorTheme?: 'black' | 'midnight' | 'charcoal' // default: midnight
+  lightColorTheme?: 'paper-white' | 'sepia' | 'ivory' // default: sepia
 }
 
 export async function loadSettings(

src/services/youtubeMetaService.ts

@@ -0,0 +1,77 @@
+export type Caption = { start: number; dur: number; text: string }
+export type YouTubeMeta = {
+  title: string
+  description?: string
+  captions: Caption[]
+  transcript?: string
+  lang: string
+  isAuto?: boolean
+  source: 'youtube'
+}
+
+type CachedMeta = {
+  data: YouTubeMeta
+  timestamp: number
+}
+
+const TTL_MS = 7 * 24 * 60 * 60 * 1000 // 7 days
+
+function cacheKey(videoId: string, lang: string) {
+  return `yt_meta_${videoId}_${lang}`
+}
+
+function load(videoId: string, lang: string): YouTubeMeta | null {
+  try {
+    const raw = localStorage.getItem(cacheKey(videoId, lang))
+    if (!raw) return null
+    const { data, timestamp } = JSON.parse(raw) as CachedMeta
+    if (Date.now() - timestamp > TTL_MS) {
+      localStorage.removeItem(cacheKey(videoId, lang))
+      return null
+    }
+    return data
+  } catch {
+    return null
+  }
+}
+
+function save(videoId: string, lang: string, data: YouTubeMeta) {
+  try {
+    const value: CachedMeta = { data, timestamp: Date.now() }
+    localStorage.setItem(cacheKey(videoId, lang), JSON.stringify(value))
+  } catch {
+    // ignore
+  }
+}
+
+export function extractYouTubeId(url: string): string | null {
+  try {
+    const u = new URL(url)
+    if (u.hostname === 'youtu.be') {
+      return u.pathname.slice(1)
+    }
+    if (u.searchParams.get('v')) return u.searchParams.get('v')
+    const parts = u.pathname.split('/').filter(Boolean)
+    // /shorts/:id or /embed/:id
+    if ((parts[0] === 'shorts' || parts[0] === 'embed') && parts[1]) return parts[1]
+    return null
+  } catch {
+    return null
+  }
+}
+
+export async function getYouTubeMeta(videoId: string, lang = 'en'): Promise<YouTubeMeta | null> {
+  const cached = load(videoId, lang)
+  if (cached) return cached
+  const res = await fetch(`/api/youtube-meta?videoId=${encodeURIComponent(videoId)}&lang=${encodeURIComponent(lang)}`, {
+    headers: {
+      'x-ui-locale': lang
+    }
+  })
+  if (!res.ok) return null
+  const data = (await res.json()) as YouTubeMeta
+  save(videoId, lang, data)
+  return data
+}
+
+

src/styles/base/global.css

@@ -1,17 +1,13 @@
-/* Global element styles and app container */
+/* Global element styles and app container (Tailwind-compatible) */
+
+/* Body - keep only app-specific overrides */
 body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
+  background: var(--color-bg-subtle);
+  color: var(--color-text);
   overscroll-behavior: none;
   -webkit-overflow-scrolling: touch;
-}
-
-/* Use dynamic viewport height if supported */
-@supports (height: 100dvh) {
-  body {
-    min-height: 100dvh;
-  }
+  overflow-x: hidden;
+  max-width: 100vw;
 }
 
 body.mobile-sidebar-open {
@@ -20,49 +16,15 @@ body.mobile-sidebar-open {
   width: 100%;
 }
 
-#root {
-  max-width: none;
-  margin: 0;
-  padding: 1rem;
-}
-
-@media (max-width: 768px) {
-  #root {
-    padding: 0;
-  }
-}
-
-.app {
-  text-align: center;
-  position: relative;
-}
-
-.app header {
-  margin-bottom: 2rem;
-}
-
-.app header h1 {
-  font-size: 2.5rem;
-  margin: 0;
-  color: #646cff;
-}
-
-.app header p {
-  margin: 0.5rem 0 0 0;
-  color: #888;
-}
-
-.loading {
-  text-align: center;
-  padding: 2rem;
-  color: #ccc;
-}
-
+/* App loading states */
 .loading {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  text-align: center;
+  padding: 2rem;
+  color: var(--color-text);
 }
 
 

src/styles/base/variables.css

@@ -4,10 +4,6 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -16,12 +12,21 @@
   
   --reading-font: 'Source Serif 4', serif;
   --reading-font-size: 18px;
+  
+  /* Highlight color variables (user-settable) */
+  /* Defaults use Tailwind color palette: yellow-300, orange-500, purple-600 */
+  --highlight-color-mine: #fde047;      /* yellow-300 */
+  --highlight-color-friends: #f97316;   /* orange-500 */
+  --highlight-color-nostrverse: #9333ea; /* purple-600 */
+  --highlight-color: #fde047;           /* Default highlight color */
+  
   /* Layout variables */
   --sidebar-width: 320px;
   --sidebar-collapsed-width: 64px;
   --highlights-width: 360px;
   --highlights-collapsed-width: 56px;
   --main-max-width: 900px;
+  --main-max-width-video: 1200px;
   --main-horizontal-padding: 1rem;
   
   /* Mobile breakpoints */
@@ -38,10 +43,246 @@
   --safe-area-right: env(safe-area-inset-right, 0px);
 }
 
+/* Dark theme (default) */
+:root.theme-dark {
+  color-scheme: dark;
+  
+  --color-bg: #18181b;           /* zinc-900 */
+  --color-bg-elevated: #27272a;  /* zinc-800 */
+  --color-bg-subtle: #1e1e1e;    /* between zinc-800 and zinc-900 */
+  --color-border: #3f3f46;       /* zinc-700 */
+  --color-border-subtle: #52525b; /* zinc-600 */
+  --color-text: #e4e4e7;         /* zinc-200 */
+  --color-text-secondary: #a1a1aa; /* zinc-400 */
+  --color-text-muted: #71717a;   /* zinc-500 */
+  --color-primary: #6366f1;      /* indigo-500 */
+  --color-primary-hover: #4f46e5; /* indigo-600 */
+}
+
+/* Light theme */
+:root.theme-light {
+  color-scheme: light;
+  
+  --color-bg: #ffffff;           /* white */
+  --color-bg-elevated: #f5f5f5;  /* gray-100 */
+  --color-bg-subtle: #fafafa;    /* gray-50 */
+  --color-border: #e5e7eb;       /* gray-200 */
+  --color-border-subtle: #d1d5db; /* gray-300 */
+  --color-text: #111827;         /* gray-900 */
+  --color-text-secondary: #374151; /* gray-700 */
+  --color-text-muted: #6b7280;   /* gray-500 */
+  --color-primary: #4f46e5;      /* indigo-600 */
+  --color-primary-hover: #4338ca; /* indigo-700 */
+  
+  /* Highlight colors for light theme - use same Tailwind colors */
+  --highlight-color-mine: #fde047;      /* yellow-300 */
+  --highlight-color-friends: #f97316;   /* orange-500 */
+  --highlight-color-nostrverse: #9333ea; /* purple-600 */
+}
+
+/* System theme - follow OS preference */
+:root.theme-system {
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root.theme-system {
+    --color-bg: #18181b;
+    --color-bg-elevated: #27272a;
+    --color-bg-subtle: #1e1e1e;
+    --color-border: #3f3f46;
+    --color-border-subtle: #52525b;
+    --color-text: #e4e4e7;
+    --color-text-secondary: #a1a1aa;
+    --color-text-muted: #71717a;
+    --color-primary: #6366f1;
+    --color-primary-hover: #4f46e5;
+  }
+}
+
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
+  :root.theme-system {
+    --color-bg: #ffffff;
+    --color-bg-elevated: #f5f5f5;
+    --color-bg-subtle: #fafafa;
+    --color-border: #e5e7eb;
+    --color-border-subtle: #d1d5db;
+    --color-text: #111827;
+    --color-text-secondary: #374151;
+    --color-text-muted: #6b7280;
+    --color-primary: #4f46e5;
+    --color-primary-hover: #4338ca;
+    
+    /* Standard highlight colors */
+    --highlight-color-mine: #fde047;
+    --highlight-color-friends: #f97316;
+    --highlight-color-nostrverse: #9333ea;
+  }
+}
+
+/* Dark Color Theme Variants */
+/* Midnight (default) - current zinc palette */
+:root.dark-midnight {
+  --color-bg: #18181b;           /* zinc-900 */
+  --color-bg-elevated: #27272a;  /* zinc-800 */
+  --color-bg-subtle: #0f0f11;    /* darker than zinc-900 */
+  --color-border: #3f3f46;       /* zinc-700 */
+  --color-border-subtle: #52525b; /* zinc-600 */
+  --color-text: #e4e4e7;         /* zinc-200 */
+  --color-text-secondary: #a1a1aa; /* zinc-400 */
+  --color-text-muted: #71717a;   /* zinc-500 */
+}
+
+/* Black - true black for OLED */
+:root.dark-black {
+  --color-bg: #000000;           /* true black */
+  --color-bg-elevated: #0a0a0a;  /* very dark gray */
+  --color-bg-subtle: #000000;    /* true black for body */
+  --color-border: #1a1a1a;
+  --color-border-subtle: #2a2a2a;
+  --color-text: #e4e4e7;         /* zinc-200 */
+  --color-text-secondary: #a1a1aa; /* zinc-400 */
+  --color-text-muted: #71717a;   /* zinc-500 */
+}
+
+/* Charcoal - warmer, softer dark */
+:root.dark-charcoal {
+  --color-bg: #1c1c1e;           /* warmer dark */
+  --color-bg-elevated: #2c2c2e;
+  --color-bg-subtle: #16161a;    /* darker charcoal */
+  --color-border: #3a3a3c;
+  --color-border-subtle: #48484a;
+  --color-text: #e4e4e7;         /* zinc-200 */
+  --color-text-secondary: #a1a1aa; /* zinc-400 */
+  --color-text-muted: #71717a;   /* zinc-500 */
+}
+
+/* Light Color Theme Variants */
+/* Paper White (default) - pure white */
+:root.light-paper-white {
+  --color-bg: #ffffff;           /* white */
+  --color-bg-elevated: #f5f5f5;  /* gray-100 */
+  --color-bg-subtle: #fafafa;    /* gray-50 */
+  --color-border: #e5e7eb;       /* gray-200 */
+  --color-border-subtle: #d1d5db; /* gray-300 */
+  
+  /* Standard highlight colors */
+  --highlight-color-mine: #fde047;
+  --highlight-color-friends: #f97316;
+  --highlight-color-nostrverse: #9333ea;
+}
+
+/* Sepia - warm, reading-friendly */
+:root.light-sepia {
+  --color-bg: #f4f1ea;           /* warm beige */
+  --color-bg-elevated: #ebe6db;  /* darker beige */
+  --color-bg-subtle: #f9f6f0;    /* lighter beige */
+  --color-border: #d4cfc4;       /* warm gray border */
+  --color-border-subtle: #c4bfb4;
+  --color-text: #2d2a24;         /* warm dark brown */
+  --color-text-secondary: #5d5a54;
+  --color-text-muted: #8d8a84;
+  
+  /* Standard highlight colors */
+  --highlight-color-mine: #fde047;      /* yellow-300 */
+  --highlight-color-friends: #f97316;   /* orange-500 */
+  --highlight-color-nostrverse: #9333ea; /* purple-600 */
+}
+
+/* Ivory - soft, creamy */
+:root.light-ivory {
+  --color-bg: #fffff0;           /* ivory */
+  --color-bg-elevated: #faf8f0;  /* cream */
+  --color-bg-subtle: #fefef8;
+  --color-border: #e8e6de;
+  --color-border-subtle: #d8d6ce;
+  --color-text: #1a1a18;         /* near black with warm tint */
+  --color-text-secondary: #4a4a48;
+  --color-text-muted: #7a7a78;
+  
+  /* Standard highlight colors */
+  --highlight-color-mine: #fde047;
+  --highlight-color-friends: #f97316;
+  --highlight-color-nostrverse: #9333ea;
+}
+
+/* System theme color variants */
+@media (prefers-color-scheme: dark) {
+  :root.theme-system.dark-midnight {
+    --color-bg: #18181b;
+    --color-bg-elevated: #27272a;
+    --color-bg-subtle: #0f0f11;
+    --color-border: #3f3f46;
+    --color-border-subtle: #52525b;
+    --color-text: #e4e4e7;
+    --color-text-secondary: #a1a1aa;
+    --color-text-muted: #71717a;
+  }
+  
+  :root.theme-system.dark-black {
+    --color-bg: #000000;
+    --color-bg-elevated: #0a0a0a;
+    --color-bg-subtle: #000000;
+    --color-border: #1a1a1a;
+    --color-border-subtle: #2a2a2a;
+    --color-text: #e4e4e7;
+    --color-text-secondary: #a1a1aa;
+    --color-text-muted: #71717a;
+  }
+  
+  :root.theme-system.dark-charcoal {
+    --color-bg: #1c1c1e;
+    --color-bg-elevated: #2c2c2e;
+    --color-bg-subtle: #16161a;
+    --color-border: #3a3a3c;
+    --color-border-subtle: #48484a;
+    --color-text: #e4e4e7;
+    --color-text-secondary: #a1a1aa;
+    --color-text-muted: #71717a;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root.theme-system.light-paper-white {
+    --color-bg: #ffffff;
+    --color-bg-elevated: #f5f5f5;
+    --color-bg-subtle: #fafafa;
+    --color-border: #e5e7eb;
+    --color-border-subtle: #d1d5db;
+    
+    --highlight-color-mine: #fde047;
+    --highlight-color-friends: #f97316;
+    --highlight-color-nostrverse: #9333ea;
+  }
+  
+  :root.theme-system.light-sepia {
+    --color-bg: #f4f1ea;
+    --color-bg-elevated: #ebe6db;
+    --color-bg-subtle: #f9f6f0;
+    --color-border: #d4cfc4;
+    --color-border-subtle: #c4bfb4;
+    --color-text: #2d2a24;
+    --color-text-secondary: #5d5a54;
+    --color-text-muted: #8d8a84;
+    
+    --highlight-color-mine: #fde047;
+    --highlight-color-friends: #f97316;
+    --highlight-color-nostrverse: #9333ea;
+  }
+  
+  :root.theme-system.light-ivory {
+    --color-bg: #fffff0;
+    --color-bg-elevated: #faf8f0;
+    --color-bg-subtle: #fefef8;
+    --color-border: #e8e6de;
+    --color-border-subtle: #d8d6ce;
+    --color-text: #1a1a18;
+    --color-text-secondary: #4a4a48;
+    --color-text-muted: #7a7a78;
+    
+    --highlight-color-mine: #fde047;
+    --highlight-color-friends: #f97316;
+    --highlight-color-nostrverse: #9333ea;
   }
 }
 

src/styles/components/cards.css

@@ -1,14 +1,14 @@
 /* Bookmark item and blog post cards */
-.bookmark-item { background: #1a1a1a; padding: 1.5rem; border-radius: 12px; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
+.bookmark-item { background: var(--color-bg); padding: 1.5rem; border-radius: 12px; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
 .bookmark-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
-.bookmark-item h3 { margin: 0 0 0.5rem 0; color: #fff; font-size: 1.2rem; }
-.bookmark-url { color: #646cff; text-decoration: none; display: block; margin-bottom: 0.5rem; word-break: break-all; background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left; width: 100%; }
+.bookmark-item h3 { margin: 0 0 0.5rem 0; color: var(--color-text); font-size: 1.2rem; }
+.bookmark-url { color: var(--color-primary); text-decoration: none; display: block; margin-bottom: 0.5rem; word-break: break-all; background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left; width: 100%; }
 .bookmark-url:hover { text-decoration: underline; }
-.bookmark-content { color: #ccc; margin: 0.5rem 0; line-height: 1.4; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }
-.bookmark-meta { color: #888; font-size: 0.9rem; margin-top: 0.5rem; }
+.bookmark-content { color: var(--color-text); margin: 0.5rem 0; line-height: 1.4; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }
+.bookmark-meta { color: var(--color-text-secondary); font-size: 0.9rem; margin-top: 0.5rem; }
 
 .individual-bookmarks { margin: 1rem 0; }
-.individual-bookmarks h4 { margin: 0 0 1rem 0; font-size: 1rem; color: #fff; }
+.individual-bookmarks h4 { margin: 0 0 1rem 0; font-size: 1rem; color: var(--color-text); }
 
 .bookmarks-grid { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 100%; }
 .bookmarks-grid.bookmarks-compact { gap: 0.5rem; }
@@ -19,71 +19,76 @@
   .bookmarks-grid.bookmarks-large { gap: 1rem; }
 }
 
-.individual-bookmark { background: transparent; padding: 1rem; border-radius: 8px; transition: all 0.2s ease; border: 1px solid transparent; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; overflow: hidden; }
-.individual-bookmark:hover { border-color: transparent; background: #2a2a2a; }
+.individual-bookmark { background: transparent; padding: 1rem; border-radius: 8px; transition: all 0.2s ease; border: 1px solid var(--color-bg-elevated); word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; overflow: hidden; }
+.individual-bookmark:hover { border-color: var(--color-border); background: var(--color-bg-elevated); }
 
 /* Compact view */
-.individual-bookmark.compact { padding: 0.5rem 0.5rem; background: transparent; border: none; border-bottom: 1px solid #2a2a2a; border-radius: 0; box-shadow: none; width: 100%; max-width: 100%; overflow: hidden; }
-.individual-bookmark.compact:hover { background: #252525; border-bottom-color: #333; transform: none; box-shadow: none; }
+.individual-bookmark.compact { padding: 0.5rem 0.5rem; background: transparent; border: none; border-bottom: 1px solid var(--color-bg-elevated); border-radius: 0; box-shadow: none; width: 100%; max-width: 100%; overflow: hidden; }
+.individual-bookmark.compact:hover { background: var(--color-bg-elevated); border-bottom-color: var(--color-border); transform: none; box-shadow: none; }
 .compact-row { display: flex; align-items: center; gap: 0.5rem; height: 28px; width: 100%; min-width: 0; overflow: hidden; }
+.compact-thumbnail { width: 24px; height: 24px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: var(--color-bg-elevated); display: flex; align-items: center; justify-content: center; }
+.compact-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
 .compact-row.clickable { cursor: pointer; }
 .compact-row.clickable:active { opacity: 0.8; }
-.bookmark-type-compact { display: flex; align-items: center; gap: 0.25rem; color: #646cff; font-size: 0.85rem; flex-shrink: 0; }
-.compact-text { flex: 1; min-width: 0; color: #ccc; font-size: 0.85rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.bookmark-date-compact { font-size: 0.7rem; color: #666; flex-shrink: 0; white-space: nowrap; }
-.compact-read-btn { background: transparent; color: #888; border: none; padding: 0; border-radius: 4px; cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; width: 24px; height: 22px; flex-shrink: 0; transition: color 0.2s ease; }
-.compact-read-btn:hover { color: #ccc; }
+.bookmark-type-compact { display: flex; align-items: center; gap: 0.25rem; color: var(--color-primary); font-size: 0.85rem; flex-shrink: 0; }
+.compact-text { flex: 1; min-width: 0; color: var(--color-text); font-size: 0.85rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bookmark-date-compact { font-size: 0.7rem; color: var(--color-text-muted); flex-shrink: 0; white-space: nowrap; }
+.compact-read-btn { background: transparent; color: var(--color-text-secondary); border: none; padding: 0; border-radius: 4px; cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; width: 24px; height: 22px; flex-shrink: 0; transition: color 0.2s ease; }
+.compact-read-btn:hover { color: var(--color-text); }
 .compact-read-btn:active { transform: translateY(1px); }
 
 .bookmark-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem; }
-.bookmark-type { color: #646cff; font-size: 0.9rem; display: flex; align-items: center; gap: 0.35rem; }
-.bookmark-id { font-family: monospace; font-size: 0.8rem; color: #888; background: #1a1a1a; padding: 0.25rem 0.5rem; border-radius: 4px; }
-.bookmark-date { font-size: 0.8rem; color: #666; }
-.bookmark-date-link { font-size: 0.8rem; color: #666; text-decoration: none; transition: color 0.2s ease; }
-.bookmark-date-link:hover { color: #8ab4f8; text-decoration: underline; }
-.individual-bookmark .bookmark-content { margin: 0.75rem 0; color: #ccc; line-height: 1.6; font-size: 0.9rem; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }
-.expand-toggle { margin: 0.25rem 0; background: transparent; border: none; color: #888; cursor: pointer; width: 100%; height: 22px; display: flex; align-items: center; justify-content: center; }
-.expand-toggle:hover { color: #bbb; }
+.bookmark-type { color: var(--color-primary); font-size: 0.9rem; display: flex; align-items: center; gap: 0.35rem; }
+.bookmark-id { font-family: monospace; font-size: 0.8rem; color: var(--color-text-secondary); background: var(--color-bg); padding: 0.25rem 0.5rem; border-radius: 4px; }
+.bookmark-date { font-size: 0.8rem; color: var(--color-text-muted); }
+.bookmark-date-link { font-size: 0.8rem; color: var(--color-text-muted); text-decoration: none; transition: color 0.2s ease; }
+.bookmark-date-link:hover { color: var(--color-primary); text-decoration: underline; }
+.individual-bookmark .bookmark-content { margin: 0.75rem 0; color: var(--color-text); line-height: 1.6; font-size: 0.9rem; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }
+.expand-toggle { margin: 0.25rem 0; background: transparent; border: none; color: var(--color-text-secondary); cursor: pointer; width: 100%; height: 22px; display: flex; align-items: center; justify-content: center; }
+.expand-toggle:hover { color: var(--color-text); }
 .bookmark-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; gap: 0.75rem; }
-.bookmark-meta-minimal { font-size: 0.8rem; color: #888; }
-.author-link-minimal { color: #888; text-decoration: none; transition: color 0.2s ease; }
-.author-link-minimal:hover { color: #aaa; }
-.read-now-button-minimal { background: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; white-space: nowrap; }
-.read-now-button-minimal:hover { background: #218838; }
-.expand-toggle-urls { margin-top: 0.5rem; background: transparent; border: none; color: #646cff; cursor: pointer; font-size: 0.8rem; padding: 0.25rem 0; text-decoration: underline; }
-.expand-toggle-urls:hover { color: #8088ff; }
+.bookmark-meta-minimal { font-size: 0.8rem; color: var(--color-text-secondary); }
+.author-link-minimal { color: var(--color-text-secondary); text-decoration: none; transition: color 0.2s ease; }
+.author-link-minimal:hover { color: var(--color-text); }
+.read-now-button-minimal { background: var(--color-primary); color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; white-space: nowrap; }
+.read-now-button-minimal:hover { background: var(--color-primary-hover); }
+.expand-toggle-urls { margin-top: 0.5rem; background: transparent; border: none; color: var(--color-primary); cursor: pointer; font-size: 0.8rem; padding: 0.25rem 0; text-decoration: underline; }
+.expand-toggle-urls:hover { color: var(--color-primary-hover); }
 
 /* Large preview view */
-.individual-bookmark.large { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
-.large-preview-image { width: 100%; height: 180px; background: #1a1a1a; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid #333; position: relative; }
+.individual-bookmark.large { padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-bg-elevated); }
+.large-preview-image { width: 100%; height: 180px; background: var(--color-bg); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid var(--color-border); position: relative; }
 .large-preview-image:hover { opacity: 0.9; }
 .large-preview-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.3) 100%); pointer-events: none; }
-.preview-placeholder { font-size: 3rem; color: #444; }
+.preview-placeholder { font-size: 3rem; color: var(--color-border-subtle); }
 .large-content { padding: 1.25rem; }
-.large-text { color: #ccc; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
-.large-footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: #888; padding-top: 0.75rem; border-top: 1px solid #333; }
+.large-text { color: var(--color-text); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.large-footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--color-text-secondary); padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
 .large-author { flex: 1; }
-.large-read-button { background: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; }
-.large-read-button:hover { background: #218838; }
+.large-read-button { background: var(--color-primary); color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; }
+.large-read-button:hover { background: var(--color-primary-hover); }
 
 /* Blog cards (Explore) */
 .explore-container { padding: 2rem; max-width: 1400px; margin: 0 auto; min-height: 100vh; }
 .explore-header { text-align: center; margin-bottom: 3rem; }
-.explore-header h1 { font-size: 2.5rem; margin: 0 0 1rem 0; color: #646cff; display: flex; align-items: center; justify-content: center; gap: 1rem; }
-.explore-subtitle { font-size: 1.125rem; color: rgba(255, 255, 255, 0.7); margin: 0; }
-.explore-loading, .explore-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: rgba(255, 255, 255, 0.7); }
+.explore-header h1 { font-size: 2.5rem; margin: 0 0 1rem 0; color: var(--color-primary); display: flex; align-items: center; justify-content: center; gap: 1rem; }
+.explore-subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; }
+.explore-header .me-tabs { text-align: left; margin-top: 2rem; width: 100%; max-width: 100%; justify-content: flex-start; }
+.explore-loading, .explore-error, .explore-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--color-text-secondary); }
 .explore-loading { min-height: 0; padding: 0.25rem 0; }
-.explore-error { color: #ff6b6b; }
+.explore-error { color: rgb(239 68 68); /* red-500 */ }
+.explore-empty { color: var(--color-text-secondary); }
 .explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; }
-.blog-post-card { background: #1a1a1a; border: 1px solid #333; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; }
-.blog-post-card:hover { border-color: #646cff; transform: translateY(-4px); box-shadow: 0 8px 24px rgba(100, 108, 255, 0.15); }
-.blog-post-card-image { width: 100%; height: 200px; overflow: hidden; background: #0f0f0f; }
+.blog-post-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; }
+.blog-post-card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15); }
+.blog-post-card-image { width: 100%; height: 200px; overflow: hidden; background: var(--color-bg-subtle); display: flex; align-items: center; justify-content: center; }
 .blog-post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
 .blog-post-card:hover .blog-post-card-image img { transform: scale(1.05); }
+.blog-post-image-placeholder { font-size: 3rem; color: var(--color-border-subtle); display: flex; align-items: center; justify-content: center; }
 .blog-post-card-content { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
-.blog-post-card-title { font-size: 1.25rem; font-weight: 600; margin: 0; color: rgba(255, 255, 255, 0.95); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
-.blog-post-card-summary { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); margin: 0; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; flex: 1; }
-.blog-post-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; border-top: 1px solid #333; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); flex-wrap: wrap; }
+.blog-post-card-title { font-size: 1.25rem; font-weight: 600; margin: 0; color: var(--color-text); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.blog-post-card-summary { font-size: 0.875rem; color: var(--color-text-secondary); margin: 0; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; flex: 1; }
+.blog-post-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); font-size: 0.75rem; color: var(--color-text-muted); flex-wrap: wrap; }
 .blog-post-card-author, .blog-post-card-date { display: flex; align-items: center; gap: 0.5rem; }
 .blog-post-card-author svg, .blog-post-card-date svg { opacity: 0.7; }
 @media (max-width: 768px) {
@@ -94,4 +99,3 @@
   .blog-post-card-content { padding: 1rem; }
 }
 
-

src/styles/components/forms.css

@@ -4,27 +4,80 @@
 .setting-label { text-align: left; flex: 1; }
 .setting-control { display: flex; justify-content: flex-end; align-items: center; }
 .setting-group.setting-inline label { margin-bottom: 0; }
-.setting-group label { display: block; margin-bottom: 0.5rem; color: #ccc; font-weight: 500; text-align: left; }
+.setting-group label { display: block; margin-bottom: 0.5rem; color: var(--color-text); font-weight: 500; text-align: left; }
 .setting-buttons { display: flex; align-items: center; gap: 0.5rem; }
 .color-picker { display: flex; align-items: center; gap: 0.5rem; }
-.color-swatch { width: 33px; height: 33px; border: 1px solid #444; border-radius: 6px; cursor: pointer; transition: all 0.2s; position: relative; }
-.color-swatch:hover { border-color: #888; }
-.color-swatch.active { border-color: #646cff; box-shadow: 0 0 0 2px #646cff; }
-.color-swatch.active::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #000; font-size: 0.875rem; font-weight: bold; text-shadow: 0 0 2px #fff; }
-.font-size-btn { min-width: 33px; height: 33px; padding: 0; background: transparent; border: 1px solid #444; border-radius: 6px; color: #ccc; cursor: pointer; transition: all 0.2s; font-weight: bold; display: flex; align-items: center; justify-content: center; }
-.font-size-btn:hover { background: #333; border-color: #666; }
-.font-size-btn.active { background: #646cff; border-color: #646cff; color: white; }
-.setting-preview { margin: 1.5rem 0; padding: 1rem; background: #1a1a1a; border: 1px solid #333; border-radius: 8px; }
-.preview-label { font-size: 0.875rem; color: #999; margin-bottom: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
-.preview-content { color: #ddd; line-height: 1.7; }
-.preview-content h3 { margin: 0 0 1rem 0; font-size: 1.5em; color: #fff; }
-.preview-content p { margin: 0.75rem 0; }
-.setting-select { width: 100%; padding: 0.5rem; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; color: #fff; font-size: 1rem; }
+.color-swatch { width: 33px; height: 33px; border: 1px solid var(--color-border-subtle); border-radius: 6px; cursor: pointer; transition: all 0.2s; position: relative; }
+.color-swatch:hover { border-color: var(--color-text-secondary); }
+.color-swatch.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
+.color-swatch.active::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgb(0 0 0); font-size: 0.875rem; font-weight: bold; text-shadow: 0 0 2px rgb(255 255 255); }
+.font-size-btn { min-width: 33px; height: 33px; padding: 0; background: transparent; border: 1px solid var(--color-border-subtle); border-radius: 6px; color: var(--color-text); cursor: pointer; transition: all 0.2s; font-weight: bold; display: flex; align-items: center; justify-content: center; }
+.font-size-btn:hover { background: var(--color-border); border-color: var(--color-text-muted); }
+.font-size-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: white; }
+.setting-preview { 
+  margin: 1.5rem 0; 
+  padding: 1rem; 
+  background: var(--color-bg); 
+  border: 1px solid var(--color-border); 
+  border-radius: 8px;
+  max-width: 100%;
+  overflow: hidden;
+}
+.preview-label { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
+.preview-content { 
+  color: var(--color-text); 
+  line-height: 1.7;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+.preview-content h3 { 
+  margin: 0 0 1rem 0; 
+  font-size: 1.5em; 
+  color: var(--color-text);
+  word-wrap: break-word;
+}
+.preview-content p { 
+  margin: 0.75rem 0;
+  word-wrap: break-word;
+}
+.setting-select { width: 100%; padding: 0.5rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 4px; color: var(--color-text); font-size: 1rem; }
 .setting-inline .setting-select { width: auto; min-width: 200px; flex: 1; }
-.setting-select:focus { outline: none; border-color: #646cff; }
+.setting-select:focus { outline: none; border-color: var(--color-primary); }
 .font-select option { padding: 0.5rem; font-size: 1rem; }
 .checkbox-label { display: flex !important; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; text-align: left; justify-content: flex-start; margin-bottom: 0 !important; font-weight: normal !important; }
-.setting-checkbox { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; margin: 0; accent-color: #646cff; }
-.checkbox-label span { color: #ddd; text-align: left; font-weight: 500; }
+.setting-checkbox { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; margin: 0; accent-color: var(--color-primary); }
+.checkbox-label span { color: var(--color-text); text-align: left; font-weight: 500; }
 
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+  .setting-group.setting-inline {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+  
+  .setting-inline .setting-select {
+    width: 100%;
+    min-width: unset;
+  }
+  
+  .setting-control {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  
+  .setting-buttons {
+    flex-wrap: wrap;
+  }
+  
+  .color-picker {
+    flex-wrap: wrap;
+  }
+  
+  .preview-content h3 {
+    font-size: 1.25em;
+  }
+}
 

src/styles/components/icon-button.css

@@ -3,10 +3,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #444;
+  border: 1px solid var(--color-border-subtle);
   border-radius: 6px;
-  background: #2a2a2a;
-  color: #ddd;
+  background: var(--color-bg-elevated);
+  color: var(--color-text);
   cursor: pointer;
   min-width: 33px;
   min-height: 33px;
@@ -14,16 +14,16 @@
   box-sizing: border-box;
 }
 
-.icon-button:hover { background: #333; }
+.icon-button:hover { background: var(--color-border); }
 .icon-button:active { transform: translateY(1px); }
 
-.icon-button.primary { background: #646cff; color: white; border-color: #646cff; }
+.icon-button.primary { background: var(--color-primary); color: white; border-color: var(--color-primary); }
 .icon-button.primary:hover { filter: brightness(1.05); }
 
-.icon-button.success { background: #28a745; color: white; border-color: #28a745; }
-.icon-button.success:hover { filter: brightness(1.05); }
+.icon-button.success { background: var(--color-primary); color: white; border-color: var(--color-primary); }
+.icon-button.success:hover { filter: brightness(1.1); }
 
-.icon-button.ghost { background: #2a2a2a; }
+.icon-button.ghost { background: var(--color-bg-elevated); }
 
 /* Mobile touch target improvements */
 @media (max-width: 768px) {
@@ -31,13 +31,19 @@
     min-width: var(--min-touch-target);
     min-height: var(--min-touch-target);
   }
+  
+  /* Keep icon size consistent to prevent blurriness */
+  .icon-button svg {
+    font-size: 1rem;
+    width: 1em;
+    height: 1em;
+  }
 }
 
 /* Disable hover effects on touch devices */
 @media (pointer: coarse) {
-  .icon-button:hover { background: #2a2a2a; }
-  .icon-button.ghost:hover { background: #2a2a2a; }
-  .icon-button:active { background: #333; }
+  .icon-button:hover { background: var(--color-bg-elevated); }
+  .icon-button.ghost:hover { background: var(--color-bg-elevated); }
+  .icon-button:active { background: var(--color-border); }
 }
 
-

src/styles/components/me.css

@@ -3,7 +3,7 @@
   display: flex;
   gap: 0.5rem;
   margin-top: 1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid var(--color-border);
   overflow-x: auto;
   max-width: 600px;
   margin-left: auto;
@@ -18,7 +18,7 @@
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
-  color: var(--text-secondary, #999);
+  color: var(--color-text-secondary);
   font-size: 0.95rem;
   font-weight: 500;
   cursor: pointer;
@@ -28,19 +28,32 @@
 }
 
 .me-tab:hover {
-  color: var(--text-primary, #ddd);
-  background: rgba(255, 255, 255, 0.05);
+  color: var(--color-text);
+  background: var(--color-bg-elevated);
 }
 
 .me-tab.active {
-  color: var(--primary-color, #8b5cf6);
-  border-bottom-color: var(--primary-color, #8b5cf6);
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
 }
 
-/* Highlights tab uses the user's custom "my highlights" color */
+/* Highlights tab uses the actual highlight style when active */
 .me-tab[data-tab="highlights"].active {
-  color: var(--highlight-color-mine, #ffff00);
-  border-bottom-color: var(--highlight-color-mine, #ffff00);
+  color: var(--color-text);
+  border-bottom-color: var(--highlight-color-mine, rgb(253 224 71)); /* yellow-300 */
+  background: color-mix(in srgb, var(--highlight-color-mine, rgb(253 224 71)) 35%, transparent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-mine, rgb(253 224 71)) 20%, transparent);
+}
+
+.me-tab[data-tab="highlights"].active:hover {
+  background: color-mix(in srgb, var(--highlight-color-mine, rgb(253 224 71)) 50%, transparent);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-mine, rgb(253 224 71)) 30%, transparent);
+}
+
+/* Reading List tab uses blue color to match bookmarks icon */
+.me-tab[data-tab="reading-list"].active {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
 }
 
 .me-tab svg {
@@ -63,18 +76,36 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  text-align: left; /* Override center alignment from .app */
+}
+
+/* Ensure all reading list elements are left-aligned */
+.bookmarks-list .individual-bookmark,
+.bookmarks-list .individual-bookmark * {
+  text-align: left;
+}
+
+/* Enhanced border styling for reading list cards */
+.bookmarks-list .individual-bookmark {
+  border: 1px solid var(--color-border-subtle) !important;
+  background: var(--color-bg) !important;
+}
+
+.bookmarks-list .individual-bookmark:hover {
+  border-color: var(--color-border) !important;
+  background: var(--color-bg-elevated) !important;
 }
 
 .bookmark-item {
   padding: 1rem;
-  background: var(--card-bg, #fff);
-  border: 1px solid var(--border-color, #e0e0e0);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
   border-radius: 8px;
   transition: all 0.2s ease;
 }
 
 .bookmark-item:hover {
-  border-color: var(--primary-color, #8b5cf6);
+  border-color: var(--color-primary);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
@@ -86,13 +117,13 @@
 .bookmark-item h3 {
   margin: 0 0 0.5rem 0;
   font-size: 1.1rem;
-  color: var(--text-primary, #000);
+  color: var(--color-text);
 }
 
 .bookmark-item p {
   margin: 0;
   font-size: 0.9rem;
-  color: var(--text-secondary, #666);
+  color: var(--color-text-secondary);
   line-height: 1.5;
 }
 
@@ -100,7 +131,7 @@
 @media (max-width: 768px) {
   /* Add top breathing room so floating sidebar buttons don't overlap header */
   .explore-container .explore-header { 
-    margin-top: 2.25rem; 
+    margin-top: 3.5rem; 
   }
 
   .me-tabs {
@@ -119,6 +150,11 @@
     margin-right: 0.25rem;
   }
 
+  /* Hide counts on mobile to save space */
+  .me-tab .tab-count {
+    display: none;
+  }
+
   .me-tab-content {
     padding: 1.25rem 0.75rem;
   }

src/styles/components/modals.css

@@ -1,28 +1,27 @@
 /* Add Bookmark Modal */
 .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 1rem; }
-.modal-content { background: #1a1a1a; border: 1px solid #333; border-radius: 12px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); box-sizing: border-box; }
+.modal-content { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); box-sizing: border-box; }
 @media (max-width: 768px) {
   .modal-overlay { padding: 0; align-items: flex-end; }
   .modal-content { max-width: 100%; max-height: 95vh; max-height: 95dvh; border-radius: 16px 16px 0 0; margin: 0; padding-bottom: var(--safe-area-bottom); }
 }
-.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid #333; }
-.modal-header h2 { margin: 0; font-size: 1.5rem; color: #fff; }
+.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid var(--color-border); }
+.modal-header h2 { margin: 0; font-size: 1.5rem; color: var(--color-text); }
 .modal-form { padding: 1.5rem; }
 .form-group { margin-bottom: 1.25rem; }
-.form-group label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; color: #ccc; font-size: 0.9rem; font-weight: 500; }
-.fetching-indicator { font-size: 0.8rem; color: #999; font-weight: normal; display: inline-flex; align-items: center; gap: 0.5rem; }
-.form-group input, .form-group textarea { width: 100%; padding: 0.75rem; background: #2a2a2a; border: 1px solid #444; border-radius: 6px; color: #fff; font-size: 1rem; font-family: inherit; transition: border-color 0.2s; box-sizing: border-box; }
-.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #646cff; }
+.form-group label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; color: var(--color-text); font-size: 0.9rem; font-weight: 500; }
+.fetching-indicator { font-size: 0.8rem; color: var(--color-text-secondary); font-weight: normal; display: inline-flex; align-items: center; gap: 0.5rem; }
+.form-group input, .form-group textarea { width: 100%; padding: 0.75rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 6px; color: var(--color-text); font-size: 1rem; font-family: inherit; transition: border-color 0.2s; box-sizing: border-box; }
+.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); }
 .form-group input:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; }
 .form-group textarea { resize: vertical; min-height: 80px; }
-.form-helper-text { margin-top: 0.25rem; font-size: 0.8rem; color: #999; line-height: 1.4; }
-.modal-error { padding: 0.75rem; background: rgba(220, 53, 69, 0.1); border: 1px solid #dc3545; border-radius: 6px; color: #dc3545; font-size: 0.9rem; margin-bottom: 1rem; }
+.form-helper-text { margin-top: 0.25rem; font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.4; }
+.modal-error { padding: 0.75rem; background: rgba(220, 53, 69, 0.1); border: 1px solid rgb(220 38 38); border-radius: 6px; color: rgb(220 38 38); font-size: 0.9rem; margin-bottom: 1rem; }
 .modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }
-.btn-secondary { padding: 0.75rem 1.5rem; background: #2a2a2a; border: 1px solid #444; border-radius: 6px; color: #ccc; font-size: 1rem; cursor: pointer; transition: all 0.2s; }
-.btn-secondary:hover:not(:disabled) { background: #333; border-color: #646cff; color: white; }
+.btn-secondary { padding: 0.75rem 1.5rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 6px; color: var(--color-text); font-size: 1rem; cursor: pointer; transition: all 0.2s; }
+.btn-secondary:hover:not(:disabled) { background: var(--color-border); border-color: var(--color-primary); color: var(--color-text); }
 .btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }
-.btn-primary { padding: 0.75rem 1.5rem; background: #646cff; border: none; border-radius: 6px; color: white; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; }
-.btn-primary:hover:not(:disabled) { background: #535bf2; }
+.btn-primary { padding: 0.75rem 1.5rem; background: var(--color-primary); border: none; border-radius: 6px; color: white; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; }
+.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
 .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
 
-

src/styles/components/profile.css

@@ -1,20 +1,30 @@
 /* Profile UI fragments */
 .author-card-container { display: flex; justify-content: center; padding: 2rem 1rem; }
-.author-card { display: flex; gap: 1rem; padding: 1.5rem; background: #1a1a1a; border: 1px solid #333; border-radius: 12px; max-width: 600px; width: 100%; }
-.author-card-avatar { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: #2a2a2a; display: flex; align-items: center; justify-content: center; color: #666; }
+.author-card { display: flex; gap: 1rem; padding: 1.5rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; max-width: 600px; width: 100%; transition: all 0.2s ease; }
+.author-card-clickable:hover { border-color: var(--color-primary); background: var(--color-bg-elevated); transform: translateY(-1px); }
+.author-card-clickable:active { transform: translateY(0); }
+.author-card-avatar { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--color-bg-elevated); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
 .author-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
 .author-card-avatar svg { font-size: 2.5rem; }
 .author-card-content { flex: 1; min-width: 0; text-align: left; }
-.author-card-name { font-size: 1rem; font-weight: 600; color: #ddd; margin-bottom: 0.5rem; text-align: left; }
-.author-card-bio { font-size: 0.9rem; color: #999; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align: left; }
+.author-card-name { font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.5rem; text-align: left; }
+.author-card-bio { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align: left; }
 
 @media (max-width: 768px) {
-  .author-card-container { padding: 1.5rem 1rem; }
-  .author-card { padding: 1rem; }
+  .author-card-container { 
+    padding: 1.5rem 1rem; 
+    margin: 0 1rem; /* Add horizontal margin to prevent bleeding */
+    max-width: calc(100vw - 2rem); /* Ensure it doesn't exceed screen width */
+    box-sizing: border-box;
+  }
+  .author-card { 
+    padding: 1rem; 
+    max-width: 100%; /* Ensure card doesn't exceed container */
+    box-sizing: border-box;
+  }
   .author-card-avatar { width: 48px; height: 48px; }
   .author-card-avatar svg { font-size: 2rem; }
   .author-card-name { font-size: 0.95rem; }
   .author-card-bio { font-size: 0.85rem; -webkit-line-clamp: 2; }
 }
 
-

src/styles/components/pull-to-refresh.css

@@ -0,0 +1,53 @@
+/* Pull-to-refresh indicator styles */
+.pull-to-refresh-indicator {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  z-index: 100;
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.pull-to-refresh-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-elevated);
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  font-size: 1rem;
+  color: var(--color-text-secondary);
+}
+
+.pull-to-refresh-text {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  text-align: center;
+  white-space: nowrap;
+  font-weight: 500;
+  background: var(--color-bg-elevated);
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Container needs relative positioning for absolute indicator */
+.pull-to-refresh-container {
+  position: relative;
+}
+
+/* Ensure smooth transitions during pull */
+.pull-to-refresh-container.is-pulling {
+  overflow: visible;
+}
+

src/styles/components/reader.css

@@ -1,42 +1,211 @@
 /* Reader view */
-.reader { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 0.75rem; text-align: left; overflow: hidden; contain: layout style; }
-.reader.empty { color: #888; }
-.loading-spinner { display: flex; align-items: center; gap: 0.5rem; color: #888; }
+.reader { 
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 8px; 
+  padding: 0.75rem; 
+  text-align: left; 
+  overflow: hidden; 
+  max-width: 900px;
+  margin: 0 auto;
+  padding-bottom: 2rem; /* Add space for progress indicator */
+}
+
+/* Video container - responsive wrapper following react-player docs */
+.reader-video { 
+  position: relative;
+  width: 80vw;  /* 80% of viewport width */
+  min-width: 400px;  /* Minimum width */
+  max-width: 1000px;   /* Maximum width */
+  aspect-ratio: 16/9;
+  margin: 0 -0.75rem 1rem -0.75rem; /* Negative margins to counteract reader padding */
+  background: rgb(0 0 0); /* black */
+}
+.reader.empty { color: var(--color-text-secondary); }
+.loading-spinner { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-secondary); }
 .loading-spinner svg { font-size: 1.2rem; }
 .reader-header { margin-bottom: 2rem; position: relative; }
-.reader-title { margin: 0 0 0.75rem 0; font-family: var(--reading-font); }
-.reader-summary { color: #aaa; font-size: 1.1rem; line-height: 1.5; margin: 0 0 1rem 0; font-family: var(--reading-font); }
+.reader-title { margin: 0 0 0.75rem 0; font-family: var(--reading-font); font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
+.reader-summary { color: var(--color-text); font-size: 1.2rem; line-height: 1.6; margin: 0 0 1rem 0; font-family: var(--reading-font); }
 .reader-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
-.publish-date { display: flex; align-items: center; gap: 0.4rem; font-size: 0.813rem; color: rgba(136, 136, 136, 0.7); opacity: 0.85; }
+.publish-date { display: flex; align-items: center; gap: 0.4rem; font-size: 0.813rem; color: var(--color-text-muted); opacity: 0.85; }
 .publish-date svg { font-size: 0.75rem; opacity: 0.6; }
-.publish-date-topright { position: absolute; top: 1rem; right: 1rem; font-size: 0.813rem; color: #fff; padding: 0.4rem 0.75rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); z-index: 10; }
-.reading-time { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: rgba(136, 136, 136, 0.1); border: 1px solid rgba(136, 136, 136, 0.3); border-radius: 6px; font-size: 0.875rem; color: #888; }
+.publish-date-topright { position: absolute; top: 1rem; right: 1rem; font-size: 0.813rem; color: var(--color-text); padding: 0.4rem 0.75rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); z-index: 10; }
+.reading-time { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.875rem; color: var(--color-text-secondary); }
 .reading-time svg { font-size: 0.875rem; }
-.highlight-indicator { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: rgba(100, 108, 255, 0.1); border: 1px solid rgba(100, 108, 255, 0.3); border-radius: 6px; font-size: 0.875rem; color: #646cff; }
+.highlight-indicator { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 6px; font-size: 0.875rem; color: var(--color-text); }
 .highlight-indicator svg { font-size: 0.875rem; }
-.reader-html { color: #ddd; line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; font-family: var(--reading-font); font-size: var(--reading-font-size); }
-.reader-markdown { color: #ddd; line-height: 1.7; font-family: var(--reading-font); font-size: var(--reading-font-size); }
+.reader-html { color: var(--color-text); line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; font-family: var(--reading-font); font-size: var(--reading-font-size); }
+.reader-markdown { color: var(--color-text); line-height: 1.7; font-family: var(--reading-font); font-size: var(--reading-font-size); }
 /* Ensure content is left-aligned even if source markup uses center */
 .reader .reader-html *, .reader .reader-markdown * { text-align: left !important; font-family: inherit !important; }
 .reader center, .reader [align="center"] { text-align: left !important; }
 /* Tame images from external content */
 .reader .reader-html img, .reader .reader-markdown img { max-width: 100%; max-height: 70vh; height: auto; width: auto; display: block; margin: 0.75rem 0; border-radius: 6px; }
-.reader-markdown h1, .reader-markdown h2, .reader-markdown h3, .reader-markdown h4 { margin-top: 1.2rem; }
+/* Headlines with Tailwind typography */
+.reader-markdown h1, .reader-html h1 { 
+  font-size: 2.25rem; /* text-4xl */
+  font-weight: 700; 
+  line-height: 1.2; 
+  margin-top: 2rem; 
+  margin-bottom: 1rem; 
+  color: var(--color-text);
+}
+.reader-markdown h2, .reader-html h2 { 
+  font-size: 1.875rem; /* text-3xl */
+  font-weight: 600; 
+  line-height: 1.3; 
+  margin-top: 1.75rem; 
+  margin-bottom: 0.875rem; 
+  color: var(--color-text);
+}
+.reader-markdown h3, .reader-html h3 { 
+  font-size: 1.5rem; /* text-2xl */
+  font-weight: 600; 
+  line-height: 1.4; 
+  margin-top: 1.5rem; 
+  margin-bottom: 0.75rem; 
+  color: var(--color-text);
+}
+.reader-markdown h4, .reader-html h4 { 
+  font-size: 1.25rem; /* text-xl */
+  font-weight: 600; 
+  line-height: 1.4; 
+  margin-top: 1.25rem; 
+  margin-bottom: 0.625rem; 
+  color: var(--color-text);
+}
+.reader-markdown h5, .reader-html h5 { 
+  font-size: 1.125rem; /* text-lg */
+  font-weight: 600; 
+  line-height: 1.4; 
+  margin-top: 1rem; 
+  margin-bottom: 0.5rem; 
+  color: var(--color-text);
+}
+.reader-markdown h6, .reader-html h6 { 
+  font-size: 1rem; /* text-base */
+  font-weight: 600; 
+  line-height: 1.4; 
+  margin-top: 1rem; 
+  margin-bottom: 0.5rem; 
+  color: var(--color-text);
+}
 .reader-markdown p { margin: 0.5rem 0; }
 .reader-html p, .reader-html div, .reader-html span, .reader-html li, .reader-html td, .reader-html th { font-size: 1em !important; }
-.reader-markdown a { color: #8ab4f8; text-decoration: none; }
+/* Lists */
+.reader-markdown ul, .reader-html ul {
+  list-style-type: disc;
+  margin: 1rem 0;
+  padding-left: 2rem;
+}
+.reader-markdown ol, .reader-html ol {
+  list-style-type: decimal;
+  margin: 1rem 0;
+  padding-left: 2rem;
+}
+.reader-markdown li, .reader-html li {
+  margin: 0.375rem 0;
+  line-height: 1.6;
+  color: var(--color-text);
+}
+.reader-markdown ul ul, .reader-markdown ol ul, .reader-html ul ul, .reader-html ol ul {
+  list-style-type: circle;
+  margin: 0.25rem 0;
+}
+.reader-markdown ul ol, .reader-markdown ol ol, .reader-html ul ol, .reader-html ol ol {
+  list-style-type: lower-alpha;
+  margin: 0.25rem 0;
+}
+.reader-markdown li p, .reader-html li p {
+  margin: 0.25rem 0;
+}
+.reader-markdown blockquote, .reader-html blockquote { 
+  margin: 1.5rem 0; 
+  padding: 1rem 0 1rem 2rem;
+  font-style: italic;
+}
+.reader-markdown blockquote p, .reader-html blockquote p { margin: 0.5rem 0; }
+.reader-markdown blockquote p:first-child, .reader-html blockquote p:first-child { margin-top: 0; }
+.reader-markdown blockquote p:last-child, .reader-html blockquote p:last-child { margin-bottom: 0; }
+.reader-markdown a { color: var(--color-primary); text-decoration: none; }
 .reader-markdown a:hover { text-decoration: underline; }
-.reader-markdown pre, .reader-markdown code { background: #111; border: 1px solid #333; border-radius: 6px; }
-.reader-markdown pre { padding: 0.75rem; overflow: auto; }
-.reader-markdown code { padding: 0.1rem 0.3rem; }
+.reader-markdown code { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-markdown pre { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; line-height: 1.5; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-markdown pre code { background: transparent; border: none; padding: 0; font-size: 0.9em; display: block; }
+/* Prism.js enhancements */
+.reader-markdown pre[class*="language-"] { background: var(--color-bg-subtle); border: 1px solid var(--color-border); }
+.reader-markdown code[class*="language-"] { background: transparent; text-shadow: none; }
+.reader-html pre { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-html code { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-html pre code { background: transparent; border: none; padding: 0; display: block; }
+/* Mobile: prevent code blocks from causing horizontal overflow */
+@media (max-width: 768px) {
+  .reader-markdown pre, .reader-html pre {
+    max-width: 100%;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+  
+  .reader-markdown code, .reader-html code {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+  
+  /* Also handle tables and other wide elements */
+  .reader-markdown table, .reader-html table {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+  }
+  
+  .reader-markdown img, .reader-html img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+/* Desktop: increase horizontal padding for text content */
+@media (min-width: 769px) {
+  .reader-header,
+  .reader-summary-below-image,
+  .reader-html, 
+  .reader-markdown,
+  .article-menu-container,
+  .mark-as-read-container {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+/* Article menu */
+.article-menu-container { display: flex; justify-content: flex-end; padding: 1.5rem 0 0.5rem; margin-top: 2rem; }
+.article-menu-wrapper { position: relative; }
+.article-menu-btn { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; padding: 0.5rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease; border-radius: 6px; }
+.article-menu-btn:hover { color: var(--color-primary); background: rgba(99, 102, 241, 0.1); }
+.article-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; min-width: 180px; overflow: hidden; }
+.article-menu-item { width: 100%; background: none; border: none; color: var(--color-text); padding: 0.75rem 1rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: all 0.15s ease; text-align: left; white-space: nowrap; }
+.article-menu-item:hover { background: rgba(99, 102, 241, 0.15); color: var(--color-text); }
+.article-menu-item svg { font-size: 0.875rem; flex-shrink: 0; }
+
 /* Mark as Read button */
-.mark-as-read-container { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem; margin-top: 2rem; border-top: 1px solid #333; }
-.mark-as-read-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: #2a2a2a; color: #ddd; border: 1px solid #444; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; min-width: 160px; justify-content: center; }
-.mark-as-read-btn:hover:not(:disabled) { background: #333; border-color: #555; transform: translateY(-1px); }
+.mark-as-read-container { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem; margin-top: 1rem; }
+.mark-as-read-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--color-bg-elevated); color: var(--color-text); border: 1px solid var(--color-border-subtle); border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; min-width: 160px; justify-content: center; }
+.mark-as-read-btn:hover:not(:disabled) { background: var(--color-border); border-color: var(--color-text-muted); transform: translateY(-1px); }
 .mark-as-read-btn:active:not(:disabled) { transform: translateY(0); }
 .mark-as-read-btn:disabled { opacity: 0.6; cursor: not-allowed; }
 .mark-as-read-btn svg { font-size: 1.1rem; }
 @media (max-width: 768px) {
+  .reader {
+    max-width: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0.5rem;
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
   .mark-as-read-container { padding: 1.5rem 1rem; }
   .mark-as-read-btn { width: 100%; max-width: 300px; }
 }
@@ -48,8 +217,8 @@
 .reader-hero-image { width: calc(100% + 1.5rem); margin: -0.75rem -0.75rem 2rem -0.75rem; border-radius: 0; overflow: hidden; position: relative; min-height: 300px; }
 .reader-hero-image img { width: 100%; height: auto; max-height: 500px; object-fit: cover; display: block; }
 .reader-header-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 2rem 1.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%); }
-.reader-header-overlay .reader-title { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); margin-bottom: 0.75rem; }
-.reader-header-overlay .reader-summary { color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; line-height: 1.5; margin: 0 0 1rem 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); font-family: var(--reading-font); }
+.reader-header-overlay .reader-title { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); margin-bottom: 0.75rem; font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
+.reader-header-overlay .reader-summary { color: rgba(255, 255, 255, 0.9); font-size: 1.2rem; line-height: 1.6; margin: 0 0 1rem 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); font-family: var(--reading-font); }
 .reader-header-overlay .reader-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
 .reader-header-overlay .publish-date { color: rgba(255, 255, 255, 0.65); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); opacity: 1; }
 .reader-header-overlay .publish-date svg { opacity: 0.7; }
@@ -59,11 +228,12 @@
 @media (max-width: 768px) {
   .reader-header-overlay .reader-summary.hide-on-mobile { display: none; }
   .reader-summary-below-image { display: block; padding: 0 0 1.5rem 0; margin-top: -1rem; }
-  .reader-summary-below-image .reader-summary { color: #aaa; font-size: 1rem; line-height: 1.6; margin: 0; }
+  .reader-summary-below-image .reader-summary { color: var(--color-text-secondary); font-size: 1rem; line-height: 1.6; margin: 0; }
   .reader-hero-image { min-height: 280px; max-height: 400px; height: 50vh; }
   .reader-hero-image img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
   .reader-header-overlay { padding: 1.5rem 1rem 1rem; }
-  .reader-header-overlay .reader-title { font-size: 1.5rem; line-height: 1.3; }
+  .reader-header-overlay .reader-title { font-size: 2rem; line-height: 1.3; }
 }
 
+/* Reading Progress Indicator - now using Tailwind utilities in component */
 

src/styles/components/settings.css

@@ -6,10 +6,143 @@
 .settings-content { overflow-y: auto; flex: 1; margin-bottom: 1rem; text-align: left; padding: 0 0.25rem 2rem 0.25rem; }
 .settings-section { margin-bottom: 2.5rem; }
 .settings-section:last-child { margin-bottom: 0; }
-.section-title { font-size: 1rem; font-weight: 600; color: #fff; margin: 0 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid #333; text-transform: uppercase; letter-spacing: 0.05em; }
+.section-title { font-size: 1rem; font-weight: 600; color: var(--color-text); margin: 0 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); text-transform: uppercase; letter-spacing: 0.05em; }
 .settings-footer { display: flex; justify-content: flex-start; padding: 1rem 0 0.5rem 0; flex-shrink: 0; }
-.settings-footer .btn-primary { background: #646cff; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem; }
-.settings-footer .btn-primary:hover:not(:disabled) { background: #535bf2; }
+.settings-footer .btn-primary { background: var(--color-primary); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem; }
+.settings-footer .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
 .settings-footer .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
 
+/* Setting groups */
+.setting-group { margin-bottom: 1.5rem; }
+.setting-label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; font-weight: 500; color: var(--color-text); }
+
+/* Zap splits preset buttons */
+.zap-preset-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+.zap-preset-btn {
+  padding: 0.625rem 1.25rem;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: 6px;
+  color: var(--color-text);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-weight: 500;
+}
+.zap-preset-btn:hover {
+  background: var(--color-border);
+  border-color: var(--color-primary);
+  color: var(--color-text);
+}
+.zap-preset-btn.active {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: rgb(255 255 255); /* white */
+}
+
+/* Zap split sliders */
+.zap-split-container { width: 100%; }
+.zap-split-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+}
+.zap-split-label { font-weight: 500; }
+.zap-split-slider {
+  width: 100%;
+  height: 8px;
+  border-radius: 4px;
+  background: var(--color-bg-elevated);
+  outline: none;
+  -webkit-appearance: none;
+}
+.zap-split-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.zap-split-slider::-webkit-slider-thumb:hover {
+  background: var(--color-primary-hover);
+  transform: scale(1.1);
+}
+.zap-split-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s ease;
+}
+.zap-split-slider::-moz-range-thumb:hover {
+  background: var(--color-primary-hover);
+  transform: scale(1.1);
+}
+.zap-split-description {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--color-text-secondary);
+}
+
+/* Relay items */
+.relay-item {
+  max-width: 100%;
+}
+
+.relay-url {
+  max-width: 100%;
+}
+
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+  .settings-view {
+    padding: 0.5rem;
+    max-width: 100vw;
+    overflow-x: hidden;
+  }
+  
+  .settings-content {
+    padding: 0 0.25rem 2rem 0.25rem;
+    max-width: 100%;
+  }
+  
+  .settings-section {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+  
+  .zap-preset-buttons {
+    width: 100%;
+  }
+  
+  .zap-preset-btn {
+    flex: 1 1 auto;
+    min-width: 70px;
+  }
+  
+  .relay-item {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+  
+  .relay-url {
+    white-space: normal !important;
+    word-break: break-all !important;
+    overflow: visible !important;
+    text-overflow: unset !important;
+    line-height: 1.4;
+  }
+}
 

src/styles/components/toast.css

@@ -1,13 +1,12 @@
 /* Toast Notification */
-.toast { position: fixed; top: 2rem; right: 2rem; background: #1a1a1a; color: #fff; padding: 1rem 1.5rem; border-radius: 8px; border: 1px solid #333; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); animation: toast-slide-in 0.3s ease-out; z-index: 9999; font-size: 0.95rem; }
+.toast { position: fixed; top: 2rem; right: 2rem; background: var(--color-bg); color: var(--color-text); padding: 1rem 1.5rem; border-radius: 8px; border: 1px solid var(--color-border); display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); animation: toast-slide-in 0.3s ease-out; z-index: 9999; font-size: 0.95rem; }
 @media (max-width: 768px) {
   .toast { top: auto; bottom: calc(1rem + var(--safe-area-bottom)); right: 1rem; left: 1rem; max-width: calc(100% - 2rem); }
   @keyframes toast-slide-in { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
 }
-.toast-success { border-color: #28a745; }
-.toast-success svg { color: #28a745; }
-.toast-error { border-color: #dc3545; }
-.toast-error svg { color: #dc3545; }
+.toast-success { border-color: rgb(34 197 94); /* green-500 */ }
+.toast-success svg { color: rgb(34 197 94); /* green-500 */ }
+.toast-error { border-color: rgb(220 38 38); /* red-600 */ }
+.toast-error svg { color: rgb(220 38 38); /* red-600 */ }
 @keyframes toast-slide-in { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
 
-

src/styles/layout/app.css

@@ -18,52 +18,79 @@
 
 .two-pane.sidebar-collapsed { grid-template-columns: 60px 1fr; }
 
-/* Three-pane layout */
+/* Three-pane layout - document scroll, sticky sidebars */
 .three-pane {
   display: grid;
   grid-template-columns: var(--sidebar-width) 1fr var(--highlights-width);
   column-gap: 0;
-  height: calc(100vh - 2rem);
   transition: grid-template-columns 0.3s ease;
   position: relative;
-}
-
-@supports (height: 100dvh) {
-  .three-pane { height: calc(100dvh - 2rem); }
+  min-height: 100vh;
+  height: auto !important;
+  max-height: none !important;
+  overflow: visible !important;
 }
 
 .three-pane.sidebar-collapsed { grid-template-columns: var(--sidebar-collapsed-width) 1fr var(--highlights-width); }
 .three-pane.highlights-collapsed { grid-template-columns: var(--sidebar-width) 1fr var(--highlights-collapsed-width); }
 .three-pane.sidebar-collapsed.highlights-collapsed { grid-template-columns: var(--sidebar-collapsed-width) 1fr var(--highlights-collapsed-width); }
 
-/* Mobile three-pane layout */
-@media (max-width: 768px) {
-  .three-pane {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
+/* Desktop: sticky sidebars, document scroll */
+@media (min-width: 769px) {
+  .pane.sidebar {
+    position: sticky;
+    top: 0;
     height: 100vh;
-    height: 100dvh;
+    max-height: 100vh;
+    overflow-y: auto;
+    align-self: start;
+    margin: 0;
+    padding: 0;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
+  }
+  
+  .pane.main {
+    margin: 0 auto;
+    padding: 0 var(--main-horizontal-padding);
+    min-height: 100vh;
+    overflow: visible !important;
+    height: auto !important;
+  }
+  
+  .pane.highlights {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    max-height: 100vh;
+    overflow-y: auto;
+    align-self: start;
+    margin: 0;
+    padding: 0;
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
   }
-  .three-pane.sidebar-collapsed,
-  .three-pane.highlights-collapsed,
-  .three-pane.sidebar-collapsed.highlights-collapsed { grid-template-columns: 1fr; }
-}
-
-.pane.sidebar { overflow-y: auto; height: 100%; }
-.pane.main {
-  overflow-y: auto;
-  height: 100%;
-  max-width: var(--main-max-width);
-  margin: 0 auto;
-  padding: 0 var(--main-horizontal-padding);
-  overflow-x: hidden;
-  contain: layout style;
 }
 
 /* Remove padding when sidebar is collapsed for zero gap */
 .three-pane.sidebar-collapsed .pane.main { padding-left: 0; }
 .three-pane.sidebar-collapsed.highlights-collapsed .pane.main { padding-left: 0; }
-.pane.highlights { overflow-y: auto; height: 100%; }
+
+/* Mobile three-pane layout */
+@media (max-width: 768px) {
+  .three-pane {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+  .three-pane.sidebar-collapsed,
+  .three-pane.highlights-collapsed,
+  .three-pane.sidebar-collapsed.highlights-collapsed { grid-template-columns: 1fr; }
+  
+  .pane.main {
+    margin: 0 auto;
+    padding: 0;
+    max-width: 100vw;
+    overflow-x: hidden;
+  }
+}
 
 /* Ensure panes are stacked in the correct order on desktop */
 @media (min-width: 769px) {
@@ -84,7 +111,7 @@
     max-width: 320px;
     height: 100vh;
     height: 100dvh;
-    background: #1a1a1a;
+    background: var(--color-bg);
     z-index: 1001; /* Above backdrop */
     transition: transform 0.3s ease;
     box-shadow: none;
@@ -103,43 +130,17 @@
   /* Highlights sidebar from right */
   .pane.highlights { right: 0; transform: translateX(100%); }
   .pane.highlights.mobile-open { transform: translateX(0); box-shadow: -4px 0 12px rgba(0, 0, 0, 0.5); }
-  .pane.main { grid-column: 1; grid-row: 1; padding: 0.5rem; max-width: 100%; transition: opacity 0.2s ease; }
+  .pane.main { 
+    grid-column: 1; 
+    grid-row: 1; 
+    padding: 0; 
+    max-width: 100%; 
+    width: 100%;
+    transition: opacity 0.2s ease;
+  }
   /* Hide main content when sidepanes are open on mobile */
   .three-pane .pane.main.mobile-hidden { opacity: 0; pointer-events: none; }
-  .mobile-sidebar-backdrop {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.45);
-    z-index: 999; /* Below sidepanes */
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-  .mobile-sidebar-backdrop.visible { display: block; opacity: 1; }
-  .mobile-highlights-btn {
-    display: none;
-    position: fixed;
-    top: calc(1rem + env(safe-area-inset-top));
-    right: calc(1rem + env(safe-area-inset-right));
-    z-index: 900;
-    background: #2a2a2a;
-    border: 1px solid #444;
-    border-radius: 8px;
-    color: #ddd;
-    width: var(--min-touch-target);
-    height: var(--min-touch-target);
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    transition: transform 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
-  }
-  .mobile-highlights-btn.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
-  .mobile-highlights-btn.visible { opacity: 1; visibility: visible; }
-  @media (max-width: 768px) { .mobile-highlights-btn { display: flex; } }
+  /* Mobile buttons and backdrop now use Tailwind utilities in component */
 }
 
 

src/styles/layout/highlights.css

@@ -1,14 +1,20 @@
 /* Highlights panel layout and interactions */
 .highlights-container {
-  background: #1a1a1a;
-  border: 1px solid #333;
-  border-radius: 12px;
+  background: var(--color-bg);
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
 }
 
+/* Desktop: no border or rounded corners for edge-to-edge sidebars */
+@media (min-width: 769px) {
+  .highlights-container {
+    border: none;
+    border-radius: 0;
+  }
+}
+
 .highlights-container.collapsed {
   display: flex;
   align-items: flex-start;
@@ -19,8 +25,8 @@
 }
 
 .highlights-container.collapsed .toggle-highlights-btn {
-  background: #2a2a2a;
-  color: #ddd;
+  background: var(--color-bg-elevated);
+  color: var(--color-text);
   border: none;
   padding: 0;
   border-radius: 0;
@@ -33,7 +39,7 @@
   height: 36px;
 }
 
-.highlights-container.collapsed .toggle-highlights-btn:hover { background: #333; color: #fff; }
+.highlights-container.collapsed .toggle-highlights-btn:hover { background: var(--color-border); color: var(--color-text); }
 .highlights-container.collapsed .toggle-highlights-btn:active { transform: translateY(1px); }
 .highlights-container.collapsed .toggle-highlights-btn.with-icon { width: auto; padding: 0 0.5rem; gap: 0.5rem; }
 
@@ -42,93 +48,58 @@
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid #333;
-  background: #1a1a1a;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bg);
   border-radius: 12px 12px 0 0;
 }
 
+/* Desktop: no rounded corners for edge-to-edge header */
+@media (min-width: 769px) {
+  .highlights-header {
+    border-radius: 0;
+  }
+}
+
 .highlights-actions { display: flex; align-items: center; justify-content: space-between; width: 100%; }
 .highlights-actions-left { display: flex; align-items: center; gap: 0.5rem; }
 
 .highlights-title { display: flex; align-items: center; gap: 0.5rem; }
 .highlights-title h3 { margin: 0; font-size: 1rem; font-weight: 600; }
-.highlights-title .count { color: #888; font-size: 0.875rem; }
+.highlights-title .count { color: var(--color-text-secondary); font-size: 0.875rem; }
 
 .highlight-mode-toggle { display: flex; gap: 0.25rem; padding: 0.25rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
-.highlight-mode-toggle .mode-btn { background: none; border: none; color: #888; cursor: pointer; padding: 0.375rem 0.5rem; border-radius: 3px; transition: all 0.2s; font-size: 0.9rem; }
-.highlight-mode-toggle .mode-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
-.highlight-mode-toggle .mode-btn.active { background: #646cff; color: #fff; }
+.highlight-mode-toggle .mode-btn { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; padding: 0.375rem 0.5rem; border-radius: 3px; transition: all 0.2s; font-size: 0.9rem; }
+.highlight-mode-toggle .mode-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--color-text); }
+.highlight-mode-toggle .mode-btn.active { background: var(--color-primary); color: rgb(255 255 255); /* white */ }
 
 /* Three-level highlight toggles */
 .highlight-level-toggles { display: flex; gap: 0.25rem; padding: 0.25rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
-.highlight-level-toggles .level-toggle-btn { background: none; border: none; color: #888; cursor: pointer; padding: 0.375rem 0.5rem; border-radius: 3px; transition: all 0.2s; font-size: 0.9rem; }
-.highlight-level-toggles .level-toggle-btn:hover { background: rgba(255, 255, 255, 0.1); }
-.highlight-level-toggles .level-toggle-btn.active { background: rgba(255, 255, 255, 0.1); opacity: 1; }
-.highlight-level-toggles .level-toggle-btn:not(.active) { opacity: 0.4; }
-.highlight-level-toggles .level-toggle-btn:disabled { opacity: 0.3; cursor: not-allowed; }
-.highlight-level-toggles .level-toggle-btn:disabled:hover { background: none; }
-
-.refresh-highlights-btn,
-.toggle-highlight-display-btn,
-.toggle-highlights-btn {
-  background: transparent;
-  color: #ddd;
-  border: 1px solid #444;
-  padding: 0;
-  border-radius: 6px;
-  cursor: pointer;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-}
-
-.refresh-highlights-btn:hover,
-.toggle-highlight-display-btn:hover,
-.toggle-highlights-btn:hover { background: #2a2a2a; color: #fff; }
-.refresh-highlights-btn:active,
-.toggle-highlight-display-btn:active,
-.toggle-highlights-btn:active { transform: translateY(1px); }
-.refresh-highlights-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.refresh-highlights-btn:disabled:hover { background: transparent; color: #ddd; }
 
 .highlights-loading,
-.highlights-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; color: #888; text-align: center; gap: 0.5rem; }
-.highlights-empty svg { color: #555; margin-bottom: 0.5rem; }
-.empty-hint { font-size: 0.875rem; color: #666; margin-top: 0.5rem; }
+.highlights-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; color: var(--color-text-secondary); text-align: center; gap: 0.5rem; }
+.highlights-empty svg { color: var(--color-text-muted); margin-bottom: 0.5rem; }
+.empty-hint { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 0.5rem; }
 
 .highlights-list { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
-.highlight-item { background: #1e1e1e; border-left: 1px solid #333; border-right: 1px solid #333; padding: 0; display: flex; transition: border-color 0.2s ease; position: relative; }
-.highlight-item:hover { border-color: #646cff; }
-.highlight-item:hover .highlight-header,
-.highlight-item:hover .highlight-footer { border-color: #646cff; }
-.highlight-item.selected { border-color: #646cff; background: #252525; box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.3); }
-.highlight-item.selected .highlight-header,
-.highlight-item.selected .highlight-footer { border-color: #646cff; }
+.highlight-item { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 8px; padding: 0; display: flex; transition: border-color 0.2s ease; position: relative; }
+.highlight-item:hover { border-color: var(--color-primary); }
+.highlight-item.selected { border-color: var(--color-primary); background: var(--color-bg-elevated); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3); }
 
 /* Compact button for highlight cards */
-.compact-button { background: none; border: none; color: #888; cursor: pointer; padding: 0.25rem; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem; transition: all 0.2s ease; border-radius: 4px; min-width: 20px; min-height: 20px; }
-.compact-button:hover { color: #aaa; background: rgba(255, 255, 255, 0.05); }
+.compact-button { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; padding: 0.25rem; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem; transition: all 0.2s ease; border-radius: 4px; min-width: 20px; min-height: 20px; }
+.compact-button:hover { color: var(--color-text); background: rgba(255, 255, 255, 0.05); }
 .compact-button:active { transform: scale(0.95); }
 .compact-button:disabled { opacity: 0.5; cursor: not-allowed; }
-.compact-button:disabled:hover { background: none; color: #888; transform: none; }
+.compact-button:disabled:hover { background: none; color: var(--color-text-secondary); transform: none; }
 
-.highlight-header { position: absolute; top: 0; left: 0; right: 0; padding: 0.25rem 0.5rem; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; border-top: 1px solid #333; border-top-left-radius: 8px; border-top-right-radius: 8px; transition: border-color 0.2s ease; }
+.highlight-header { position: absolute; top: 0; left: 0; right: 0; padding: 0.25rem 0.5rem; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; border-top-left-radius: 8px; border-top-right-radius: 8px; transition: border-color 0.2s ease; }
 .highlight-header .compact-button { pointer-events: auto; }
 .highlight-timestamp { font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
 
 /* Level colors in sidebar items */
 .highlight-item.level-mine { border-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 25%, transparent); }
-.highlight-item.level-mine .highlight-header,
-.highlight-item.level-mine .highlight-footer { border-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 60%, #333); }
 .highlight-item.level-friends { border-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-friends, #f97316) 25%, transparent); }
-.highlight-item.level-friends .highlight-header,
-.highlight-item.level-friends .highlight-footer { border-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 60%, #333); }
 .highlight-item.level-nostrverse { border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 25%, transparent); }
-.highlight-item.level-nostrverse .highlight-header,
-.highlight-item.level-nostrverse .highlight-footer { border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 60%, #333); }
 
 .highlight-quote-button { position: absolute; top: 0.25rem; left: 0.5rem; z-index: 10; }
 .highlight-item.level-mine .highlight-quote-button { color: var(--highlight-color-mine, #ffff00); }
@@ -141,6 +112,13 @@
 @media (max-width: 768px) {
   .highlight-relay-indicator { padding: 8px; min-width: var(--min-touch-target); min-height: var(--min-touch-target); }
   .compact-button { padding: 0.5rem; min-width: var(--min-touch-target); min-height: var(--min-touch-target); }
+  
+  /* Keep icon size consistent to prevent blurriness */
+  .compact-button svg {
+    font-size: 0.875rem;
+    width: 1em;
+    height: 1em;
+  }
 }
 
 /* Level-colored quote icon */
@@ -148,13 +126,20 @@
 .highlight-item.level-friends .highlight-quote-icon { color: var(--highlight-color-friends, #f97316); }
 .highlight-item.level-nostrverse .highlight-quote-icon { color: var(--highlight-color-nostrverse, #9333ea); }
 
-.highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.75rem 0.75rem; }
-.highlight-text { margin: 0; padding: 0; font-style: italic; color: #ddd; line-height: 1.6; border-left: none; font-size: 0.95rem; }
-.highlight-comment { margin-top: 0.5rem; padding: 0.75rem; background: rgba(100, 108, 255, 0.1); border-left: 3px solid #646cff; border-radius: 4px; font-size: 0.875rem; color: #ddd; line-height: 1.5; }
+.highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 2.25rem 0.75rem 2.5rem; }
+.highlight-text { margin: 0; padding: 0 0 0 1.25rem; font-style: italic; color: var(--color-text); line-height: 1.6; border-left: none; font-size: 0.95rem; }
+.highlight-citation { margin-left: 1.25rem; font-size: 0.8rem; color: var(--color-text-secondary); font-style: normal; padding-top: 0.25rem; }
+.highlight-comment { margin-top: 0.5rem; padding: 0.75rem; border-radius: 4px; font-size: 0.875rem; color: var(--color-text); line-height: 1.5; display: flex; gap: 0.5rem; align-items: flex-start; }
+.highlight-comment-icon { flex-shrink: 0; margin-top: 0.125rem; }
 
-.highlight-footer { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.5rem; font-size: 0.8rem; color: #888; border-bottom: 1px solid #333; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; transition: border-color 0.2s ease; }
+/* Level-colored comment icons */
+.highlight-item.level-mine .highlight-comment-icon { color: var(--highlight-color-mine, #ffff00); }
+.highlight-item.level-friends .highlight-comment-icon { color: var(--highlight-color-friends, #f97316); }
+.highlight-item.level-nostrverse .highlight-comment-icon { color: var(--highlight-color-nostrverse, #9333ea); }
+
+.highlight-footer { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.5rem; font-size: 0.8rem; color: var(--color-text-secondary); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; transition: border-color 0.2s ease; }
 .highlight-footer-left { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
-.highlight-author { color: #aaa; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-flex; align-items: center; min-height: 28px; }
+.highlight-author { color: var(--color-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-flex; align-items: center; min-height: 28px; }
 
 /* Ensure relay indicator in footer uses normal flow and matches CompactButton spacing */
 .highlight-item .highlight-footer .highlight-relay-indicator {
@@ -165,11 +150,10 @@
   padding: 0.25rem; /* CompactButton base */
 }
 .highlight-menu-wrapper { position: relative; flex-shrink: 0; display: flex; align-items: center; }
-.highlight-menu { position: absolute; right: 0; top: calc(100% + 4px); background: #2a2a2a; border: 1px solid #444; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; min-width: 160px; overflow: hidden; }
-.highlight-menu-item { width: 100%; background: none; border: none; color: #ddd; padding: 0.625rem 0.875rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.625rem; cursor: pointer; transition: all 0.15s ease; text-align: left; white-space: nowrap; }
-.highlight-menu-item:hover { background: rgba(100, 108, 255, 0.15); color: #fff; }
+.highlight-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; min-width: 160px; overflow: hidden; }
+.highlight-menu-item { width: 100%; background: none; border: none; color: var(--color-text); padding: 0.625rem 0.875rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.625rem; cursor: pointer; transition: all 0.15s ease; text-align: left; white-space: nowrap; }
+.highlight-menu-item:hover { background: rgba(99, 102, 241, 0.15); color: var(--color-text); }
 .highlight-menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
-.highlight-menu-item-danger:hover { background: rgba(255, 68, 68, 0.15); color: #ff4444; }
+.highlight-menu-item-danger:hover { background: rgba(255, 68, 68, 0.15); color: rgb(239 68 68); /* red-500 */ }
 .highlight-menu-item svg { font-size: 0.875rem; flex-shrink: 0; }
 
-

src/styles/layout/sidebar.css

@@ -1,8 +1,6 @@
 /* Bookmarks and sidebar layout */
 .bookmarks-container {
-  background: #1a1a1a;
-  border: 1px solid #333;
-  border-radius: 12px;
+  background: var(--color-bg);
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -11,10 +9,18 @@
   padding: 0;
 }
 
+/* Desktop: no border or rounded corners for edge-to-edge sidebars */
+@media (min-width: 769px) {
+  .bookmarks-container {
+    border: none;
+    border-radius: 0;
+  }
+}
+
 .bookmarks-container .view-mode-controls {
   margin-top: auto;
   padding: 1rem;
-  border-top: 1px solid #333;
+  border-top: 1px solid var(--color-border);
   background: transparent;
   border-radius: 0;
 }
@@ -35,12 +41,19 @@
   justify-content: space-between;
   gap: 0.75rem;
   padding: 0.75rem 1rem;
-  background: #1a1a1a;
-  border: 1px solid #333;
-  border-radius: 12px 12px 0 0;
+  background: var(--color-bg);
+  border-bottom: 1px solid var(--color-border);
   margin-bottom: 0;
 }
 
+/* Mobile: add borders and rounded corners */
+@media (max-width: 768px) {
+  .sidebar-header-bar {
+    border: 1px solid var(--color-border);
+    border-radius: 12px 12px 0 0;
+  }
+}
+
 .sidebar-header-right {
   display: flex;
   align-items: center;
@@ -48,48 +61,21 @@
   margin-left: auto;
 }
 
-.mobile-hamburger-btn {
-  display: none;
-  position: fixed;
-  top: calc(1rem + env(safe-area-inset-top));
-  left: calc(1rem + env(safe-area-inset-left));
-  z-index: 900;
-  background: #2a2a2a;
-  border: 1px solid #444;
-  border-radius: 8px;
-  color: #ddd;
-  width: var(--min-touch-target);
-  height: var(--min-touch-target);
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  transition: transform 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
-}
-
-.mobile-hamburger-btn.hidden {
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.mobile-hamburger-btn.visible {
-  opacity: 1;
-  visibility: visible;
-}
-
-.mobile-hamburger-btn:active {
-  transform: scale(0.95);
-}
+/* Mobile hamburger button now uses Tailwind utilities in ThreePaneLayout */
 
 .mobile-close-btn {
   display: none;
 }
 
 @media (max-width: 768px) {
-  .mobile-hamburger-btn { display: flex; }
   .sidebar-header-bar .toggle-sidebar-btn { display: none; }
   .mobile-close-btn { display: flex; }
+  
+  /* Keep icon sizes consistent to prevent blurriness */
+  .sidebar-header-bar svg {
+    width: 1em;
+    height: 1em;
+  }
 }
 
 .view-mode-controls {
@@ -100,6 +86,8 @@
 }
 
 .profile-avatar {
+  min-width: 33px;
+  min-height: 33px;
   width: 33px;
   height: 33px;
   border-radius: 6px;
@@ -107,20 +95,21 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #2a2a2a;
-  border: 1px solid #444;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-subtle);
   flex-shrink: 0;
-  color: #ddd;
+  color: var(--color-text);
   box-sizing: border-box;
+  padding: 0;
 }
 
 .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
-.profile-avatar svg { font-size: 1.25rem; }
+.profile-avatar svg { font-size: 1rem; }
 
 .sidebar-header-bar .toggle-sidebar-btn {
   background: transparent;
-  color: #ddd;
-  border: 1px solid #444;
+  color: var(--color-text);
+  border: 1px solid var(--color-border-subtle);
   padding: 0;
   border-radius: 6px;
   cursor: pointer;
@@ -134,7 +123,7 @@
   box-sizing: border-box;
 }
 
-.sidebar-header-bar .toggle-sidebar-btn:hover { background: #2a2a2a; color: #fff; }
+.sidebar-header-bar .toggle-sidebar-btn:hover { background: var(--color-bg-elevated); color: var(--color-text); }
 .sidebar-header-bar .toggle-sidebar-btn:active { transform: translateY(1px); }
 
 .bookmarks-container.collapsed {
@@ -147,8 +136,8 @@
 }
 
 .bookmarks-container.collapsed .toggle-sidebar-btn {
-  background: #2a2a2a;
-  color: #ddd;
+  background: var(--color-bg-elevated);
+  color: var(--color-text);
   border: none;
   padding: 0;
   border-radius: 0;
@@ -162,22 +151,21 @@
   flex-shrink: 0;
 }
 
-.bookmarks-container.collapsed .toggle-sidebar-btn:hover { background: #333; color: #fff; }
+.bookmarks-container.collapsed .toggle-sidebar-btn:hover { background: var(--color-border); color: var(--color-text); }
 .bookmarks-container.collapsed .toggle-sidebar-btn:active { transform: translateY(1px); }
 .bookmarks-container.collapsed .toggle-sidebar-btn.with-icon { width: auto; padding: 0 0.5rem; gap: 0.5rem; }
-.bookmarks-container.collapsed .toggle-sidebar-btn .glow-blue { color: #646cff; filter: drop-shadow(0 0 4px rgba(100, 108, 255, 0.6)); }
+.bookmarks-container.collapsed .toggle-sidebar-btn .glow-blue { color: var(--color-primary); filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.6)); }
 
-.user-info { margin: 0.5rem 0 0 0; color: #888; font-size: 0.9rem; font-family: monospace; }
-.bookmark-count { color: #666; font-size: 0.9rem; margin: 0.5rem 0; }
-.event-link { color: #8ab4f8; text-decoration: none; font-weight: 500; }
+.user-info { margin: 0.5rem 0 0 0; color: var(--color-text-secondary); font-size: 0.9rem; font-family: monospace; }
+.bookmark-count { color: var(--color-text-muted); font-size: 0.9rem; margin: 0.5rem 0; }
+.event-link { color: var(--color-primary); text-decoration: none; font-weight: 500; }
 .event-link:hover { text-decoration: underline; }
 
 .bookmark-urls { margin: 0.75rem 0; }
-.bookmark-url { display: block; margin: 0.25rem 0; color: #007bff; text-decoration: none; word-break: break-all; background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left; width: 100%; }
+.bookmark-url { display: block; margin: 0.25rem 0; color: var(--color-primary); text-decoration: none; word-break: break-all; background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left; width: 100%; }
 .bookmark-url:hover { text-decoration: underline; }
 
 .url-row { display: flex; align-items: center; gap: 0.5rem; }
-.read-inline-btn { background: #28a745; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; }
-.read-inline-btn:hover { background: #218838; }
-
+.read-inline-btn { background: rgb(34 197 94); /* green-500 */ color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; }
+.read-inline-btn:hover { background: rgb(22 163 74); /* green-600 */ }
 

src/styles/tailwind.css

@@ -0,0 +1,7 @@
+@import "tailwindcss";
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+

src/styles/utils/animations.css

@@ -21,4 +21,12 @@
   75% { box-shadow: 0 0 20px rgba(var(--highlight-rgb, 255, 255, 0), 0.6); transform: scale(1.02); }
 }
 
+/* Reading progress bar positioning */
+@media (min-width: 769px) {
+  .reading-progress-bar {
+    left: var(--left-offset) !important;
+    right: var(--right-offset) !important;
+  }
+}
+
 

src/styles/utils/legacy.css

@@ -0,0 +1,62 @@
+/* Nostr content parsing and URI resolution styles */
+.parsed-content,
+.nostr-mention,
+.nostr-link,
+.nostr-uri-link {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.parsed-content {
+  margin: 1rem 0;
+  line-height: 1.6;
+}
+
+.nostr-mention,
+.nostr-uri-link {
+  color: rgb(59 130 246); /* blue-500 */
+  text-decoration: none;
+  font-family: monospace;
+  background: rgb(248 250 252); /* slate-50 */
+  padding: 0.2rem 0.4rem;
+  border-radius: 3px;
+  font-size: 0.9rem;
+}
+
+.nostr-uri-link {
+  font-size: 0.9em;
+  border-radius: 4px;
+}
+
+.nostr-mention:hover,
+.nostr-uri-link:hover {
+  background: rgb(226 232 240); /* slate-200 */
+  text-decoration: underline;
+}
+
+.nostr-link {
+  color: rgb(59 130 246); /* blue-500 */
+  text-decoration: none;
+}
+
+.nostr-link:hover {
+  text-decoration: underline;
+}
+
+/* Empty state */
+.empty-state {
+  text-align: center;
+  padding: 3rem;
+  color: rgb(161 161 170); /* zinc-400 */
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-state p {
+  margin: 0.5rem 0;
+}
+

src/utils/colorHelpers.ts

@@ -6,11 +6,12 @@ export function hexToRgb(hex: string): string {
     : '255, 255, 0'
 }
 
+// Tailwind color palette for highlight colors
 export const HIGHLIGHT_COLORS = [
-  { name: 'Yellow', value: '#ffff00' },
-  { name: 'Orange', value: '#f97316' },
-  { name: 'Pink', value: '#ff69b4' },
-  { name: 'Green', value: '#00ff7f' },
-  { name: 'Blue', value: '#4da6ff' },
-  { name: 'Purple', value: '#9333ea' }
+  { name: 'Yellow', value: '#fde047' },  // yellow-300
+  { name: 'Orange', value: '#f97316' },  // orange-500
+  { name: 'Pink', value: '#ec4899' },    // pink-500
+  { name: 'Green', value: '#22c55e' },   // green-500
+  { name: 'Blue', value: '#3b82f6' },    // blue-500
+  { name: 'Purple', value: '#9333ea' }   // purple-600
 ]

src/utils/helpers.ts

@@ -10,34 +10,39 @@ export type UrlType = 'video' | 'image' | 'youtube' | 'article'
 
 export interface UrlClassification {
   type: UrlType
-  buttonText: string
 }
 
 export const classifyUrl = (url: string | undefined): UrlClassification => {
   if (!url) {
-    return { type: 'article', buttonText: 'READ NOW' }
+    return { type: 'article' }
   }
   const urlLower = url.toLowerCase()
   
   // Check for YouTube
   if (urlLower.includes('youtube.com') || urlLower.includes('youtu.be')) {
-    return { type: 'youtube', buttonText: 'WATCH NOW' }
+    return { type: 'youtube' }
+  }
+  
+  // Check for popular video hosts
+  const videoHosts = ['vimeo.com', 'dailymotion.com', 'dai.ly', 'video.twimg.com']
+  if (videoHosts.some(host => urlLower.includes(host))) {
+    return { type: 'video' }
   }
   
   // Check for video extensions
   const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.m4v']
   if (videoExtensions.some(ext => urlLower.includes(ext))) {
-    return { type: 'video', buttonText: 'WATCH NOW' }
+    return { type: 'video' }
   }
   
   // Check for image extensions
   const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.ico']
   if (imageExtensions.some(ext => urlLower.includes(ext))) {
-    return { type: 'image', buttonText: 'VIEW NOW' }
+    return { type: 'image' }
   }
   
   // Default to article
-  return { type: 'article', buttonText: 'READ NOW' }
+  return { type: 'article' }
 }
 
 /**

src/utils/highlightMatching/domUtils.ts

@@ -52,6 +52,7 @@ export function tryMarkInTextNodes(
 ): boolean {
   const normalizedSearch = normalizeWhitespace(searchText)
   
+  // First try: Single text node match
   for (const textNode of textNodes) {
     const text = textNode.textContent || ''
     const searchIn = useNormalized ? normalizeWhitespace(text) : text
@@ -73,12 +74,216 @@ export function tryMarkInTextNodes(
     const before = text.substring(0, actualIndex)
     const match = text.substring(actualIndex, actualIndex + searchText.length)
     const after = text.substring(actualIndex + searchText.length)
+    
+    // Validate the match makes sense (not just whitespace or empty)
+    if (!match || match.trim().length === 0) {
+      console.warn('Invalid match (empty or whitespace only)')
+      continue
+    }
+    
     const mark = createMarkElement(highlight, match, highlightStyle)
     
     replaceTextWithMark(textNode, before, after, mark)
     return true
   }
   
-  return false
+  // Second try: Multi-node match (for text spanning multiple elements)
+  return tryMultiNodeMatch(textNodes, searchText, highlight, useNormalized, highlightStyle)
+}
+
+/**
+ * Try to find and mark text that spans multiple text nodes
+ */
+function tryMultiNodeMatch(
+  textNodes: Text[],
+  searchText: string,
+  highlight: Highlight,
+  useNormalized: boolean,
+  highlightStyle: 'marker' | 'underline' = 'marker'
+): boolean {
+  const normalizedSearch = normalizeWhitespace(searchText)
+  
+  // Build a combined text from all nodes
+  let combinedText = ''
+  const nodeMap: Array<{ node: Text; start: number; end: number; originalText: string }> = []
+  
+  for (const node of textNodes) {
+    const text = node.textContent || ''
+    const start = combinedText.length
+    const end = start + text.length
+    nodeMap.push({ node, start, end, originalText: text })
+    combinedText += text
+  }
+  
+  // Search in combined text
+  const searchIn = useNormalized ? normalizeWhitespace(combinedText) : combinedText
+  const searchFor = useNormalized ? normalizedSearch : searchText
+  const matchIndex = searchIn.indexOf(searchFor)
+  
+  if (matchIndex === -1) return false
+  
+  // Map normalized index back to original if needed
+  let startIndex = matchIndex
+  let endIndex = matchIndex + searchFor.length
+  
+  if (useNormalized) {
+    // Build precise mapping by walking original text and advancing a normalized counter
+    const endPos = matchIndex + searchFor.length // end position in normalized text (exclusive)
+    let normPos = 0
+    let foundStart = false
+    let foundEnd = false
+    let startNode: Text | null = null
+    let startOffset = 0
+    let endNode: Text | null = null
+    let endOffset = 0
+
+    for (const nodeInfo of nodeMap) {
+      const text = nodeInfo.originalText
+      let prevWasWs = false
+      for (let i = 0; i < text.length && (!foundStart || !foundEnd); i++) {
+        const ch = text[i]
+        const isWs = /\s/.test(ch)
+
+        if (isWs) {
+          if (!prevWasWs) {
+            // This whitespace sequence counts as one in normalized text
+            if (!foundStart && normPos === matchIndex) {
+              startNode = nodeInfo.node
+              startOffset = i
+              foundStart = true
+            }
+            if (!foundEnd && normPos === endPos) {
+              endNode = nodeInfo.node
+              endOffset = i
+              foundEnd = true
+            }
+            normPos++
+          }
+          prevWasWs = true
+        } else {
+          if (!foundStart && normPos === matchIndex) {
+            startNode = nodeInfo.node
+            startOffset = i
+            foundStart = true
+          }
+          normPos++
+          if (!foundEnd && normPos === endPos) {
+            endNode = nodeInfo.node
+            endOffset = i + 1 // end after this character
+            foundEnd = true
+          }
+          prevWasWs = false
+        }
+      }
+      if (foundStart && foundEnd) break
+    }
+
+    if (!foundStart || !foundEnd || !startNode || !endNode) {
+      console.warn('Failed to map normalized positions to nodes', { matchIndex, endPos, normPos })
+      return false
+    }
+
+    // Set indices relative to combinedText by reconstructing start/end using nodeMap
+    const startNodeInfo = nodeMap.find(n => n.node === startNode)!
+    const endNodeInfo = nodeMap.find(n => n.node === endNode)!
+    startIndex = startNodeInfo.start + startOffset
+    endIndex = endNodeInfo.start + endOffset
+
+    if (startIndex < 0 || endIndex <= startIndex || endIndex > combinedText.length) {
+      console.warn('Mapped indices invalid', { startIndex, endIndex, combinedTextLength: combinedText.length })
+      return false
+    }
+  }
+  
+  // Validate indices
+  if (startIndex < 0 || endIndex > combinedText.length || startIndex >= endIndex) {
+    console.warn('Invalid highlight range:', { startIndex, endIndex, combinedTextLength: combinedText.length })
+    return false
+  }
+  
+  // Find which nodes contain the match
+  const affectedNodes: Array<{ node: Text; startOffset: number; endOffset: number }> = []
+  
+  for (const nodeInfo of nodeMap) {
+    if (startIndex < nodeInfo.end && endIndex > nodeInfo.start) {
+      const nodeStart = Math.max(0, startIndex - nodeInfo.start)
+      const nodeEnd = Math.min(nodeInfo.originalText.length, endIndex - nodeInfo.start)
+      
+      // Validate node offsets
+      if (nodeStart < 0 || nodeEnd > nodeInfo.originalText.length || nodeStart > nodeEnd) {
+        console.warn('Invalid node offsets:', { nodeStart, nodeEnd, nodeLength: nodeInfo.originalText.length })
+        continue
+      }
+      
+      affectedNodes.push({ node: nodeInfo.node, startOffset: nodeStart, endOffset: nodeEnd })
+    }
+  }
+  
+  if (affectedNodes.length === 0) {
+    console.warn('No affected nodes found for highlight')
+    return false
+  }
+  
+  try {
+    // Create a Range to wrap the entire selection in a single mark element
+    const range = document.createRange()
+    const firstNode = affectedNodes[0]
+    const lastNode = affectedNodes[affectedNodes.length - 1]
+    
+    range.setStart(firstNode.node, firstNode.startOffset)
+    range.setEnd(lastNode.node, lastNode.endOffset)
+    
+    // Verify the range isn't collapsed or invalid
+    if (range.collapsed) {
+      console.warn('Range is collapsed, skipping highlight')
+      return false
+    }
+    
+    // Get the text content before extraction to verify it matches
+    const rangeText = range.toString()
+    const normalizedRangeText = normalizeWhitespace(rangeText)
+    const normalizedSearchText = normalizeWhitespace(searchText)
+    
+    // Validate that the extracted text matches what we're searching for
+    if (!rangeText.includes(searchText) && 
+        !normalizedRangeText.includes(normalizedSearchText) &&
+        normalizedRangeText !== normalizedSearchText) {
+      console.warn('Range text does not match search text:', {
+        rangeText: rangeText.substring(0, 100),
+        searchText: searchText.substring(0, 100),
+        rangeLength: rangeText.length,
+        searchLength: searchText.length
+      })
+      return false
+    }
+    
+    // Extract the content from the range
+    const extractedContent = range.extractContents()
+    
+    // Verify we actually extracted something
+    if (!extractedContent || extractedContent.childNodes.length === 0) {
+      console.warn('No content extracted from range')
+      return false
+    }
+    
+    // Create a single mark element
+    const mark = document.createElement('mark')
+    const levelClass = highlight.level ? ` level-${highlight.level}` : ''
+    mark.className = `content-highlight-${highlightStyle}${levelClass}`
+    mark.setAttribute('data-highlight-id', highlight.id)
+    mark.setAttribute('data-highlight-level', highlight.level || 'nostrverse')
+    mark.setAttribute('title', `Highlighted ${new Date(highlight.created_at * 1000).toLocaleDateString()}`)
+    
+    // Append the extracted content to the mark
+    mark.appendChild(extractedContent)
+    
+    // Insert the mark at the range position
+    range.insertNode(mark)
+    
+    return true
+  } catch (error) {
+    console.error('Error applying multi-node highlight:', error)
+    return false
+  }
 }
 

src/utils/highlightMatching/htmlMatching.ts

@@ -22,6 +22,17 @@ export function applyHighlightsToHTML(
   const tempDiv = document.createElement('div')
   tempDiv.innerHTML = html
   
+  // CRITICAL: Remove any existing highlight marks to start with clean HTML
+  // This prevents old broken highlights from corrupting the new rendering
+  const existingMarks = tempDiv.querySelectorAll('mark[data-highlight-id]')
+  existingMarks.forEach(mark => {
+    // Replace the mark with its text content
+    const textNode = document.createTextNode(mark.textContent || '')
+    mark.parentNode?.replaceChild(textNode, mark)
+  })
+  
+  console.log('🧹 Removed', existingMarks.length, 'existing highlight marks')
+  
   let appliedCount = 0
   
   for (const highlight of highlights) {

src/utils/nostrUriResolver.tsx

@@ -39,7 +39,7 @@ export function extractNaddrUris(text: string): string[] {
 
 /**
  * Decode a NIP-19 identifier and return a human-readable link
- * For articles (naddr), returns an internal app link
+ * For articles (naddr) and profiles (npub/nprofile), returns internal app links
  * For other types, returns an external gateway link
  */
 export function createNostrLink(encoded: string): string {
@@ -51,7 +51,13 @@ export function createNostrLink(encoded: string): string {
         // For articles, link to our internal app route
         return `/a/${encoded}`
       case 'npub':
-      case 'nprofile':
+        // For profiles, link to our internal app route
+        return `/p/${encoded}`
+      case 'nprofile': {
+        // For nprofile, convert to npub and link to our internal app route
+        const npub = npubEncode(decoded.data.pubkey)
+        return `/p/${npub}`
+      }
       case 'note':
       case 'nevent':
         return getNostrUrl(encoded)

src/utils/theme.ts

@@ -0,0 +1,63 @@
+export type Theme = 'dark' | 'light' | 'system'
+export type DarkColorTheme = 'black' | 'midnight' | 'charcoal'
+export type LightColorTheme = 'paper-white' | 'sepia' | 'ivory'
+
+let mediaQueryListener: ((e: MediaQueryListEvent) => void) | null = null
+
+/**
+ * Get the system's current theme preference
+ */
+export function getSystemTheme(): 'dark' | 'light' {
+  if (typeof window === 'undefined') return 'dark'
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+/**
+ * Apply theme and color variant to the document root element
+ * Handles 'system' theme by listening to OS preference changes
+ */
+export function applyTheme(
+  theme: Theme,
+  darkColorTheme: DarkColorTheme = 'midnight',
+  lightColorTheme: LightColorTheme = 'sepia'
+): void {
+  const root = document.documentElement
+  
+  // Remove existing theme classes
+  root.classList.remove('theme-dark', 'theme-light', 'theme-system')
+  // Remove existing color theme classes
+  root.classList.remove('dark-black', 'dark-midnight', 'dark-charcoal')
+  root.classList.remove('light-paper-white', 'light-sepia', 'light-ivory')
+  
+  // Clean up previous media query listener if exists
+  if (mediaQueryListener) {
+    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', mediaQueryListener)
+    mediaQueryListener = null
+  }
+  
+  if (theme === 'system') {
+    root.classList.add('theme-system')
+    
+    // Apply color themes for system mode (CSS will handle media query)
+    root.classList.add(`dark-${darkColorTheme}`)
+    root.classList.add(`light-${lightColorTheme}`)
+    
+    // Listen for system theme changes
+    mediaQueryListener = (e: MediaQueryListEvent) => {
+      console.log('🎨 System theme changed to:', e.matches ? 'dark' : 'light')
+      // The CSS media query handles the color changes automatically
+    }
+    
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', mediaQueryListener)
+  } else {
+    root.classList.add(`theme-${theme}`)
+    // Apply appropriate color theme based on light/dark
+    if (theme === 'dark') {
+      root.classList.add(`dark-${darkColorTheme}`)
+    } else {
+      root.classList.add(`light-${lightColorTheme}`)
+    }
+  }
+  
+  console.log('🎨 Applied theme:', theme, 'with colors:', { dark: darkColorTheme, light: lightColorTheme })
+}

src/utils/videoHelpers.ts

@@ -0,0 +1,36 @@
+/**
+ * Build native app deep link URL for video platforms
+ * Returns null if the platform doesn't have a known native app URL scheme
+ */
+export function buildNativeVideoUrl(url: string): string | null {
+  try {
+    const u = new URL(url)
+    const host = u.hostname
+    
+    if (host.includes('youtube.com')) {
+      const id = u.searchParams.get('v')
+      return id ? `youtube://watch?v=${id}` : `youtube://${u.pathname}${u.search}`
+    }
+    
+    if (host === 'youtu.be') {
+      const id = u.pathname.replace('/', '')
+      return id ? `youtube://watch?v=${id}` : 'youtube://'
+    }
+    
+    if (host.includes('vimeo.com')) {
+      const id = u.pathname.split('/').filter(Boolean)[0]
+      return id ? `vimeo://app.vimeo.com/videos/${id}` : 'vimeo://'
+    }
+    
+    if (host.includes('dailymotion.com') || host === 'dai.ly') {
+      const parts = u.pathname.split('/').filter(Boolean)
+      const id = host === 'dai.ly' ? parts[0] : (parts[1] || '')
+      return id ? `dailymotion://video/${id}` : 'dailymotion://'
+    }
+    
+    return null
+  } catch {
+    return null
+  }
+}
+

tailwind.config.js

@@ -0,0 +1,35 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{ts,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Semantic color aliases for the app
+        'app-bg': '#18181b',           // zinc-900
+        'app-bg-elevated': '#27272a',  // zinc-800
+        'app-bg-subtle': '#1e1e1e',    // Custom between 800-900
+        'app-border': '#3f3f46',       // zinc-700
+        'app-border-subtle': '#52525b', // zinc-600
+        'app-text': '#e4e4e7',         // zinc-200
+        'app-text-secondary': '#a1a1aa', // zinc-400
+        'app-text-muted': '#71717a',   // zinc-500
+        'primary': '#6366f1',          // indigo-500
+        'primary-hover': '#4f46e5',    // indigo-600
+        'highlight-mine': '#fde047',   // yellow-300
+        'highlight-friends': '#f97316', // orange-500
+        'highlight-nostrverse': '#9333ea', // purple-600
+      },
+      keyframes: {
+        shimmer: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(100%)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}
+