From 5dfa6ba3ae46c0884e0b44109d8ae0c944962f81 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:19:16 +0200
Subject: [PATCH 01/18] feat: extract video functionality into dedicated
 VideoView component

- Create VideoView component with dedicated video player, metadata, and menu
- Remove video-specific logic from ContentPanel for better separation of concerns
- Update ThreePaneLayout to conditionally render VideoView vs ContentPanel
- Maintain all existing video features: YouTube metadata, transcripts, mark as watched
- Improve code organization and maintainability
---
 src/components/ContentPanel.tsx    | 180 +----------------
 src/components/ThreePaneLayout.tsx | 100 ++++++----
 src/components/VideoView.tsx       | 304 +++++++++++++++++++++++++++++
 3 files changed, 378 insertions(+), 206 deletions(-)
 create mode 100644 src/components/VideoView.tsx

diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index 8ccd1b36..508d03da 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, useState, useEffect, useRef, useCallback } from 'react'
-import ReactPlayer from 'react-player'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
@@ -34,9 +33,7 @@ import { unarchiveEvent, unarchiveWebsite } from '../services/unarchiveService'
 import { archiveController } from '../services/archiveController'
 import AuthorCard from './AuthorCard'
 import { faBooks } from '../icons/customIcons'
-import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
-import { classifyUrl, shouldTrackReadingProgress } from '../utils/helpers'
-import { buildNativeVideoUrl } from '../utils/videoHelpers'
+import { shouldTrackReadingProgress } from '../utils/helpers'
 import { useReadingPosition } from '../hooks/useReadingPosition'
 import { ReadingProgressIndicator } from './ReadingProgressIndicator'
 import { EventFactory } from 'applesauce-factory'
@@ -111,15 +108,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   const [isCheckingReadStatus, setIsCheckingReadStatus] = useState(false)
   const [showCheckAnimation, setShowCheckAnimation] = useState(false)
   const [showArticleMenu, setShowArticleMenu] = useState(false)
-  const [showVideoMenu, setShowVideoMenu] = useState(false)
   const [showExternalMenu, setShowExternalMenu] = useState(false)
   const [articleMenuOpenUpward, setArticleMenuOpenUpward] = useState(false)
-  const [videoMenuOpenUpward, setVideoMenuOpenUpward] = useState(false)
   const [externalMenuOpenUpward, setExternalMenuOpenUpward] = useState(false)
   const articleMenuRef = useRef<HTMLDivElement>(null)
-  const videoMenuRef = useRef<HTMLDivElement>(null)
   const externalMenuRef = useRef<HTMLDivElement>(null)
