diff --git a/ts_web/elements/wcc-sidebar.ts b/ts_web/elements/wcc-sidebar.ts index 1b73c29..b2439e7 100644 --- a/ts_web/elements/wcc-sidebar.ts +++ b/ts_web/elements/wcc-sidebar.ts @@ -167,6 +167,10 @@ export class WccSidebar extends DeesElement { grid-template-columns: 16px 1fr; } + .selectOption.folder .text { + margin-left: 4px; + } + .selectOption .expand-icon { font-size: 14px; opacity: 0.5; @@ -321,13 +325,17 @@ export class WccSidebar extends DeesElement { opacity: 0.8; } - /* Section tag for pinned items */ + /* Section tag pill for pinned items */ .section-tag { - font-size: 0.55rem; - color: #555; + font-size: 0.5rem; + color: #888; margin-left: auto; text-transform: uppercase; - letter-spacing: 0.03em; + letter-spacing: 0.02em; + background: rgba(255, 255, 255, 0.06); + padding: 0.15rem 0.4rem; + border-radius: 9999px; + white-space: nowrap; } /* Group container */ @@ -429,6 +437,7 @@ export class WccSidebar extends DeesElement { const isCollapsed = this.collapsedSections.has('__pinned__'); // Collect pinned items with their original section info + // Pinned items are NOT filtered by search - they always remain visible const pinnedEntries: Array<{ sectionName: string; itemName: string; item: any; section: IWccSection }> = []; for (const key of this.pinnedItems) { @@ -443,10 +452,7 @@ export class WccSidebar extends DeesElement { } } - // Filter by search - const filteredEntries = pinnedEntries.filter(e => this.matchesSearch(e.itemName)); - - if (filteredEntries.length === 0 && this.searchQuery) { + if (pinnedEntries.length === 0) { return null; } @@ -460,7 +466,7 @@ export class WccSidebar extends DeesElement { Pinned