From 11965eccd1bd82312eeeedc4b2985d2bb6d3df3f Mon Sep 17 00:00:00 2001
From: Yusuf Suleman <yusuf@quadjourney.com>
Date: Wed, 1 Apr 2026 21:20:30 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20brain=20sidebar=20=E2=80=94=20show=20all?=
 =?UTF-8?q?=20tags,=20fix=20content=20overflow,=20match=20nav=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tags now show regardless of item_count (were hidden when 0)
- Content padding fixed (28px, overflow-x hidden)
- Sidebar nav items use same var(--text-sm) and var(--transition) as AppShell
- Active count color matches AppShell pattern
- Hero command-actions narrower to prevent overflow

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

diff --git a/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte b/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
index 1c8589c..593c6bf 100644
--- a/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
+++ b/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
@@ -354,7 +354,7 @@
         <div class="sidebar-separator"></div>
         <div class="sidebar-section-label">Tags</div>
         <nav class="sidebar-nav">
-          {#each sidebarTags.filter(t => t.is_active && t.item_count > 0) as tag}
+          {#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>
               <span class="nav-count">{tag.item_count}</span>
@@ -680,7 +680,7 @@
     margin: 12px 0 0; max-width: 46ch;
     color: #5c5046; font-size: 1rem; line-height: 1.55;
   }
-  .command-actions { min-width: 220px; display: grid; justify-items: end; gap: 8px; }
+  .command-actions { min-width: 140px; display: grid; justify-items: end; gap: 6px; }
   .command-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: #8c7b69; }
   .command-stats { font-size: 1.15rem; letter-spacing: -0.04em; color: #221a13; }
 
@@ -729,7 +729,6 @@
   .brain-layout {
     display: flex;
     min-height: calc(100vh - 60px);
-    margin: 0 -24px;
   }
 
   .brain-sidebar {
@@ -744,30 +743,34 @@
     padding: 16px 0 12px;
     backdrop-filter: blur(16px);
   }
-  .sidebar-header { display: flex; align-items: center; gap: 8px; padding: 0 18px 12px; }
+  .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-nav { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
+  .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
   .nav-item {
-    display: flex; align-items: center; gap: 8px;
+    display: flex; align-items: center; gap: var(--sp-2, 8px);
     padding: 10px 12px; border-radius: 14px; background: none; border: none;
-    font-size: 0.85rem; color: #65584c; cursor: pointer;
-    transition: all 160ms; text-align: left; width: 100%; font-family: var(--font);
+    font-size: var(--text-sm, 0.85rem); color: #65584c; cursor: pointer;
+    transition: all var(--transition, 160ms); text-align: left; width: 100%; font-family: var(--font);
   }
   .nav-item:hover { background: rgba(255,248,241,0.72); color: #1f1811; }
   .nav-item.active { background: rgba(255,248,241,0.92); color: #1f1811; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(35,26,17,0.08); }
   .nav-label { flex: 1; }
-  .nav-count { font-size: 0.72rem; color: #8a7a68; font-family: var(--mono); }
+  .nav-count { font-size: var(--text-xs, 0.72rem); color: #8a7a68; font-family: var(--mono); }
+  .nav-item.active .nav-count { color: #7f5f3d; opacity: 0.8; }
 
   .sidebar-separator { height: 1px; background: rgba(35,26,17,0.08); margin: 12px 18px; }
-  .sidebar-section-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #8c7b69; padding: 0 18px 6px; }
+  .sidebar-section-label {
+    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
+    letter-spacing: 0.14em; color: #8c7b69; padding: 4px 18px 6px;
+  }
 
   .brain-content {
     flex: 1;
     min-width: 0;
-    padding: 0 24px;
-    overflow-y: auto;
+    padding: 16px 28px 28px;
+    overflow-x: hidden;
   }
 
   /* ═══ Active filter ═══ */