Testing ratatui

src/ui/components/header.rs

@@ -0,0 +1,30 @@
+use crate::i18n::t;
+use crate::ui::dashboard::model::DashboardViewState;
+use ratatui::{
+    Frame,
+    layout::{Alignment, Rect},
+    style::{Color, Style, Stylize},
+    text::{Line, Span},
+    widgets::{Block, Borders, Paragraph},
+};
+
+pub fn render_header(frame: &mut Frame, area: Rect, state: &DashboardViewState) {
+    let title = if state.is_loading {
+        t("loading").to_string()
+    } else {
+        format!("{} - {}", t("dashboard-heaser"), state.title)
+    };
+
+    let header = Paragraph::new(Line::from(vec![
+        Span::styled("📈 ", Style::default().fg(Color::Cyan)),
+        Span::styled(title, Style::default().fg(Color::White).bold()),
+    ]))
+    .alignment(Alignment::Center)
+    .block(
+        Block::default()
+            .borders(Borders::ALL)
+            .style(Style::default().fg(Color::Blue)),
+    );
+
+    frame.render_widget(header, area);
+}

src/ui/components/mod.rs

@@ -0,0 +1,5 @@
+pub mod header;
+pub mod monitor_list;
+
+pub use header::render_header;
+pub use monitor_list::render_monitor_list;

src/ui/components/monitor_list.rs

@@ -0,0 +1,71 @@
+use crate::i18n::t;
+use crate::ui::dashboard::model::{DashboardViewState, MonitorStatus};
+use ratatui::style::Modifier;
+use ratatui::widgets::{List, ListItem, ListState};
+use ratatui::{
+    Frame,
+    layout::{Alignment, Rect},
+    style::{Color, Style, Stylize},
+    text::{Line, Span},
+    widgets::{Block, Borders, Paragraph},
+};
+
+pub fn render_monitor_list(
+    frame: &mut Frame,
+    area: Rect,
+    state: &DashboardViewState,
+    list_state: &mut ListState,
+) {
+    let block = Block::default()
+        .title(t("monitors"))
+        .borders(Borders::ALL)
+        .style(Style::default().fg(Color::Blue));
+
+    let items: Vec<ListItem> = state
+        .monitors
+        .iter()
+        .map(|monitor| {
+            let status_icon = match monitor.status {
+                MonitorStatus::Up => "✅",
+                MonitorStatus::Down => "❌",
+                MonitorStatus::Unknown => "?",
+            };
+
+            let status_color = match monitor.status {
+                MonitorStatus::Up => Color::Green,
+                MonitorStatus::Down => Color::Red,
+                MonitorStatus::Unknown => Color::Yellow,
+            };
+
+            let line = Line::from(vec![
+                Span::styled(
+                    format!("{} ", status_icon),
+                    Style::default().fg(status_color),
+                ),
+                Span::styled(
+                    &monitor.name,
+                    Style::default()
+                        .fg(Color::White)
+                        .add_modifier(Modifier::BOLD),
+                ),
+                Span::styled(
+                    format!(" | {}ms", monitor.response_time),
+                    Style::default().fg(Color::Cyan),
+                ),
+                Span::styled(
+                    format!(" | {}%", monitor.uptime_24h),
+                    Style::default().fg(Color::Magenta),
+                ),
+            ]);
+
+            ListItem::new(line)
+        })
+        .collect();
+
+    let list = List::new(items)
+        .block(block)
+        .highlight_style(Style::default().add_modifier(Modifier::REVERSED))
+        .highlight_symbol(">> ");
+
+    frame.render_stateful_widget(list, area, list_state);
+}