diff --git a/src/components/BookmarkList.tsx b/src/components/BookmarkList.tsx index 4026b085..be35050a 100644 --- a/src/components/BookmarkList.tsx +++ b/src/components/BookmarkList.tsx @@ -247,10 +247,19 @@ export const BookmarkList: React.FC = ({ /> {allIndividualBookmarks.length > 0 && ( - +
+ + setShowAddModal(true)} + title="Add web bookmark" + ariaLabel="Add web bookmark" + className="bookmark-section-action" + /> +
)} {!activeAccount ? ( @@ -287,15 +296,6 @@ export const BookmarkList: React.FC = ({

{section.title}

- {section.key === 'web' && activeAccount && ( - setShowAddModal(true)} - title="Add web bookmark" - ariaLabel="Add web bookmark" - className="bookmark-section-action" - /> - )}
{section.items.map((individualBookmark, index) => ( diff --git a/src/styles/layout/sidebar.css b/src/styles/layout/sidebar.css index c5da9b7a..6a33e713 100644 --- a/src/styles/layout/sidebar.css +++ b/src/styles/layout/sidebar.css @@ -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;