Add pane resizing

brittle-ui/src/lib_tab.rs

@@ -60,9 +60,30 @@ pub fn LibTab() -> impl IntoView {
         .map(|sq| sq.0)
         .unwrap_or_else(|| RwSignal::new(String::new()));
 
+    let layout_config = use_context::<crate::LayoutContext>()
+        .expect("LayoutContext missing")
+        .0;
+
     // ── UI state ──────────────────────────────────────────────────────────────
     let focused = RwSignal::new(Pane::Tree);
 
+    // Resizing state
+    let left_width = RwSignal::new(220);
+    let right_width = RwSignal::new(300);
+    let resizing_left = RwSignal::new(false);
+    let resizing_right = RwSignal::new(false);
+
+    // Initial widths from layout config (fractions)
+    Effect::new(move |_| {
+        let config = layout_config.get();
+        if let Some(win) = web_sys::window() {
+            if let Ok(Some(total_width)) = win.inner_width().map(|v| v.as_f64()) {
+                left_width.set((total_width * config.left_pane_fraction as f64) as i32);
+                right_width.set((total_width * config.right_pane_fraction as f64) as i32);
+            }
+        }
+    });
+
     // Tree state
     let root_libs = RwSignal::new(Vec::<Library>::new());
     let children_cache = RwSignal::new(HashMap::<String, Vec<Library>>::new());
@@ -76,6 +97,38 @@ pub fn LibTab() -> impl IntoView {
     // Detail state
     let detail_ref = RwSignal::new(Option::<Reference>::None);
 
+    // ── Resizing Logic ────────────────────────────────────────────────────────
+    let on_mousemove = window_event_listener(leptos::ev::mousemove, move |ev| {
+        if let Some(win) = web_sys::window() {
+            if let Ok(Some(total_width)) = win.inner_width().map(|v| v.as_f64()) {
+                let total_width = total_width as i32;
+                let config = layout_config.get_untracked();
+
+                if resizing_left.get_untracked() {
+                    let new_width = ev.client_x();
+                    // Constraints: min, max, AND leave enough space for center
+                    let max_allowed = (total_width - right_width.get_untracked() - config.center_pane_min).max(config.left_pane_min);
+                    left_width.set(new_width.max(config.left_pane_min).min(config.left_pane_max).min(max_allowed));
+                } else if resizing_right.get_untracked() {
+                    let new_width = total_width - ev.client_x();
+                    // Constraints: min, max, AND leave enough space for center
+                    let max_allowed = (total_width - left_width.get_untracked() - config.center_pane_min).max(config.right_pane_min);
+                    right_width.set(new_width.max(config.right_pane_min).min(config.right_pane_max).min(max_allowed));
+                }
+            }
+        }
+    });
+
+    let on_mouseup = window_event_listener(leptos::ev::mouseup, move |_| {
+        resizing_left.set(false);
+        resizing_right.set(false);
+    });
+
+    on_cleanup(move || {
+        on_mousemove.remove();
+        on_mouseup.remove();
+    });
+
     // ── Derived / computed ────────────────────────────────────────────────────
 
     // Flattened visible tree rows (recomputed when tree data or expand set changes).
@@ -182,7 +235,10 @@ pub fn LibTab() -> impl IntoView {
     // ── View ──────────────────────────────────────────────────────────────────
     view! {
         <div class="lib-tab">
-            <div class="pane pane-left">
+            <div
+                class="pane pane-left"
+                style=move || format!("width: {}px", left_width.get())
+            >
                 <LibraryTree
                     root_libs=root_libs
                     children_cache=children_cache
@@ -191,6 +247,16 @@ pub fn LibTab() -> impl IntoView {
                     focused=focused
                 />
             </div>
+
+            <div
+                class="resizer"
+                class:resizing=move || resizing_left.get()
+                on:mousedown=move |ev| {
+                    ev.prevent_default();
+                    resizing_left.set(true);
+                }
+            />
+
             <div class="pane pane-center">
                 <PubList
                     items=list_items
@@ -198,7 +264,21 @@ pub fn LibTab() -> impl IntoView {
                     focused=focused
                 />
             </div>
-            <div class="pane pane-right" class:pane-focused=move || focused.get() == Pane::Detail>
+
+            <div
+                class="resizer"
+                class:resizing=move || resizing_right.get()
+                on:mousedown=move |ev| {
+                    ev.prevent_default();
+                    resizing_right.set(true);
+                }
+            />
+
+            <div
+                class="pane pane-right"
+                class:pane-focused=move || focused.get() == Pane::Detail
+                style=move || format!("width: {}px", right_width.get())
+            >
                 <PubDetail reference=detail_ref />
             </div>
         </div>