use super::{PICKER_MODAL, draw_modal_panel, modal_text_area};
use crate::tui::state::{MissionControlState, ThemeSaveState};
use ratatui::{
Frame,
layout::Rect,
text::{Line, Span},
widgets::{List, ListItem, Paragraph},
};
use unicode_width::UnicodeWidthStr;
use unicode_segmentation::UnicodeSegmentation;
const THEME_PICKER_FOOTER_ROWS: u16 = 2;
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
struct ThemePickerGeometry {
query: Rect,
list: Rect,
footer: Rect,
}
fn theme_picker_geometry(area: Rect) -> Option<ThemePickerGeometry> {
let inner = modal_text_area(area, "Themes", PICKER_MODAL)?;
let query = Rect::new(inner.x, inner.y, inner.width, inner.height.min(1));
let list_y = inner.y.saturating_add(1);
let footer_y = inner.bottom().saturating_sub(THEME_PICKER_FOOTER_ROWS);
let list_bottom = footer_y.max(list_y);
let list = Rect::new(
inner.x,
list_y,
inner.width,
list_bottom.saturating_sub(list_y),
);
let footer = Rect::new(
inner.x,
footer_y,
inner.width,
inner.height.min(THEME_PICKER_FOOTER_ROWS),
);
Some(ThemePickerGeometry {
query,
list,
footer,
})
}
pub(crate) fn theme_picker_query_visible(area: Rect) -> bool {
theme_picker_geometry(area)
.is_some_and(|geometry| geometry.query.width > 0 && geometry.query.height > 0)
}
pub(crate) fn theme_picker_list_area(area: Rect) -> Option<Rect> {
theme_picker_geometry(area)
.and_then(|geometry| (geometry.list.height > 0).then_some(geometry.list))
}
fn display_query(query: &str) -> &str {
query
}
fn query_window(query: &str, cursor: usize, width: usize) -> (&str, usize) {
let cursor = cursor.min(query.len());
let mut start = cursor;
let mut used = 0;
for (index, grapheme) in query[..cursor].grapheme_indices(true).rev() {
let next = UnicodeWidthStr::width(grapheme);
if used + next > width.saturating_sub(1) {
break;
}
used += next;
start = index;
}
(&query[start..], used)
}
pub(in crate::tui::render) fn draw_theme_picker(
frame: &mut Frame<'_>,
area: Rect,
state: &MissionControlState,
) {
let Some(picker) = &state.modals.theme_picker else {
return;
};
let Some(inner) = draw_modal_panel(frame, area, "Themes", PICKER_MODAL, state.theme) else {
return;
};
let Some(geometry) = theme_picker_geometry(area) else {
return;
};
if inner.width == 0 || inner.height == 0 {
return;
}
let query = display_query(&picker.query);
let query_width = geometry.query.width.saturating_sub(8) as usize;
let (visible_query, cursor) = query_window(query, picker.query_cursor, query_width);
frame.render_widget(
Paragraph::new(Line::from(vec![
Span::raw("Search: "),
Span::raw(visible_query),
])),
geometry.query,
);
let content = geometry.list;
if (picker.loading || picker.error.is_some()) && picker.entries.is_empty() {
let message = if picker.loading {
"Loading themes…".to_string()
} else {
format!(
"Theme catalog error: {}",
picker.error.as_deref().unwrap_or("unknown error")
)
};
frame.render_widget(Paragraph::new(message), content);
} else {
let items = picker
.filtered_indices
.iter()
.skip(state.scroll_offset(&state.scroll_views.theme_modal))
.take(content.height as usize)
.filter_map(|index| picker.entries.get(*index))
.map(|entry| {
let marker = if entry.id == picker.preview_theme_id {
"› "
} else {
" "
};
ListItem::new(format!("{marker}{} — {}", entry.id, entry.display_name))
})
.collect::<Vec<_>>();
debug_assert_eq!(
items.len(),
picker
.filtered_indices
.iter()
.skip(state.scroll_offset(&state.scroll_views.theme_modal))
.take(content.height as usize)
.count()
);
frame.render_widget(List::new(items), content);
}
let mut footer_y = geometry.footer.y;
if let Some(notice) = &picker.notice {
frame.render_widget(
Paragraph::new(notice.clone()),
Rect::new(geometry.footer.x, footer_y, geometry.footer.width, 1),
);
footer_y = footer_y.saturating_add(1);
}
if matches!(picker.save_state, ThemeSaveState::Pending) {
frame.render_widget(
Paragraph::new("Saving theme…"),
Rect::new(geometry.footer.x, footer_y, geometry.footer.width, 1),
);
} else if let ThemeSaveState::Failed(error) = &picker.save_state {
frame.render_widget(
Paragraph::new(format!("Save failed: {error} (Enter retry, Esc cancel)")),
Rect::new(geometry.footer.x, footer_y, geometry.footer.width, 1),
);
}
if inner.width > 8 && inner.y < area.bottom() {
let cursor_x = inner
.x
.saturating_add(7)
.saturating_add(cursor.min(query_width) as u16);
if cursor_x < inner.right() {
frame.set_cursor_position((cursor_x, inner.y));
}
}
}
#[cfg(test)]
mod tests {
use super::*;
use crate::{appearance::ThemeCatalogEntry, tui::state::MissionControlState};
use ratatui::{Terminal, backend::TestBackend};
fn state_with_entries(
save_state: ThemeSaveState,
notice: Option<String>,
) -> MissionControlState {
let mut state = MissionControlState::default();
state.open_theme_picker("matrix-green".into(), 1, false, None, Vec::new(), None);
state.set_theme_picker_catalog(
vec![
ThemeCatalogEntry {
id: "theme-one".into(),
display_name: "Theme One".into(),
},
ThemeCatalogEntry {
id: "theme-two".into(),
display_name: "Theme Two".into(),
},
],
notice,
10,
);
if matches!(save_state, ThemeSaveState::Pending) {
state.set_theme_picker_save_pending();
} else if let ThemeSaveState::Failed(error) = save_state {
state.set_theme_picker_save_failed(error);
}
state
}
fn rendered_text(state: &MissionControlState, width: u16, height: u16) -> String {
let backend = TestBackend::new(width, height);
let mut terminal = Terminal::new(backend).unwrap();
terminal
.draw(|frame| draw_theme_picker(frame, Rect::new(0, 0, width, height), state))
.unwrap();
terminal
.backend()
.buffer()
.content()
.iter()
.map(|cell| cell.symbol())
.collect()
}
#[test]
fn theme_picker_rows_remain_visible_with_notice_and_pending_footer() {
let state = state_with_entries(ThemeSaveState::Pending, Some("catalog warning".into()));
let text = rendered_text(&state, 80, 20);
assert!(text.contains("theme-one"));
assert!(text.contains("catalog warning"));
assert!(text.contains("Saving theme"));
}
#[test]
fn theme_picker_failed_footer_does_not_cover_rows() {
let state = state_with_entries(ThemeSaveState::Failed("disk full".into()), None);
let text = rendered_text(&state, 80, 20);
assert!(text.contains("theme-two"));
assert!(text.contains("Save failed"));
}
#[test]
fn theme_picker_tiny_area_and_wide_query_cursor_are_safe() {
let mut state = state_with_entries(ThemeSaveState::Idle, None);
if let Some(picker) = state.modals.theme_picker.as_mut() {
picker.query = "界".repeat(100);
picker.query_cursor = picker.query.len();
}
let _ = rendered_text(&state, 5, 3);
}
}