feat: brain mobile pills — tags shown after separator, prefixed with #

Scroll: [All] [Home] [Work] ... | [#guide] [#important] [#dev] ...

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yusuf Suleman
2026-04-01 22:35:37 -05:00
parent 3531360827
commit 9f51f3bcd3

View File

@@ -440,7 +440,7 @@
<!-- Mobile: horizontal pill filters --> <!-- Mobile: horizontal pill filters -->
<div class="mobile-pills"> <div class="mobile-pills">
<button class="pill" class:active={!activeFolder && !activeTag} onclick={() => { activeFolder = null; activeTag = null; activeFolderId = null; activeTagId = null; mobileSidebarOpen = false; loadItems(); }}> <button class="pill" class:active={!activeFolder && !activeTag} onclick={() => { activeFolder = null; activeTag = null; activeFolderId = null; activeTagId = null; loadItems(); }}>
All All
</button> </button>
{#each sidebarFolders.filter(f => f.is_active) as folder} {#each sidebarFolders.filter(f => f.is_active) as folder}
@@ -451,6 +451,13 @@
{#if folder.item_count > 0}<span class="pill-count">{folder.item_count}</span>{/if} {#if folder.item_count > 0}<span class="pill-count">{folder.item_count}</span>{/if}
</button> </button>
{/each} {/each}
<span class="pill-separator"></span>
{#each sidebarTags.filter(t => t.is_active && t.item_count > 0) as tag}
<button class="pill pill-tag" class:active={activeTag === tag.name} onclick={() => { activeTag = tag.name; activeTagId = tag.id; activeFolder = null; activeFolderId = null; loadItems(); }}>
#{tag.name}
<span class="pill-count">{tag.item_count}</span>
</button>
{/each}
</div> </div>
<!-- Active filter indicator --> <!-- Active filter indicator -->
@@ -921,6 +928,11 @@
font-size: 0.65rem; font-family: var(--mono); color: #8c7b69; font-size: 0.65rem; font-family: var(--mono); color: #8c7b69;
} }
.pill-separator {
width: 1px; height: 20px; background: rgba(35,26,17,0.12); flex-shrink: 0; align-self: center;
}
.pill-tag { color: #7d6f61; font-style: italic; }
.nav-dot { .nav-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
} }