mirror of
https://github.com/dergigi/boris.git
synced 2026-02-09 00:54:29 +01:00
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:
@@ -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>
|
||||
)
|
||||
|
||||
@@ -115,6 +115,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
|
||||
onLogout={onLogout}
|
||||
viewMode={viewMode}
|
||||
onViewModeChange={setViewMode}
|
||||
selectedUrl={selectedUrl}
|
||||
/>
|
||||
</div>
|
||||
<div className="pane main">
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user