feat: make highlight count clickable to open highlights sidebar

src/components/ContentPanel.tsx

@@ -76,6 +76,7 @@ interface ContentPanelProps {
   // For reading progress indicator positioning
   isSidebarCollapsed?: boolean
   isHighlightsCollapsed?: boolean
+  onOpenHighlights?: () => void
 }
 
 const ContentPanel: React.FC<ContentPanelProps> = ({ 
@@ -103,7 +104,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   onTextSelection,
   onClearSelection,
   isSidebarCollapsed = false,
-  isHighlightsCollapsed = false
+  isHighlightsCollapsed = false,
+  onOpenHighlights
 }) => {
   const [isMarkedAsRead, setIsMarkedAsRead] = useState(false)
   const [isCheckingReadStatus, setIsCheckingReadStatus] = useState(false)
@@ -778,6 +780,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         settings={settings}
         highlights={relevantHighlights}
         highlightVisibility={highlightVisibility}
+        onHighlightCountClick={onOpenHighlights}
       />
       {isTextContent && articleText && (
         <div style={{ padding: '0 0.75rem 0.5rem 0.75rem' }}>

src/components/ReaderHeader.tsx

@@ -20,6 +20,7 @@ interface ReaderHeaderProps {
   settings?: UserSettings
   highlights?: Highlight[]
   highlightVisibility?: HighlightVisibility
+  onHighlightCountClick?: () => void
 }
 
 const ReaderHeader: React.FC<ReaderHeaderProps> = ({
@@ -32,7 +33,8 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   highlightCount,
   settings,
   highlights = [],
-  highlightVisibility = { nostrverse: true, friends: true, mine: true }
+  highlightVisibility = { nostrverse: true, friends: true, mine: true },
+  onHighlightCountClick
 }) => {
   const cachedImage = useImageCache(image)
   const { textColor } = useAdaptiveTextColor(cachedImage)
@@ -107,8 +109,10 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
                 )}
                 {hasHighlights && (
                   <div 
-                    className="highlight-indicator"
+                    className="highlight-indicator clickable"
                     style={getHighlightIndicatorStyles(true)}
+                    onClick={onHighlightCountClick}
+                    title="Open highlights sidebar"
                   >
                     <FontAwesomeIcon icon={faHighlighter} />
                     <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
@@ -152,8 +156,10 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
             )}
             {hasHighlights && (
               <div 
-                className="highlight-indicator"
+                className="highlight-indicator clickable"
                 style={getHighlightIndicatorStyles(false)}
+                onClick={onHighlightCountClick}
+                title="Open highlights sidebar"
               >
                 <FontAwesomeIcon icon={faHighlighter} />
                 <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>

src/components/ThreePaneLayout.tsx

@@ -387,6 +387,11 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               currentArticle={props.currentArticle}
               isSidebarCollapsed={props.isCollapsed}
               isHighlightsCollapsed={props.isHighlightsCollapsed}
+              onOpenHighlights={() => {
+                if (props.isHighlightsCollapsed) {
+                  props.onToggleHighlightsPanel()
+                }
+              }}
             />
           )}
         </div>

src/styles/components/reader.css

@@ -35,6 +35,8 @@
 .reading-time svg { font-size: 0.875rem; }
 .highlight-indicator { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 6px; font-size: 0.875rem; color: var(--color-text); }
 .highlight-indicator svg { font-size: 0.875rem; }
+.highlight-indicator.clickable { cursor: pointer; transition: all 0.2s ease; }
+.highlight-indicator.clickable:hover { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.5); transform: translateY(-1px); }
 .reader-html { color: var(--color-text); line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; font-family: var(--reading-font); font-size: var(--reading-font-size); }
 .reader-markdown { color: var(--color-text); line-height: 1.7; font-family: var(--reading-font); font-size: var(--reading-font-size); }
 /* Ensure font inheritance */