feat: make bookmark icon glow blue when article is bookmarked

- Bookmark icon glows blue when selectedUrl matches a bookmark
- Use app's primary blue color (#646cff) for consistency
- Check bookmark URLs with flexible matching (exact, includes)
- Pass selectedUrl to BookmarkList component
- Add glow-blue CSS class with drop-shadow effect

The bookmark icon now glows blue when viewing a bookmarked
article, providing visual feedback that it's in your collection.
This commit is contained in:
Gigi
2025-10-05 02:00:53 +01:00
parent a62e493590
commit 6ae101c9c6
3 changed files with 17 additions and 3 deletions

View File

@@ -15,6 +15,7 @@ interface BookmarkListProps {
onLogout: () => void
viewMode: ViewMode
onViewModeChange: (mode: ViewMode) => void
selectedUrl?: string
}
export const BookmarkList: React.FC<BookmarkListProps> = ({
@@ -24,19 +25,26 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
onToggleCollapse,
onLogout,
viewMode,
onViewModeChange
onViewModeChange,
selectedUrl
}) => {
if (isCollapsed) {
// Check if the selected URL is in bookmarks
const isBookmarked = selectedUrl && bookmarks.some(bookmark => {
const bookmarkUrl = bookmark.url
return bookmarkUrl === selectedUrl || selectedUrl.includes(bookmarkUrl) || bookmarkUrl.includes(selectedUrl)
})
return (
<div className="bookmarks-container collapsed">
<button
onClick={onToggleCollapse}
className="toggle-sidebar-btn with-icon"
className={`toggle-sidebar-btn with-icon ${isBookmarked ? 'is-bookmarked' : ''}`}
title="Expand bookmarks sidebar"
aria-label="Expand bookmarks sidebar"
>
<FontAwesomeIcon icon={faChevronLeft} />
<FontAwesomeIcon icon={faBookmark} />
<FontAwesomeIcon icon={faBookmark} className={isBookmarked ? 'glow-blue' : ''} />
</button>
</div>
)

View File

@@ -115,6 +115,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
onLogout={onLogout}
viewMode={viewMode}
onViewModeChange={setViewMode}
selectedUrl={selectedUrl}
/>
</div>
<div className="pane main">

View File

@@ -212,6 +212,11 @@ body {
gap: 0.5rem;
}
.bookmarks-container.collapsed .toggle-sidebar-btn .glow-blue {
color: #646cff;
filter: drop-shadow(0 0 4px rgba(100, 108, 255, 0.6));
}
.user-info {
margin: 0.5rem 0 0 0;
color: #888;