feat: resizable sidebar and list panels with drag handles

Main uses fixed-width columns (200px / 280px / 1fr). This adds
draggable resize handles between panels so users can adjust widths
to their preference, with min/max constraints (sidebar 120–400px,
list 180–600px).

Improvements over main:
- CSS-variable-driven 5-column grid replaces hardcoded 3-column
- Drag lifecycle management cleans up listeners on view switch
- CSS class toggling (.as-hidden) instead of inline style manipulation
- 6px handle width for a comfortable grab target

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

main.js

@@ -25,10 +25,13 @@ export class AgentfilesView extends ItemView {
 	private detailEl!: HTMLElement;
 	private dashboardEl!: HTMLElement;
 	private marketplaceEl!: HTMLElement;
+	private resizeHandle1!: HTMLElement;
+	private resizeHandle2!: HTMLElement;
 
 	private isDashboard = false;
 	private isMarketplace = false;
 	private updateRef: ReturnType<typeof this.store.on> | null = null;
+	private dragCleanup: (() => void) | null = null;
 
 	constructor(
 		leaf: WorkspaceLeaf,
@@ -60,7 +63,9 @@ export class AgentfilesView extends ItemView {
 		container.addClass("as-container");
 
 		this.sidebarEl = container.createDiv("as-panel as-panel-sidebar");
+		this.resizeHandle1 = this.createResizeHandle(container, this.sidebarEl, "--as-sidebar-width", 120, 400);
 		this.listEl = container.createDiv("as-panel as-panel-list");
+		this.resizeHandle2 = this.createResizeHandle(container, this.listEl, "--as-list-width", 180, 600);
 		this.detailEl = container.createDiv("as-panel as-panel-detail");
 		this.dashboardEl = container.createDiv("as-panel as-panel-dashboard as-hidden");
 		this.marketplaceEl = container.createDiv("as-panel as-panel-marketplace as-hidden");
@@ -91,6 +96,8 @@ export class AgentfilesView extends ItemView {
 	}
 
 	toggleDashboard(): void {
+		this.dragCleanup?.();
+		this.dragCleanup = null;
 		this.isDashboard = !this.isDashboard;
 		if (this.isMarketplace) {
 			this.isMarketplace = false;
@@ -99,18 +106,24 @@ export class AgentfilesView extends ItemView {
 		if (this.isDashboard) {
 			this.listEl.addClass("as-hidden");
 			this.detailEl.addClass("as-hidden");
+			this.resizeHandle1.addClass("as-hidden");
+			this.resizeHandle2.addClass("as-hidden");
 			this.dashboardEl.removeClass("as-hidden");
 			this.dashboardPanel.render();
 		} else {
 			this.listEl.removeClass("as-hidden");
 			this.detailEl.removeClass("as-hidden");
+			this.resizeHandle1.removeClass("as-hidden");
+			this.resizeHandle2.removeClass("as-hidden");
 			this.dashboardEl.addClass("as-hidden");
 		}
 		this.sidebarPanel.setDashboardActive(this.isDashboard);
 		this.sidebarPanel.render();
 	}
 
 	toggleMarketplace(): void {
+		this.dragCleanup?.();
+		this.dragCleanup = null;
 		this.isMarketplace = !this.isMarketplace;
 		if (this.isDashboard) {
 			this.isDashboard = false;
@@ -119,11 +132,15 @@ export class AgentfilesView extends ItemView {
 		if (this.isMarketplace) {
 			this.listEl.addClass("as-hidden");
 			this.detailEl.addClass("as-hidden");
+			this.resizeHandle1.addClass("as-hidden");
+			this.resizeHandle2.addClass("as-hidden");
 			this.marketplaceEl.removeClass("as-hidden");
 			this.marketplacePanel.render();
 		} else {
 			this.listEl.removeClass("as-hidden");
 			this.detailEl.removeClass("as-hidden");
+			this.resizeHandle1.removeClass("as-hidden");
+			this.resizeHandle2.removeClass("as-hidden");
 			this.marketplaceEl.addClass("as-hidden");
 		}
 		this.sidebarPanel.setMarketplaceActive(this.isMarketplace);
@@ -148,7 +165,44 @@ export class AgentfilesView extends ItemView {
 		this.detailPanel.show(item);
 	}
 
+	private createResizeHandle(
+		container: HTMLElement,
+		panel: HTMLElement,
+		cssVar: string,
+		min: number,
+		max: number
+	): HTMLElement {
+		const handle = container.createDiv("as-resize-handle");
+		let startX = 0;
+		let startWidth = 0;
+
+		const onMouseMove = (e: MouseEvent) => {
+			const newWidth = Math.min(max, Math.max(min, startWidth + (e.clientX - startX)));
+			container.style.setProperty(cssVar, `${newWidth}px`);
+		};
+
+		const onMouseUp = () => {
+			handle.removeClass("is-dragging");
+			document.removeEventListener("mousemove", onMouseMove);
+			document.removeEventListener("mouseup", onMouseUp);
+			this.dragCleanup = null;
+		};
+
+		handle.addEventListener("mousedown", (e: MouseEvent) => {
+			e.preventDefault();
+			startX = e.clientX;
+			startWidth = parseInt(container.style.getPropertyValue(cssVar)) || panel.offsetWidth;
+			handle.addClass("is-dragging");
+			document.addEventListener("mousemove", onMouseMove);
+			document.addEventListener("mouseup", onMouseUp);
+			this.dragCleanup = onMouseUp;
+		});
+
+		return handle;
+	}
+
 	onClose(): void {
+		this.dragCleanup?.();
 		if (this.updateRef) {
 			this.store.offref(this.updateRef);
 		}

src/views/main-view.ts

@@ -12,8 +12,10 @@
 }
 
 .as-container {
+	--as-sidebar-width: 200px;
+	--as-list-width: 280px;
 	display: grid;
-	grid-template-columns: 200px 280px 1fr;
+	grid-template-columns: var(--as-sidebar-width) 6px var(--as-list-width) 6px 1fr;
 	height: 100%;
 	overflow: hidden;
 }
@@ -38,6 +40,20 @@
 	overflow: hidden;
 }
 
+/* Resize handles */
+.as-resize-handle {
+	width: 6px;
+	background: transparent;
+	cursor: col-resize;
+	transition: background 0.15s;
+	z-index: 1;
+}
+
+.as-resize-handle:hover,
+.as-resize-handle.is-dragging {
+	background: var(--interactive-accent);
+}
+
 /* Sidebar */
 .as-sidebar-section {
 	margin-bottom: 8px;