chore: bump version to 0.10.33

Fix mobile text selection detection for highlighting

TAILWIND_MIGRATION.md

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

api/article-og.ts

@@ -4,6 +4,7 @@ import { nip19 } from 'nostr-tools'
 import { AddressPointer } from 'nostr-tools/nip19'
 import { NostrEvent, Filter } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
+import { extractProfileDisplayName } from '../src/utils/profileUtils'
 
 const { getArticleTitle, getArticleImage, getArticleSummary } = Helpers
 
@@ -117,14 +118,14 @@ async function fetchArticleMetadata(naddr: string): Promise<ArticleMetadata | nu
     const summary = getArticleSummary(article) || 'Read this article on Boris'
     const image = getArticleImage(article) || '/boris-social-1200.png'
 
-    // Extract author name from profile
+    // Extract author name from profile using centralized utility
     let authorName = pointer.pubkey.slice(0, 8) + '...'
     if (profileEvents.length > 0) {
-      try {
-        const profileData = JSON.parse(profileEvents[0].content)
-        authorName = profileData.display_name || profileData.name || authorName
-      } catch {
-        // Use fallback
+      const displayName = extractProfileDisplayName(profileEvents[0])
+      if (displayName && !displayName.startsWith('@')) {
+        authorName = displayName
+      } else if (displayName) {
+        authorName = displayName.substring(1) // Remove @ prefix
       }
     }
 
@@ -147,7 +148,7 @@ function generateHtml(naddr: string, meta: ArticleMetadata | null): string {
   const baseUrl = 'https://read.withboris.com'
   const articleUrl = `${baseUrl}/a/${naddr}`
   
-  const title = meta?.title || 'Boris – Nostr Bookmarks'
+  const title = meta?.title || 'Boris – Read, Highlight, Explore'
   const description = meta?.summary || 'Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.'
   const image = meta?.image?.startsWith('http') ? meta.image : `${baseUrl}${meta?.image || '/boris-social-1200.png'}`
   const author = meta?.author || 'Boris'

api/video-meta.ts

@@ -94,7 +94,7 @@ async function pickCaptions(videoID: string, preferredLangs: string[], manualFir
   return null
 }
 
-async function getVimeoMetadata(videoId: string): Promise<{ title: string; description: string }> {
+async function getVimeoMetadata(videoId: string): Promise<{ title: string; description: string; thumbnail_url?: string }> {
   const vimeoUrl = `https://vimeo.com/${videoId}`
   const oembedUrl = `https://vimeo.com/api/oembed.json?url=${encodeURIComponent(vimeoUrl)}`
   
@@ -107,7 +107,8 @@ async function getVimeoMetadata(videoId: string): Promise<{ title: string; descr
   
   return {
     title: data.title || '',
-    description: data.description || ''
+    description: data.description || '',
+    thumbnail_url: data.thumbnail_url || ''
   }
 }
 
@@ -147,9 +148,28 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
   try {
     if (videoInfo.source === 'youtube') {
       // YouTube handling
-      // Note: getVideoDetails doesn't exist in the library, so we use a simplified approach
-      const title = ''
-      const description = ''
+      // Fetch basic metadata from YouTube page
+      let title = ''
+      let description = ''
+      
+      try {
+        const response = await fetch(`https://www.youtube.com/watch?v=${videoInfo.id}`)
+        if (response.ok) {
+          const html = await response.text()
+          // Extract title from HTML
+          const titleMatch = html.match(/<title>([^<]+)<\/title>/)
+          if (titleMatch) {
+            title = titleMatch[1].replace(' - YouTube', '').trim()
+          }
+          // Extract description from meta tag
+          const descMatch = html.match(/<meta name="description" content="([^"]+)"/)
+          if (descMatch) {
+            description = descMatch[1].trim()
+          }
+        }
+      } catch (error) {
+        console.warn('Failed to fetch YouTube metadata:', error)
+      }
 
       // Language order: manual en -> uiLocale -> lang -> any manual, then auto with same order
       const langs: string[] = Array.from(new Set(['en', uiLocale, lang].filter(Boolean) as string[]))
@@ -178,11 +198,12 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
       return ok(res, response)
     } else if (videoInfo.source === 'vimeo') {
       // Vimeo handling
-      const { title, description } = await getVimeoMetadata(videoInfo.id)
+      const { title, description, thumbnail_url } = await getVimeoMetadata(videoInfo.id)
       
       const response = {
         title,
         description,
+        thumbnail_url,
         captions: [], // Vimeo doesn't provide captions through oEmbed API
         transcript: '', // No transcript available
         lang: 'en', // Default language

api/youtube-meta.ts

@@ -63,10 +63,28 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
   }
 
   try {
-    // Since getVideoDetails doesn't exist, we'll use a simple approach
-    // In a real implementation, you might want to use YouTube's API or other methods
-    const title = '' // Will be populated from captions or other sources
-    const description = ''
+    // Fetch basic metadata from YouTube page
+    let title = ''
+    let description = ''
+    
+    try {
+      const response = await fetch(`https://www.youtube.com/watch?v=${videoId}`)
+      if (response.ok) {
+        const html = await response.text()
+        // Extract title from HTML
+        const titleMatch = html.match(/<title>([^<]+)<\/title>/)
+        if (titleMatch) {
+          title = titleMatch[1].replace(' - YouTube', '').trim()
+        }
+        // Extract description from meta tag
+        const descMatch = html.match(/<meta name="description" content="([^"]+)"/)
+        if (descMatch) {
+          description = descMatch[1].trim()
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to fetch YouTube metadata:', error)
+    }
 
     // Language order: manual en -> uiLocale -> lang -> any manual, then auto with same order
     const langs: string[] = Array.from(new Set(['en', uiLocale, lang].filter(Boolean) as string[]))

index.html

@@ -9,14 +9,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="theme-color" content="#0f172a" />
     <link rel="manifest" href="/manifest.webmanifest" />
-    <title>Boris - Nostr Bookmarks</title>
+    <title>Boris - Read, Highlight, Explore</title>
     <meta name="description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
     <link rel="canonical" href="https://read.withboris.com/" />
     
     <!-- Open Graph / Social Media -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://read.withboris.com/" />
-    <meta property="og:title" content="Boris - Nostr Bookmarks" />
+    <meta property="og:title" content="Boris - Read, Highlight, Explore" />
     <meta property="og:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
     <meta property="og:image" content="https://read.withboris.com/boris-social-1200.png" />
     <meta property="og:site_name" content="Boris" />
@@ -24,7 +24,7 @@
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:url" content="https://read.withboris.com/" />
-    <meta name="twitter:title" content="Boris - Nostr Bookmarks" />
+    <meta name="twitter:title" content="Boris - Read, Highlight, Explore" />
     <meta name="twitter:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
     <meta name="twitter:image" content="https://read.withboris.com/boris-social-1200.png" />
     

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "boris",
-  "version": "0.10.19",
+  "version": "0.10.23",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "boris",
-      "version": "0.10.19",
+      "version": "0.10.23",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.1.0",
         "@fortawesome/free-regular-svg-icons": "^7.1.0",
@@ -23,6 +23,7 @@
         "applesauce-relay": "^4.0.0",
         "date-fns": "^4.1.0",
         "fast-average-color": "^9.5.0",
+        "fetch-opengraph": "^1.0.36",
         "nostr-tools": "^2.4.0",
         "prismjs": "^1.30.0",
         "react": "^18.2.0",
@@ -4502,6 +4503,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.14",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.14.tgz",
@@ -6171,6 +6181,16 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fetch-opengraph": {
+      "version": "1.0.36",
+      "resolved": "https://registry.npmjs.org/fetch-opengraph/-/fetch-opengraph-1.0.36.tgz",
+      "integrity": "sha512-w2Gs64zjL1O86E0I6E26MrxeXpTrR8Y1vWrgupmZN6NXKV8F5I3W0tlh+ZX686jZwxyilWnQjYwgnWpdETdHWw==",
+      "license": "MIT",
+      "dependencies": {
+        "axios": "^0.21.1",
+        "html-entities": "^2.3.2"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -6264,6 +6284,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -6896,6 +6936,22 @@
         "he": "bin/he"
       }
     },
+    "node_modules/html-entities": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",
+      "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boris",
-  "version": "0.10.20",
+  "version": "0.10.33",
   "description": "A minimal nostr client for bookmark management",
   "homepage": "https://read.withboris.com/",
   "type": "module",
@@ -26,6 +26,7 @@
     "applesauce-relay": "^4.0.0",
     "date-fns": "^4.1.0",
     "fast-average-color": "^9.5.0",
+    "fetch-opengraph": "^1.0.36",
     "nostr-tools": "^2.4.0",
     "prismjs": "^1.30.0",
     "react": "^18.2.0",

public/manifest.webmanifest

@@ -1,5 +1,5 @@
 {
-  "name": "Boris - Nostr Bookmarks",
+  "name": "Boris - Read, Highlight, Explore",
   "short_name": "Boris",
   "description": "Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.",
   "start_url": "/",

public/sw-dev.js

@@ -0,0 +1,47 @@
+// Development Service Worker - simplified version for testing image caching
+// This is served in dev mode when vite-plugin-pwa doesn't serve the injectManifest SW
+
+self.addEventListener('install', (event) => {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(clients.claim())
+})
+
+// Image caching - simple version for dev testing
+self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url)
+  const isImage = event.request.destination === 'image' || 
+                  /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(url.pathname)
+  
+  if (isImage) {
+    event.respondWith(
+      caches.open('boris-images-dev').then((cache) => {
+        return cache.match(event.request).then((cachedResponse) => {
+          // Try to fetch from network
+          return fetch(event.request).then((response) => {
+            // If fetch succeeds, cache it and return
+            if (response.ok) {
+              cache.put(event.request, response.clone()).catch(() => {
+                // Ignore cache put errors
+              })
+            }
+            return response
+          }).catch((error) => {
+            // If fetch fails (network error, CORS, etc.), return cached response if available
+            if (cachedResponse) {
+              return cachedResponse
+            }
+            // No cache available, reject the promise so browser handles it
+            return Promise.reject(error)
+          })
+        })
+      }).catch(() => {
+        // If cache operations fail, try to fetch directly without caching
+        return fetch(event.request)
+      })
+    )
+  }
+})
+

src/components/AddBookmarkModal.tsx

@@ -4,41 +4,40 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes, faSpinner } from '@fortawesome/free-solid-svg-icons'
 import IconButton from './IconButton'
 import { fetchReadableContent } from '../services/readerService'
+import { fetch as fetchOpenGraph } from 'fetch-opengraph'
 
 interface AddBookmarkModalProps {
   onClose: () => void
   onSave: (url: string, title?: string, description?: string, tags?: string[]) => Promise<void>
 }
 
-// Helper to extract metadata from HTML
-function extractMetaTag(html: string, patterns: string[]): string | null {
-  for (const pattern of patterns) {
-    const match = html.match(new RegExp(pattern, 'i'))
-    if (match) return match[1]
-  }
-  return null
-}
-
-function extractTags(html: string): string[] {
+// Helper to extract tags from OpenGraph data
+function extractTagsFromOgData(ogData: Record<string, unknown>): string[] {
   const tags: string[] = []
   
-  // Extract keywords meta tag
-  const keywords = extractMetaTag(html, [
-    '<meta\\s+name=["\'"]keywords["\'"]\\s+content=["\'"]([^"\']+)["\']'
-  ])
-  if (keywords) {
-    keywords.split(/[,;]/)
-      .map(k => k.trim().toLowerCase())
-      .filter(k => k.length > 0 && k.length < 30)
-      .forEach(k => tags.push(k))
+  // Extract keywords from OpenGraph data
+  if (ogData.keywords && typeof ogData.keywords === 'string') {
+    ogData.keywords.split(/[,;]/)
+      .map((k: string) => k.trim().toLowerCase())
+      .filter((k: string) => k.length > 0 && k.length < 30)
+      .forEach((k: string) => tags.push(k))
   }
   
-  // Extract article:tag (multiple possible)
-  const articleTagRegex = /<meta\s+property=["']article:tag["']\s+content=["']([^"']+)["']/gi
-  let match
-  while ((match = articleTagRegex.exec(html)) !== null) {
-    const tag = match[1].trim().toLowerCase()
-    if (tag && tag.length < 30) tags.push(tag)
+  // Extract article:tag from OpenGraph data
+  if (ogData['article:tag']) {
+    const articleTagValue = ogData['article:tag']
+    const articleTags = Array.isArray(articleTagValue) 
+      ? articleTagValue 
+      : [articleTagValue]
+    
+    articleTags.forEach((tag: unknown) => {
+      if (typeof tag === 'string') {
+        const cleanTag = tag.trim().toLowerCase()
+        if (cleanTag && cleanTag.length < 30) {
+          tags.push(cleanTag)
+        }
+      }
+    })
   }
   
   return Array.from(new Set(tags)).slice(0, 5)
@@ -83,17 +82,27 @@ const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave })
     fetchTimeoutRef.current = window.setTimeout(async () => {
       setIsFetchingMetadata(true)
       try {
-        const content = await fetchReadableContent(normalizedUrl)
-        lastFetchedUrlRef.current = normalizedUrl
+        // Fetch both readable content and OpenGraph data in parallel
+        const [content, ogData] = await Promise.all([
+          fetchReadableContent(normalizedUrl),
+          fetchOpenGraph(normalizedUrl).catch(() => null) // Don't fail if OpenGraph fetch fails
+        ])
         
+        lastFetchedUrlRef.current = normalizedUrl
         let extractedAnything = false
         
-        // Extract title: prioritize og:title > twitter:title > <title>
-        if (!title && content.html) {
-          const extractedTitle = extractMetaTag(content.html, [
-            '<meta\\s+property=["\'"]og:title["\'"]\\s+content=["\'"]([^"\']+)["\']',
-            '<meta\\s+name=["\'"]twitter:title["\'"]\\s+content=["\'"]([^"\']+)["\']'
-          ]) || content.title
+        // Extract title: prioritize og:title > twitter:title > content.title
+        if (!title) {
+          let extractedTitle = null
+          
+          if (ogData) {
+            extractedTitle = ogData['og:title'] || ogData['twitter:title'] || ogData.title
+          }
+          
+          // Fallback to content.title if no OpenGraph title found
+          if (!extractedTitle) {
+            extractedTitle = content.title
+          }
           
           if (extractedTitle) {
             setTitle(extractedTitle)
@@ -102,12 +111,8 @@ const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave })
         }
         
         // Extract description: prioritize og:description > twitter:description > meta description
-        if (!description && content.html) {
-          const extractedDesc = extractMetaTag(content.html, [
-            '<meta\\s+property=["\'"]og:description["\'"]\\s+content=["\'"]([^"\']+)["\']',
-            '<meta\\s+name=["\'"]twitter:description["\'"]\\s+content=["\'"]([^"\']+)["\']',
-            '<meta\\s+name=["\'"]description["\'"]\\s+content=["\'"]([^"\']+)["\']'
-          ])
+        if (!description && ogData) {
+          const extractedDesc = ogData['og:description'] || ogData['twitter:description'] || ogData.description
           
           if (extractedDesc) {
             setDescription(extractedDesc)
@@ -116,8 +121,8 @@ const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave })
         }
         
         // Extract tags from keywords and article:tag (only if user hasn't modified tags)
-        if (!tagsInput && content.html) {
-          const extractedTags = extractTags(content.html)
+        if (!tagsInput && ogData) {
+          const extractedTags = extractTagsFromOgData(ogData)
           
           // Only add boris tag if we extracted something
           if (extractedAnything || extractedTags.length > 0) {

src/components/AuthorCard.tsx

@@ -5,6 +5,7 @@ import { faUserCircle } from '@fortawesome/free-solid-svg-icons'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import { nip19 } from 'nostr-tools'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 
 interface AuthorCardProps {
   authorPubkey: string
@@ -16,9 +17,7 @@ const AuthorCard: React.FC<AuthorCardProps> = ({ authorPubkey, clickable = true
   const profile = useEventModel(Models.ProfileModel, [authorPubkey])
   
   const getAuthorName = () => {
-    if (profile?.name) return profile.name
-    if (profile?.display_name) return profile.display_name
-    return `${authorPubkey.slice(0, 8)}...${authorPubkey.slice(-8)}`
+    return getProfileDisplayName(profile, authorPubkey)
   }
   
   const authorImage = profile?.picture || profile?.image
@@ -27,7 +26,7 @@ const AuthorCard: React.FC<AuthorCardProps> = ({ authorPubkey, clickable = true
   const handleClick = () => {
     if (clickable) {
       const npub = nip19.npubEncode(authorPubkey)
-      navigate(`/p/${npub}`)
+      navigate(`/p/${npub}/writings`)
     }
   }
   

src/components/BlogPostCard.tsx

@@ -7,6 +7,7 @@ import { BlogPostPreview } from '../services/exploreService'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import { isKnownBot } from '../config/bots'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 
 interface BlogPostCardProps {
   post: BlogPostPreview
@@ -18,8 +19,13 @@ interface BlogPostCardProps {
 
 const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingProgress, hideBotByName = true }) => {
   const profile = useEventModel(Models.ProfileModel, [post.author])
-  const displayName = profile?.name || profile?.display_name || 
-    `${post.author.slice(0, 8)}...${post.author.slice(-4)}`
+  
+  // Note: Images are lazy-loaded (loading="lazy" below), so they'll be fetched
+  // when they come into view. The Service Worker will cache them automatically.
+  // No need to preload all images at once - this causes ERR_INSUFFICIENT_RESOURCES
+  // when there are many blog posts.
+  
+  const displayName = getProfileDisplayName(profile, post.author)
   const rawName = (profile?.name || profile?.display_name || '').toLowerCase()
 
   // Hide bot authors by name/display_name
@@ -41,7 +47,7 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingP
   } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
     progressColor = 'var(--color-text)' // Neutral text color (started)
   }
-  
+
   // Debug log - reading progress shown as visual indicator
   if (readingProgress !== undefined) {
     // Reading progress display

src/components/BookmarkItem.tsx

@@ -11,6 +11,7 @@ import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 import { classifyUrl } from '../utils/helpers'
 import { ViewMode } from './Bookmarks'
 import { getPreviewImage, fetchOgImage } from '../utils/imagePreview'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 import { CompactView } from './BookmarkViews/CompactView'
 import { LargeView } from './BookmarkViews/LargeView'
 import { CardView } from './BookmarkViews/CardView'
@@ -42,10 +43,11 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
   const firstUrl = hasUrls ? extractedUrls[0] : null
   const firstUrlClassification = firstUrl ? classifyUrl(firstUrl) : null
   
-  // For kind:30023 articles, extract image and summary tags (per NIP-23)
+  // For kind:30023 articles, extract title, image and summary tags (per NIP-23)
   // Note: We extract directly from tags here since we don't have the full event.
   // When we have full events, we use getArticleImage() helper (see articleService.ts)
   const isArticle = bookmark.kind === 30023
+  const articleTitle = isArticle ? bookmark.tags.find(t => t[0] === 'title')?.[1] : undefined
   const articleImage = isArticle ? bookmark.tags.find(t => t[0] === 'image')?.[1] : undefined
   const articleSummary = isArticle ? bookmark.tags.find(t => t[0] === 'summary')?.[1] : undefined
   
@@ -61,12 +63,15 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
   const authorProfile = useEventModel(Models.ProfileModel, [bookmark.pubkey])
   const authorNpub = npubEncode(bookmark.pubkey)
   
-  // Get display name for author
+  // Get display name for author using centralized utility
   const getAuthorDisplayName = () => {
-    if (authorProfile?.name) return authorProfile.name
-    if (authorProfile?.display_name) return authorProfile.display_name
-    if (authorProfile?.nip05) return authorProfile.nip05
-    return short(bookmark.pubkey) // fallback to short pubkey
+    const displayName = getProfileDisplayName(authorProfile, bookmark.pubkey)
+    // getProfileDisplayName returns npub format for fallback, but we want short pubkey format
+    // So check if it's the fallback format and use short() instead
+    if (displayName.startsWith('@') && displayName.includes('...')) {
+      return short(bookmark.pubkey)
+    }
+    return displayName
   }
 
   // Get content type icon based on bookmark kind and URL classification
@@ -156,10 +161,7 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
       hasUrls,
       extractedUrls,
       onSelectUrl,
-      authorNpub,
-      getAuthorDisplayName,
-      handleReadNow,
-      articleSummary,
+      articleTitle,
       contentTypeIcon: getContentTypeIcon(),
       readingProgress
     }
@@ -171,5 +173,5 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     return <LargeView {...sharedProps} getIconForUrlType={getIconForUrlType} previewImage={previewImage} />
   }
 
-  return <CardView {...sharedProps} articleImage={articleImage} />
+  return <CardView {...sharedProps} articleImage={articleImage} articleTitle={articleTitle} />
 }

src/components/BookmarkList.tsx

@@ -105,7 +105,18 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
         return undefined
       }
     }
-    // For web bookmarks and other types, try to use URL if available
+    
+    // For web bookmarks (kind:39701), URL is in the 'd' tag
+    if (bookmark.kind === 39701) {
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (dTag) {
+        // Ensure URL has protocol
+        const url = dTag.startsWith('http') ? dTag : `https://${dTag}`
+        return readingProgressMap.get(url)
+      }
+    }
+    
+    // For other bookmark types, try to extract URL from content
     const urls = extractUrlsFromContent(bookmark.content)
     if (urls.length > 0) {
       return readingProgressMap.get(urls[0])
@@ -236,10 +247,19 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
       />
       
       {allIndividualBookmarks.length > 0 && (
-        <BookmarkFilters
-          selectedFilter={selectedFilter}
-          onFilterChange={setSelectedFilter}
-        />
+        <div className="bookmark-filters-wrapper">
+          <BookmarkFilters
+            selectedFilter={selectedFilter}
+            onFilterChange={setSelectedFilter}
+          />
+          <CompactButton
+            icon={faPlus}
+            onClick={() => setShowAddModal(true)}
+            title="Add web bookmark"
+            ariaLabel="Add web bookmark"
+            className="bookmark-section-action"
+          />
+        </div>
       )}
       
       {!activeAccount ? (
@@ -276,15 +296,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
             <div key={section.key} className="bookmarks-section">
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                 <h3 className="bookmarks-section-title" style={{ margin: 0, padding: '1.5rem 0.5rem 0.375rem', flex: 1 }}>{section.title}</h3>
-                {section.key === 'web' && activeAccount && (
-                  <CompactButton
-                    icon={faPlus}
-                    onClick={() => setShowAddModal(true)}
-                    title="Add web bookmark"
-                    ariaLabel="Add web bookmark"
-                    className="bookmark-section-action"
-                  />
-                )}
               </div>
               <div className={`bookmarks-grid bookmarks-${viewMode}`}>
                 {section.items.map((individualBookmark, index) => (

src/components/BookmarkViews/CardView.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+import { faLink } from '@fortawesome/free-solid-svg-icons'
+import { faNewspaper, faStickyNote, faCirclePlay, faCamera, faFileLines } from '@fortawesome/free-regular-svg-icons'
+import { faGlobe } from '@fortawesome/free-solid-svg-icons'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate, renderParsedContent } from '../../utils/bookmarkUtils'
 import RichContent from '../RichContent'
@@ -10,6 +11,7 @@ import { classifyUrl } from '../../utils/helpers'
 import { useImageCache } from '../../hooks/useImageCache'
 import { getPreviewImage, fetchOgImage } from '../../utils/imagePreview'
 import { naddrEncode } from 'nostr-tools/nip19'
+import { ReadingProgressBar } from '../ReadingProgressBar'
 
 interface CardViewProps {
   bookmark: IndividualBookmark
@@ -22,7 +24,7 @@ interface CardViewProps {
   handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
   articleImage?: string
   articleSummary?: string
-  contentTypeIcon: IconDefinition
+  articleTitle?: string
   readingProgress?: number
 }
 
@@ -31,13 +33,12 @@ export const CardView: React.FC<CardViewProps> = ({
   index,
   hasUrls,
   extractedUrls,
-  onSelectUrl,
   authorNpub,
   getAuthorDisplayName,
   handleReadNow,
   articleImage,
   articleSummary,
-  contentTypeIcon,
+  articleTitle,
   readingProgress
 }) => {
   const firstUrl = hasUrls ? extractedUrls[0] : null
@@ -45,21 +46,41 @@ export const CardView: React.FC<CardViewProps> = ({
   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
+  const isNote = bookmark.kind === 1
   
-  // Calculate progress color (matching BlogPostCard logic)
-  let progressColor = '#6366f1' // Default blue (reading)
-  if (readingProgress && readingProgress >= 0.95) {
-    progressColor = '#10b981' // Green (completed)
-  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
-    progressColor = 'var(--color-text)' // Neutral text color (started)
+  // Extract title from tags for regular bookmarks (not just articles)
+  const bookmarkTitle = bookmark.tags.find(t => t[0] === 'title')?.[1]
+  
+  // Get content type icon based on bookmark kind and URL classification
+  const getContentTypeIcon = () => {
+    if (isArticle) return faNewspaper // Nostr-native article
+    
+    // For web bookmarks, classify the URL to determine icon
+    if (isWebBookmark && firstUrlClassificationType) {
+      switch (firstUrlClassificationType) {
+        case 'youtube':
+        case 'video':
+          return faCirclePlay
+        case 'image':
+          return faCamera
+        case 'article':
+          return faFileLines
+        default:
+          return faGlobe
+      }
+    }
+    
+    // For notes, use sticky note icon
+    if (isNote) return faStickyNote
+    
+    // Default fallback
+    return faLink
   }
   
+  
   // Determine which image to use (article image, instant preview, or OG image)
   const previewImage = articleImage || instantPreview || ogImage
   const cachedImage = useImageCache(previewImage || undefined)
@@ -71,6 +92,7 @@ export const CardView: React.FC<CardViewProps> = ({
     }
   }, [firstUrl, articleImage, instantPreview, ogImage])
 
+
   const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
 
   const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
@@ -106,122 +128,87 @@ export const CardView: React.FC<CardViewProps> = ({
   return (
     <div 
       key={`${bookmark.id}-${index}`}
-      className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}
+      className={`individual-bookmark card-view ${bookmark.isPrivate ? 'private-bookmark' : ''}`}
       onClick={triggerOpen}
       role="button"
       tabIndex={0}
       onKeyDown={handleKeyDown}
     >
-      {cachedImage && (
-        <div 
-          className="article-hero-image"
-          style={{ backgroundImage: `url(${cachedImage})` }}
-          onClick={() => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)}
-        />
-      )}
-      <div className="bookmark-header">
-        <span className="bookmark-type">
-          <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
-        </span>
-        
-        {getInternalRoute() ? (
-          <Link
-            to={getInternalRoute()!}
-            className="bookmark-date-link"
-            title="Open in app"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}
-          </Link>
-        ) : (
-          <span className="bookmark-date">{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
-        )}
-      </div>
-      
-      {extractedUrls.length > 0 && (
-        <div className="bookmark-urls">
-          {(urlsExpanded ? extractedUrls : extractedUrls.slice(0, 1)).map((url, urlIndex) => {
-            return (
-              <button
-                key={urlIndex}
-                className="bookmark-url"
-                onClick={(e) => { e.stopPropagation(); onSelectUrl?.(url) }}
-                title="Open in reader"
+      <div className="card-layout">
+        <div className="card-content">
+          <div className="card-content-header">
+            {(cachedImage || firstUrl) && (
+              <div 
+                className="card-thumbnail"
+                style={cachedImage ? { backgroundImage: `url(${cachedImage})` } : undefined}
+                onClick={() => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)}
               >
-                {url}
-              </button>
-            )
-          })}
-          {extractedUrls.length > 1 && (
-            <button
-              className="expand-toggle-urls"
-              onClick={(e) => { e.stopPropagation(); setUrlsExpanded(v => !v) }}
-              aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
-              title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
+            {!cachedImage && firstUrl && (
+              <div className="thumbnail-placeholder">
+                <FontAwesomeIcon icon={getContentTypeIcon()} />
+              </div>
+            )}
+              </div>
+            )}
+            <div className="card-text-content">
+        <div className="bookmark-header">
+        </div>
+        
+        {/* Display title for articles or bookmarks with titles */}
+        {(articleTitle || bookmarkTitle) && (
+          <h3 className="bookmark-title">
+            <RichContent content={articleTitle || bookmarkTitle || ''} className="" />
+          </h3>
+        )}
+        
+        {isArticle && articleSummary ? (
+          <RichContent content={articleSummary} className="bookmark-content article-summary" />
+        ) : bookmark.parsedContent ? (
+          <div className="bookmark-content">
+            {renderParsedContent(bookmark.parsedContent)}
+          </div>
+        ) : bookmark.content && (
+          <RichContent content={bookmark.content} className="bookmark-content" />
+        )}
+        
+            </div>
+          </div>
+        </div>
+        
+        {/* Reading progress indicator as separator - always shown for all bookmark types */}
+        <ReadingProgressBar 
+          readingProgress={readingProgress}
+          height={1}
+          marginTop="0.125rem"
+          marginBottom="0.125rem"
+        />
+        
+        <div className="bookmark-footer">
+          <div className="bookmark-meta-minimal">
+            <Link
+              to={`/p/${authorNpub}`}
+              className="author-link-minimal"
+              title="Open author profile"
+              onClick={(e) => e.stopPropagation()}
             >
-              {urlsExpanded ? `Hide ${extractedUrls.length - 1} more` : `Show ${extractedUrls.length - 1} more`}
-            </button>
-          )}
+              {getAuthorDisplayName()}
+            </Link>
+          </div>
+          <div className="bookmark-footer-right">
+            {getInternalRoute() ? (
+              <Link
+                to={getInternalRoute()!}
+                className="bookmark-date-link"
+                title="Open in app"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}
+              </Link>
+            ) : (
+              <span className="bookmark-date">{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
+            )}
+          </div>
         </div>
-      )}
-      
-      {isArticle && articleSummary ? (
-        <RichContent content={articleSummary} className="bookmark-content article-summary" />
-      ) : bookmark.parsedContent ? (
-        <div className="bookmark-content">
-          {shouldTruncate && bookmark.content
-            ? <RichContent content={`${bookmark.content.slice(0, 210).trimEnd()}…`} className="" />
-            : renderParsedContent(bookmark.parsedContent)}
-        </div>
-      ) : bookmark.content && (
-        <RichContent content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
-      )}
-
-      {contentLength > 210 && (
-        <button
-          className="expand-toggle"
-          onClick={(e) => { e.stopPropagation(); setExpanded(v => !v) }}
-          aria-label={expanded ? 'Collapse' : 'Expand'}
-          title={expanded ? 'Collapse' : 'Expand'}
-        >
-          <FontAwesomeIcon icon={expanded ? faChevronUp : faChevronDown} />
-        </button>
-      )}
-      
-      {/* Reading progress indicator for articles */}
-      {isArticle && readingProgress !== undefined && readingProgress > 0 && (
-        <div 
-          style={{
-            height: '3px',
-            width: '100%',
-            background: 'var(--color-border)',
-            overflow: 'hidden',
-            marginTop: '0.75rem'
-          }}
-        >
-          <div
-            style={{
-              height: '100%',
-              width: `${Math.round(readingProgress * 100)}%`,
-              background: progressColor,
-              transition: 'width 0.3s ease, background 0.3s ease'
-            }}
-          />
-        </div>
-      )}
-      
-      <div className="bookmark-footer">
-        <div className="bookmark-meta-minimal">
-          <Link
-            to={`/p/${authorNpub}`}
-            className="author-link-minimal"
-            title="Open author profile"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {getAuthorDisplayName()}
-          </Link>
-        </div>
-        {/* CTA removed */}
       </div>
     </div>
   )

src/components/BookmarkViews/CompactView.tsx

@@ -6,6 +6,7 @@ import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDateCompact } from '../../utils/bookmarkUtils'
 import RichContent from '../RichContent'
 import { naddrEncode } from 'nostr-tools/nip19'
+import { ReadingProgressBar } from '../ReadingProgressBar'
 
 interface CompactViewProps {
   bookmark: IndividualBookmark
@@ -13,7 +14,7 @@ interface CompactViewProps {
   hasUrls: boolean
   extractedUrls: string[]
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
-  articleSummary?: string
+  articleTitle?: string
   contentTypeIcon: IconDefinition
   readingProgress?: number
 }
@@ -24,7 +25,7 @@ export const CompactView: React.FC<CompactViewProps> = ({
   hasUrls,
   extractedUrls,
   onSelectUrl,
-  articleSummary,
+  articleTitle,
   contentTypeIcon,
   readingProgress
 }) => {
@@ -34,15 +35,8 @@ export const CompactView: React.FC<CompactViewProps> = ({
   const isNote = bookmark.kind === 1
   const isClickable = hasUrls || isArticle || isWebBookmark || isNote
   
-  const displayText = isArticle && articleSummary ? articleSummary : bookmark.content
+  const displayText = isArticle && articleTitle ? articleTitle : bookmark.content
 
-  // Calculate progress color
-  let progressColor = '#6366f1' // Default blue (reading)
-  if (readingProgress && readingProgress >= 0.95) {
-    progressColor = '#10b981' // Green (completed)
-  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
-    progressColor = 'var(--color-text)' // Neutral text color (started)
-  }
 
   const handleCompactClick = () => {
     if (isArticle) {
@@ -86,27 +80,13 @@ export const CompactView: React.FC<CompactViewProps> = ({
         {/* CTA removed */}
       </div>
       
-      {/* Reading progress indicator for all bookmark types with reading data */}
+      {/* Reading progress indicator - only show when there's actual progress */}
       {readingProgress !== undefined && readingProgress > 0 && (
-        <div 
-          style={{
-            height: '1px',
-            width: '100%',
-            background: 'var(--color-border)',
-            overflow: 'hidden',
-            margin: '0',
-            marginLeft: '1.5rem'
-          }}
-        >
-          <div
-            style={{
-              height: '100%',
-              width: `${Math.round(readingProgress * 100)}%`,
-              background: progressColor,
-              transition: 'width 0.3s ease, background 0.3s ease'
-            }}
-          />
-        </div>
+        <ReadingProgressBar 
+          readingProgress={readingProgress}
+          height={1}
+          marginLeft="1.5rem"
+        />
       )}
     </div>
   )

src/components/BookmarkViews/LargeView.tsx

@@ -8,6 +8,7 @@ import RichContent from '../RichContent'
 import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
 import { naddrEncode } from 'nostr-tools/nip19'
+import { ReadingProgressBar } from '../ReadingProgressBar'
 
 interface LargeViewProps {
   bookmark: IndividualBookmark
@@ -43,15 +44,6 @@ export const LargeView: React.FC<LargeViewProps> = ({
   const cachedImage = useImageCache(previewImage || undefined)
   const isArticle = bookmark.kind === 30023
   
-  // Calculate progress display (matching readingProgressUtils.ts logic)
-  const progressPercent = readingProgress ? Math.round(readingProgress * 100) : 0
-  let progressColor = '#6366f1' // Default blue (reading)
-  
-  if (readingProgress && readingProgress >= 0.95) {
-    progressColor = '#10b981' // Green (completed)
-  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
-    progressColor = 'var(--color-text)' // Neutral text color (started)
-  }
   
   const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
   const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
@@ -122,27 +114,12 @@ export const LargeView: React.FC<LargeViewProps> = ({
           <RichContent content={bookmark.content} className="large-text" />
         )}
         
-        {/* Reading progress indicator for articles - shown only if there's progress */}
-        {isArticle && readingProgress !== undefined && readingProgress > 0 && (
-          <div 
-            style={{
-              height: '3px',
-              width: '100%',
-              background: 'var(--color-border)',
-              overflow: 'hidden',
-              marginTop: '0.75rem'
-            }}
-          >
-            <div
-              style={{
-                height: '100%',
-                width: `${progressPercent}%`,
-                background: progressColor,
-                transition: 'width 0.3s ease, background 0.3s ease'
-              }}
-            />
-          </div>
-        )}
+        {/* Reading progress indicator for all bookmark types - always shown */}
+        <ReadingProgressBar 
+          readingProgress={readingProgress}
+          height={3}
+          marginTop="0.75rem"
+        />
         
         <div className="large-footer">
           <span className="bookmark-type-large">

src/components/Bookmarks.tsx

@@ -2,8 +2,11 @@ import React, { useMemo, useEffect, useRef } from 'react'
 import { useParams, useLocation, useNavigate } from 'react-router-dom'
 import { Hooks } from 'applesauce-react'
 import { useEventStore } from 'applesauce-react/hooks'
+import { Helpers } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
 import { nip19 } from 'nostr-tools'
+
+const { getPubkeyFromDecodeResult } = Helpers
 import { useSettings } from '../hooks/useSettings'
 import { useArticleLoader } from '../hooks/useArticleLoader'
 import { useExternalUrlLoader } from '../hooks/useExternalUrlLoader'
@@ -14,6 +17,7 @@ import { useBookmarksUI } from '../hooks/useBookmarksUI'
 import { useRelayStatus } from '../hooks/useRelayStatus'
 import { useOfflineSync } from '../hooks/useOfflineSync'
 import { useEventLoader } from '../hooks/useEventLoader'
+import { useDocumentTitle } from '../hooks/useDocumentTitle'
 import { Bookmark } from '../types/bookmarks'
 import ThreePaneLayout from './ThreePaneLayout'
 import Explore from './Explore'
@@ -58,6 +62,12 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   const showSupport = location.pathname === '/support'
   const eventId = eventIdParam
   
+  // Manage document title based on current route
+  const isViewingContent = !!(naddr || externalUrl || eventId)
+  useDocumentTitle({ 
+    title: isViewingContent ? undefined : 'Boris - Read, Highlight, Explore'
+  })
+  
   // Extract tab from explore routes
   const exploreTab = location.pathname === '/explore/writings' ? 'writings' : 'highlights'
   
@@ -72,16 +82,12 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   // Extract tab from profile routes
   const profileTab = location.pathname.endsWith('/writings') ? 'writings' : 'highlights'
   
-  // Decode npub or nprofile to pubkey for profile view
+  // Decode npub or nprofile to pubkey for profile view using applesauce helper
   let profilePubkey: string | undefined
   if (npub && showProfile) {
     try {
       const decoded = nip19.decode(npub)
-      if (decoded.type === 'npub') {
-        profilePubkey = decoded.data
-      } else if (decoded.type === 'nprofile') {
-        profilePubkey = decoded.data.pubkey
-      }
+      profilePubkey = getPubkeyFromDecodeResult(decoded)
     } catch (err) {
       console.error('Failed to decode npub/nprofile:', err)
     }
@@ -93,6 +99,17 @@ const Bookmarks: React.FC<BookmarksProps> = ({
       previousLocationRef.current = location.pathname
     }
   }, [location.pathname, showSettings, showMe, showExplore, showProfile])
+
+  // Reset scroll to top when navigating to profile routes
+  useEffect(() => {
+    if (showProfile) {
+      // Reset scroll position when navigating to profile pages
+      // Use requestAnimationFrame to ensure it happens after DOM updates
+      requestAnimationFrame(() => {
+        window.scrollTo({ top: 0, behavior: 'instant' })
+      })
+    }
+  }, [location.pathname, showProfile])
     
   const activeAccount = Hooks.useActiveAccount()
   const accountManager = Hooks.useAccountManager()
@@ -222,13 +239,26 @@ const Bookmarks: React.FC<BookmarksProps> = ({
     currentArticle,
     selectedUrl,
     readerContent,
-    onHighlightCreated: (highlight) => setHighlights(prev => [highlight, ...prev]),
+    onHighlightCreated: (highlight) => setHighlights(prev => {
+      // Deduplicate by checking if highlight with this ID already exists
+      const exists = prev.some(h => h.id === highlight.id)
+      if (exists) {
+        return prev // Don't add duplicate
+      }
+      return [highlight, ...prev]
+    }),
     settings
   })
 
+  // Determine which loader should be active based on route
+  // Only one loader should run at a time to prevent state conflicts
+  const shouldLoadArticle = !!naddr && !externalUrl && !eventId
+  const shouldLoadExternal = !!externalUrl && !naddr && !eventId  
+  const shouldLoadEvent = !!eventId && !naddr && !externalUrl
+
   // Load nostr-native article if naddr is in URL
   useArticleLoader({
-    naddr,
+    naddr: shouldLoadArticle ? naddr : undefined,
     relayPool,
     eventStore,
     setSelectedUrl,
@@ -245,7 +275,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   
   // Load external URL if /r/* route is used
   useExternalUrlLoader({
-    url: externalUrl,
+    url: shouldLoadExternal ? externalUrl : undefined,
     relayPool,
     eventStore,
     setSelectedUrl,
@@ -260,7 +290,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
 
   // Load event if /e/:eventId route is used
   useEventLoader({
-    eventId,
+    eventId: shouldLoadEvent ? eventId : undefined,
     relayPool,
     eventStore,
     setSelectedUrl,

src/components/ContentPanel.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo, useState, useEffect, useRef, useCallback } from 'react'
-import ReactPlayer from 'react-player'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
@@ -34,9 +33,7 @@ import { unarchiveEvent, unarchiveWebsite } from '../services/unarchiveService'
 import { archiveController } from '../services/archiveController'
 import AuthorCard from './AuthorCard'
 import { faBooks } from '../icons/customIcons'
-import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
-import { classifyUrl, shouldTrackReadingProgress } from '../utils/helpers'
-import { buildNativeVideoUrl } from '../utils/videoHelpers'
+import { shouldTrackReadingProgress } from '../utils/helpers'
 import { useReadingPosition } from '../hooks/useReadingPosition'
 import { ReadingProgressIndicator } from './ReadingProgressIndicator'
 import { EventFactory } from 'applesauce-factory'
@@ -111,15 +108,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   const [isCheckingReadStatus, setIsCheckingReadStatus] = useState(false)
   const [showCheckAnimation, setShowCheckAnimation] = useState(false)
   const [showArticleMenu, setShowArticleMenu] = useState(false)
-  const [showVideoMenu, setShowVideoMenu] = useState(false)
   const [showExternalMenu, setShowExternalMenu] = useState(false)
   const [articleMenuOpenUpward, setArticleMenuOpenUpward] = useState(false)
-  const [videoMenuOpenUpward, setVideoMenuOpenUpward] = useState(false)
   const [externalMenuOpenUpward, setExternalMenuOpenUpward] = useState(false)
   const articleMenuRef = useRef<HTMLDivElement>(null)
-  const videoMenuRef = useRef<HTMLDivElement>(null)
   const externalMenuRef = useRef<HTMLDivElement>(null)
-  const [ytMeta, setYtMeta] = useState<{ title?: string; description?: string; transcript?: string } | null>(null)
   const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef, processedMarkdown } = useMarkdownToHTML(markdown, relayPool)
   
   const { finalHtml, relevantHighlights } = useHighlightedContent({
@@ -140,7 +133,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     return selectedUrl || `${title || ''}:${(markdown || html || '').length}`
   }, [selectedUrl, title, markdown, html])
 
-  const { contentRef, handleSelectionEnd } = useHighlightInteractions({
+  const { contentRef } = useHighlightInteractions({
     onHighlightClick,
     selectedHighlightId,
     onTextSelection,
@@ -155,6 +148,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   const isTextContent = useMemo(() => {
     if (loading) return false
     if (!markdown && !html) return false
+    // Don't track internal sentinel URLs (nostr-event: is not a real Nostr URI per NIP-21)
+    if (selectedUrl?.startsWith('nostr-event:')) return false
     if (selectedUrl?.includes('youtube') || selectedUrl?.includes('vimeo')) return false
     if (!shouldTrackReadingProgress(html, markdown)) return false
     
@@ -268,6 +263,23 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   const restoreKey = `${articleIdentifier}-${isTrackingEnabled}`
   const hasAttemptedRestoreRef = useRef<string | null>(null)
 
+  // Reset scroll position and restore ref when article changes
+  useEffect(() => {
+    if (!articleIdentifier) return
+    
+    // Suppress saves during navigation to prevent saving 0% position
+    // The 500ms suppression covers the scroll reset and initial render
+    if (suppressSavesForRef.current) {
+      suppressSavesForRef.current(500)
+    }
+    
+    // Reset scroll to top when article identifier changes
+    // This prevents showing wrong scroll position from previous article
+    window.scrollTo({ top: 0, behavior: 'instant' })
+    // Reset restore attempt tracking for new article
+    hasAttemptedRestoreRef.current = null
+  }, [articleIdentifier])
+
   useEffect(() => {
     if (!isTextContent || !activeAccount || !articleIdentifier) {
       return
@@ -341,21 +353,18 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       if (articleMenuRef.current && !articleMenuRef.current.contains(target)) {
         setShowArticleMenu(false)
       }
-      if (videoMenuRef.current && !videoMenuRef.current.contains(target)) {
-        setShowVideoMenu(false)
-      }
       if (externalMenuRef.current && !externalMenuRef.current.contains(target)) {
         setShowExternalMenu(false)
       }
     }
     
-    if (showArticleMenu || showVideoMenu || showExternalMenu) {
+    if (showArticleMenu || showExternalMenu) {
       document.addEventListener('mousedown', handleClickOutside)
       return () => {
         document.removeEventListener('mousedown', handleClickOutside)
       }
     }
-  }, [showArticleMenu, showVideoMenu, showExternalMenu])
+  }, [showArticleMenu, showExternalMenu])
 
   // Check available space and position menu upward if needed
   useEffect(() => {
@@ -378,13 +387,10 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     if (showArticleMenu) {
       checkMenuPosition(articleMenuRef, setArticleMenuOpenUpward)
     }
-    if (showVideoMenu) {
-      checkMenuPosition(videoMenuRef, setVideoMenuOpenUpward)
-    }
     if (showExternalMenu) {
       checkMenuPosition(externalMenuRef, setExternalMenuOpenUpward)
     }
-  }, [showArticleMenu, showVideoMenu, showExternalMenu])
+  }, [showArticleMenu, showExternalMenu])
 
   const readingStats = useMemo(() => {
     const content = markdown || html || ''
@@ -416,34 +422,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
   // Determine if we're on a nostr-native article (/a/) or external URL (/r/)
   const isNostrArticle = selectedUrl && selectedUrl.startsWith('nostr:')
-  const isExternalVideo = !isNostrArticle && !!selectedUrl && ['youtube', 'video'].includes(classifyUrl(selectedUrl).type)
 
-  // Track external video duration (in seconds) for display in header
-  const [videoDurationSec, setVideoDurationSec] = useState<number | null>(null)
-  // Load YouTube metadata/captions when applicable
-  useEffect(() => {
-    (async () => {
-      try {
-        if (!selectedUrl) return setYtMeta(null)
-        const id = extractYouTubeId(selectedUrl)
-        if (!id) return setYtMeta(null)
-        const locale = navigator?.language?.split('-')[0] || 'en'
-        const data = await getYouTubeMeta(id, locale)
-        if (data) setYtMeta({ title: data.title, description: data.description, transcript: data.transcript })
-      } catch {
-        setYtMeta(null)
-      }
-    })()
-  }, [selectedUrl])
 
-  const formatDuration = (totalSeconds: number): string => {
-    const hours = Math.floor(totalSeconds / 3600)
-    const minutes = Math.floor((totalSeconds % 3600) / 60)
-    const seconds = Math.floor(totalSeconds % 60)
-    const mm = hours > 0 ? String(minutes).padStart(2, '0') : String(minutes)
-    const ss = String(seconds).padStart(2, '0')
-    return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`
-  }
   
 
   // Get article links for menu
@@ -481,7 +461,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     setShowArticleMenu(!showArticleMenu)
   }
 
-  const toggleVideoMenu = () => setShowVideoMenu(v => !v)
 
   const handleOpenPortal = () => {
     if (articleLinks) {
@@ -569,46 +548,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     setShowArticleMenu(false)
   }
   
-  // Video actions
-  const handleOpenVideoExternal = () => {
-    if (selectedUrl) window.open(selectedUrl, '_blank', 'noopener,noreferrer')
-    setShowVideoMenu(false)
-  }
-
-  const handleOpenVideoNative = () => {
-    if (!selectedUrl) return
-    const native = buildNativeVideoUrl(selectedUrl)
-    if (native) {
-      window.location.href = native
-    } else {
-      window.location.href = selectedUrl
-    }
-    setShowVideoMenu(false)
-  }
-
-  const handleCopyVideoUrl = async () => {
-    try {
-      if (selectedUrl) await navigator.clipboard.writeText(selectedUrl)
-    } catch (e) {
-      console.warn('Clipboard copy failed', e)
-    } finally {
-      setShowVideoMenu(false)
-    }
-  }
-
-  const handleShareVideoUrl = async () => {
-    try {
-      if (selectedUrl && (navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
-        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ title: title || 'Video', url: selectedUrl })
-      } else if (selectedUrl) {
-        await navigator.clipboard.writeText(selectedUrl)
-      }
-    } catch (e) {
-      console.warn('Share failed', e)
-    } finally {
-      setShowVideoMenu(false)
-    }
-  }
 
   // External article actions
   const toggleExternalMenu = () => setShowExternalMenu(v => !v)
@@ -806,13 +745,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     )
   }
 
-  if (loading) {
-    return (
-      <div className="reader" aria-busy="true">
-        <ContentSkeleton />
-      </div>
-    )
-  }
 
   const highlightRgb = hexToRgb(highlightColor)
 
@@ -852,11 +784,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       )}
       
       <ReaderHeader 
-        title={ytMeta?.title || title}
+        title={title}
         image={image}
         summary={summary}
         published={published}
-        readingTimeText={isExternalVideo ? (videoDurationSec !== null ? formatDuration(videoDurationSec) : null) : (readingStats ? readingStats.text : null)}
+        readingTimeText={readingStats ? readingStats.text : null}
         hasHighlights={hasHighlights}
         highlightCount={relevantHighlights.length}
         settings={settings}
@@ -869,86 +801,10 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
           <TTSControls text={articleText} defaultLang={navigator?.language} settings={settings} />
         </div>
       )}
-      {isExternalVideo ? (
-        <>
-          <div className="reader-video">
-            <ReactPlayer 
-              url={selectedUrl as string} 
-              controls 
-              width="100%"
-              height="auto"
-              style={{ 
-                width: '100%', 
-                height: 'auto', 
-                aspectRatio: '16/9' 
-              }}
-              onDuration={(d) => setVideoDurationSec(Math.floor(d))}
-            />
-          </div>
-          {ytMeta?.description && (
-            <div className="large-text" style={{ color: '#ddd', padding: '0 0.75rem', whiteSpace: 'pre-wrap', marginBottom: '0.75rem' }}>
-              {ytMeta.description}
-            </div>
-          )}
-          {ytMeta?.transcript && (
-            <div style={{ padding: '0 0.75rem 1rem 0.75rem' }}>
-              <h3 style={{ margin: '1rem 0 0.5rem 0', fontSize: '1rem', color: '#aaa' }}>Transcript</h3>
-              <div className="large-text" style={{ whiteSpace: 'pre-wrap', color: '#ddd' }}>
-                {ytMeta.transcript}
-              </div>
-            </div>
-          )}
-          <div className="article-menu-container">
-            <div className="article-menu-wrapper" ref={videoMenuRef}>
-              <button
-                className="article-menu-btn"
-                onClick={toggleVideoMenu}
-                title="More options"
-              >
-                <FontAwesomeIcon icon={faEllipsisH} />
-              </button>
-              {showVideoMenu && (
-                <div className={`article-menu ${videoMenuOpenUpward ? 'open-upward' : ''}`}>
-                  <button className="article-menu-item" onClick={handleOpenVideoExternal}>
-                    <FontAwesomeIcon icon={faExternalLinkAlt} />
-                    <span>Open Link</span>
-                  </button>
-                  <button className="article-menu-item" onClick={handleOpenVideoNative}>
-                    <FontAwesomeIcon icon={faMobileAlt} />
-                    <span>Open in Native App</span>
-                  </button>
-                  <button className="article-menu-item" onClick={handleCopyVideoUrl}>
-                    <FontAwesomeIcon icon={faCopy} />
-                    <span>Copy URL</span>
-                  </button>
-                  <button className="article-menu-item" onClick={handleShareVideoUrl}>
-                    <FontAwesomeIcon icon={faShare} />
-                    <span>Share</span>
-                  </button>
-                </div>
-              )}
-            </div>
-          </div>
-          {activeAccount && (
-            <div className="mark-as-read-container">
-              <button
-                className={`mark-as-read-btn ${isMarkedAsRead ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
-                onClick={handleMarkAsRead}
-                disabled={isCheckingReadStatus}
-                title={isMarkedAsRead ? 'Already Marked as Watched' : 'Mark as Watched'}
-                style={isMarkedAsRead ? { opacity: 0.85 } : undefined}
-              >
-                <FontAwesomeIcon 
-                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
-                  spin={isCheckingReadStatus} 
-                />
-                <span>
-                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Marked as Watched' : 'Mark as Watched'}
-                </span>
-              </button>
-            </div>
-          )}
-        </>
+      {loading || !markdown && !html ? (
+        <div className="reader" aria-busy="true">
+          <ContentSkeleton />
+        </div>
       ) : markdown || html ? (
         <>
           {markdown ? (
@@ -957,16 +813,12 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                 key={`content:${contentKey}`}
                 ref={contentRef}
                 html={finalHtml}
-                renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+                renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true}
                 className="reader-markdown"
-                onMouseUp={handleSelectionEnd}
-                onTouchEnd={handleSelectionEnd}
               />
             ) : (
               <div className="reader-markdown">
-                <div className="loading-spinner">
-                  <FontAwesomeIcon icon={faSpinner} spin size="sm" />
-                </div>
+                <ContentSkeleton />
               </div>
             )
           ) : (
@@ -974,15 +826,13 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
               key={`content:${contentKey}`}
               ref={contentRef}
               html={finalHtml || html || ''}
-              renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+              renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true}
               className="reader-html"
-              onMouseUp={handleSelectionEnd}
-              onTouchEnd={handleSelectionEnd}
             />
           )}
           
           {/* Article menu for external URLs */}
-          {!isNostrArticle && !isExternalVideo && selectedUrl && (
+          {!isNostrArticle && selectedUrl && (
             <div className="article-menu-container">
               <div className="article-menu-wrapper" ref={externalMenuRef}>
                 <button
@@ -1133,11 +983,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             </div>
           )}
         </>
-      ) : (
-        <div className="reader empty">
-          <p>No readable content found for this URL.</p>
-        </div>
-      )}
+      ) : null}
       </div>
     </>
   )

src/components/ContentWithResolvedProfiles.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { useEventModel } from 'applesauce-react/hooks'
-import { Models, Helpers } from 'applesauce-core'
-import { decode } from 'nostr-tools/nip19'
-import { extractNprofilePubkeys } from '../utils/helpers'
-
-const { getPubkeyFromDecodeResult } = Helpers
-
-interface Props { content: string }
-
-const ContentWithResolvedProfiles: React.FC<Props> = ({ content }) => {
-  const matches = extractNprofilePubkeys(content)
-  const decoded = matches
-    .map((m) => {
-      try { return decode(m) } catch { return undefined as undefined }
-    })
-    .filter((v): v is ReturnType<typeof decode> => Boolean(v))
-
-  const lookups = decoded
-    .map((res) => getPubkeyFromDecodeResult(res))
-    .filter((v): v is string => typeof v === 'string')
-
-  const profiles = lookups.map((pubkey) => ({ pubkey, profile: useEventModel(Models.ProfileModel, [pubkey]) }))
-
-  let rendered = content
-  matches.forEach((m, i) => {
-    const pk = getPubkeyFromDecodeResult(decoded[i])
-    const found = profiles.find((p) => p.pubkey === pk)
-    const name = found?.profile?.name || found?.profile?.display_name || found?.profile?.nip05 || `${pk?.slice(0,8)}...`
-    if (name) rendered = rendered.replace(m, `@${name}`)
-  })
-
-  return <div className="bookmark-content">{rendered}</div>
-}
-
-export default ContentWithResolvedProfiles
-
-

src/components/Explore.tsx

@@ -82,11 +82,28 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
 
   
   
-  // Visibility filters (defaults from settings or nostrverse when logged out)
-  const [visibility, setVisibility] = useState<HighlightVisibility>({
-    nostrverse: activeAccount ? (settings?.defaultExploreScopeNostrverse ?? false) : true,
-    friends: settings?.defaultExploreScopeFriends ?? true,
-    mine: settings?.defaultExploreScopeMine ?? false
+  // Visibility filters - load from localStorage first, fallback to settings
+  const [visibility, setVisibility] = useState<HighlightVisibility>(() => {
+    // Try to load from localStorage first
+    try {
+      const saved = localStorage.getItem('exploreScopeVisibility')
+      if (saved) {
+        const parsed = JSON.parse(saved)
+        // Validate that at least one scope is enabled
+        if (parsed.nostrverse || parsed.friends || parsed.mine) {
+          return parsed
+        }
+      }
+    } catch (err) {
+      console.warn('Failed to load explore scope from localStorage:', err)
+    }
+    
+    // Fallback to settings or defaults
+    return {
+      nostrverse: activeAccount ? (settings?.defaultExploreScopeNostrverse ?? false) : true,
+      friends: settings?.defaultExploreScopeFriends ?? true,
+      mine: settings?.defaultExploreScopeMine ?? false
+    }
   })
 
   // Ensure at least one scope remains active
@@ -96,6 +113,12 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
       if (!next.nostrverse && !next.friends && !next.mine) {
         return prev // ignore toggle that would disable all scopes
       }
+      // Persist to localStorage
+      try {
+        localStorage.setItem('exploreScopeVisibility', JSON.stringify(next))
+      } catch (err) {
+        console.warn('Failed to save explore scope to localStorage:', err)
+      }
       return next
     })
   }, [])
@@ -224,18 +247,44 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
 
   // Update visibility when settings/login state changes
   useEffect(() => {
+    // Check if user has a saved preference
+    const hasSavedPreference = (() => {
+      try {
+        return localStorage.getItem('exploreScopeVisibility') !== null
+      } catch {
+        return false
+      }
+    })()
+    
+    // Only reset to defaults if no saved preference exists
+    if (hasSavedPreference) {
+      return
+    }
+    
     if (!activeAccount) {
       // When logged out, show nostrverse by default
-      setVisibility(prev => ({ ...prev, nostrverse: true, friends: false, mine: false }))
+      const defaultVisibility = { nostrverse: true, friends: false, mine: false }
+      setVisibility(defaultVisibility)
+      try {
+        localStorage.setItem('exploreScopeVisibility', JSON.stringify(defaultVisibility))
+      } catch (err) {
+        console.warn('Failed to save explore scope to localStorage:', err)
+      }
       setHasLoadedNostrverse(true) // logged out path loads nostrverse immediately
       setHasLoadedNostrverseHighlights(true)
     } else {
       // When logged in, use settings defaults immediately
-      setVisibility({
+      const defaultVisibility = {
         nostrverse: settings?.defaultExploreScopeNostrverse ?? false,
         friends: settings?.defaultExploreScopeFriends ?? true,
         mine: settings?.defaultExploreScopeMine ?? false
-      })
+      }
+      setVisibility(defaultVisibility)
+      try {
+        localStorage.setItem('exploreScopeVisibility', JSON.stringify(defaultVisibility))
+      } catch (err) {
+        console.warn('Failed to save explore scope to localStorage:', err)
+      }
       setHasLoadedNostrverse(false)
       setHasLoadedNostrverseHighlights(false)
     }

src/components/HighlightButton.tsx

@@ -45,7 +45,7 @@ export const HighlightButton = React.forwardRef<HighlightButtonRef, HighlightBut
         className="highlight-fab"
         style={{
           position: 'fixed',
-          bottom: '32px',
+          bottom: '80px',
           right: '32px',
           zIndex: 1000,
           width: '56px',

src/components/HighlightCitation.tsx

@@ -5,6 +5,7 @@ import { Models } from 'applesauce-core'
 import { nip19 } from 'nostr-tools'
 import { fetchArticleTitle } from '../services/articleTitleResolver'
 import { Highlight } from '../types/highlights'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 
 interface HighlightCitationProps {
   highlight: Highlight
@@ -79,7 +80,8 @@ export const HighlightCitation: React.FC<HighlightCitationProps> = ({
     loadTitle()
   }, [highlight.eventReference, relayPool])
   
-  const authorName = authorProfile?.name || authorProfile?.display_name
+  // Use centralized profile display name utility
+  const authorName = authorPubkey ? getProfileDisplayName(authorProfile, authorPubkey) : undefined
   
   // For nostr-native content with article reference
   if (highlight.eventReference && (authorName || articleTitle)) {

src/components/HighlightItem.tsx

@@ -7,8 +7,8 @@ import { useEventModel } from 'applesauce-react/hooks'
 import { Models, IEventStore } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
 import { Hooks } from 'applesauce-react'
-import { onSyncStateChange, isEventSyncing } from '../services/offlineSyncService'
-import { areAllRelaysLocal } from '../utils/helpers'
+import { onSyncStateChange, isEventSyncing, isEventOfflineCreated } from '../services/offlineSyncService'
+import { areAllRelaysLocal, isLocalRelay } from '../utils/helpers'
 import { getActiveRelayUrls } from '../services/relayManager'
 import { nip19 } from 'nostr-tools'
 import { formatDateCompact } from '../utils/bookmarkUtils'
@@ -18,6 +18,7 @@ import CompactButton from './CompactButton'
 import { HighlightCitation } from './HighlightCitation'
 import { useNavigate } from 'react-router-dom'
 import NostrMentionLink from './NostrMentionLink'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 
 // Helper to detect if a URL is an image
 const isImageUrl = (url: string): boolean => {
@@ -114,7 +115,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   const itemRef = useRef<HTMLDivElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
   const [isSyncing, setIsSyncing] = useState(() => isEventSyncing(highlight.id))
-  const [showOfflineIndicator, setShowOfflineIndicator] = useState(() => highlight.isOfflineCreated && !isSyncing)
   const [isRebroadcasting, setIsRebroadcasting] = useState(false)
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
@@ -128,17 +128,9 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   
   // Get display name for the user
   const getUserDisplayName = () => {
-    if (profile?.name) return profile.name
-    if (profile?.display_name) return profile.display_name
-    return `${highlight.pubkey.slice(0, 8)}...` // fallback to short pubkey
+    return getProfileDisplayName(profile, highlight.pubkey)
   }
   
-  // Update offline indicator when highlight prop changes
-  useEffect(() => {
-    if (highlight.isOfflineCreated && !isSyncing) {
-      setShowOfflineIndicator(true)
-    }
-  }, [highlight.isOfflineCreated, isSyncing])
   
   // Listen to sync state changes
   useEffect(() => {
@@ -147,8 +139,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         setIsSyncing(syncingState)
         // When sync completes successfully, update highlight to show all relays
         if (!syncingState) {
-          setShowOfflineIndicator(false)
-          
           // Update the highlight with all relays after successful sync
           if (onHighlightUpdate && highlight.isLocalOnly && relayPool) {
             const updatedHighlight = {
@@ -292,9 +282,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         onHighlightUpdate(updatedHighlight)
       }
       
-      // Update local state
-      setShowOfflineIndicator(false)
-      
     } catch (error) {
       console.error('❌ Failed to rebroadcast:', error)
     } finally {
@@ -313,8 +300,37 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
       }
     }
     
-    // Always show relay list, use plane icon for local-only
-    const isLocalOrOffline = highlight.isLocalOnly || showOfflineIndicator
+    // Check if this highlight was only published to local relays
+    let isLocalOnly = highlight.isLocalOnly
+    const publishedRelays = highlight.publishedRelays || []
+    
+    // Fallback 1: Check if this highlight was marked for offline sync (flight mode)
+    if (isLocalOnly === undefined) {
+      if (isEventOfflineCreated(highlight.id)) {
+        isLocalOnly = true
+      }
+    }
+    
+    // Fallback 2: If publishedRelays only contains local relays, it's local-only
+    if (isLocalOnly === undefined && publishedRelays.length > 0) {
+      const hasOnlyLocalRelays = publishedRelays.every(url => isLocalRelay(url))
+      const hasRemoteRelays = publishedRelays.some(url => !isLocalRelay(url))
+      if (hasOnlyLocalRelays && !hasRemoteRelays) {
+        isLocalOnly = true
+      }
+    }
+    
+    
+    // If isLocalOnly is true (from any fallback), show airplane icon
+    if (isLocalOnly === true) {
+      return {
+        icon: faPlane,
+        tooltip: publishedRelays.length > 0
+          ? 'Local relays only - will sync when remote relays available'
+          : 'Created in flight mode - will sync when remote relays available',
+        spin: false
+      }
+    }
     
     // Show highlighter icon with relay info if available
     if (highlight.publishedRelays && highlight.publishedRelays.length > 0) {
@@ -322,7 +338,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
       )
       return {
-        icon: isLocalOrOffline ? faPlane : faHighlighter,
+        icon: faHighlighter,
         tooltip: relayNames.join('\n'),
         spin: false
       }

src/components/Me.tsx

@@ -25,6 +25,7 @@ import { faBooks } from '../icons/customIcons'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { groupIndividualBookmarks, hasContent, hasCreationDate, sortIndividualBookmarks } from '../utils/bookmarkUtils'
+import { dedupeBookmarksById } from '../services/bookmarkHelpers'
 import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
 import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
 import ReadingProgressFilters, { ReadingProgressFilterType } from './ReadingProgressFilters'
@@ -279,8 +280,8 @@ const Me: React.FC<MeProps> = ({
     try {
       if (!hasBeenLoaded) setLoading(true)
       
-      // Derive links from bookmarks immediately (bookmarks come from centralized loading in App.tsx)
-      const initialLinks = deriveLinksFromBookmarks(bookmarks)
+      // Derive links from bookmarks with OpenGraph enhancement
+      const initialLinks = await deriveLinksFromBookmarks(bookmarks)
       const initialMap = new Map(initialLinks.map(item => [item.id, item]))
       setLinksMap(initialMap)
       setLinks(initialLinks)
@@ -394,8 +395,7 @@ const Me: React.FC<MeProps> = ({
   }
 
   const getReadItemUrl = (item: ReadItem) => {
-    if (item.type === 'article') {
-      // ID is already in naddr format
+    if (item.type === 'article' && item.id.startsWith('naddr1')) {
       return `/a/${item.id}`
     } else if (item.url) {
       return `/r/${encodeURIComponent(item.url)}`
@@ -438,19 +438,16 @@ const Me: React.FC<MeProps> = ({
 
   const handleSelectUrl = (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => {
     if (bookmark && bookmark.kind === 30023) {
-      // For kind:30023 articles, navigate to the article route
       const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1] || ''
       if (dTag && bookmark.pubkey) {
-        const pointer = {
-          identifier: dTag,
+        const naddr = nip19.naddrEncode({
           kind: 30023,
           pubkey: bookmark.pubkey,
-        }
-        const naddr = nip19.naddrEncode(pointer)
+          identifier: dTag
+        })
         navigate(`/a/${naddr}`)
       }
     } else if (url) {
-      // For regular URLs, navigate to the reader route
       navigate(`/r/${encodeURIComponent(url)}`)
     }
   }
@@ -491,8 +488,10 @@ const Me: React.FC<MeProps> = ({
     return undefined
   }
 
-  // Merge and flatten all individual bookmarks
-  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
+  // Merge and flatten all individual bookmarks with deduplication
+  const allIndividualBookmarks = dedupeBookmarksById(
+    bookmarks.flatMap(b => b.individualBookmarks || [])
+  )
     .filter(hasContent)
     .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b))
   

src/components/NostrMentionLink.tsx

@@ -1,7 +1,12 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { nip19 } from 'nostr-tools'
 import { useEventModel } from 'applesauce-react/hooks'
-import { Models } from 'applesauce-core'
+import { Hooks } from 'applesauce-react'
+import { Models, Helpers } from 'applesauce-core'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
+import { isProfileInCacheOrStore } from '../utils/profileLoadingUtils'
+
+const { getPubkeyFromDecodeResult } = Helpers
 
 interface NostrMentionLinkProps {
   nostrUri: string
@@ -20,25 +25,31 @@ const NostrMentionLink: React.FC<NostrMentionLinkProps> = ({
 }) => {
   // Decode the nostr URI first
   let decoded: ReturnType<typeof nip19.decode> | null = null
-  let pubkey: string | undefined
   
   try {
     const identifier = nostrUri.replace(/^nostr:/, '')
     decoded = nip19.decode(identifier)
-    
-    // Extract pubkey for profile fetching (works for npub and nprofile)
-    if (decoded.type === 'npub') {
-      pubkey = decoded.data
-    } else if (decoded.type === 'nprofile') {
-      pubkey = decoded.data.pubkey
-    }
   } catch (error) {
     // Decoding failed, will fallback to shortened identifier
   }
   
+  // Extract pubkey for profile fetching using applesauce helper (works for npub and nprofile)
+  const pubkey = decoded ? getPubkeyFromDecodeResult(decoded) : undefined
+  
+  const eventStore = Hooks.useEventStore()
   // Fetch profile at top level (Rules of Hooks)
   const profile = useEventModel(Models.ProfileModel, pubkey ? [pubkey] : null)
   
+  // Check if profile is in cache or eventStore for loading detection
+  const isInCacheOrStore = useMemo(() => {
+    if (!pubkey) return false
+    return isProfileInCacheOrStore(pubkey, eventStore)
+  }, [pubkey, eventStore])
+  
+  // Show loading if profile doesn't exist and not in cache/store (for npub/nprofile)
+  // pubkey will be undefined for non-profile types, so no need for explicit type check
+  const isLoading = !profile && pubkey && !isInCacheOrStore
+  
   // If decoding failed, show shortened identifier
   if (!decoded) {
     const identifier = nostrUri.replace(/^nostr:/, '')
@@ -49,37 +60,30 @@ const NostrMentionLink: React.FC<NostrMentionLinkProps> = ({
     )
   }
   
+  // Helper function to render profile links (used for both npub and nprofile)
+  const renderProfileLink = (pubkey: string) => {
+    const npub = nip19.npubEncode(pubkey)
+    const displayName = getProfileDisplayName(profile, pubkey)
+    const linkClassName = isLoading ? `${className} profile-loading` : className
+    
+    return (
+      <a
+        href={`/p/${npub}`}
+        className={linkClassName}
+        onClick={onClick}
+      >
+        @{displayName}
+      </a>
+    )
+  }
+
   // Render based on decoded type
+  // If we have a pubkey (from npub/nprofile), render profile link directly
+  if (pubkey) {
+    return renderProfileLink(pubkey)
+  }
+  
   switch (decoded.type) {
-    case 'npub': {
-      const pk = decoded.data
-      const displayName = profile?.name || profile?.display_name || profile?.nip05 || `${pk.slice(0, 8)}...`
-      
-      return (
-        <a
-          href={`/p/${nip19.npubEncode(pk)}`}
-          className={className}
-          onClick={onClick}
-        >
-          @{displayName}
-        </a>
-      )
-    }
-    case 'nprofile': {
-      const { pubkey: pk } = decoded.data
-      const displayName = profile?.name || profile?.display_name || profile?.nip05 || `${pk.slice(0, 8)}...`
-      const npub = nip19.npubEncode(pk)
-      
-      return (
-        <a
-          href={`/p/${npub}`}
-          className={className}
-          onClick={onClick}
-        >
-          @{displayName}
-        </a>
-      )
-    }
     case 'naddr': {
       const { kind, pubkey: pk, identifier: addrIdentifier } = decoded.data
       // Check if it's a blog post (kind:30023)

src/components/ReaderHeader.tsx

@@ -80,7 +80,13 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
       <>
         <div className="reader-hero-image">
           {cachedImage ? (
-            <img src={cachedImage} alt={title || 'Article image'} />
+            <img 
+              src={cachedImage} 
+              alt={title || 'Article image'}
+              onError={(e) => {
+                console.error('[reader-header] Image failed to load:', cachedImage, e)
+              }}
+            />
           ) : (
             <div className="reader-hero-placeholder">
               <FontAwesomeIcon icon={faNewspaper} />

src/components/ReadingProgressBar.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+interface ReadingProgressBarProps {
+  readingProgress?: number
+  height?: number
+  marginTop?: string
+  marginBottom?: string
+  marginLeft?: string
+  className?: string
+}
+
+export const ReadingProgressBar: React.FC<ReadingProgressBarProps> = ({
+  readingProgress,
+  height = 1,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  className
+}) => {
+  // Calculate progress color
+  let progressColor = '#6366f1' // Default blue (reading)
+  if (readingProgress && readingProgress >= 0.95) {
+    progressColor = '#10b981' // Green (completed)
+  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
+    progressColor = 'var(--color-text)' // Neutral text color (started)
+  }
+
+  const progressWidth = readingProgress ? `${Math.round(readingProgress * 100)}%` : '0%'
+  const progressBackground = readingProgress ? progressColor : 'var(--color-border)'
+
+  return (
+    <div 
+      className={className}
+      style={{
+        height: `${height}px`,
+        width: '100%',
+        background: 'var(--color-border)',
+        borderRadius: '0.5px',
+        overflow: 'hidden',
+        marginTop,
+        marginBottom,
+        marginLeft,
+        position: 'relative',
+        minHeight: `${height}px`
+      }}
+    >
+      <div
+        style={{
+          height: '100%',
+          width: progressWidth,
+          background: progressBackground,
+          transition: 'width 0.3s ease, background 0.3s ease',
+          minHeight: `${height}px`
+        }}
+      />
+    </div>
+  )
+}

src/components/ResolvedMention.tsx

@@ -1,8 +1,11 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import { useEventModel } from 'applesauce-react/hooks'
+import { Hooks } from 'applesauce-react'
 import { Models, Helpers } from 'applesauce-core'
 import { decode, npubEncode } from 'nostr-tools/nip19'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
+import { isProfileInCacheOrStore } from '../utils/profileLoadingUtils'
 
 const { getPubkeyFromDecodeResult } = Helpers
 
@@ -19,15 +22,27 @@ const ResolvedMention: React.FC<ResolvedMentionProps> = ({ encoded }) => {
     // ignore; will fallback to showing the encoded value
   }
 
+  const eventStore = Hooks.useEventStore()
   const profile = pubkey ? useEventModel(Models.ProfileModel, [pubkey]) : undefined
-  const display = profile?.name || profile?.display_name || profile?.nip05 || (pubkey ? `${pubkey.slice(0, 8)}...` : encoded)
+  
+  // Check if profile is in cache or eventStore
+  const isInCacheOrStore = useMemo(() => {
+    if (!pubkey) return false
+    return isProfileInCacheOrStore(pubkey, eventStore)
+  }, [pubkey, eventStore])
+  
+  // Show loading if profile doesn't exist and not in cache/store
+  const isLoading = !profile && pubkey && !isInCacheOrStore
+  
+  const display = pubkey ? getProfileDisplayName(profile, pubkey) : encoded
   const npub = pubkey ? npubEncode(pubkey) : undefined
 
   if (npub) {
+    const className = isLoading ? 'nostr-mention profile-loading' : 'nostr-mention'
     return (
       <Link
         to={`/p/${npub}`}
-        className="nostr-mention"
+        className={className}
       >
         @{display}
       </Link>

src/components/RichContent.tsx

@@ -1,5 +1,13 @@
 import React from 'react'
 import NostrMentionLink from './NostrMentionLink'
+import { Tokens } from 'applesauce-content/helpers'
+
+// Helper to add timestamps to error logs
+const ts = () => {
+  const now = new Date()
+  const ms = now.getMilliseconds().toString().padStart(3, '0')
+  return `${now.toLocaleTimeString('en-US', { hour12: false })}.${ms}`
+}
 
 interface RichContentProps {
   content: string
@@ -18,18 +26,31 @@ const RichContent: React.FC<RichContentProps> = ({
   content, 
   className = 'bookmark-content' 
 }) => {
-  // Pattern to match:
-  // 1. nostr: URIs (nostr:npub1..., nostr:note1..., etc.)
-  // 2. Plain nostr identifiers (npub1..., nprofile1..., note1..., etc.)
-  // 3. http(s) URLs
-  const pattern = /(nostr:[a-z0-9]+|npub1[a-z0-9]+|nprofile1[a-z0-9]+|note1[a-z0-9]+|nevent1[a-z0-9]+|naddr1[a-z0-9]+|https?:\/\/[^\s]+)/gi
+  try {
+    // Pattern to match:
+    // 1. nostr: URIs (nostr:npub1..., nostr:note1..., etc.) using applesauce Tokens.nostrLink
+    // 2. http(s) URLs
+    const nostrPattern = Tokens.nostrLink
+    const urlPattern = /https?:\/\/[^\s]+/gi
+    const combinedPattern = new RegExp(`(${nostrPattern.source}|${urlPattern.source})`, 'gi')
+    
+    const parts = content.split(combinedPattern)
   
-  const parts = content.split(pattern)
-  
-  return (
+    // Helper to check if a string is a nostr identifier (without mutating regex state)
+    const isNostrIdentifier = (str: string): boolean => {
+      const testPattern = new RegExp(nostrPattern.source, nostrPattern.flags)
+      return testPattern.test(str)
+    }
+    
+    return (
     <div className={className}>
       {parts.map((part, index) => {
-        // Handle nostr: URIs
+        // Skip empty or undefined parts
+        if (!part) {
+          return null
+        }
+        
+        // Handle nostr: URIs - Tokens.nostrLink matches both formats
         if (part.startsWith('nostr:')) {
           return (
             <NostrMentionLink
@@ -39,10 +60,8 @@ const RichContent: React.FC<RichContentProps> = ({
           )
         }
         
-        // Handle plain nostr identifiers (add nostr: prefix)
-        if (
-          part.match(/^(npub1|nprofile1|note1|nevent1|naddr1)[a-z0-9]+$/i)
-        ) {
+        // Handle plain nostr identifiers (Tokens.nostrLink matches these too)
+        if (isNostrIdentifier(part)) {
           return (
             <NostrMentionLink
               key={index}
@@ -70,7 +89,11 @@ const RichContent: React.FC<RichContentProps> = ({
         return <React.Fragment key={index}>{part}</React.Fragment>
       })}
     </div>
-  )
+    )
+  } catch (err) {
+    console.error(`[${ts()}] [npub-resolve] RichContent: Error rendering:`, err)
+    return <div className={className}>Error rendering content</div>
+  }
 }
 
 export default RichContent

src/components/SidebarHeader.tsx

@@ -7,6 +7,8 @@ import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import IconButton from './IconButton'
 import { faBooks } from '../icons/customIcons'
+import { preloadImage } from '../hooks/useImageCache'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 
 interface SidebarHeaderProps {
   onToggleCollapse: () => void
@@ -28,14 +30,18 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
 
   const getUserDisplayName = () => {
     if (!activeAccount) return 'Unknown User'
-    if (profile?.name) return profile.name
-    if (profile?.display_name) return profile.display_name
-    if (profile?.nip05) return profile.nip05
-    return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
+    return getProfileDisplayName(profile, activeAccount.pubkey)
   }
 
   const profileImage = getProfileImage()
 
+  // Preload profile image for offline access
+  useEffect(() => {
+    if (profileImage) {
+      preloadImage(profileImage)
+    }
+  }, [profileImage])
+
   // Close menu when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -55,95 +61,116 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
 
   const handleMenuItemClick = (action: () => void) => {
     setShowProfileMenu(false)
+    // Close mobile sidebar when navigating on mobile
+    if (isMobile) {
+      onToggleCollapse()
+    }
     action()
   }
 
   return (
     <>
       <div className="sidebar-header-bar">
-        {activeAccount && (
-          <div className="profile-menu-wrapper" ref={menuRef}>
-            <button
-              className="profile-avatar-button" 
-              title={getUserDisplayName()}
-              onClick={() => setShowProfileMenu(!showProfileMenu)}
-              aria-label={`Profile: ${getUserDisplayName()}`}
-            >
-              {profileImage ? (
-                <img src={profileImage} alt={getUserDisplayName()} />
-              ) : (
-                <FontAwesomeIcon icon={faUserCircle} />
+        <div className="sidebar-header-left">
+          {activeAccount && (
+            <div className="profile-menu-wrapper" ref={menuRef}>
+              <button
+                className="profile-avatar-button" 
+                title={getUserDisplayName()}
+                onClick={() => setShowProfileMenu(!showProfileMenu)}
+                aria-label={`Profile: ${getUserDisplayName()}`}
+              >
+                {profileImage ? (
+                  <img src={profileImage} alt={getUserDisplayName()} />
+                ) : (
+                  <FontAwesomeIcon icon={faUserCircle} />
+                )}
+              </button>
+              {showProfileMenu && (
+                <div className="profile-dropdown-menu">
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/highlights'))}
+                  >
+                    <FontAwesomeIcon icon={faHighlighter} />
+                    <span>My Highlights</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/bookmarks'))}
+                  >
+                    <FontAwesomeIcon icon={faBookmark} />
+                    <span>My Bookmarks</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/reads'))}
+                  >
+                    <FontAwesomeIcon icon={faBooks} />
+                    <span>My Reads</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/links'))}
+                  >
+                    <FontAwesomeIcon icon={faLink} />
+                    <span>My Links</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/writings'))}
+                  >
+                    <FontAwesomeIcon icon={faPenToSquare} />
+                    <span>My Writings</span>
+                  </button>
+                  <div className="profile-menu-separator"></div>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(onLogout)}
+                  >
+                    <FontAwesomeIcon icon={faRightFromBracket} />
+                    <span>Logout</span>
+                  </button>
+                </div>
               )}
-            </button>
-            {showProfileMenu && (
-              <div className="profile-dropdown-menu">
-                <button
-                  className="profile-menu-item"
-                  onClick={() => handleMenuItemClick(() => navigate('/my/highlights'))}
-                >
-                  <FontAwesomeIcon icon={faHighlighter} />
-                  <span>My Highlights</span>
-                </button>
-                <button
-                  className="profile-menu-item"
-                  onClick={() => handleMenuItemClick(() => navigate('/my/bookmarks'))}
-                >
-                  <FontAwesomeIcon icon={faBookmark} />
-                  <span>My Bookmarks</span>
-                </button>
-                <button
-                  className="profile-menu-item"
-                  onClick={() => handleMenuItemClick(() => navigate('/my/reads'))}
-                >
-                  <FontAwesomeIcon icon={faBooks} />
-                  <span>My Reads</span>
-                </button>
-                <button
-                  className="profile-menu-item"
-                  onClick={() => handleMenuItemClick(() => navigate('/my/links'))}
-                >
-                  <FontAwesomeIcon icon={faLink} />
-                  <span>My Links</span>
-                </button>
-                <button
-                  className="profile-menu-item"
-                  onClick={() => handleMenuItemClick(() => navigate('/my/writings'))}
-                >
-                  <FontAwesomeIcon icon={faPenToSquare} />
-                  <span>My Writings</span>
-                </button>
-                <div className="profile-menu-separator"></div>
-                <button
-                  className="profile-menu-item"
-                  onClick={() => handleMenuItemClick(onLogout)}
-                >
-                  <FontAwesomeIcon icon={faRightFromBracket} />
-                  <span>Logout</span>
-                </button>
-              </div>
-            )}
-          </div>
-        )}
-        <div className="sidebar-header-right">
+            </div>
+          )}
           <IconButton
             icon={faHome}
-            onClick={() => navigate('/')}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              navigate('/')
+            }}
             title="Home"
             ariaLabel="Home"
             variant="ghost"
           />
+        </div>
+        <div className="sidebar-header-right">
           <IconButton
-            icon={faGear}
-            onClick={onOpenSettings}
-            title="Settings"
-            ariaLabel="Settings"
+            icon={faPersonHiking}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              navigate('/explore')
+            }}
+            title="Explore"
+            ariaLabel="Explore"
             variant="ghost"
           />
           <IconButton
-            icon={faPersonHiking}
-            onClick={() => navigate('/explore')}
-            title="Explore"
-            ariaLabel="Explore"
+            icon={faGear}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              onOpenSettings()
+            }}
+            title="Settings"
+            ariaLabel="Settings"
             variant="ghost"
           />
           {!isMobile && (

src/components/Support.tsx

@@ -10,6 +10,7 @@ import { Models } from 'applesauce-core'
 import { useEventModel } from 'applesauce-react/hooks'
 import { useNavigate } from 'react-router-dom'
 import { nip19 } from 'nostr-tools'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 
 interface SupportProps {
   relayPool: RelayPool
@@ -182,7 +183,7 @@ const SupporterCard: React.FC<SupporterCardProps> = ({ supporter, isWhale }) =>
   const profile = useEventModel(Models.ProfileModel, [supporter.pubkey])
 
   const picture = profile?.picture
-  const name = profile?.name || profile?.display_name || `${supporter.pubkey.slice(0, 8)}...`
+  const name = getProfileDisplayName(profile, supporter.pubkey)
 
   const handleClick = () => {
     const npub = nip19.npubEncode(supporter.pubkey)

src/components/ThreePaneLayout.tsx

@@ -5,6 +5,7 @@ import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { BookmarkList } from './BookmarkList'
 import ContentPanel from './ContentPanel'
+import VideoView from './VideoView'
 import { HighlightsPanel } from './HighlightsPanel'
 import Settings from './Settings'
 import Toast from './Toast'
@@ -19,6 +20,7 @@ import { HighlightVisibility } from './HighlightsPanel'
 import { HighlightButtonRef } from './HighlightButton'
 import { BookmarkReference } from '../utils/contentLoader'
 import { useIsMobile } from '../hooks/useMediaQuery'
+import { classifyUrl } from '../utils/helpers'
 import { useScrollDirection } from '../hooks/useScrollDirection'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
@@ -321,7 +323,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
         <div 
           ref={sidebarRef}
           className={`pane sidebar ${isMobile && props.isSidebarOpen ? 'mobile-open' : ''}`}
-          aria-hidden={isMobile && !props.isSidebarOpen}
+          {...(isMobile && !props.isSidebarOpen ? { inert: '' } : {})}
         >
           <BookmarkList 
             bookmarks={props.bookmarks}
@@ -373,47 +375,73 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             <>
               {props.support}
             </>
-          ) : (
-            <ContentPanel 
-              loading={props.readerLoading}
-              title={props.readerContent?.title}
-              html={props.readerContent?.html}
-              markdown={props.readerContent?.markdown}
-              image={props.readerContent?.image}
-              summary={props.readerContent?.summary}
-              published={props.readerContent?.published}
-              selectedUrl={props.selectedUrl}
-              highlights={props.selectedUrl && props.selectedUrl.startsWith('nostr:')
-                ? props.highlights // article-specific highlights only
-                : props.classifiedHighlights}
-              showHighlights={props.showHighlights}
-              highlightStyle={props.settings.highlightStyle || 'marker'}
-              highlightColor={props.settings.highlightColor || '#ffff00'}
-              onHighlightClick={props.onHighlightClick}
-              selectedHighlightId={props.selectedHighlightId}
-              highlightVisibility={props.highlightVisibility}
-              onTextSelection={props.onTextSelection}
-              onClearSelection={props.onClearSelection}
-              currentUserPubkey={props.currentUserPubkey}
-              followedPubkeys={props.followedPubkeys}
-              settings={props.settings}
-              relayPool={props.relayPool}
-              activeAccount={props.activeAccount}
-              currentArticle={props.currentArticle}
-              isSidebarCollapsed={props.isCollapsed}
-              isHighlightsCollapsed={props.isHighlightsCollapsed}
-              onOpenHighlights={() => {
-                if (props.isHighlightsCollapsed) {
-                  props.onToggleHighlightsPanel()
-                }
-              }}
-            />
-          )}
+          ) : (() => {
+            // Determine if this is a video URL
+            const isNostrArticle = props.selectedUrl && props.selectedUrl.startsWith('nostr:')
+            const isExternalVideo = !isNostrArticle && !!props.selectedUrl && ['youtube', 'video'].includes(classifyUrl(props.selectedUrl).type)
+            
+            if (isExternalVideo) {
+              return (
+                <VideoView
+                  videoUrl={props.selectedUrl!}
+                  title={props.readerContent?.title}
+                  image={props.readerContent?.image}
+                  summary={props.readerContent?.summary}
+                  published={props.readerContent?.published}
+                  settings={props.settings}
+                  relayPool={props.relayPool}
+                  activeAccount={props.activeAccount}
+                  onOpenHighlights={() => {
+                    if (props.isHighlightsCollapsed) {
+                      props.onToggleHighlightsPanel()
+                    }
+                  }}
+                />
+              )
+            }
+            
+            return (
+              <ContentPanel 
+                loading={props.readerLoading}
+                title={props.readerContent?.title}
+                html={props.readerContent?.html}
+                markdown={props.readerContent?.markdown}
+                image={props.readerContent?.image}
+                summary={props.readerContent?.summary}
+                published={props.readerContent?.published}
+                selectedUrl={props.selectedUrl}
+                highlights={props.selectedUrl && props.selectedUrl.startsWith('nostr:')
+                  ? props.highlights // article-specific highlights only
+                  : props.classifiedHighlights}
+                showHighlights={props.showHighlights}
+                highlightStyle={props.settings.highlightStyle || 'marker'}
+                highlightColor={props.settings.highlightColor || '#ffff00'}
+                onHighlightClick={props.onHighlightClick}
+                selectedHighlightId={props.selectedHighlightId}
+                highlightVisibility={props.highlightVisibility}
+                onTextSelection={props.onTextSelection}
+                onClearSelection={props.onClearSelection}
+                currentUserPubkey={props.currentUserPubkey}
+                followedPubkeys={props.followedPubkeys}
+                settings={props.settings}
+                relayPool={props.relayPool}
+                activeAccount={props.activeAccount}
+                currentArticle={props.currentArticle}
+                isSidebarCollapsed={props.isCollapsed}
+                isHighlightsCollapsed={props.isHighlightsCollapsed}
+                onOpenHighlights={() => {
+                  if (props.isHighlightsCollapsed) {
+                    props.onToggleHighlightsPanel()
+                  }
+                }}
+              />
+            )
+          })()}
         </div>
         <div 
           ref={highlightsRef}
           className={`pane highlights ${isMobile && !props.isHighlightsCollapsed ? 'mobile-open' : ''}`}
-          aria-hidden={isMobile && props.isHighlightsCollapsed}
+          {...(isMobile && props.isHighlightsCollapsed ? { inert: '' } : {})}
         >
           <HighlightsPanel
             highlights={props.highlights}

src/components/VideoEmbedProcessor.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, forwardRef } from 'react'
+import { useMemo, forwardRef } from 'react'
 import ReactPlayer from 'react-player'
 import { classifyUrl } from '../utils/helpers'
 
@@ -6,8 +6,6 @@ interface VideoEmbedProcessorProps {
   html: string
   renderVideoLinksAsEmbeds: boolean
   className?: string
-  onMouseUp?: (e: React.MouseEvent) => void
-  onTouchEnd?: (e: React.TouchEvent) => void
 }
 
 /**
@@ -17,9 +15,7 @@ interface VideoEmbedProcessorProps {
 const VideoEmbedProcessor = forwardRef<HTMLDivElement, VideoEmbedProcessorProps>(({
   html,
   renderVideoLinksAsEmbeds,
-  className,
-  onMouseUp,
-  onTouchEnd
+  className
 }, ref) => {
   // Process HTML and extract video URLs in a single pass to keep them in sync
   const { processedHtml, videoUrls } = useMemo(() => {
@@ -109,8 +105,6 @@ const VideoEmbedProcessor = forwardRef<HTMLDivElement, VideoEmbedProcessorProps>
         ref={ref}
         className={className}
         dangerouslySetInnerHTML={{ __html: processedHtml }}
-        onMouseUp={onMouseUp}
-        onTouchEnd={onTouchEnd}
       />
     )
   }
@@ -119,7 +113,7 @@ const VideoEmbedProcessor = forwardRef<HTMLDivElement, VideoEmbedProcessorProps>
   const parts = processedHtml.split(/(__VIDEO_EMBED_\d+__)/)
   
   return (
-    <div ref={ref} className={className} onMouseUp={onMouseUp} onTouchEnd={onTouchEnd}>
+    <div ref={ref} className={className}>
       {parts.map((part, index) => {
         const videoMatch = part.match(/^__VIDEO_EMBED_(\d+)__$/)
         if (videoMatch) {

src/components/VideoView.tsx

@@ -0,0 +1,320 @@
+import React, { useState, useEffect, useRef } from 'react'
+import ReactPlayer from 'react-player'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { UserSettings } from '../services/settingsService'
+import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
+import { buildNativeVideoUrl } from '../utils/videoHelpers'
+import { getYouTubeThumbnail } from '../utils/imagePreview'
+
+// Helper function to get Vimeo thumbnail
+const getVimeoThumbnail = (url: string): string | null => {
+  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/)
+  if (!vimeoMatch) return null
+  
+  const videoId = vimeoMatch[1]
+  return `https://vumbnail.com/${videoId}.jpg`
+}
+import { 
+  createWebsiteReaction,
+  hasMarkedWebsiteAsRead
+} from '../services/reactionService'
+import { unarchiveWebsite } from '../services/unarchiveService'
+import ReaderHeader from './ReaderHeader'
+
+interface VideoViewProps {
+  videoUrl: string
+  title?: string
+  image?: string
+  summary?: string
+  published?: number
+  settings?: UserSettings
+  relayPool?: RelayPool | null
+  activeAccount?: IAccount | null
+  onOpenHighlights?: () => void
+}
+
+const VideoView: React.FC<VideoViewProps> = ({
+  videoUrl,
+  title,
+  image,
+  summary,
+  published,
+  settings,
+  relayPool,
+  activeAccount,
+  onOpenHighlights
+}) => {
+  const [isMarkedAsWatched, setIsMarkedAsWatched] = useState(false)
+  const [isCheckingWatchedStatus, setIsCheckingWatchedStatus] = useState(false)
+  const [showCheckAnimation, setShowCheckAnimation] = useState(false)
+  const [showVideoMenu, setShowVideoMenu] = useState(false)
+  const [videoMenuOpenUpward, setVideoMenuOpenUpward] = useState(false)
+  const [videoDurationSec, setVideoDurationSec] = useState<number | null>(null)
+  const [ytMeta, setYtMeta] = useState<{ title?: string; description?: string; transcript?: string } | null>(null)
+  const videoMenuRef = useRef<HTMLDivElement>(null)
+
+  // Load YouTube metadata when applicable
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!videoUrl) return setYtMeta(null)
+        const id = extractYouTubeId(videoUrl)
+        if (!id) return setYtMeta(null)
+        const locale = navigator?.language?.split('-')[0] || 'en'
+        const data = await getYouTubeMeta(id, locale)
+        if (data) setYtMeta({ title: data.title, description: data.description, transcript: data.transcript })
+      } catch {
+        setYtMeta(null)
+      }
+    })()
+  }, [videoUrl])
+
+  // Check if video is marked as watched
+  useEffect(() => {
+    const checkWatchedStatus = async () => {
+      if (!activeAccount || !videoUrl) return
+      
+      setIsCheckingWatchedStatus(true)
+      try {
+        const isWatched = relayPool ? await hasMarkedWebsiteAsRead(videoUrl, activeAccount.pubkey, relayPool) : false
+        setIsMarkedAsWatched(isWatched)
+      } catch (error) {
+        console.warn('Failed to check watched status:', error)
+      } finally {
+        setIsCheckingWatchedStatus(false)
+      }
+    }
+
+    checkWatchedStatus()
+  }, [activeAccount, videoUrl, relayPool])
+
+  // Handle click outside to close menu
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (videoMenuRef.current && !videoMenuRef.current.contains(target)) {
+        setShowVideoMenu(false)
+      }
+    }
+    
+    if (showVideoMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside)
+      }
+    }
+  }, [showVideoMenu])
+
+  // Check menu position for upward opening
+  useEffect(() => {
+    const checkMenuPosition = (menuRef: React.RefObject<HTMLDivElement>, setOpenUpward: (upward: boolean) => void) => {
+      if (!menuRef.current) return
+      
+      const rect = menuRef.current.getBoundingClientRect()
+      const viewportHeight = window.innerHeight
+      const spaceBelow = viewportHeight - rect.bottom
+      const spaceAbove = rect.top
+      
+      // Open upward if there's more space above and less space below
+      setOpenUpward(spaceAbove > spaceBelow && spaceBelow < 200)
+    }
+
+    if (showVideoMenu) {
+      checkMenuPosition(videoMenuRef, setVideoMenuOpenUpward)
+    }
+  }, [showVideoMenu])
+
+  const formatDuration = (totalSeconds: number): string => {
+    const hours = Math.floor(totalSeconds / 3600)
+    const minutes = Math.floor((totalSeconds % 3600) / 60)
+    const seconds = Math.floor(totalSeconds % 60)
+    const mm = hours > 0 ? String(minutes).padStart(2, '0') : String(minutes)
+    const ss = String(seconds).padStart(2, '0')
+    return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`
+  }
+
+  const handleMarkAsWatched = async () => {
+    if (!activeAccount || !videoUrl || isCheckingWatchedStatus) return
+
+    setIsCheckingWatchedStatus(true)
+    setShowCheckAnimation(true)
+
+    try {
+      if (isMarkedAsWatched) {
+        // Unmark as watched
+        if (relayPool) {
+          await unarchiveWebsite(videoUrl, activeAccount, relayPool)
+        }
+        setIsMarkedAsWatched(false)
+      } else {
+        // Mark as watched
+        if (relayPool) {
+          await createWebsiteReaction(videoUrl, activeAccount, relayPool)
+        }
+        setIsMarkedAsWatched(true)
+      }
+    } catch (error) {
+      console.warn('Failed to update watched status:', error)
+    } finally {
+      setIsCheckingWatchedStatus(false)
+      setTimeout(() => setShowCheckAnimation(false), 1000)
+    }
+  }
+
+  const toggleVideoMenu = () => setShowVideoMenu(v => !v)
+
+  const handleOpenVideoExternal = () => {
+    window.open(videoUrl, '_blank', 'noopener,noreferrer')
+    setShowVideoMenu(false)
+  }
+
+  const handleOpenVideoNative = () => {
+    const native = buildNativeVideoUrl(videoUrl)
+    if (native) {
+      window.location.href = native
+    } else {
+      window.location.href = videoUrl
+    }
+    setShowVideoMenu(false)
+  }
+
+  const handleCopyVideoUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(videoUrl)
+    } catch (e) {
+      console.warn('Clipboard copy failed', e)
+    } finally {
+      setShowVideoMenu(false)
+    }
+  }
+
+  const handleShareVideoUrl = async () => {
+    try {
+      if ((navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
+        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ 
+          title: ytMeta?.title || title || 'Video', 
+          url: videoUrl 
+        })
+      } else {
+        await navigator.clipboard.writeText(videoUrl)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowVideoMenu(false)
+    }
+  }
+
+  const displayTitle = ytMeta?.title || title
+  const displaySummary = ytMeta?.description || summary
+  const durationText = videoDurationSec !== null ? formatDuration(videoDurationSec) : null
+  
+  // Get video thumbnail for cover image
+  const youtubeThumbnail = getYouTubeThumbnail(videoUrl)
+  const vimeoThumbnail = getVimeoThumbnail(videoUrl)
+  const videoThumbnail = youtubeThumbnail || vimeoThumbnail
+  const displayImage = videoThumbnail || image
+
+  return (
+    <>
+      <ReaderHeader 
+        title={displayTitle}
+        image={displayImage}
+        summary={displaySummary}
+        published={published}
+        readingTimeText={durationText}
+        hasHighlights={false}
+        highlightCount={0}
+        settings={settings}
+        highlights={[]}
+        highlightVisibility={{ nostrverse: true, friends: true, mine: true }}
+        onHighlightCountClick={onOpenHighlights}
+      />
+      
+      <div className="reader-video">
+        <ReactPlayer 
+          url={videoUrl} 
+          controls 
+          width="100%"
+          height="auto"
+          style={{ 
+            width: '100%', 
+            height: 'auto', 
+            aspectRatio: '16/9' 
+          }}
+          onDuration={(d) => setVideoDurationSec(Math.floor(d))}
+        />
+      </div>
+      
+      {displaySummary && (
+        <div className="large-text" style={{ color: '#ddd', padding: '0 0.75rem', whiteSpace: 'pre-wrap', marginBottom: '0.75rem' }}>
+          {displaySummary}
+        </div>
+      )}
+      
+      {ytMeta?.transcript && (
+        <div style={{ padding: '0 0.75rem 1rem 0.75rem' }}>
+          <h3 style={{ margin: '1rem 0 0.5rem 0', fontSize: '1rem', color: '#aaa' }}>Transcript</h3>
+          <div className="large-text" style={{ whiteSpace: 'pre-wrap', color: '#ddd' }}>
+            {ytMeta.transcript}
+          </div>
+        </div>
+      )}
+      
+      <div className="article-menu-container">
+        <div className="article-menu-wrapper" ref={videoMenuRef}>
+          <button
+            className="article-menu-btn"
+            onClick={toggleVideoMenu}
+            title="More options"
+          >
+            <FontAwesomeIcon icon={faEllipsisH} />
+          </button>
+          {showVideoMenu && (
+            <div className={`article-menu ${videoMenuOpenUpward ? 'open-upward' : ''}`}>
+              <button className="article-menu-item" onClick={handleOpenVideoExternal}>
+                <FontAwesomeIcon icon={faExternalLinkAlt} />
+                <span>Open Link</span>
+              </button>
+              <button className="article-menu-item" onClick={handleOpenVideoNative}>
+                <FontAwesomeIcon icon={faMobileAlt} />
+                <span>Open in Native App</span>
+              </button>
+              <button className="article-menu-item" onClick={handleCopyVideoUrl}>
+                <FontAwesomeIcon icon={faCopy} />
+                <span>Copy URL</span>
+              </button>
+              <button className="article-menu-item" onClick={handleShareVideoUrl}>
+                <FontAwesomeIcon icon={faShare} />
+                <span>Share</span>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+      
+      {activeAccount && (
+        <div className="mark-as-read-container">
+          <button
+            className={`mark-as-read-btn ${isMarkedAsWatched ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
+            onClick={handleMarkAsWatched}
+            disabled={isCheckingWatchedStatus}
+            title={isMarkedAsWatched ? 'Already Marked as Watched' : 'Mark as Watched'}
+            style={isMarkedAsWatched ? { opacity: 0.85 } : undefined}
+          >
+            <FontAwesomeIcon 
+              icon={faCheckCircle} 
+              className={isMarkedAsWatched ? 'check-icon' : 'check-icon-empty'} 
+            />
+            <span>{isMarkedAsWatched ? 'Watched' : 'Mark as Watched'}</span>
+          </button>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default VideoView

src/hooks/useArticleLoader.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, Dispatch, SetStateAction } from 'react'
+import { useEffect, useRef, useState, Dispatch, SetStateAction } from 'react'
 import { useLocation } from 'react-router-dom'
 import { RelayPool } from 'applesauce-relay'
 import type { IEventStore } from 'applesauce-core'
@@ -6,12 +6,14 @@ import { nip19 } from 'nostr-tools'
 import { AddressPointer } from 'nostr-tools/nip19'
 import { Helpers } from 'applesauce-core'
 import { queryEvents } from '../services/dataFetch'
-import { fetchArticleByNaddr } from '../services/articleService'
+import { fetchArticleByNaddr, getFromCache, saveToCache } from '../services/articleService'
 import { fetchHighlightsForArticle } from '../services/highlightService'
+import { preloadImage } from './useImageCache'
 import { ReadableContent } from '../services/readerService'
 import { Highlight } from '../types/highlights'
 import { NostrEvent } from 'nostr-tools'
 import { UserSettings } from '../services/settingsService'
+import { useDocumentTitle } from './useDocumentTitle'
 
 interface PreviewData {
   title: string
@@ -64,30 +66,238 @@ export function useArticleLoader({
   // Extract preview data from navigation state (from blog post cards)
   const previewData = (location.state as { previewData?: PreviewData })?.previewData
   
+  // Track the current article title for document title
+  const [currentTitle, setCurrentTitle] = useState<string | undefined>()
+  useDocumentTitle({ title: currentTitle })
+  
   useEffect(() => {
     mountedRef.current = true
     
-    if (!relayPool || !naddr) return
+    // First check: naddr is required
+    if (!naddr) {
+      setReaderContent(undefined)
+      return
+    }
+    
+    // Clear readerContent immediately to prevent showing stale content from previous article
+    // This ensures images from previous articles don't flash briefly
+    setReaderContent(undefined)
+    
+    // Synchronously check cache sources BEFORE checking relayPool
+    // This prevents showing loading skeletons when content is immediately available
+    // and fixes the race condition where relayPool isn't ready yet
+    let foundInCache = false
+    try {
+      // Check localStorage cache first (synchronous, doesn't need relayPool)
+      const cachedArticle = getFromCache(naddr)
+      if (cachedArticle) {
+        foundInCache = true
+        const title = cachedArticle.title || 'Untitled Article'
+        setCurrentTitle(title)
+        setReaderContent({
+          title,
+          markdown: cachedArticle.markdown,
+          image: cachedArticle.image,
+          summary: cachedArticle.summary,
+          published: cachedArticle.published,
+          url: `nostr:${naddr}`
+        })
+        const dTag = cachedArticle.event.tags.find(t => t[0] === 'd')?.[1] || ''
+        const articleCoordinate = `${cachedArticle.event.kind}:${cachedArticle.author}:${dTag}`
+        setCurrentArticleCoordinate(articleCoordinate)
+        setCurrentArticleEventId(cachedArticle.event.id)
+        setCurrentArticle?.(cachedArticle.event)
+        setReaderLoading(false)
+        setSelectedUrl(`nostr:${naddr}`)
+        setIsCollapsed(true)
+        
+        // Preload image if available to ensure it's cached by Service Worker
+        // This ensures images are available when offline
+        if (cachedArticle.image) {
+          preloadImage(cachedArticle.image)
+        }
+        
+        // Store in EventStore for future lookups
+        if (eventStore) {
+          try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            eventStore.add?.(cachedArticle.event as unknown as any)
+          } catch {
+            // Silently ignore store errors
+          }
+        }
+        
+        // Fetch highlights in background (don't block UI)
+        // Only fetch highlights if relayPool is available
+        if (mountedRef.current && relayPool) {
+          const dTag = cachedArticle.event.tags.find((t: string[]) => t[0] === 'd')?.[1] || ''
+          const coord = dTag ? `${cachedArticle.event.kind}:${cachedArticle.author}:${dTag}` : undefined
+          const eventId = cachedArticle.event.id
+          
+          if (coord && eventId) {
+            setHighlightsLoading(true)
+            fetchHighlightsForArticle(
+              relayPool,
+              coord,
+              eventId,
+              (highlight) => {
+                if (!mountedRef.current) return
+                setHighlights((prev: Highlight[]) => {
+                  if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
+                  const next = [highlight, ...prev]
+                  return next.sort((a, b) => b.created_at - a.created_at)
+                })
+              },
+              settings,
+              false,
+              eventStore || undefined
+            ).then(() => {
+              if (mountedRef.current) {
+                setHighlightsLoading(false)
+              }
+            }).catch(() => {
+              if (mountedRef.current) {
+                setHighlightsLoading(false)
+              }
+            })
+          }
+        }
+        
+        // Return early - we have cached content, no need to query relays
+        return
+      }
+    } catch (err) {
+      // If cache check fails, fall through to async loading
+      console.warn('[article-loader] Cache check failed:', err)
+    }
+    
+    // Check EventStore synchronously (also doesn't need relayPool)
+    let foundInEventStore = false
+    if (eventStore && !foundInCache) {
+      try {
+        // Decode naddr to get the coordinate
+        const decoded = nip19.decode(naddr)
+        if (decoded.type === 'naddr') {
+          const pointer = decoded.data as AddressPointer
+          const coordinate = `${pointer.kind}:${pointer.pubkey}:${pointer.identifier}`
+          const storedEvent = eventStore.getEvent?.(coordinate)
+          if (storedEvent) {
+            foundInEventStore = true
+            const title = Helpers.getArticleTitle(storedEvent) || 'Untitled Article'
+            setCurrentTitle(title)
+            const image = Helpers.getArticleImage(storedEvent)
+            const summary = Helpers.getArticleSummary(storedEvent)
+            const published = Helpers.getArticlePublished(storedEvent)
+            setReaderContent({
+              title,
+              markdown: storedEvent.content,
+              image,
+              summary,
+              published,
+              url: `nostr:${naddr}`
+            })
+            const dTag = storedEvent.tags.find(t => t[0] === 'd')?.[1] || ''
+            const articleCoordinate = `${storedEvent.kind}:${storedEvent.pubkey}:${dTag}`
+            setCurrentArticleCoordinate(articleCoordinate)
+            setCurrentArticleEventId(storedEvent.id)
+            setCurrentArticle?.(storedEvent)
+            setReaderLoading(false)
+            setSelectedUrl(`nostr:${naddr}`)
+            setIsCollapsed(true)
+            
+            // Fetch highlights in background if relayPool is available
+            if (relayPool) {
+              const coord = dTag ? `${storedEvent.kind}:${storedEvent.pubkey}:${dTag}` : undefined
+              const eventId = storedEvent.id
+              
+              if (coord && eventId) {
+                setHighlightsLoading(true)
+                fetchHighlightsForArticle(
+                  relayPool,
+                  coord,
+                  eventId,
+                  (highlight) => {
+                    if (!mountedRef.current) return
+                    setHighlights((prev: Highlight[]) => {
+                      if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
+                      const next = [highlight, ...prev]
+                      return next.sort((a, b) => b.created_at - a.created_at)
+                    })
+                  },
+                  settings,
+                  false,
+                  eventStore || undefined
+                ).then(() => {
+                  if (mountedRef.current) {
+                    setHighlightsLoading(false)
+                  }
+                }).catch(() => {
+                  if (mountedRef.current) {
+                    setHighlightsLoading(false)
+                  }
+                })
+              }
+            }
+            
+            // Return early - we have EventStore content, no need to query relays yet
+            // But we might want to fetch from relays in background if relayPool becomes available
+            return
+          }
+        }
+      } catch (err) {
+        // Ignore store errors, fall through to relay query
+        console.warn('[article-loader] EventStore check failed:', err)
+      }
+    }
+    
+    // Only return early if we have no content AND no relayPool to fetch from
+    if (!relayPool && !foundInCache && !foundInEventStore) {
+      setReaderLoading(true)
+      setReaderContent(undefined)
+      return
+    }
+    
+    // If we have relayPool, proceed with async loading
+    if (!relayPool) {
+      return
+    }
     
     const loadArticle = async () => {
       const requestId = ++currentRequestIdRef.current
-      if (!mountedRef.current) return
+      
+      if (!mountedRef.current) {
+        return
+      }
       
       setSelectedUrl(`nostr:${naddr}`)
       setIsCollapsed(true)
       
-      // If we have preview data from navigation, show it immediately (no skeleton!)
+      // Don't clear highlights yet - let the smart filtering logic handle it
+      // when we know the article coordinate
+      setHighlightsLoading(false) // Don't show loading yet
+      
+      // Note: Cache and EventStore were already checked synchronously above
+      // This async function only runs if we need to fetch from relays
+
+      // At this point, we've checked EventStore and cache - neither had content
+      // Only show loading skeleton if we also don't have preview data
       if (previewData) {
+        // If we have preview data from navigation, show it immediately (no skeleton!)
+        setCurrentTitle(previewData.title)
         setReaderContent({
           title: previewData.title,
-          markdown: '', // Will be loaded from store or relay
+          markdown: '', // Will be loaded from relay
           image: previewData.image,
           summary: previewData.summary,
           published: previewData.published,
           url: `nostr:${naddr}`
         })
         setReaderLoading(false) // Turn off loading immediately - we have the preview!
+        
+        // Don't preload image here - it should already be cached from BlogPostCard
+        // Preloading again would be redundant and could cause unnecessary network requests
       } else {
+        // No cache, no EventStore, no preview data - need to load from relays
         setReaderLoading(true)
         setReaderContent(undefined)
       }
@@ -108,43 +318,15 @@ export function useArticleLoader({
         let firstEmitted = false
         let latestEvent: NostrEvent | null = null
 
-        // Check eventStore first for instant load (from bookmark cards, explore, etc.)
-        if (eventStore) {
-          try {
-            const coordinate = `${pointer.kind}:${pointer.pubkey}:${pointer.identifier}`
-            const storedEvent = eventStore.getEvent?.(coordinate)
-            if (storedEvent) {
-              latestEvent = storedEvent as NostrEvent
-              firstEmitted = true
-              const title = Helpers.getArticleTitle(storedEvent) || 'Untitled Article'
-              const image = Helpers.getArticleImage(storedEvent)
-              const summary = Helpers.getArticleSummary(storedEvent)
-              const published = Helpers.getArticlePublished(storedEvent)
-              setReaderContent({
-                title,
-                markdown: storedEvent.content,
-                image,
-                summary,
-                published,
-                url: `nostr:${naddr}`
-              })
-              const dTag = storedEvent.tags.find(t => t[0] === 'd')?.[1] || ''
-              const articleCoordinate = `${storedEvent.kind}:${storedEvent.pubkey}:${dTag}`
-              setCurrentArticleCoordinate(articleCoordinate)
-              setCurrentArticleEventId(storedEvent.id)
-              setCurrentArticle?.(storedEvent)
-              setReaderLoading(false)
-            }
-          } catch (err) {
-            // Ignore store errors, fall through to relay query
-          }
-        }
-
         // Stream local-first via queryEvents; rely on EOSE (no timeouts)
         const events = await queryEvents(relayPool, filter, {
           onEvent: (evt) => {
-            if (!mountedRef.current) return
-            if (currentRequestIdRef.current !== requestId) return
+            if (!mountedRef.current) {
+              return
+            }
+            if (currentRequestIdRef.current !== requestId) {
+              return
+            }
 
             // Store in event store for future local reads
             try { 
@@ -166,6 +348,8 @@ export function useArticleLoader({
               const image = Helpers.getArticleImage(evt)
               const summary = Helpers.getArticleSummary(evt)
               const published = Helpers.getArticlePublished(evt)
+              
+              setCurrentTitle(title)
               setReaderContent({
                 title,
                 markdown: evt.content,
@@ -180,11 +364,31 @@ export function useArticleLoader({
               setCurrentArticleEventId(evt.id)
               setCurrentArticle?.(evt)
               setReaderLoading(false)
+              
+              // Save to cache immediately when we get the first event
+              // Don't wait for queryEvents to complete in case it hangs
+              const articleContent = {
+                title,
+                markdown: evt.content,
+                image,
+                summary,
+                published,
+                author: evt.pubkey,
+                event: evt
+              }
+              saveToCache(naddr, articleContent, settings)
+              
+              // Preload image to ensure it's cached by Service Worker
+              if (image) {
+                preloadImage(image)
+              }
             }
           }
         })
 
-        if (!mountedRef.current || currentRequestIdRef.current !== requestId) return
+        if (!mountedRef.current || currentRequestIdRef.current !== requestId) {
+          return
+        }
 
         // Finalize with newest version if it's newer than what we first rendered
         const finalEvent = (events.sort((a, b) => b.created_at - a.created_at)[0]) || latestEvent
@@ -193,6 +397,8 @@ export function useArticleLoader({
           const image = Helpers.getArticleImage(finalEvent)
           const summary = Helpers.getArticleSummary(finalEvent)
           const published = Helpers.getArticlePublished(finalEvent)
+          
+          setCurrentTitle(title)
           setReaderContent({
             title,
             markdown: finalEvent.content,
@@ -207,10 +413,28 @@ export function useArticleLoader({
           setCurrentArticleCoordinate(articleCoordinate)
           setCurrentArticleEventId(finalEvent.id)
           setCurrentArticle?.(finalEvent)
+          
+          // Save to cache for future loads (if we haven't already saved from first event)
+          // Only save if this is a different/newer event than what we first rendered
+          // Note: We already saved from first event, so only save if this is different
+          if (!firstEmitted) {
+            // First event wasn't emitted, so save now
+            const articleContent = {
+              title,
+              markdown: finalEvent.content,
+              image,
+              summary,
+              published,
+              author: finalEvent.pubkey,
+              event: finalEvent
+            }
+            saveToCache(naddr, articleContent)
+          }
         } else {
           // As a last resort, fall back to the legacy helper (which includes cache)
           const article = await fetchArticleByNaddr(relayPool, naddr, false, settingsRef.current)
           if (!mountedRef.current || currentRequestIdRef.current !== requestId) return
+          setCurrentTitle(article.title)
           setReaderContent({
             title: article.title,
             markdown: article.markdown,
@@ -237,7 +461,13 @@ export function useArticleLoader({
           
           if (coord && eventId) {
             setHighlightsLoading(true)
-            setHighlights([])
+            // Clear highlights that don't belong to this article coordinate
+            setHighlights((prev) => {
+              return prev.filter(h => {
+                // Keep highlights that match this article coordinate or event ID
+                return h.eventReference === coord || h.eventReference === eventId
+              })
+            })
             await fetchHighlightsForArticle(
               relayPool,
               coord,
@@ -251,7 +481,9 @@ export function useArticleLoader({
                   return next.sort((a, b) => b.created_at - a.created_at)
                 })
               },
-              settingsRef.current
+              settingsRef.current,
+              false, // force
+              eventStore || undefined
             )
           } else {
             // No article event to fetch highlights for - clear and don't show loading
@@ -283,19 +515,13 @@ export function useArticleLoader({
     return () => {
       mountedRef.current = false
     }
+    // Include relayPool in dependencies so effect re-runs when it becomes available
+    // This fixes the race condition where articles don't load on direct navigation
+    // We guard against unnecessary re-renders by checking cache/EventStore first
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     naddr,
-    relayPool,
-    eventStore,
     previewData,
-    setSelectedUrl,
-    setReaderContent,
-    setReaderLoading,
-    setIsCollapsed,
-    setHighlights,
-    setHighlightsLoading,
-    setCurrentArticleCoordinate,
-    setCurrentArticleEventId,
-    setCurrentArticle
+    relayPool
   ])
 }

src/hooks/useDocumentTitle.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react'
+
+const DEFAULT_TITLE = 'Boris - Read, Highlight, Explore'
+
+interface UseDocumentTitleProps {
+  title?: string
+  fallback?: string
+}
+
+export function useDocumentTitle({ title, fallback }: UseDocumentTitleProps) {
+  const originalTitleRef = useRef<string>(document.title)
+
+  useEffect(() => {
+    // Store the original title on first mount
+    if (originalTitleRef.current === DEFAULT_TITLE) {
+      originalTitleRef.current = document.title
+    }
+
+    // Set the new title if provided, otherwise use fallback or default
+    const newTitle = title || fallback || DEFAULT_TITLE
+    document.title = newTitle
+
+    // Cleanup: restore original title when component unmounts
+    return () => {
+      document.title = originalTitleRef.current
+    }
+  }, [title, fallback])
+
+  // Return a function to manually reset to default
+  const resetTitle = () => {
+    document.title = DEFAULT_TITLE
+  }
+
+  return { resetTitle }
+}

src/hooks/useEventLoader.ts

@@ -1,10 +1,13 @@
-import { useEffect, useCallback } from 'react'
+import { useEffect, useCallback, useState } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { NostrEvent } from 'nostr-tools'
 import { ReadableContent } from '../services/readerService'
 import { eventManager } from '../services/eventManager'
 import { fetchProfiles } from '../services/profileService'
+import { useDocumentTitle } from './useDocumentTitle'
+import { getNpubFallbackDisplay } from '../utils/nostrUriResolver'
+import { extractProfileDisplayName } from '../utils/profileUtils'
 
 interface UseEventLoaderProps {
   eventId?: string
@@ -25,6 +28,9 @@ export function useEventLoader({
   setReaderLoading,
   setIsCollapsed
 }: UseEventLoaderProps) {
+  // Track the current event title for document title
+  const [currentTitle, setCurrentTitle] = useState<string | undefined>()
+  useDocumentTitle({ title: currentTitle })
   const displayEvent = useCallback((event: NostrEvent) => {
     // Escape HTML in content and convert newlines to breaks for plain text display
     const escapedContent = event.content
@@ -36,7 +42,7 @@ export function useEventLoader({
     // Initial title
     let title = `Note (${event.kind})`
     if (event.kind === 1) {
-      title = `Note by @${event.pubkey.slice(0, 8)}...`
+      title = `Note by ${getNpubFallbackDisplay(event.pubkey)}`
     }
 
     // Emit immediately
@@ -46,6 +52,7 @@ export function useEventLoader({
       title,
       published: event.created_at
     }
+    setCurrentTitle(title)
     setReaderContent(baseContent)
 
     // Background: resolve author profile for kind:1 and update title
@@ -57,11 +64,12 @@ export function useEventLoader({
           // First, try to get from event store cache
           const storedProfile = eventStore.getEvent(event.pubkey + ':0')
           if (storedProfile) {
-            try {
-              const obj = JSON.parse(storedProfile.content || '{}') as { name?: string; display_name?: string; nip05?: string }
-              resolved = obj.display_name || obj.name || obj.nip05 || ''
-            } catch {
-              // ignore parse errors
+            const displayName = extractProfileDisplayName(storedProfile as NostrEvent)
+            if (displayName && !displayName.startsWith('@')) {
+              // Remove @ prefix if present (we'll add it when displaying)
+              resolved = displayName
+            } else if (displayName) {
+              resolved = displayName.substring(1) // Remove @ prefix
             }
           }
 
@@ -70,17 +78,19 @@ export function useEventLoader({
             const profiles = await fetchProfiles(relayPool, eventStore as unknown as IEventStore, [event.pubkey])
             if (profiles && profiles.length > 0) {
               const latest = profiles.sort((a, b) => (b.created_at || 0) - (a.created_at || 0))[0]
-              try {
-                const obj = JSON.parse(latest.content || '{}') as { name?: string; display_name?: string; nip05?: string }
-                resolved = obj.display_name || obj.name || obj.nip05 || ''
-              } catch {
-                // ignore parse errors
+              const displayName = extractProfileDisplayName(latest)
+              if (displayName && !displayName.startsWith('@')) {
+                resolved = displayName
+              } else if (displayName) {
+                resolved = displayName.substring(1) // Remove @ prefix
               }
             }
           }
-
+          
           if (resolved) {
-            setReaderContent({ ...baseContent, title: `Note by @${resolved}` })
+            const updatedTitle = `Note by @${resolved}`
+            setCurrentTitle(updatedTitle)
+            setReaderContent({ ...baseContent, title: updatedTitle })
           }
         } catch {
           // ignore profile failures; keep fallback title
@@ -119,6 +129,7 @@ export function useEventLoader({
             html: `<div style="padding: 1rem; color: var(--color-error, red);">Failed to load event: ${err instanceof Error ? err.message : 'Unknown error'}</div>`,
             title: 'Error'
           }
+          setCurrentTitle('Error')
           setReaderContent(errorContent)
           setReaderLoading(false)
         }

src/hooks/useExternalUrlLoader.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useMemo } from 'react'
+import { useEffect, useRef, useMemo, useState } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { fetchReadableContent, ReadableContent } from '../services/readerService'
@@ -7,6 +7,7 @@ import { Highlight } from '../types/highlights'
 import { useStoreTimeline } from './useStoreTimeline'
 import { eventToHighlight } from '../services/highlightEventProcessor'
 import { KINDS } from '../config/kinds'
+import { useDocumentTitle } from './useDocumentTitle'
 
 // Helper to extract filename from URL
 function getFilenameFromUrl(url: string): string {
@@ -52,6 +53,10 @@ export function useExternalUrlLoader({
   // Track in-flight request to prevent stale updates when switching quickly
   const currentRequestIdRef = useRef(0)
   
+  // Track the current content title for document title
+  const [currentTitle, setCurrentTitle] = useState<string | undefined>()
+  useDocumentTitle({ title: currentTitle })
+  
   // Load cached URL-specific highlights from event store
   const urlFilter = useMemo(() => {
     if (!url) return null
@@ -88,6 +93,7 @@ export function useExternalUrlLoader({
         if (!mountedRef.current) return
         if (currentRequestIdRef.current !== requestId) return
         
+        setCurrentTitle(content.title)
         setReaderContent(content)
         setReaderLoading(false)
         
@@ -159,19 +165,12 @@ export function useExternalUrlLoader({
     return () => {
       mountedRef.current = false
     }
+    // Dependencies intentionally excluded to prevent re-renders when relay/eventStore state changes
+    // This fixes the loading skeleton appearing when going offline (flight mode)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     url,
-    relayPool,
-    eventStore,
-    cachedUrlHighlights,
-    setReaderContent,
-    setReaderLoading,
-    setIsCollapsed,
-    setSelectedUrl,
-    setHighlights,
-    setCurrentArticleCoordinate,
-    setCurrentArticleEventId,
-    setHighlightsLoading
+    cachedUrlHighlights
   ])
 
   // Keep UI highlights synced with cached store updates without reloading content

src/hooks/useFilteredHighlights.ts

@@ -3,6 +3,7 @@ import { Highlight } from '../types/highlights'
 import { HighlightVisibility } from '../components/HighlightsPanel'
 import { normalizeUrl } from '../utils/urlHelpers'
 import { classifyHighlights } from '../utils/highlightClassification'
+import { nip19 } from 'nostr-tools'
 
 interface UseFilteredHighlightsParams {
   highlights: Highlight[]
@@ -24,8 +25,29 @@ export const useFilteredHighlights = ({
     
     let urlFiltered = highlights
     
-    // For Nostr articles, we already fetched highlights specifically for this article
-    if (!selectedUrl.startsWith('nostr:')) {
+    // Filter highlights based on URL type
+    if (selectedUrl.startsWith('nostr:')) {
+      // For Nostr articles, extract the article coordinate and filter by eventReference
+      try {
+        const decoded = nip19.decode(selectedUrl.replace('nostr:', ''))
+        if (decoded.type === 'naddr') {
+          const ptr = decoded.data as { kind: number; pubkey: string; identifier: string }
+          const articleCoordinate = `${ptr.kind}:${ptr.pubkey}:${ptr.identifier}`
+          
+          urlFiltered = highlights.filter(h => {
+            // Keep highlights that match this article coordinate
+            return h.eventReference === articleCoordinate
+          })
+        } else {
+          // Not a valid naddr, clear all highlights
+          urlFiltered = []
+        }
+      } catch {
+        // Invalid naddr, clear all highlights
+        urlFiltered = []
+      }
+    } else {
+      // For web URLs, filter by URL matching
       const normalizedSelected = normalizeUrl(selectedUrl)
       
       urlFiltered = highlights.filter(h => {

src/hooks/useHighlightCreation.ts

@@ -44,6 +44,7 @@ export const useHighlightCreation = ({
   }, [])
 
   const handleCreateHighlight = useCallback(async (text: string) => {
+
     if (!activeAccount || !relayPool || !eventStore) {
       console.error('Missing requirements for highlight creation')
       return
@@ -60,7 +61,6 @@ export const useHighlightCreation = ({
         ? currentArticle.content 
         : readerContent?.markdown || readerContent?.html
       
-      
       const newHighlight = await createHighlight(
         text,
         source,
@@ -73,7 +73,6 @@ export const useHighlightCreation = ({
       )
       
       // Highlight created successfully
-      
       // Clear the browser's text selection immediately to allow DOM update
       const selection = window.getSelection()
       if (selection) {

src/hooks/useHighlightInteractions.ts

@@ -93,26 +93,37 @@ export const useHighlightInteractions = ({
     return () => clearTimeout(timeoutId)
   }, [selectedHighlightId, contentVersion])
 
-  // Handle text selection (works for both mouse and touch)
-  const handleSelectionEnd = useCallback(() => {
-    setTimeout(() => {
-      const selection = window.getSelection()
-      if (!selection || selection.rangeCount === 0) {
-        onClearSelection?.()
-        return
-      }
+  // Shared function to check and handle text selection
+  const checkSelection = useCallback(() => {
+    const selection = window.getSelection()
+    if (!selection || selection.rangeCount === 0) {
+      onClearSelection?.()
+      return
+    }
 
-      const range = selection.getRangeAt(0)
-      const text = selection.toString().trim()
+    const range = selection.getRangeAt(0)
+    const text = selection.toString().trim()
 
-      if (text.length > 0 && contentRef.current?.contains(range.commonAncestorContainer)) {
-        onTextSelection?.(text)
-      } else {
-        onClearSelection?.()
-      }
-    }, 10)
+    if (text.length > 0 && contentRef.current?.contains(range.commonAncestorContainer)) {
+      onTextSelection?.(text)
+    } else {
+      onClearSelection?.()
+    }
   }, [onTextSelection, onClearSelection])
 
-  return { contentRef, handleSelectionEnd }
+  // Listen to selectionchange events for immediate detection (works reliably on mobile)
+  useEffect(() => {
+    const handleSelectionChange = () => {
+      // Use requestAnimationFrame to ensure selection is checked after browser updates
+      requestAnimationFrame(checkSelection)
+    }
+
+    document.addEventListener('selectionchange', handleSelectionChange)
+    return () => {
+      document.removeEventListener('selectionchange', handleSelectionChange)
+    }
+  }, [checkSelection])
+
+  return { contentRef }
 }
 

src/hooks/useImageCache.ts

@@ -10,6 +10,8 @@ export function useImageCache(
   imageUrl: string | undefined
 ): string | undefined {
   // Service Worker handles everything - just return the URL as-is
+  // The Service Worker will intercept fetch requests and cache them
+  // Make sure images use standard <img src> tags for SW interception
   return imageUrl
 }
 
@@ -26,3 +28,26 @@ export function useCacheImageOnLoad(
   void imageUrl
 }
 
+/**
+ * Preload an image URL to ensure it's cached by the Service Worker
+ * This is useful when loading content from cache - we want to ensure
+ * images are cached before going offline
+ */
+export function preloadImage(imageUrl: string | undefined): void {
+  if (!imageUrl) {
+    return
+  }
+  
+  // Create a link element with rel=prefetch or use Image object to trigger fetch
+  // Service Worker will intercept and cache the request
+  const img = new Image()
+  img.src = imageUrl
+  
+  // Also try using fetch to explicitly trigger Service Worker
+  // This ensures the image is cached even if <img> tag hasn't rendered yet
+  fetch(imageUrl, { mode: 'no-cors' }).catch(() => {
+    // Ignore errors - image might not be CORS-enabled, but SW will still cache it
+    // The Image() approach above will work for most cases
+  })
+}
+

src/hooks/useMarkdownToHTML.ts

@@ -1,7 +1,8 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { RelayPool } from 'applesauce-relay'
-import { extractNaddrUris, replaceNostrUrisInMarkdown, replaceNostrUrisInMarkdownWithTitles } from '../utils/nostrUriResolver'
+import { extractNaddrUris, replaceNostrUrisInMarkdownWithProfileLabels, addLoadingClassToProfileLinks } from '../utils/nostrUriResolver'
 import { fetchArticleTitles } from '../services/articleTitleResolver'
+import { useProfileLabels } from './useProfileLabels'
 
 /**
  * Hook to convert markdown to HTML using a hidden ReactMarkdown component
@@ -18,58 +19,129 @@ export const useMarkdownToHTML = (
   const previewRef = useRef<HTMLDivElement>(null)
   const [renderedHtml, setRenderedHtml] = useState<string>('')
   const [processedMarkdown, setProcessedMarkdown] = useState<string>('')
+  const [articleTitles, setArticleTitles] = useState<Map<string, string>>(new Map())
 
+  // Resolve profile labels progressively as profiles load
+  const { labels: profileLabels, loading: profileLoading } = useProfileLabels(markdown || '', relayPool)
+  
+  // Create stable dependencies based on Map contents, not Map objects
+  // This prevents unnecessary reprocessing when Maps are recreated with same content
+  const profileLabelsKey = useMemo(() => {
+    const key = Array.from(profileLabels.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => `${k}:${v}`).join('|')
+    return key
+  }, [profileLabels])
+  
+  const profileLoadingKey = useMemo(() => {
+    return Array.from(profileLoading.entries())
+      .filter(([, loading]) => loading)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([k]) => k)
+      .join('|')
+  }, [profileLoading])
+  
+  const articleTitlesKey = useMemo(() => {
+    return Array.from(articleTitles.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => `${k}:${v}`).join('|')
+  }, [articleTitles])
+  
+  // Keep refs to latest Maps for processing without causing re-renders
+  const profileLabelsRef = useRef(profileLabels)
+  const profileLoadingRef = useRef(profileLoading)
+  const articleTitlesRef = useRef(articleTitles)
+  
+  // Ref to track second RAF ID for HTML extraction cleanup
+  const htmlExtractionRafIdRef = useRef<number | null>(null)
+  
   useEffect(() => {
-    // Always clear previous render immediately to avoid showing stale content while processing
-    setRenderedHtml('')
-    setProcessedMarkdown('')
-    
-    if (!markdown) {
+    profileLabelsRef.current = profileLabels
+    profileLoadingRef.current = profileLoading
+    articleTitlesRef.current = articleTitles
+  }, [profileLabels, profileLoading, articleTitles])
+
+  // Fetch article titles
+  useEffect(() => {
+    if (!markdown || !relayPool) {
+      setArticleTitles(new Map())
       return
     }
 
     let isCancelled = false
 
-    const processMarkdown = async () => {
-      // Extract all naddr references
+    const fetchTitles = async () => {
       const naddrs = extractNaddrUris(markdown)
-      
-      let processed: string
-      
-      if (naddrs.length > 0 && relayPool) {
-        // Fetch article titles for all naddrs
-        try {
-          const articleTitles = await fetchArticleTitles(relayPool, naddrs)
-          
-          if (isCancelled) return
-          
-          // Replace nostr URIs with resolved titles
-          processed = replaceNostrUrisInMarkdownWithTitles(markdown, articleTitles)
-        } catch (error) {
-          console.warn('Failed to fetch article titles:', error)
-          // Fall back to basic replacement
-          processed = replaceNostrUrisInMarkdown(markdown)
-        }
-      } else {
-        // No articles to resolve, use basic replacement
-        processed = replaceNostrUrisInMarkdown(markdown)
+      if (naddrs.length === 0) {
+        setArticleTitles(new Map())
+        return
       }
-      
-      if (isCancelled) return
-      
-      setProcessedMarkdown(processed)
 
-      
-      const rafId = requestAnimationFrame(() => {
-        if (previewRef.current && !isCancelled) {
-          const html = previewRef.current.innerHTML
-          setRenderedHtml(html)
-        } else if (!isCancelled) {
-          console.warn('⚠️ markdownPreviewRef.current is null')
+      try {
+        const titlesMap = await fetchArticleTitles(relayPool!, naddrs)
+        if (!isCancelled) {
+          setArticleTitles(titlesMap)
         }
-      })
+      } catch {
+        if (!isCancelled) setArticleTitles(new Map())
+      }
+    }
 
-      return () => cancelAnimationFrame(rafId)
+    fetchTitles()
+    return () => { isCancelled = true }
+  }, [markdown, relayPool])
+
+  // Track previous markdown and processed state to detect actual content changes
+  const previousMarkdownRef = useRef<string | undefined>(markdown)
+  const processedMarkdownRef = useRef<string>(processedMarkdown)
+  
+  useEffect(() => {
+    processedMarkdownRef.current = processedMarkdown
+  }, [processedMarkdown])
+  
+  // Process markdown with progressive profile labels and article titles
+  // Use stable string keys instead of Map objects to prevent excessive reprocessing
+  useEffect(() => {
+    if (!markdown) {
+      setRenderedHtml('')
+      setProcessedMarkdown('')
+      previousMarkdownRef.current = markdown
+      processedMarkdownRef.current = ''
+      return
+    }
+
+    let isCancelled = false
+
+    const processMarkdown = () => {
+      try {
+        // Replace nostr URIs with profile labels (progressive) and article titles
+        // Use refs to get latest values without causing dependency changes
+        const processed = replaceNostrUrisInMarkdownWithProfileLabels(
+          markdown,
+          profileLabelsRef.current,
+          articleTitlesRef.current,
+          profileLoadingRef.current
+        )
+        
+        if (isCancelled) return
+        
+        setProcessedMarkdown(processed)
+        processedMarkdownRef.current = processed
+        // HTML extraction will happen in separate useEffect that watches processedMarkdown
+      } catch (error) {
+        console.error(`[markdown-to-html] Error processing markdown:`, error)
+        if (!isCancelled) {
+          setProcessedMarkdown(markdown) // Fallback to original
+          processedMarkdownRef.current = markdown
+        }
+      }
+    }
+
+    // Only clear previous content if this is the first processing or markdown changed
+    // For profile updates, just reprocess without clearing to avoid flicker
+    const isMarkdownChange = previousMarkdownRef.current !== markdown
+    previousMarkdownRef.current = markdown
+    
+    if (isMarkdownChange || !processedMarkdownRef.current) {
+      setRenderedHtml('')
+      setProcessedMarkdown('')
+      processedMarkdownRef.current = ''
     }
 
     processMarkdown()
@@ -77,7 +149,44 @@ export const useMarkdownToHTML = (
     return () => {
       isCancelled = true
     }
-  }, [markdown, relayPool])
+  }, [markdown, profileLabelsKey, profileLoadingKey, articleTitlesKey])
+
+  // Extract HTML after processedMarkdown renders
+  // This useEffect watches processedMarkdown and extracts HTML once ReactMarkdown has rendered it
+  useEffect(() => {
+    if (!processedMarkdown || !markdown) {
+      return
+    }
+
+    let isCancelled = false
+    
+    // Use double RAF to ensure ReactMarkdown has finished rendering:
+    // First RAF: let React complete its render cycle
+    // Second RAF: extract HTML after DOM has updated
+    const rafId1 = requestAnimationFrame(() => {
+      htmlExtractionRafIdRef.current = requestAnimationFrame(() => {
+        if (previewRef.current && !isCancelled) {
+          let html = previewRef.current.innerHTML
+          
+          // Post-process HTML to add loading class to profile links
+          html = addLoadingClassToProfileLinks(html, profileLoadingRef.current)
+          
+          setRenderedHtml(html)
+        } else if (!isCancelled && processedMarkdown) {
+          console.warn('⚠️ markdownPreviewRef.current is null but processedMarkdown exists')
+        }
+      })
+    })
+
+    return () => {
+      isCancelled = true
+      cancelAnimationFrame(rafId1)
+      if (htmlExtractionRafIdRef.current !== null) {
+        cancelAnimationFrame(htmlExtractionRafIdRef.current)
+        htmlExtractionRafIdRef.current = null
+      }
+    }
+  }, [processedMarkdown, markdown])
 
   return { renderedHtml, previewRef, processedMarkdown }
 }

src/hooks/useProfileLabels.ts

@@ -0,0 +1,324 @@
+import { useMemo, useState, useEffect, useRef, useCallback } from 'react'
+import { Hooks } from 'applesauce-react'
+import { Helpers, IEventStore } from 'applesauce-core'
+import { getContentPointers } from 'applesauce-factory/helpers'
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { fetchProfiles, loadCachedProfiles } from '../services/profileService'
+import { getNpubFallbackDisplay } from '../utils/nostrUriResolver'
+import { extractProfileDisplayName } from '../utils/profileUtils'
+
+const { getPubkeyFromDecodeResult, encodeDecodeResult } = Helpers
+
+/**
+ * Hook to resolve profile labels from content containing npub/nprofile identifiers
+ * Returns an object with labels Map and loading Map that updates progressively as profiles load
+ */
+export function useProfileLabels(
+  content: string, 
+  relayPool?: RelayPool | null
+): { labels: Map<string, string>; loading: Map<string, boolean> } {
+  const eventStore = Hooks.useEventStore()
+  
+  // Extract profile pointers (npub and nprofile) using applesauce helpers
+  const profileData = useMemo(() => {
+      try {
+        const pointers = getContentPointers(content)
+        const filtered = pointers.filter(p => p.type === 'npub' || p.type === 'nprofile')
+      const result: Array<{ pubkey: string; encoded: string }> = []
+      filtered.forEach(pointer => {
+        try {
+          const pubkey = getPubkeyFromDecodeResult(pointer)
+          const encoded = encodeDecodeResult(pointer)
+          if (pubkey && encoded) {
+            result.push({ pubkey, encoded: encoded as string })
+          }
+        } catch {
+          // Ignore errors, continue processing other pointers
+        }
+      })
+      return result
+    } catch (error) {
+      console.warn(`[profile-labels] Error extracting profile pointers:`, error)
+      return []
+    }
+  }, [content])
+
+  // Initialize labels synchronously from cache on first render to avoid delay
+  // Use pubkey (hex) as the key instead of encoded string for canonical identification
+  const initialLabels = useMemo(() => {
+    if (profileData.length === 0) {
+      return new Map<string, string>()
+    }
+    
+    const allPubkeys = profileData.map(({ pubkey }) => pubkey)
+    const cachedProfiles = loadCachedProfiles(allPubkeys)
+    const labels = new Map<string, string>()
+    
+    profileData.forEach(({ pubkey }) => {
+      const cachedProfile = cachedProfiles.get(pubkey)
+      if (cachedProfile) {
+        const displayName = extractProfileDisplayName(cachedProfile)
+        if (displayName) {
+          // Add @ prefix (extractProfileDisplayName returns name without @)
+          const label = `@${displayName}`
+          labels.set(pubkey, label)
+        } else {
+          // Use fallback npub display if profile has no name (add @ prefix)
+          const fallback = getNpubFallbackDisplay(pubkey)
+          labels.set(pubkey, `@${fallback}`)
+        }
+      }
+    })
+    
+    return labels
+  }, [profileData])
+
+  const [profileLabels, setProfileLabels] = useState<Map<string, string>>(initialLabels)
+  const [profileLoading, setProfileLoading] = useState<Map<string, boolean>>(new Map())
+  
+  // Batching strategy: Collect profile updates and apply them in batches via RAF to prevent UI flicker
+  // when many profiles resolve simultaneously. We use refs to avoid stale closures in async callbacks.
+  // Use pubkey (hex) as the key for canonical identification
+  const pendingUpdatesRef = useRef<Map<string, string>>(new Map())
+  const rafScheduledRef = useRef<number | null>(null)
+  
+  /**
+   * Helper to apply pending batched updates to state
+   * Cancels any scheduled RAF and applies updates synchronously
+   */
+  const applyPendingUpdates = () => {
+    const pendingUpdates = pendingUpdatesRef.current
+    if (pendingUpdates.size === 0) {
+      return
+    }
+    
+    // Cancel scheduled RAF since we're applying synchronously
+    if (rafScheduledRef.current !== null) {
+      cancelAnimationFrame(rafScheduledRef.current)
+      rafScheduledRef.current = null
+    }
+    
+    // Apply all pending updates in one batch
+    setProfileLabels(prevLabels => {
+      const updatedLabels = new Map(prevLabels)
+      for (const [pubkey, label] of pendingUpdates.entries()) {
+        updatedLabels.set(pubkey, label)
+      }
+      pendingUpdates.clear()
+      return updatedLabels
+    })
+  }
+  
+  /**
+   * Helper to schedule a batched update via RAF (if not already scheduled)
+   * This prevents multiple RAF calls when many profiles resolve at once
+   * Wrapped in useCallback for stable reference in dependency arrays
+   */
+  const scheduleBatchedUpdate = useCallback(() => {
+    if (rafScheduledRef.current === null) {
+      rafScheduledRef.current = requestAnimationFrame(() => {
+        applyPendingUpdates()
+        rafScheduledRef.current = null
+      })
+    }
+  }, []) // Empty deps: only uses refs which are stable
+  
+    // Sync state when initialLabels changes (e.g., when content changes)
+  // This ensures we start with the correct cached labels even if profiles haven't loaded yet
+  useEffect(() => {
+    // Use a functional update to access current state without including it in dependencies
+    setProfileLabels(prevLabels => {
+      const currentPubkeys = new Set(Array.from(prevLabels.keys()))
+      const newPubkeys = new Set(profileData.map(p => p.pubkey))
+      
+      // If the content changed significantly (different set of profiles), reset state
+      const hasDifferentProfiles = 
+        currentPubkeys.size !== newPubkeys.size ||
+        !Array.from(newPubkeys).every(pk => currentPubkeys.has(pk))
+      
+      if (hasDifferentProfiles) {
+        // Clear pending updates and cancel RAF for old profiles
+        pendingUpdatesRef.current.clear()
+        if (rafScheduledRef.current !== null) {
+          cancelAnimationFrame(rafScheduledRef.current)
+          rafScheduledRef.current = null
+        }
+        // Reset to initial labels
+        return new Map(initialLabels)
+      } else {
+        // Same profiles, merge initial labels with existing state
+        // IMPORTANT: Preserve existing labels (from pending updates) and only add initial labels if missing
+        const merged = new Map(prevLabels)
+        for (const [pubkey, label] of initialLabels.entries()) {
+          // Only add initial label if we don't already have a label for this pubkey
+          // This preserves labels that were added via applyPendingUpdates
+          if (!merged.has(pubkey)) {
+            merged.set(pubkey, label)
+          }
+        }
+        return merged
+      }
+    })
+    
+    // Reset loading state when content changes significantly
+    setProfileLoading(prevLoading => {
+      const currentPubkeys = new Set(Array.from(prevLoading.keys()))
+      const newPubkeys = new Set(profileData.map(p => p.pubkey))
+      
+      const hasDifferentProfiles = 
+        currentPubkeys.size !== newPubkeys.size ||
+        !Array.from(newPubkeys).every(pk => currentPubkeys.has(pk))
+      
+      if (hasDifferentProfiles) {
+        return new Map()
+      }
+      return prevLoading
+    })
+  }, [initialLabels, profileData])
+
+  // Build initial labels: localStorage cache -> eventStore -> fetch from relays
+  useEffect(() => {
+    // Extract all pubkeys
+    const allPubkeys = profileData.map(({ pubkey }) => pubkey)
+    
+    if (allPubkeys.length === 0) {
+      setProfileLabels(new Map())
+      setProfileLoading(new Map())
+      // Clear pending updates and cancel RAF when clearing labels
+      pendingUpdatesRef.current.clear()
+      if (rafScheduledRef.current !== null) {
+        cancelAnimationFrame(rafScheduledRef.current)
+        rafScheduledRef.current = null
+      }
+      return
+    }
+    
+    // Add cached profiles to EventStore for consistency
+    const cachedProfiles = loadCachedProfiles(allPubkeys)
+    if (eventStore) {
+      for (const profile of cachedProfiles.values()) {
+        eventStore.add(profile)
+      }
+    }
+    
+    // Build labels from localStorage cache and eventStore
+    // initialLabels already has all cached profiles, so we only need to check eventStore
+    // Use pubkey (hex) as the key for canonical identification
+    const labels = new Map<string, string>(initialLabels)
+    const loading = new Map<string, boolean>()
+    
+    const pubkeysToFetch: string[] = []
+    
+    profileData.forEach(({ pubkey }) => {
+      // Skip if already resolved from initial cache
+      if (labels.has(pubkey)) {
+        loading.set(pubkey, false)
+        return
+      }
+      
+      // Check EventStore for profiles that weren't in cache
+      const eventStoreProfile = eventStore?.getEvent(pubkey + ':0')
+      
+      if (eventStoreProfile && eventStore) {
+        // Extract display name using centralized utility
+        const displayName = extractProfileDisplayName(eventStoreProfile as NostrEvent)
+        if (displayName) {
+          // Add @ prefix (extractProfileDisplayName returns name without @)
+          const label = `@${displayName}`
+          labels.set(pubkey, label)
+        } else {
+          // Use fallback npub display if profile has no name (add @ prefix)
+          const fallback = getNpubFallbackDisplay(pubkey)
+          labels.set(pubkey, `@${fallback}`)
+        }
+        loading.set(pubkey, false)
+      } else {
+      // No profile found yet, will use fallback after fetch or keep empty
+      // We'll set fallback labels for missing profiles at the end
+      // Mark as loading since we'll fetch it
+      pubkeysToFetch.push(pubkey)
+      loading.set(pubkey, true)
+      }
+    })
+    
+    // Don't set fallback labels in the Map - we'll use fallback directly when rendering
+    // This allows us to distinguish between "no label yet" (use fallback) vs "resolved label" (use Map value)
+    
+    setProfileLabels(new Map(labels))
+    setProfileLoading(new Map(loading))
+    
+    // Fetch missing profiles asynchronously with reactive updates
+    if (pubkeysToFetch.length > 0 && relayPool && eventStore) {
+      
+      // Reactive callback: collects profile updates and batches them via RAF to prevent flicker
+      // Strategy: Apply label immediately when profile resolves, but still batch for multiple profiles
+      const handleProfileEvent = (event: NostrEvent) => {
+        // Use pubkey directly as the key
+        const pubkey = event.pubkey
+        
+        // Determine the label for this profile using centralized utility
+        // Add @ prefix (both extractProfileDisplayName and getNpubFallbackDisplay return names without @)
+        const displayName = extractProfileDisplayName(event)
+        const label = displayName ? `@${displayName}` : `@${getNpubFallbackDisplay(pubkey)}`
+        
+        // Apply label immediately to prevent race condition with loading state
+        // This ensures labels are available when isLoading becomes false
+        setProfileLabels(prevLabels => {
+          const updated = new Map(prevLabels)
+          updated.set(pubkey, label)
+          return updated
+        })
+        
+        // Clear loading state for this profile when it resolves
+        setProfileLoading(prevLoading => {
+          const updated = new Map(prevLoading)
+          updated.set(pubkey, false)
+          return updated
+        })
+      }
+      
+      fetchProfiles(relayPool, eventStore as unknown as IEventStore, pubkeysToFetch, undefined, handleProfileEvent)
+        .then(() => {
+          // After EOSE: apply any remaining pending updates immediately
+          // This ensures all profile updates are applied even if RAF hasn't fired yet
+          applyPendingUpdates()
+          
+          // Clear loading state for all fetched profiles
+          setProfileLoading(prevLoading => {
+            const updated = new Map(prevLoading)
+            pubkeysToFetch.forEach(pubkey => {
+              updated.set(pubkey, false)
+            })
+            return updated
+          })
+        })
+        .catch((error) => {
+          console.error(`[profile-labels] Error fetching profiles:`, error)
+          // Silently handle fetch errors, but still clear any pending updates
+          pendingUpdatesRef.current.clear()
+          if (rafScheduledRef.current !== null) {
+            cancelAnimationFrame(rafScheduledRef.current)
+            rafScheduledRef.current = null
+          }
+          
+          // Clear loading state on error (show fallback)
+          setProfileLoading(prevLoading => {
+            const updated = new Map(prevLoading)
+            pubkeysToFetch.forEach(pubkey => {
+              updated.set(pubkey, false)
+            })
+            return updated
+          })
+        })
+      
+      // Cleanup: apply any pending updates before unmount to avoid losing them
+      return () => {
+        applyPendingUpdates()
+      }
+    }
+  }, [profileData, eventStore, relayPool, initialLabels, scheduleBatchedUpdate])
+  
+  return { labels: profileLabels, loading: profileLoading }
+}
+

src/hooks/useSettings.ts

@@ -71,8 +71,9 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       // Set paragraph alignment
       root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify')
       
-      // Set image max-width based on full-width setting
-      root.setProperty('--image-max-width', settings.fullWidthImages ? 'none' : '100%')
+      // Set image width and max-height based on full-width setting
+      root.setProperty('--image-width', settings.fullWidthImages ? '100%' : 'auto')
+      root.setProperty('--image-max-height', settings.fullWidthImages ? 'none' : '70vh')
       
     }
     

src/main.tsx

@@ -5,16 +5,60 @@ import './styles/tailwind.css'
 import './index.css'
 import 'react-loading-skeleton/dist/skeleton.css'
 
-// Register Service Worker for PWA functionality (production only)
-if ('serviceWorker' in navigator && import.meta.env.PROD) {
+// Register Service Worker for PWA functionality
+// With injectRegister: null, we need to register manually
+// With devOptions.enabled: true, vite-plugin-pwa serves SW in dev mode too
+if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {
-    navigator.serviceWorker
-      .register('/sw.js')
+    const swPath = '/sw.js'
+    
+    // Check if already registered/active first
+    navigator.serviceWorker.getRegistrations().then(async (registrations) => {
+      if (registrations.length > 0) {
+        return registrations[0]
+      }
+      
+      // Not registered yet, try to register
+      // In dev mode, use the dev Service Worker for testing
+      if (import.meta.env.DEV) {
+        const devSwPath = '/sw-dev.js'
+        try {
+          // Check if dev SW exists
+          const response = await fetch(devSwPath)
+          const contentType = response.headers.get('content-type') || ''
+          const isJavaScript = contentType.includes('javascript') || contentType.includes('application/javascript')
+          
+          if (response.ok && isJavaScript) {
+            return await navigator.serviceWorker.register(devSwPath, { scope: '/' })
+          } else {
+            console.warn('[sw-registration] Development Service Worker not available')
+            return null
+          }
+        } catch (err) {
+          console.warn('[sw-registration] Could not load development Service Worker:', err)
+          return null
+        }
+      } else {
+        // In production, just register directly
+        return await navigator.serviceWorker.register(swPath)
+      }
+    })
       .then(registration => {
-        // Check for updates periodically
-        setInterval(() => {
-          registration.update()
-        }, 60 * 60 * 1000) // Check every hour
+        if (!registration) return
+        
+        // Wait for Service Worker to activate
+        if (registration.installing) {
+          registration.installing.addEventListener('statechange', () => {
+            // Service Worker state changed
+          })
+        }
+        
+        // Check for updates periodically (production only)
+        if (import.meta.env.PROD) {
+          setInterval(() => {
+            registration.update()
+          }, 60 * 60 * 1000) // Check every hour
+        }
         
         // Handle service worker updates
         registration.addEventListener('updatefound', () => {
@@ -31,9 +75,22 @@ if ('serviceWorker' in navigator && import.meta.env.PROD) {
         })
       })
       .catch(error => {
-        console.error('❌ Service Worker registration failed:', error)
+        console.error('[sw-registration] ❌ Service Worker registration failed:', error)
+        console.error('[sw-registration] Error details:', {
+          message: error.message,
+          name: error.name,
+          stack: error.stack
+        })
+        
+        // In dev mode, this is expected if vite-plugin-pwa isn't serving the SW
+        if (import.meta.env.DEV) {
+          console.warn('[sw-registration] ⚠️ This is expected in dev mode if vite-plugin-pwa is not serving the SW file')
+          console.warn('[sw-registration] Image caching will not work in dev mode - test in production build')
+        }
       })
   })
+} else {
+  console.warn('[sw-registration] ⚠️ Service Workers not supported in this browser')
 }
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

src/services/articleService.ts

@@ -34,11 +34,13 @@ function getCacheKey(naddr: string): string {
   return `${CACHE_PREFIX}${naddr}`
 }
 
-function getFromCache(naddr: string): ArticleContent | null {
+export function getFromCache(naddr: string): ArticleContent | null {
   try {
     const cacheKey = getCacheKey(naddr)
     const cached = localStorage.getItem(cacheKey)
-    if (!cached) return null
+    if (!cached) {
+      return null
+    }
 
     const { content, timestamp }: CachedArticle = JSON.parse(cached)
     const age = Date.now() - timestamp
@@ -49,12 +51,51 @@ function getFromCache(naddr: string): ArticleContent | null {
     }
 
     return content
-  } catch {
+  } catch (err) {
+    // Silently handle cache read errors
     return null
   }
 }
 
-function saveToCache(naddr: string, content: ArticleContent): void {
+/**
+ * Caches an article event to localStorage for offline access
+ * @param event - The Nostr event to cache
+ * @param settings - Optional user settings
+ */
+export function cacheArticleEvent(event: NostrEvent, settings?: UserSettings): void {
+  try {
+    const dTag = event.tags.find(t => t[0] === 'd')?.[1] || ''
+    if (!dTag || event.kind !== 30023) return
+
+    const naddr = nip19.naddrEncode({
+      kind: 30023,
+      pubkey: event.pubkey,
+      identifier: dTag
+    })
+    
+    const articleContent: ArticleContent = {
+      title: getArticleTitle(event) || 'Untitled Article',
+      markdown: event.content,
+      image: getArticleImage(event),
+      published: getArticlePublished(event),
+      summary: getArticleSummary(event),
+      author: event.pubkey,
+      event
+    }
+    
+    saveToCache(naddr, articleContent, settings)
+  } catch (err) {
+    // Silently fail cache saves - quota exceeded, invalid data, etc.
+  }
+}
+
+export function saveToCache(naddr: string, content: ArticleContent, settings?: UserSettings): void {
+  // Respect user settings: if image caching is disabled, we could skip article caching too
+  // However, for offline-first design, we default to caching unless explicitly disabled
+  // Future: could add explicit enableArticleCache setting
+  // For now, we cache aggressively but handle errors gracefully
+  // Note: settings parameter reserved for future use
+  void settings // Mark as intentionally unused for now
   try {
     const cacheKey = getCacheKey(naddr)
     const cached: CachedArticle = {
@@ -63,8 +104,8 @@ function saveToCache(naddr: string, content: ArticleContent): void {
     }
     localStorage.setItem(cacheKey, JSON.stringify(cached))
   } catch (err) {
-    console.warn('Failed to cache article:', err)
-    // Silently fail if storage is full or unavailable
+    // Silently fail - don't block the UI if caching fails
+    // Handles quota exceeded, invalid data, and other errors gracefully
   }
 }
 
@@ -164,7 +205,7 @@ export async function fetchArticleByNaddr(
     }
 
     // Save to cache before returning
-    saveToCache(naddr, content)
+    saveToCache(naddr, content, settings)
     
     // Image caching is handled automatically by Service Worker
     

src/services/exploreService.ts

@@ -3,6 +3,7 @@ import { NostrEvent } from 'nostr-tools'
 import { Helpers, IEventStore } from 'applesauce-core'
 import { queryEvents } from './dataFetch'
 import { KINDS } from '../config/kinds'
+import { cacheArticleEvent } from './articleService'
 
 const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
@@ -75,6 +76,9 @@ export const fetchBlogPostsFromAuthors = async (
               }
               onPost(post)
             }
+            
+            // Cache article content in localStorage for offline access
+            cacheArticleEvent(event)
           }
         }
       }
@@ -105,7 +109,6 @@ export const fetchBlogPostsFromAuthors = async (
         return timeB - timeA // Most recent first
       })
     
-    
     return blogPosts
   } catch (error) {
     console.error('Failed to fetch blog posts:', error)

src/services/highlightCreationService.ts

@@ -7,13 +7,22 @@ import { Helpers, IEventStore } from 'applesauce-core'
 import { RELAYS } from '../config/relays'
 import { Highlight } from '../types/highlights'
 import { UserSettings } from './settingsService'
-import { isLocalRelay, areAllRelaysLocal } from '../utils/helpers'
-import { publishEvent } from './writeService'
+import { isLocalRelay } from '../utils/helpers'
+import { setHighlightMetadata } from './highlightEventProcessor'
 
 // Boris pubkey for zap splits
 // npub19802see0gnk3vjlus0dnmfdagusqrtmsxpl5yfmkwn9uvnfnqylqduhr0x
 export const BORIS_PUBKEY = '29dea8672f44ed164bfc83db3da5bd472001af70307f42277674cbc64d33013e'
 
+// Extended event type with highlight metadata
+interface HighlightEvent extends NostrEvent {
+  __highlightProps?: {
+    publishedRelays?: string[]
+    isLocalOnly?: boolean
+    isSyncing?: boolean
+  }
+}
+
 const {
   getHighlightText,
   getHighlightContext,
@@ -118,25 +127,111 @@ export async function createHighlight(
   // Sign the event
   const signedEvent = await factory.sign(highlightEvent)
 
-  // Use unified write service to store and publish
-  await publishEvent(relayPool, eventStore, signedEvent)
+  // Initialize custom properties on the event (will be updated after publishing)
+  ;(signedEvent as HighlightEvent).__highlightProps = {
+    publishedRelays: [],
+    isLocalOnly: false,
+    isSyncing: false
+  }
 
-  // Check current connection status for UI feedback
+  // Get only connected relays to avoid long timeouts
   const connectedRelays = Array.from(relayPool.relays.values())
     .filter(relay => relay.connected)
     .map(relay => relay.url)
+  
+  let publishResponses: { ok: boolean; message?: string; from: string }[] = []
+  let isLocalOnly = false
 
-  const hasRemoteConnection = connectedRelays.some(url => !isLocalRelay(url))
-  const expectedSuccessRelays = hasRemoteConnection
-    ? RELAYS
-    : RELAYS.filter(isLocalRelay)
-  const isLocalOnly = areAllRelaysLocal(expectedSuccessRelays)
 
-  // Convert to Highlight with relay tracking info and return IMMEDIATELY
+  try {
+    // Publish only to connected relays to avoid long timeouts
+    if (connectedRelays.length === 0) {
+      isLocalOnly = true
+    } else {
+      publishResponses = await relayPool.publish(connectedRelays, signedEvent)
+    }
+    
+    // Determine which relays successfully accepted the event
+    const successfulRelays = publishResponses
+      .filter(response => response.ok)
+      .map(response => response.from)
+    
+    const successfulLocalRelays = successfulRelays.filter(url => isLocalRelay(url))
+    const successfulRemoteRelays = successfulRelays.filter(url => !isLocalRelay(url))
+    
+    // isLocalOnly is true if only local relays accepted the event
+    isLocalOnly = successfulLocalRelays.length > 0 && successfulRemoteRelays.length === 0
+
+
+    // Handle case when no relays were connected
+    const successfulRelaysList = publishResponses.length > 0
+      ? publishResponses
+          .filter(response => response.ok)
+          .map(response => response.from)
+      : []
+
+    // Store metadata in cache (persists across EventStore serialization)
+    setHighlightMetadata(signedEvent.id, {
+      publishedRelays: successfulRelaysList,
+      isLocalOnly,
+      isSyncing: false
+    })
+
+    // Also update the event with the actual properties (for backwards compatibility)
+    ;(signedEvent as HighlightEvent).__highlightProps = {
+      publishedRelays: successfulRelaysList,
+      isLocalOnly,
+      isSyncing: false
+    }
+
+    // Store the event in EventStore AFTER updating with final properties
+    eventStore.add(signedEvent)
+
+    // Mark for offline sync if we're in local-only mode
+    if (isLocalOnly) {
+      const { markEventAsOfflineCreated } = await import('./offlineSyncService')
+      markEventAsOfflineCreated(signedEvent.id)
+    }
+
+  } catch (error) {
+    console.error('❌ [HIGHLIGHT-PUBLISH] Failed to publish highlight to relays:', error)
+    // If publishing fails completely, assume local-only mode
+    isLocalOnly = true
+    
+    // Store metadata in cache (persists across EventStore serialization)
+    setHighlightMetadata(signedEvent.id, {
+      publishedRelays: [],
+      isLocalOnly: true,
+      isSyncing: false
+    })
+    
+    // Also update the event with the error state (for backwards compatibility)
+    ;(signedEvent as HighlightEvent).__highlightProps = {
+      publishedRelays: [],
+      isLocalOnly: true,
+      isSyncing: false
+    }
+    
+    // Store the event in EventStore AFTER updating with final properties
+    eventStore.add(signedEvent)
+    
+    const { markEventAsOfflineCreated } = await import('./offlineSyncService')
+    markEventAsOfflineCreated(signedEvent.id)
+  }
+
+  // Convert to Highlight with relay tracking info
   const highlight = eventToHighlight(signedEvent)
-  highlight.publishedRelays = expectedSuccessRelays
+  
+  // Manually set the properties since __highlightProps might not be working
+  const finalPublishedRelays = publishResponses.length > 0
+    ? publishResponses
+        .filter(response => response.ok)
+        .map(response => response.from)
+    : []
+  
+  highlight.publishedRelays = finalPublishedRelays
   highlight.isLocalOnly = isLocalOnly
-  highlight.isOfflineCreated = isLocalOnly
+  highlight.isSyncing = false
 
   return highlight
 }

src/services/highlightEventProcessor.ts

@@ -2,6 +2,15 @@ import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
 import { Highlight } from '../types/highlights'
 
+// Extended event type with highlight metadata
+interface HighlightEvent extends NostrEvent {
+  __highlightProps?: {
+    publishedRelays?: string[]
+    isLocalOnly?: boolean
+    isSyncing?: boolean
+  }
+}
+
 const {
   getHighlightText,
   getHighlightContext,
@@ -12,6 +21,66 @@ const {
   getHighlightAttributions
 } = Helpers
 
+const METADATA_CACHE_KEY = 'highlightMetadataCache'
+
+type HighlightMetadata = {
+  publishedRelays?: string[]
+  isLocalOnly?: boolean
+  isSyncing?: boolean
+}
+
+/**
+ * Load highlight metadata from localStorage
+ */
+function loadHighlightMetadataFromStorage(): Map<string, HighlightMetadata> {
+  try {
+    const raw = localStorage.getItem(METADATA_CACHE_KEY)
+    if (!raw) return new Map()
+    
+    const parsed = JSON.parse(raw) as Record<string, HighlightMetadata>
+    return new Map(Object.entries(parsed))
+  } catch {
+    // Silently fail on parse errors or if storage is unavailable
+    return new Map()
+  }
+}
+
+/**
+ * Save highlight metadata to localStorage
+ */
+function saveHighlightMetadataToStorage(cache: Map<string, HighlightMetadata>): void {
+  try {
+    const record = Object.fromEntries(cache.entries())
+    localStorage.setItem(METADATA_CACHE_KEY, JSON.stringify(record))
+  } catch {
+    // Silently fail if storage is full or unavailable
+  }
+}
+
+/**
+ * Cache for highlight metadata that persists across EventStore serialization
+ * Key: event ID, Value: { publishedRelays, isLocalOnly, isSyncing }
+ */
+const highlightMetadataCache = loadHighlightMetadataFromStorage()
+
+/**
+ * Store highlight metadata for an event ID
+ */
+export function setHighlightMetadata(
+  eventId: string,
+  metadata: HighlightMetadata
+): void {
+  highlightMetadataCache.set(eventId, metadata)
+  saveHighlightMetadataToStorage(highlightMetadataCache)
+}
+
+/**
+ * Get highlight metadata for an event ID
+ */
+export function getHighlightMetadata(eventId: string): HighlightMetadata | undefined {
+  return highlightMetadataCache.get(eventId)
+}
+
 /**
  * Convert a NostrEvent to a Highlight object
  */
@@ -28,6 +97,12 @@ export function eventToHighlight(event: NostrEvent): Highlight {
   const eventReference = sourceEventPointer?.id || 
     (sourceAddressPointer ? `${sourceAddressPointer.kind}:${sourceAddressPointer.pubkey}:${sourceAddressPointer.identifier}` : undefined)
   
+  // Check cache first (persists across EventStore serialization)
+  const cachedMetadata = getHighlightMetadata(event.id)
+  
+  // Fall back to __highlightProps if cache doesn't have it (for backwards compatibility)
+  const customProps = cachedMetadata || (event as HighlightEvent).__highlightProps || {}
+  
   return {
     id: event.id,
     pubkey: event.pubkey,
@@ -38,7 +113,11 @@ export function eventToHighlight(event: NostrEvent): Highlight {
     urlReference: sourceUrl,
     author,
     context,
-    comment
+    comment,
+    // Preserve custom properties if they exist
+    publishedRelays: customProps.publishedRelays,
+    isLocalOnly: customProps.isLocalOnly,
+    isSyncing: customProps.isSyncing
   }
 }
 

src/services/highlights/fetchFromAuthors.ts

@@ -28,7 +28,7 @@ export const fetchHighlightsFromAuthors = async (
     const seenIds = new Set<string>()
     const rawEvents = await queryEvents(
       relayPool,
-      { kinds: [9802], authors: pubkeys, limit: 200 },
+      { kinds: [9802], authors: pubkeys, limit: 1000 },
       {
         onEvent: (event: NostrEvent) => {
           if (!seenIds.has(event.id)) {

src/services/imageCacheService.ts

@@ -5,7 +5,8 @@
  * Service Worker automatically caches images on fetch
  */
 
-const CACHE_NAME = 'boris-image-cache-v1'
+// Must match the cache name in src/sw.ts
+const CACHE_NAME = 'boris-images'
 
 /**
  * Clear all cached images

src/services/nostrverseHighlightsController.ts

@@ -81,13 +81,21 @@ class NostrverseHighlightsController {
     const currentGeneration = this.generation
     this.setLoading(true)
 
-    try {
-      const seenIds = new Set<string>()
-      const highlightsMap = new Map<string, Highlight>()
+  try {
+    const seenIds = new Set<string>()
+    // Start with existing highlights when doing incremental sync
+    const highlightsMap = new Map<string, Highlight>(
+      this.currentHighlights.map(h => [h.id, h])
+    )
 
-      const lastSyncedAt = force ? null : this.getLastSyncedAt()
-      const filter: { kinds: number[]; since?: number } = { kinds: [KINDS.Highlights] }
-      if (lastSyncedAt) filter.since = lastSyncedAt
+    const lastSyncedAt = force ? null : this.getLastSyncedAt()
+    const filter: { kinds: number[]; since?: number; limit?: number } = { kinds: [KINDS.Highlights] }
+    if (lastSyncedAt) {
+      filter.since = lastSyncedAt
+    } else {
+      // On initial load, fetch more highlights
+      filter.limit = 1000
+    }
 
       const events = await queryEvents(
         relayPool,
@@ -111,22 +119,24 @@ class NostrverseHighlightsController {
 
       if (currentGeneration !== this.generation) return
 
-      events.forEach(evt => eventStore.add(evt))
+    events.forEach(evt => eventStore.add(evt))
 
-      const highlights = events.map(eventToHighlight)
-      const unique = Array.from(new Map(highlights.map(h => [h.id, h])).values())
-      const sorted = sortHighlights(unique)
+    const highlights = events.map(eventToHighlight)
+    // Merge new highlights with existing ones
+    highlights.forEach(h => highlightsMap.set(h.id, h))
+    const sorted = sortHighlights(Array.from(highlightsMap.values()))
 
-      this.currentHighlights = sorted
-      this.loaded = true
-      this.emitHighlights(sorted)
+    this.currentHighlights = sorted
+    this.loaded = true
+    this.emitHighlights(sorted)
 
       if (sorted.length > 0) {
         const newest = Math.max(...sorted.map(h => h.created_at))
         this.setLastSyncedAt(newest)
       }
     } catch (err) {
-      this.currentHighlights = []
+      // On error, keep existing highlights instead of clearing them
+      console.error('[nostrverse-highlights] Failed to sync:', err)
       this.emitHighlights(this.currentHighlights)
     } finally {
       if (currentGeneration === this.generation) this.setLoading(false)

src/services/nostrverseService.ts

@@ -5,6 +5,7 @@ import { BlogPostPreview } from './exploreService'
 import { Highlight } from '../types/highlights'
 import { eventToHighlight, dedupeHighlights, sortHighlights } from './highlightEventProcessor'
 import { queryEvents } from './dataFetch'
+import { cacheArticleEvent } from './articleService'
 
 const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
@@ -57,6 +58,9 @@ export const fetchNostrverseBlogPosts = async (
               }
               onPost(post)
             }
+            
+            // Cache article content in localStorage for offline access
+            cacheArticleEvent(event)
           }
         }
       }
@@ -79,7 +83,6 @@ export const fetchNostrverseBlogPosts = async (
         return timeB - timeA // Most recent first
       })
     
-    
     return blogPosts
   } catch (error) {
     console.error('Failed to fetch nostrverse blog posts:', error)

src/services/offlineSyncService.ts

@@ -3,11 +3,42 @@ import { NostrEvent } from 'nostr-tools'
 import { IEventStore } from 'applesauce-core'
 import { RELAYS } from '../config/relays'
 import { isLocalRelay } from '../utils/helpers'
+import { setHighlightMetadata, getHighlightMetadata } from './highlightEventProcessor'
+
+const OFFLINE_EVENTS_KEY = 'offlineCreatedEvents'
 
 let isSyncing = false
 
+/**
+ * Load offline events from localStorage
+ */
+function loadOfflineEventsFromStorage(): Set<string> {
+  try {
+    const raw = localStorage.getItem(OFFLINE_EVENTS_KEY)
+    if (!raw) return new Set()
+    
+    const parsed = JSON.parse(raw) as string[]
+    return new Set(parsed)
+  } catch {
+    // Silently fail on parse errors or if storage is unavailable
+    return new Set()
+  }
+}
+
+/**
+ * Save offline events to localStorage
+ */
+function saveOfflineEventsToStorage(events: Set<string>): void {
+  try {
+    const array = Array.from(events)
+    localStorage.setItem(OFFLINE_EVENTS_KEY, JSON.stringify(array))
+  } catch {
+    // Silently fail if storage is full or unavailable
+  }
+}
+
 // Track events created during offline period
-const offlineCreatedEvents = new Set<string>()
+const offlineCreatedEvents = loadOfflineEventsFromStorage()
 
 // Track events currently being synced
 const syncingEvents = new Set<string>()
@@ -20,6 +51,14 @@ const syncStateListeners: Array<(eventId: string, isSyncing: boolean) => void> =
  */
 export function markEventAsOfflineCreated(eventId: string): void {
   offlineCreatedEvents.add(eventId)
+  saveOfflineEventsToStorage(offlineCreatedEvents)
+}
+
+/**
+ * Check if an event was created during offline period (flight mode)
+ */
+export function isEventOfflineCreated(eventId: string): boolean {
+  return offlineCreatedEvents.has(eventId)
 }
 
 /**
@@ -87,6 +126,7 @@ export async function syncLocalEventsToRemote(
     if (eventsToSync.length === 0) {
       isSyncing = false
       offlineCreatedEvents.clear()
+      saveOfflineEventsToStorage(offlineCreatedEvents)
       return
     }
 
@@ -95,10 +135,17 @@ export async function syncLocalEventsToRemote(
       new Map(eventsToSync.map(e => [e.id, e])).values()
     )
 
-    // Mark all events as syncing
+    // Mark all events as syncing and update metadata
     uniqueEvents.forEach(event => {
       syncingEvents.add(event.id)
       notifySyncStateChange(event.id, true)
+      
+      // Update metadata cache to reflect syncing state
+      const existingMetadata = getHighlightMetadata(event.id)
+      setHighlightMetadata(event.id, {
+        ...existingMetadata,
+        isSyncing: true
+      })
     })
 
     // Publish to remote relays
@@ -118,13 +165,32 @@ export async function syncLocalEventsToRemote(
       syncingEvents.delete(eventId)
       offlineCreatedEvents.delete(eventId)
       notifySyncStateChange(eventId, false)
+      
+      // Update metadata cache: sync complete, no longer local-only
+      const existingMetadata = getHighlightMetadata(eventId)
+      setHighlightMetadata(eventId, {
+        ...existingMetadata,
+        isSyncing: false,
+        isLocalOnly: false
+      })
     })
     
+    // Save updated offline events set to localStorage
+    saveOfflineEventsToStorage(offlineCreatedEvents)
+    
     // Clear syncing state for failed events
     uniqueEvents.forEach(event => {
       if (!successfulIds.includes(event.id)) {
         syncingEvents.delete(event.id)
         notifySyncStateChange(event.id, false)
+        
+        // Update metadata cache: sync failed, still local-only
+        const existingMetadata = getHighlightMetadata(event.id)
+        setHighlightMetadata(event.id, {
+          ...existingMetadata,
+          isSyncing: false
+          // Keep isLocalOnly as true (sync failed)
+        })
       }
     })
   } catch (error) {

src/services/opengraphEnhancer.ts

@@ -0,0 +1,114 @@
+import { fetch as fetchOpenGraph } from 'fetch-opengraph'
+import { ReadItem } from './readsService'
+
+// Cache for OpenGraph data to avoid repeated requests
+const ogCache = new Map<string, Record<string, unknown>>()
+
+function getCachedOgData(url: string): Record<string, unknown> | null {
+  const cached = ogCache.get(url)
+  if (!cached) return null
+  
+  return cached
+}
+
+function setCachedOgData(url: string, data: Record<string, unknown>): void {
+  ogCache.set(url, data)
+}
+
+/**
+ * Enhances a ReadItem with OpenGraph data
+ * Only fetches if the item doesn't already have good metadata
+ */
+export async function enhanceReadItemWithOpenGraph(item: ReadItem): Promise<ReadItem> {
+  // Skip if we already have good metadata
+  if (item.title && item.title !== fallbackTitleFromUrl(item.url || '') && item.image) {
+    return item
+  }
+  
+  if (!item.url) return item
+  
+  try {
+    // Check cache first
+    let ogData = getCachedOgData(item.url)
+    
+    if (!ogData) {
+      // Fetch OpenGraph data
+      const fetchedOgData = await fetchOpenGraph(item.url)
+      if (fetchedOgData) {
+        ogData = fetchedOgData
+        setCachedOgData(item.url, fetchedOgData)
+      }
+    }
+    
+    if (!ogData) return item
+    
+    // Enhance the item with OpenGraph data
+    const enhanced: ReadItem = { ...item }
+    
+    // Use OpenGraph title if we don't have a good title
+    if (!enhanced.title || enhanced.title === fallbackTitleFromUrl(item.url)) {
+      const ogTitle = ogData['og:title'] || ogData['twitter:title'] || ogData.title
+      if (typeof ogTitle === 'string') {
+        enhanced.title = ogTitle
+      }
+    }
+    
+    // Use OpenGraph description if we don't have a summary
+    if (!enhanced.summary) {
+      const ogDescription = ogData['og:description'] || ogData['twitter:description'] || ogData.description
+      if (typeof ogDescription === 'string') {
+        enhanced.summary = ogDescription
+      }
+    }
+    
+    // Use OpenGraph image if we don't have an image
+    if (!enhanced.image) {
+      const ogImage = ogData['og:image'] || ogData['twitter:image'] || ogData.image
+      if (typeof ogImage === 'string') {
+        enhanced.image = ogImage
+      }
+    }
+    
+    return enhanced
+  } catch (error) {
+    console.warn('Failed to enhance ReadItem with OpenGraph data:', error)
+    return item
+  }
+}
+
+/**
+ * Enhances multiple ReadItems with OpenGraph data in parallel
+ * Uses batching to avoid overwhelming the service
+ */
+export async function enhanceReadItemsWithOpenGraph(items: ReadItem[]): Promise<ReadItem[]> {
+  const BATCH_SIZE = 5
+  const BATCH_DELAY = 1000 // 1 second between batches
+  
+  const enhancedItems: ReadItem[] = []
+  
+  for (let i = 0; i < items.length; i += BATCH_SIZE) {
+    const batch = items.slice(i, i + BATCH_SIZE)
+    
+    // Process batch in parallel
+    const batchPromises = batch.map(item => enhanceReadItemWithOpenGraph(item))
+    const batchResults = await Promise.all(batchPromises)
+    enhancedItems.push(...batchResults)
+    
+    // Add delay between batches to be respectful to the service
+    if (i + BATCH_SIZE < items.length) {
+      await new Promise(resolve => setTimeout(resolve, BATCH_DELAY))
+    }
+  }
+  
+  return enhancedItems
+}
+
+// Helper function to generate fallback title from URL
+function fallbackTitleFromUrl(url: string): string {
+  try {
+    const urlObj = new URL(url)
+    return urlObj.hostname.replace('www.', '')
+  } catch {
+    return url
+  }
+}

src/services/profileService.ts

@@ -1,78 +1,325 @@
 import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
-import { lastValueFrom, merge, Observable, takeUntil, timer, toArray, tap } from 'rxjs'
+import { lastValueFrom, merge, Observable, toArray, tap } from 'rxjs'
 import { NostrEvent } from 'nostr-tools'
 import { IEventStore } from 'applesauce-core'
 import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
 import { rebroadcastEvents } from './rebroadcastService'
 import { UserSettings } from './settingsService'
 
+interface CachedProfile {
+  event: NostrEvent
+  timestamp: number
+  lastAccessed: number // For LRU eviction
+}
+
+const PROFILE_CACHE_TTL = 30 * 24 * 60 * 60 * 1000 // 30 days in milliseconds (profiles change less frequently than articles)
+const PROFILE_CACHE_PREFIX = 'profile_cache_'
+const MAX_CACHED_PROFILES = 1000 // Limit number of cached profiles to prevent quota issues
+let quotaExceededLogged = false // Only log quota error once per session
+
+// Request deduplication: track in-flight fetch requests by sorted pubkey array
+// Key: sorted, comma-separated pubkeys, Value: Promise for that fetch
+const inFlightRequests = new Map<string, Promise<NostrEvent[]>>()
+
+function getProfileCacheKey(pubkey: string): string {
+  return `${PROFILE_CACHE_PREFIX}${pubkey}`
+}
+
+/**
+ * Get a cached profile from localStorage
+ * Returns null if not found, expired, or on error
+ * Updates lastAccessed timestamp for LRU eviction
+ */
+export function getCachedProfile(pubkey: string): NostrEvent | null {
+  try {
+    const cacheKey = getProfileCacheKey(pubkey)
+    const cached = localStorage.getItem(cacheKey)
+    if (!cached) {
+      return null
+    }
+
+    const data: CachedProfile = JSON.parse(cached)
+    const age = Date.now() - data.timestamp
+
+    if (age > PROFILE_CACHE_TTL) {
+      localStorage.removeItem(cacheKey)
+      return null
+    }
+
+    // Update lastAccessed for LRU eviction (but don't fail if update fails)
+    try {
+      data.lastAccessed = Date.now()
+      localStorage.setItem(cacheKey, JSON.stringify(data))
+    } catch {
+      // Ignore update errors, still return the profile
+    }
+
+    return data.event
+  } catch (err) {
+    // Silently handle cache read errors (quota, invalid data, etc.)
+    return null
+  }
+}
+
+/**
+ * Get all cached profile keys for eviction
+ */
+function getAllCachedProfileKeys(): Array<{ key: string; lastAccessed: number }> {
+  const keys: Array<{ key: string; lastAccessed: number }> = []
+  try {
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i)
+      if (key && key.startsWith(PROFILE_CACHE_PREFIX)) {
+        try {
+          const cached = localStorage.getItem(key)
+          if (cached) {
+            const data: CachedProfile = JSON.parse(cached)
+            keys.push({
+              key,
+              lastAccessed: data.lastAccessed || data.timestamp || 0
+            })
+          }
+        } catch {
+          // Skip invalid entries
+        }
+      }
+    }
+  } catch {
+    // Ignore errors during enumeration
+  }
+  return keys
+}
+
+/**
+ * Evict oldest profiles (LRU) to free up space
+ * Removes the oldest accessed profiles until we're under the limit
+ */
+function evictOldProfiles(targetCount: number): void {
+  try {
+    const keys = getAllCachedProfileKeys()
+    if (keys.length <= targetCount) {
+      return
+    }
+
+    // Sort by lastAccessed (oldest first) and remove oldest
+    keys.sort((a, b) => a.lastAccessed - b.lastAccessed)
+    const toRemove = keys.slice(0, keys.length - targetCount)
+    
+    for (const { key } of toRemove) {
+      localStorage.removeItem(key)
+    }
+  } catch {
+    // Silently fail eviction
+  }
+}
+
+/**
+ * Cache a profile to localStorage
+ * Handles errors gracefully (quota exceeded, invalid data, etc.)
+ * Implements LRU eviction when cache is full
+ */
+export function cacheProfile(profile: NostrEvent): void {
+  try {
+    if (profile.kind !== 0) {
+      return // Only cache kind:0 (profile) events
+    }
+
+    const cacheKey = getProfileCacheKey(profile.pubkey)
+    
+    // Check if we need to evict before caching
+    const existingKeys = getAllCachedProfileKeys()
+    if (existingKeys.length >= MAX_CACHED_PROFILES) {
+      // Check if this profile is already cached
+      const alreadyCached = existingKeys.some(k => k.key === cacheKey)
+      if (!alreadyCached) {
+        // Evict oldest profiles to make room (keep 90% of max)
+        evictOldProfiles(Math.floor(MAX_CACHED_PROFILES * 0.9))
+      }
+    }
+
+    const cached: CachedProfile = {
+      event: profile,
+      timestamp: Date.now(),
+      lastAccessed: Date.now()
+    }
+    localStorage.setItem(cacheKey, JSON.stringify(cached))
+  } catch (err) {
+    // Handle quota exceeded by evicting and retrying once
+    if (err instanceof DOMException && err.name === 'QuotaExceededError') {
+      if (!quotaExceededLogged) {
+        console.warn(`[npub-cache] localStorage quota exceeded, evicting old profiles...`)
+        quotaExceededLogged = true
+      }
+      
+      // Try evicting more aggressively and retry
+      try {
+        evictOldProfiles(Math.floor(MAX_CACHED_PROFILES * 0.5))
+        const cached: CachedProfile = {
+          event: profile,
+          timestamp: Date.now(),
+          lastAccessed: Date.now()
+        }
+        localStorage.setItem(getProfileCacheKey(profile.pubkey), JSON.stringify(cached))
+      } catch {
+        // Silently fail if still can't cache - don't block the UI
+      }
+    }
+    // Silently handle other caching errors (invalid data, etc.)
+  }
+}
+
+/**
+ * Batch load multiple profiles from localStorage cache
+ * Returns a Map of pubkey -> NostrEvent for all found profiles
+ */
+export function loadCachedProfiles(pubkeys: string[]): Map<string, NostrEvent> {
+  const cached = new Map<string, NostrEvent>()
+  
+  for (const pubkey of pubkeys) {
+    const profile = getCachedProfile(pubkey)
+    if (profile) {
+      cached.set(pubkey, profile)
+    }
+  }
+  
+  return cached
+}
+
 /**
  * Fetches profile metadata (kind:0) for a list of pubkeys
- * Stores profiles in the event store and optionally to local relays
+ * Checks localStorage cache first, then fetches from relays for missing/expired profiles
+ * Stores profiles in the event store and caches to localStorage
+ * Implements request deduplication to prevent duplicate relay requests for the same pubkey sets
  */
 export const fetchProfiles = async (
   relayPool: RelayPool,
   eventStore: IEventStore,
   pubkeys: string[],
-  settings?: UserSettings
+  settings?: UserSettings,
+  onEvent?: (event: NostrEvent) => void
 ): Promise<NostrEvent[]> => {
   try {
     if (pubkeys.length === 0) {
       return []
     }
 
-    const uniquePubkeys = Array.from(new Set(pubkeys))
-
-    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
-    const prioritized = prioritizeLocalRelays(relayUrls)
-    const { local: localRelays, remote: remoteRelays } = partitionRelays(prioritized)
-
-    // Keep only the most recent profile for each pubkey
-    const profilesByPubkey = new Map<string, NostrEvent>()
-
-    const processEvent = (event: NostrEvent) => {
-      const existing = profilesByPubkey.get(event.pubkey)
-      if (!existing || event.created_at > existing.created_at) {
-        profilesByPubkey.set(event.pubkey, event)
-        // Store in event store immediately
-        eventStore.add(event)
+    const uniquePubkeys = Array.from(new Set(pubkeys)).sort()
+    
+    // Check for in-flight request with same pubkey set (deduplication)
+    const requestKey = uniquePubkeys.join(',')
+    const existingRequest = inFlightRequests.get(requestKey)
+    if (existingRequest) {
+      return existingRequest
+    }
+    
+    // Create the fetch promise and track it
+    const fetchPromise = (async () => {
+      // First, check localStorage cache for all requested profiles
+      const cachedProfiles = loadCachedProfiles(uniquePubkeys)
+      const profilesByPubkey = new Map<string, NostrEvent>()
+      
+      // Add cached profiles to the map and EventStore
+      for (const [pubkey, profile] of cachedProfiles.entries()) {
+        profilesByPubkey.set(pubkey, profile)
+        // Ensure cached profiles are also in EventStore for consistency
+        eventStore.add(profile)
+      }
+      
+      // Determine which pubkeys need to be fetched from relays
+      const pubkeysToFetch = uniquePubkeys.filter(pubkey => !cachedProfiles.has(pubkey))
+      
+      // If all profiles are cached, return early
+      if (pubkeysToFetch.length === 0) {
+        return Array.from(profilesByPubkey.values())
       }
-    }
 
-    const local$ = localRelays.length > 0
-      ? relayPool
-          .req(localRelays, { kinds: [0], authors: uniquePubkeys })
-          .pipe(
-            onlyEvents(),
-            tap((event: NostrEvent) => processEvent(event)),
-            completeOnEose(),
-            takeUntil(timer(1200))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
+      // Fetch missing profiles from relays
+      const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+      const prioritized = prioritizeLocalRelays(relayUrls)
+      const { local: localRelays, remote: remoteRelays } = partitionRelays(prioritized)
+      const hasPurplePages = relayUrls.some(url => url.includes('purplepag.es'))
+      if (!hasPurplePages) {
+        console.warn(`[fetch-profiles] purplepag.es not in active relay pool, adding it temporarily`)
+        // Add purplepag.es if it's not in the pool (it might not have connected yet)
+        const purplePagesUrl = 'wss://purplepag.es'
+        if (!relayPool.relays.has(purplePagesUrl)) {
+          relayPool.group([purplePagesUrl])
+        }
+        // Ensure it's included in the remote relays for this fetch
+        if (!remoteRelays.includes(purplePagesUrl)) {
+          remoteRelays.push(purplePagesUrl)
+        }
+      }
+      const fetchedPubkeys = new Set<string>()
 
-    const remote$ = remoteRelays.length > 0
-      ? relayPool
-          .req(remoteRelays, { kinds: [0], authors: uniquePubkeys })
-          .pipe(
-            onlyEvents(),
-            tap((event: NostrEvent) => processEvent(event)),
-            completeOnEose(),
-            takeUntil(timer(6000))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
+      const processEvent = (event: NostrEvent) => {
+        fetchedPubkeys.add(event.pubkey)
+        const existing = profilesByPubkey.get(event.pubkey)
+        if (!existing || event.created_at > existing.created_at) {
+          profilesByPubkey.set(event.pubkey, event)
+          // Store in event store immediately
+          eventStore.add(event)
+          // Cache to localStorage for future use
+          cacheProfile(event)
+        }
+      }
 
-    await lastValueFrom(merge(local$, remote$).pipe(toArray()))
+      const local$ = localRelays.length > 0
+        ? relayPool
+            .req(localRelays, { kinds: [0], authors: pubkeysToFetch })
+            .pipe(
+              onlyEvents(),
+              onEvent ? tap((event: NostrEvent) => onEvent(event)) : tap(() => {}),
+              tap((event: NostrEvent) => processEvent(event)),
+              completeOnEose()
+            )
+        : new Observable<NostrEvent>((sub) => sub.complete())
 
-    const profiles = Array.from(profilesByPubkey.values())
+      const remote$ = remoteRelays.length > 0
+        ? relayPool
+            .req(remoteRelays, { kinds: [0], authors: pubkeysToFetch })
+            .pipe(
+              onlyEvents(),
+              onEvent ? tap((event: NostrEvent) => onEvent(event)) : tap(() => {}),
+              tap((event: NostrEvent) => processEvent(event)),
+              completeOnEose()
+            )
+        : new Observable<NostrEvent>((sub) => sub.complete())
 
-    // Rebroadcast profiles to local/all relays based on settings
-    if (profiles.length > 0) {
-      await rebroadcastEvents(profiles, relayPool, settings)
-    }
+      await lastValueFrom(merge(local$, remote$).pipe(toArray()))
 
-    return profiles
+      const profiles = Array.from(profilesByPubkey.values())
+      
+      const missingPubkeys = pubkeysToFetch.filter(p => !fetchedPubkeys.has(p))
+      if (missingPubkeys.length > 0) {
+        console.warn(`[fetch-profiles] ${missingPubkeys.length} profiles not found on relays:`, missingPubkeys.map(p => p.slice(0, 16) + '...'))
+      }
+
+      // Note: We don't preload all profile images here to avoid ERR_INSUFFICIENT_RESOURCES
+      // Profile images will be cached by Service Worker when they're actually displayed.
+      // Only the logged-in user's profile image is preloaded (in SidebarHeader).
+
+      // Rebroadcast profiles to local/all relays based on settings
+      // Only rebroadcast newly fetched profiles, not cached ones
+      const newlyFetchedProfiles = profiles.filter(p => pubkeysToFetch.includes(p.pubkey))
+      if (newlyFetchedProfiles.length > 0) {
+        await rebroadcastEvents(newlyFetchedProfiles, relayPool, settings)
+      }
+
+      return profiles
+    })()
+    
+    // Track the request
+    inFlightRequests.set(requestKey, fetchPromise)
+    
+    // Clean up when request completes (success or failure)
+    fetchPromise.finally(() => {
+      inFlightRequests.delete(requestKey)
+    })
+    
+    return fetchPromise
   } catch (error) {
-    console.error('Failed to fetch profiles:', error)
+    console.error('[fetch-profiles] Failed to fetch profiles:', error)
     return []
   }
 }

src/services/readerService.ts

@@ -110,3 +110,4 @@ export async function fetchReadableContent(
 }
 
 
+

src/services/readingPositionService.ts

@@ -19,7 +19,6 @@ export interface ReadingProgressContent {
   progress: number // 0-1 scroll progress
   ts?: number // Unix timestamp (optional, for display)
   loc?: number // Optional: pixel position
-  ver?: string // Schema version
 }
 
 // Helper to extract and parse reading progress from event (kind 39802)
@@ -117,8 +116,7 @@ export async function saveReadingPosition(
   const progressContent: ReadingProgressContent = {
     progress: position.position,
     ts: position.timestamp,
-    loc: position.scrollTop,
-    ver: '1'
+    loc: position.scrollTop
   }
   
   const tags = generateProgressTags(articleIdentifier)

src/services/readingProgressController.ts

@@ -13,7 +13,7 @@ type ProgressMapCallback = (progressMap: Map<string, number>) => void
 type LoadingCallback = (loading: boolean) => void
 
 const LAST_SYNCED_KEY = 'reading_progress_last_synced'
-const PROGRESS_CACHE_KEY = 'reading_progress_cache_v1'
+const PROGRESS_CACHE_KEY = 'reading_progress_cache'
 
 /**
  * Shared reading progress controller

src/services/relayManager.ts

@@ -81,7 +81,15 @@ export function applyRelaySetToPool(
   for (const url of toRemove) {
     const relay = relayPool.relays.get(url)
     if (relay) {
-      relay.close()
+      try {
+        // Only close if relay is actually connected or attempting to connect
+        // This helps avoid WebSocket warnings for connections that never started
+        relay.close()
+      } catch (error) {
+        // Suppress errors when closing relays that haven't fully connected yet
+        // This can happen when switching relay sets before connections establish
+        // Silently ignore
+      }
       relayPool.relays.delete(url)
     }
   }

src/styles/components/cards.css

@@ -59,7 +59,7 @@
 .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: var(--color-primary); font-size: 0.9rem; display: flex; align-items: center; gap: 0.35rem; }
+.bookmark-type { 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; }
@@ -76,6 +76,179 @@
 .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); }
 
+/* Medium-sized card view */
+.individual-bookmark.card-view { 
+  padding: 0; 
+  display: flex; 
+  flex-direction: column; 
+  overflow: hidden; 
+  border: 1px solid var(--color-bg-elevated); 
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  background: var(--color-bg);
+}
+
+.individual-bookmark.card-view:hover {
+  border-color: var(--color-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.card-layout {
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem;
+  gap: 0.75rem;
+}
+
+.card-content-header {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.card-text-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.card-thumbnail {
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+  background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-subtle) 50%, var(--color-bg-elevated) 100%);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.card-thumbnail:hover {
+  opacity: 0.9;
+  transform: scale(1.05);
+}
+
+.card-thumbnail::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.1) 100%);
+  pointer-events: none;
+}
+
+.card-thumbnail .thumbnail-placeholder {
+  font-size: 1.5rem;
+  color: var(--color-border-subtle);
+  opacity: 0.6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+}
+
+.card-content .bookmark-header {
+  display: none;
+}
+
+.card-content .bookmark-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0 0 0.25rem 0;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.card-content .bookmark-content {
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--color-text);
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.card-content .bookmark-content.article-summary {
+  -webkit-line-clamp: 2;
+  font-style: italic;
+  color: var(--color-text-secondary);
+}
+
+.card-content .bookmark-footer {
+  margin-top: auto;
+  padding-top: 0.125rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-content .bookmark-footer-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: nowrap;
+}
+
+.card-content .bookmark-footer .bookmark-type {
+  font-size: 0.9rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: var(--color-text-secondary) !important;
+}
+
+.card-content .bookmark-footer .bookmark-type .content-type-icon {
+  color: var(--color-text-secondary) !important;
+}
+
+.card-content .bookmark-footer .bookmark-date,
+.card-content .bookmark-footer .bookmark-date-link {
+  display: inline;
+  white-space: nowrap;
+}
+
+/* Reading progress as separator - always shown, full width */
+.reading-progress-separator {
+  height: 1px;
+  width: 100%;
+  background: var(--color-border);
+  border-radius: 0.5px;
+  overflow: hidden;
+  margin: 0.125rem 0;
+  position: relative;
+}
+
+.reading-progress-separator .progress-fill {
+  height: 100%;
+  border-radius: 0.5px;
+  transition: width 0.3s ease, background 0.3s ease;
+}
+
+
 /* Large preview view */
 .individual-bookmark.large { padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-bg-elevated); }
 .large-preview-image { width: 100%; height: 180px; background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-subtle) 50%, var(--color-bg-elevated) 100%); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid var(--color-border); position: relative; }
@@ -115,6 +288,74 @@
 .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; }
+/* Responsive design for medium-sized cards */
+@media (max-width: 768px) {
+  .individual-bookmark.card-view {
+    border-radius: 8px;
+  }
+  
+  .card-layout {
+    padding: 1rem;
+    gap: 0.5rem;
+  }
+  
+  .card-content-header {
+    gap: 0.75rem;
+  }
+  
+  .card-thumbnail {
+    width: 60px;
+    height: 60px;
+  }
+  
+  .card-text-content {
+    gap: 0.5rem;
+  }
+  
+  .card-content .bookmark-title {
+    font-size: 1rem;
+    margin-bottom: 0.25rem;
+  }
+  
+  .card-content .bookmark-content {
+    font-size: 0.85rem;
+    line-height: 1.5;
+  }
+  
+  .card-content .bookmark-footer {
+    padding-top: 0.125rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .card-layout {
+    padding: 0.75rem;
+    gap: 0.5rem;
+  }
+  
+  .card-content-header {
+    gap: 0.5rem;
+  }
+  
+  .card-thumbnail {
+    width: 50px;
+    height: 50px;
+  }
+  
+  .card-thumbnail .thumbnail-placeholder {
+    font-size: 1.2rem;
+  }
+  
+  .card-content .bookmark-title {
+    font-size: 0.9rem;
+    margin-bottom: 0.25rem;
+  }
+  
+  .card-content .bookmark-content {
+    font-size: 0.8rem;
+  }
+}
+
 @media (max-width: 768px) {
   .explore-container { padding: 1rem; }
   .explore-header h1 { font-size: 2rem; }

src/styles/components/me.css

@@ -75,6 +75,18 @@
 .me-highlights-list { padding-left: 0; padding-right: 0; }
 .explore-header .author-card { max-width: 600px; margin: 0 auto; width: 100%; }
 
+/* Hide tab labels on mobile to save space */
+@media (max-width: 768px) {
+  .me-tab .tab-label {
+    display: none;
+  }
+  
+  .me-tab {
+    padding: 0.75rem;
+    gap: 0;
+  }
+}
+
 /* Bookmarks list */
 .bookmarks-list {
   display: flex;

src/styles/components/reader.css

@@ -57,13 +57,14 @@
 .reader .reader-markdown h1, .reader .reader-markdown h2, .reader .reader-markdown h3, .reader .reader-markdown h4, .reader .reader-markdown h5, .reader .reader-markdown h6 { text-align: left !important; }
 /* Tame images from external content */
 .reader .reader-html img, .reader .reader-markdown img { 
-  max-width: var(--image-max-width, 100%); 
-  max-height: 70vh; 
+  width: var(--image-width, auto);
+  max-width: 100%; 
+  max-height: var(--image-max-height, 70vh); 
   height: auto; 
-  width: auto; 
   display: block; 
   margin: 0.75rem auto; 
   border-radius: 6px; 
+  object-fit: contain;
 }
 /* Headlines with Tailwind typography */
 .reader-markdown h1, .reader-html h1 { 
@@ -192,9 +193,11 @@
   }
   
   .reader-markdown img, .reader-html img {
+    width: var(--image-width, auto) !important;
     max-width: 100% !important;
-    width: auto !important;
+    max-height: var(--image-max-height, 70vh) !important;
     height: auto;
+    object-fit: contain;
   }
 }
 
@@ -270,3 +273,21 @@
 
 /* Reading Progress Indicator - now using Tailwind utilities in component */
 
+/* Profile loading state - subtle opacity pulse animation */
+.profile-loading {
+  opacity: 0.6;
+  animation: profile-loading-pulse 1.5s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .profile-loading {
+    animation: none;
+    opacity: 0.7;
+  }
+}
+
+@keyframes profile-loading-pulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+

src/styles/layout/sidebar.css

@@ -54,6 +54,13 @@
   }
 }
 
+.sidebar-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+}
+
 .sidebar-header-right {
   display: flex;
   align-items: center;
@@ -260,6 +267,42 @@
 .read-inline-btn:hover { background: rgb(22 163 74); /* green-600 */ }
 
 /* Bookmark filters */
+.bookmark-filters-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bg);
+}
+
+.bookmark-filters-wrapper > .bookmark-filters {
+  padding: 0;
+  border-bottom: none;
+  background: transparent;
+}
+
+.bookmark-filters-wrapper > .compact-button {
+  background: transparent;
+  color: var(--color-text-secondary);
+  border: none;
+  padding: 0.375rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  min-width: 32px;
+  min-height: 32px;
+}
+
+.bookmark-filters-wrapper > .compact-button:hover {
+  color: var(--color-text);
+  background: var(--color-bg-elevated);
+}
+
 .bookmark-filters {
   display: flex;
   gap: 0.5rem;

src/sw.ts

@@ -23,13 +23,15 @@ sw.skipWaiting()
 clientsClaim()
 
 
-// Runtime cache: Cross-origin images
-// This preserves the existing image caching behavior
+// Runtime cache: All images (cross-origin and same-origin)
+// Cache both external images and any internal image assets
 registerRoute(
   ({ request, url }) => {
     const isImage = request.destination === 'image' || 
                     /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(url.pathname)
-    return isImage && url.origin !== sw.location.origin
+    // Cache all images, not just cross-origin ones
+    // This ensures article images from any source get cached
+    return isImage
   },
   new StaleWhileRevalidate({
     cacheName: 'boris-images',
@@ -41,6 +43,11 @@ registerRoute(
       new CacheableResponsePlugin({
         statuses: [0, 200],
       }),
+      {
+        cacheWillUpdate: async ({ response }) => {
+          return response.ok ? response : null
+        }
+      }
     ],
   })
 )

src/types/highlights.ts

@@ -15,11 +15,10 @@ export interface Highlight {
   comment?: string // optional comment about the highlight
   // Level classification (computed based on user's context)
   level?: HighlightLevel
-  // Relay tracking for offline/local-only highlights
+  // Relay tracking for local-only highlights
   publishedRelays?: string[] // URLs of relays where this was published (for user-created highlights)
   seenOnRelays?: string[] // URLs of relays where this event was fetched from
   isLocalOnly?: boolean // true if only published to local relays
-  isOfflineCreated?: boolean // true if created while in flight mode (offline)
   isSyncing?: boolean // true if currently being synced to remote relays
 }
 

src/utils/helpers.ts

@@ -1,13 +1,5 @@
-// Extract pubkeys from nprofile strings in content
 import { READING_PROGRESS } from '../config/kinds'
 
-export const extractNprofilePubkeys = (content: string): string[] => {
-  const nprofileRegex = /nprofile1[a-z0-9]+/gi
-  const matches = content.match(nprofileRegex) || []
-  const unique = new Set<string>(matches)
-  return Array.from(unique)
-}
-
 export type UrlType = 'video' | 'image' | 'youtube' | 'article'
 
 export interface UrlClassification {

src/utils/highlightMatching/domUtils.ts

@@ -64,10 +64,36 @@ export function tryMarkInTextNodes(
     let actualIndex = index
     if (useNormalized) {
       // Map normalized index back to original text
-      let normalizedIdx = 0
-      for (let i = 0; i < text.length && normalizedIdx < index; i++) {
-        if (!/\s/.test(text[i]) || (i > 0 && !/\s/.test(text[i-1]))) normalizedIdx++
-        actualIndex = i + 1
+      // Build normalized text while tracking original positions
+      let normalizedPos = 0
+      let prevWasWs = false
+      for (let i = 0; i < text.length; i++) {
+        const ch = text[i]
+        const isWs = /\s/.test(ch)
+        
+        if (isWs) {
+          // Whitespace: count only at start of whitespace sequence
+          if (!prevWasWs) {
+            if (normalizedPos === index) {
+              actualIndex = i
+              break
+            }
+            normalizedPos++
+          }
+          prevWasWs = true
+        } else {
+          // Non-whitespace: count each character
+          if (normalizedPos === index) {
+            actualIndex = i
+            break
+          }
+          normalizedPos++
+          prevWasWs = false
+        }
+      }
+      // If we didn't find exact match, use last position
+      if (normalizedPos < index) {
+        actualIndex = text.length
       }
     }
     

src/utils/highlightMatching/htmlMatching.ts

@@ -1,6 +1,54 @@
 import { Highlight } from '../../types/highlights'
 import { tryMarkInTextNodes } from './domUtils'
 
+interface CacheEntry {
+  html: string
+  timestamp: number
+}
+
+// Simple in-memory cache for highlighted HTML results
+const highlightCache = new Map<string, CacheEntry>()
+const CACHE_TTL = 5 * 60 * 1000 // 5 minutes
+const MAX_CACHE_SIZE = 50 // FIFO eviction after this many entries
+
+/**
+ * Generate cache key from content and highlights
+ */
+function getCacheKey(html: string, highlights: Highlight[], highlightStyle: string): string {
+  // Create a stable key from content hash (first 200 chars) and highlight IDs
+  const contentHash = html.slice(0, 200).replace(/\s+/g, ' ').trim()
+  const highlightIds = highlights
+    .map(h => h.id)
+    .sort()
+    .join(',')
+  return `${contentHash.length}:${highlightIds}:${highlightStyle}`
+}
+
+/**
+ * Clean up old cache entries and enforce size limit
+ */
+function cleanupCache(): void {
+  const now = Date.now()
+  const entries = Array.from(highlightCache.entries())
+  
+  // Remove expired entries
+  for (const [key, entry] of entries) {
+    if (now - entry.timestamp > CACHE_TTL) {
+      highlightCache.delete(key)
+    }
+  }
+  
+  // Enforce size limit with FIFO eviction (oldest first)
+  if (highlightCache.size > MAX_CACHE_SIZE) {
+    const sortedEntries = Array.from(highlightCache.entries())
+      .sort((a, b) => a[1].timestamp - b[1].timestamp)
+    const toRemove = sortedEntries.slice(0, highlightCache.size - MAX_CACHE_SIZE)
+    for (const [key] of toRemove) {
+      highlightCache.delete(key)
+    }
+  }
+}
+
 /**
  * Apply highlights to HTML content by injecting mark tags using DOM manipulation
  */
@@ -13,19 +61,24 @@ export function applyHighlightsToHTML(
     return html
   }
   
+  // Check cache
+  const cacheKey = getCacheKey(html, highlights, highlightStyle)
+  const cached = highlightCache.get(cacheKey)
+  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+    return cached.html
+  }
+  
+  // Clean up cache periodically
+  cleanupCache()
   
   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)
-  })
-  
+  // Collect all text nodes once before processing highlights (performance optimization)
+  const walker = document.createTreeWalker(tempDiv, NodeFilter.SHOW_TEXT, null)
+  const textNodes: Text[] = []
+  let node: Node | null
+  while ((node = walker.nextNode())) textNodes.push(node as Text)
   
   for (const highlight of highlights) {
     const searchText = highlight.content.trim()
@@ -34,14 +87,6 @@ export function applyHighlightsToHTML(
       continue
     }
     
-    
-    // Collect all text nodes
-    const walker = document.createTreeWalker(tempDiv, NodeFilter.SHOW_TEXT, null)
-    const textNodes: Text[] = []
-    let node: Node | null
-    while ((node = walker.nextNode())) textNodes.push(node as Text)
-    
-    
     // Try exact match first, then normalized match
     const found = tryMarkInTextNodes(textNodes, searchText, highlight, false, highlightStyle) ||
                   tryMarkInTextNodes(textNodes, searchText, highlight, true, highlightStyle)
@@ -51,7 +96,14 @@ export function applyHighlightsToHTML(
     }
   }
   
+  const result = tempDiv.innerHTML
   
-  return tempDiv.innerHTML
+  // Store in cache
+  highlightCache.set(cacheKey, {
+    html: result,
+    timestamp: Date.now()
+  })
+  
+  return result
 }
 

src/utils/linksFromBookmarks.ts

@@ -2,13 +2,14 @@ import { Bookmark } from '../types/bookmarks'
 import { ReadItem } from '../services/readsService'
 import { KINDS } from '../config/kinds'
 import { fallbackTitleFromUrl } from './readItemMerge'
+import { enhanceReadItemsWithOpenGraph } from '../services/opengraphEnhancer'
 
 /**
  * Derives ReadItems from bookmarks for external URLs:
  * - Web bookmarks (kind:39701)
  * - Any bookmark with http(s) URLs in content or urlReferences
  */
-export function deriveLinksFromBookmarks(bookmarks: Bookmark[]): ReadItem[] {
+export async function deriveLinksFromBookmarks(bookmarks: Bookmark[]): Promise<ReadItem[]> {
   const linksMap = new Map<string, ReadItem>()
   
   const allBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
@@ -59,11 +60,14 @@ export function deriveLinksFromBookmarks(bookmarks: Bookmark[]): ReadItem[] {
     }
   }
   
-  // Sort by most recent bookmark activity
-  return Array.from(linksMap.values()).sort((a, b) => {
+  // Get initial items sorted by most recent bookmark activity
+  const initialItems = Array.from(linksMap.values()).sort((a, b) => {
     const timeA = a.readingTimestamp || 0
     const timeB = b.readingTimestamp || 0
     return timeB - timeA
   })
+  
+  // Enhance with OpenGraph data
+  return await enhanceReadItemsWithOpenGraph(initialItems)
 }
 

src/utils/nostrUriResolver.tsx

@@ -1,40 +1,51 @@
 import { decode, npubEncode, noteEncode } from 'nostr-tools/nip19'
 import { getNostrUrl } from '../config/nostrGateways'
+import { Tokens } from 'applesauce-content/helpers'
+import { getContentPointers } from 'applesauce-factory/helpers'
+import { encodeDecodeResult } from 'applesauce-core/helpers'
+import { Helpers } from 'applesauce-core'
+
+const { getPubkeyFromDecodeResult } = Helpers
 
 /**
  * Regular expression to match nostr: URIs and bare NIP-19 identifiers
+ * Uses applesauce Tokens.nostrLink which includes word boundary checks
  * Matches: nostr:npub1..., nostr:note1..., nostr:nprofile1..., nostr:nevent1..., nostr:naddr1...
  * Also matches bare identifiers without the nostr: prefix
  */
-const NOSTR_URI_REGEX = /(?:nostr:)?((npub|note|nprofile|nevent|naddr)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58,})/gi
+const NOSTR_URI_REGEX = Tokens.nostrLink
 
 /**
- * Extract all nostr URIs from text
+ * Extract all nostr URIs from text using applesauce helpers
  */
 export function extractNostrUris(text: string): string[] {
-  const matches = text.match(NOSTR_URI_REGEX)
-  if (!matches) return []
-  
-  // Extract just the NIP-19 identifier (without nostr: prefix)
-  return matches.map(match => {
-    const cleanMatch = match.replace(/^nostr:/, '')
-    return cleanMatch
-  })
+  try {
+    const pointers = getContentPointers(text)
+    const result: string[] = []
+    pointers.forEach(pointer => {
+      try {
+        const encoded = encodeDecodeResult(pointer)
+        if (encoded) {
+          result.push(encoded)
+        }
+      } catch {
+        // Ignore encoding errors, continue processing other pointers
+      }
+    })
+    return result
+  } catch {
+    return []
+  }
 }
 
 /**
- * Extract all naddr (article) identifiers from text
+ * Extract all naddr (article) identifiers from text using applesauce helpers
  */
 export function extractNaddrUris(text: string): string[] {
-  const allUris = extractNostrUris(text)
-  return allUris.filter(uri => {
-    try {
-      const decoded = decode(uri)
-      return decoded.type === 'naddr'
-    } catch {
-      return false
-    }
-  })
+  const pointers = getContentPointers(text)
+  return pointers
+    .filter(pointer => pointer.type === 'naddr')
+    .map(pointer => encodeDecodeResult(pointer))
 }
 
 /**
@@ -77,13 +88,14 @@ export function getNostrUriLabel(encoded: string): string {
   try {
     const decoded = decode(encoded)
     
+    // Use applesauce helper to extract pubkey for npub/nprofile
+    const pubkey = getPubkeyFromDecodeResult(decoded)
+    if (pubkey) {
+      // Use shared fallback display function and add @ for label
+      return `@${getNpubFallbackDisplay(pubkey)}`
+    }
+    
     switch (decoded.type) {
-      case 'npub':
-        return `@${encoded.slice(0, 12)}...`
-      case 'nprofile': {
-        const npub = npubEncode(decoded.data.pubkey)
-        return `@${npub.slice(0, 12)}...`
-      }
       case 'note':
         return `note:${encoded.slice(5, 12)}...`
       case 'nevent': {
@@ -107,17 +119,161 @@ export function getNostrUriLabel(encoded: string): string {
   }
 }
 
+/**
+ * Get a standardized fallback display name for a pubkey when profile has no name
+ * Returns npub format: abc1234... (without @ prefix)
+ * Components should add @ prefix when rendering mentions/links
+ * @param pubkey The pubkey in hex format
+ * @returns Formatted npub display string without @ prefix
+ */
+export function getNpubFallbackDisplay(pubkey: string): string {
+  try {
+    const npub = npubEncode(pubkey)
+    // Remove "npub1" prefix (5 chars) and show next 7 chars
+    return `${npub.slice(5, 12)}...`
+  } catch {
+    // Fallback to shortened pubkey if encoding fails
+    return `${pubkey.slice(0, 8)}...`
+  }
+}
+
+/**
+ * Get display name for a profile with consistent priority order
+ * Returns: profile.name || profile.display_name || profile.nip05 || npub fallback
+ * This function works with parsed profile objects (from useEventModel)
+ * For NostrEvent objects, use extractProfileDisplayName from profileUtils
+ * @param profile Profile object with optional name, display_name, and nip05 fields
+ * @param pubkey The pubkey in hex format (required for fallback)
+ * @returns Display name string
+ */
+export function getProfileDisplayName(
+  profile: { name?: string; display_name?: string; nip05?: string } | null | undefined,
+  pubkey: string
+): string {
+  // Consistent priority order: name || display_name || nip05 || fallback
+  if (profile?.name) return profile.name
+  if (profile?.display_name) return profile.display_name
+  if (profile?.nip05) return profile.nip05
+  return getNpubFallbackDisplay(pubkey)
+}
+
+/**
+ * Process markdown to replace nostr URIs while skipping those inside markdown links
+ * This prevents nested markdown link issues when nostr identifiers appear in URLs
+ */
+function replaceNostrUrisSafely(
+  markdown: string,
+  getReplacement: (encoded: string) => string
+): string {
+  // Track positions where we're inside a markdown link URL
+  // Use a parser approach to correctly handle URLs with brackets/parentheses
+  const linkRanges: Array<{ start: number, end: number }> = []
+  
+  // Find all markdown link URLs by looking for ]( pattern and tracking to matching )
+  let i = 0
+  while (i < markdown.length) {
+    // Look for ]( pattern that starts a markdown link URL
+    const urlStartMatch = markdown.indexOf('](', i)
+    if (urlStartMatch === -1) break
+    
+    const urlStart = urlStartMatch + 2 // Position after "]("
+    
+    // Now find the matching closing parenthesis
+    // We need to account for nested parentheses and escaped characters
+    let pos = urlStart
+    let depth = 1 // We're inside one set of parentheses
+    let urlEnd = -1
+    
+    while (pos < markdown.length && depth > 0) {
+      const char = markdown[pos]
+      const nextChar = pos + 1 < markdown.length ? markdown[pos + 1] : ''
+      
+      // Check for escaped characters
+      if (char === '\\' && nextChar) {
+        pos += 2 // Skip escaped character
+        continue
+      }
+      
+      if (char === '(') {
+        depth++
+      } else if (char === ')') {
+        depth--
+        if (depth === 0) {
+          urlEnd = pos
+          break
+        }
+      }
+      
+      pos++
+    }
+    
+    if (urlEnd !== -1) {
+      linkRanges.push({
+        start: urlStart,
+        end: urlEnd
+      })
+      
+      i = urlEnd + 1
+    } else {
+      // No matching closing paren found, skip this one
+      i = urlStart + 1
+    }
+  }
+  
+  // Check if a position is inside any markdown link URL
+  const isInsideLinkUrl = (pos: number): boolean => {
+    return linkRanges.some(range => pos >= range.start && pos < range.end)
+  }
+  
+  // Replace nostr URIs, but skip those inside link URLs
+  // Also check if nostr URI is part of any URL pattern (http/https URLs)
+  // Callback params: (match, encoded, type, offset, string)
+  const result = markdown.replace(NOSTR_URI_REGEX, (match, encoded, _type, offset, fullString) => {
+    const matchEnd = offset + match.length
+    
+    // Check if this match is inside a markdown link URL
+    // Check both start and end positions to ensure we catch the whole match
+    const startInside = isInsideLinkUrl(offset)
+    const endInside = isInsideLinkUrl(matchEnd - 1) // Check end position
+    
+    if (startInside || endInside) {
+      // Don't replace - return original match
+      return match
+    }
+    
+    // Also check if the nostr URI is part of an HTTP/HTTPS URL pattern
+    // This catches cases where the source markdown has URLs like https://example.com/naddr1...
+    // before they're formatted as markdown links
+    const contextBefore = fullString.slice(Math.max(0, offset - 200), offset)
+    const contextAfter = fullString.slice(matchEnd, Math.min(fullString.length, matchEnd + 10))
+    
+    // Check if we're inside an http/https URL (looking for https?:// pattern before the match)
+    // and the match is followed by valid URL characters (not whitespace or closing paren)
+    const urlPatternBefore = /https?:\/\/[^\s)]*$/i
+    const isInHttpUrl = urlPatternBefore.test(contextBefore)
+    const isValidUrlContinuation = !contextAfter.match(/^[\s)]/) // Not followed by space or closing paren
+    
+    if (isInHttpUrl && isValidUrlContinuation) {
+      // Don't replace - return original match
+      return match
+    }
+    
+    // encoded is already the NIP-19 identifier without nostr: prefix (from capture group)
+    const replacement = getReplacement(encoded)
+    return replacement
+  })
+  
+  return result
+}
+
 /**
  * Replace nostr: URIs in markdown with proper markdown links
  * This converts: nostr:npub1... to [label](link)
  */
 export function replaceNostrUrisInMarkdown(markdown: string): string {
-  return markdown.replace(NOSTR_URI_REGEX, (match) => {
-    // Extract just the NIP-19 identifier (without nostr: prefix)
-    const encoded = match.replace(/^nostr:/, '')
+  return replaceNostrUrisSafely(markdown, (encoded) => {
     const link = createNostrLink(encoded)
     const label = getNostrUriLabel(encoded)
-    
     return `[${label}](${link})`
   })
 }
@@ -132,9 +288,7 @@ export function replaceNostrUrisInMarkdownWithTitles(
   markdown: string, 
   articleTitles: Map<string, string>
 ): string {
-  return markdown.replace(NOSTR_URI_REGEX, (match) => {
-    // Extract just the NIP-19 identifier (without nostr: prefix)
-    const encoded = match.replace(/^nostr:/, '')
+  return replaceNostrUrisSafely(markdown, (encoded) => {
     const link = createNostrLink(encoded)
     
     // For articles, use the resolved title if available
@@ -154,14 +308,120 @@ export function replaceNostrUrisInMarkdownWithTitles(
   })
 }
 
+/**
+ * Replace nostr: URIs in markdown with proper markdown links, using resolved profile names and article titles
+ * This converts: nostr:npub1... to [@username](link) and nostr:naddr1... to [Article Title](link)
+ * Labels update progressively as profiles load
+ * @param markdown The markdown content to process
+ * @param profileLabels Map of pubkey (hex) -> display name (e.g., pubkey -> @username)
+ * @param articleTitles Map of naddr -> title for resolved articles
+ * @param profileLoading Map of pubkey (hex) -> boolean indicating if profile is loading
+ */
+export function replaceNostrUrisInMarkdownWithProfileLabels(
+  markdown: string,
+  profileLabels: Map<string, string> = new Map(),
+  articleTitles: Map<string, string> = new Map(),
+  profileLoading: Map<string, boolean> = new Map()
+): string {
+  return replaceNostrUrisSafely(markdown, (encoded) => {
+    const link = createNostrLink(encoded)
+    
+    // For articles, use the resolved title if available
+    try {
+      const decoded = decode(encoded)
+      if (decoded.type === 'naddr' && articleTitles.has(encoded)) {
+        const title = articleTitles.get(encoded)!
+        return `[${title}](${link})`
+      }
+      
+      // For npub/nprofile, extract pubkey using applesauce helper
+      const pubkey = getPubkeyFromDecodeResult(decoded)
+      if (pubkey) {
+        // Check if we have a resolved profile name using pubkey as key
+        // Use the label if: 1) we have a label, AND 2) profile is not currently loading (false or undefined)
+        const isLoading = profileLoading.get(pubkey)
+        const hasLabel = profileLabels.has(pubkey)
+        
+        // Use resolved label if we have one and profile is not loading
+        // isLoading can be: true (loading), false (loaded), or undefined (never was loading)
+        // We only avoid using the label if isLoading === true
+        if (isLoading !== true && hasLabel) {
+          const displayName = profileLabels.get(pubkey)!
+          return `[${displayName}](${link})`
+        }
+        
+        // If loading or no resolved label yet, use fallback (will show loading via post-processing)
+        const label = getNostrUriLabel(encoded)
+        return `[${label}](${link})`
+      }
+    } catch (error) {
+      // Ignore decode errors, fall through to default label
+    }
+    
+    // For other types or if not resolved, use default label (shortened npub format)
+    const label = getNostrUriLabel(encoded)
+    return `[${label}](${link})`
+  })
+}
+
+/**
+ * Post-process rendered HTML to add loading class to profile links that are still loading
+ * This is necessary because HTML inside markdown links doesn't render correctly
+ * @param html The rendered HTML string
+ * @param profileLoading Map of pubkey (hex) -> boolean indicating if profile is loading
+ * @returns HTML with profile-loading class added to loading profile links
+ */
+export function addLoadingClassToProfileLinks(
+  html: string,
+  profileLoading: Map<string, boolean>
+): string {
+  if (profileLoading.size === 0) {
+    return html
+  }
+  
+  // Find all <a> tags with href starting with /p/ (profile links)
+  const result = html.replace(/<a\s+[^>]*?href="\/p\/([^"]+)"[^>]*?>/g, (match, npub: string) => {
+    try {
+      // Decode npub or nprofile to get pubkey using applesauce helper
+      const decoded: ReturnType<typeof decode> = decode(npub)
+      const pubkey = getPubkeyFromDecodeResult(decoded)
+      
+      if (pubkey) {
+        // Check if this profile is loading
+        const isLoading = profileLoading.get(pubkey)
+        
+        if (isLoading === true) {
+          // Add profile-loading class if not already present
+          if (!match.includes('profile-loading')) {
+            // Insert class before the closing >
+            const classMatch = /class="([^"]*)"/.exec(match)
+            if (classMatch) {
+              const updated = match.replace(/class="([^"]*)"/, `class="$1 profile-loading"`)
+              return updated
+            } else {
+              const updated = match.replace(/(<a\s+[^>]*?)>/, '$1 class="profile-loading">')
+              return updated
+            }
+          }
+        }
+      }
+    } catch (error) {
+      // Ignore processing errors
+    }
+    
+    return match
+  })
+  
+  return result
+}
+
 /**
  * Replace nostr: URIs in HTML with clickable links
  * This is used when processing HTML content directly
  */
 export function replaceNostrUrisInHTML(html: string): string {
-  return html.replace(NOSTR_URI_REGEX, (match) => {
-    // Extract just the NIP-19 identifier (without nostr: prefix)
-    const encoded = match.replace(/^nostr:/, '')
+  return html.replace(NOSTR_URI_REGEX, (_match, encoded) => {
+    // encoded is already the NIP-19 identifier without nostr: prefix (from capture group)
     const link = createNostrLink(encoded)
     const label = getNostrUriLabel(encoded)
     

src/utils/profileLoadingUtils.ts

@@ -0,0 +1,27 @@
+import { IEventStore } from 'applesauce-core'
+import { loadCachedProfiles } from '../services/profileService'
+
+/**
+ * Check if a profile exists in cache or eventStore
+ * Used to determine if profile loading state should be shown
+ * @param pubkey The pubkey in hex format
+ * @param eventStore Optional eventStore instance
+ * @returns true if profile exists in cache or eventStore, false otherwise
+ */
+export function isProfileInCacheOrStore(
+  pubkey: string,
+  eventStore?: IEventStore | null
+): boolean {
+  if (!pubkey) return false
+  
+  // Check cache first
+  const cached = loadCachedProfiles([pubkey])
+  if (cached.has(pubkey)) {
+    return true
+  }
+  
+  // Check eventStore
+  const eventStoreProfile = eventStore?.getEvent(pubkey + ':0')
+  return !!eventStoreProfile
+}
+

src/utils/profileUtils.ts

@@ -0,0 +1,40 @@
+import { NostrEvent } from 'nostr-tools'
+import { getNpubFallbackDisplay } from './nostrUriResolver'
+
+/**
+ * Extract display name from a profile event (kind:0) with consistent priority order
+ * Priority: name || display_name || nip05 || npub fallback
+ * 
+ * @param profileEvent The profile event (kind:0) to extract name from
+ * @returns Display name string, or empty string if event is invalid
+ */
+export function extractProfileDisplayName(profileEvent: NostrEvent | null | undefined): string {
+  if (!profileEvent || profileEvent.kind !== 0) {
+    return ''
+  }
+
+  try {
+    const profileData = JSON.parse(profileEvent.content || '{}') as { 
+      name?: string
+      display_name?: string
+      nip05?: string
+    }
+    
+    // Consistent priority: name || display_name || nip05
+    if (profileData.name) return profileData.name
+    if (profileData.display_name) return profileData.display_name
+    if (profileData.nip05) return profileData.nip05
+    
+    // Fallback to npub if no name fields
+    return getNpubFallbackDisplay(profileEvent.pubkey)
+  } catch (error) {
+    // If JSON parsing fails, use npub fallback
+    try {
+      return getNpubFallbackDisplay(profileEvent.pubkey)
+    } catch {
+      // If npub encoding also fails, return empty string
+      return ''
+    }
+  }
+}
+

src/utils/urlHelpers.ts

@@ -1,4 +1,5 @@
 import { Highlight } from '../types/highlights'
+import { nip19 } from 'nostr-tools'
 
 export function normalizeUrl(url: string): string {
   try {
@@ -15,10 +16,26 @@ export function filterHighlightsByUrl(highlights: Highlight[], selectedUrl: stri
   }
   
   
-  // For Nostr articles, we already fetched highlights specifically for this article
-  // So we don't need to filter them - they're all relevant
+  // For Nostr articles, filter by article coordinate
   if (selectedUrl.startsWith('nostr:')) {
-    return highlights
+    try {
+      const decoded = nip19.decode(selectedUrl.replace('nostr:', ''))
+      if (decoded.type === 'naddr') {
+        const ptr = decoded.data as { kind: number; pubkey: string; identifier: string }
+        const articleCoordinate = `${ptr.kind}:${ptr.pubkey}:${ptr.identifier}`
+        
+        return highlights.filter(h => {
+          // Keep highlights that match this article coordinate
+          return h.eventReference === articleCoordinate
+        })
+      } else {
+        // Not a valid naddr, return empty array
+        return []
+      }
+    } catch {
+      // Invalid naddr, return empty array
+      return []
+    }
   }
   
   // For web URLs, filter by URL matching

vite.config.ts

@@ -104,7 +104,7 @@ export default defineConfig({
       filename: 'sw.ts',
       injectRegister: null,
       manifest: {
-        name: 'Boris - Nostr Bookmarks',
+        name: 'Boris - Read, Highlight, Explore',
         short_name: 'Boris',
         description: 'Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.',
         start_url: '/',
@@ -139,7 +139,10 @@ export default defineConfig({
       },
       devOptions: {
         enabled: true,
-        type: 'module'
+        type: 'module',
+        // Use generateSW strategy for dev mode to enable SW testing
+        // This creates a working SW in dev mode, while injectManifest is used in production
+        navigateFallback: 'index.html'
       }
     })
   ],