From 8e3b6a16bd2a3845c579ef4fee03f31a93de8948 Mon Sep 17 00:00:00 2001
From: Keith Smith <keithsmith@darksingularity.org>
Date: Fri, 14 Aug 2026 20:45:07 -0600
Subject: [PATCH] Make the room list sidebar resizable

Generalizes useResizableWidth with a left/right anchor option and wires
it into the sidebar the same way the room info panel already uses it,
so both sides of the chat shell can be dragged to a comfortable width.
---
 frontend/src/components/Sidebar.css     | 22 ++++++++++++++++++++--
 frontend/src/components/Sidebar.tsx     | 12 +++++++++++-
 frontend/src/hooks/useResizableWidth.ts | 21 ++++++++++++++++-----
 3 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Sidebar.css b/frontend/src/components/Sidebar.css
index 8619aa8..5fec284 100644
--- a/frontend/src/components/Sidebar.css
+++ b/frontend/src/components/Sidebar.css
@@ -1,6 +1,8 @@
 .sidebar {
-  width: 300px;
-  min-width: 300px;
+  position: relative;
+  flex: none;
+  min-width: 220px;
+  max-width: 480px;
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--ds-border);
@@ -8,6 +10,22 @@
   min-height: 0;
 }
 
+.sidebar-resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -3px;
+  width: 6px;
+  cursor: col-resize;
+  z-index: 5;
+  touch-action: none;
+}
+
+.sidebar-resize-handle:hover,
+.sidebar-resize-handle:active {
+  background: color-mix(in srgb, var(--ds-accent) 40%, transparent);
+}
+
 .sidebar-toolbar {
   padding: var(--sp-3);
   display: flex;
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 5f2d239..bf9b219 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,3 +1,4 @@
+import { useResizableWidth } from '../hooks/useResizableWidth'
 import type { MyRoomItem } from '../types'
 import { RoomRow } from './RoomRow'
 import './Sidebar.css'
@@ -24,8 +25,17 @@ export function Sidebar({
   const query = searchQuery.trim().toLowerCase()
   const filtered = query ? rooms.filter((r) => r.name.toLowerCase().includes(query)) : rooms
 
+  const { width, startResize } = useResizableWidth({
+    storageKey: 'sidebar-width',
+    defaultWidth: 300,
+    min: 220,
+    max: 480,
+    anchor: 'left',
+  })
+
   return (
-    <aside className="sidebar">
+    <aside className="sidebar" style={{ width }}>
+      <div className="sidebar-resize-handle" onPointerDown={startResize} />
       <div className="sidebar-toolbar">
         <div className="sidebar-search">
           <svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
diff --git a/frontend/src/hooks/useResizableWidth.ts b/frontend/src/hooks/useResizableWidth.ts
index 472f06d..8d5ecf8 100644
--- a/frontend/src/hooks/useResizableWidth.ts
+++ b/frontend/src/hooks/useResizableWidth.ts
@@ -5,12 +5,22 @@ interface UseResizableWidthOptions {
   defaultWidth: number
   min: number
   max: number
+  // 'right' (default): panel sits against the viewport's right edge, width
+  // is measured from the cursor to that edge -- a handle on the panel's
+  // LEFT edge drags naturally. 'left': panel sits against the left edge,
+  // width is just the cursor's x position -- a handle on the panel's RIGHT
+  // edge drags naturally.
+  anchor?: 'left' | 'right'
 }
 
-// Right-anchored resizable panel: width is the distance from the cursor to
-// the viewport's right edge, so a handle on the panel's left edge drags
-// naturally. Persists to localStorage so it survives a reload.
-export function useResizableWidth({ storageKey, defaultWidth, min, max }: UseResizableWidthOptions) {
+// Persists to localStorage so it survives a reload.
+export function useResizableWidth({
+  storageKey,
+  defaultWidth,
+  min,
+  max,
+  anchor = 'right',
+}: UseResizableWidthOptions) {
   const [width, setWidth] = useState(() => {
     const stored = Number(localStorage.getItem(storageKey))
     return stored >= min && stored <= max ? stored : defaultWidth
@@ -22,7 +32,8 @@ export function useResizableWidth({ storageKey, defaultWidth, min, max }: UseRes
   useEffect(() => {
     function handleMove(e: PointerEvent<Window> | globalThis.PointerEvent) {
       if (!draggingRef.current) return
-      const next = Math.min(max, Math.max(min, window.innerWidth - e.clientX))
+      const raw = anchor === 'left' ? e.clientX : window.innerWidth - e.clientX
+      const next = Math.min(max, Math.max(min, raw))
       setWidth(next)
     }
     function handleUp() {