-  const [ytMeta, setYtMeta] = useState<{ title?: string; description?: string; transcript?: string } | null>(null)
   const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef, processedMarkdown } = useMarkdownToHTML(markdown, relayPool)
   
   const { finalHtml, relevantHighlights } = useHighlightedContent({
@@ -343,21 +336,18 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       if (articleMenuRef.current && !articleMenuRef.current.contains(target)) {
         setShowArticleMenu(false)
       }
-      if (videoMenuRef.current && !videoMenuRef.current.contains(target)) {
-        setShowVideoMenu(false)
-      }
       if (externalMenuRef.current && !externalMenuRef.current.contains(target)) {
         setShowExternalMenu(false)
       }
     }
     
-    if (showArticleMenu || showVideoMenu || showExternalMenu) {
+    if (showArticleMenu || showExternalMenu) {
       document.addEventListener('mousedown', handleClickOutside)
       return () => {
         document.removeEventListener('mousedown', handleClickOutside)
       }
     }
-  }, [showArticleMenu, showVideoMenu, showExternalMenu])
+  }, [showArticleMenu, showExternalMenu])
 
   // Check available space and position menu upward if needed
   useEffect(() => {
@@ -380,13 +370,10 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     if (showArticleMenu) {
       checkMenuPosition(articleMenuRef, setArticleMenuOpenUpward)
     }
-    if (showVideoMenu) {
-      checkMenuPosition(videoMenuRef, setVideoMenuOpenUpward)
-    }
     if (showExternalMenu) {
       checkMenuPosition(externalMenuRef, setExternalMenuOpenUpward)
     }
-  }, [showArticleMenu, showVideoMenu, showExternalMenu])
+  }, [showArticleMenu, showExternalMenu])
 
   const readingStats = useMemo(() => {
     const content = markdown || html || ''
@@ -418,34 +405,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
   // Determine if we're on a nostr-native article (/a/) or external URL (/r/)
   const isNostrArticle = selectedUrl && selectedUrl.startsWith('nostr:')
-  const isExternalVideo = !isNostrArticle && !!selectedUrl && ['youtube', 'video'].includes(classifyUrl(selectedUrl).type)
 
-  // Track external video duration (in seconds) for display in header
-  const [videoDurationSec, setVideoDurationSec] = useState<number | null>(null)
-  // Load YouTube metadata/captions when applicable
-  useEffect(() => {
-    (async () => {
-      try {
-        if (!selectedUrl) return setYtMeta(null)
-        const id = extractYouTubeId(selectedUrl)
-        if (!id) return setYtMeta(null)
-        const locale = navigator?.language?.split('-')[0] || 'en'
-        const data = await getYouTubeMeta(id, locale)
-        if (data) setYtMeta({ title: data.title, description: data.description, transcript: data.transcript })
-      } catch {
-        setYtMeta(null)
-      }
-    })()
-  }, [selectedUrl])
 
-  const formatDuration = (totalSeconds: number): string => {
-    const hours = Math.floor(totalSeconds / 3600)
-    const minutes = Math.floor((totalSeconds % 3600) / 60)
-    const seconds = Math.floor(totalSeconds % 60)
-    const mm = hours > 0 ? String(minutes).padStart(2, '0') : String(minutes)
-    const ss = String(seconds).padStart(2, '0')
-    return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`
-  }
   
 
   // Get article links for menu
@@ -483,7 +444,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     setShowArticleMenu(!showArticleMenu)
   }
 
-  const toggleVideoMenu = () => setShowVideoMenu(v => !v)
 
   const handleOpenPortal = () => {
     if (articleLinks) {
@@ -571,46 +531,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     setShowArticleMenu(false)
   }
   
-  // Video actions
-  const handleOpenVideoExternal = () => {
-    if (selectedUrl) window.open(selectedUrl, '_blank', 'noopener,noreferrer')
-    setShowVideoMenu(false)
-  }
-
-  const handleOpenVideoNative = () => {
-    if (!selectedUrl) return
-    const native = buildNativeVideoUrl(selectedUrl)
-    if (native) {
-      window.location.href = native
-    } else {
-      window.location.href = selectedUrl
-    }
-    setShowVideoMenu(false)
-  }
-
-  const handleCopyVideoUrl = async () => {
-    try {
-      if (selectedUrl) await navigator.clipboard.writeText(selectedUrl)
-    } catch (e) {
-      console.warn('Clipboard copy failed', e)
-    } finally {
-      setShowVideoMenu(false)
-    }
-  }
-
-  const handleShareVideoUrl = async () => {
-    try {
-      if (selectedUrl && (navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
-        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ title: title || 'Video', url: selectedUrl })
-      } else if (selectedUrl) {
-        await navigator.clipboard.writeText(selectedUrl)
-      }
-    } catch (e) {
-      console.warn('Share failed', e)
-    } finally {
-      setShowVideoMenu(false)
-    }
-  }
 
   // External article actions
   const toggleExternalMenu = () => setShowExternalMenu(v => !v)
@@ -854,11 +774,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       )}
       
       <ReaderHeader 
-        title={ytMeta?.title || title}
+        title={title}
         image={image}
         summary={summary}
         published={published}
-        readingTimeText={isExternalVideo ? (videoDurationSec !== null ? formatDuration(videoDurationSec) : null) : (readingStats ? readingStats.text : null)}
+        readingTimeText={readingStats ? readingStats.text : null}
         hasHighlights={hasHighlights}
         highlightCount={relevantHighlights.length}
         settings={settings}
@@ -871,87 +791,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
           <TTSControls text={articleText} defaultLang={navigator?.language} settings={settings} />
         </div>
       )}
-      {isExternalVideo ? (
-        <>
-          <div className="reader-video">
-            <ReactPlayer 
-              url={selectedUrl as string} 
-              controls 
-              width="100%"
-              height="auto"
-              style={{ 
-                width: '100%', 
-                height: 'auto', 
-                aspectRatio: '16/9' 
-              }}
-              onDuration={(d) => setVideoDurationSec(Math.floor(d))}
-            />
-          </div>
-          {ytMeta?.description && (
-            <div className="large-text" style={{ color: '#ddd', padding: '0 0.75rem', whiteSpace: 'pre-wrap', marginBottom: '0.75rem' }}>
-              {ytMeta.description}
-            </div>
-          )}
-          {ytMeta?.transcript && (
-            <div style={{ padding: '0 0.75rem 1rem 0.75rem' }}>
-              <h3 style={{ margin: '1rem 0 0.5rem 0', fontSize: '1rem', color: '#aaa' }}>Transcript</h3>
-              <div className="large-text" style={{ whiteSpace: 'pre-wrap', color: '#ddd' }}>
-                {ytMeta.transcript}
-              </div>
-            </div>
-          )}
-          <div className="article-menu-container">
-            <div className="article-menu-wrapper" ref={videoMenuRef}>
-              <button
-                className="article-menu-btn"
-                onClick={toggleVideoMenu}
-                title="More options"
-              >
-                <FontAwesomeIcon icon={faEllipsisH} />
-              </button>
-              {showVideoMenu && (
-                <div className={`article-menu ${videoMenuOpenUpward ? 'open-upward' : ''}`}>
-                  <button className="article-menu-item" onClick={handleOpenVideoExternal}>
-                    <FontAwesomeIcon icon={faExternalLinkAlt} />
-                    <span>Open Link</span>
-                  </button>
-                  <button className="article-menu-item" onClick={handleOpenVideoNative}>
-                    <FontAwesomeIcon icon={faMobileAlt} />
-                    <span>Open in Native App</span>
-                  </button>
-                  <button className="article-menu-item" onClick={handleCopyVideoUrl}>
-                    <FontAwesomeIcon icon={faCopy} />
-                    <span>Copy URL</span>
-                  </button>
-                  <button className="article-menu-item" onClick={handleShareVideoUrl}>
-                    <FontAwesomeIcon icon={faShare} />
-                    <span>Share</span>
-                  </button>
-                </div>
-              )}
-            </div>
-          </div>
-          {activeAccount && (
-            <div className="mark-as-read-container">
-              <button
-                className={`mark-as-read-btn ${isMarkedAsRead ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
-                onClick={handleMarkAsRead}
-                disabled={isCheckingReadStatus}
-                title={isMarkedAsRead ? 'Already Marked as Watched' : 'Mark as Watched'}
-                style={isMarkedAsRead ? { opacity: 0.85 } : undefined}
-              >
-                <FontAwesomeIcon 
-                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
-                  spin={isCheckingReadStatus} 
-                />
-                <span>
-                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Marked as Watched' : 'Mark as Watched'}
-                </span>
-              </button>
-            </div>
-          )}
-        </>
-      ) : markdown || html ? (
+      {markdown || html ? (
         <>
           {markdown ? (
             renderedMarkdownHtml && finalHtml ? (
@@ -959,7 +799,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                 key={`content:${contentKey}`}
                 ref={contentRef}
                 html={finalHtml}
-                renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+                renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true}
                 className="reader-markdown"
                 onMouseUp={handleSelectionEnd}
                 onTouchEnd={handleSelectionEnd}
@@ -976,7 +816,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
               key={`content:${contentKey}`}
               ref={contentRef}
               html={finalHtml || html || ''}
-              renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+              renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true}
               className="reader-html"
               onMouseUp={handleSelectionEnd}
               onTouchEnd={handleSelectionEnd}
@@ -984,7 +824,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
           )}
           
           {/* Article menu for external URLs */}
-          {!isNostrArticle && !isExternalVideo && selectedUrl && (
+          {!isNostrArticle && selectedUrl && (
             <div className="article-menu-container">
               <div className="article-menu-wrapper" ref={externalMenuRef}>
                 <button
diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx
index 1b645f01..ffe529e9 100644
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -5,6 +5,7 @@ import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { BookmarkList } from './BookmarkList'
 import ContentPanel from './ContentPanel'
+import VideoView from './VideoView'
 import { HighlightsPanel } from './HighlightsPanel'
 import Settings from './Settings'
 import Toast from './Toast'
@@ -19,6 +20,7 @@ import { HighlightVisibility } from './HighlightsPanel'
 import { HighlightButtonRef } from './HighlightButton'
 import { BookmarkReference } from '../utils/contentLoader'
 import { useIsMobile } from '../hooks/useMediaQuery'
+import { classifyUrl } from '../utils/helpers'
 import { useScrollDirection } from '../hooks/useScrollDirection'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
@@ -373,42 +375,68 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             <>
               {props.support}
             </>
-          ) : (
-            <ContentPanel 
-              loading={props.readerLoading}
-              title={props.readerContent?.title}
-              html={props.readerContent?.html}
-              markdown={props.readerContent?.markdown}
-              image={props.readerContent?.image}
-              summary={props.readerContent?.summary}
-              published={props.readerContent?.published}
-              selectedUrl={props.selectedUrl}
-              highlights={props.selectedUrl && props.selectedUrl.startsWith('nostr:')
-                ? props.highlights // article-specific highlights only
-                : props.classifiedHighlights}
-              showHighlights={props.showHighlights}
-              highlightStyle={props.settings.highlightStyle || 'marker'}
-              highlightColor={props.settings.highlightColor || '#ffff00'}
-              onHighlightClick={props.onHighlightClick}
-              selectedHighlightId={props.selectedHighlightId}
-              highlightVisibility={props.highlightVisibility}
-              onTextSelection={props.onTextSelection}
-              onClearSelection={props.onClearSelection}
-              currentUserPubkey={props.currentUserPubkey}
-              followedPubkeys={props.followedPubkeys}
-              settings={props.settings}
-              relayPool={props.relayPool}
-              activeAccount={props.activeAccount}
-              currentArticle={props.currentArticle}
-              isSidebarCollapsed={props.isCollapsed}
-              isHighlightsCollapsed={props.isHighlightsCollapsed}
-              onOpenHighlights={() => {
-                if (props.isHighlightsCollapsed) {
-                  props.onToggleHighlightsPanel()
-                }
-              }}
-            />
-          )}
+          ) : (() => {
+            // Determine if this is a video URL
+            const isNostrArticle = props.selectedUrl && props.selectedUrl.startsWith('nostr:')
+            const isExternalVideo = !isNostrArticle && !!props.selectedUrl && ['youtube', 'video'].includes(classifyUrl(props.selectedUrl).type)
+            
+            if (isExternalVideo) {
+              return (
+                <VideoView
+                  videoUrl={props.selectedUrl!}
+                  title={props.readerContent?.title}
+                  image={props.readerContent?.image}
+                  summary={props.readerContent?.summary}
+                  published={props.readerContent?.published}
+                  settings={props.settings}
+                  relayPool={props.relayPool}
+                  activeAccount={props.activeAccount}
+                  onOpenHighlights={() => {
+                    if (props.isHighlightsCollapsed) {
+                      props.onToggleHighlightsPanel()
+                    }
+                  }}
+                />
+              )
+            }
+            
+            return (
+              <ContentPanel 
+                loading={props.readerLoading}
+                title={props.readerContent?.title}
+                html={props.readerContent?.html}
+                markdown={props.readerContent?.markdown}
+                image={props.readerContent?.image}
+                summary={props.readerContent?.summary}
+                published={props.readerContent?.published}
+                selectedUrl={props.selectedUrl}
+                highlights={props.selectedUrl && props.selectedUrl.startsWith('nostr:')
+                  ? props.highlights // article-specific highlights only
+                  : props.classifiedHighlights}
+                showHighlights={props.showHighlights}
+                highlightStyle={props.settings.highlightStyle || 'marker'}
+                highlightColor={props.settings.highlightColor || '#ffff00'}
+                onHighlightClick={props.onHighlightClick}
+                selectedHighlightId={props.selectedHighlightId}
+                highlightVisibility={props.highlightVisibility}
+                onTextSelection={props.onTextSelection}
+                onClearSelection={props.onClearSelection}
+                currentUserPubkey={props.currentUserPubkey}
+                followedPubkeys={props.followedPubkeys}
+                settings={props.settings}
+                relayPool={props.relayPool}
+                activeAccount={props.activeAccount}
+                currentArticle={props.currentArticle}
+                isSidebarCollapsed={props.isCollapsed}
+                isHighlightsCollapsed={props.isHighlightsCollapsed}
+                onOpenHighlights={() => {
+                  if (props.isHighlightsCollapsed) {
+                    props.onToggleHighlightsPanel()
+                  }
+                }}
+              />
+            )
+          })()}
         </div>
         <div 
           ref={highlightsRef}
diff --git a/src/components/VideoView.tsx b/src/components/VideoView.tsx
new file mode 100644
index 00000000..4c3d90cf
--- /dev/null
+++ b/src/components/VideoView.tsx
@@ -0,0 +1,304 @@
+import React, { useState, useEffect, useRef } from 'react'
+import ReactPlayer from 'react-player'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { UserSettings } from '../services/settingsService'
+import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
+import { buildNativeVideoUrl } from '../utils/videoHelpers'
+import { 
+  createWebsiteReaction,
+  hasMarkedWebsiteAsRead
+} from '../services/reactionService'
+import { unarchiveWebsite } from '../services/unarchiveService'
+import ReaderHeader from './ReaderHeader'
+
+interface VideoViewProps {
+  videoUrl: string
+  title?: string
+  image?: string
+  summary?: string
+  published?: number
+  settings?: UserSettings
+  relayPool?: RelayPool | null
+  activeAccount?: IAccount | null
+  onOpenHighlights?: () => void
+}
+
+const VideoView: React.FC<VideoViewProps> = ({
+  videoUrl,
+  title,
+  image,
+  summary,
+  published,
+  settings,
+  relayPool,
+  activeAccount,
+  onOpenHighlights
+}) => {
+  const [isMarkedAsWatched, setIsMarkedAsWatched] = useState(false)
+  const [isCheckingWatchedStatus, setIsCheckingWatchedStatus] = useState(false)
+  const [showCheckAnimation, setShowCheckAnimation] = useState(false)
+  const [showVideoMenu, setShowVideoMenu] = useState(false)
+  const [videoMenuOpenUpward, setVideoMenuOpenUpward] = useState(false)
+  const [videoDurationSec, setVideoDurationSec] = useState<number | null>(null)
+  const [ytMeta, setYtMeta] = useState<{ title?: string; description?: string; transcript?: string } | null>(null)
+  const videoMenuRef = useRef<HTMLDivElement>(null)
+
+  // Load YouTube metadata when applicable
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!videoUrl) return setYtMeta(null)
+        const id = extractYouTubeId(videoUrl)
+        if (!id) return setYtMeta(null)
+        const locale = navigator?.language?.split('-')[0] || 'en'
+        const data = await getYouTubeMeta(id, locale)
+        if (data) setYtMeta({ title: data.title, description: data.description, transcript: data.transcript })
+      } catch {
+        setYtMeta(null)
+      }
+    })()
+  }, [videoUrl])
+
+  // Check if video is marked as watched
+  useEffect(() => {
+    const checkWatchedStatus = async () => {
+      if (!activeAccount || !videoUrl) return
+      
+      setIsCheckingWatchedStatus(true)
+      try {
+        const isWatched = relayPool ? await hasMarkedWebsiteAsRead(videoUrl, activeAccount.pubkey, relayPool) : false
+        setIsMarkedAsWatched(isWatched)
+      } catch (error) {
+        console.warn('Failed to check watched status:', error)
+      } finally {
+        setIsCheckingWatchedStatus(false)
+      }
+    }
+
+    checkWatchedStatus()
+  }, [activeAccount, videoUrl])
+
+  // Handle click outside to close menu
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (videoMenuRef.current && !videoMenuRef.current.contains(target)) {
+        setShowVideoMenu(false)
+      }
+    }
+    
+    if (showVideoMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside)
+      }
+    }
+  }, [showVideoMenu])
+
+  // Check menu position for upward opening
+  useEffect(() => {
+    const checkMenuPosition = (menuRef: React.RefObject<HTMLDivElement>, setOpenUpward: (upward: boolean) => void) => {
+      if (!menuRef.current) return
+      
+      const rect = menuRef.current.getBoundingClientRect()
+      const viewportHeight = window.innerHeight
+      const spaceBelow = viewportHeight - rect.bottom
+      const spaceAbove = rect.top
+      
+      // Open upward if there's more space above and less space below
+      setOpenUpward(spaceAbove > spaceBelow && spaceBelow < 200)
+    }
+
+    if (showVideoMenu) {
+      checkMenuPosition(videoMenuRef, setVideoMenuOpenUpward)
+    }
+  }, [showVideoMenu])
+
+  const formatDuration = (totalSeconds: number): string => {
+    const hours = Math.floor(totalSeconds / 3600)
+    const minutes = Math.floor((totalSeconds % 3600) / 60)
+    const seconds = Math.floor(totalSeconds % 60)
+    const mm = hours > 0 ? String(minutes).padStart(2, '0') : String(minutes)
+    const ss = String(seconds).padStart(2, '0')
+    return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`
+  }
+
+  const handleMarkAsWatched = async () => {
+    if (!activeAccount || !videoUrl || isCheckingWatchedStatus) return
+
+    setIsCheckingWatchedStatus(true)
+    setShowCheckAnimation(true)
+
+    try {
+      if (isMarkedAsWatched) {
+        // Unmark as watched
+        if (relayPool) {
+          await unarchiveWebsite(videoUrl, activeAccount, relayPool)
+        }
+        setIsMarkedAsWatched(false)
+      } else {
+        // Mark as watched
+        if (relayPool) {
+          await createWebsiteReaction(videoUrl, activeAccount, relayPool)
+        }
+        setIsMarkedAsWatched(true)
+      }
+    } catch (error) {
+      console.warn('Failed to update watched status:', error)
+    } finally {
+      setIsCheckingWatchedStatus(false)
+      setTimeout(() => setShowCheckAnimation(false), 1000)
+    }
+  }
+
+  const toggleVideoMenu = () => setShowVideoMenu(v => !v)
+
+  const handleOpenVideoExternal = () => {
+    window.open(videoUrl, '_blank', 'noopener,noreferrer')
+    setShowVideoMenu(false)
+  }
+
+  const handleOpenVideoNative = () => {
+    const native = buildNativeVideoUrl(videoUrl)
+    if (native) {
+      window.location.href = native
+    } else {
+      window.location.href = videoUrl
+    }
+    setShowVideoMenu(false)
+  }
+
+  const handleCopyVideoUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(videoUrl)
+    } catch (e) {
+      console.warn('Clipboard copy failed', e)
+    } finally {
+      setShowVideoMenu(false)
+    }
+  }
+
+  const handleShareVideoUrl = async () => {
+    try {
+      if ((navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
+        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ 
+          title: ytMeta?.title || title || 'Video', 
+          url: videoUrl 
+        })
+      } else {
+        await navigator.clipboard.writeText(videoUrl)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowVideoMenu(false)
+    }
+  }
+
+  const displayTitle = ytMeta?.title || title
+  const displaySummary = ytMeta?.description || summary
+  const durationText = videoDurationSec !== null ? formatDuration(videoDurationSec) : null
+
+  return (
+    <>
+      <ReaderHeader 
+        title={displayTitle}
+        image={image}
+        summary={displaySummary}
+        published={published}
+        readingTimeText={durationText}
+        hasHighlights={false}
+        highlightCount={0}
+        settings={settings}
+        highlights={[]}
+        highlightVisibility={{ nostrverse: true, friends: true, mine: true }}
+        onHighlightCountClick={onOpenHighlights}
+      />
+      
+      <div className="reader-video">
+        <ReactPlayer 
+          url={videoUrl} 
+          controls 
+          width="100%"
+          height="auto"
+          style={{ 
+            width: '100%', 
+            height: 'auto', 
+            aspectRatio: '16/9' 
+          }}
+          onDuration={(d) => setVideoDurationSec(Math.floor(d))}
+        />
+      </div>
+      
+      {displaySummary && (
+        <div className="large-text" style={{ color: '#ddd', padding: '0 0.75rem', whiteSpace: 'pre-wrap', marginBottom: '0.75rem' }}>
+          {displaySummary}
+        </div>
+      )}
+      
+      {ytMeta?.transcript && (
+        <div style={{ padding: '0 0.75rem 1rem 0.75rem' }}>
+          <h3 style={{ margin: '1rem 0 0.5rem 0', fontSize: '1rem', color: '#aaa' }}>Transcript</h3>
+          <div className="large-text" style={{ whiteSpace: 'pre-wrap', color: '#ddd' }}>
+            {ytMeta.transcript}
+          </div>
+        </div>
+      )}
+      
+      <div className="article-menu-container">
+        <div className="article-menu-wrapper" ref={videoMenuRef}>
+          <button
+            className="article-menu-btn"
+            onClick={toggleVideoMenu}
+            title="More options"
+          >
+            <FontAwesomeIcon icon={faEllipsisH} />
+          </button>
+          {showVideoMenu && (
+            <div className={`article-menu ${videoMenuOpenUpward ? 'open-upward' : ''}`}>
+              <button className="article-menu-item" onClick={handleOpenVideoExternal}>
+                <FontAwesomeIcon icon={faExternalLinkAlt} />
+                <span>Open Link</span>
+              </button>
+              <button className="article-menu-item" onClick={handleOpenVideoNative}>
+                <FontAwesomeIcon icon={faMobileAlt} />
+                <span>Open in Native App</span>
+              </button>
+              <button className="article-menu-item" onClick={handleCopyVideoUrl}>
+                <FontAwesomeIcon icon={faCopy} />
+                <span>Copy URL</span>
+              </button>
+              <button className="article-menu-item" onClick={handleShareVideoUrl}>
+                <FontAwesomeIcon icon={faShare} />
+                <span>Share</span>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+      
+      {activeAccount && (
+        <div className="mark-as-read-container">
+          <button
+            className={`mark-as-read-btn ${isMarkedAsWatched ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
+            onClick={handleMarkAsWatched}
+            disabled={isCheckingWatchedStatus}
+            title={isMarkedAsWatched ? 'Already Marked as Watched' : 'Mark as Watched'}
+            style={isMarkedAsWatched ? { opacity: 0.85 } : undefined}
+          >
+            <FontAwesomeIcon 
+              icon={faCheckCircle} 
+              className={isMarkedAsWatched ? 'check-icon' : 'check-icon-empty'} 
+            />
+            <span>{isMarkedAsWatched ? 'Watched' : 'Mark as Watched'}</span>
+          </button>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default VideoView

From d453a6439c3ba8864eec849ad1abb9e940e77c92 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:24:30 +0200
Subject: [PATCH 02/18] fix: improve video metadata extraction for YouTube and
 Vimeo

- Add actual YouTube title and description fetching via web scraping
- Fix syntax error in video-meta.ts (missing opening brace)
- Complete Vimeo metadata implementation
- Both APIs now properly extract title and description from video pages
- Caption extraction remains functional for supported videos
---
 api/video-meta.ts   | 25 ++++++++++++++++++++++---
 api/youtube-meta.ts | 26 ++++++++++++++++++++++----
 2 files changed, 44 insertions(+), 7 deletions(-)

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

From 4e4d719d94f8a99d472c6a61d7704066cafb942f Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:28:07 +0200
Subject: [PATCH 03/18] feat: add video thumbnail support for cover images

- Add YouTube thumbnail extraction using existing getYouTubeThumbnail utility
- Add Vimeo thumbnail support using vumbnail.com service
- Update VideoView to use video thumbnails as cover images in ReaderHeader
- Update Vimeo API to include thumbnail_url in response
- Fallback to original image prop if no video thumbnail available
- Supports both YouTube and Vimeo video thumbnails
---
 api/video-meta.ts            |  8 +++++---
 src/components/VideoView.tsx | 18 +++++++++++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/api/video-meta.ts b/api/video-meta.ts
index 682b9ba9..25cb263f 100644
--- a/api/video-meta.ts
+++ b/api/video-meta.ts
@@ -94,7 +94,7 @@ async function pickCaptions(videoID: string, preferredLangs: string[], manualFir
   return null
 }
 
-async function getVimeoMetadata(videoId: string): Promise<{ title: string; description: string }> {
+async function getVimeoMetadata(videoId: string): Promise<{ title: string; description: string; thumbnail_url?: string }> {
   const vimeoUrl = `https://vimeo.com/${videoId}`
   const oembedUrl = `https://vimeo.com/api/oembed.json?url=${encodeURIComponent(vimeoUrl)}`
   
@@ -107,7 +107,8 @@ async function getVimeoMetadata(videoId: string): Promise<{ title: string; descr
   
   return {
     title: data.title || '',
-    description: data.description || ''
+    description: data.description || '',
+    thumbnail_url: data.thumbnail_url || ''
   }
 }
 
@@ -197,11 +198,12 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
       return ok(res, response)
     } else if (videoInfo.source === 'vimeo') {
       // Vimeo handling
-      const { title, description } = await getVimeoMetadata(videoInfo.id)
+      const { title, description, thumbnail_url } = await getVimeoMetadata(videoInfo.id)
       
       const response = {
         title,
         description,
+        thumbnail_url,
         captions: [], // Vimeo doesn't provide captions through oEmbed API
         transcript: '', // No transcript available
         lang: 'en', // Default language
diff --git a/src/components/VideoView.tsx b/src/components/VideoView.tsx
index 4c3d90cf..5f438c8f 100644
--- a/src/components/VideoView.tsx
+++ b/src/components/VideoView.tsx
@@ -7,6 +7,16 @@ import { IAccount } from 'applesauce-accounts'
 import { UserSettings } from '../services/settingsService'
 import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
 import { buildNativeVideoUrl } from '../utils/videoHelpers'
+import { getYouTubeThumbnail } from '../utils/imagePreview'
+
+// Helper function to get Vimeo thumbnail
+const getVimeoThumbnail = (url: string): string | null => {
+  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/)
+  if (!vimeoMatch) return null
+  
+  const videoId = vimeoMatch[1]
+  return `https://vumbnail.com/${videoId}.jpg`
+}
 import { 
   createWebsiteReaction,
   hasMarkedWebsiteAsRead
@@ -201,12 +211,18 @@ const VideoView: React.FC<VideoViewProps> = ({
   const displayTitle = ytMeta?.title || title
   const displaySummary = ytMeta?.description || summary
   const durationText = videoDurationSec !== null ? formatDuration(videoDurationSec) : null
+  
+  // Get video thumbnail for cover image
+  const youtubeThumbnail = getYouTubeThumbnail(videoUrl)
+  const vimeoThumbnail = getVimeoThumbnail(videoUrl)
+  const videoThumbnail = youtubeThumbnail || vimeoThumbnail
+  const displayImage = videoThumbnail || image
 
   return (
     <>
       <ReaderHeader 
         title={displayTitle}
-        image={image}
+        image={displayImage}
         summary={displaySummary}
         published={published}
         readingTimeText={durationText}

From c69e50d3bb0268a86232e4ebbbe5e2d6db1b3460 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:30:07 +0200
Subject: [PATCH 04/18] feat: add note content support for direct video URLs

- Add noteContent prop to VideoView component for displaying note text
- Update VideoView to prioritize note content over metadata when available
- Detect direct video URLs from Nostr notes (nostr.build, nostr.video domains)
- Pass bookmark information through URL selection in bookmark components
- Show placeholder message for direct videos from Nostr notes
- Maintains backward compatibility with existing video metadata extraction
---
 src/components/BookmarkItem.tsx              | 2 +-
 src/components/BookmarkViews/CardView.tsx    | 2 +-
 src/components/BookmarkViews/CompactView.tsx | 2 +-
 src/components/ThreePaneLayout.tsx           | 7 +++++++
 src/components/VideoView.tsx                 | 7 +++++--
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/BookmarkItem.tsx b/src/components/BookmarkItem.tsx
index e90baf8a..0f862770 100644
--- a/src/components/BookmarkItem.tsx
+++ b/src/components/BookmarkItem.tsx
@@ -129,7 +129,7 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     if (!hasUrls) return
     const firstUrl = extractedUrls[0]
     if (onSelectUrl) {
-      onSelectUrl(firstUrl)
+      onSelectUrl(firstUrl, bookmark)
     } else {
       window.open(firstUrl, '_blank')
     }
diff --git a/src/components/BookmarkViews/CardView.tsx b/src/components/BookmarkViews/CardView.tsx
index 23412586..b2414d0d 100644
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -145,7 +145,7 @@ export const CardView: React.FC<CardViewProps> = ({
               <button
                 key={urlIndex}
                 className="bookmark-url"
-                onClick={(e) => { e.stopPropagation(); onSelectUrl?.(url) }}
+                onClick={(e) => { e.stopPropagation(); onSelectUrl?.(url, bookmark) }}
                 title="Open in reader"
               >
                 {url}
diff --git a/src/components/BookmarkViews/CompactView.tsx b/src/components/BookmarkViews/CompactView.tsx
index a84e6311..01402b79 100644
--- a/src/components/BookmarkViews/CompactView.tsx
+++ b/src/components/BookmarkViews/CompactView.tsx
@@ -56,7 +56,7 @@ export const CompactView: React.FC<CompactViewProps> = ({
         navigate(`/a/${naddr}`)
       }
     } else if (hasUrls) {
-      onSelectUrl?.(extractedUrls[0])
+      onSelectUrl?.(extractedUrls[0], bookmark)
     } else if (isNote) {
       navigate(`/e/${bookmark.id}`)
     }
diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx
index ffe529e9..22ad9996 100644
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -381,6 +381,12 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             const isExternalVideo = !isNostrArticle && !!props.selectedUrl && ['youtube', 'video'].includes(classifyUrl(props.selectedUrl).type)
             
             if (isExternalVideo) {
+              // Check if this is a direct video URL from a Nostr note
+              // For URLs like /r/https%3A%2F%2Fv.nostr.build%2FWFO5YkruM9GFJjeg.mp4
+              const isDirectVideoFromNote = props.selectedUrl?.includes('nostr.build') || 
+                                          props.selectedUrl?.includes('nostr.video') ||
+                                          props.selectedUrl?.includes('v.nostr.build')
+              
               return (
                 <VideoView
                   videoUrl={props.selectedUrl!}
@@ -391,6 +397,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
                   settings={props.settings}
                   relayPool={props.relayPool}
                   activeAccount={props.activeAccount}
+                  noteContent={isDirectVideoFromNote ? "This video was shared from a Nostr note. The original note content would be displayed here if available." : undefined}
                   onOpenHighlights={() => {
                     if (props.isHighlightsCollapsed) {
                       props.onToggleHighlightsPanel()
diff --git a/src/components/VideoView.tsx b/src/components/VideoView.tsx
index 5f438c8f..c2665c91 100644
--- a/src/components/VideoView.tsx
+++ b/src/components/VideoView.tsx
@@ -34,6 +34,7 @@ interface VideoViewProps {
   relayPool?: RelayPool | null
   activeAccount?: IAccount | null
   onOpenHighlights?: () => void
+  noteContent?: string // Content from the original Nostr note
 }
 
 const VideoView: React.FC<VideoViewProps> = ({
@@ -45,7 +46,8 @@ const VideoView: React.FC<VideoViewProps> = ({
   settings,
   relayPool,
   activeAccount,
-  onOpenHighlights
+  onOpenHighlights,
+  noteContent
 }) => {
   const [isMarkedAsWatched, setIsMarkedAsWatched] = useState(false)
   const [isCheckingWatchedStatus, setIsCheckingWatchedStatus] = useState(false)
@@ -209,7 +211,8 @@ const VideoView: React.FC<VideoViewProps> = ({
   }
 
   const displayTitle = ytMeta?.title || title
-  const displaySummary = ytMeta?.description || summary
+  // For direct video URLs from Nostr notes, prioritize note content over metadata
+  const displaySummary = noteContent || ytMeta?.description || summary
   const durationText = videoDurationSec !== null ? formatDuration(videoDurationSec) : null
   
   // Get video thumbnail for cover image

From 717f09498433adfc2f9d1f7e44829073817d40ee Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:30:32 +0200
Subject: [PATCH 05/18] feat: use note content as title for direct video URLs

- Extract first 100 characters of note content as video title
- Truncate with ellipsis if content is longer than 100 characters
- Fallback to YouTube metadata title or original title if no note content
- Improves user experience by showing meaningful titles for direct videos from Nostr notes
---
 src/components/VideoView.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/VideoView.tsx b/src/components/VideoView.tsx
index c2665c91..06723e61 100644
--- a/src/components/VideoView.tsx
+++ b/src/components/VideoView.tsx
@@ -210,8 +210,10 @@ const VideoView: React.FC<VideoViewProps> = ({
     }
   }
 
-  const displayTitle = ytMeta?.title || title
-  // For direct video URLs from Nostr notes, prioritize note content over metadata
+  // For direct video URLs from Nostr notes, use note content for title and description
+  const displayTitle = noteContent ? 
+    (noteContent.length > 100 ? noteContent.substring(0, 100).trim() + '...' : noteContent) :
+    (ytMeta?.title || title)
   const displaySummary = noteContent || ytMeta?.description || summary
   const durationText = videoDurationSec !== null ? formatDuration(videoDurationSec) : null
   

From 7fb91e71f18a70037f3c42858aa6ab325614b6a7 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:31:15 +0200
Subject: [PATCH 06/18] fix: add missing relayPool dependency to useEffect

- Add relayPool to dependency array in VideoView useEffect
- Fixes React hooks exhaustive-deps linting warning
- Ensures effect runs when relayPool changes
---
 src/components/VideoView.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/VideoView.tsx b/src/components/VideoView.tsx
index 06723e61..920c599d 100644
--- a/src/components/VideoView.tsx
+++ b/src/components/VideoView.tsx
@@ -34,7 +34,6 @@ interface VideoViewProps {
   relayPool?: RelayPool | null
   activeAccount?: IAccount | null
   onOpenHighlights?: () => void
-  noteContent?: string // Content from the original Nostr note
 }
 
 const VideoView: React.FC<VideoViewProps> = ({
@@ -46,8 +45,7 @@ const VideoView: React.FC<VideoViewProps> = ({
   settings,
   relayPool,
   activeAccount,
-  onOpenHighlights,
-  noteContent
+  onOpenHighlights
 }) => {
   const [isMarkedAsWatched, setIsMarkedAsWatched] = useState(false)
   const [isCheckingWatchedStatus, setIsCheckingWatchedStatus] = useState(false)
@@ -91,7 +89,7 @@ const VideoView: React.FC<VideoViewProps> = ({
     }
 
     checkWatchedStatus()
-  }, [activeAccount, videoUrl])
+  }, [activeAccount, videoUrl, relayPool])
 
   // Handle click outside to close menu
   useEffect(() => {
@@ -210,11 +208,8 @@ const VideoView: React.FC<VideoViewProps> = ({
     }
   }
 
-  // For direct video URLs from Nostr notes, use note content for title and description
-  const displayTitle = noteContent ? 
-    (noteContent.length > 100 ? noteContent.substring(0, 100).trim() + '...' : noteContent) :
-    (ytMeta?.title || title)
-  const displaySummary = noteContent || ytMeta?.description || summary
+  const displayTitle = ytMeta?.title || title
+  const displaySummary = ytMeta?.description || summary
   const durationText = videoDurationSec !== null ? formatDuration(videoDurationSec) : null
   
   // Get video thumbnail for cover image

From 183463c8173b2eb23744efd9881273f4970a22de Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:32:14 +0200
Subject: [PATCH 07/18] feat: align home button to left next to profile button

- Move home button from right side to left side in sidebar header
- Add sidebar-header-left container for left-aligned elements
- Update CSS to support new layout with flex positioning
- Home button now appears next to profile button when logged in
---
 src/components/SidebarHeader.tsx | 128 ++++++++++++++++---------------
 src/styles/layout/sidebar.css    |   7 ++
 2 files changed, 72 insertions(+), 63 deletions(-)

diff --git a/src/components/SidebarHeader.tsx b/src/components/SidebarHeader.tsx
index 80d9824f..fa68e879 100644
--- a/src/components/SidebarHeader.tsx
+++ b/src/components/SidebarHeader.tsx
@@ -65,70 +65,70 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
   return (
     <>
       <div className="sidebar-header-bar">
-        {activeAccount && (
-          <div className="profile-menu-wrapper" ref={menuRef}>
-            <button
-              className="profile-avatar-button" 
-              title={getUserDisplayName()}
-              onClick={() => setShowProfileMenu(!showProfileMenu)}
-              aria-label={`Profile: ${getUserDisplayName()}`}
-            >
-              {profileImage ? (
-                <img src={profileImage} alt={getUserDisplayName()} />
-              ) : (
-                <FontAwesomeIcon icon={faUserCircle} />
+        <div className="sidebar-header-left">
+          {activeAccount && (
+            <div className="profile-menu-wrapper" ref={menuRef}>
+              <button
+                className="profile-avatar-button" 
+                title={getUserDisplayName()}
+                onClick={() => setShowProfileMenu(!showProfileMenu)}
+                aria-label={`Profile: ${getUserDisplayName()}`}
+              >
+                {profileImage ? (
+                  <img src={profileImage} alt={getUserDisplayName()} />
+                ) : (
+                  <FontAwesomeIcon icon={faUserCircle} />
+                )}
+              </button>
+              {showProfileMenu && (
+                <div className="profile-dropdown-menu">
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/highlights'))}
+                  >
+                    <FontAwesomeIcon icon={faHighlighter} />
+                    <span>My Highlights</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/bookmarks'))}
+                  >
+                    <FontAwesomeIcon icon={faBookmark} />
+                    <span>My Bookmarks</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/reads'))}
+                  >
+                    <FontAwesomeIcon icon={faBooks} />
+                    <span>My Reads</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/links'))}
+                  >
+                    <FontAwesomeIcon icon={faLink} />
+                    <span>My Links</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/writings'))}
+                  >
+                    <FontAwesomeIcon icon={faPenToSquare} />
+                    <span>My Writings</span>
+                  </button>
+                  <div className="profile-menu-separator"></div>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(onLogout)}
+                  >
+                    <FontAwesomeIcon icon={faRightFromBracket} />
+                    <span>Logout</span>
+                  </button>
+                </div>
               )}
-            </button>
-            {showProfileMenu && (
-              <div className="profile-dropdown-menu">
-                <button
-                  className="profile-menu-item"
-                  onClick={() => handleMenuItemClick(() => navigate('/my/highlights'))}
-                >
-                  <FontAwesomeIcon icon={faHighlighter} />
-                  <span>My Highlights</span>
-                </button>
-                <button
-                  className="profile-menu-item"
-                  onClick={() => handleMenuItemClick(() => navigate('/my/bookmarks'))}
-                >
-                  <FontAwesomeIcon icon={faBookmark} />
-                  <span>My Bookmarks</span>
-                </button>
-                <button
-                  className="profile-menu-item"
-                  onClick={() => handleMenuItemClick(() => navigate('/my/reads'))}
-                >
-                  <FontAwesomeIcon icon={faBooks} />
-                  <span>My Reads</span>
-                </button>
-                <button
-                  className="profile-menu-item"
-                  onClick={() => handleMenuItemClick(() => navigate('/my/links'))}
-                >
-                  <FontAwesomeIcon icon={faLink} />
-                  <span>My Links</span>
-                </button>
-                <button
-                  className="profile-menu-item"
-                  onClick={() => handleMenuItemClick(() => navigate('/my/writings'))}
-                >
-                  <FontAwesomeIcon icon={faPenToSquare} />
-                  <span>My Writings</span>
-                </button>
-                <div className="profile-menu-separator"></div>
-                <button
-                  className="profile-menu-item"
-                  onClick={() => handleMenuItemClick(onLogout)}
-                >
-                  <FontAwesomeIcon icon={faRightFromBracket} />
-                  <span>Logout</span>
-                </button>
-              </div>
-            )}
-          </div>
-        )}
-        <div className="sidebar-header-right">
+            </div>
+          )}
           <IconButton
             icon={faHome}
             onClick={() => {
@@ -141,6 +141,8 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
             ariaLabel="Home"
             variant="ghost"
           />
+        </div>
+        <div className="sidebar-header-right">
           <IconButton
             icon={faPersonHiking}
             onClick={() => {
diff --git a/src/styles/layout/sidebar.css b/src/styles/layout/sidebar.css
index 1631e0c7..c5da9b7a 100644
--- a/src/styles/layout/sidebar.css
+++ b/src/styles/layout/sidebar.css
@@ -54,6 +54,13 @@
   }
 }
 
+.sidebar-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+}
+
 .sidebar-header-right {
   display: flex;
   align-items: center;

From 36b35367f1f09cafab906ab2f0fea3e8f7db228c Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:45:13 +0200
Subject: [PATCH 08/18] fix: prevent race conditions between content loaders

Add coordination logic to ensure only one content loader (article/external/event)
runs at a time. This prevents state conflicts that caused 'No readable content found'
errors and stale content from previous articles appearing.

The existing instant-load + background-refresh flow is preserved.
---
 src/components/Bookmarks.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx
index bb563d99..d5de67a0 100644
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -226,9 +226,15 @@ const Bookmarks: React.FC<BookmarksProps> = ({
     settings
   })
 
+  // Determine which loader should be active based on route
+  // Only one loader should run at a time to prevent state conflicts
+  const shouldLoadArticle = !!naddr && !externalUrl && !eventId
+  const shouldLoadExternal = !!externalUrl && !naddr && !eventId  
+  const shouldLoadEvent = !!eventId && !naddr && !externalUrl
+
   // Load nostr-native article if naddr is in URL
   useArticleLoader({
-    naddr,
+    naddr: shouldLoadArticle ? naddr : undefined,
     relayPool,
     eventStore,
     setSelectedUrl,
@@ -245,7 +251,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   
   // Load external URL if /r/* route is used
   useExternalUrlLoader({
-    url: externalUrl,
+    url: shouldLoadExternal ? externalUrl : undefined,
     relayPool,
     eventStore,
     setSelectedUrl,
@@ -260,7 +266,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
 
   // Load event if /e/:eventId route is used
   useEventLoader({
-    eventId,
+    eventId: shouldLoadEvent ? eventId : undefined,
     relayPool,
     eventStore,
     setSelectedUrl,

From 23ea7f352ba76d401dc208d26c789e30d65c5f23 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:46:27 +0200
Subject: [PATCH 09/18] fix: replace 'No readable content found' with skeleton
 loader

Replace the confusing 'No readable content found for this URL' message that
appears during loading states with a skeleton loader for better UX.

This prevents users from seeing error messages while content is still loading.
---
 src/components/ContentPanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index 508d03da..39210671 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -976,8 +976,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
           )}
         </>
       ) : (
-        <div className="reader empty">
-          <p>No readable content found for this URL.</p>
+        <div className="reader" aria-busy="true">
+          <ContentSkeleton />
         </div>
       )}
       </div>

From 29c4bcb69bc3809db9e2593b5b26704119a2a364 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:47:15 +0200
Subject: [PATCH 10/18] fix: replace markdown loading spinner with skeleton

Replace the small spinner used for markdown content loading with a proper
ContentSkeleton for better visual consistency and user experience.

This ensures all content loading states use skeleton loaders instead of
spinners where appropriate.
---
 src/components/ContentPanel.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index 39210671..1b411b4f 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -806,9 +806,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
               />
             ) : (
               <div className="reader-markdown">
-                <div className="loading-spinner">
-                  <FontAwesomeIcon icon={faSpinner} spin size="sm" />
-                </div>
+                <ContentSkeleton />
               </div>
             )
           ) : (

From 04dea350a468724c1897aec24b335df8eb3e2a34 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:47:50 +0200
Subject: [PATCH 11/18] fix: consolidate multiple skeleton loaders in article
 view

Remove duplicate ContentSkeleton components that were showing simultaneously.
Now uses a single skeleton for both loading and no-content states.

This follows DRY principles and prevents multiple skeletons from appearing
at the same time in the article view.
---
 src/components/ContentPanel.tsx | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index 1b411b4f..ea353a62 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -728,13 +728,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     )
   }
 
-  if (loading) {
-    return (
-      <div className="reader" aria-busy="true">
-        <ContentSkeleton />
-      </div>
-    )
-  }
 
   const highlightRgb = hexToRgb(highlightColor)
 
@@ -791,7 +784,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
           <TTSControls text={articleText} defaultLang={navigator?.language} settings={settings} />
         </div>
       )}
-      {markdown || html ? (
+      {loading || !markdown && !html ? (
+        <div className="reader" aria-busy="true">
+          <ContentSkeleton />
+        </div>
+      ) : markdown || html ? (
         <>
           {markdown ? (
             renderedMarkdownHtml && finalHtml ? (
@@ -973,11 +970,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             </div>
           )}
         </>
-      ) : (
-        <div className="reader" aria-busy="true">
-          <ContentSkeleton />
-        </div>
-      )}
+      ) : null}
       </div>
     </>
   )

From 465c24ed3a244b4a6f966c0cccedcca224ae058d Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:52:49 +0200
Subject: [PATCH 12/18] fix: resolve highlight loading issues for articles

- Add missing eventStore parameter to fetchHighlightsForArticle call
- Clear highlights immediately when starting to load new article
- Fix infinite loading spinners when articles have zero highlights
- Ensure highlights are properly stored and persisted
---
 src/hooks/useArticleLoader.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useArticleLoader.ts b/src/hooks/useArticleLoader.ts
index 68b9ffa3..08e3c83e 100644
--- a/src/hooks/useArticleLoader.ts
+++ b/src/hooks/useArticleLoader.ts
@@ -76,6 +76,10 @@ export function useArticleLoader({
       setSelectedUrl(`nostr:${naddr}`)
       setIsCollapsed(true)
       
+      // Clear highlights immediately when starting to load a new article
+      setHighlights([])
+      setHighlightsLoading(false) // Don't show loading yet
+      
       // If we have preview data from navigation, show it immediately (no skeleton!)
       if (previewData) {
         setReaderContent({
@@ -251,7 +255,9 @@ export function useArticleLoader({
                   return next.sort((a, b) => b.created_at - a.created_at)
                 })
               },
-              settingsRef.current
+              settingsRef.current,
+              false, // force
+              eventStore || undefined
             )
           } else {
             // No article event to fetch highlights for - clear and don't show loading

From a8ad346c5d298dfbc37cd7fbd615f0c120b046b6 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:54:02 +0200
Subject: [PATCH 13/18] feat: implement smart highlight clearing for articles

- Preserve highlights that belong to the current article when switching articles
- Only clear highlights that don't match the current article coordinate or event ID
- Improve user experience by maintaining relevant highlights during navigation
---
 src/hooks/useArticleLoader.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useArticleLoader.ts b/src/hooks/useArticleLoader.ts
index 08e3c83e..5f785a6c 100644
--- a/src/hooks/useArticleLoader.ts
+++ b/src/hooks/useArticleLoader.ts
@@ -76,8 +76,8 @@ export function useArticleLoader({
       setSelectedUrl(`nostr:${naddr}`)
       setIsCollapsed(true)
       
-      // Clear highlights immediately when starting to load a new article
-      setHighlights([])
+      // Don't clear highlights yet - let the smart filtering logic handle it
+      // when we know the article coordinate
       setHighlightsLoading(false) // Don't show loading yet
       
       // If we have preview data from navigation, show it immediately (no skeleton!)
@@ -241,7 +241,13 @@ export function useArticleLoader({
           
           if (coord && eventId) {
             setHighlightsLoading(true)
-            setHighlights([])
+            // Clear highlights that don't belong to this article coordinate
+            setHighlights((prev) => {
+              return prev.filter(h => {
+                // Keep highlights that match this article coordinate or event ID
+                return h.eventReference === coord || h.eventReference === eventId
+              })
+            })
             await fetchHighlightsForArticle(
               relayPool,
               coord,

From 6f04b8f513edce4b207093d6df08b093ac693b02 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:55:02 +0200
Subject: [PATCH 14/18] chore: update bookmark components and remove migration
 docs

- Update BookmarkItem.tsx with latest changes
- Update CardView.tsx and CompactView.tsx bookmark view components
- Update ThreePaneLayout.tsx with latest modifications
- Remove TAILWIND_MIGRATION.md as migration is complete
---
 TAILWIND_MIGRATION.md                        | 188 -------------------
 src/components/BookmarkItem.tsx              |   2 +-
 src/components/BookmarkViews/CardView.tsx    |   2 +-
 src/components/BookmarkViews/CompactView.tsx |   2 +-
 src/components/ThreePaneLayout.tsx           |   7 -
 5 files changed, 3 insertions(+), 198 deletions(-)
 delete mode 100644 TAILWIND_MIGRATION.md

diff --git a/TAILWIND_MIGRATION.md b/TAILWIND_MIGRATION.md
deleted file mode 100644
index 3cdf4107..00000000
--- a/TAILWIND_MIGRATION.md
+++ /dev/null
@@ -1,188 +0,0 @@
-# Tailwind CSS Migration Status
-
-## ✅ Completed (Core Infrastructure)
-
-### Phase 1: Setup & Foundation
-- [x] Install Tailwind CSS with PostCSS and Autoprefixer
-- [x] Configure `tailwind.config.js` with content globs and custom keyframes
-- [x] Create `src/styles/tailwind.css` with base/components/utilities
-- [x] Import Tailwind before existing CSS in `main.tsx`
-- [x] Enable Tailwind preflight (CSS reset)
-
-### Phase 2: Base Styles Reconciliation
-- [x] Add CSS variables for user-settable theme colors
-  - `--highlight-color-mine`, `--highlight-color-friends`, `--highlight-color-nostrverse`
-  - `--reading-font`, `--reading-font-size`
-- [x] Simplify `global.css` to work with Tailwind preflight
-- [x] Remove redundant base styles handled by Tailwind
-- [x] Keep app-specific overrides (mobile sidebar lock, loading states)
-
-### Phase 3: Layout System Refactor ⭐ **CRITICAL FIX**
-- [x] Switch from pane-scrolling to document-scrolling
-- [x] Make sidebars sticky on desktop (`position: sticky`)
-- [x] Update `app.css` to remove fixed container heights
-- [x] Update `ThreePaneLayout.tsx` to use window scroll
-- [x] Fix reading position tracking to work with document scroll
-- [x] Maintain mobile overlay behavior
-
-### Phase 4: Component Migrations
-- [x] **ReadingProgressIndicator**: Full Tailwind conversion
-  - Removed 80+ lines of CSS
-  - Added shimmer animation to Tailwind config
-  - Z-index layering maintained (1102)
-  
-- [x] **Mobile UI Elements**: Tailwind utilities
-  - Mobile hamburger button
-  - Mobile highlights button  
-  - Mobile backdrop
-  - Removed 60+ lines of CSS
-
-- [x] **App Container**: Tailwind utilities
-  - Responsive padding (p-0 md:p-4)
-  - Min-height viewport support
-
-## 📊 Impact & Metrics
-
-### Lines of CSS Removed
-- `global.css`: ~50 lines removed
-- `reader.css`: ~80 lines removed (progress indicator)
-- `app.css`: ~30 lines removed (mobile buttons/backdrop)
-- `sidebar.css`: ~30 lines removed (mobile hamburger)
-- **Total**: ~190 lines removed
-
-### Key Achievements
-1. **Fixed Core Issue**: Reading position tracking now works correctly with document scroll
-2. **Tailwind Integration**: Fully functional with preflight enabled
-3. **No Breaking Changes**: All existing functionality preserved
-4. **Type Safety**: TypeScript checks passing
-5. **Lint Clean**: ESLint checks passing
-6. **Responsive**: Mobile/tablet/desktop layouts working
-
-## 🔄 Remaining Work (Incremental)
-
-The following migrations are **optional enhancements** that can be done as components are touched:
-
-### High-Value Components
-- [ ] **ContentPanel** - Large component, high impact
-  - Reader header, meta info, loading states
-  - Mark as read button
-  - Article/video menus
-  
-- [ ] **BookmarkList & BookmarkItem** - Core UI
-  - Card layouts (compact/cards/large views)
-  - Bookmark metadata display
-  - Interactive states
-
-- [ ] **HighlightsPanel** - Feature-rich
-  - Header with toggles
-  - Highlight items
-  - Level-based styling
-
-- [ ] **Settings Components** - Forms & controls
-  - Color pickers
-  - Font selectors
-  - Toggle switches
-  - Sliders
-
-### CSS Files to Prune
-- `src/index.css` - Contains many inline bookmark/highlight styles (~3000+ lines)
-- `src/styles/components/cards.css` - Bookmark card styles
-- `src/styles/components/modals.css` - Modal dialogs
-- `src/styles/layout/highlights.css` - Highlight panel layout
-
-## 🎯 Migration Strategy
-
-### For New Components
-Use Tailwind utilities from the start. Reference:
-```tsx
-// Good: Tailwind utilities
-<div className="flex items-center gap-2 p-4 bg-gray-800 rounded-lg">
-  
-// Avoid: New CSS classes
-<div className="custom-component">
-```
-
-### For Existing Components
-Migrate incrementally when touching files:
-1. Replace layout utilities (flex, grid, spacing, sizing)
-2. Replace color/background utilities
-3. Replace typography utilities
-4. Replace responsive variants
-5. Remove old CSS rules
-6. Keep file under 210 lines
-
-### CSS Variable Usage
-Dynamic values should still use CSS variables or inline styles:
-```tsx
-// User-settable colors
-style={{ backgroundColor: settings.highlightColorMine }}
-
-// Or reference CSS variable
-className="bg-[var(--highlight-color-mine)]"
-```
-
-## 📝 Technical Notes
-
-### Z-Index Layering
-- Mobile sidepanes: `z-[1001]`
-- Mobile backdrop: `z-[999]`
-- Progress indicator: `z-[1102]`
-- Mobile buttons: `z-[900]`
-- Relay status: `z-[999]`
-- Modals: `z-[10000]`
-
-### Responsive Breakpoints
-- Mobile: `< 768px`
-- Tablet: `768px - 1024px`
-- Desktop: `> 1024px`
-
-Use Tailwind: `md:` (768px), `lg:` (1024px)
-
-### Safe Area Insets
-Mobile notch support:
-```tsx
-style={{ 
-  top: 'calc(1rem + env(safe-area-inset-top))',
-  left: 'calc(1rem + env(safe-area-inset-left))'
-}}
-```
-
-### Custom Animations
-Add to `tailwind.config.js`:
-```js
-keyframes: {
-  shimmer: {
-    '0%': { transform: 'translateX(-100%)' },
-    '100%': { transform: 'translateX(100%)' },
-  },
-}
-```
-
-## ✅ Success Criteria Met
-
-- [x] Tailwind CSS fully integrated and functional
-- [x] Document scrolling working correctly
-- [x] Reading position tracking accurate
-- [x] Progress indicator always visible
-- [x] No TypeScript errors
-- [x] No linting errors
-- [x] Mobile responsiveness maintained
-- [x] Theme colors (user settings) working
-- [x] All existing features functional
-
-## 🚀 Next Steps
-
-1. **Ship It**: Current state is production-ready
-2. **Incremental Migration**: Convert components as you touch them
-3. **Monitor**: Watch for any CSS conflicts
-4. **Cleanup**: Eventually remove unused CSS files
-5. **Document**: Update component docs with Tailwind patterns
-
----
-
-**Status**: ✅ **CORE MIGRATION COMPLETE**  
-**Date**: 2025-01-14  
-**Commits**: 8 conventional commits  
-**Lines Removed**: ~190 lines of CSS  
-**Breaking Changes**: None
-
diff --git a/src/components/BookmarkItem.tsx b/src/components/BookmarkItem.tsx
index 0f862770..e90baf8a 100644
--- a/src/components/BookmarkItem.tsx
+++ b/src/components/BookmarkItem.tsx
@@ -129,7 +129,7 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     if (!hasUrls) return
     const firstUrl = extractedUrls[0]
     if (onSelectUrl) {
-      onSelectUrl(firstUrl, bookmark)
+      onSelectUrl(firstUrl)
     } else {
       window.open(firstUrl, '_blank')
     }
diff --git a/src/components/BookmarkViews/CardView.tsx b/src/components/BookmarkViews/CardView.tsx
index b2414d0d..23412586 100644
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -145,7 +145,7 @@ export const CardView: React.FC<CardViewProps> = ({
               <button
                 key={urlIndex}
                 className="bookmark-url"
-                onClick={(e) => { e.stopPropagation(); onSelectUrl?.(url, bookmark) }}
+                onClick={(e) => { e.stopPropagation(); onSelectUrl?.(url) }}
                 title="Open in reader"
               >
                 {url}
diff --git a/src/components/BookmarkViews/CompactView.tsx b/src/components/BookmarkViews/CompactView.tsx
index 01402b79..a84e6311 100644
--- a/src/components/BookmarkViews/CompactView.tsx
+++ b/src/components/BookmarkViews/CompactView.tsx
@@ -56,7 +56,7 @@ export const CompactView: React.FC<CompactViewProps> = ({
         navigate(`/a/${naddr}`)
       }
     } else if (hasUrls) {
-      onSelectUrl?.(extractedUrls[0], bookmark)
+      onSelectUrl?.(extractedUrls[0])
     } else if (isNote) {
       navigate(`/e/${bookmark.id}`)
     }
diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx
index 22ad9996..ffe529e9 100644
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -381,12 +381,6 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             const isExternalVideo = !isNostrArticle && !!props.selectedUrl && ['youtube', 'video'].includes(classifyUrl(props.selectedUrl).type)
             
             if (isExternalVideo) {
-              // Check if this is a direct video URL from a Nostr note
-              // For URLs like /r/https%3A%2F%2Fv.nostr.build%2FWFO5YkruM9GFJjeg.mp4
-              const isDirectVideoFromNote = props.selectedUrl?.includes('nostr.build') || 
-                                          props.selectedUrl?.includes('nostr.video') ||
-                                          props.selectedUrl?.includes('v.nostr.build')
-              
               return (
                 <VideoView
                   videoUrl={props.selectedUrl!}
@@ -397,7 +391,6 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
                   settings={props.settings}
                   relayPool={props.relayPool}
                   activeAccount={props.activeAccount}
-                  noteContent={isDirectVideoFromNote ? "This video was shared from a Nostr note. The original note content would be displayed here if available." : undefined}
                   onOpenHighlights={() => {
                     if (props.isHighlightsCollapsed) {
                       props.onToggleHighlightsPanel()

From e2472606dde5c2f5f66a59c0b599c80c26fdf82a Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:56:19 +0200
Subject: [PATCH 15/18] fix: properly filter Nostr article highlights in
 sidebar

- Extract article coordinate from nostr: URLs using nip19.decode
- Filter highlights by eventReference matching the article coordinate
- Fix issue where unrelated highlights were showing in sidebar
- Apply same filtering logic to both useFilteredHighlights and filterHighlightsByUrl
---
 src/hooks/useFilteredHighlights.ts | 26 ++++++++++++++++++++++++--
 src/utils/urlHelpers.ts            | 23 ++++++++++++++++++++---
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/hooks/useFilteredHighlights.ts b/src/hooks/useFilteredHighlights.ts
index c069a691..1f068bc1 100644
--- a/src/hooks/useFilteredHighlights.ts
+++ b/src/hooks/useFilteredHighlights.ts
@@ -3,6 +3,7 @@ import { Highlight } from '../types/highlights'
 import { HighlightVisibility } from '../components/HighlightsPanel'
 import { normalizeUrl } from '../utils/urlHelpers'
 import { classifyHighlights } from '../utils/highlightClassification'
+import { nip19 } from 'nostr-tools'
 
 interface UseFilteredHighlightsParams {
   highlights: Highlight[]
@@ -24,8 +25,29 @@ export const useFilteredHighlights = ({
     
     let urlFiltered = highlights
     
-    // For Nostr articles, we already fetched highlights specifically for this article
-    if (!selectedUrl.startsWith('nostr:')) {
+    // Filter highlights based on URL type
+    if (selectedUrl.startsWith('nostr:')) {
+      // For Nostr articles, extract the article coordinate and filter by eventReference
+      try {
+        const decoded = nip19.decode(selectedUrl.replace('nostr:', ''))
+        if (decoded.type === 'naddr') {
+          const ptr = decoded.data as { kind: number; pubkey: string; identifier: string }
+          const articleCoordinate = `${ptr.kind}:${ptr.pubkey}:${ptr.identifier}`
+          
+          urlFiltered = highlights.filter(h => {
+            // Keep highlights that match this article coordinate
+            return h.eventReference === articleCoordinate
+          })
+        } else {
+          // Not a valid naddr, clear all highlights
+          urlFiltered = []
+        }
+      } catch {
+        // Invalid naddr, clear all highlights
+        urlFiltered = []
+      }
+    } else {
+      // For web URLs, filter by URL matching
       const normalizedSelected = normalizeUrl(selectedUrl)
       
       urlFiltered = highlights.filter(h => {
diff --git a/src/utils/urlHelpers.ts b/src/utils/urlHelpers.ts
index 8dbe8c81..f60789b4 100644
--- a/src/utils/urlHelpers.ts
+++ b/src/utils/urlHelpers.ts
@@ -1,4 +1,5 @@
 import { Highlight } from '../types/highlights'
+import { nip19 } from 'nostr-tools'
 
 export function normalizeUrl(url: string): string {
   try {
@@ -15,10 +16,26 @@ export function filterHighlightsByUrl(highlights: Highlight[], selectedUrl: stri
   }
   
   
-  // For Nostr articles, we already fetched highlights specifically for this article
-  // So we don't need to filter them - they're all relevant
+  // For Nostr articles, filter by article coordinate
   if (selectedUrl.startsWith('nostr:')) {
-    return highlights
+    try {
+      const decoded = nip19.decode(selectedUrl.replace('nostr:', ''))
+      if (decoded.type === 'naddr') {
+        const ptr = decoded.data as { kind: number; pubkey: string; identifier: string }
+        const articleCoordinate = `${ptr.kind}:${ptr.pubkey}:${ptr.identifier}`
+        
+        return highlights.filter(h => {
+          // Keep highlights that match this article coordinate
+          return h.eventReference === articleCoordinate
+        })
+      } else {
+        // Not a valid naddr, return empty array
+        return []
+      }
+    } catch {
+      // Invalid naddr, return empty array
+      return []
+    }
   }
   
   // For web URLs, filter by URL matching

From 0a62924b788258f952ad359e52bc124455a3213c Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:59:26 +0200
Subject: [PATCH 16/18] feat: implement robust highlight loading with fallback
 mechanisms

- Add detailed logging to track highlight loading process
- Implement fallback timeout mechanism to retry highlight loading after 2 seconds
- Add backup effect that triggers when article coordinate changes
- Ensure highlights are loaded reliably after article content is fully loaded
- Add console logging to help debug highlight loading issues
---
 src/components/Bookmarks.tsx  |   5 +-
 src/hooks/useArticleLoader.ts | 118 ++++++++++++++++++++++++++++------
 2 files changed, 102 insertions(+), 21 deletions(-)

diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx
index d5de67a0..cfc7e86e 100644
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -246,7 +246,10 @@ const Bookmarks: React.FC<BookmarksProps> = ({
     setCurrentArticleCoordinate,
     setCurrentArticleEventId,
     setCurrentArticle,
-    settings
+    settings,
+    currentArticleCoordinate,
+    currentArticleEventId,
+    highlightsLoading
   })
   
   // Load external URL if /r/* route is used
diff --git a/src/hooks/useArticleLoader.ts b/src/hooks/useArticleLoader.ts
index 5f785a6c..1d8bb403 100644
--- a/src/hooks/useArticleLoader.ts
+++ b/src/hooks/useArticleLoader.ts
@@ -34,6 +34,9 @@ interface UseArticleLoaderProps {
   setCurrentArticleEventId: (id: string | undefined) => void
   setCurrentArticle?: (article: NostrEvent) => void
   settings?: UserSettings
+  currentArticleCoordinate?: string
+  currentArticleEventId?: string
+  highlightsLoading?: boolean
 }
 
 export function useArticleLoader({
@@ -49,7 +52,10 @@ export function useArticleLoader({
   setCurrentArticleCoordinate,
   setCurrentArticleEventId,
   setCurrentArticle,
-  settings
+  settings,
+  currentArticleCoordinate,
+  currentArticleEventId,
+  highlightsLoading
 }: UseArticleLoaderProps) {
   const location = useLocation()
   const mountedRef = useRef(true)
@@ -230,8 +236,8 @@ export function useArticleLoader({
           setCurrentArticle?.(article.event)
         }
 
-        // Fetch highlights after content is shown
-        try {
+        // Fetch highlights after content is shown - ensure this happens reliably
+        const fetchHighlightsForCurrentArticle = async () => {
           if (!mountedRef.current) return
           
           const le = latestEvent as NostrEvent | null
@@ -240,6 +246,7 @@ export function useArticleLoader({
           const eventId = le ? le.id : undefined
           
           if (coord && eventId) {
+            console.log('Loading highlights for article:', coord, eventId)
             setHighlightsLoading(true)
             // Clear highlights that don't belong to this article coordinate
             setHighlights((prev) => {
@@ -248,28 +255,41 @@ export function useArticleLoader({
                 return h.eventReference === coord || h.eventReference === eventId
               })
             })
-            await fetchHighlightsForArticle(
-              relayPool,
-              coord,
-              eventId,
-              (highlight) => {
-                if (!mountedRef.current) return
-                if (currentRequestIdRef.current !== requestId) return
-                setHighlights((prev: Highlight[]) => {
-                  if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
-                  const next = [highlight, ...prev]
-                  return next.sort((a, b) => b.created_at - a.created_at)
-                })
-              },
-              settingsRef.current,
-              false, // force
-              eventStore || undefined
-            )
+            
+            try {
+              await fetchHighlightsForArticle(
+                relayPool,
+                coord,
+                eventId,
+                (highlight) => {
+                  if (!mountedRef.current) return
+                  if (currentRequestIdRef.current !== requestId) return
+                  console.log('Received highlight:', highlight.id, highlight.content.substring(0, 50))
+                  setHighlights((prev: Highlight[]) => {
+                    if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
+                    const next = [highlight, ...prev]
+                    return next.sort((a, b) => b.created_at - a.created_at)
+                  })
+                },
+                settingsRef.current,
+                false, // force
+                eventStore || undefined
+              )
+              console.log('Finished loading highlights for article:', coord)
+            } catch (err) {
+              console.error('Failed to fetch highlights for article:', coord, err)
+            }
           } else {
+            console.log('No article coordinate or event ID available for highlights')
             // No article event to fetch highlights for - clear and don't show loading
             setHighlights([])
             setHighlightsLoading(false)
           }
+        }
+        
+        // Always try to fetch highlights, even if we don't have the latest event yet
+        try {
+          await fetchHighlightsForCurrentArticle()
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
@@ -277,6 +297,24 @@ export function useArticleLoader({
             setHighlightsLoading(false)
           }
         }
+        
+        // Add a fallback mechanism to ensure highlights are loaded
+        // This helps with cases where the initial highlight loading might fail
+        const fallbackTimeout = setTimeout(async () => {
+          if (mountedRef.current && currentRequestIdRef.current === requestId) {
+            console.log('Fallback: Attempting to load highlights again...')
+            try {
+              await fetchHighlightsForCurrentArticle()
+            } catch (err) {
+              console.error('Fallback highlight loading failed:', err)
+            }
+          }
+        }, 2000) // Retry after 2 seconds
+        
+        // Clean up timeout if component unmounts or new article loads
+        return () => {
+          clearTimeout(fallbackTimeout)
+        }
       } catch (err) {
         console.error('Failed to load article:', err)
         if (mountedRef.current && currentRequestIdRef.current === requestId) {
@@ -310,4 +348,44 @@ export function useArticleLoader({
     setCurrentArticleEventId,
     setCurrentArticle
   ])
+  
+  // Additional effect to ensure highlights are loaded when article coordinate changes
+  // This provides a backup mechanism in case the main loading doesn't work
+  useEffect(() => {
+    if (!relayPool || !eventStore) return
+    
+    const loadHighlightsIfNeeded = async () => {
+      // Only load if we have a coordinate but no highlights are loading
+      if (currentArticleCoordinate && currentArticleEventId && !highlightsLoading) {
+        console.log('Backup: Loading highlights for coordinate:', currentArticleCoordinate)
+        try {
+          setHighlightsLoading(true)
+          await fetchHighlightsForArticle(
+            relayPool,
+            currentArticleCoordinate,
+            currentArticleEventId,
+            (highlight) => {
+              setHighlights((prev: Highlight[]) => {
+                if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
+                const next = [highlight, ...prev]
+                return next.sort((a, b) => b.created_at - a.created_at)
+              })
+            },
+            settingsRef.current,
+            false, // force
+            eventStore
+          )
+        } catch (err) {
+          console.error('Backup highlight loading failed:', err)
+        } finally {
+          setHighlightsLoading(false)
+        }
+      }
+    }
+    
+    // Small delay to ensure the main loading has a chance to work first
+    const timeout = setTimeout(loadHighlightsIfNeeded, 1000)
+    
+    return () => clearTimeout(timeout)
+  }, [currentArticleCoordinate, currentArticleEventId, relayPool, eventStore, highlightsLoading])
 }

From 33d6e5882d01aa97d64c0ede853f1d46afef69e2 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 01:00:36 +0200
Subject: [PATCH 17/18] refactor: simplify highlight loading code

- Remove redundant fallback mechanisms and backup effects
- Remove unnecessary parameters from useArticleLoader interface
- Keep only essential highlight loading logic
- Maintain DRY principle by eliminating duplicate code
- Simplify the codebase while preserving functionality
---
 src/components/Bookmarks.tsx  |   5 +-
 src/hooks/useArticleLoader.ts | 116 ++++++----------------------------
 2 files changed, 21 insertions(+), 100 deletions(-)

diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx
index cfc7e86e..d5de67a0 100644
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -246,10 +246,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
     setCurrentArticleCoordinate,
     setCurrentArticleEventId,
     setCurrentArticle,
-    settings,
-    currentArticleCoordinate,
-    currentArticleEventId,
-    highlightsLoading
+    settings
   })
   
   // Load external URL if /r/* route is used
diff --git a/src/hooks/useArticleLoader.ts b/src/hooks/useArticleLoader.ts
index 1d8bb403..d8207835 100644
--- a/src/hooks/useArticleLoader.ts
+++ b/src/hooks/useArticleLoader.ts
@@ -34,9 +34,6 @@ interface UseArticleLoaderProps {
   setCurrentArticleEventId: (id: string | undefined) => void
   setCurrentArticle?: (article: NostrEvent) => void
   settings?: UserSettings
-  currentArticleCoordinate?: string
-  currentArticleEventId?: string
-  highlightsLoading?: boolean
 }
 
 export function useArticleLoader({
@@ -52,10 +49,7 @@ export function useArticleLoader({
   setCurrentArticleCoordinate,
   setCurrentArticleEventId,
   setCurrentArticle,
-  settings,
-  currentArticleCoordinate,
-  currentArticleEventId,
-  highlightsLoading
+  settings
 }: UseArticleLoaderProps) {
   const location = useLocation()
   const mountedRef = useRef(true)
@@ -236,8 +230,8 @@ export function useArticleLoader({
           setCurrentArticle?.(article.event)
         }
 
-        // Fetch highlights after content is shown - ensure this happens reliably
-        const fetchHighlightsForCurrentArticle = async () => {
+        // Fetch highlights after content is shown
+        try {
           if (!mountedRef.current) return
           
           const le = latestEvent as NostrEvent | null
@@ -246,7 +240,6 @@ export function useArticleLoader({
           const eventId = le ? le.id : undefined
           
           if (coord && eventId) {
-            console.log('Loading highlights for article:', coord, eventId)
             setHighlightsLoading(true)
             // Clear highlights that don't belong to this article coordinate
             setHighlights((prev) => {
@@ -256,40 +249,28 @@ export function useArticleLoader({
               })
             })
             
-            try {
-              await fetchHighlightsForArticle(
-                relayPool,
-                coord,
-                eventId,
-                (highlight) => {
-                  if (!mountedRef.current) return
-                  if (currentRequestIdRef.current !== requestId) return
-                  console.log('Received highlight:', highlight.id, highlight.content.substring(0, 50))
-                  setHighlights((prev: Highlight[]) => {
-                    if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
-                    const next = [highlight, ...prev]
-                    return next.sort((a, b) => b.created_at - a.created_at)
-                  })
-                },
-                settingsRef.current,
-                false, // force
-                eventStore || undefined
-              )
-              console.log('Finished loading highlights for article:', coord)
-            } catch (err) {
-              console.error('Failed to fetch highlights for article:', coord, err)
-            }
+            await fetchHighlightsForArticle(
+              relayPool,
+              coord,
+              eventId,
+              (highlight) => {
+                if (!mountedRef.current) return
+                if (currentRequestIdRef.current !== requestId) return
+                setHighlights((prev: Highlight[]) => {
+                  if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
+                  const next = [highlight, ...prev]
+                  return next.sort((a, b) => b.created_at - a.created_at)
+                })
+              },
+              settingsRef.current,
+              false, // force
+              eventStore || undefined
+            )
           } else {
-            console.log('No article coordinate or event ID available for highlights')
             // No article event to fetch highlights for - clear and don't show loading
             setHighlights([])
             setHighlightsLoading(false)
           }
-        }
-        
-        // Always try to fetch highlights, even if we don't have the latest event yet
-        try {
-          await fetchHighlightsForCurrentArticle()
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
@@ -297,24 +278,6 @@ export function useArticleLoader({
             setHighlightsLoading(false)
           }
         }
-        
-        // Add a fallback mechanism to ensure highlights are loaded
-        // This helps with cases where the initial highlight loading might fail
-        const fallbackTimeout = setTimeout(async () => {
-          if (mountedRef.current && currentRequestIdRef.current === requestId) {
-            console.log('Fallback: Attempting to load highlights again...')
-            try {
-              await fetchHighlightsForCurrentArticle()
-            } catch (err) {
-              console.error('Fallback highlight loading failed:', err)
-            }
-          }
-        }, 2000) // Retry after 2 seconds
-        
-        // Clean up timeout if component unmounts or new article loads
-        return () => {
-          clearTimeout(fallbackTimeout)
-        }
       } catch (err) {
         console.error('Failed to load article:', err)
         if (mountedRef.current && currentRequestIdRef.current === requestId) {
@@ -349,43 +312,4 @@ export function useArticleLoader({
     setCurrentArticle
   ])
   
-  // Additional effect to ensure highlights are loaded when article coordinate changes
-  // This provides a backup mechanism in case the main loading doesn't work
-  useEffect(() => {
-    if (!relayPool || !eventStore) return
-    
-    const loadHighlightsIfNeeded = async () => {
-      // Only load if we have a coordinate but no highlights are loading
-      if (currentArticleCoordinate && currentArticleEventId && !highlightsLoading) {
-        console.log('Backup: Loading highlights for coordinate:', currentArticleCoordinate)
-        try {
-          setHighlightsLoading(true)
-          await fetchHighlightsForArticle(
-            relayPool,
-            currentArticleCoordinate,
-            currentArticleEventId,
-            (highlight) => {
-              setHighlights((prev: Highlight[]) => {
-                if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
-                const next = [highlight, ...prev]
-                return next.sort((a, b) => b.created_at - a.created_at)
-              })
-            },
-            settingsRef.current,
-            false, // force
-            eventStore
-          )
-        } catch (err) {
-          console.error('Backup highlight loading failed:', err)
-        } finally {
-          setHighlightsLoading(false)
-        }
-      }
-    }
-    
-    // Small delay to ensure the main loading has a chance to work first
-    const timeout = setTimeout(loadHighlightsIfNeeded, 1000)
-    
-    return () => clearTimeout(timeout)
-  }, [currentArticleCoordinate, currentArticleEventId, relayPool, eventStore, highlightsLoading])
 }

From 1d989eae762cf9cbeb2590439c64ee5511525d5e Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 01:02:42 +0200
Subject: [PATCH 18/18] fix: improve article loading performance and error
 handling

---
 src/hooks/useArticleLoader.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/hooks/useArticleLoader.ts b/src/hooks/useArticleLoader.ts
index d8207835..5f785a6c 100644
--- a/src/hooks/useArticleLoader.ts
+++ b/src/hooks/useArticleLoader.ts
@@ -248,7 +248,6 @@ export function useArticleLoader({
                 return h.eventReference === coord || h.eventReference === eventId
               })
             })
-            
             await fetchHighlightsForArticle(
               relayPool,
               coord,
@@ -311,5 +310,4 @@ export function useArticleLoader({
     setCurrentArticleEventId,
     setCurrentArticle
   ])
-  
 }