From a8e48ba2808d71c8a86fcf588bfe9591c1257544 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 22:49:07 +0100
Subject: [PATCH] feat: sync highlight level toggles between sidebar and main
 article text

---
 src/components/Bookmarks.tsx    |  3 +++
 src/components/ContentPanel.tsx | 33 +++++++++++++++++++++++++++++++--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx
index 72113fc1..76275bb1 100644
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -237,6 +237,9 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
               if (isHighlightsCollapsed) setIsHighlightsCollapsed(false)
             }}
             selectedHighlightId={selectedHighlightId}
+            highlightVisibility={highlightVisibility}
+            currentUserPubkey={activeAccount?.pubkey}
+            followedPubkeys={followedPubkeys}
           />
         )}
       </div>
diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index 7a82d7cc..ac0a2062 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -9,6 +9,7 @@ import { readingTime } from 'reading-time-estimator'
 import { filterHighlightsByUrl } from '../utils/urlHelpers'
 import { hexToRgb } from '../utils/colorHelpers'
 import ReaderHeader from './ReaderHeader'
+import { HighlightVisibility } from './HighlightsPanel'
 
 interface ContentPanelProps {
   loading: boolean
@@ -23,6 +24,9 @@ interface ContentPanelProps {
   highlightColor?: string
   onHighlightClick?: (highlightId: string) => void
   selectedHighlightId?: string
+  highlightVisibility?: HighlightVisibility
+  currentUserPubkey?: string
+  followedPubkeys?: Set<string>
 }
 
 const ContentPanel: React.FC<ContentPanelProps> = ({ 
@@ -37,13 +41,38 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   highlightStyle = 'marker',
   highlightColor = '#ffff00',
   onHighlightClick,
-  selectedHighlightId
+  selectedHighlightId,
+  highlightVisibility = { nostrverse: true, friends: true, mine: true },
+  currentUserPubkey,
+  followedPubkeys = new Set()
 }) => {
   const contentRef = useRef<HTMLDivElement>(null)
   const markdownPreviewRef = useRef<HTMLDivElement>(null)
   const [renderedHtml, setRenderedHtml] = useState<string>('')
   
-  const relevantHighlights = useMemo(() => filterHighlightsByUrl(highlights, selectedUrl), [selectedUrl, highlights])
+  // Filter highlights by URL and visibility settings
+  const relevantHighlights = useMemo(() => {
+    const urlFiltered = filterHighlightsByUrl(highlights, selectedUrl)
+    
+    // Apply visibility filtering
+    return urlFiltered
+      .map(h => {
+        // Classify highlight level
+        let level: 'mine' | 'friends' | 'nostrverse' = 'nostrverse'
+        if (h.pubkey === currentUserPubkey) {
+          level = 'mine'
+        } else if (followedPubkeys.has(h.pubkey)) {
+          level = 'friends'
+        }
+        return { ...h, level }
+      })
+      .filter(h => {
+        // Filter by visibility settings
+        if (h.level === 'mine') return highlightVisibility.mine
+        if (h.level === 'friends') return highlightVisibility.friends
+        return highlightVisibility.nostrverse
+      })
+  }, [selectedUrl, highlights, highlightVisibility, currentUserPubkey, followedPubkeys])
 
   // Convert markdown to HTML when markdown content changes
   useEffect(() => {