From 80ed646dd4bfc8987b3c1af9e58eb374e2766d2e Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 2 Nov 2025 18:47:10 +0100
Subject: [PATCH 1/2] feat: move add bookmark button to filter bar

- Move add bookmark button from web section header to filter bar
- Position button on the right side of filter bar
- Remove conditional rendering (always show button)
- Add bookmark-filters-wrapper styling for proper layout
---
 src/components/BookmarkList.tsx | 26 +++++++++++++-------------
 src/styles/layout/sidebar.css   | 15 +++++++++++++++
 2 files changed, 28 insertions(+), 13 deletions(-)

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<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) => (
diff --git a/src/styles/layout/sidebar.css b/src/styles/layout/sidebar.css
index c5da9b7a..5e1579a9 100644
--- a/src/styles/layout/sidebar.css
+++ b/src/styles/layout/sidebar.css
@@ -267,6 +267,21 @@
 .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 {
   display: flex;
   gap: 0.5rem;

From 98c006939b6c30c31e6721b61c287f97b8a71a6d Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 2 Nov 2025 18:49:44 +0100
Subject: [PATCH 2/2] fix: align add bookmark button with filter buttons

- Match CompactButton styling to filter-btn when inside filter bar
- Ensure same size, padding, and alignment for consistent appearance
---
 src/styles/layout/sidebar.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/styles/layout/sidebar.css b/src/styles/layout/sidebar.css
index 5e1579a9..6a33e713 100644
--- a/src/styles/layout/sidebar.css
+++ b/src/styles/layout/sidebar.css
@@ -282,6 +282,27 @@
   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;