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

@@ -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;

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">