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

feat: brain sidebar — settings icon at top, tags show counts, hide empty tags

Browse Source 
- 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>
This commit is contained in:
Yusuf Suleman
2026-04-01 22:05:01 -05:00
parent adef1dbeb8
commit a52b13eb28
1 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;