valknar/llmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

streamline ui (#1733)

Browse Source 
Simplify and improve many UI elements.
* Remove all-around borders in most places. These interact badly with
terminal resizing and look heavy. Prefer left-side-only borders.
* Make the viewport adjust to the size of its contents.
* <kbd>/</kbd> and <kbd>@</kbd> autocomplete boxes appear below the
prompt, instead of above it.
* Restyle the keyboard shortcut hints & move them to the left.
* Restyle the approval dialog.
* Use synchronized rendering to avoid flashing during rerenders.


https://github.com/user-attachments/assets/96f044af-283b-411c-b7fc-5e6b8a433c20

<img width="1117" height="858" alt="Screenshot 2025-07-30 at 5 29 20 PM"
src="https://github.com/user-attachments/assets/0cc0af77-8396-429b-b6ee-9feaaccdbee7"
/>
This commit is contained in:
Jeremy Rose
2025-07-31 00:43:21 -07:00
committed by GitHub
parent defeafb279
commit d86270696e
18 changed files with 232 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
codex-rs/tui/src/bottom_pane/command_popup.rs
View File

@@ -3,9 +3,9 @@ use ratatui::layout::Rect;
use ratatui::style::Color;
use ratatui::style::Style;
use ratatui::style::Stylize;
use ratatui::widgets::Block;
use ratatui::widgets::BorderType;
use ratatui::widgets::Borders;
use ratatui::symbols::border::QUADRANT_LEFT_HALF;
use ratatui::text::Line;
use ratatui::text::Span;
use ratatui::widgets::Cell;
use ratatui::widgets::Row;
use ratatui::widgets::Table;
@@ -72,11 +72,7 @@ impl CommandPopup {
/// rows required to show **at most** `MAX_POPUP_ROWS` commands plus the
/// table/border overhead (one line at the top and one at the bottom).
pub(crate) fn calculate_required_height(&self) -> u16 {
let matches = self.filtered_commands();
let row_count = matches.len().clamp(1, MAX_POPUP_ROWS) as u16;
// Account for the border added by the Block that wraps the table.
// 2 = one line at the top, one at the bottom.
row_count + 2
self.filtered_commands().len().clamp(1, MAX_POPUP_ROWS) as u16
}
/// Return the list of commands that match the current filter. Matching is
@@ -158,18 +154,19 @@ impl WidgetRef for CommandPopup {
let default_style = Style::default();
let command_style = Style::default().fg(Color::LightBlue);
for (idx, cmd) in visible_matches.iter().enumerate() {
let (cmd_style, desc_style) = if Some(idx) == self.selected_idx {
(
command_style.bg(Color::DarkGray),
default_style.bg(Color::DarkGray),
)
} else {
(command_style, default_style)
};
rows.push(Row::new(vec![
Cell::from(format!("/{}", cmd.command())).style(cmd_style),
Cell::from(cmd.description().to_string()).style(desc_style),
Cell::from(Line::from(vec![
if Some(idx) == self.selected_idx {
Span::styled(
"›",
Style::default().bg(Color::DarkGray).fg(Color::LightCyan),
)
} else {
Span::styled(QUADRANT_LEFT_HALF, Style::default().fg(Color::DarkGray))
},
Span::styled(format!("/{}", cmd.command()), command_style),
])),
Cell::from(cmd.description().to_string()).style(default_style),
]));
}
}
@@ -180,12 +177,13 @@ impl WidgetRef for CommandPopup {
rows,
[Constraint::Length(FIRST_COLUMN_WIDTH), Constraint::Min(10)],
)
.column_spacing(0)
.block(
Block::default()
.borders(Borders::ALL)
.border_type(BorderType::Rounded),
);
.column_spacing(0);
// .block(
// Block::default()
// .borders(Borders::LEFT)
// .border_type(BorderType::QuadrantOutside)
// .border_style(Style::default().fg(Color::DarkGray)),
// );
table.render(area, buf);
}