diff --git a/crates/trawler/src/main.rs b/crates/trawler/src/main.rs index 0737b7d..ede533f 100644 --- a/crates/trawler/src/main.rs +++ b/crates/trawler/src/main.rs @@ -1721,20 +1721,26 @@ const MUTED_COLOR: u32 = 0x9a9a9a; /// Default text color, set on the root element and also baked into each /// paragraph `TextRun` (runs carry explicit colors — they don't inherit). const BODY_TEXT_COLOR: u32 = 0xffffff; -/// Height of the bullet column's box. Row *content* heights floor at the -/// real `window.line_height()` instead (see the row-building code) so an -/// empty block's row doesn't change height when the editor focuses it — -/// this constant only positions the bullet, and [`BULLET_OPTICAL_NUDGE`] -/// is tuned against it. -const ROW_MIN_HEIGHT: f32 = 22.0; -/// Downward nudge applied to the bullet column so its dot centers on the -/// text's x-height rather than the geometric center of its `ROW_MIN_HEIGHT` -/// box. Text line metrics reserve more space above the glyphs (ascent) than -/// below (descent), so a box centered by height alone lands the bullet near -/// the x-height *top*, reading as visibly high next to the text. Pixel -/// measurement against the default row font put exact x-height-center at -/// 3.5px; tuned down slightly from there by eye. -const BULLET_OPTICAL_NUDGE: f32 = 2.4; +// --- outline layout knobs ------------------------------------------------- +// The tunables that set the outline's density and rhythm. Everything else +// derives: row heights, the editor's measurement, and caret geometry all +// follow the inherited line height, and the bullet column centers on it. + +/// Line height for all app text, as a multiple of font size. GPUI's +/// default is phi (1.618, ≈26px at 16px text); this is deliberately +/// tighter. +const LINE_HEIGHT: f32 = 1.3; +/// Horizontal gap between the bullet column and the block's text. +const BULLET_TEXT_GAP: f32 = 8.0; +/// Horizontal indent added per outline depth level. +const INDENT_PER_LEVEL: f32 = 32.0; +/// Left padding before a root-level (depth 0) row's bullet. +const OUTLINE_LEFT_PAD: f32 = 8.0; +/// Vertical nudge applied to the bullet column (whose box spans one line +/// height, dot centered), available if the dot ever needs to sit off the +/// line box's geometric center. Tuned by eye; zero at the current line +/// height. +const BULLET_OPTICAL_NUDGE: f32 = 0.0; /// Approximate height of the header bar (`.p_2()` padding plus one line of /// text) — generous on purpose. Used to keep the calendar's click-away /// backdrop out of the header entirely; see `calendar_backdrop`'s doc for @@ -2702,6 +2708,7 @@ impl Render for TrawlerApp { .on_action(cx.listener(Self::toggle_fold_focused)) .bg(rgb(0x1e1e1e)) .text_color(rgb(BODY_TEXT_COLOR)) + .line_height(relative(LINE_HEIGHT)) // The app-wide UI font, bundled and registered in `main` — // cascades to everything (including `BlockEditor`, which lays // out with `window.text_style()`) except the explicit @@ -2828,13 +2835,13 @@ impl Render for TrawlerApp { let mut row = div() .id(ix) .w_full() - .pl(px(16.0 * *depth as f32 + 8.0)) + .pl(px(INDENT_PER_LEVEL * *depth as f32 + OUTLINE_LEFT_PAD)) .pr_2() .py_1() .flex() .flex_row() .items_start() - .gap_1(); + .gap(px(BULLET_TEXT_GAP)); if is_query { // A query block otherwise looks exactly // like a plain outline row containing @@ -2856,15 +2863,15 @@ impl Render for TrawlerApp { // children stay discoverable. Every block — // including an empty leaf, whose Markdown view // otherwise renders zero children — keeps a - // visible bullet. The column height matches - // ROW_MIN_HEIGHT so the dot centers on the - // row's first text line, not the whole - // (possibly multi-line) row. + // visible bullet. The column spans one line + // height so the dot centers on the row's first + // text line, not the whole (possibly + // multi-line) row. let dot = div().size(px(6.0)).rounded_full().bg(rgb(MUTED_COLOR)); let mut bullet = div() .id(("bullet", ix)) .w(px(14.0)) - .h(px(ROW_MIN_HEIGHT)) + .h(line_height) .mt(px(BULLET_OPTICAL_NUDGE)) .flex() .items_center() @@ -2973,7 +2980,8 @@ impl Render for TrawlerApp { // the indented region itself. // div() - .ml(px(16.0 * (*depth as f32 + 1.0) + 8.0)) + .ml(px(INDENT_PER_LEVEL * (*depth as f32 + 1.0) + + OUTLINE_LEFT_PAD)) .mr_2() .mb_2() .bg(rgb(QUERY_BG))