From 3ee8afcdaed0fd51674c4f2560d0009f037f1b06 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Sun, 4 Jan 2026 16:41:24 +0000
Subject: [PATCH] feat(sidebar): restructure sidebar layout, add search clear
 button, and improve scrolling behavior

---
 changelog.md                   |  9 +++++
 ts_web/00_commitinfo_data.ts   |  2 +-
 ts_web/elements/wcc-sidebar.ts | 74 ++++++++++++++++++++++++++++------
 3 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/changelog.md b/changelog.md
index d1aa349..83c74b3 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## 2026-01-04 - 3.6.0 - feat(sidebar)
+restructure sidebar layout, add search clear button, and improve scrolling behavior
+
+- Change sidebar root to a flex column layout and add a .sidebar-header to separate header content from the scrollable menu
+- Move pinned section into the header and make .menu flex: 1 with min-height: 0 so the menu becomes the scrollable area
+- Replace overflow-y on the root with overflow:hidden to avoid double scrolling and constrain scrolling to .menu
+- Add a clear button for the search input (.search-clear) with positioning, hover styles, and a clearSearch() method to reset the query and emit searchChanged
+- Adjust search input padding and make .search-container position: relative to correctly position the clear button
+
 ## 2026-01-04 - 3.5.3 - fix(deps)
 bump dependency versions: @design.estate/dees-domtools to ^2.3.7, @design.estate/dees-element to ^2.1.5, lit to ^3.3.2; update devDependencies @api.global/typedserver to ^8.1.0 and @git.zone/tstest to ^3.1.4
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index d197613..0286a8e 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '3.5.3',
+  version: '3.6.0',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }
diff --git a/ts_web/elements/wcc-sidebar.ts b/ts_web/elements/wcc-sidebar.ts
index 7728f60..e74b226 100644
--- a/ts_web/elements/wcc-sidebar.ts
+++ b/ts_web/elements/wcc-sidebar.ts
@@ -71,7 +71,8 @@ export class WccSidebar extends DeesElement {
           --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;
@@ -81,13 +82,20 @@ export class WccSidebar extends DeesElement {
           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;
         }
 
@@ -281,6 +289,7 @@ export class WccSidebar extends DeesElement {
         .search-container {
           padding: 0.5rem;
           border-bottom: 1px solid var(--border);
+          position: relative;
         }
 
         .search-input {
@@ -289,7 +298,7 @@ export class WccSidebar extends DeesElement {
           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;
@@ -305,6 +314,33 @@ export class WccSidebar extends DeesElement {
           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;
@@ -394,17 +430,24 @@ export class WccSidebar extends DeesElement {
           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 ? html`
+            <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
@@ -716,6 +759,11 @@ export class WccSidebar extends DeesElement {
     this.dispatchEvent(new CustomEvent('searchChanged', { detail: this.searchQuery }));
   }
 
+  private clearSearch() {
+    this.searchQuery = '';
+    this.dispatchEvent(new CustomEvent('searchChanged', { detail: this.searchQuery }));
+  }
+
   private matchesSearch(name: string): boolean {
     if (!this.searchQuery) return true;
     return name.toLowerCase().includes(this.searchQuery.toLowerCase());