fixed long nested vars in the ui

This commit is contained in:
2026-03-17 09:15:21 +01:00
parent 6c8fc7268b
commit 68cd6543b3
11 changed files with 200 additions and 71 deletions

View File

@@ -1,11 +1,11 @@
use crate::app::{App, Mode};
use crate::config::Config;
use ratatui::{
Frame,
layout::{Constraint, Direction, Layout},
style::{Modifier, Style},
text::{Line, Span},
widgets::{Block, BorderType, Borders, List, ListItem, ListState, Paragraph},
Frame,
};
/// Renders the main application interface using ratatui.
@@ -43,15 +43,6 @@ pub fn draw(f: &mut Frame, app: &mut App, config: &Config) {
])
.split(outer_layout[1]);
// Calculate alignment for the key-value separator based on the longest key.
let max_key_len = app
.vars
.iter()
.map(|v| v.key.len())
.max()
.unwrap_or(20)
.min(40);
// Build the interactive list of configuration variables.
let items: Vec<ListItem> = app
.vars
@@ -81,14 +72,25 @@ pub fn draw(f: &mut Frame, app: &mut App, config: &Config) {
Style::default().fg(theme.text())
};
let line = Line::from(vec![
Span::styled(
format!(" {:<width$} ", var.key, width = max_key_len),
key_style,
),
Span::styled("", Style::default().fg(theme.surface1())),
Span::styled(format!(" {} ", val), value_style),
]);
// Path styling for nested keys (e.g., a.b.c)
let mut key_spans = Vec::new();
if let Some(last_dot) = var.key.rfind('.') {
let path = &var.key[..=last_dot];
let key = &var.key[last_dot + 1..];
let path_style = if is_selected {
Style::default()
.fg(theme.crust())
.add_modifier(Modifier::DIM)
} else {
Style::default().fg(theme.surface1())
};
key_spans.push(Span::styled(path, path_style));
key_spans.push(Span::styled(key, key_style));
} else {
key_spans.push(Span::styled(&var.key, key_style));
}
let item_style = if is_selected {
Style::default().bg(theme.blue())
@@ -96,7 +98,25 @@ pub fn draw(f: &mut Frame, app: &mut App, config: &Config) {
Style::default().fg(theme.text())
};
ListItem::new(line).style(item_style)
// Two-line layout for better readability:
// Line 1: Key (path.key)
// Line 2: Value
let lines = vec![
Line::from(key_spans),
Line::from(vec![
Span::styled(
" └─ ",
if is_selected {
Style::default().fg(theme.crust())
} else {
Style::default().fg(theme.surface1())
},
),
Span::styled(val, value_style),
]),
];
ListItem::new(lines).style(item_style)
})
.collect();
@@ -105,7 +125,11 @@ pub fn draw(f: &mut Frame, app: &mut App, config: &Config) {
.borders(Borders::ALL)
.border_type(BorderType::Rounded)
.title(" Config Variables ")
.title_style(Style::default().fg(theme.mauve()).add_modifier(Modifier::BOLD))
.title_style(
Style::default()
.fg(theme.mauve())
.add_modifier(Modifier::BOLD),
)
.border_style(Style::default().fg(theme.surface1())),
);
@@ -140,7 +164,11 @@ pub fn draw(f: &mut Frame, app: &mut App, config: &Config) {
.borders(Borders::ALL)
.border_type(BorderType::Rounded)
.title(input_title)
.title_style(Style::default().fg(theme.peach()).add_modifier(Modifier::BOLD))
.title_style(
Style::default()
.fg(theme.peach())
.add_modifier(Modifier::BOLD),
)
.border_style(Style::default().fg(input_border_color)),
);
f.render_widget(input, chunks[2]);
@@ -171,10 +199,13 @@ pub fn draw(f: &mut Frame, app: &mut App, config: &Config) {
),
};
let status_msg = app.status_message.as_deref().unwrap_or_else(|| match app.mode {
Mode::Normal => " navigation | i: edit | :w: save | :q: quit ",
Mode::Insert => " Esc: back to normal | Enter: commit ",
});
let status_msg = app
.status_message
.as_deref()
.unwrap_or_else(|| match app.mode {
Mode::Normal => " navigation | i: edit | :w: save | :q: quit ",
Mode::Insert => " Esc: back to normal | Enter: commit ",
});
let status_line = Line::from(vec![
Span::styled(mode_str, mode_style),