feat(ui): theme the TUI with the soulseek-rs design system

Replace the ANSI Light* palette with the design system's tokens
(tokens/colors.css): oxide accent, phosphor focus, tape/signal/alarm
semantics, paper text on dust chrome. Only foregrounds and the row
highlight are painted so the user's terminal background shows through.

Route every bordered pane through a single pane_block() helper carrying
one column of horizontal padding, and give legends a consistent
[n] Title form with the tag in signal. The command bar now derives its
cursor position from the block's inner rect instead of a hardcoded
border offset.

Also collapses the download-status glyph match that was duplicated
across three render sites into download_status_glyph().
This commit is contained in:
Michel de Graaf
2026-07-24 21:18:20 +02:00
parent 2c29e1a39b
commit 105c798855
11 changed files with 362 additions and 365 deletions
+8 -15
View File
@@ -1,7 +1,7 @@
use crate::models::{RoomsState, RoomsView};
use crate::ui::{
HIGHLIGHT_SYMBOL, accent_style, border_style, border_type, dimmed_style,
highlight_style, info_style, primary_style,
HIGHLIGHT_SYMBOL, PANE_PADDING, accent_style, dimmed_style,
highlight_style, info_style, pane_block, plain_title, primary_style,
};
use ratatui::{
Frame,
@@ -43,11 +43,7 @@ fn render_list(
" Rooms (Enter: join, /: filter, Tab: open rooms, Esc: close) "
.to_string()
};
let block = Block::default()
.borders(Borders::ALL)
.border_style(border_style(true))
.border_type(border_type(true))
.title(title);
let block = pane_block(true).title(title);
let filtered = rooms.filtered_rooms();
if filtered.is_empty() {
@@ -98,13 +94,9 @@ fn render_list(
}
fn render_chat(frame: &mut Frame, area: Rect, rooms: &RoomsState) {
let block = Block::default()
.borders(Borders::ALL)
.border_style(border_style(true))
.border_type(border_type(true))
.title(
" Chat rooms (Tab: switch, l: room list, x: leave, Esc: back) ",
);
let block = pane_block(true).title(
" Chat rooms (Tab: switch, l: room list, x: leave, Esc: back) ",
);
let inner = block.inner(area);
frame.render_widget(block, area);
@@ -209,7 +201,8 @@ fn render_users(
let block = Block::default()
.borders(Borders::LEFT)
.border_style(dimmed_style())
.title(format!(" Users ({}) ", users.len()));
.padding(PANE_PADDING)
.title(plain_title(format!("Users ({})", users.len()), false));
let inner = block.inner(area);
frame.render_widget(block, area);