ui-cli 0.3.0

A CLI to add components to your app.
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

use ratatui::Frame;
use ratatui::layout::{Constraint, Layout, Rect};
use ratatui::style::{Color, Style};
use ratatui::text::Span;
use ratatui::widgets::{Block, List, ListItem, Scrollbar, ScrollbarOrientation};

use super::super::app::App;
use super::super::widgets::checked_popup::draw_checked_popup;
use super::super::widgets::detail_panel::draw_detail_panel;
use super::super::widgets::helpers::{filter_items, get_item_at_visual_index, get_selected_item};
use super::super::widgets::search_input::draw_search_input;

pub fn draw_tab_components(frame: &mut Frame, app: &mut App, area: Rect) {
    // Horizontal split: sidenav on left, detail on right
    let horizontal_chunks = Layout::horizontal([Constraint::Percentage(35), Constraint::Percentage(65)]).split(area);

    // Split left panel vertically: search input at top, list below
    let left_chunks = Layout::vertical([Constraint::Length(3), Constraint::Min(0)]).split(horizontal_chunks[0]);

    // Filter components based on search query (prefix matching)
    let components_refs: Vec<&str> = app.components.iter().map(|s| s.as_str()).collect();
    let filtered_components = filter_items(&components_refs, &app.components_search_query);

    // Ensure scroll doesn't exceed filtered list bounds
    if !filtered_components.is_empty() && app.components_scroll >= filtered_components.len() {
        app.components_scroll = filtered_components.len().saturating_sub(1);
    }

    // Update scrollbar state with filtered content length
    app.components_scroll_state = app.components_scroll_state.content_length(filtered_components.len());

    // Left side: Component list
    let items: Vec<ListItem> = filtered_components
        .iter()
        .map(|component| {
            let is_checked = app.components_checked.contains(*component);
            let (checkbox, color) = if is_checked { ("☑", Color::Green) } else { ("☐", Color::DarkGray) };
            ListItem::new(Span::styled(format!("  {} {}", checkbox, component), Style::default().fg(color)))
        })
        .collect();

    let checked_count = app.components_checked.len();
    let title = if app.components_search_query.is_empty() {
        if checked_count > 0 {
            format!("Components ({}) - {} Selected", app.components.len(), checked_count)
        } else {
            format!("Components ({})", app.components.len())
        }
    } else if checked_count > 0 {
        format!("Components ({}/{}) - {} Selected", filtered_components.len(), app.components.len(), checked_count)
    } else {
        format!("Components ({}/{})", filtered_components.len(), app.components.len())
    };

    let list =
        List::new(items).block(Block::bordered().title(title)).highlight_style(Style::default().bg(Color::DarkGray));

    // Update list state
    if !filtered_components.is_empty() {
        app.components_list_state.select(Some(app.components_scroll));
    }

    // Draw search input in left panel
    draw_search_input(frame, &app.components_search_query, app.components_search_active, left_chunks[0]);

    // Render list in left panel
    frame.render_stateful_widget(list, left_chunks[1], &mut app.components_list_state);

    // Render scrollbar in left panel
    frame.render_stateful_widget(
        Scrollbar::new(ScrollbarOrientation::VerticalRight).begin_symbol(Some("↑")).end_symbol(Some("↓")),
        left_chunks[1],
        &mut app.components_scroll_state,
    );

    // Right side: Detail panel
    let selected_component = if !filtered_components.is_empty() && app.components_scroll < filtered_components.len() {
        Some(filtered_components[app.components_scroll])
    } else {
        None
    };
    draw_detail_panel(frame, selected_component, app.components_checked.len(), "component", horizontal_chunks[1]);

    // Render popup if show_popup is true and there are checked components
    if app.show_popup && !app.components_checked.is_empty() {
        let mut checked_list: Vec<String> = app.components_checked.iter().cloned().collect();
        checked_list.sort();
        draw_checked_popup(frame, &checked_list, "Checked Components", "component", Color::Green, area, 70, 60);
    }
}

/* ========================================================== */
/*                     ✨ FUNCTIONS ✨                        */
/* ========================================================== */

pub fn get_selected_component(app: &App) -> Option<String> {
    let components_refs: Vec<&str> = app.components.iter().map(|s| s.as_str()).collect();
    get_selected_item(&components_refs, app.components_scroll, &app.components_search_query).map(|s| s.to_string())
}

pub fn get_component_at_visual_index(app: &App, visual_index: usize) -> Option<String> {
    let components_refs: Vec<&str> = app.components.iter().map(|s| s.as_str()).collect();
    get_item_at_visual_index(&components_refs, visual_index, &app.components_search_query).map(|s| s.to_string())
}