feat(yahweh-widget-banner): widget compartido para toasts/errores cross-app

Patrón visual común a yahweh-widget-meta-form (toast success +
error banner) y nakui-explorer (error banner): div con bg + text
colored según severidad. Antes duplicado con colores hardcoded en
cada consumer.

Crate nuevo crates/modules/ui_engine/widgets/banner:
- pub enum Banner { Info, Success, Warning, Error } con bg()/fg()
  hardcoded por variant.
- pub fn banner(kind, message) -> Div: padding/text_size defaults;
  caller compone con .child()/.px()/.on_click()/etc.
- 2 tests sanity (no color collisions).

Migración:
- yahweh-widget-meta-form: 12 líneas hardcoded → 2 llamadas a
  banner().
- nakui-explorer: error banner usa banner() + override de
  padding custom del header.

Tests stack: 109 → 111 (+2). Cada crate compila individualmente.

Próximo natural: confirm_delete_banner (Warning + botones) puede
extraerse como modal-banner cuando emerja segundo consumer.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sergio
2026-05-10 09:57:32 +00:00
parent 3e4278d766
commit 715cf6be03
9 changed files with 213 additions and 27 deletions
+9 -9
View File
@@ -31,6 +31,7 @@ use gpui::{
};
use nakui_core::event_log::{EventLog, LogEntry};
use yahweh_meta_runtime::{preview_value, short_hash, short_uuid};
use yahweh_widget_banner::{banner, Banner};
const REFRESH_INTERVAL: Duration = Duration::from_secs(2);
@@ -188,15 +189,14 @@ impl Render for Explorer {
.child(breakdown_line)
});
let error_banner = self.error.as_ref().map(|e| {
div()
.px(px(16.))
.py(px(8.))
.bg(rgb(0x4a2020))
.text_color(rgb(0xffd0d0))
.text_size(px(12.))
.child(e.clone())
});
// Banner de error vía widget compartido yahweh-widget-banner.
// Padding extra (px 16/8) por convención del explorer; el
// default del widget es 12/6 — el override mantiene la
// visual del header.
let error_banner = self
.error
.as_ref()
.map(|e| banner(Banner::Error, e.clone()).px(px(16.)).py(px(8.)).text_size(px(12.)));
// Renderea las últimas N entries (la timeline crece hacia abajo
// en append-order; mostramos las más recientes primero para