update

ts_web/elements/wcc-sidebar.ts

@@ -36,6 +36,14 @@ export class WccSidebar extends DeesElement {
   @property({ attribute: false })
   accessor pinnedItems: Set<string> = new Set();
 
+  // Sidebar width (resizable)
+  @property({ type: Number })
+  accessor sidebarWidth: number = 200;
+
+  // Track if currently resizing
+  @state()
+  accessor isResizing: boolean = false;
+
   private sectionsInitialized = false;
 
   public render(): TemplateResult {
@@ -66,7 +74,7 @@ export class WccSidebar extends DeesElement {
           box-sizing: border-box;
           position: absolute;
           left: 0px;
-          width: 200px;
+          width: ${this.sidebarWidth}px;
           top: 0px;
           bottom: 0px;
           overflow-y: auto;
@@ -360,6 +368,27 @@ export class WccSidebar extends DeesElement {
           margin-left: 0.25rem;
           margin-right: 0.25rem;
         }
+
+        /* Resize handle */
+        .resize-handle {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          width: 4px;
+          cursor: col-resize;
+          background: transparent;
+          transition: background 0.15s ease;
+          z-index: 10;
+        }
+
+        .resize-handle:hover {
+          background: rgba(59, 130, 246, 0.3);
+        }
+
+        .resize-handle.active {
+          background: var(--primary);
+        }
       </style>
       <div class="search-container">
         <input
@@ -374,6 +403,10 @@ export class WccSidebar extends DeesElement {
         ${this.renderPinnedSection()}
         ${this.renderSections()}
       </div>
+      <div
+        class="resize-handle ${this.isResizing ? 'active' : ''}"
+        @mousedown=${this.startResize}
+      ></div>
     `;
   }
 
@@ -723,6 +756,42 @@ export class WccSidebar extends DeesElement {
     }
   }
 
+  // ============ Resize functionality ============
+
+  private startResize = (e: MouseEvent) => {
+    e.preventDefault();
+    this.isResizing = true;
+    const startX = e.clientX;
+    const startWidth = this.sidebarWidth;
+
+    // Cache references once at start
+    const frame = this.dashboardRef?.shadowRoot?.querySelector('wcc-frame') as any;
+    const properties = this.dashboardRef?.shadowRoot?.querySelector('wcc-properties') as any;
+
+    const onMouseMove = (e: MouseEvent) => {
+      const newWidth = Math.min(400, Math.max(150, startWidth + (e.clientX - startX)));
+      this.sidebarWidth = newWidth;
+      // Update frame and properties directly
+      if (frame) {
+        frame.sidebarWidth = newWidth;
+      }
+      if (properties) {
+        properties.sidebarWidth = newWidth;
+      }
+    };
+
+    const onMouseUp = () => {
+      this.isResizing = false;
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+      // Dispatch event on release for URL persistence
+      this.dispatchEvent(new CustomEvent('widthChanged', { detail: this.sidebarWidth }));
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  };
+
   public selectItem(
     typeArg: TElementType,
     itemNameArg: string,