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).

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>
   )

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; }