From d9b50f80d0fe8e51784eca9aabb346da34708063 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 02:03:28 +0100
Subject: [PATCH] feat: scroll to highlight in article when clicking highlight
 item
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add onHighlightClick callback to HighlightItem
- Make entire highlight item clickable with pointer cursor
- Reuse existing setSelectedHighlightId to trigger scroll
- Clicking a highlight in sidebar scrolls to it in article view
- Works with existing click-to-scroll from article to sidebar

Users can now click highlights in either direction:
- Click highlight in article → scrolls to item in sidebar
- Click highlight in sidebar → scrolls to text in article
---
 src/components/Bookmarks.tsx       |  1 +
 src/components/HighlightItem.tsx   | 18 ++++++++++++++++--
 src/components/HighlightsPanel.tsx |  5 ++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx
index 3587a4f7..afe65b9a 100644
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -141,6 +141,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
           onToggleUnderlines={setShowUnderlines}
           selectedHighlightId={selectedHighlightId}
           onRefresh={handleFetchHighlights}
+          onHighlightClick={setSelectedHighlightId}
         />
       </div>
     </div>
diff --git a/src/components/HighlightItem.tsx b/src/components/HighlightItem.tsx
index 5fe3bee9..8feaeee2 100644
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -8,9 +8,10 @@ interface HighlightItemProps {
   highlight: Highlight
   onSelectUrl?: (url: string) => void
   isSelected?: boolean
+  onHighlightClick?: (highlightId: string) => void
 }
 
-export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelectUrl, isSelected }) => {
+export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelectUrl, isSelected, onHighlightClick }) => {
   const itemRef = useRef<HTMLDivElement>(null)
   
   useEffect(() => {
@@ -18,6 +19,13 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
       itemRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' })
     }
   }, [isSelected])
+  
+  const handleItemClick = () => {
+    if (onHighlightClick) {
+      onHighlightClick(highlight.id)
+    }
+  }
+  
   const handleLinkClick = (url: string, e: React.MouseEvent) => {
     if (onSelectUrl) {
       e.preventDefault()
@@ -35,7 +43,13 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
   const sourceLink = getSourceLink()
   
   return (
-    <div ref={itemRef} className={`highlight-item ${isSelected ? 'selected' : ''}`} data-highlight-id={highlight.id}>
+    <div 
+      ref={itemRef} 
+      className={`highlight-item ${isSelected ? 'selected' : ''}`} 
+      data-highlight-id={highlight.id}
+      onClick={handleItemClick}
+      style={{ cursor: onHighlightClick ? 'pointer' : 'default' }}
+    >
       <div className="highlight-quote-icon">
         <FontAwesomeIcon icon={faQuoteLeft} />
       </div>
diff --git a/src/components/HighlightsPanel.tsx b/src/components/HighlightsPanel.tsx
index fb937877..06255c22 100644
--- a/src/components/HighlightsPanel.tsx
+++ b/src/components/HighlightsPanel.tsx
@@ -14,6 +14,7 @@ interface HighlightsPanelProps {
   onToggleUnderlines?: (show: boolean) => void
   selectedHighlightId?: string
   onRefresh?: () => void
+  onHighlightClick?: (highlightId: string) => void
 }
 
 export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
@@ -25,7 +26,8 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   selectedUrl,
   onToggleUnderlines,
   selectedHighlightId,
-  onRefresh
+  onRefresh,
+  onHighlightClick
 }) => {
   const [showUnderlines, setShowUnderlines] = useState(true)
   
@@ -140,6 +142,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
               highlight={highlight}
               onSelectUrl={onSelectUrl}
               isSelected={highlight.id === selectedHighlightId}
+              onHighlightClick={onHighlightClick}
             />
           ))}
         </div>