refactor: brain sidebar lives in AppShell nav, not in-page
- Removed duplicate in-page sidebar from AtelierBrainPage - AppShell sub-items now full-sized, matching main nav style - Folders/Tags tabs as pill toggle in sidebar - All folders shown (not just ones with items) - All tags shown (not limited to 12) - Brain page is now just capture + search + masonry grid - Sidebar links use /brain?folder=X and /brain?tag=X Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yusuf Suleman
@@ -367,86 +367,31 @@
|
||||
</section>
|
||||
|
||||
<!-- ═══ Sidebar + Main layout ═══ -->
|
||||
<div class="brain-layout">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="brain-sidebar">
|
||||
<div class="sidebar-tabs">
|
||||
<button class="sidebar-tab" class:active={sidebarView === 'folders'} onclick={() => sidebarView = 'folders'}>Folders</button>
|
||||
<button class="sidebar-tab" class:active={sidebarView === 'tags'} onclick={() => sidebarView = 'tags'}>Tags</button>
|
||||
</div>
|
||||
|
||||
<!-- All items -->
|
||||
<button class="sidebar-item" class:active={!activeFolder && !activeTag} onclick={() => { selectFolder(null); selectTag(null); }}>
|
||||
<span class="sidebar-item-name">All items</span>
|
||||
<span class="sidebar-item-count">{total}</span>
|
||||
</button>
|
||||
|
||||
{#if sidebarView === 'folders'}
|
||||
{#each sidebarFolders.filter(f => f.is_active) as folder}
|
||||
<button class="sidebar-item" class:active={activeFolderId === folder.id} onclick={() => selectFolder(folder)}>
|
||||
<span class="sidebar-item-name">{folder.name}</span>
|
||||
<span class="sidebar-item-count">{folder.item_count}</span>
|
||||
{#if showManage}
|
||||
<button class="sidebar-item-delete" onclick={(e) => { e.stopPropagation(); if (confirm(`Delete folder "${folder.name}"? Items will be moved.`)) deleteTaxonomy(folder.id); }}>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each sidebarTags.filter(t => t.is_active) as tag}
|
||||
<button class="sidebar-item" class:active={activeTagId === tag.id} onclick={() => selectTag(tag)}>
|
||||
<span class="sidebar-item-name">{tag.name}</span>
|
||||
<span class="sidebar-item-count">{tag.item_count}</span>
|
||||
{#if showManage}
|
||||
<button class="sidebar-item-delete" onclick={(e) => { e.stopPropagation(); if (confirm(`Delete tag "${tag.name}"?`)) deleteTaxonomy(tag.id); }}>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<!-- Add / Manage -->
|
||||
<div class="sidebar-actions">
|
||||
{#if showManage}
|
||||
<div class="sidebar-add">
|
||||
<input class="sidebar-add-input" placeholder="New {sidebarView === 'folders' ? 'folder' : 'tag'}..." bind:value={newTaxName} onkeydown={(e) => { if (e.key === 'Enter') addTaxonomy(); }} />
|
||||
<button class="sidebar-add-btn" onclick={addTaxonomy}>Add</button>
|
||||
</div>
|
||||
{/if}
|
||||
<button class="sidebar-manage-toggle" onclick={() => showManage = !showManage}>
|
||||
{showManage ? 'Done' : 'Manage'}
|
||||
<!-- Main content -->
|
||||
<div>
|
||||
<!-- Active filter indicator -->
|
||||
{#if activeFolder || activeTag}
|
||||
<div class="active-filter">
|
||||
<span class="filter-label">Filtered by {activeFolder ? 'folder' : 'tag'}:</span>
|
||||
<span class="filter-tag">{activeFolder || activeTag}</span>
|
||||
<button class="filter-clear" onclick={() => { activeFolder = null; activeTag = null; activeFolderId = null; activeTagId = null; loadItems(); }}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="brain-main">
|
||||
<!-- Active filter indicator -->
|
||||
{#if activeFolder || activeTag}
|
||||
<div class="active-filter">
|
||||
<span class="filter-label">Filtered by {activeFolder ? 'folder' : 'tag'}:</span>
|
||||
<span class="filter-tag">{activeFolder || activeTag}</span>
|
||||
<button class="filter-clear" onclick={() => { selectFolder(null); selectTag(null); }}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
Clear
|
||||
<!-- Search -->
|
||||
<div class="search-section">
|
||||
<div class="search-wrap">
|
||||
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
|
||||
<input type="text" class="search-input" placeholder="Search your brain..." bind:value={searchQuery} oninput={handleSearchInput} />
|
||||
{#if searchQuery}
|
||||
<button class="search-clear" onclick={() => { searchQuery = ''; loadItems(); }}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Search -->
|
||||
<div class="search-section">
|
||||
<div class="search-wrap">
|
||||
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
|
||||
<input type="text" class="search-input" placeholder="Search your brain..." bind:value={searchQuery} oninput={handleSearchInput} />
|
||||
{#if searchQuery}
|
||||
<button class="search-clear" onclick={() => { searchQuery = ''; loadItems(); }}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Masonry card grid -->
|
||||
@@ -534,8 +479,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div><!-- .brain-main -->
|
||||
</div><!-- .brain-layout -->
|
||||
</div><!-- main content -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user