From 55d1af3bf99e409b0a3b709379a73ca342e2e966 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 23 Oct 2025 16:54:08 +0200
Subject: [PATCH] refactor: move collapse highlights button to left side

Move the collapse highlights panel button from right to left side of the header, making it symmetrical to the bookmarks collapse button. Desktop only (hidden on mobile).
---
 .../HighlightsPanel/HighlightsPanelHeader.tsx | 22 ++++++++++---------
 src/styles/layout/highlights.css              |  1 +
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/HighlightsPanel/HighlightsPanelHeader.tsx b/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
index 11b6c575..c5750467 100644
--- a/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
+++ b/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
@@ -32,6 +32,16 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
     <div className="highlights-header">
       <div className="highlights-actions">
         <div className="highlights-actions-left">
+          {!isMobile && (
+            <IconButton
+              icon={faChevronRight}
+              onClick={onToggleCollapse}
+              title="Collapse highlights panel"
+              ariaLabel="Collapse highlights panel"
+              variant="ghost"
+              style={{ transform: 'rotate(180deg)' }}
+            />
+          )}
           {onHighlightVisibilityChange && (
             <div className="highlight-level-toggles">
               <IconButton
@@ -82,6 +92,8 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
               )}
             </div>
           )}
+        </div>
+        <div className="highlights-actions-right">
           {onRefresh && (
             <IconButton
               icon={faRotate}
@@ -103,16 +115,6 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
             />
           )}
         </div>
-        {!isMobile && (
-          <IconButton
-            icon={faChevronRight}
-            onClick={onToggleCollapse}
-            title="Collapse highlights panel"
-            ariaLabel="Collapse highlights panel"
-            variant="ghost"
-            style={{ transform: 'rotate(180deg)' }}
-          />
-        )}
       </div>
     </div>
   )
diff --git a/src/styles/layout/highlights.css b/src/styles/layout/highlights.css
index 620473ee..e4fcbe58 100644
--- a/src/styles/layout/highlights.css
+++ b/src/styles/layout/highlights.css
@@ -62,6 +62,7 @@
 
 .highlights-actions { display: flex; align-items: center; justify-content: space-between; width: 100%; }
 .highlights-actions-left { display: flex; align-items: center; gap: 0.5rem; }
+.highlights-actions-right { display: flex; align-items: center; gap: 0.5rem; }
 
 .highlights-title { display: flex; align-items: center; gap: 0.5rem; }
 .highlights-title h3 { margin: 0; font-size: 1rem; font-weight: 600; }