aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-02-02 13:44:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #33 from dergigi/big-plus-button

Browse Source 
Move add bookmark button to filter bar
This commit is contained in:
Gigi
2025-11-02 19:09:55 +01:00
committed by GitHub
parent 7ea868d0b2 98c006939b
commit 76fefc88ca
2 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/BookmarkList.tsx
View File

@@ -247,10 +247,19 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
/>
{allIndividualBookmarks.length > 0 && (
<BookmarkFilters
selectedFilter={selectedFilter}
onFilterChange={setSelectedFilter}
/>
<div className="bookmark-filters-wrapper">
<BookmarkFilters
selectedFilter={selectedFilter}
onFilterChange={setSelectedFilter}
/>
<CompactButton
icon={faPlus}
onClick={() => setShowAddModal(true)}
title="Add web bookmark"
ariaLabel="Add web bookmark"
className="bookmark-section-action"
/>
</div>
)}
{!activeAccount ? (
@@ -287,15 +296,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
<div key={section.key} className="bookmarks-section">
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<h3 className="bookmarks-section-title" style={{ margin: 0, padding: '1.5rem 0.5rem 0.375rem', flex: 1 }}>{section.title}</h3>
{section.key === 'web' && activeAccount && (
<CompactButton
icon={faPlus}
onClick={() => setShowAddModal(true)}
title="Add web bookmark"
ariaLabel="Add web bookmark"
className="bookmark-section-action"
/>
)}
</div>
<div className={`bookmarks-grid bookmarks-${viewMode}`}>
{section.items.map((individualBookmark, index) => (

36
src/styles/layout/sidebar.css
View File

@@ -267,6 +267,42 @@
.read-inline-btn:hover { background: rgb(22 163 74); /* green-600 */ }
/* Bookmark filters */
.bookmark-filters-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg);
}
.bookmark-filters-wrapper > .bookmark-filters {
padding: 0;
border-bottom: none;
background: transparent;
}
.bookmark-filters-wrapper > .compact-button {
background: transparent;
color: var(--color-text-secondary);
border: none;
padding: 0.375rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
min-width: 32px;
min-height: 32px;
}
.bookmark-filters-wrapper > .compact-button:hover {
color: var(--color-text);
background: var(--color-bg-elevated);
}
.bookmark-filters {
display: flex;
gap: 0.5rem;