blaeck 0.4.0

A component-based terminal UI framework for Rust
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

use blaeck::prelude::*;

const SPINNERS: [&str; 10] = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];

/// Live system status dashboard — spinners, animated CPU/mem, progress bar.
pub fn build_ui_with_timer(timer: &AnimationTimer) -> Element {
    let elapsed = timer.elapsed_ms() as usize;
    let spinner = SPINNERS[(elapsed / 80) % SPINNERS.len()];

    // Animate CPU values
    let cpu1 = 2.0 + ((elapsed as f32 / 200.0).sin() * 1.5);
    let cpu2 = 5.0 + ((elapsed as f32 / 150.0).cos() * 2.0);
    let mem1 = 128 + ((elapsed / 500) % 20) as i32 - 10;
    let mem2 = 512 + ((elapsed / 400) % 30) as i32 - 15;

    // Animate progress from 60% to 100%
    let progress = 60 + ((elapsed / 100) % 41).min(40);
    let filled = progress / 10;
    let empty = 10 - filled;
    let progress_bar = format!(
        "[{}{}] {}%",
        "█".repeat(filled),
        "░".repeat(empty),
        progress
    );

    element! {
        Box(padding: 1.0, flex_direction: FlexDirection::Column, gap: 1.0) {
            // System Status section
            Box(border_style: BorderStyle::Round, flex_direction: FlexDirection::Column, padding: 1.0) {
                Box(flex_direction: FlexDirection::Row, margin_top: -2.0, margin_left: 1.0) {
                    Text(content: " System Status ", bold: true)
                }
                Box(flex_direction: FlexDirection::Row, gap: 2.0) {
                    Text(content: "●", color: Color::Green)
                    Text(content: "API Server")
                    Text(content: "running", color: Color::Green)
                    Text(content: format!("cpu {:.1}%", cpu1), dim: true)
                    Text(content: format!("mem {}MB", mem1), dim: true)
                }
                Box(flex_direction: FlexDirection::Row, gap: 2.0) {
                    Text(content: "●", color: Color::Green)
                    Text(content: "Database")
                    Text(content: "running", color: Color::Green)
                    Text(content: format!("cpu {:.1}%", cpu2), dim: true)
                    Text(content: format!("mem {}MB", mem2), dim: true)
                }
                Box(flex_direction: FlexDirection::Row, gap: 2.0) {
                    Text(content: "○", color: Color::Red)
                    Text(content: "Cache")
                    Text(content: "stopped", color: Color::Red)
                }
            }

            // Tasks and Progress section
            Box(flex_direction: FlexDirection::Row, gap: 4.0) {
                Box(flex_direction: FlexDirection::Column) {
                    Text(content: "Tasks", bold: true)
                    Box(flex_direction: FlexDirection::Row) {
                        Text(content: "├── ", dim: true)
                        Text(content: "Downloading assets")
                    }
                    Box(flex_direction: FlexDirection::Row) {
                        Text(content: "├── ", dim: true)
                        Text(content: "Compiling")
                    }
                    Box(flex_direction: FlexDirection::Row) {
                        Text(content: "└── ", dim: true)
                        Text(content: spinner, color: Color::Cyan)
                        Text(content: " Running tests...")
                    }
                }
                Box(flex_direction: FlexDirection::Column) {
                    Text(content: "Progress", bold: true)
                    Text(content: progress_bar.clone(), color: Color::Yellow)
                    Text(content: "[██████████] done", color: Color::Green)
                }
            }

            // File tree section
            Box(flex_direction: FlexDirection::Column) {
                Box(flex_direction: FlexDirection::Row) {
                    Text(content: "│ ", color: Color::Blue)
                    Text(content: "src/", bold: true)
                }
                Box(flex_direction: FlexDirection::Row) {
                    Text(content: "│ ", color: Color::Blue)
                    Text(content: "├── ", dim: true)
                    Text(content: "main.rs")
                }
                Box(flex_direction: FlexDirection::Row) {
                    Text(content: "│ ", color: Color::Blue)
                    Text(content: "└── ", dim: true)
                    Text(content: "components/", bold: true)
                }
                Box(flex_direction: FlexDirection::Row) {
                    Text(content: "│ ", color: Color::Blue)
                    Text(content: "    ├── ", dim: true)
                    Text(content: "mod.rs")
                }
                Box(flex_direction: FlexDirection::Row) {
                    Text(content: "│ ", color: Color::Blue)
                    Text(content: "    └── ", dim: true)
                    Text(content: "button.rs")
                }
            }

            // Key hints
            Box(flex_direction: FlexDirection::Row, gap: 2.0) {
                Text(content: "[Tab]", bold: true)
                Text(content: "Next", dim: true)
                Text(content: "[Enter]", bold: true)
                Text(content: "Select", dim: true)
                Text(content: "[q]", bold: true)
                Text(content: "Quit", dim: true)
            }
        }
    }
}