From a52b13eb2865f9a3ca00ea983a829b28e2e57e6f Mon Sep 17 00:00:00 2001
From: Yusuf Suleman <yusuf@quadjourney.com>
Date: Wed, 1 Apr 2026 22:05:01 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20brain=20sidebar=20=E2=80=94=20settings?=
 =?UTF-8?q?=20icon=20at=20top,=20tags=20show=20counts,=20hide=20empty=20ta?=
 =?UTF-8?q?gs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Settings gear icon in sidebar header (replaces bottom manage button)
- Click gear → manage mode (shows as checkmark when active)
- Tags only show ones with items (counts visible)
- Manage mode shows ALL tags with delete buttons
- Add input inline under each section in manage mode
- Fixed button-inside-button error (use span for delete)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../lib/pages/brain/AtelierBrainPage.svelte   | 84 +++++++++----------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte b/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
index 366d362..0a2170e 100644
--- a/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
+++ b/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
@@ -331,6 +331,13 @@
         <div class="sidebar-header">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
           <span class="sidebar-title">Brain</span>
+          <button class="sidebar-settings" onclick={() => showManage = !showManage} title={showManage ? 'Done editing' : 'Manage'}>
+            {#if showManage}
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M20 6L9 17l-5-5"/></svg>
+            {:else}
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+            {/if}
+          </button>
         </div>
 
         <nav class="sidebar-nav">
@@ -340,17 +347,15 @@
           </button>
         </nav>
 
+        <!-- Folders -->
         <div class="sidebar-separator"></div>
         <div class="sidebar-section-head">
           <div class="sidebar-section-label">Folders</div>
-          {#if showManage}
-            <button class="sidebar-section-add" onclick={() => { newTaxName = ''; sidebarView = 'folders'; }}>+</button>
-          {/if}
         </div>
-        {#if showManage && sidebarView === 'folders'}
+        {#if showManage}
           <div class="sidebar-add-row">
-            <input class="sidebar-add-input" placeholder="New folder..." bind:value={newTaxName} onkeydown={(e) => { if (e.key === 'Enter') addTaxonomy(); }} />
-            <button class="sidebar-add-go" onclick={addTaxonomy}>Add</button>
+            <input class="sidebar-add-input" placeholder="New folder..." bind:value={newTaxName} onkeydown={(e) => { if (e.key === 'Enter') { sidebarView = 'folders'; addTaxonomy(); } }} />
+            <button class="sidebar-add-go" onclick={() => { sidebarView = 'folders'; addTaxonomy(); }}>+</button>
           </div>
         {/if}
         <nav class="sidebar-nav">
@@ -358,7 +363,7 @@
             <button class="nav-item" class:active={activeFolder === folder.name} onclick={() => { activeFolder = folder.name; activeFolderId = folder.id; activeTag = null; activeTagId = null; loadItems(); }}>
               <span class="nav-label">{folder.name}</span>
               {#if showManage}
-                <button class="nav-delete" onclick={(e) => { e.stopPropagation(); if (confirm(`Delete "${folder.name}"? Items will be moved.`)) deleteTaxonomy(folder.id); }}>×</button>
+                <!-- svelte-ignore a11y_no_static_element_interactions --><span class="nav-delete" onclick={(e) => { e.stopPropagation(); if (confirm(`Delete "${folder.name}"? Items will be moved.`)) deleteTaxonomy(folder.id); }}>×</span>
               {:else if folder.item_count > 0}
                 <span class="nav-count">{folder.item_count}</span>
               {/if}
@@ -366,38 +371,34 @@
           {/each}
         </nav>
 
+        <!-- Tags -->
         <div class="sidebar-separator"></div>
         <div class="sidebar-section-head">
           <div class="sidebar-section-label">Tags</div>
-          {#if showManage}
-            <button class="sidebar-section-add" onclick={() => { newTaxName = ''; sidebarView = 'tags'; }}>+</button>
-          {/if}
         </div>
-        {#if showManage && sidebarView === 'tags'}
+        {#if showManage}
           <div class="sidebar-add-row">
-            <input class="sidebar-add-input" placeholder="New tag..." bind:value={newTaxName} onkeydown={(e) => { if (e.key === 'Enter') addTaxonomy(); }} />
-            <button class="sidebar-add-go" onclick={addTaxonomy}>Add</button>
+            <input class="sidebar-add-input" placeholder="New tag..." bind:value={newTaxName} onkeydown={(e) => { if (e.key === 'Enter') { sidebarView = 'tags'; addTaxonomy(); } }} />
+            <button class="sidebar-add-go" onclick={() => { sidebarView = 'tags'; addTaxonomy(); }}>+</button>
           </div>
-        {/if}
-        <nav class="sidebar-nav">
-          {#each sidebarTags.filter(t => t.is_active) as tag}
-            <button class="nav-item" class:active={activeTag === tag.name} onclick={() => { activeTag = tag.name; activeTagId = tag.id; activeFolder = null; activeFolderId = null; loadItems(); }}>
-              <span class="nav-label">{tag.name}</span>
-              {#if showManage}
-                <button class="nav-delete" onclick={(e) => { e.stopPropagation(); if (confirm(`Delete tag "${tag.name}"?`)) deleteTaxonomy(tag.id); }}>×</button>
-              {:else if tag.item_count > 0}
+          <nav class="sidebar-nav">
+            {#each sidebarTags.filter(t => t.is_active) as tag}
+              <button class="nav-item" class:active={activeTag === tag.name} onclick={() => { activeTag = tag.name; activeTagId = tag.id; activeFolder = null; activeFolderId = null; loadItems(); }}>
+                <span class="nav-label">{tag.name}</span>
+                <!-- svelte-ignore a11y_no_static_element_interactions --><span class="nav-delete" onclick={(e) => { e.stopPropagation(); if (confirm(`Delete tag "${tag.name}"?`)) deleteTaxonomy(tag.id); }}>×</span>
+              </button>
+            {/each}
+          </nav>
+        {:else}
+          <nav class="sidebar-nav">
+            {#each sidebarTags.filter(t => t.is_active && t.item_count > 0) as tag}
+              <button class="nav-item" class:active={activeTag === tag.name} onclick={() => { activeTag = tag.name; activeTagId = tag.id; activeFolder = null; activeFolderId = null; loadItems(); }}>
+                <span class="nav-label">{tag.name}</span>
                 <span class="nav-count">{tag.item_count}</span>
-              {/if}
-            </button>
-          {/each}
-        </nav>
-
-        <div class="sidebar-separator"></div>
-        <div class="sidebar-manage-row">
-          <button class="sidebar-manage-btn" onclick={() => showManage = !showManage}>
-            {showManage ? 'Done' : 'Manage folders & tags'}
-          </button>
-        </div>
+              </button>
+            {/each}
+          </nav>
+        {/if}
       </aside>
 
       <!-- Main content -->
@@ -781,8 +782,14 @@
     backdrop-filter: blur(16px);
   }
   .sidebar-header { display: flex; align-items: center; gap: 8px; padding: 0 18px 14px; }
-  .sidebar-header svg { color: #7f5f3d; }
-  .sidebar-title { font-size: 1rem; font-weight: 700; color: #1f1811; letter-spacing: -0.03em; }
+  .sidebar-header > svg { color: #7f5f3d; }
+  .sidebar-title { font-size: 1rem; font-weight: 700; color: #1f1811; letter-spacing: -0.03em; flex: 1; }
+  .sidebar-settings {
+    width: 28px; height: 28px; border-radius: 8px; border: none;
+    background: none; color: #8c7b69; display: flex; align-items: center;
+    justify-content: center; cursor: pointer; transition: all 140ms; flex-shrink: 0;
+  }
+  .sidebar-settings:hover { background: rgba(255,248,241,0.72); color: #1f1811; }
 
   .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
   .nav-item {
@@ -840,14 +847,7 @@
   }
   .nav-delete:hover { background: rgba(220,38,38,0.1); color: #DC2626; }
 
-  .sidebar-manage-row { padding: 0 12px; }
-  .sidebar-manage-btn {
-    width: 100%; padding: 8px; border-radius: 10px;
-    border: 1px solid rgba(35,26,17,0.08); background: none;
-    font-size: 0.78rem; color: #8c7b69; font-family: var(--font);
-    cursor: pointer; transition: all 140ms;
-  }
-  .sidebar-manage-btn:hover { background: rgba(255,248,241,0.72); color: #1f1811; }
+  /* manage button removed — settings icon in header */
 
   .brain-content {
     flex: 1;