@design.estate/dees-wcctools 3.5.3 → 3.6.0

package/dist_bundle/bundle.js

@@ -42074,7 +42074,8 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           --ring: #3b82f6;
           --radius: 4px;
 
-          display: ${this.isHidden ? "none" : "block"};
+          display: ${this.isHidden ? "none" : "flex"};
+          flex-direction: column;
           border-right: 1px solid rgba(255, 255, 255, 0.08);
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
           font-size: 14px;
@@ -42084,13 +42085,20 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           width: ${this.sidebarWidth}px;
           top: 0px;
           bottom: 0px;
-          overflow-y: auto;
-          overflow-x: hidden;
+          overflow: hidden;
           background: var(--background);
           color: var(--foreground);
         }
 
+        .sidebar-header {
+          flex-shrink: 0;
+        }
+
         .menu {
+          flex: 1;
+          min-height: 0;
+          overflow-y: auto;
+          overflow-x: hidden;
           padding: 0.5rem 0;
         }
 
@@ -42284,6 +42292,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
         .search-container {
           padding: 0.5rem;
           border-bottom: 1px solid var(--border);
+          position: relative;
         }
 
         .search-input {
@@ -42292,7 +42301,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           background: var(--input);
           border: 1px solid var(--border);
           border-radius: var(--radius);
-          padding: 0.5rem 0.75rem;
+          padding: 0.5rem 1.75rem 0.5rem 0.75rem;
           color: var(--foreground);
           font-size: 0.75rem;
           font-family: inherit;
@@ -42308,6 +42317,33 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           color: var(--muted-foreground);
         }
 
+        .search-clear {
+          position: absolute;
+          right: 0.75rem;
+          top: 50%;
+          transform: translateY(-50%);
+          background: none;
+          border: none;
+          padding: 0.25rem;
+          cursor: pointer;
+          color: var(--muted-foreground);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 2px;
+          transition: color 0.15s ease, background 0.15s ease;
+        }
+
+        .search-clear:hover {
+          color: var(--foreground);
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        .search-clear .material-symbols-outlined {
+          font-size: 14px;
+          opacity: 1;
+        }
+
         .highlight {
           background: rgba(59, 130, 246, 0.3);
           border-radius: 2px;
@@ -42397,17 +42433,24 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           background: var(--primary);
         }
       </style>
-      <div class="search-container">
-        <input
-          type="text"
-          class="search-input"
-          placeholder="Search..."
-          .value=${this.searchQuery}
-          @input=${this.handleSearchInput}
-        />
+      <div class="sidebar-header">
+        <div class="search-container">
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search..."
+            .value=${this.searchQuery}
+            @input=${this.handleSearchInput}
+          />
+          ${this.searchQuery ? b2`
+            <button class="search-clear" @click=${this.clearSearch}>
+              <i class="material-symbols-outlined">close</i>
+            </button>
+          ` : null}
+        </div>
+        ${this.renderPinnedSection()}
       </div>
       <div class="menu">
-        ${this.renderPinnedSection()}
         ${this.renderSections()}
       </div>
       <div
@@ -42675,6 +42718,10 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
     this.searchQuery = input.value;
     this.dispatchEvent(new CustomEvent("searchChanged", { detail: this.searchQuery }));
   }
+  clearSearch() {
+    this.searchQuery = "";
+    this.dispatchEvent(new CustomEvent("searchChanged", { detail: this.searchQuery }));
+  }
   matchesSearch(name) {
     if (!this.searchQuery) return true;
     return name.toLowerCase().includes(this.searchQuery.toLowerCase());