update

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 {
         <span>Pinned</span>
       </div>
       <div class="section-content ${isCollapsed ? 'collapsed' : ''}">
-        ${filteredEntries.map(({ sectionName, itemName, item, section }) => {
+        ${pinnedEntries.map(({ sectionName, itemName, item, section }) => {
           const isSelected = this.selectedItem === item;
           const type = section.type === 'elements' ? 'element' : 'page';
           const icon = section.type === 'elements' ? 'featured_video' : 'insert_drive_file';