From 9f251d43ad83db55cd8d4dbcf853f069559fac86 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 01:56:26 +0100
Subject: [PATCH] feat: add bookmark icon to collapsed bookmarks panel button

- Show both chevron and bookmark icons when collapsed
- Button width adjusts to fit both icons
- Add gap between icons for proper spacing
- Mirrors the highlights panel behavior
- Makes it clear what the panel contains when collapsed

Both sidebars now show their respective icons (bookmark/highlighter)
when collapsed for better visual consistency and clarity.
---
 src/components/BookmarkList.tsx | 5 +++--
 src/index.css                   | 6 ++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/BookmarkList.tsx b/src/components/BookmarkList.tsx
index c5d72579..d23a2fe4 100644
--- a/src/components/BookmarkList.tsx
+++ b/src/components/BookmarkList.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faBookmark } from '@fortawesome/free-solid-svg-icons'
 import { Bookmark } from '../types/bookmarks'
 import { BookmarkItem } from './BookmarkItem'
 import { formatDate, renderParsedContent } from '../utils/bookmarkUtils'
@@ -31,11 +31,12 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
       <div className="bookmarks-container collapsed">
         <button 
           onClick={onToggleCollapse}
-          className="toggle-sidebar-btn"
+          className="toggle-sidebar-btn with-icon"
           title="Expand bookmarks sidebar"
           aria-label="Expand bookmarks sidebar"
         >
           <FontAwesomeIcon icon={faChevronLeft} />
+          <FontAwesomeIcon icon={faBookmark} />
         </button>
       </div>
     )
diff --git a/src/index.css b/src/index.css
index 8c88668d..8e6434b1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -206,6 +206,12 @@ body {
   transform: translateY(1px);
 }
 
+.bookmarks-container.collapsed .toggle-sidebar-btn.with-icon {
+  width: auto;
+  padding: 0 0.5rem;
+  gap: 0.5rem;
+}
+
 .user-info {
   margin: 0.5rem 0 0 0;
   color: #888;