chore(release): v0.2.5

fix(reader): wire preview ref to markdown conversion hook
- Update useMarkdownToHTML to return {renderedHtml, previewRef} - Use returned previewRef in ContentPanel hidden markdown preview - Resolves article markdown not rendering instantly
2026-02-16 20:45:01 +01:00 · 2025-10-07 22:19:49 +01:00 · 2025-10-07 22:16:31 +01:00 · 2025-10-07 22:04:12 +01:00 · 2025-10-07 21:58:17 +01:00 · 2025-10-07 21:57:04 +01:00
35 changed files with 1722 additions and 1167 deletions
--- a/README.md
+++ b/README.md
@@ -4,16 +4,22 @@ Your reading list for the Nostr world.

 Boris turns your Nostr bookmarks into a calm, fast, and focused reading experience. Connect your Nostr account and you'll get a clean three‑pane reader: bookmarks on the left, the article in the middle, and highlights on the right.

+## Live
+
+- App: [https://xn--bris-v0b.com/](https://xn--bris-v0b.com/)
+
 ## The Vision

 When I wrote "Purple Text, Orange Highlights" 2.5 years ago, I had a certain interface in mind that would allow the reader to curate, discover, highlight, and provide value to writers and other readers alike. Boris is my attempt to build this interface.

 Boris has three "levels" of highlights for each article:
+
 - user = yellow
 - friends = orange
 - nostrverse = purple

 In case it's not self-explanatory:
+
 - **your highlights** = highlights that the logged-in npub made
 - **friends** = highlights that your friends made, i.e. highlights of the npubs that the logged-in user follows
 - **nostrverse** = all the highlights we can find on all the relays we're connected to
--- a/index.html
+++ b/index.html
@@ -5,6 +5,21 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Boris - Nostr Bookmarks</title>
+    <meta name="description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
+    <link rel="canonical" href="https://xn--bris-v0b.com/" />
+    
+    <!-- Open Graph / Social Media -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://xn--bris-v0b.com/" />
+    <meta property="og:title" content="Boris - Nostr Bookmarks" />
+    <meta property="og:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
+    <meta property="og:site_name" content="Boris" />
+    
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:url" content="https://xn--bris-v0b.com/" />
+    <meta name="twitter:title" content="Boris - Nostr Bookmarks" />
+    <meta name="twitter:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
  </head>
  <body>
    <div id="root"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "boris",
-  "version": "0.2.4",
+  "version": "0.2.5",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "boris",
-      "version": "0.2.4",
+      "version": "0.2.5",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^7.1.0",
        "@fortawesome/free-solid-svg-icons": "^7.1.0",
--- a/package.json
+++ b/package.json
@@ -1,7 +1,8 @@
 {
  "name": "boris",
-  "version": "0.2.4",
+  "version": "0.2.5",
  "description": "A minimal nostr client for bookmark management",
+  "homepage": "https://xn--bris-v0b.com/",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/public/_headers
+++ b/public/_headers
@@ -0,0 +1,9 @@
+/*
+  X-Frame-Options: DENY
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: strict-origin-when-cross-origin
+  Permissions-Policy: camera=(), microphone=(), geolocation=()
+
+/assets/*
+  Cache-Control: public, max-age=31536000, immutable
+
--- a/public/_redirects
+++ b/public/_redirects
@@ -0,0 +1,3 @@
+# SPA redirect for client-side routing
+/*    /index.html   200
+
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,5 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://xn--bris-v0b.com/sitemap.xml
+
--- a/src/components/BookmarkList.tsx
+++ b/src/components/BookmarkList.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faChevronLeft, faBookmark, faSpinner, faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
-import { Bookmark } from '../types/bookmarks'
+import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import { BookmarkItem } from './BookmarkItem'
 import SidebarHeader from './SidebarHeader'
 import IconButton from './IconButton'
 import { ViewMode } from './Bookmarks'
+import { extractUrlsFromContent } from '../services/bookmarkHelpers'

 interface BookmarkListProps {
  bookmarks: Bookmark[]
@@ -36,10 +37,35 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
  isRefreshing,
  loading = false
 }) => {
+  // Helper to check if a bookmark has either content or a URL
+  const hasContentOrUrl = (ib: IndividualBookmark) => {
+    // Check if has content (text)
+    const hasContent = ib.content && ib.content.trim().length > 0
+    
+    // Check if has URL
+    let hasUrl = false
+    
+    // For web bookmarks (kind:39701), URL is in the 'd' tag
+    if (ib.kind === 39701) {
+      const dTag = ib.tags?.find((t: string[]) => t[0] === 'd')?.[1]
+      hasUrl = !!dTag && dTag.trim().length > 0
+    } else {
+      // For other bookmarks, extract URLs from content
+      const urls = extractUrlsFromContent(ib.content || '')
+      hasUrl = urls.length > 0
+    }
+    
+    // Always show articles (kind:30023) as they have special handling
+    if (ib.kind === 30023) return true
+    
+    // Otherwise, must have either content or URL
+    return hasContent || hasUrl
+  }
+  
  // Merge and flatten all individual bookmarks from all lists
  // Re-sort after flattening to ensure newest first across all lists
  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
-    .filter(ib => ib.content || ib.kind === 30023 || ib.kind === 39701)
+    .filter(hasContentOrUrl)
    .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
  
  if (isCollapsed) {
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -1,28 +1,18 @@
-import React, { useState, useEffect, useMemo } from 'react'
-import { useParams, useLocation, useNavigate } from 'react-router-dom'
+import React, { useMemo } from 'react'
+import { useParams, useLocation } from 'react-router-dom'
 import { Hooks } from 'applesauce-react'
 import { useEventStore } from 'applesauce-react/hooks'
 import { RelayPool } from 'applesauce-relay'
-import { Bookmark } from '../types/bookmarks'
-import { Highlight } from '../types/highlights'
-import { BookmarkList } from './BookmarkList'
-import { fetchBookmarks } from '../services/bookmarkService'
-import { fetchHighlights, fetchHighlightsForArticle } from '../services/highlightService'
-import { fetchContacts } from '../services/contactService'
-import ContentPanel from './ContentPanel'
-import { HighlightsPanel } from './HighlightsPanel'
-import { ReadableContent } from '../services/readerService'
-import Settings from './Settings'
-import Toast from './Toast'
 import { useSettings } from '../hooks/useSettings'
 import { useArticleLoader } from '../hooks/useArticleLoader'
 import { useExternalUrlLoader } from '../hooks/useExternalUrlLoader'
-import { loadContent, BookmarkReference } from '../utils/contentLoader'
-import { HighlightVisibility } from './HighlightsPanel'
-import { HighlightButton, HighlightButtonRef } from './HighlightButton'
-import { createHighlight, eventToHighlight } from '../services/highlightCreationService'
-import { useRef, useCallback } from 'react'
-import { NostrEvent, nip19 } from 'nostr-tools'
+import { useBookmarksData } from '../hooks/useBookmarksData'
+import { useContentSelection } from '../hooks/useContentSelection'
+import { useHighlightCreation } from '../hooks/useHighlightCreation'
+import { useBookmarksUI } from '../hooks/useBookmarksUI'
+import ThreePaneLayout from './ThreePaneLayout'
+import { classifyHighlights } from '../utils/highlightClassification'
+
 export type ViewMode = 'compact' | 'cards' | 'large'

 interface BookmarksProps {
@@ -33,40 +23,14 @@ interface BookmarksProps {
 const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
  const { naddr } = useParams<{ naddr?: string }>()
  const location = useLocation()
-  const navigate = useNavigate()
  
-  // Extract external URL from /r/* route
  const externalUrl = location.pathname.startsWith('/r/') 
-    ? location.pathname.slice(3) // Remove '/r/' prefix
+    ? decodeURIComponent(location.pathname.slice(3))
    : undefined
    
-  const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
-  const [bookmarksLoading, setBookmarksLoading] = useState(true)
-  const [highlights, setHighlights] = useState<Highlight[]>([])
-  const [highlightsLoading, setHighlightsLoading] = useState(true)
-  const [selectedUrl, setSelectedUrl] = useState<string | undefined>(undefined)
-  const [readerLoading, setReaderLoading] = useState(false)
-  const [readerContent, setReaderContent] = useState<ReadableContent | undefined>(undefined)
-  const [isCollapsed, setIsCollapsed] = useState(true) // Start collapsed
-  const [isHighlightsCollapsed, setIsHighlightsCollapsed] = useState(true) // Start collapsed
-  const [viewMode, setViewMode] = useState<ViewMode>('compact')
-  const [showHighlights, setShowHighlights] = useState(true)
-  const [selectedHighlightId, setSelectedHighlightId] = useState<string | undefined>(undefined)
-  const [showSettings, setShowSettings] = useState(false)
-  const [currentArticleCoordinate, setCurrentArticleCoordinate] = useState<string | undefined>(undefined)
-  const [currentArticleEventId, setCurrentArticleEventId] = useState<string | undefined>(undefined)
-  const [currentArticle, setCurrentArticle] = useState<NostrEvent | undefined>(undefined) // Store the current article event
-  const [highlightVisibility, setHighlightVisibility] = useState<HighlightVisibility>({
-    nostrverse: true,
-    friends: true,
-    mine: true
-  })
-  const [followedPubkeys, setFollowedPubkeys] = useState<Set<string>>(new Set())
-  const [isRefreshing, setIsRefreshing] = useState(false)
  const activeAccount = Hooks.useActiveAccount()
  const accountManager = Hooks.useAccountManager()
  const eventStore = useEventStore()
-  const highlightButtonRef = useRef<HighlightButtonRef>(null)
  
  const { settings, saveSettings, toastMessage, toastType, clearToast } = useSettings({
    relayPool,
@@ -75,6 +39,79 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
    accountManager
  })

+  const {
+    isCollapsed,
+    setIsCollapsed,
+    isHighlightsCollapsed,
+    setIsHighlightsCollapsed,
+    viewMode,
+    setViewMode,
+    showHighlights,
+    setShowHighlights,
+    selectedHighlightId,
+    setSelectedHighlightId,
+    showSettings,
+    setShowSettings,
+    currentArticleCoordinate,
+    setCurrentArticleCoordinate,
+    currentArticleEventId,
+    setCurrentArticleEventId,
+    currentArticle,
+    setCurrentArticle,
+    highlightVisibility,
+    setHighlightVisibility
+  } = useBookmarksUI({ settings })
+
+  const {
+    bookmarks,
+    bookmarksLoading,
+    highlights,
+    setHighlights,
+    highlightsLoading,
+    setHighlightsLoading,
+    followedPubkeys,
+    isRefreshing,
+    handleFetchHighlights,
+    handleRefreshAll
+  } = useBookmarksData({
+    relayPool,
+    activeAccount,
+    accountManager,
+    naddr,
+    currentArticleCoordinate,
+    currentArticleEventId
+  })
+
+  const {
+    selectedUrl,
+    setSelectedUrl,
+    readerLoading,
+    setReaderLoading,
+    readerContent,
+    setReaderContent,
+    handleSelectUrl
+  } = useContentSelection({
+    relayPool,
+    settings,
+    setIsCollapsed,
+    setShowSettings,
+    setCurrentArticle
+  })
+
+  const {
+    highlightButtonRef,
+    handleTextSelection,
+    handleClearSelection,
+    handleCreateHighlight
+  } = useHighlightCreation({
+    activeAccount,
+    relayPool,
+    currentArticle,
+    selectedUrl,
+    readerContent,
+    onHighlightCreated: (highlight) => setHighlights(prev => [highlight, ...prev])
+  })
+
  // Load nostr-native article if naddr is in URL
  useArticleLoader({
    naddr,
@@ -104,288 +141,61 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
    setCurrentArticleEventId
  })

-  // Load initial data on login
-  useEffect(() => {
-    if (!relayPool || !activeAccount) return
-    handleFetchBookmarks()
-    // Avoid overwriting article-specific highlights during initial article load
-    // If an article is being viewed (naddr present), let useArticleLoader own the first highlights set
-    if (!naddr) {
-      handleFetchHighlights()
-    }
-    handleFetchContacts()
-  }, [relayPool, activeAccount?.pubkey])
-
-  const handleFetchContacts = async () => {
-    if (!relayPool || !activeAccount) return
-    const contacts = await fetchContacts(relayPool, activeAccount.pubkey)
-    setFollowedPubkeys(contacts)
-  }
-
-  // Apply UI settings
-  useEffect(() => {
-    if (settings.defaultViewMode) setViewMode(settings.defaultViewMode)
-    if (settings.showHighlights !== undefined) setShowHighlights(settings.showHighlights)
-    // Apply default highlight visibility settings
-    setHighlightVisibility({
-      nostrverse: settings.defaultHighlightVisibilityNostrverse !== false,
-      friends: settings.defaultHighlightVisibilityFriends !== false,
-      mine: settings.defaultHighlightVisibilityMine !== false
-    })
-    // Always start with both panels collapsed on initial load
-    // Don't apply saved collapse settings on initial load - let user control them
-  }, [settings])
-
-  const handleFetchBookmarks = async () => {
-    if (!relayPool || !activeAccount) return
-    setBookmarksLoading(true)
-    try {
-      const fullAccount = accountManager.getActive()
-      await fetchBookmarks(relayPool, fullAccount || activeAccount, setBookmarks)
-    } finally {
-      setBookmarksLoading(false)
-    }
-  }
-
-  const handleFetchHighlights = async () => {
-    if (!relayPool) return
-    
-    setHighlightsLoading(true)
-    try {
-      // If we're viewing an article, fetch highlights for that article
-      if (currentArticleCoordinate) {
-        const highlightsList: Highlight[] = []
-        await fetchHighlightsForArticle(
-          relayPool, 
-          currentArticleCoordinate, 
-          currentArticleEventId,
-          (highlight) => {
-            // Render each highlight immediately as it arrives
-            highlightsList.push(highlight)
-            setHighlights([...highlightsList].sort((a, b) => b.created_at - a.created_at))
-          }
-        )
-        console.log(`🔄 Refreshed ${highlightsList.length} highlights for article`)
-      } 
-      // Otherwise, if logged in, fetch user's own highlights
-      else if (activeAccount) {
-        const fetchedHighlights = await fetchHighlights(relayPool, activeAccount.pubkey)
-        setHighlights(fetchedHighlights)
-      }
-    } catch (err) {
-      console.error('Failed to fetch highlights:', err)
-    } finally {
-      setHighlightsLoading(false)
-    }
-  }
-
-  const handleRefreshBookmarks = async () => {
-    if (!relayPool || !activeAccount || isRefreshing) return
-    
-    setIsRefreshing(true)
-    try {
-      await handleFetchBookmarks()
-      await handleFetchHighlights()
-      await handleFetchContacts()
-    } catch (err) {
-      console.error('Failed to refresh bookmarks:', err)
-    } finally {
-      setIsRefreshing(false)
-    }
-  }
-
  // Classify highlights with levels based on user context
  const classifiedHighlights = useMemo(() => {
-    return highlights.map(h => {
-      let level: 'mine' | 'friends' | 'nostrverse' = 'nostrverse'
-      if (h.pubkey === activeAccount?.pubkey) {
-        level = 'mine'
-      } else if (followedPubkeys.has(h.pubkey)) {
-        level = 'friends'
-      }
-      return { ...h, level }
-    })
+    return classifyHighlights(highlights, activeAccount?.pubkey, followedPubkeys)
  }, [highlights, activeAccount?.pubkey, followedPubkeys])

-  const handleSelectUrl = async (url: string, bookmark?: BookmarkReference) => {
-    if (!relayPool) return
-    
-    // Update the URL path based on content type
-    if (bookmark && bookmark.kind === 30023) {
-      // For nostr articles, navigate to /a/:naddr
-      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1] || ''
-      if (dTag && bookmark.pubkey) {
-        const pointer = {
-          identifier: dTag,
-          kind: 30023,
-          pubkey: bookmark.pubkey,
-        }
-        const naddr = nip19.naddrEncode(pointer)
-        navigate(`/a/${naddr}`)
-      }
-    } else if (url) {
-      // For external URLs, navigate to /r/:url
-      navigate(`/r/${url}`)
-    }
-    
-    setSelectedUrl(url)
-    setReaderLoading(true)
-    setReaderContent(undefined)
-    setCurrentArticle(undefined) // Clear previous article
-    setShowSettings(false)
-    if (settings.collapseOnArticleOpen !== false) setIsCollapsed(true)
-    
-    try {
-      const content = await loadContent(url, relayPool, bookmark)
-      setReaderContent(content)
-      
-      // Note: currentArticle is set by useArticleLoader when loading Nostr articles
-      // For web bookmarks, there's no article event to set
-    } catch (err) {
-      console.warn('Failed to fetch content:', err)
-    } finally {
-      setReaderLoading(false)
-    }
-  }
-
-  const handleTextSelection = useCallback((text: string) => {
-    highlightButtonRef.current?.updateSelection(text)
-  }, [])
-
-  const handleClearSelection = useCallback(() => {
-    highlightButtonRef.current?.clearSelection()
-  }, [])
-
-  const handleCreateHighlight = useCallback(async (text: string) => {
-    if (!activeAccount || !relayPool) {
-      console.error('Missing requirements for highlight creation')
-      return
-    }
-
-    // Need either a nostr article or an external URL
-    if (!currentArticle && !selectedUrl) {
-      console.error('No source available for highlight creation')
-      return
-    }
-
-    try {
-      // Determine the source: prefer currentArticle (for nostr content), fallback to selectedUrl (for external URLs)
-      const source = currentArticle || selectedUrl!
-      
-      // For context extraction, use article content or reader content
-      const contentForContext = currentArticle 
-        ? currentArticle.content 
-        : readerContent?.markdown || readerContent?.html
-      
-      // Create and publish the highlight
-      const signedEvent = await createHighlight(
-        text,
-        source,
-        activeAccount,
-        relayPool,
-        contentForContext
-      )
-      
-      console.log('✅ Highlight created successfully!')
-      highlightButtonRef.current?.clearSelection()
-      
-      // Immediately add the highlight to the UI (optimistic update)
-      const newHighlight = eventToHighlight(signedEvent)
-      setHighlights(prev => [newHighlight, ...prev])
-    } catch (error) {
-      console.error('Failed to create highlight:', error)
-    }
-  }, [activeAccount, relayPool, currentArticle, selectedUrl, readerContent])
-
  return (
-    <>
-      <div className={`three-pane ${isCollapsed ? 'sidebar-collapsed' : ''} ${isHighlightsCollapsed ? 'highlights-collapsed' : ''}`}>
-        <div className="pane sidebar">
-          <BookmarkList 
-            bookmarks={bookmarks}
-            onSelectUrl={handleSelectUrl}
-            isCollapsed={isCollapsed}
-            onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
-            onLogout={onLogout}
-            viewMode={viewMode}
-            onViewModeChange={setViewMode}
-            selectedUrl={selectedUrl}
-            onOpenSettings={() => {
-              setShowSettings(true)
-              setIsCollapsed(true)
-              setIsHighlightsCollapsed(true)
-            }}
-            onRefresh={handleRefreshBookmarks}
-            isRefreshing={isRefreshing}
-            loading={bookmarksLoading}
-          />
-        </div>
-      <div className="pane main">
-        {showSettings ? (
-          <Settings 
-            settings={settings}
-            onSave={saveSettings}
-            onClose={() => setShowSettings(false)}
-          />
-        ) : (
-          <ContentPanel 
-            loading={readerLoading}
-            title={readerContent?.title}
-            html={readerContent?.html}
-            markdown={readerContent?.markdown}
-            image={readerContent?.image}
-            selectedUrl={selectedUrl}
-            highlights={classifiedHighlights}
-            showHighlights={showHighlights}
-            highlightStyle={settings.highlightStyle || 'marker'}
-            highlightColor={settings.highlightColor || '#ffff00'}
-            onHighlightClick={(id) => {
-              setSelectedHighlightId(id)
-              if (isHighlightsCollapsed) setIsHighlightsCollapsed(false)
-            }}
-            selectedHighlightId={selectedHighlightId}
-            highlightVisibility={highlightVisibility}
-            onTextSelection={handleTextSelection}
-            onClearSelection={handleClearSelection}
-            currentUserPubkey={activeAccount?.pubkey}
-            followedPubkeys={followedPubkeys}
-          />
-        )}
-      </div>
-        <div className="pane highlights">
-          <HighlightsPanel
-            highlights={highlights}
-            loading={highlightsLoading}
-            isCollapsed={isHighlightsCollapsed}
-            onToggleCollapse={() => setIsHighlightsCollapsed(!isHighlightsCollapsed)}
-            onSelectUrl={handleSelectUrl}
-            selectedUrl={selectedUrl}
-            onToggleHighlights={setShowHighlights}
-            selectedHighlightId={selectedHighlightId}
-            onRefresh={handleFetchHighlights}
-            onHighlightClick={setSelectedHighlightId}
-            currentUserPubkey={activeAccount?.pubkey}
-            highlightVisibility={highlightVisibility}
-            onHighlightVisibilityChange={setHighlightVisibility}
-            followedPubkeys={followedPubkeys}
-          />
-        </div>
-      </div>
-      {activeAccount && relayPool && (
-        <HighlightButton 
-          ref={highlightButtonRef} 
-          onHighlight={handleCreateHighlight}
-          highlightColor={settings.highlightColor || '#ffff00'}
-        />
-      )}
-      {toastMessage && (
-        <Toast
-          message={toastMessage}
-          type={toastType}
-          onClose={clearToast}
-        />
-      )}
-    </>
+    <ThreePaneLayout
+      isCollapsed={isCollapsed}
+      isHighlightsCollapsed={isHighlightsCollapsed}
+      showSettings={showSettings}
+      bookmarks={bookmarks}
+      bookmarksLoading={bookmarksLoading}
+      viewMode={viewMode}
+      isRefreshing={isRefreshing}
+      onToggleSidebar={() => setIsCollapsed(!isCollapsed)}
+      onLogout={onLogout}
+      onViewModeChange={setViewMode}
+      onOpenSettings={() => {
+        setShowSettings(true)
+        setIsCollapsed(true)
+        setIsHighlightsCollapsed(true)
+      }}
+      onRefresh={handleRefreshAll}
+      readerLoading={readerLoading}
+      readerContent={readerContent}
+      selectedUrl={selectedUrl}
+      settings={settings}
+      onSaveSettings={saveSettings}
+      onCloseSettings={() => setShowSettings(false)}
+      classifiedHighlights={classifiedHighlights}
+      showHighlights={showHighlights}
+      selectedHighlightId={selectedHighlightId}
+      highlightVisibility={highlightVisibility}
+      onHighlightClick={(id) => {
+        setSelectedHighlightId(id)
+        if (isHighlightsCollapsed) setIsHighlightsCollapsed(false)
+      }}
+      onTextSelection={handleTextSelection}
+      onClearSelection={handleClearSelection}
+      currentUserPubkey={activeAccount?.pubkey}
+      followedPubkeys={followedPubkeys}
+      highlights={highlights}
+      highlightsLoading={highlightsLoading}
+      onToggleHighlightsPanel={() => setIsHighlightsCollapsed(!isHighlightsCollapsed)}
+      onSelectUrl={handleSelectUrl}
+      onToggleHighlights={setShowHighlights}
+      onRefreshHighlights={handleFetchHighlights}
+      onHighlightVisibilityChange={setHighlightVisibility}
+      highlightButtonRef={highlightButtonRef}
+      onCreateHighlight={handleCreateHighlight}
+      hasActiveAccount={!!(activeAccount && relayPool)}
+      toastMessage={toastMessage ?? undefined}
+      toastType={toastType}
+      onClearToast={clearToast}
+    />
  )
 }

--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -1,15 +1,16 @@
-import React, { useMemo, useEffect, useRef, useState, useCallback } from 'react'
+import React, { useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
-import { applyHighlightsToHTML } from '../utils/highlightMatching'
 import { readingTime } from 'reading-time-estimator'
-import { filterHighlightsByUrl } from '../utils/urlHelpers'
 import { hexToRgb } from '../utils/colorHelpers'
 import ReaderHeader from './ReaderHeader'
 import { HighlightVisibility } from './HighlightsPanel'
+import { useMarkdownToHTML } from '../hooks/useMarkdownToHTML'
+import { useHighlightedContent } from '../hooks/useHighlightedContent'
+import { useHighlightInteractions } from '../hooks/useHighlightInteractions'

 interface ContentPanelProps {
  loading: boolean
@@ -48,175 +49,40 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
  highlightVisibility = { nostrverse: true, friends: true, mine: true },
  currentUserPubkey,
  followedPubkeys = new Set(),
-  // For highlight creation
  onTextSelection,
  onClearSelection
 }) => {
-  const contentRef = useRef<HTMLDivElement>(null)
-  const markdownPreviewRef = useRef<HTMLDivElement>(null)
-  const [renderedHtml, setRenderedHtml] = useState<string>('')
+  const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef } = useMarkdownToHTML(markdown)
  
-  // Filter highlights by URL and visibility settings
-  const relevantHighlights = useMemo(() => {
-    console.log('🔍 ContentPanel: Processing highlights', {
-      totalHighlights: highlights.length,
-      selectedUrl,
-      showHighlights
-    })
-    
-    const urlFiltered = filterHighlightsByUrl(highlights, selectedUrl)
-    console.log('📌 URL filtered highlights:', urlFiltered.length)
-    
-    // Apply visibility filtering
-    const filtered = urlFiltered
-      .map(h => {
-        // Classify highlight level
-        let level: 'mine' | 'friends' | 'nostrverse' = 'nostrverse'
-        if (h.pubkey === currentUserPubkey) {
-          level = 'mine'
-        } else if (followedPubkeys.has(h.pubkey)) {
-          level = 'friends'
-        }
-        return { ...h, level }
-      })
-      .filter(h => {
-        // Filter by visibility settings
-        if (h.level === 'mine') return highlightVisibility.mine
-        if (h.level === 'friends') return highlightVisibility.friends
-        return highlightVisibility.nostrverse
-      })
-      
-    console.log('✅ Relevant highlights after filtering:', filtered.length, filtered.map(h => h.content.substring(0, 30)))
-    return filtered
-  }, [selectedUrl, highlights, highlightVisibility, currentUserPubkey, followedPubkeys, showHighlights])
+  const { finalHtml, relevantHighlights } = useHighlightedContent({
+    html,
+    markdown,
+    renderedMarkdownHtml,
+    highlights,
+    showHighlights,
+    highlightStyle,
+    selectedUrl,
+    highlightVisibility,
+    currentUserPubkey,
+    followedPubkeys
+  })

-  // Convert markdown to HTML when markdown content changes
-  useEffect(() => {
-    if (!markdown) {
-      setRenderedHtml('')
-      return
-    }
+  const { contentRef, handleMouseUp } = useHighlightInteractions({
+    onHighlightClick,
+    selectedHighlightId,
+    onTextSelection,
+    onClearSelection
+  })

-    console.log('📝 Converting markdown to HTML...')
-    
-    // Use requestAnimationFrame to ensure ReactMarkdown has rendered
-    const rafId = requestAnimationFrame(() => {
-      if (markdownPreviewRef.current) {
-        const html = markdownPreviewRef.current.innerHTML
-        console.log('✅ Markdown converted to HTML:', html.length, 'chars')
-        setRenderedHtml(html)
-      } else {
-        console.warn('⚠️ markdownPreviewRef.current is null')
-      }
-    })
-
-    return () => cancelAnimationFrame(rafId)
-  }, [markdown])
-
-  // Prepare the final HTML with highlights applied
-  const finalHtml = useMemo(() => {
-    const sourceHtml = markdown ? renderedHtml : html
-    
-    console.log('🎨 Preparing final HTML:', {
-      hasMarkdown: !!markdown,
-      hasHtml: !!html,
-      renderedHtmlLength: renderedHtml.length,
-      sourceHtmlLength: sourceHtml?.length || 0,
-      showHighlights,
-      relevantHighlightsCount: relevantHighlights.length
-    })
-    
-    if (!sourceHtml) {
-      console.warn('⚠️ No source HTML available')
-      return ''
-    }
-    
-    // Apply highlights if we have them and highlights are enabled
-    if (showHighlights && relevantHighlights.length > 0) {
-      console.log('✨ Applying', relevantHighlights.length, 'highlights to HTML')
-      const highlightedHtml = applyHighlightsToHTML(sourceHtml, relevantHighlights, highlightStyle)
-      console.log('✅ Highlights applied, result length:', highlightedHtml.length)
-      return highlightedHtml
-    }
-    
-    console.log('📄 Returning source HTML without highlights')
-    return sourceHtml
-  }, [html, renderedHtml, markdown, relevantHighlights, showHighlights, highlightStyle])
-
-
-  // Attach click handlers to highlight marks
-  useEffect(() => {
-    if (!onHighlightClick || !contentRef.current) return
-    
-    const marks = contentRef.current.querySelectorAll('mark[data-highlight-id]')
-    const handlers = new Map<Element, () => void>()
-    
-    marks.forEach(mark => {
-      const highlightId = mark.getAttribute('data-highlight-id')
-      if (highlightId) {
-        const handler = () => onHighlightClick(highlightId)
-        mark.addEventListener('click', handler)
-        ;(mark as HTMLElement).style.cursor = 'pointer'
-        handlers.set(mark, handler)
-      }
-    })
-    
-    return () => {
-      handlers.forEach((handler, mark) => {
-        mark.removeEventListener('click', handler)
-      })
-    }
-  }, [onHighlightClick, finalHtml])
-
-  // Scroll to selected highlight in article when clicked from sidebar
-  useEffect(() => {
-    if (!selectedHighlightId || !contentRef.current) return
-    
-    const markElement = contentRef.current.querySelector(`mark[data-highlight-id="${selectedHighlightId}"]`)
-    
-    if (markElement) {
-      markElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
-      
-      // Add pulsing animation after scroll completes
-      const htmlElement = markElement as HTMLElement
-      setTimeout(() => {
-        htmlElement.classList.add('highlight-pulse')
-        setTimeout(() => htmlElement.classList.remove('highlight-pulse'), 1500)
-      }, 500)
-    }
-  }, [selectedHighlightId, finalHtml])
-
-  // Calculate reading time from content (must be before early returns)
  const readingStats = useMemo(() => {
    const content = markdown || html || ''
    if (!content) return null
-    // Strip HTML tags for more accurate word count
    const textContent = content.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ')
    return readingTime(textContent)
  }, [html, markdown])

  const hasHighlights = relevantHighlights.length > 0

-  // Handle text selection for highlight creation
-  const handleMouseUp = useCallback(() => {
-    setTimeout(() => {
-      const selection = window.getSelection()
-      if (!selection || selection.rangeCount === 0) {
-        onClearSelection?.()
-        return
-      }
-
-      const range = selection.getRangeAt(0)
-      const text = selection.toString().trim()
-
-      if (text.length > 0 && contentRef.current?.contains(range.commonAncestorContainer)) {
-        onTextSelection?.(text)
-      } else {
-        onClearSelection?.()
-      }
-    }, 10)
-  }, [onTextSelection, onClearSelection])
-
  if (!selectedUrl) {
    return (
      <div className="reader empty">
@@ -257,8 +123,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
      />
      {markdown || html ? (
        markdown ? (
-          // For markdown, always use finalHtml once it's ready to ensure highlights are applied
-          renderedHtml && finalHtml ? (
+          renderedMarkdownHtml && finalHtml ? (
            <div 
              ref={contentRef} 
              className="reader-markdown" 
@@ -266,7 +131,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
              onMouseUp={handleMouseUp}
            />
          ) : (
-            // Show loading state while markdown is being converted to HTML
            <div className="reader-markdown">
              <div className="loading-spinner">
                <FontAwesomeIcon icon={faSpinner} spin size="sm" />
@@ -274,7 +138,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
            </div>
          )
        ) : (
-          // For HTML, use finalHtml directly
          <div 
            ref={contentRef} 
            className="reader-html" 
--- a/src/components/HighlightsPanel.tsx
+++ b/src/components/HighlightsPanel.tsx
@@ -1,8 +1,11 @@
-import React, { useMemo, useState } from 'react'
+import React, { useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faHighlighter, faEye, faEyeSlash, faRotate, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { HighlightItem } from './HighlightItem'
+import { useFilteredHighlights } from '../hooks/useFilteredHighlights'
+import HighlightsPanelCollapsed from './HighlightsPanel/HighlightsPanelCollapsed'
+import HighlightsPanelHeader from './HighlightsPanel/HighlightsPanelHeader'

 export interface HighlightVisibility {
  nostrverse: boolean
@@ -51,153 +54,36 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
    onToggleHighlights?.(newValue)
  }
  
-  // Filter highlights based on visibility levels and URL
-  const filteredHighlights = useMemo(() => {
-    if (!selectedUrl) return highlights
-    
-    let urlFiltered = highlights
-    
-    // For Nostr articles (URL starts with "nostr:"), we don't need to filter by URL
-    // because we already fetched highlights specifically for this article
-    if (!selectedUrl.startsWith('nostr:')) {
-      // For web URLs, filter by URL matching
-      const normalizeUrl = (url: string) => {
-        try {
-          const urlObj = new URL(url.startsWith('http') ? url : `https://${url}`)
-          return `${urlObj.hostname.replace(/^www\./, '')}${urlObj.pathname}`.replace(/\/$/, '').toLowerCase()
-        } catch {
-          return url.replace(/^https?:\/\//, '').replace(/^www\./, '').replace(/\/$/, '').toLowerCase()
-        }
-      }
-      
-      const normalizedSelected = normalizeUrl(selectedUrl)
-      
-      urlFiltered = highlights.filter(h => {
-        if (!h.urlReference) return false
-        const normalizedRef = normalizeUrl(h.urlReference)
-        return normalizedSelected === normalizedRef || 
-               normalizedSelected.includes(normalizedRef) ||
-               normalizedRef.includes(normalizedSelected)
-      })
-    }
-    
-    // Classify and filter by visibility levels
-    return urlFiltered
-      .map(h => {
-        // Classify highlight level
-        let level: 'mine' | 'friends' | 'nostrverse' = 'nostrverse'
-        if (h.pubkey === currentUserPubkey) {
-          level = 'mine'
-        } else if (followedPubkeys.has(h.pubkey)) {
-          level = 'friends'
-        }
-        return { ...h, level }
-      })
-      .filter(h => {
-        // Filter by visibility settings
-        if (h.level === 'mine') return highlightVisibility.mine
-        if (h.level === 'friends') return highlightVisibility.friends
-        return highlightVisibility.nostrverse
-      })
-  }, [highlights, selectedUrl, highlightVisibility, currentUserPubkey, followedPubkeys])
+  const filteredHighlights = useFilteredHighlights({
+    highlights,
+    selectedUrl,
+    highlightVisibility,
+    currentUserPubkey,
+    followedPubkeys
+  })
  
  if (isCollapsed) {
-    const hasHighlights = filteredHighlights.length > 0
-    
    return (
-      <div className="highlights-container collapsed">
-        <button
-          onClick={onToggleCollapse}
-          className={`toggle-highlights-btn with-icon ${hasHighlights ? 'has-highlights' : ''}`}
-          title="Expand highlights panel"
-          aria-label="Expand highlights panel"
-        >
-          <FontAwesomeIcon icon={faHighlighter} className={hasHighlights ? 'glow' : ''} />
-          <FontAwesomeIcon icon={faChevronRight} />
-        </button>
-      </div>
+      <HighlightsPanelCollapsed 
+        hasHighlights={filteredHighlights.length > 0} 
+        onToggleCollapse={onToggleCollapse}
+      />
    )
  }

  return (
    <div className="highlights-container">
-      <div className="highlights-header">
-        <div className="highlights-actions">
-          <div className="highlights-actions-left">
-            {onHighlightVisibilityChange && (
-              <div className="highlight-level-toggles">
-                <button
-                  onClick={() => onHighlightVisibilityChange({ 
-                    ...highlightVisibility, 
-                    nostrverse: !highlightVisibility.nostrverse 
-                  })}
-                  className={`level-toggle-btn ${highlightVisibility.nostrverse ? 'active' : ''}`}
-                  title="Toggle nostrverse highlights"
-                  aria-label="Toggle nostrverse highlights"
-                  style={{ color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
-                >
-                  <FontAwesomeIcon icon={faNetworkWired} />
-                </button>
-                <button
-                  onClick={() => onHighlightVisibilityChange({ 
-                    ...highlightVisibility, 
-                    friends: !highlightVisibility.friends 
-                  })}
-                  className={`level-toggle-btn ${highlightVisibility.friends ? 'active' : ''}`}
-                  title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"}
-                  aria-label="Toggle friends highlights"
-                  style={{ color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined }}
-                  disabled={!currentUserPubkey}
-                >
-                  <FontAwesomeIcon icon={faUserGroup} />
-                </button>
-                <button
-                  onClick={() => onHighlightVisibilityChange({ 
-                    ...highlightVisibility, 
-                    mine: !highlightVisibility.mine 
-                  })}
-                  className={`level-toggle-btn ${highlightVisibility.mine ? 'active' : ''}`}
-                  title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"}
-                  aria-label="Toggle my highlights"
-                  style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
-                  disabled={!currentUserPubkey}
-                >
-                  <FontAwesomeIcon icon={faUser} />
-                </button>
-              </div>
-            )}
-            {onRefresh && (
-              <button
-                onClick={onRefresh}
-                className="refresh-highlights-btn"
-                title="Refresh highlights"
-                aria-label="Refresh highlights"
-                disabled={loading}
-              >
-                <FontAwesomeIcon icon={faRotate} spin={loading} />
-              </button>
-            )}
-            {filteredHighlights.length > 0 && (
-              <button
-                onClick={handleToggleHighlights}
-                className="toggle-highlight-display-btn"
-                title={showHighlights ? 'Hide highlights' : 'Show highlights'}
-                aria-label={showHighlights ? 'Hide highlights' : 'Show highlights'}
-              >
-                <FontAwesomeIcon icon={showHighlights ? faEye : faEyeSlash} />
-              </button>
-            )}
-          </div>
-          <button
-            onClick={onToggleCollapse}
-            className="toggle-highlights-btn"
-            title="Collapse highlights panel"
-            aria-label="Collapse highlights panel"
-          >
-            <FontAwesomeIcon icon={faChevronRight} rotation={180} />
-          </button>
-        </div>
-      </div>
+      <HighlightsPanelHeader
+        loading={loading}
+        hasHighlights={filteredHighlights.length > 0}
+        showHighlights={showHighlights}
+        highlightVisibility={highlightVisibility}
+        currentUserPubkey={currentUserPubkey}
+        onToggleHighlights={handleToggleHighlights}
+        onRefresh={onRefresh}
+        onToggleCollapse={onToggleCollapse}
+        onHighlightVisibilityChange={onHighlightVisibilityChange}
+      />

      {loading && filteredHighlights.length === 0 ? (
        <div className="highlights-loading">
--- a/src/components/HighlightsPanel/HighlightsPanelCollapsed.tsx
+++ b/src/components/HighlightsPanel/HighlightsPanelCollapsed.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHighlighter, faChevronRight } from '@fortawesome/free-solid-svg-icons'
+
+interface HighlightsPanelCollapsedProps {
+  hasHighlights: boolean
+  onToggleCollapse: () => void
+}
+
+const HighlightsPanelCollapsed: React.FC<HighlightsPanelCollapsedProps> = ({
+  hasHighlights,
+  onToggleCollapse
+}) => {
+  return (
+    <div className="highlights-container collapsed">
+      <button
+        onClick={onToggleCollapse}
+        className={`toggle-highlights-btn with-icon ${hasHighlights ? 'has-highlights' : ''}`}
+        title="Expand highlights panel"
+        aria-label="Expand highlights panel"
+      >
+        <FontAwesomeIcon icon={faHighlighter} className={hasHighlights ? 'glow' : ''} />
+        <FontAwesomeIcon icon={faChevronRight} />
+      </button>
+    </div>
+  )
+}
+
+export default HighlightsPanelCollapsed
+
--- a/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
+++ b/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
@@ -0,0 +1,111 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronRight, faEye, faEyeSlash, faRotate, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
+import { HighlightVisibility } from '../HighlightsPanel'
+
+interface HighlightsPanelHeaderProps {
+  loading: boolean
+  hasHighlights: boolean
+  showHighlights: boolean
+  highlightVisibility: HighlightVisibility
+  currentUserPubkey?: string
+  onToggleHighlights: () => void
+  onRefresh?: () => void
+  onToggleCollapse: () => void
+  onHighlightVisibilityChange?: (visibility: HighlightVisibility) => void
+}
+
+const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
+  loading,
+  hasHighlights,
+  showHighlights,
+  highlightVisibility,
+  currentUserPubkey,
+  onToggleHighlights,
+  onRefresh,
+  onToggleCollapse,
+  onHighlightVisibilityChange
+}) => {
+  return (
+    <div className="highlights-header">
+      <div className="highlights-actions">
+        <div className="highlights-actions-left">
+          {onHighlightVisibilityChange && (
+            <div className="highlight-level-toggles">
+              <button
+                onClick={() => onHighlightVisibilityChange({ 
+                  ...highlightVisibility, 
+                  nostrverse: !highlightVisibility.nostrverse 
+                })}
+                className={`level-toggle-btn ${highlightVisibility.nostrverse ? 'active' : ''}`}
+                title="Toggle nostrverse highlights"
+                aria-label="Toggle nostrverse highlights"
+                style={{ color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
+              >
+                <FontAwesomeIcon icon={faNetworkWired} />
+              </button>
+              <button
+                onClick={() => onHighlightVisibilityChange({ 
+                  ...highlightVisibility, 
+                  friends: !highlightVisibility.friends 
+                })}
+                className={`level-toggle-btn ${highlightVisibility.friends ? 'active' : ''}`}
+                title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"}
+                aria-label="Toggle friends highlights"
+                style={{ color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined }}
+                disabled={!currentUserPubkey}
+              >
+                <FontAwesomeIcon icon={faUserGroup} />
+              </button>
+              <button
+                onClick={() => onHighlightVisibilityChange({ 
+                  ...highlightVisibility, 
+                  mine: !highlightVisibility.mine 
+                })}
+                className={`level-toggle-btn ${highlightVisibility.mine ? 'active' : ''}`}
+                title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"}
+                aria-label="Toggle my highlights"
+                style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
+                disabled={!currentUserPubkey}
+              >
+                <FontAwesomeIcon icon={faUser} />
+              </button>
+            </div>
+          )}
+          {onRefresh && (
+            <button
+              onClick={onRefresh}
+              className="refresh-highlights-btn"
+              title="Refresh highlights"
+              aria-label="Refresh highlights"
+              disabled={loading}
+            >
+              <FontAwesomeIcon icon={faRotate} spin={loading} />
+            </button>
+          )}
+          {hasHighlights && (
+            <button
+              onClick={onToggleHighlights}
+              className="toggle-highlight-display-btn"
+              title={showHighlights ? 'Hide highlights' : 'Show highlights'}
+              aria-label={showHighlights ? 'Hide highlights' : 'Show highlights'}
+            >
+              <FontAwesomeIcon icon={showHighlights ? faEye : faEyeSlash} />
+            </button>
+          )}
+        </div>
+        <button
+          onClick={onToggleCollapse}
+          className="toggle-highlights-btn"
+          title="Collapse highlights panel"
+          aria-label="Collapse highlights panel"
+        >
+          <FontAwesomeIcon icon={faChevronRight} rotation={180} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default HighlightsPanelHeader
+
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { faTimes, faList, faThLarge, faImage, faUnderline, faHighlighter, faUndo, faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons'
+import { faTimes, faUndo } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../services/settingsService'
 import IconButton from './IconButton'
-import ColorPicker from './ColorPicker'
-import FontSelector from './FontSelector'
-import { loadFont, getFontFamily } from '../utils/fontLoader'
-import { hexToRgb } from '../utils/colorHelpers'
+import { loadFont } from '../utils/fontLoader'
+import ReadingDisplaySettings from './Settings/ReadingDisplaySettings'
+import LayoutNavigationSettings from './Settings/LayoutNavigationSettings'
+import StartupPreferencesSettings from './Settings/StartupPreferencesSettings'

 const DEFAULT_SETTINGS: UserSettings = {
  collapseOnArticleOpen: true,
@@ -48,29 +48,28 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
  }, [])

  useEffect(() => {
-    // Load font for preview when it changes
    const fontToLoad = localSettings.readingFont || 'source-serif-4'
    loadFont(fontToLoad).catch(err => console.warn('Failed to load preview font:', fontToLoad, err))
  }, [localSettings.readingFont])

-  // Auto-save settings whenever they change (except on initial mount)
  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false
      return
    }
-    
    onSave(localSettings)
  }, [localSettings, onSave])

-  const previewFontFamily = getFontFamily(localSettings.readingFont || 'source-serif-4')
-
  const handleResetToDefaults = () => {
    if (confirm('Reset all settings to defaults?')) {
      setLocalSettings(DEFAULT_SETTINGS)
    }
  }

+  const handleUpdate = (updates: Partial<UserSettings>) => {
+    setLocalSettings({ ...localSettings, ...updates })
+  }
+
  return (
    <div className="settings-view">
      <div className="settings-header">
@@ -94,199 +93,9 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
      </div>

      <div className="settings-content">
-          <div className="settings-section">
-            <h3 className="section-title">Reading & Display</h3>
-            
-            <div className="setting-group setting-inline">
-              <label htmlFor="readingFont">Reading Font</label>
-              <FontSelector
-                value={localSettings.readingFont || 'source-serif-4'}
-                onChange={(font) => setLocalSettings({ ...localSettings, readingFont: font })}
-              />
-            </div>
-
-            <div className="setting-group setting-inline">
-              <label>Font Size</label>
-              <div className="setting-buttons">
-                {[14, 16, 18, 20, 22].map(size => (
-                  <button
-                    key={size}
-                    onClick={() => setLocalSettings({ ...localSettings, fontSize: size })}
-                    className={`font-size-btn ${(localSettings.fontSize || 18) === size ? 'active' : ''}`}
-                    title={`${size}px`}
-                    style={{ fontSize: `${size - 2}px` }}
-                  >
-                    A
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            <div className="setting-group">
-              <label htmlFor="showHighlights" className="checkbox-label">
-                <input
-                  id="showHighlights"
-                  type="checkbox"
-                  checked={localSettings.showHighlights !== false}
-                  onChange={(e) => setLocalSettings({ ...localSettings, showHighlights: e.target.checked })}
-                  className="setting-checkbox"
-                />
-                <span>Show highlights</span>
-              </label>
-            </div>
-
-            <div className="setting-group setting-inline">
-              <label>Highlight Style</label>
-              <div className="setting-buttons">
-                <IconButton 
-                  icon={faHighlighter} 
-                  onClick={() => setLocalSettings({ ...localSettings, highlightStyle: 'marker' })} 
-                  title="Text marker style" 
-                  ariaLabel="Text marker style" 
-                  variant={(localSettings.highlightStyle || 'marker') === 'marker' ? 'primary' : 'ghost'} 
-                />
-                <IconButton 
-                  icon={faUnderline} 
-                  onClick={() => setLocalSettings({ ...localSettings, highlightStyle: 'underline' })} 
-                  title="Underline style" 
-                  ariaLabel="Underline style" 
-                  variant={localSettings.highlightStyle === 'underline' ? 'primary' : 'ghost'} 
-                />
-              </div>
-            </div>
-
-
-            <div className="setting-group setting-inline">
-              <label className="setting-label">My Highlights</label>
-              <div className="setting-control">
-                <ColorPicker
-                  selectedColor={localSettings.highlightColorMine || '#ffff00'}
-                  onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorMine: color })}
-                />
-              </div>
-            </div>
-
-            <div className="setting-group setting-inline">
-              <label className="setting-label">Friends Highlights</label>
-              <div className="setting-control">
-                <ColorPicker
-                  selectedColor={localSettings.highlightColorFriends || '#f97316'}
-                  onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorFriends: color })}
-                />
-              </div>
-            </div>
-
-            <div className="setting-group setting-inline">
-              <label className="setting-label">Nostrverse Highlights</label>
-              <div className="setting-control">
-                <ColorPicker
-                  selectedColor={localSettings.highlightColorNostrverse || '#9333ea'}
-                  onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorNostrverse: color })}
-                />
-              </div>
-            </div>
-
-            <div className="setting-preview">
-              <div className="preview-label">Preview</div>
-              <div 
-                className="preview-content" 
-                style={{ 
-                  fontFamily: previewFontFamily,
-                  fontSize: `${localSettings.fontSize || 18}px`,
-                  '--highlight-rgb': hexToRgb(localSettings.highlightColor || '#ffff00')
-                } as React.CSSProperties}
-              >
-                <h3>The Quick Brown Fox</h3>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span className={localSettings.showHighlights !== false ? `content-highlight-${localSettings.highlightStyle || 'marker'} level-mine` : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span className={localSettings.showHighlights !== false ? `content-highlight-${localSettings.highlightStyle || 'marker'} level-friends` : ""}>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
-                <p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <span className={localSettings.showHighlights !== false ? `content-highlight-${localSettings.highlightStyle || 'marker'} level-nostrverse` : ""}>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</span> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
-                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
-              </div>
-            </div>
-          </div>
-
-          <div className="settings-section">
-            <h3 className="section-title">Layout & Navigation</h3>
-            
-            <div className="setting-group setting-inline">
-              <label>Default View Mode</label>
-              <div className="setting-buttons">
-                <IconButton icon={faList} onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'compact' })} title="Compact list view" ariaLabel="Compact list view" variant={(localSettings.defaultViewMode || 'compact') === 'compact' ? 'primary' : 'ghost'} />
-                <IconButton icon={faThLarge} onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'cards' })} title="Cards view" ariaLabel="Cards view" variant={localSettings.defaultViewMode === 'cards' ? 'primary' : 'ghost'} />
-                <IconButton icon={faImage} onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'large' })} title="Large preview view" ariaLabel="Large preview view" variant={localSettings.defaultViewMode === 'large' ? 'primary' : 'ghost'} />
-              </div>
-            </div>
-
-            <div className="setting-group">
-              <label htmlFor="collapseOnArticleOpen" className="checkbox-label">
-                <input
-                  id="collapseOnArticleOpen"
-                  type="checkbox"
-                  checked={localSettings.collapseOnArticleOpen !== false}
-                  onChange={(e) => setLocalSettings({ ...localSettings, collapseOnArticleOpen: e.target.checked })}
-                  className="setting-checkbox"
-                />
-                <span>Collapse bookmark bar when opening an article</span>
-              </label>
-            </div>
-          </div>
-
-          <div className="settings-section">
-            <h3 className="section-title">Startup Preferences</h3>
-            
-            <div className="setting-group">
-              <label htmlFor="sidebarCollapsed" className="checkbox-label">
-                <input
-                  id="sidebarCollapsed"
-                  type="checkbox"
-                  checked={localSettings.sidebarCollapsed !== false}
-                  onChange={(e) => setLocalSettings({ ...localSettings, sidebarCollapsed: e.target.checked })}
-                  className="setting-checkbox"
-                />
-                <span>Start with bookmarks sidebar collapsed</span>
-              </label>
-            </div>
-
-            <div className="setting-group">
-              <label htmlFor="highlightsCollapsed" className="checkbox-label">
-                <input
-                  id="highlightsCollapsed"
-                  type="checkbox"
-                  checked={localSettings.highlightsCollapsed !== false}
-                  onChange={(e) => setLocalSettings({ ...localSettings, highlightsCollapsed: e.target.checked })}
-                  className="setting-checkbox"
-                />
-                <span>Start with highlights panel collapsed</span>
-              </label>
-            </div>
-
-            <div className="setting-group setting-inline">
-              <label>Default Highlight Visibility</label>
-              <div className="setting-buttons">
-                <IconButton 
-                  icon={faNetworkWired} 
-                  onClick={() => setLocalSettings({ ...localSettings, defaultHighlightVisibilityNostrverse: !(localSettings.defaultHighlightVisibilityNostrverse !== false) })} 
-                  title="Nostrverse highlights" 
-                  ariaLabel="Toggle nostrverse highlights by default" 
-                  variant={(localSettings.defaultHighlightVisibilityNostrverse !== false) ? 'primary' : 'ghost'} 
-                />
-                <IconButton 
-                  icon={faUserGroup} 
-                  onClick={() => setLocalSettings({ ...localSettings, defaultHighlightVisibilityFriends: !(localSettings.defaultHighlightVisibilityFriends !== false) })} 
-                  title="Friends highlights" 
-                  ariaLabel="Toggle friends highlights by default" 
-                  variant={(localSettings.defaultHighlightVisibilityFriends !== false) ? 'primary' : 'ghost'} 
-                />
-                <IconButton 
-                  icon={faUser} 
-                  onClick={() => setLocalSettings({ ...localSettings, defaultHighlightVisibilityMine: !(localSettings.defaultHighlightVisibilityMine !== false) })} 
-                  title="My highlights" 
-                  ariaLabel="Toggle my highlights by default" 
-                  variant={(localSettings.defaultHighlightVisibilityMine !== false) ? 'primary' : 'ghost'} 
-                />
-              </div>
-            </div>
-          </div>
+        <ReadingDisplaySettings settings={localSettings} onUpdate={handleUpdate} />
+        <LayoutNavigationSettings settings={localSettings} onUpdate={handleUpdate} />
+        <StartupPreferencesSettings settings={localSettings} onUpdate={handleUpdate} />
      </div>
    </div>
  )
--- a/src/components/Settings/LayoutNavigationSettings.tsx
+++ b/src/components/Settings/LayoutNavigationSettings.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../../services/settingsService'
+import IconButton from '../IconButton'
+
+interface LayoutNavigationSettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+}
+
+const LayoutNavigationSettings: React.FC<LayoutNavigationSettingsProps> = ({ settings, onUpdate }) => {
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Layout & Navigation</h3>
+      
+      <div className="setting-group setting-inline">
+        <label>Default View Mode</label>
+        <div className="setting-buttons">
+          <IconButton 
+            icon={faList} 
+            onClick={() => onUpdate({ defaultViewMode: 'compact' })} 
+            title="Compact list view" 
+            ariaLabel="Compact list view" 
+            variant={(settings.defaultViewMode || 'compact') === 'compact' ? 'primary' : 'ghost'} 
+          />
+          <IconButton 
+            icon={faThLarge} 
+            onClick={() => onUpdate({ defaultViewMode: 'cards' })} 
+            title="Cards view" 
+            ariaLabel="Cards view" 
+            variant={settings.defaultViewMode === 'cards' ? 'primary' : 'ghost'} 
+          />
+          <IconButton 
+            icon={faImage} 
+            onClick={() => onUpdate({ defaultViewMode: 'large' })} 
+            title="Large preview view" 
+            ariaLabel="Large preview view" 
+            variant={settings.defaultViewMode === 'large' ? 'primary' : 'ghost'} 
+          />
+        </div>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="collapseOnArticleOpen" className="checkbox-label">
+          <input
+            id="collapseOnArticleOpen"
+            type="checkbox"
+            checked={settings.collapseOnArticleOpen !== false}
+            onChange={(e) => onUpdate({ collapseOnArticleOpen: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Collapse bookmark bar when opening an article</span>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+export default LayoutNavigationSettings
+
--- a/src/components/Settings/ReadingDisplaySettings.tsx
+++ b/src/components/Settings/ReadingDisplaySettings.tsx
@@ -0,0 +1,132 @@
+import React from 'react'
+import { faHighlighter, faUnderline } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../../services/settingsService'
+import IconButton from '../IconButton'
+import ColorPicker from '../ColorPicker'
+import FontSelector from '../FontSelector'
+import { getFontFamily } from '../../utils/fontLoader'
+import { hexToRgb } from '../../utils/colorHelpers'
+
+interface ReadingDisplaySettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+}
+
+const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ settings, onUpdate }) => {
+  const previewFontFamily = getFontFamily(settings.readingFont || 'source-serif-4')
+
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Reading & Display</h3>
+      
+      <div className="setting-group setting-inline">
+        <label htmlFor="readingFont">Reading Font</label>
+        <FontSelector
+          value={settings.readingFont || 'source-serif-4'}
+          onChange={(font) => onUpdate({ readingFont: font })}
+        />
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label>Font Size</label>
+        <div className="setting-buttons">
+          {[14, 16, 18, 20, 22].map(size => (
+            <button
+              key={size}
+              onClick={() => onUpdate({ fontSize: size })}
+              className={`font-size-btn ${(settings.fontSize || 18) === size ? 'active' : ''}`}
+              title={`${size}px`}
+              style={{ fontSize: `${size - 2}px` }}
+            >
+              A
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="showHighlights" className="checkbox-label">
+          <input
+            id="showHighlights"
+            type="checkbox"
+            checked={settings.showHighlights !== false}
+            onChange={(e) => onUpdate({ showHighlights: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Show highlights</span>
+        </label>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label>Highlight Style</label>
+        <div className="setting-buttons">
+          <IconButton 
+            icon={faHighlighter} 
+            onClick={() => onUpdate({ highlightStyle: 'marker' })} 
+            title="Text marker style" 
+            ariaLabel="Text marker style" 
+            variant={(settings.highlightStyle || 'marker') === 'marker' ? 'primary' : 'ghost'} 
+          />
+          <IconButton 
+            icon={faUnderline} 
+            onClick={() => onUpdate({ highlightStyle: 'underline' })} 
+            title="Underline style" 
+            ariaLabel="Underline style" 
+            variant={settings.highlightStyle === 'underline' ? 'primary' : 'ghost'} 
+          />
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label className="setting-label">My Highlights</label>
+        <div className="setting-control">
+          <ColorPicker
+            selectedColor={settings.highlightColorMine || '#ffff00'}
+            onColorChange={(color) => onUpdate({ highlightColorMine: color })}
+          />
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label className="setting-label">Friends Highlights</label>
+        <div className="setting-control">
+          <ColorPicker
+            selectedColor={settings.highlightColorFriends || '#f97316'}
+            onColorChange={(color) => onUpdate({ highlightColorFriends: color })}
+          />
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label className="setting-label">Nostrverse Highlights</label>
+        <div className="setting-control">
+          <ColorPicker
+            selectedColor={settings.highlightColorNostrverse || '#9333ea'}
+            onColorChange={(color) => onUpdate({ highlightColorNostrverse: color })}
+          />
+        </div>
+      </div>
+
+      <div className="setting-preview">
+        <div className="preview-label">Preview</div>
+        <div 
+          className="preview-content" 
+          style={{ 
+            fontFamily: previewFontFamily,
+            fontSize: `${settings.fontSize || 18}px`,
+            '--highlight-rgb': hexToRgb(settings.highlightColor || '#ffff00')
+          } as React.CSSProperties}
+        >
+          <h3>The Quick Brown Fox</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span className={settings.showHighlights !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-mine` : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span className={settings.showHighlights !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-friends` : ""}>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+          <p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <span className={settings.showHighlights !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-nostrverse` : ""}>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</span> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
+          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ReadingDisplaySettings
+
--- a/src/components/Settings/StartupPreferencesSettings.tsx
+++ b/src/components/Settings/StartupPreferencesSettings.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import { faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../../services/settingsService'
+import IconButton from '../IconButton'
+
+interface StartupPreferencesSettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+}
+
+const StartupPreferencesSettings: React.FC<StartupPreferencesSettingsProps> = ({ settings, onUpdate }) => {
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Startup Preferences</h3>
+      
+      <div className="setting-group">
+        <label htmlFor="sidebarCollapsed" className="checkbox-label">
+          <input
+            id="sidebarCollapsed"
+            type="checkbox"
+            checked={settings.sidebarCollapsed !== false}
+            onChange={(e) => onUpdate({ sidebarCollapsed: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Start with bookmarks sidebar collapsed</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="highlightsCollapsed" className="checkbox-label">
+          <input
+            id="highlightsCollapsed"
+            type="checkbox"
+            checked={settings.highlightsCollapsed !== false}
+            onChange={(e) => onUpdate({ highlightsCollapsed: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Start with highlights panel collapsed</span>
+        </label>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label>Default Highlight Visibility</label>
+        <div className="setting-buttons">
+          <IconButton 
+            icon={faNetworkWired} 
+            onClick={() => onUpdate({ defaultHighlightVisibilityNostrverse: !(settings.defaultHighlightVisibilityNostrverse !== false) })} 
+            title="Nostrverse highlights" 
+            ariaLabel="Toggle nostrverse highlights by default" 
+            variant={(settings.defaultHighlightVisibilityNostrverse !== false) ? 'primary' : 'ghost'} 
+          />
+          <IconButton 
+            icon={faUserGroup} 
+            onClick={() => onUpdate({ defaultHighlightVisibilityFriends: !(settings.defaultHighlightVisibilityFriends !== false) })} 
+            title="Friends highlights" 
+            ariaLabel="Toggle friends highlights by default" 
+            variant={(settings.defaultHighlightVisibilityFriends !== false) ? 'primary' : 'ghost'} 
+          />
+          <IconButton 
+            icon={faUser} 
+            onClick={() => onUpdate({ defaultHighlightVisibilityMine: !(settings.defaultHighlightVisibilityMine !== false) })} 
+            title="My highlights" 
+            ariaLabel="Toggle my highlights by default" 
+            variant={(settings.defaultHighlightVisibilityMine !== false) ? 'primary' : 'ghost'} 
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default StartupPreferencesSettings
+
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -0,0 +1,158 @@
+import React from 'react'
+import { BookmarkList } from './BookmarkList'
+import ContentPanel from './ContentPanel'
+import { HighlightsPanel } from './HighlightsPanel'
+import Settings from './Settings'
+import Toast from './Toast'
+import { HighlightButton } from './HighlightButton'
+import { ViewMode } from './Bookmarks'
+import { Bookmark } from '../types/bookmarks'
+import { Highlight } from '../types/highlights'
+import { ReadableContent } from '../services/readerService'
+import { UserSettings } from '../services/settingsService'
+import { HighlightVisibility } from './HighlightsPanel'
+import { HighlightButtonRef } from './HighlightButton'
+import { BookmarkReference } from '../utils/contentLoader'
+
+interface ThreePaneLayoutProps {
+  // Layout state
+  isCollapsed: boolean
+  isHighlightsCollapsed: boolean
+  showSettings: boolean
+  
+  // Bookmarks pane
+  bookmarks: Bookmark[]
+  bookmarksLoading: boolean
+  viewMode: ViewMode
+  isRefreshing: boolean
+  onToggleSidebar: () => void
+  onLogout: () => void
+  onViewModeChange: (mode: ViewMode) => void
+  onOpenSettings: () => void
+  onRefresh: () => void
+  
+  // Content pane
+  readerLoading: boolean
+  readerContent?: ReadableContent
+  selectedUrl?: string
+  settings: UserSettings
+  onSaveSettings: (settings: UserSettings) => Promise<void>
+  onCloseSettings: () => void
+  classifiedHighlights: Highlight[]
+  showHighlights: boolean
+  selectedHighlightId?: string
+  highlightVisibility: HighlightVisibility
+  onHighlightClick: (id: string) => void
+  onTextSelection: (text: string) => void
+  onClearSelection: () => void
+  currentUserPubkey?: string
+  followedPubkeys: Set<string>
+  
+  // Highlights pane
+  highlights: Highlight[]
+  highlightsLoading: boolean
+  onToggleHighlightsPanel: () => void
+  onSelectUrl: (url: string, bookmark?: BookmarkReference) => void
+  onToggleHighlights: (show: boolean) => void
+  onRefreshHighlights: () => void
+  onHighlightVisibilityChange: (visibility: HighlightVisibility) => void
+  
+  // Highlight button
+  highlightButtonRef: React.RefObject<HighlightButtonRef>
+  onCreateHighlight: (text: string) => void
+  hasActiveAccount: boolean
+  
+  // Toast
+  toastMessage?: string
+  toastType?: 'success' | 'error'
+  onClearToast: () => void
+}
+
+const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
+  return (
+    <>
+      <div className={`three-pane ${props.isCollapsed ? 'sidebar-collapsed' : ''} ${props.isHighlightsCollapsed ? 'highlights-collapsed' : ''}`}>
+        <div className="pane sidebar">
+          <BookmarkList 
+            bookmarks={props.bookmarks}
+            onSelectUrl={props.onSelectUrl}
+            isCollapsed={props.isCollapsed}
+            onToggleCollapse={props.onToggleSidebar}
+            onLogout={props.onLogout}
+            viewMode={props.viewMode}
+            onViewModeChange={props.onViewModeChange}
+            selectedUrl={props.selectedUrl}
+            onOpenSettings={props.onOpenSettings}
+            onRefresh={props.onRefresh}
+            isRefreshing={props.isRefreshing}
+            loading={props.bookmarksLoading}
+          />
+        </div>
+        <div className="pane main">
+          {props.showSettings ? (
+            <Settings 
+              settings={props.settings}
+              onSave={props.onSaveSettings}
+              onClose={props.onCloseSettings}
+            />
+          ) : (
+            <ContentPanel 
+              loading={props.readerLoading}
+              title={props.readerContent?.title}
+              html={props.readerContent?.html}
+              markdown={props.readerContent?.markdown}
+              image={props.readerContent?.image}
+              selectedUrl={props.selectedUrl}
+              highlights={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}
+            />
+          )}
+        </div>
+        <div className="pane highlights">
+          <HighlightsPanel
+            highlights={props.highlights}
+            loading={props.highlightsLoading}
+            isCollapsed={props.isHighlightsCollapsed}
+            onToggleCollapse={props.onToggleHighlightsPanel}
+            onSelectUrl={props.onSelectUrl}
+            selectedUrl={props.selectedUrl}
+            onToggleHighlights={props.onToggleHighlights}
+            selectedHighlightId={props.selectedHighlightId}
+            onRefresh={props.onRefreshHighlights}
+            onHighlightClick={props.onHighlightClick}
+            currentUserPubkey={props.currentUserPubkey}
+            highlightVisibility={props.highlightVisibility}
+            onHighlightVisibilityChange={props.onHighlightVisibilityChange}
+            followedPubkeys={props.followedPubkeys}
+          />
+        </div>
+      </div>
+      {props.hasActiveAccount && (
+        <HighlightButton 
+          ref={props.highlightButtonRef} 
+          onHighlight={props.onCreateHighlight}
+          highlightColor={props.settings.highlightColor || '#ffff00'}
+        />
+      )}
+      {props.toastMessage && (
+        <Toast
+          message={props.toastMessage}
+          type={props.toastType}
+          onClose={props.onClearToast}
+        />
+      )}
+    </>
+  )
+}
+
+export default ThreePaneLayout
+
--- a/src/hooks/useArticleLoader.ts
+++ b/src/hooks/useArticleLoader.ts
@@ -101,5 +101,5 @@ export function useArticleLoader({
    }
    
    loadArticle()
-  }, [naddr, relayPool])
+  }, [naddr, relayPool, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId, setCurrentArticle])
 }
--- a/src/hooks/useBookmarksData.ts
+++ b/src/hooks/useBookmarksData.ts
@@ -0,0 +1,119 @@
+import { useState, useEffect, useCallback } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { Bookmark } from '../types/bookmarks'
+import { Highlight } from '../types/highlights'
+import { fetchBookmarks } from '../services/bookmarkService'
+import { fetchHighlights, fetchHighlightsForArticle } from '../services/highlightService'
+import { fetchContacts } from '../services/contactService'
+
+interface UseBookmarksDataParams {
+  relayPool: RelayPool | null
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  activeAccount: any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  accountManager: any
+  naddr?: string
+  currentArticleCoordinate?: string
+  currentArticleEventId?: string
+}
+
+export const useBookmarksData = ({
+  relayPool,
+  activeAccount,
+  accountManager,
+  naddr,
+  currentArticleCoordinate,
+  currentArticleEventId
+}: UseBookmarksDataParams) => {
+  const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
+  const [bookmarksLoading, setBookmarksLoading] = useState(true)
+  const [highlights, setHighlights] = useState<Highlight[]>([])
+  const [highlightsLoading, setHighlightsLoading] = useState(true)
+  const [followedPubkeys, setFollowedPubkeys] = useState<Set<string>>(new Set())
+  const [isRefreshing, setIsRefreshing] = useState(false)
+
+  const handleFetchContacts = useCallback(async () => {
+    if (!relayPool || !activeAccount) return
+    const contacts = await fetchContacts(relayPool, activeAccount.pubkey)
+    setFollowedPubkeys(contacts)
+  }, [relayPool, activeAccount])
+
+  const handleFetchBookmarks = useCallback(async () => {
+    if (!relayPool || !activeAccount) return
+    setBookmarksLoading(true)
+    try {
+      const fullAccount = accountManager.getActive()
+      await fetchBookmarks(relayPool, fullAccount || activeAccount, setBookmarks)
+    } finally {
+      setBookmarksLoading(false)
+    }
+  }, [relayPool, activeAccount, accountManager])
+
+  const handleFetchHighlights = useCallback(async () => {
+    if (!relayPool) return
+    
+    setHighlightsLoading(true)
+    try {
+      if (currentArticleCoordinate) {
+        const highlightsList: Highlight[] = []
+        await fetchHighlightsForArticle(
+          relayPool, 
+          currentArticleCoordinate, 
+          currentArticleEventId,
+          (highlight) => {
+            highlightsList.push(highlight)
+            setHighlights([...highlightsList].sort((a, b) => b.created_at - a.created_at))
+          }
+        )
+        console.log(`🔄 Refreshed ${highlightsList.length} highlights for article`)
+      } else if (activeAccount) {
+        const fetchedHighlights = await fetchHighlights(relayPool, activeAccount.pubkey)
+        setHighlights(fetchedHighlights)
+      }
+    } catch (err) {
+      console.error('Failed to fetch highlights:', err)
+    } finally {
+      setHighlightsLoading(false)
+    }
+  }, [relayPool, activeAccount, currentArticleCoordinate, currentArticleEventId])
+
+  const handleRefreshAll = useCallback(async () => {
+    if (!relayPool || !activeAccount || isRefreshing) return
+    
+    setIsRefreshing(true)
+    try {
+      await handleFetchBookmarks()
+      await handleFetchHighlights()
+      await handleFetchContacts()
+    } catch (err) {
+      console.error('Failed to refresh data:', err)
+    } finally {
+      setIsRefreshing(false)
+    }
+  }, [relayPool, activeAccount, isRefreshing, handleFetchBookmarks, handleFetchHighlights, handleFetchContacts])
+
+  // Load initial data
+  useEffect(() => {
+    if (!relayPool || !activeAccount) return
+    handleFetchBookmarks()
+    if (!naddr) {
+      handleFetchHighlights()
+    }
+    handleFetchContacts()
+  }, [relayPool, activeAccount?.pubkey, naddr, handleFetchBookmarks, handleFetchHighlights, handleFetchContacts])
+
+  return {
+    bookmarks,
+    bookmarksLoading,
+    highlights,
+    setHighlights,
+    highlightsLoading,
+    setHighlightsLoading,
+    followedPubkeys,
+    isRefreshing,
+    handleFetchBookmarks,
+    handleFetchHighlights,
+    handleRefreshAll
+  }
+}
+
--- a/src/hooks/useBookmarksUI.ts
+++ b/src/hooks/useBookmarksUI.ts
@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react'
+import { NostrEvent } from 'nostr-tools'
+import { HighlightVisibility } from '../components/HighlightsPanel'
+import { UserSettings } from '../services/settingsService'
+import { ViewMode } from '../components/Bookmarks'
+
+interface UseBookmarksUIParams {
+  settings: UserSettings
+}
+
+export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
+  const [isCollapsed, setIsCollapsed] = useState(true)
+  const [isHighlightsCollapsed, setIsHighlightsCollapsed] = useState(true)
+  const [viewMode, setViewMode] = useState<ViewMode>('compact')
+  const [showHighlights, setShowHighlights] = useState(true)
+  const [selectedHighlightId, setSelectedHighlightId] = useState<string | undefined>(undefined)
+  const [showSettings, setShowSettings] = useState(false)
+  const [currentArticleCoordinate, setCurrentArticleCoordinate] = useState<string | undefined>(undefined)
+  const [currentArticleEventId, setCurrentArticleEventId] = useState<string | undefined>(undefined)
+  const [currentArticle, setCurrentArticle] = useState<NostrEvent | undefined>(undefined)
+  const [highlightVisibility, setHighlightVisibility] = useState<HighlightVisibility>({
+    nostrverse: true,
+    friends: true,
+    mine: true
+  })
+
+  // Apply UI settings
+  useEffect(() => {
+    if (settings.defaultViewMode) setViewMode(settings.defaultViewMode)
+    if (settings.showHighlights !== undefined) setShowHighlights(settings.showHighlights)
+    setHighlightVisibility({
+      nostrverse: settings.defaultHighlightVisibilityNostrverse !== false,
+      friends: settings.defaultHighlightVisibilityFriends !== false,
+      mine: settings.defaultHighlightVisibilityMine !== false
+    })
+  }, [settings])
+
+  return {
+    isCollapsed,
+    setIsCollapsed,
+    isHighlightsCollapsed,
+    setIsHighlightsCollapsed,
+    viewMode,
+    setViewMode,
+    showHighlights,
+    setShowHighlights,
+    selectedHighlightId,
+    setSelectedHighlightId,
+    showSettings,
+    setShowSettings,
+    currentArticleCoordinate,
+    setCurrentArticleCoordinate,
+    currentArticleEventId,
+    setCurrentArticleEventId,
+    currentArticle,
+    setCurrentArticle,
+    highlightVisibility,
+    setHighlightVisibility
+  }
+}
+
--- a/src/hooks/useContentSelection.ts
+++ b/src/hooks/useContentSelection.ts
@@ -0,0 +1,75 @@
+import { useState, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent, nip19 } from 'nostr-tools'
+import { loadContent, BookmarkReference } from '../utils/contentLoader'
+import { ReadableContent } from '../services/readerService'
+import { UserSettings } from '../services/settingsService'
+
+interface UseContentSelectionParams {
+  relayPool: RelayPool | null
+  settings: UserSettings
+  setIsCollapsed: (collapsed: boolean) => void
+  setShowSettings: (show: boolean) => void
+  setCurrentArticle: (article: NostrEvent | undefined) => void
+}
+
+export const useContentSelection = ({
+  relayPool,
+  settings,
+  setIsCollapsed,
+  setShowSettings,
+  setCurrentArticle
+}: UseContentSelectionParams) => {
+  const navigate = useNavigate()
+  const [selectedUrl, setSelectedUrl] = useState<string | undefined>(undefined)
+  const [readerLoading, setReaderLoading] = useState(false)
+  const [readerContent, setReaderContent] = useState<ReadableContent | undefined>(undefined)
+
+  const handleSelectUrl = useCallback(async (url: string, bookmark?: BookmarkReference) => {
+    if (!relayPool) return
+    
+    // Update the URL path based on content type
+    if (bookmark && bookmark.kind === 30023) {
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1] || ''
+      if (dTag && bookmark.pubkey) {
+        const pointer = {
+          identifier: dTag,
+          kind: 30023,
+          pubkey: bookmark.pubkey,
+        }
+        const naddr = nip19.naddrEncode(pointer)
+        navigate(`/a/${naddr}`)
+      }
+    } else if (url) {
+      navigate(`/r/${encodeURIComponent(url)}`)
+    }
+    
+    setSelectedUrl(url)
+    setReaderLoading(true)
+    setReaderContent(undefined)
+    setCurrentArticle(undefined)
+    setShowSettings(false)
+    if (settings.collapseOnArticleOpen !== false) setIsCollapsed(true)
+    
+    try {
+      const content = await loadContent(url, relayPool, bookmark)
+      setReaderContent(content)
+    } catch (err) {
+      console.warn('Failed to fetch content:', err)
+    } finally {
+      setReaderLoading(false)
+    }
+  }, [relayPool, settings, navigate, setIsCollapsed, setShowSettings, setCurrentArticle])
+
+  return {
+    selectedUrl,
+    setSelectedUrl,
+    readerLoading,
+    setReaderLoading,
+    readerContent,
+    setReaderContent,
+    handleSelectUrl
+  }
+}
+
--- a/src/hooks/useExternalUrlLoader.ts
+++ b/src/hooks/useExternalUrlLoader.ts
@@ -80,6 +80,6 @@ export function useExternalUrlLoader({
    }
    
    loadExternalUrl()
-  }, [url, relayPool])
+  }, [url, relayPool, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId])
 }

--- a/src/hooks/useFilteredHighlights.ts
+++ b/src/hooks/useFilteredHighlights.ts
@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+import { Highlight } from '../types/highlights'
+import { HighlightVisibility } from '../components/HighlightsPanel'
+import { normalizeUrl } from '../utils/urlHelpers'
+import { classifyHighlights } from '../utils/highlightClassification'
+
+interface UseFilteredHighlightsParams {
+  highlights: Highlight[]
+  selectedUrl?: string
+  highlightVisibility: HighlightVisibility
+  currentUserPubkey?: string
+  followedPubkeys: Set<string>
+}
+
+export const useFilteredHighlights = ({
+  highlights,
+  selectedUrl,
+  highlightVisibility,
+  currentUserPubkey,
+  followedPubkeys
+}: UseFilteredHighlightsParams) => {
+  return useMemo(() => {
+    if (!selectedUrl) return highlights
+    
+    let urlFiltered = highlights
+    
+    // For Nostr articles, we already fetched highlights specifically for this article
+    if (!selectedUrl.startsWith('nostr:')) {
+      const normalizedSelected = normalizeUrl(selectedUrl)
+      
+      urlFiltered = highlights.filter(h => {
+        if (!h.urlReference) return false
+        const normalizedRef = normalizeUrl(h.urlReference)
+        return normalizedSelected === normalizedRef || 
+               normalizedSelected.includes(normalizedRef) ||
+               normalizedRef.includes(normalizedSelected)
+      })
+    }
+    
+    // Classify and filter by visibility levels
+    const classified = classifyHighlights(urlFiltered, currentUserPubkey, followedPubkeys)
+    return classified.filter(h => {
+      if (h.level === 'mine') return highlightVisibility.mine
+      if (h.level === 'friends') return highlightVisibility.friends
+      return highlightVisibility.nostrverse
+    })
+  }, [highlights, selectedUrl, highlightVisibility, currentUserPubkey, followedPubkeys])
+}
+
--- a/src/hooks/useHighlightCreation.ts
+++ b/src/hooks/useHighlightCreation.ts
@@ -0,0 +1,79 @@
+import { useCallback, useRef } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { Highlight } from '../types/highlights'
+import { ReadableContent } from '../services/readerService'
+import { createHighlight, eventToHighlight } from '../services/highlightCreationService'
+import { HighlightButtonRef } from '../components/HighlightButton'
+
+interface UseHighlightCreationParams {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  activeAccount: any
+  relayPool: RelayPool | null
+  currentArticle: NostrEvent | undefined
+  selectedUrl: string | undefined
+  readerContent: ReadableContent | undefined
+  onHighlightCreated: (highlight: Highlight) => void
+}
+
+export const useHighlightCreation = ({
+  activeAccount,
+  relayPool,
+  currentArticle,
+  selectedUrl,
+  readerContent,
+  onHighlightCreated
+}: UseHighlightCreationParams) => {
+  const highlightButtonRef = useRef<HighlightButtonRef>(null)
+
+  const handleTextSelection = useCallback((text: string) => {
+    highlightButtonRef.current?.updateSelection(text)
+  }, [])
+
+  const handleClearSelection = useCallback(() => {
+    highlightButtonRef.current?.clearSelection()
+  }, [])
+
+  const handleCreateHighlight = useCallback(async (text: string) => {
+    if (!activeAccount || !relayPool) {
+      console.error('Missing requirements for highlight creation')
+      return
+    }
+
+    if (!currentArticle && !selectedUrl) {
+      console.error('No source available for highlight creation')
+      return
+    }
+
+    try {
+      const source = currentArticle || selectedUrl!
+      const contentForContext = currentArticle 
+        ? currentArticle.content 
+        : readerContent?.markdown || readerContent?.html
+      
+      const signedEvent = await createHighlight(
+        text,
+        source,
+        activeAccount,
+        relayPool,
+        contentForContext
+      )
+      
+      console.log('✅ Highlight created successfully!')
+      highlightButtonRef.current?.clearSelection()
+      
+      const newHighlight = eventToHighlight(signedEvent)
+      onHighlightCreated(newHighlight)
+    } catch (error) {
+      console.error('Failed to create highlight:', error)
+    }
+  }, [activeAccount, relayPool, currentArticle, selectedUrl, readerContent, onHighlightCreated])
+
+  return {
+    highlightButtonRef,
+    handleTextSelection,
+    handleClearSelection,
+    handleCreateHighlight
+  }
+}
+
--- a/src/hooks/useHighlightInteractions.ts
+++ b/src/hooks/useHighlightInteractions.ts
@@ -0,0 +1,81 @@
+import { useEffect, useCallback, useRef } from 'react'
+
+interface UseHighlightInteractionsParams {
+  onHighlightClick?: (highlightId: string) => void
+  selectedHighlightId?: string
+  onTextSelection?: (text: string) => void
+  onClearSelection?: () => void
+}
+
+export const useHighlightInteractions = ({
+  onHighlightClick,
+  selectedHighlightId,
+  onTextSelection,
+  onClearSelection
+}: UseHighlightInteractionsParams) => {
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  // Attach click handlers to highlight marks
+  useEffect(() => {
+    if (!onHighlightClick || !contentRef.current) return
+    
+    const marks = contentRef.current.querySelectorAll('mark[data-highlight-id]')
+    const handlers = new Map<Element, () => void>()
+    
+    marks.forEach(mark => {
+      const highlightId = mark.getAttribute('data-highlight-id')
+      if (highlightId) {
+        const handler = () => onHighlightClick(highlightId)
+        mark.addEventListener('click', handler)
+        ;(mark as HTMLElement).style.cursor = 'pointer'
+        handlers.set(mark, handler)
+      }
+    })
+    
+    return () => {
+      handlers.forEach((handler, mark) => {
+        mark.removeEventListener('click', handler)
+      })
+    }
+  }, [onHighlightClick])
+
+  // Scroll to selected highlight
+  useEffect(() => {
+    if (!selectedHighlightId || !contentRef.current) return
+    
+    const markElement = contentRef.current.querySelector(`mark[data-highlight-id="${selectedHighlightId}"]`)
+    
+    if (markElement) {
+      markElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      
+      const htmlElement = markElement as HTMLElement
+      setTimeout(() => {
+        htmlElement.classList.add('highlight-pulse')
+        setTimeout(() => htmlElement.classList.remove('highlight-pulse'), 1500)
+      }, 500)
+    }
+  }, [selectedHighlightId])
+
+  // Handle text selection
+  const handleMouseUp = useCallback(() => {
+    setTimeout(() => {
+      const selection = window.getSelection()
+      if (!selection || selection.rangeCount === 0) {
+        onClearSelection?.()
+        return
+      }
+
+      const range = selection.getRangeAt(0)
+      const text = selection.toString().trim()
+
+      if (text.length > 0 && contentRef.current?.contains(range.commonAncestorContainer)) {
+        onTextSelection?.(text)
+      } else {
+        onClearSelection?.()
+      }
+    }, 10)
+  }, [onTextSelection, onClearSelection])
+
+  return { contentRef, handleMouseUp }
+}
+
--- a/src/hooks/useHighlightedContent.ts
+++ b/src/hooks/useHighlightedContent.ts
@@ -0,0 +1,87 @@
+import { useMemo } from 'react'
+import { Highlight } from '../types/highlights'
+import { applyHighlightsToHTML } from '../utils/highlightMatching'
+import { filterHighlightsByUrl } from '../utils/urlHelpers'
+import { HighlightVisibility } from '../components/HighlightsPanel'
+import { classifyHighlights } from '../utils/highlightClassification'
+
+interface UseHighlightedContentParams {
+  html?: string
+  markdown?: string
+  renderedMarkdownHtml: string
+  highlights: Highlight[]
+  showHighlights: boolean
+  highlightStyle: 'marker' | 'underline'
+  selectedUrl?: string
+  highlightVisibility: HighlightVisibility
+  currentUserPubkey?: string
+  followedPubkeys: Set<string>
+}
+
+export const useHighlightedContent = ({
+  html,
+  markdown,
+  renderedMarkdownHtml,
+  highlights,
+  showHighlights,
+  highlightStyle,
+  selectedUrl,
+  highlightVisibility,
+  currentUserPubkey,
+  followedPubkeys
+}: UseHighlightedContentParams) => {
+  // Filter highlights by URL and visibility settings
+  const relevantHighlights = useMemo(() => {
+    console.log('🔍 ContentPanel: Processing highlights', {
+      totalHighlights: highlights.length,
+      selectedUrl,
+      showHighlights
+    })
+    
+    const urlFiltered = filterHighlightsByUrl(highlights, selectedUrl)
+    console.log('📌 URL filtered highlights:', urlFiltered.length)
+    
+    // Apply visibility filtering
+    const classified = classifyHighlights(urlFiltered, currentUserPubkey, followedPubkeys)
+    const filtered = classified.filter(h => {
+      if (h.level === 'mine') return highlightVisibility.mine
+      if (h.level === 'friends') return highlightVisibility.friends
+      return highlightVisibility.nostrverse
+    })
+      
+    console.log('✅ Relevant highlights after filtering:', filtered.length, filtered.map(h => h.content.substring(0, 30)))
+    return filtered
+  }, [selectedUrl, highlights, highlightVisibility, currentUserPubkey, followedPubkeys, showHighlights])
+
+  // Prepare the final HTML with highlights applied
+  const finalHtml = useMemo(() => {
+    const sourceHtml = markdown ? renderedMarkdownHtml : html
+    
+    console.log('🎨 Preparing final HTML:', {
+      hasMarkdown: !!markdown,
+      hasHtml: !!html,
+      renderedHtmlLength: renderedMarkdownHtml.length,
+      sourceHtmlLength: sourceHtml?.length || 0,
+      showHighlights,
+      relevantHighlightsCount: relevantHighlights.length
+    })
+    
+    if (!sourceHtml) {
+      console.warn('⚠️ No source HTML available')
+      return ''
+    }
+    
+    if (showHighlights && relevantHighlights.length > 0) {
+      console.log('✨ Applying', relevantHighlights.length, 'highlights to HTML')
+      const highlightedHtml = applyHighlightsToHTML(sourceHtml, relevantHighlights, highlightStyle)
+      console.log('✅ Highlights applied, result length:', highlightedHtml.length)
+      return highlightedHtml
+    }
+    
+    console.log('📄 Returning source HTML without highlights')
+    return sourceHtml
+  }, [html, renderedMarkdownHtml, markdown, relevantHighlights, showHighlights, highlightStyle])
+
+  return { finalHtml, relevantHighlights }
+}
+
--- a/src/hooks/useMarkdownToHTML.ts
+++ b/src/hooks/useMarkdownToHTML.ts
@@ -0,0 +1,35 @@
+import React, { useState, useEffect, useRef } from 'react'
+
+/**
+ * Hook to convert markdown to HTML using a hidden ReactMarkdown component
+ */
+export const useMarkdownToHTML = (markdown?: string): { renderedHtml: string, previewRef: React.RefObject<HTMLDivElement> } => {
+  const previewRef = useRef<HTMLDivElement>(null)
+  const [renderedHtml, setRenderedHtml] = useState<string>('')
+
+  useEffect(() => {
+    if (!markdown) {
+      setRenderedHtml('')
+      return
+    }
+
+    console.log('📝 Converting markdown to HTML...')
+    
+    const rafId = requestAnimationFrame(() => {
+      if (previewRef.current) {
+        const html = previewRef.current.innerHTML
+        console.log('✅ Markdown converted to HTML:', html.length, 'chars')
+        setRenderedHtml(html)
+      } else {
+        console.warn('⚠️ markdownPreviewRef.current is null')
+      }
+    })
+
+    return () => cancelAnimationFrame(rafId)
+  }, [markdown])
+
+  return { renderedHtml, previewRef }
+}
+
+// Removed separate useMarkdownPreviewRef; use useMarkdownToHTML to obtain previewRef
+
--- a/src/services/highlightEventProcessor.ts
+++ b/src/services/highlightEventProcessor.ts
@@ -0,0 +1,66 @@
+import { NostrEvent } from 'nostr-tools'
+import { Helpers } from 'applesauce-core'
+import { Highlight } from '../types/highlights'
+
+const {
+  getHighlightText,
+  getHighlightContext,
+  getHighlightComment,
+  getHighlightSourceEventPointer,
+  getHighlightSourceAddressPointer,
+  getHighlightSourceUrl,
+  getHighlightAttributions
+} = Helpers
+
+/**
+ * Convert a NostrEvent to a Highlight object
+ */
+export function eventToHighlight(event: NostrEvent): Highlight {
+  const highlightText = getHighlightText(event)
+  const context = getHighlightContext(event)
+  const comment = getHighlightComment(event)
+  const sourceEventPointer = getHighlightSourceEventPointer(event)
+  const sourceAddressPointer = getHighlightSourceAddressPointer(event)
+  const sourceUrl = getHighlightSourceUrl(event)
+  const attributions = getHighlightAttributions(event)
+  
+  const author = attributions.find(a => a.role === 'author')?.pubkey
+  const eventReference = sourceEventPointer?.id || 
+    (sourceAddressPointer ? `${sourceAddressPointer.kind}:${sourceAddressPointer.pubkey}:${sourceAddressPointer.identifier}` : undefined)
+  
+  return {
+    id: event.id,
+    pubkey: event.pubkey,
+    created_at: event.created_at,
+    content: highlightText,
+    tags: event.tags,
+    eventReference,
+    urlReference: sourceUrl,
+    author,
+    context,
+    comment
+  }
+}
+
+/**
+ * Deduplicate highlight events by ID
+ */
+export function dedupeHighlights(events: NostrEvent[]): NostrEvent[] {
+  const byId = new Map<string, NostrEvent>()
+  
+  for (const event of events) {
+    if (event?.id && !byId.has(event.id)) {
+      byId.set(event.id, event)
+    }
+  }
+  
+  return Array.from(byId.values())
+}
+
+/**
+ * Sort highlights by creation time (newest first)
+ */
+export function sortHighlights(highlights: Highlight[]): Highlight[] {
+  return highlights.sort((a, b) => b.created_at - a.created_at)
+}
+
--- a/src/services/highlightService.ts
+++ b/src/services/highlightService.ts
@@ -1,36 +1,9 @@
 import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
 import { lastValueFrom, takeUntil, timer, tap, toArray } from 'rxjs'
 import { NostrEvent } from 'nostr-tools'
-import { Helpers } from 'applesauce-core'
 import { Highlight } from '../types/highlights'
 import { RELAYS } from '../config/relays'
-
-const {
-  getHighlightText,
-  getHighlightContext,
-  getHighlightComment,
-  getHighlightSourceEventPointer,
-  getHighlightSourceAddressPointer,
-  getHighlightSourceUrl,
-  getHighlightAttributions
-} = Helpers
-
-/**
- * Deduplicate highlight events by ID
- * Since highlights can come from multiple relays, we need to ensure
- * we only show each unique highlight once
- */
-function dedupeHighlights(events: NostrEvent[]): NostrEvent[] {
-  const byId = new Map<string, NostrEvent>()
-  
-  for (const event of events) {
-    if (event?.id && !byId.has(event.id)) {
-      byId.set(event.id, event)
-    }
-  }
-  
-  return Array.from(byId.values())
-}
+import { eventToHighlight, dedupeHighlights, sortHighlights } from './highlightEventProcessor'

 /**
 * Fetches highlights for a specific article by its address coordinate and/or event ID
@@ -53,31 +26,7 @@ export const fetchHighlightsForArticle = async (
    const processEvent = (event: NostrEvent): Highlight | null => {
      if (seenIds.has(event.id)) return null
      seenIds.add(event.id)
-      
-      const highlightText = getHighlightText(event)
-      const context = getHighlightContext(event)
-      const comment = getHighlightComment(event)
-      const sourceEventPointer = getHighlightSourceEventPointer(event)
-      const sourceAddressPointer = getHighlightSourceAddressPointer(event)
-      const sourceUrl = getHighlightSourceUrl(event)
-      const attributions = getHighlightAttributions(event)
-      
-      const author = attributions.find(a => a.role === 'author')?.pubkey
-      const eventReference = sourceEventPointer?.id || 
-        (sourceAddressPointer ? `${sourceAddressPointer.kind}:${sourceAddressPointer.pubkey}:${sourceAddressPointer.identifier}` : undefined)
-      
-      return {
-        id: event.id,
-        pubkey: event.pubkey,
-        created_at: event.created_at,
-        content: highlightText,
-        tags: event.tags,
-        eventReference,
-        urlReference: sourceUrl,
-        author,
-        context,
-        comment
-      }
+      return eventToHighlight(event)
    }
    
    // Query for highlights that reference this article via the 'a' tag
@@ -138,39 +87,8 @@ export const fetchHighlightsForArticle = async (
    const uniqueEvents = dedupeHighlights(rawEvents)
    console.log('📊 Unique highlight events after deduplication:', uniqueEvents.length)
    
-    const highlights: Highlight[] = uniqueEvents.map((event: NostrEvent) => {
-      // Use applesauce helpers to extract highlight data
-      const highlightText = getHighlightText(event)
-      const context = getHighlightContext(event)
-      const comment = getHighlightComment(event)
-      const sourceEventPointer = getHighlightSourceEventPointer(event)
-      const sourceAddressPointer = getHighlightSourceAddressPointer(event)
-      const sourceUrl = getHighlightSourceUrl(event)
-      const attributions = getHighlightAttributions(event)
-      
-      // Get author from attributions
-      const author = attributions.find(a => a.role === 'author')?.pubkey
-      
-      // Get event reference (prefer event pointer, fallback to address pointer)
-      const eventReference = sourceEventPointer?.id || 
-        (sourceAddressPointer ? `${sourceAddressPointer.kind}:${sourceAddressPointer.pubkey}:${sourceAddressPointer.identifier}` : undefined)
-      
-      return {
-        id: event.id,
-        pubkey: event.pubkey,
-        created_at: event.created_at,
-        content: highlightText,
-        tags: event.tags,
-        eventReference,
-        urlReference: sourceUrl,
-        author,
-        context,
-        comment
-      }
-    })
-    
-    // Sort by creation time (newest first)
-    return highlights.sort((a, b) => b.created_at - a.created_at)
+    const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
+    return sortHighlights(highlights)
  } catch (error) {
    console.error('Failed to fetch highlights for article:', error)
    return []
@@ -207,34 +125,8 @@ export const fetchHighlightsForUrl = async (
    console.log('📊 Highlights for URL:', rawEvents.length)
    
    const uniqueEvents = dedupeHighlights(rawEvents)
-    const highlights: Highlight[] = uniqueEvents.map((event: NostrEvent) => {
-      const highlightText = getHighlightText(event)
-      const context = getHighlightContext(event)
-      const comment = getHighlightComment(event)
-      const sourceEventPointer = getHighlightSourceEventPointer(event)
-      const sourceAddressPointer = getHighlightSourceAddressPointer(event)
-      const sourceUrl = getHighlightSourceUrl(event)
-      const attributions = getHighlightAttributions(event)
-      
-      const author = attributions.find(a => a.role === 'author')?.pubkey
-      const eventReference = sourceEventPointer?.id || 
-        (sourceAddressPointer ? `${sourceAddressPointer.kind}:${sourceAddressPointer.pubkey}:${sourceAddressPointer.identifier}` : undefined)
-      
-      return {
-        id: event.id,
-        pubkey: event.pubkey,
-        created_at: event.created_at,
-        content: highlightText,
-        tags: event.tags,
-        eventReference,
-        urlReference: sourceUrl,
-        author,
-        context,
-        comment
-      }
-    })
-    
-    return highlights.sort((a, b) => b.created_at - a.created_at)
+    const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
+    return sortHighlights(highlights)
  } catch (error) {
    console.error('Failed to fetch highlights for URL:', error)
    return []
@@ -266,32 +158,7 @@ export const fetchHighlights = async (
          tap((event: NostrEvent) => {
            if (!seenIds.has(event.id)) {
              seenIds.add(event.id)
-              
-              const highlightText = getHighlightText(event)
-              const context = getHighlightContext(event)
-              const comment = getHighlightComment(event)
-              const sourceEventPointer = getHighlightSourceEventPointer(event)
-              const sourceAddressPointer = getHighlightSourceAddressPointer(event)
-              const sourceUrl = getHighlightSourceUrl(event)
-              const attributions = getHighlightAttributions(event)
-              
-              const author = attributions.find(a => a.role === 'author')?.pubkey
-              const eventReference = sourceEventPointer?.id || 
-                (sourceAddressPointer ? `${sourceAddressPointer.kind}:${sourceAddressPointer.pubkey}:${sourceAddressPointer.identifier}` : undefined)
-              
-              const highlight: Highlight = {
-                id: event.id,
-                pubkey: event.pubkey,
-                created_at: event.created_at,
-                content: highlightText,
-                tags: event.tags,
-                eventReference,
-                urlReference: sourceUrl,
-                author,
-                context,
-                comment
-              }
-              
+              const highlight = eventToHighlight(event)
              if (onHighlight) {
                onHighlight(highlight)
              }
@@ -309,35 +176,8 @@ export const fetchHighlights = async (
    const uniqueEvents = dedupeHighlights(rawEvents)
    console.log('📊 Unique highlight events after deduplication:', uniqueEvents.length)
    
-    const highlights: Highlight[] = uniqueEvents.map((event: NostrEvent) => {
-      const highlightText = getHighlightText(event)
-      const context = getHighlightContext(event)
-      const comment = getHighlightComment(event)
-      const sourceEventPointer = getHighlightSourceEventPointer(event)
-      const sourceAddressPointer = getHighlightSourceAddressPointer(event)
-      const sourceUrl = getHighlightSourceUrl(event)
-      const attributions = getHighlightAttributions(event)
-      
-      const author = attributions.find(a => a.role === 'author')?.pubkey
-      const eventReference = sourceEventPointer?.id || 
-        (sourceAddressPointer ? `${sourceAddressPointer.kind}:${sourceAddressPointer.pubkey}:${sourceAddressPointer.identifier}` : undefined)
-      
-      return {
-        id: event.id,
-        pubkey: event.pubkey,
-        created_at: event.created_at,
-        content: highlightText,
-        tags: event.tags,
-        eventReference,
-        urlReference: sourceUrl,
-        author,
-        context,
-        comment
-      }
-    })
-    
-    // Sort by creation time (newest first)
-    return highlights.sort((a, b) => b.created_at - a.created_at)
+    const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
+    return sortHighlights(highlights)
  } catch (error) {
    console.error('Failed to fetch highlights by author:', error)
    return []
--- a/src/utils/highlightClassification.ts
+++ b/src/utils/highlightClassification.ts
@@ -0,0 +1,34 @@
+import { Highlight } from '../types/highlights'
+
+export type HighlightLevel = 'mine' | 'friends' | 'nostrverse'
+
+/**
+ * Classify a highlight based on the current user and their followed pubkeys
+ */
+export function classifyHighlight(
+  highlight: Highlight,
+  currentUserPubkey?: string,
+  followedPubkeys: Set<string> = new Set()
+): Highlight & { level: HighlightLevel } {
+  let level: HighlightLevel = 'nostrverse'
+  
+  if (highlight.pubkey === currentUserPubkey) {
+    level = 'mine'
+  } else if (followedPubkeys.has(highlight.pubkey)) {
+    level = 'friends'
+  }
+  
+  return { ...highlight, level }
+}
+
+/**
+ * Classify an array of highlights
+ */
+export function classifyHighlights(
+  highlights: Highlight[],
+  currentUserPubkey?: string,
+  followedPubkeys: Set<string> = new Set()
+): Array<Highlight & { level: HighlightLevel }> {
+  return highlights.map(h => classifyHighlight(h, currentUserPubkey, followedPubkeys))
+}
+
--- a/src/utils/highlightMatching.tsx
+++ b/src/utils/highlightMatching.tsx
@@ -1,46 +1,11 @@
 import React from 'react'
 import { Highlight } from '../types/highlights'

-export interface HighlightMatch {
-  highlight: Highlight
-  startIndex: number
-  endIndex: number
-}
+export type { HighlightMatch } from './highlightMatching/textMatching'
+export { findHighlightMatches } from './highlightMatching/textMatching'
+export { applyHighlightsToHTML } from './highlightMatching/htmlMatching'

-/**
- * Find all occurrences of highlight text in the content
- */
-export function findHighlightMatches(
-  content: string,
-  highlights: Highlight[]
-): HighlightMatch[] {
-  const matches: HighlightMatch[] = []
-  
-  for (const highlight of highlights) {
-    if (!highlight.content || highlight.content.trim().length === 0) {
-      continue
-    }
-    
-    const searchText = highlight.content.trim()
-    let startIndex = 0
-    
-    // Find all occurrences of this highlight in the content
-    let index = content.indexOf(searchText, startIndex)
-    while (index !== -1) {
-      matches.push({
-        highlight,
-        startIndex: index,
-        endIndex: index + searchText.length
-      })
-      
-      startIndex = index + searchText.length
-      index = content.indexOf(searchText, startIndex)
-    }
-  }
-  
-  // Sort by start index
-  return matches.sort((a, b) => a.startIndex - b.startIndex)
-}
+import { findHighlightMatches as _findHighlightMatches } from './highlightMatching/textMatching'

 /**
 * Apply highlights to text content by wrapping matched text in span elements
@@ -49,7 +14,7 @@ export function applyHighlightsToText(
  text: string,
  highlights: Highlight[]
 ): React.ReactNode {
-  const matches = findHighlightMatches(text, highlights)
+  const matches = _findHighlightMatches(text, highlights)
  
  if (matches.length === 0) {
    return text
@@ -61,17 +26,14 @@ export function applyHighlightsToText(
  for (let i = 0; i < matches.length; i++) {
    const match = matches[i]
    
-    // Skip overlapping highlights (keep the first one)
    if (match.startIndex < lastIndex) {
      continue
    }
    
-    // Add text before the highlight
    if (match.startIndex > lastIndex) {
      result.push(text.substring(lastIndex, match.startIndex))
    }
    
-    // Add the highlighted text
    const highlightedText = text.substring(match.startIndex, match.endIndex)
    const levelClass = match.highlight.level ? ` level-${match.highlight.level}` : ''
    result.push(
@@ -89,129 +51,9 @@ export function applyHighlightsToText(
    lastIndex = match.endIndex
  }
  
-  // Add remaining text
  if (lastIndex < text.length) {
    result.push(text.substring(lastIndex))
  }
  
  return <>{result}</>
 }
-
-// Helper to normalize whitespace for flexible matching
-const normalizeWhitespace = (str: string) => str.replace(/\s+/g, ' ').trim()
-
-// Helper to create a mark element for a highlight
-function createMarkElement(highlight: Highlight, matchText: string, highlightStyle: 'marker' | 'underline' = 'marker'): HTMLElement {
-  const mark = document.createElement('mark')
-  const levelClass = highlight.level ? ` level-${highlight.level}` : ''
-  mark.className = `content-highlight-${highlightStyle}${levelClass}`
-  mark.setAttribute('data-highlight-id', highlight.id)
-  mark.setAttribute('data-highlight-level', highlight.level || 'nostrverse')
-  mark.setAttribute('title', `Highlighted ${new Date(highlight.created_at * 1000).toLocaleDateString()}`)
-  mark.textContent = matchText
-  return mark
-}
-
-// Helper to replace text node with mark element
-function replaceTextWithMark(textNode: Text, before: string, after: string, mark: HTMLElement) {
-  const parent = textNode.parentNode
-  if (!parent) return
-  
-  if (before) parent.insertBefore(document.createTextNode(before), textNode)
-  parent.insertBefore(mark, textNode)
-  if (after) {
-    textNode.textContent = after
-  } else {
-    parent.removeChild(textNode)
-  }
-}
-
-// Helper to find and mark text in nodes
-function tryMarkInTextNodes(
-  textNodes: Text[],
-  searchText: string,
-  highlight: Highlight,
-  useNormalized: boolean,
-  highlightStyle: 'marker' | 'underline' = 'marker'
-): boolean {
-  const normalizedSearch = normalizeWhitespace(searchText)
-  
-  for (const textNode of textNodes) {
-    const text = textNode.textContent || ''
-    const searchIn = useNormalized ? normalizeWhitespace(text) : text
-    const searchFor = useNormalized ? normalizedSearch : searchText
-    const index = searchIn.indexOf(searchFor)
-    
-    if (index === -1) continue
-    
-    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
-      }
-    }
-    
-    const before = text.substring(0, actualIndex)
-    const match = text.substring(actualIndex, actualIndex + searchText.length)
-    const after = text.substring(actualIndex + searchText.length)
-    const mark = createMarkElement(highlight, match, highlightStyle)
-    
-    replaceTextWithMark(textNode, before, after, mark)
-    return true
-  }
-  
-  return false
-}
-
-/**
- * Apply highlights to HTML content by injecting mark tags using DOM manipulation
- */
-export function applyHighlightsToHTML(html: string, highlights: Highlight[], highlightStyle: 'marker' | 'underline' = 'marker'): string {
-  if (!html || highlights.length === 0) {
-    console.log('⚠️ applyHighlightsToHTML: No HTML or highlights', { htmlLength: html?.length, highlightsCount: highlights.length })
-    return html
-  }
-  
-  console.log('🔨 applyHighlightsToHTML: Processing', highlights.length, 'highlights')
-  
-  const tempDiv = document.createElement('div')
-  tempDiv.innerHTML = html
-  
-  let appliedCount = 0
-  
-  for (const highlight of highlights) {
-    const searchText = highlight.content.trim()
-    if (!searchText) {
-      console.warn('⚠️ Empty highlight content:', highlight.id)
-      continue
-    }
-    
-    console.log('🔍 Searching for highlight:', searchText.substring(0, 50) + '...')
-    
-    // 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)
-    
-    console.log('📄 Found', textNodes.length, 'text nodes to search')
-    
-    // Try exact match first, then normalized match
-    const found = tryMarkInTextNodes(textNodes, searchText, highlight, false, highlightStyle) ||
-                  tryMarkInTextNodes(textNodes, searchText, highlight, true, highlightStyle)
-    
-    if (found) {
-      appliedCount++
-      console.log('✅ Highlight applied successfully')
-    } else {
-      console.warn('❌ Could not find match for highlight:', searchText.substring(0, 50))
-    }
-  }
-  
-  console.log('🎉 Applied', appliedCount, '/', highlights.length, 'highlights')
-  
-  return tempDiv.innerHTML
-}
--- a/src/utils/highlightMatching/domUtils.ts
+++ b/src/utils/highlightMatching/domUtils.ts
@@ -0,0 +1,84 @@
+import { Highlight } from '../../types/highlights'
+import { normalizeWhitespace } from './textMatching'
+
+/**
+ * Create a mark element for a highlight
+ */
+export function createMarkElement(
+  highlight: Highlight, 
+  matchText: string, 
+  highlightStyle: 'marker' | 'underline' = 'marker'
+): HTMLElement {
+  const mark = document.createElement('mark')
+  const levelClass = highlight.level ? ` level-${highlight.level}` : ''
+  mark.className = `content-highlight-${highlightStyle}${levelClass}`
+  mark.setAttribute('data-highlight-id', highlight.id)
+  mark.setAttribute('data-highlight-level', highlight.level || 'nostrverse')
+  mark.setAttribute('title', `Highlighted ${new Date(highlight.created_at * 1000).toLocaleDateString()}`)
+  mark.textContent = matchText
+  return mark
+}
+
+/**
+ * Replace text node with mark element
+ */
+export function replaceTextWithMark(
+  textNode: Text, 
+  before: string, 
+  after: string, 
+  mark: HTMLElement
+): void {
+  const parent = textNode.parentNode
+  if (!parent) return
+  
+  if (before) parent.insertBefore(document.createTextNode(before), textNode)
+  parent.insertBefore(mark, textNode)
+  if (after) {
+    textNode.textContent = after
+  } else {
+    parent.removeChild(textNode)
+  }
+}
+
+/**
+ * Try to find and mark text in text nodes
+ */
+export function tryMarkInTextNodes(
+  textNodes: Text[],
+  searchText: string,
+  highlight: Highlight,
+  useNormalized: boolean,
+  highlightStyle: 'marker' | 'underline' = 'marker'
+): boolean {
+  const normalizedSearch = normalizeWhitespace(searchText)
+  
+  for (const textNode of textNodes) {
+    const text = textNode.textContent || ''
+    const searchIn = useNormalized ? normalizeWhitespace(text) : text
+    const searchFor = useNormalized ? normalizedSearch : searchText
+    const index = searchIn.indexOf(searchFor)
+    
+    if (index === -1) continue
+    
+    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
+      }
+    }
+    
+    const before = text.substring(0, actualIndex)
+    const match = text.substring(actualIndex, actualIndex + searchText.length)
+    const after = text.substring(actualIndex + searchText.length)
+    const mark = createMarkElement(highlight, match, highlightStyle)
+    
+    replaceTextWithMark(textNode, before, after, mark)
+    return true
+  }
+  
+  return false
+}
+
--- a/src/utils/highlightMatching/htmlMatching.ts
+++ b/src/utils/highlightMatching/htmlMatching.ts
@@ -0,0 +1,60 @@
+import { Highlight } from '../../types/highlights'
+import { tryMarkInTextNodes } from './domUtils'
+
+/**
+ * Apply highlights to HTML content by injecting mark tags using DOM manipulation
+ */
+export function applyHighlightsToHTML(
+  html: string, 
+  highlights: Highlight[], 
+  highlightStyle: 'marker' | 'underline' = 'marker'
+): string {
+  if (!html || highlights.length === 0) {
+    console.log('⚠️ applyHighlightsToHTML: No HTML or highlights', { 
+      htmlLength: html?.length, 
+      highlightsCount: highlights.length 
+    })
+    return html
+  }
+  
+  console.log('🔨 applyHighlightsToHTML: Processing', highlights.length, 'highlights')
+  
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = html
+  
+  let appliedCount = 0
+  
+  for (const highlight of highlights) {
+    const searchText = highlight.content.trim()
+    if (!searchText) {
+      console.warn('⚠️ Empty highlight content:', highlight.id)
+      continue
+    }
+    
+    console.log('🔍 Searching for highlight:', searchText.substring(0, 50) + '...')
+    
+    // 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)
+    
+    console.log('📄 Found', textNodes.length, 'text nodes to search')
+    
+    // Try exact match first, then normalized match
+    const found = tryMarkInTextNodes(textNodes, searchText, highlight, false, highlightStyle) ||
+                  tryMarkInTextNodes(textNodes, searchText, highlight, true, highlightStyle)
+    
+    if (found) {
+      appliedCount++
+      console.log('✅ Highlight applied successfully')
+    } else {
+      console.warn('❌ Could not find match for highlight:', searchText.substring(0, 50))
+    }
+  }
+  
+  console.log('🎉 Applied', appliedCount, '/', highlights.length, 'highlights')
+  
+  return tempDiv.innerHTML
+}
+
--- a/src/utils/highlightMatching/textMatching.ts
+++ b/src/utils/highlightMatching/textMatching.ts
@@ -0,0 +1,46 @@
+import { Highlight } from '../../types/highlights'
+
+export interface HighlightMatch {
+  highlight: Highlight
+  startIndex: number
+  endIndex: number
+}
+
+/**
+ * Normalize whitespace for flexible matching
+ */
+export const normalizeWhitespace = (str: string) => str.replace(/\s+/g, ' ').trim()
+
+/**
+ * Find all occurrences of highlight text in the content
+ */
+export function findHighlightMatches(
+  content: string,
+  highlights: Highlight[]
+): HighlightMatch[] {
+  const matches: HighlightMatch[] = []
+  
+  for (const highlight of highlights) {
+    if (!highlight.content || highlight.content.trim().length === 0) {
+      continue
+    }
+    
+    const searchText = highlight.content.trim()
+    let startIndex = 0
+    
+    let index = content.indexOf(searchText, startIndex)
+    while (index !== -1) {
+      matches.push({
+        highlight,
+        startIndex: index,
+        endIndex: index + searchText.length
+      })
+      
+      startIndex = index + searchText.length
+      index = content.indexOf(searchText, startIndex)
+    }
+  }
+  
+  return matches.sort((a, b) => a.startIndex - b.startIndex)
+}
+
Author	SHA1	Message	Date
Gigi	f4f0de3508	chore(release): v0.2.5	2025-10-07 22:19:49 +01:00
Gigi	0c3e697df6	fix(reader): wire preview ref to markdown conversion hook - Update useMarkdownToHTML to return {renderedHtml, previewRef} - Use returned previewRef in ContentPanel hidden markdown preview - Resolves article markdown not rendering instantly	2025-10-07 22:16:31 +01:00
Gigi	a9847a8848	fix: add missing useEffect dependencies for article loading - Fix useBookmarksData hook to include all callback dependencies - Fix useArticleLoader hook to include all setter function dependencies - Fix useExternalUrlLoader hook to include all setter function dependencies - Ensures articles load properly when navigating	2025-10-07 22:04:12 +01:00
Gigi	5ef7d2c41c	refactor: DRY up highlight classification and URL normalization - Extract classifyHighlight and classifyHighlights utilities - Remove duplicate highlight classification logic from 3 locations - Use existing normalizeUrl from urlHelpers instead of duplicating - Reduce code duplication while maintaining functionality	2025-10-07 21:58:17 +01:00
Gigi	e1f704a690	fix: resolve linter errors - Remove unused imports in ReadingDisplaySettings and useBookmarksData - Add eslint-disable comments for unavoidable any types from applesauce library - All lint and type-check validations now pass	2025-10-07 21:57:04 +01:00
Gigi	59ecc29b9c	refactor(highlights): split highlighting utilities into modules - Create textMatching module for text search utilities - Create domUtils module for DOM manipulation helpers - Create htmlMatching module for HTML highlight application - Reduce highlightMatching.tsx from 217 lines to 59 lines - All files now under 210 lines	2025-10-07 21:54:41 +01:00
Gigi	9ae918f744	refactor(highlights): extract highlights panel components - Create useFilteredHighlights hook for highlight filtering - Extract HighlightsPanelCollapsed component - Extract HighlightsPanelHeader component - Reduce HighlightsPanel.tsx from 232 lines to 118 lines	2025-10-07 21:53:24 +01:00
Gigi	ac71d0b5a4	refactor(content): extract content rendering hooks - Create useMarkdownToHTML hook for markdown conversion - Create useHighlightedContent hook for highlight processing - Create useHighlightInteractions hook for highlight interactions - Reduce ContentPanel.tsx from 294 lines to 159 lines	2025-10-07 21:52:05 +01:00
Gigi	7c0d3b909b	refactor(settings): split Settings into section components - Extract ReadingDisplaySettings component - Extract LayoutNavigationSettings component - Extract StartupPreferencesSettings component - Reduce Settings.tsx from 295 lines to 104 lines	2025-10-07 21:50:35 +01:00
Gigi	7b390aae66	refactor(highlights): extract event processing utilities - Create highlightEventProcessor module with eventToHighlight utility - Extract dedupeHighlights and sortHighlights functions - Reduce highlightService.ts from 346 lines to 186 lines - Eliminate repetitive event-to-highlight conversion code	2025-10-07 21:49:01 +01:00
Gigi	70a830fb66	refactor(bookmarks): split Bookmarks.tsx into smaller hooks and components - Extract useBookmarksData hook for data fetching - Extract useContentSelection hook for content selection logic - Extract useHighlightCreation hook for highlight creation - Extract useBookmarksUI hook for UI state management - Create ThreePaneLayout component to reduce JSX complexity - Reduce Bookmarks.tsx from 392 lines to 209 lines	2025-10-07 21:47:59 +01:00
Gigi	eee7628096	fix: encode/decode URLs in /r/ route to preserve special characters URLs with special characters like // in https:// were being collapsed by browsers when passed directly in the path. Now using encodeURIComponent when navigating and decodeURIComponent when extracting the URL from the path.	2025-10-07 21:40:43 +01:00
Gigi	298e80cd49	chore: add public assets and deployment configuration - Add _headers for security headers and asset caching - Add robots.txt for SEO with sitemap reference - Add _redirects for SPA client-side routing support	2025-10-07 21:34:46 +01:00
Gigi	5b7ad1d697	chore: add domain configuration for https://xn--bris-v0b.com/ - Add homepage field to package.json - Add meta tags for SEO and social sharing (Open Graph, Twitter Card) - Add canonical URL - Add description meta tag	2025-10-07 21:34:17 +01:00
Gigi	0b5bf59e98	feat: hide bookmarks without content or URL	2025-10-07 18:37:45 +01:00
Gigi	a72a3e3f77	docs: add live app domain to README	2025-10-07 07:19:52 +01:00