an.tsouchlos/brittle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add pane resizing

Browse Source
This commit is contained in:
Andreas Tsouchlos
2026-03-27 16:20:05 +01:00
parent cdcc119e41
commit 270c8adc11
7 changed files with 178 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
brittle-ui/src/lib_tab.rs
View File

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

27
brittle-ui/src/main.rs
View File

@@ -373,12 +373,39 @@ fn provide_tabs() -> (RwSignal<Vec<AppTab>>, RwSignal<usize>) {
(tabs, active_tab)
}
// ── Layout context ────────────────────────────────────────────────────────────
/// Context handle for the current layout configuration.
#[derive(Clone, Copy)]
pub struct LayoutContext(pub ReadSignal<crate::tauri::LayoutConfig>);
fn provide_layout() {
let (layout, set_layout) = signal(crate::tauri::LayoutConfig {
left_pane_fraction: 0.20,
right_pane_fraction: 0.35,
left_pane_min: 120,
left_pane_max: 600,
right_pane_min: 150,
right_pane_max: 600,
center_pane_min: 200,
});
provide_context(LayoutContext(layout));
// Load layout config from backend.
leptos::task::spawn_local(async move {
if let Ok(l) = crate::tauri::get_layout_config().await {
set_layout.set(l);
}
});
}
// ── Root component ─────────────────────────────────────────────────────────────
#[component]
fn App() -> impl IntoView {
provide_keymap();
provide_theme();
provide_layout();
let mode = provide_mode();
provide_search_query();
let (tabs, active_tab) = provide_tabs();

17
brittle-ui/src/tauri.rs
View File

@@ -56,6 +56,18 @@ async fn invoke<T: for<'de> serde::Deserialize<'de>, A: Serialize>(
}
}
#[derive(serde::Deserialize, Clone, Debug)]
#[serde(rename_all = "snake_case")]
pub struct LayoutConfig {
pub left_pane_fraction: f32,
pub right_pane_fraction: f32,
pub left_pane_min: i32,
pub left_pane_max: i32,
pub right_pane_min: i32,
pub right_pane_max: i32,
pub center_pane_min: i32,
}
// ── Config commands ────────────────────────────────────────────────────────────
/// Return the last-opened project path from the global config, or `None` if
@@ -64,6 +76,11 @@ pub async fn get_last_project() -> Result<Option<String>, String> {
invoke("get_last_project", &NoArgs {}).await
}
/// Return the user's layout configuration from the global config.
pub async fn get_layout_config() -> Result<LayoutConfig, String> {
invoke("get_layout_config", &NoArgs {}).await
}
/// Return the user's keybinding overrides from `~/.config/brittle/config.toml`.
///
/// Keys are snake_case action names (e.g. `"tab_next"`); values are

30
brittle-ui/style.css
View File

@@ -117,18 +117,38 @@ ul { list-style: none; }
height: 100%;
}
.resizer {
width: 2px;
background: var(--border);
cursor: col-resize;
flex-shrink: 0;
transition: background 0.2s;
z-index: 10;
position: relative;
}
.resizer::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -4px;
right: -4px;
}
.resizer:hover, .resizer.resizing {
background: var(--accent);
}
.pane {
display: flex;
flex-direction: column;
overflow: hidden;
border-right: 1px solid var(--border);
}
.pane:last-child { border-right: none; }
.pane-left { width: 220px; flex-shrink: 0; }
.pane-left { flex-shrink: 0; }
.pane-center { flex: 1; min-width: 0; }
.pane-right { width: 300px; flex-shrink: 0; }
.pane-right { flex-shrink: 0; }
.pane-focused { outline: 1px solid var(--focused-ring); outline-offset: -1px; }