From 2a42f1de53e70a6e6a8808aba23cd89a2e9a2fdb Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Fri, 31 Oct 2025 01:41:36 +0100
Subject: [PATCH] feat: add refresh button to highlights sidebar header

Add a refresh button to the highlights panel header, positioned to the
left of the eye icon. The button refreshes highlights for the current
article and shows a spinning animation while loading.
---
 src/components/HighlightsPanel.tsx              |  2 ++
 .../HighlightsPanel/HighlightsPanelHeader.tsx   | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/HighlightsPanel.tsx b/src/components/HighlightsPanel.tsx
index 712d86d2..7472a58c 100644
--- a/src/components/HighlightsPanel.tsx
+++ b/src/components/HighlightsPanel.tsx
@@ -125,6 +125,8 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
         onToggleHighlights={handleToggleHighlights}
         onToggleCollapse={onToggleCollapse}
         onHighlightVisibilityChange={onHighlightVisibilityChange}
+        onRefresh={onRefresh}
+        isLoading={loading}
         isMobile={isMobile}
       />
 
diff --git a/src/components/HighlightsPanel/HighlightsPanelHeader.tsx b/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
index bf7e2b03..543b773c 100644
--- a/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
+++ b/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faEye, faEyeSlash, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faEye, faEyeSlash, faUser, faUserGroup, faNetworkWired, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
 import { HighlightVisibility } from '../HighlightsPanel'
 import IconButton from '../IconButton'
 
@@ -12,6 +12,8 @@ interface HighlightsPanelHeaderProps {
   onToggleHighlights: () => void
   onToggleCollapse: () => void
   onHighlightVisibilityChange?: (visibility: HighlightVisibility) => void
+  onRefresh?: () => void
+  isLoading?: boolean
   isMobile?: boolean
 }
 
@@ -23,6 +25,8 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
   onToggleHighlights,
   onToggleCollapse,
   onHighlightVisibilityChange,
+  onRefresh,
+  isLoading = false,
   isMobile = false
 }) => {
   return (
@@ -91,6 +95,17 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
           )}
         </div>
         <div className="highlights-actions-right">
+          {onRefresh && (
+            <IconButton
+              icon={faArrowsRotate}
+              onClick={onRefresh}
+              title="Refresh highlights"
+              ariaLabel="Refresh highlights"
+              variant="ghost"
+              disabled={isLoading}
+              spin={isLoading}
+            />
+          )}
           {hasHighlights && (
             <IconButton
               icon={showHighlights ? faEye : faEyeSlash}