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.
This commit is contained in:
Gigi
2025-10-05 01:56:26 +01:00
parent b326a9d5b3
commit 9f251d43ad
2 changed files with 9 additions and 2 deletions

View File

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