From 967aac49efedbd9f06492a4874971ae94a91057d Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 02:07:05 +0100
Subject: [PATCH] fix: scroll to highlight in article when clicking sidebar
 item

- Add selectedHighlightId prop to ContentPanel
- Add useEffect to watch for selectedHighlightId changes
- Find and scroll to the corresponding mark element
- Temporarily brighten the highlight for visual feedback
- Pass selectedHighlightId from Bookmarks to ContentPanel

Now clicking a highlight in the sidebar properly scrolls
to and highlights the text in the article view.
---
 src/components/Bookmarks.tsx    |  1 +
 src/components/ContentPanel.tsx | 29 ++++++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx
index afe65b9a..3cb8f531 100644
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -128,6 +128,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
           highlights={highlights}
           showUnderlines={showUnderlines}
           onHighlightClick={setSelectedHighlightId}
+          selectedHighlightId={selectedHighlightId}
         />
       </div>
       <div className="pane highlights">
diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index 93fca576..76f80d76 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -15,6 +15,7 @@ interface ContentPanelProps {
   highlights?: Highlight[]
   showUnderlines?: boolean
   onHighlightClick?: (highlightId: string) => void
+  selectedHighlightId?: string
 }
 
 const ContentPanel: React.FC<ContentPanelProps> = ({ 
@@ -25,10 +26,36 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   selectedUrl,
   highlights = [],
   showUnderlines = true,
-  onHighlightClick
+  onHighlightClick,
+  selectedHighlightId
 }) => {
   const contentRef = useRef<HTMLDivElement>(null)
   
+  // Scroll to selected highlight in article when clicked from sidebar
+  useEffect(() => {
+    if (!selectedHighlightId || !contentRef.current) {
+      return
+    }
+    
+    // Find the mark element with the matching highlight ID
+    const markElement = contentRef.current.querySelector(`mark.content-highlight[data-highlight-id="${selectedHighlightId}"]`)
+    
+    if (markElement) {
+      console.log('📍 Scrolling to highlight in article:', selectedHighlightId.slice(0, 8))
+      markElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      
+      // Temporarily enhance the highlight to show it's selected
+      const originalBackground = (markElement as HTMLElement).style.background
+      ;(markElement as HTMLElement).style.background = 'rgba(255, 255, 0, 0.7)'
+      
+      setTimeout(() => {
+        (markElement as HTMLElement).style.background = originalBackground
+      }, 1500)
+    } else {
+      console.log('⚠️ Could not find mark element for highlight:', selectedHighlightId.slice(0, 8))
+    }
+  }, [selectedHighlightId])
+  
   // Filter highlights relevant to the current URL
   const relevantHighlights = useMemo(() => {
     if (!selectedUrl || highlights.length === 0) {