Add playlist visual indicators and split panel layout

- 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

Cargo.toml

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

src/state/mod.rs

@@ -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) {

src/ui/mod.rs

@@ -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
+    // Split main content into files (70%) and playlist (30%)
-    let tab_mode = true;
+    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
+    // Build the files panel title
-    let file_style = if !state.focus_playlist {
+    let file_style = Style::default().fg(Theme::bright_foreground());
-        Style::default().fg(Theme::bright_foreground()).add_modifier(Modifier::BOLD)
-    } else {
-        Style::default().fg(Theme::bright_foreground())
-    };
 
-    let playlist_style = if state.focus_playlist {
+    let files_block = Block::default()
-        Style::default().fg(Theme::bright_foreground()).add_modifier(Modifier::BOLD)
-    } else {
-        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()
-    };
-
-    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()
         .borders(Borders::ALL)
-        .title(title)
+        .title(Span::styled("files", file_style))
         .style(Theme::widget_border_style());
 
-    let inner_area = main_block.inner(main_chunks[1]);
+    // Build the playlist panel title
+    let playlist_style = Style::default().fg(Theme::bright_foreground());
+
+    let playlist_text = if !state.playlist.is_empty() {
+        format!("playlist [{}/{}]", state.playlist_index + 1, state.playlist.len())
+    } else {
+        "playlist".to_string()
+    };
+
+    let playlist_block = Block::default()
+        .borders(Borders::ALL)
+        .title(Span::styled(playlist_text, playlist_style))
+        .style(Theme::widget_border_style());
+
+    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
+    frame.render_widget(files_block, content_chunks[0]);
-    if state.focus_playlist {
+    frame.render_widget(playlist_block, content_chunks[1]);
-        render_right_panel(frame, state, inner_area, tab_mode);
+
-    } else {
+    render_file_panel(frame, state, files_inner, false);
-        render_file_panel(frame, state, inner_area, tab_mode);
+    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
+    (main_chunks[0], content_chunks[0], content_chunks[1])
-    if state.focus_playlist {
-        (main_chunks[0], Rect::default(), main_chunks[1])
-    } else {
-        (main_chunks[0], main_chunks[1], Rect::default())
-    }
 }
 
 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()
             };
@@ -719,42 +724,6 @@ fn render_progress_bar(frame: &mut Frame, _state: &AppState, player: &mut Player
     frame.render_widget(progress_widget, area);
 }
 
-fn render_info_popup(frame: &mut Frame, message: &str) {
-    // Create centered popup area - smaller than confirm popup
-    let area = frame.area();
-    let popup_width = 40;
-    let popup_height = 3;
-
-    let popup_area = Rect {
-        x: (area.width.saturating_sub(popup_width)) / 2,
-        y: (area.height.saturating_sub(popup_height)) / 2,
-        width: popup_width.min(area.width),
-        height: popup_height.min(area.height),
-    };
-
-    // Use Clear widget to completely erase the background
-    frame.render_widget(Clear, popup_area);
-
-    // Render the popup block with solid background
-    let block = Block::default()
-        .borders(Borders::ALL)
-        .style(Style::default()
-            .bg(Theme::background())
-            .fg(Theme::bright_foreground()));
-
-    let inner = block.inner(popup_area);
-    frame.render_widget(block, popup_area);
-
-    // Render message centered
-    let message_widget = Paragraph::new(message)
-        .alignment(Alignment::Center)
-        .style(Style::default()
-            .fg(Theme::bright_foreground())
-            .bg(Theme::background()));
-
-    frame.render_widget(message_widget, inner);
-}
-
 fn render_refresh_popup(frame: &mut Frame, file_count: usize) {
     // Create centered popup area - bigger for two lines
     let area = frame.area();

src/ui/theme.rs

@@ -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)
+    }
 }