From 4aa496ec3f85456285d420e9dcf32dd45718b1d0 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 4 Oct 2025 19:59:03 +0100
Subject: [PATCH] fix: improve highlights panel collapse behavior

- Flip chevron icon direction (left when collapsed, right when expanded)
- Match bookmarks sidebar styling for collapsed state
- Remove background/border when collapsed for cleaner look
- Ensure toggle button stays at top of panel
- Add proper hover states for collapsed button

The highlights panel now behaves consistently with the bookmarks sidebar,
with the chevron pointing in the correct direction and proper visual feedback.
---
 src/components/HighlightsPanel.tsx |  6 +++---
 src/index.css                      | 26 ++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/HighlightsPanel.tsx b/src/components/HighlightsPanel.tsx
index ffdd3c16..0a857e8d 100644
--- a/src/components/HighlightsPanel.tsx
+++ b/src/components/HighlightsPanel.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faHighlighter } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faChevronLeft, faHighlighter } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { HighlightItem } from './HighlightItem'
 
@@ -28,7 +28,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
           title="Expand highlights panel"
           aria-label="Expand highlights panel"
         >
-          <FontAwesomeIcon icon={faChevronRight} />
+          <FontAwesomeIcon icon={faChevronLeft} />
         </button>
       </div>
     )
@@ -48,7 +48,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
           title="Collapse highlights panel"
           aria-label="Collapse highlights panel"
         >
-          <FontAwesomeIcon icon={faChevronRight} />
+          <FontAwesomeIcon icon={faChevronRight} rotation={180} />
         </button>
       </div>
 
diff --git a/src/index.css b/src/index.css
index 8a372c5a..a8c59beb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1081,6 +1081,32 @@ body {
   align-items: flex-start;
   justify-content: center;
   padding-top: 1rem;
+  background: transparent;
+  border: none;
+}
+
+.highlights-container.collapsed .toggle-highlights-btn {
+  background: #2a2a2a;
+  color: #ddd;
+  border: 1px solid #444;
+  padding: 0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+}
+
+.highlights-container.collapsed .toggle-highlights-btn:hover {
+  background: #333;
+  color: #fff;
+}
+
+.highlights-container.collapsed .toggle-highlights-btn:active {
+  transform: translateY(1px);
 }
 
 .highlights-header {