Add playlist visual indicators and split panel layout
All checks were successful
Build and Release / build-and-release (push) Successful in 52s

- Highlight files/folders in playlist with bold white text in file tree
- Show folders as in-playlist when they contain playlist items
- Split UI into files (70%) and playlist (30%) panels
- Make selection bar bold when over playlist items
- Fix search to keep selection on found item after pressing Enter
This commit is contained in:
2025-12-16 23:33:05 +01:00
parent 2953d73487
commit 814e593891
4 changed files with 58 additions and 41 deletions

View File

@@ -1,6 +1,6 @@
[package]
name = "cm-player"
version = "0.1.37"
version = "0.1.38"
edition = "2021"
[dependencies]

View File

@@ -813,7 +813,12 @@ impl AppState {
}
pub fn execute_search(&mut self) {
self.exit_search_mode();
// Keep the current selection and expanded state (don't restore saved_expanded_dirs)
self.search_mode = false;
self.search_query.clear();
self.search_results.clear();
self.search_result_index = 0;
// Don't restore expanded_dirs - keep current state so selection stays visible
}
pub fn append_playlist_search_char(&mut self, c: char) {

View File

@@ -28,52 +28,47 @@ pub fn render(frame: &mut Frame, state: &mut AppState, player: &mut Player) -> (
])
.split(frame.area());
// Always use tab mode - show only the focused panel
let tab_mode = true;
// Split main content into files (70%) and playlist (30%)
let content_chunks = Layout::default()
.direction(Direction::Vertical)
.constraints([
Constraint::Percentage(70), // Files panel
Constraint::Percentage(30), // Playlist panel
])
.split(main_chunks[1]);
// Build the title with focused panel in bold
let file_style = if !state.focus_playlist {
Style::default().fg(Theme::bright_foreground()).add_modifier(Modifier::BOLD)
} else {
Style::default().fg(Theme::bright_foreground())
};
// Build the files panel title
let file_style = Style::default().fg(Theme::bright_foreground());
let playlist_style = if state.focus_playlist {
Style::default().fg(Theme::bright_foreground()).add_modifier(Modifier::BOLD)
} else {
Style::default().fg(Theme::bright_foreground())
};
let files_block = Block::default()
.borders(Borders::ALL)
.title(Span::styled("files", file_style))
.style(Theme::widget_border_style());
// Build the playlist panel title
let playlist_style = Style::default().fg(Theme::bright_foreground());
// Add playlist counter
let playlist_text = if !state.playlist.is_empty() {
format!("playlist [{}/{}]", state.playlist_index + 1, state.playlist.len())
} else {
"playlist (empty)".to_string()
"playlist".to_string()
};
let title = Line::from(vec![
Span::styled("files", file_style),
Span::raw(" | "),
Span::styled(playlist_text, playlist_style),
]);
// Create one border around the entire content area with fixed gray border
let main_block = Block::default()
let playlist_block = Block::default()
.borders(Borders::ALL)
.title(title)
.title(Span::styled(playlist_text, playlist_style))
.style(Theme::widget_border_style());
let inner_area = main_block.inner(main_chunks[1]);
let files_inner = files_block.inner(content_chunks[0]);
let playlist_inner = playlist_block.inner(content_chunks[1]);
render_title_bar(frame, state, player, main_chunks[0]);
frame.render_widget(main_block, main_chunks[1]);
// Tab mode - show only focused panel
if state.focus_playlist {
render_right_panel(frame, state, inner_area, tab_mode);
} else {
render_file_panel(frame, state, inner_area, tab_mode);
}
frame.render_widget(files_block, content_chunks[0]);
frame.render_widget(playlist_block, content_chunks[1]);
render_file_panel(frame, state, files_inner, false);
render_right_panel(frame, state, playlist_inner, false);
render_status_bar(frame, state, player, main_chunks[2]);
@@ -93,12 +88,7 @@ pub fn render(frame: &mut Frame, state: &mut AppState, player: &mut Player) -> (
}
// Return title bar area, file panel area, and playlist area for mouse event handling
// Use main_chunks[1] (full area) so mouse coordinates align properly
if state.focus_playlist {
(main_chunks[0], Rect::default(), main_chunks[1])
} else {
(main_chunks[0], main_chunks[1], Rect::default())
}
(main_chunks[0], content_chunks[0], content_chunks[1])
}
fn highlight_search_matches<'a>(text: &str, query: &str, is_selected: bool) -> Vec<Span<'a>> {
@@ -239,15 +229,30 @@ fn render_file_panel(frame: &mut Frame, state: &mut AppState, area: Rect, _tab_m
let suffix = if item.is_dir { "/" } else { "" };
// Check if item is in playlist (for files) or contains playlist items (for folders)
let in_playlist = if item.is_dir {
state.playlist.iter().any(|p| p.starts_with(&item.path))
} else {
state.playlist.contains(&item.path)
};
let base_style = if is_selected {
// Selection bar: yellow/orange when in search (typing or viewing results), blue otherwise
if in_search {
let style = if in_search {
Theme::search_selected()
} else {
Theme::selected()
};
// Bold if item is in playlist
if in_playlist {
style.add_modifier(ratatui::style::Modifier::BOLD)
} else {
style
}
} else if state.marked_files.contains(&item.path) {
Theme::marked()
} else if in_playlist {
Theme::in_playlist()
} else {
Theme::secondary()
};

View File

@@ -95,4 +95,11 @@ impl Theme {
.fg(Self::background())
.bg(Self::warning())
}
pub fn in_playlist() -> Style {
Style::default()
.fg(Self::bright_foreground())
.bg(Self::background())
.add_modifier(ratatui::style::Modifier::BOLD)
}
}