Skip to content

feat(chrome): proportional type for prose, mono kept for every value #444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kirillDevPro merged 2 commits into from
Sep 6, 2026
Merged

feat(chrome): proportional type for prose, mono kept for every value #444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f82b4f
feat(chrome): proportional type for prose, mono kept for every value
kirillDevPro Sep 6, 2026
a88d7f3
fix(strategies): lead every section with Moonbot's own title
kirillDevPro Sep 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions crates/moon-ui-gpui/src/analytics/calendar/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -611,6 +611,8 @@ impl AnalyticsView {
// Plain buttons preserve the navigation actions' independent disabled states. Keep the
// divider inside their group so it cannot wrap onto a line by itself.
let nav = design::chrome_section(cx)
// Prev/next and the current-period readout are navigation chrome, not data.
.font_family(design::ui_font())
.child(design::chrome_divider(cx, p))
.child(nav_btn(
"cal-prev",
Expand All @@ -620,6 +622,11 @@ impl AnalyticsView {
))
.child(
div()
// The prev/next buttons around it are chrome, but this readout is the current
// PERIOD -- a date, which the rule keeps mono. The grid below it renders its
// dates mono too, and a header in the other face would disagree with the very
// cells it labels.
.font_family(design::mono())
.text_size(design::t_body(cx))
.font_weight(FontWeight::SEMIBOLD)
.text_color(moon(p.text))
Expand Down Expand Up @@ -657,6 +664,7 @@ impl AnalyticsView {
div()
.min_w_0()
.truncate()
.font_family(design::ui_font())
.text_size(design::t_title(cx))
.font_weight(FontWeight::SEMIBOLD)
.text_color(moon(p.text))
Expand Down
1 change: 1 addition & 0 deletions crates/moon-ui-gpui/src/analytics/profit_monitor/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1537,6 +1537,7 @@ fn auto_status(
.id("profit-monitor-auto-status")
.flex_none()
.gap(design::ui_px(cx, 6.0))
.font_family(design::ui_font())
.text_size(design::t_caption(cx))
.text_color(moon(palette.text_muted))
.tooltip(crate::panels::common::text_tooltip(label.clone()))
Expand Down
3 changes: 3 additions & 0 deletions crates/moon-ui-gpui/src/analytics/profit_monitor/settings.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -447,9 +447,12 @@ fn settings_content(
cx: &App,
) -> AnyElement {
// Chrome belongs to MoonPopover; a second surface here would double the popup's background.
// Every title, caption, and checkbox label here is prose, so the popup flips to the UI face
// on its own root rather than inheriting the monitor root's mono.
v_flex()
.id("profit-monitor-settings-popup")
.w_full()
.font_family(design::ui_font())
.gap(design::ui_px(cx, 8.0))
.child(
h_flex()
Expand Down
4 changes: 4 additions & 0 deletions crates/moon-ui-gpui/src/analytics/profit_monitor/table.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ pub(super) fn centered_message(message: String, palette: MoonPalette, cx: &App)
.flex()
.items_center()
.justify_center()
.font_family(design::ui_font())
.text_color(moon(palette.text_muted))
.text_size(design::t_body(cx))
.child(message)
Expand All @@ -84,6 +85,7 @@ pub(super) fn centered_alert(title: String, detail: String, cx: &App) -> AnyElem
.items_center()
.justify_center()
.px(design::ui_px(cx, 20.0))
.font_family(design::ui_font())
.child(MoonAlert::error("profit-monitor-error", detail).title(title))
.into_any_element()
}
Expand Down Expand Up @@ -151,12 +153,14 @@ pub(super) fn split_body(
.text_align(TextAlign::Center)
.child(
div()
.font_family(design::ui_font())
.text_color(moon(palette.text))
.child(t!("profit_monitor.split_title").to_string()),
)
.child(
div()
.max_w(design::ui_px(cx, 560.0))
.font_family(design::ui_font())
.text_color(moon(palette.text_muted))
.child(t!("profit_monitor.split_detail").to_string()),
)
Expand Down
1 change: 1 addition & 0 deletions crates/moon-ui-gpui/src/analytics/render.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ impl Render for AnalyticsView {
.bg(moon(p.panel_high))
.border_1()
.border_color(moon(p.border))
.font_family(design::ui_font())
.text_size(design::t_body(cx))
.text_color(moon(p.text_soft))
.child(t!("common.loading").to_string()),
Expand Down
5 changes: 5 additions & 0 deletions crates/moon-ui-gpui/src/analytics/summary/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -679,6 +679,7 @@ fn kpi(
.border_color(moon(p.border))
.child(
div()
.font_family(design::ui_font())
.text_size(design::t_caption(cx))
.text_color(moon(p.text_soft))
.child(label.to_string()),
Expand Down Expand Up @@ -721,6 +722,7 @@ fn chart_card_ex(
.flex_1()
.min_w_0()
.truncate()
.font_family(design::ui_font())
.text_size(design::t_title(cx))
.font_weight(FontWeight::SEMIBOLD)
.child(title),
Expand All @@ -744,6 +746,7 @@ fn chart_card_ex(
.child(head)
.child(
div()
.font_family(design::ui_font())
.text_size(design::t_caption(cx))
.text_color(moon(p.text_muted))
.mb(design::ui_px(cx, 6.0))
Expand Down Expand Up @@ -874,6 +877,7 @@ fn top_card(
div()
.px(design::ui_px(cx, 12.0))
.py(design::ui_px(cx, 8.0))
.font_family(design::ui_font())
.text_size(design::t_title(cx))
.font_weight(FontWeight::SEMIBOLD)
.child(title),
Expand Down Expand Up @@ -1153,6 +1157,7 @@ fn insights_card(d: &Summary, p: MoonPalette, cx: &Context<AnalyticsView>) -> im
div()
.px(design::ui_px(cx, 12.0))
.py(design::ui_px(cx, 8.0))
.font_family(design::ui_font())
.text_size(design::t_title(cx))
.font_weight(FontWeight::SEMIBOLD)
.child(t!("analytics.insights").to_string()),
Expand Down
135 changes: 71 additions & 64 deletions crates/moon-ui-gpui/src/analytics/toolbar.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -452,74 +452,79 @@ impl AnalyticsView {
}
// MoonButton's custom size has no horizontal padding, so give each localized title
// measured breathing room while retaining a useful click target for short labels.
let tab_width = (design::ui_text_width(cx, &title, 10.5, 400.0, true)
let tab_width = (design::ui_text_width(cx, &title, 10.5, 400.0, false)
+ design::ui_value(cx, 20.0))
.max(design::ui_value(cx, 72.0));
// Wrapped in its own font_family: the tab title is a label, while the toolbar row it
// sits in (the analytics root stays mono) later carries the core NAME, which is data.
row = row.child(
MoonButton::new(t.id())
.variant(if on {
MoonButtonVariant::Blue
} else {
MoonButtonVariant::Ghost
})
.size(MoonButtonSize::Custom {
height: 24.0,
radius: design::R_BUTTON_BASE,
font_size: 10.5,
line_height: 13.0,
gap: 5.0,
})
.width(tab_width)
.selected(on)
.label(title)
.on_click(cx.listener(move |this, _, window, cx| {
if this.tab != t {
this.tab = t;
this.backend.update(cx, |b, _| {
b.ui_session.analytics.tab = t;
});
// Each tab remembers its OWN time window: re-sync the
// period bar and the "from"/"to" fields to the active tab.
this.sync_period_pickers(window, cx);
// The new tab's time window differs from the one `data`
// was built for → reload, or the strategy list and the
// summary would show another tab's period. reload() also
// pulls the active tab's secondary data (tuner/profile).
let period_changed = match t {
Tab::Summary => this.active_period() != this.data_period,
Tab::Strategies => {
this.active_period() != this.strategy_data_period
}
Tab::Calendar => false,
};
let base_dirty = match t {
Tab::Summary => this.data_dirty,
Tab::Strategies => this.strategy_dirty,
Tab::Calendar => false,
};
if period_changed {
this.reload(cx);
} else if matches!(t, Tab::Summary | Tab::Strategies) && base_dirty {
// A hidden base view can lag a generation while Calendar alone
// refreshes. Catch it up on entry without destructive scope
// invalidation, which would erase tuner drafts.
this.request_report_refresh(RefreshUrgency::User, true, cx);
} else {
// Tab-entry catch-up uses the report gate so it cannot overlap
// an automatic full-period scan already in flight.
if t == Tab::Strategies {
this.request_axis_if_stale(this.strat_mode, cx);
}
if t == Tab::Calendar
&& (this.cal_days.data().is_none() || this.cal_dirty)
div().font_family(design::ui_font()).child(
MoonButton::new(t.id())
.variant(if on {
MoonButtonVariant::Blue
} else {
MoonButtonVariant::Ghost
})
.size(MoonButtonSize::Custom {
height: 24.0,
radius: design::R_BUTTON_BASE,
font_size: 10.5,
line_height: 13.0,
gap: 5.0,
})
.width(tab_width)
.selected(on)
.label(title)
.on_click(cx.listener(move |this, _, window, cx| {
if this.tab != t {
this.tab = t;
this.backend.update(cx, |b, _| {
b.ui_session.analytics.tab = t;
});
// Each tab remembers its OWN time window: re-sync the
// period bar and the "from"/"to" fields to the active tab.
this.sync_period_pickers(window, cx);
// The new tab's time window differs from the one `data`
// was built for → reload, or the strategy list and the
// summary would show another tab's period. reload() also
// pulls the active tab's secondary data (tuner/profile).
let period_changed = match t {
Tab::Summary => this.active_period() != this.data_period,
Tab::Strategies => {
this.active_period() != this.strategy_data_period
}
Tab::Calendar => false,
};
let base_dirty = match t {
Tab::Summary => this.data_dirty,
Tab::Strategies => this.strategy_dirty,
Tab::Calendar => false,
};
if period_changed {
this.reload(cx);
} else if matches!(t, Tab::Summary | Tab::Strategies) && base_dirty
{
// A hidden base view can lag a generation while Calendar alone
// refreshes. Catch it up on entry without destructive scope
// invalidation, which would erase tuner drafts.
this.request_report_refresh(RefreshUrgency::User, true, cx);
} else {
// Tab-entry catch-up uses the report gate so it cannot overlap
// an automatic full-period scan already in flight.
if t == Tab::Strategies {
this.request_axis_if_stale(this.strat_mode, cx);
}
if t == Tab::Calendar
&& (this.cal_days.data().is_none() || this.cal_dirty)
{
this.request_report_refresh(RefreshUrgency::User, true, cx);
}
}
cx.notify();
}
cx.notify();
}
}))
.render(),
}))
.render(),
),
);
}
// Keep the selector widths and their internal gaps together. One additional gap belongs to
Expand Down Expand Up @@ -863,6 +868,7 @@ impl AnalyticsView {
.whitespace_nowrap()
.child(
div()
.font_family(design::ui_font())
.text_size(design::t_body(cx))
.text_color(moon(p.text_soft))
.child(lbl.to_string()),
Expand Down Expand Up @@ -1225,6 +1231,7 @@ impl AnalyticsView {
.child(
div()
.flex_none()
.font_family(design::ui_font())
.text_size(design::t_caption(cx))
.text_color(moon(p.text_muted))
.child(custom_label.clone()),
Expand All @@ -1241,14 +1248,14 @@ impl AnalyticsView {
// Each `date_field` draws its caption at `design::t_body(cx)`, so measure at the same
// unscaled base rather than a second guessed size.
let date_captions_w =
design::ui_text_width(cx, &from_lbl, design::base_text(cx), 400.0, true)
+ design::ui_text_width(cx, &to_lbl, design::base_text(cx), 400.0, true);
design::ui_text_width(cx, &from_lbl, design::base_text(cx), 400.0, false)
+ design::ui_text_width(cx, &to_lbl, design::base_text(cx), 400.0, false);
// `date_field`'s own `h_flex().gap_1()` between its caption and picker — GPUI's
// `rems(0.25)`, at the window's rem size, which this app never overrides from GPUI's
// default `px(16.)`. One gap per field, not scaled by the Font slider.
let date_field_gaps_w = f32::from(rems(0.25).to_pixels(px(16.0))) * 2.0;
let custom_group_w = 1.0
+ design::ui_text_width(cx, &custom_label, 10.5, 400.0, true)
+ design::ui_text_width(cx, &custom_label, 10.5, 400.0, false)
+ field_w * 2.0
+ date_captions_w
+ date_field_gaps_w
Expand Down
Loading