yusiboyz/platform
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: brain sidebar — show all tags, fix content overflow, match nav styling

Browse Source 
- 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>
This commit is contained in:
Yusuf Suleman
2026-04-01 21:20:30 -05:00
parent 5689ee1f6a
commit 11965eccd1
1 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
View File

@@ -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 ═══ */