feat(yahweh-widget-app-header): promover header standard de explorers

Iter 16. Patrón con 4 consumers idénticos: nakui-explorer,
nouser-explorer, minga-explorer, brahman-broker-explorer todos
declaraban un header flex_row + flex_grow(label) + theme_switcher
+ bg(panel) + border-bottom + text_size(14) + padding(16/12).
Ahora es 1 línea.

crates/modules/ui_engine/widgets/app-header/:
- pub fn app_header(cx, label: impl Into<SharedString>) -> impl IntoElement.
- pub fn app_header_with(cx, label_child: impl IntoElement) — variante
  para left side no-text.
- 3 tests #[gpui::test].

Migración 4 consumers:
- Cada uno: bloque de ~13 líneas → 1 línea app_header(cx, text).
- Borra dep yahweh-widget-theme-switcher (incluida vía app-header).
- Reemplaza import.

Ahorro ~50 líneas UI hardcoded. Cambios visuales del header (padding,
border, text_size) en un solo lugar.

Decisión: sidebar header del MetaApp NO se migra — es de sidebar,
no de app top, styling distinto. Diferente patrón → diferente widget.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sergio
2026-05-10 12:40:56 +00:00
parent af7417ce08
commit be3a0e78fc
13 changed files with 183 additions and 69 deletions
@@ -11,7 +11,7 @@ brahman-sidecar = { path = "../../shared/brahman-sidecar" }
yahweh-theme = { path = "../../modules/ui_engine/libs/theme" }
yahweh-widget-banner = { path = "../../modules/ui_engine/widgets/banner" }
yahweh-widget-stat-card = { path = "../../modules/ui_engine/widgets/stat-card" }
yahweh-widget-theme-switcher = { path = "../../modules/ui_engine/widgets/theme-switcher" }
yahweh-widget-app-header = { path = "../../modules/ui_engine/widgets/app-header" }
gpui = { workspace = true }
[[bin]]
@@ -35,7 +35,7 @@ use gpui::{
use yahweh_theme::Theme;
use yahweh_widget_banner::{banner_themed, Banner};
use yahweh_widget_stat_card::stat_card;
use yahweh_widget_theme_switcher::theme_switcher;
use yahweh_widget_app_header::app_header;
const POLL_INTERVAL: Duration = Duration::from_secs(5);
const PROBE_TIMEOUT: Duration = Duration::from_secs(1);
@@ -170,19 +170,8 @@ impl Render for Explorer {
self.last_probe_ms,
);
let header = div()
.flex()
.flex_row()
.items_center()
.px(px(16.))
.py(px(12.))
.bg(theme.bg_panel.clone())
.border_b_1()
.border_color(theme.border)
.text_color(text)
.text_size(px(14.))
.child(div().flex_grow().child(header_text))
.child(theme_switcher(cx));
// Header standard via widget compartido.
let header = app_header(cx, header_text);
// Banner permanente debajo del header con el estado actual.
// Severidad acorde al kind.
+1 -1
View File
@@ -10,7 +10,7 @@ minga-store = { path = "../../modules/semantic_dht/minga-store" }
yahweh-theme = { path = "../../modules/ui_engine/libs/theme" }
yahweh-widget-banner = { path = "../../modules/ui_engine/widgets/banner" }
yahweh-widget-stat-card = { path = "../../modules/ui_engine/widgets/stat-card" }
yahweh-widget-theme-switcher = { path = "../../modules/ui_engine/widgets/theme-switcher" }
yahweh-widget-app-header = { path = "../../modules/ui_engine/widgets/app-header" }
gpui = { workspace = true }
[[bin]]
+3 -14
View File
@@ -34,7 +34,7 @@ use minga_store::PersistentRepo;
use yahweh_theme::Theme;
use yahweh_widget_banner::{banner_themed, Banner};
use yahweh_widget_stat_card::stat_card;
use yahweh_widget_theme_switcher::theme_switcher;
use yahweh_widget_app_header::app_header;
const REFRESH_INTERVAL: Duration = Duration::from_secs(2);
const REPO_DIRNAME: &str = "repo";
@@ -224,19 +224,8 @@ impl Render for Explorer {
None => format!("Buscando repo en {}", self.repo_path.display()),
};
let header = div()
.flex()
.flex_row()
.items_center()
.px(px(16.))
.py(px(12.))
.bg(theme.bg_panel.clone())
.border_b_1()
.border_color(theme.border)
.text_color(text)
.text_size(px(14.))
.child(div().flex_grow().child(header_text))
.child(theme_switcher(cx));
// Header standard via widget compartido.
let header = app_header(cx, header_text);
let error_banner = self.error.as_ref().map(|e| {
banner_themed(cx, Banner::Error, e.clone())
+1 -1
View File
@@ -11,7 +11,7 @@ yahweh-meta-runtime = { path = "../../modules/ui_engine/libs/meta-runtime" }
yahweh-widget-banner = { path = "../../modules/ui_engine/widgets/banner" }
yahweh-widget-card = { path = "../../modules/ui_engine/widgets/card" }
yahweh-theme = { path = "../../modules/ui_engine/libs/theme" }
yahweh-widget-theme-switcher = { path = "../../modules/ui_engine/widgets/theme-switcher" }
yahweh-widget-app-header = { path = "../../modules/ui_engine/widgets/app-header" }
gpui = { workspace = true }
serde_json = { workspace = true }
uuid = { workspace = true, features = ["serde"] }
+5 -17
View File
@@ -33,8 +33,8 @@ use nakui_core::event_log::{EventLog, LogEntry};
use yahweh_meta_runtime::{preview_value, short_hash, short_uuid};
use yahweh_theme::Theme;
use yahweh_widget_banner::{banner_themed, Banner};
use yahweh_widget_app_header::app_header;
use yahweh_widget_card::card_themed;
use yahweh_widget_theme_switcher::theme_switcher;
const REFRESH_INTERVAL: Duration = Duration::from_secs(2);
@@ -168,22 +168,10 @@ impl Render for Explorer {
self.last_load_ms,
);
// Header con título a la izquierda + theme switcher a la
// derecha. flex_row + flex_grow del label empuja el switcher
// al borde.
let header = div()
.flex()
.flex_row()
.items_center()
.px(px(16.))
.py(px(12.))
.bg(theme.bg_panel.clone())
.border_b_1()
.border_color(theme.border)
.text_color(text)
.text_size(px(14.))
.child(div().flex_grow().child(header_text))
.child(theme_switcher(cx));
// Header standard via widget compartido yahweh-widget-app-header
// (label flex_grow + theme switcher derecha + bg panel + border
// bottom + text styling consistente).
let header = app_header(cx, header_text);
let breakdown_line = if top_breakdown.is_empty() {
String::new()
+1 -1
View File
@@ -12,7 +12,7 @@ nouser-card = { path = "../../modules/nouser/card" }
yahweh-theme = { path = "../../modules/ui_engine/libs/theme" }
yahweh-widget-banner = { path = "../../modules/ui_engine/widgets/banner" }
yahweh-widget-card = { path = "../../modules/ui_engine/widgets/card" }
yahweh-widget-theme-switcher = { path = "../../modules/ui_engine/widgets/theme-switcher" }
yahweh-widget-app-header = { path = "../../modules/ui_engine/widgets/app-header" }
gpui = { workspace = true }
[[bin]]
+3 -16
View File
@@ -32,7 +32,7 @@ use nouser_card::Lens;
use yahweh_theme::Theme;
use yahweh_widget_banner::{banner_themed, Banner};
use yahweh_widget_card::card_themed;
use yahweh_widget_theme_switcher::theme_switcher;
use yahweh_widget_app_header::app_header;
const REFRESH_INTERVAL: Duration = Duration::from_secs(2);
const DISCOVERY_TIMEOUT: Duration = Duration::from_secs(3);
@@ -226,21 +226,8 @@ impl Render for Explorer {
_ => "Buscando daemon nouser vía brahman-broker…".to_string(),
};
// Header con título a la izquierda + theme switcher a la
// derecha (mismo pattern que nakui-explorer).
let header = div()
.flex()
.flex_row()
.items_center()
.px(px(16.))
.py(px(12.))
.bg(theme.bg_panel.clone())
.border_b_1()
.border_color(theme.border)
.text_color(text)
.text_size(px(14.))
.child(div().flex_grow().child(header_text))
.child(theme_switcher(cx));
// Header standard via widget compartido.
let header = app_header(cx, header_text);
let error_banner = self.error.as_ref().map(|e| {
banner_themed(cx, Banner::Error, e.clone())
@@ -0,0 +1,14 @@
[package]
name = "yahweh-widget-app-header"
version.workspace = true
edition.workspace = true
license.workspace = true
description = "Yahweh — widget app-header: tira superior con label flex_grow + theme switcher a la derecha + bg panel + border bottom. Patrón compartido por las apps explorer del repo."
[dependencies]
gpui = { workspace = true }
yahweh-theme = { path = "../../libs/theme" }
yahweh-widget-theme-switcher = { path = "../theme-switcher" }
[dev-dependencies]
gpui = { workspace = true, features = ["test-support"] }
@@ -0,0 +1,96 @@
//! `yahweh-widget-app-header` — tira superior estándar de las apps
//! del repo.
//!
//! Compone:
//! - Label dinámico a la izquierda (flex_grow).
//! - [`theme_switcher`] a la derecha.
//! - bg = `theme.bg_panel`, text = `theme.fg_text`,
//! border-bottom = `theme.border`.
//! - Padding 16/12, text_size 14.
//!
//! Patrón emergente: `nakui-explorer`, `nouser-explorer`,
//! `minga-explorer`, `brahman-broker-explorer` declaran headers
//! idénticos sólo cambiando el label. Ahora es 1 línea.
//!
//! # Ejemplo
//!
//! ```ignore
//! use yahweh_widget_app_header::app_header;
//!
//! let header = app_header(cx, format!("Log: {} · {} entries", path, n));
//! div().child(header).child(body)
//! ```
#![forbid(unsafe_code)]
use gpui::{div, prelude::*, px, App, IntoElement, SharedString};
use yahweh_theme::Theme;
use yahweh_widget_theme_switcher::theme_switcher;
/// Construye el header standard. Lee `Theme::global(cx)` para los
/// colors; falla si no hay theme instalado (panic propagado de
/// `Theme::global`).
///
/// `label` es texto plano. Para labels más ricos (ej. icon + text,
/// múltiples spans), usar [`app_header_with`] que acepta
/// cualquier child element.
pub fn app_header(cx: &mut App, label: impl Into<SharedString>) -> impl IntoElement {
let label: SharedString = label.into();
app_header_with(cx, div().child(label))
}
/// Variante de [`app_header`] que acepta cualquier `IntoElement`
/// como contenido del lado izquierdo. El widget envuelve el child
/// en un `div().flex_grow()` para que el switcher quede pegado a
/// la derecha.
pub fn app_header_with(cx: &mut App, label_child: impl IntoElement) -> impl IntoElement {
let theme = Theme::global(cx).clone();
div()
.flex()
.flex_row()
.items_center()
.px(px(16.))
.py(px(12.))
.bg(theme.bg_panel.clone())
.border_b_1()
.border_color(theme.border)
.text_color(theme.fg_text)
.text_size(px(14.))
.child(div().flex_grow().child(label_child))
.child(theme_switcher(cx))
}
#[cfg(test)]
mod tests {
use super::*;
use gpui::TestAppContext;
#[gpui::test]
fn app_header_constructs_with_string_label(cx: &mut TestAppContext) {
cx.update(|cx| {
Theme::install_default(cx);
let _h = app_header(cx, "Test header");
});
}
#[gpui::test]
fn app_header_with_accepts_arbitrary_child(cx: &mut TestAppContext) {
cx.update(|cx| {
Theme::install_default(cx);
let _h = app_header_with(
cx,
div().child(SharedString::from("Custom child")),
);
});
}
#[gpui::test]
fn app_header_label_accepts_owned_or_borrowed(cx: &mut TestAppContext) {
cx.update(|cx| {
Theme::install_default(cx);
let _ = app_header(cx, "literal");
let _ = app_header(cx, "owned".to_string());
let _ = app_header(cx, format!("formatted {}", 42));
});
}
}