Multi-column support

src/ui.rs

@@ -2,17 +2,16 @@ use ratatui::{
     layout::{Alignment, Constraint, Direction, Layout, Rect},
     style::{Color, Modifier, Style},
     text::{Line, Span},
-    widgets::{Block, Borders, Clear, List, ListItem, Paragraph},
+    widgets::{Block, Borders, Clear, List, ListItem, Paragraph, Row, Table, TableState},
     Frame,
 };
 
 use crate::{
     app::{App, LogViewDayOrder, LogViewGrouping, LogViewPeriod, LogViewSelection, NewEntryMode, Screen},
-    state::{AppState, TimeItem},
+    state::TimeItem,
 };
 
 const ACTIVE_COLOR: Color = Color::Green;
-const INACTIVE_COLOR: Color = Color::Yellow;
 
 pub fn render(frame: &mut Frame, app: &App) {
     match app.current_screen {
@@ -83,7 +82,8 @@ fn render_main(frame: &mut Frame, app: &App) {
         &app.state.permanent_items,
         app.state.current_pane == 0,
         app.state.selected_indices[0],
-        &app.state,
+        app.state.current_column,
+        app.config.multi_column,
     );
 
     render_section(
@@ -93,7 +93,8 @@ fn render_main(frame: &mut Frame, app: &App) {
         &app.state.recurring_items,
         app.state.current_pane == 1,
         app.state.selected_indices[1],
-        &app.state,
+        app.state.current_column,
+        app.config.multi_column,
     );
 
     render_section(
@@ -103,7 +104,8 @@ fn render_main(frame: &mut Frame, app: &App) {
         &app.state.recent_items,
         app.state.current_pane == 2,
         app.state.selected_indices[2],
-        &app.state,
+        app.state.current_column,
+        app.config.multi_column,
     );
 
     // Render bottom bar if needed
@@ -252,9 +254,8 @@ fn render_help(frame: &mut Frame, app: &App) {
         "3. Ad-Hoc Items: One-off tasks and quick entries",
         "",
         "Navigation:",
-        "- j/k or ↑/↓: Move selection up/down",
-        "- h/l or ←/→: Switch between panes",
-        "- Ctrl+n/Ctrl+p: Switch between panes",
+        "- j/k or ↑/↓: Move selection up/down (wraps between sections)",
+        "- Ctrl+n/Ctrl+p: Switch between sections (Permanent/Recurring/Ad-Hoc)",
         "- Enter: Start/stop time tracking for selected item",
         "- n: Create a new task in the current section",
         "",
@@ -364,45 +365,131 @@ fn render_section(
     items: &[TimeItem],
     is_active: bool,
     selected: usize,
-    _state: &AppState,
+    current_column: usize,
+    multi_column: bool,
 ) {
-    let border_color = if is_active {
-        ACTIVE_COLOR
-    } else {
-        INACTIVE_COLOR
-    };
-
     let block = Block::default()
         .borders(Borders::ALL)
         .title(title)
-        .style(Style::default().fg(border_color));
+        .style(Style::default().fg(if is_active { ACTIVE_COLOR } else { Color::White }));
 
-    let items: Vec<ListItem> = items
-        .iter()
-        .enumerate()
-        .map(|(i, item)| {
-            let style = if i == selected && is_active {
+    // Check if we should use two-column layout
+    let use_two_columns = multi_column && items.len() > 6;
+
+    if use_two_columns {
+        // Split items into two halves
+        let mid_point = (items.len() + 1) / 2;
+        let left_items = &items[..mid_point];
+        let right_items = &items[mid_point..];
+
+        // Create inner area for columns
+        let inner_area = block.inner(area);
+        let columns = Layout::default()
+            .direction(Direction::Horizontal)
+            .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
+            .split(inner_area);
+
+        // Render the block first
+        frame.render_widget(block, area);
+
+        // Calculate which row to show (same for both columns)
+        let row_in_column = if current_column == 0 {
+            selected  // Left column: row = selected index
+        } else {
+            selected.saturating_sub(mid_point)  // Right column: row = index - mid_point
+        };
+
+        // Left column
+        let left_rows: Vec<Row> = left_items
+            .iter()
+            .map(|item| {
+                let display = if !item.tags.is_empty() {
+                    format!("{} [{}]", item.tags.join(", "), item.name)
+                } else {
+                    item.name.clone()
+                };
+                Row::new(vec![display])
+            })
+            .collect();
+
+        let left_table = Table::new(left_rows)
+            .widths(&[Constraint::Percentage(100)])
+            .highlight_style(if is_active && current_column == 0 {
                 Style::default()
-                    .fg(border_color)
+                    .fg(ACTIVE_COLOR)
                     .add_modifier(Modifier::REVERSED)
             } else {
+                Style::default()  // No highlight for inactive column
+            });
+
+        // Both columns use the same row offset for synchronized scrolling
+        let mut left_state = TableState::default();
+        if !left_items.is_empty() {
+            // Always select the same row to force scrolling, but only highlight if active
+            left_state.select(Some(row_in_column.min(left_items.len() - 1)));
+        }
+
+        // Right column
+        let right_rows: Vec<Row> = right_items
+            .iter()
+            .map(|item| {
+                let display = if !item.tags.is_empty() {
+                    format!("{} [{}]", item.tags.join(", "), item.name)
+                } else {
+                    item.name.clone()
+                };
+                Row::new(vec![display])
+            })
+            .collect();
+
+        let right_table = Table::new(right_rows)
+            .widths(&[Constraint::Percentage(100)])
+            .highlight_style(if is_active && current_column == 1 {
                 Style::default()
-            };
-
-            let line = if !item.tags.is_empty() {
-                // Display as: tag [project]
-                format!("{} [{}]", item.tags.join(", "), item.name)
+                    .fg(ACTIVE_COLOR)
+                    .add_modifier(Modifier::REVERSED)
             } else {
-                // No tags, just show project
-                item.name.clone()
-            };
+                Style::default()  // No highlight for inactive column
+            });
 
-            ListItem::new(Line::from(vec![Span::styled(line, style)]))
-        })
-        .collect();
+        let mut right_state = TableState::default();
+        if !right_items.is_empty() {
+            // Always select the same row to force scrolling, but only highlight if active
+            right_state.select(Some(row_in_column.min(right_items.len() - 1)));
+        }
 
-    let list = List::new(items).block(block);
-    frame.render_widget(list, area);
+        frame.render_stateful_widget(left_table, columns[0], &mut left_state);
+        frame.render_stateful_widget(right_table, columns[1], &mut right_state);
+    } else {
+        // Single column mode
+        let rows: Vec<Row> = items
+            .iter()
+            .map(|item| {
+                let display = if !item.tags.is_empty() {
+                    format!("{} [{}]", item.tags.join(", "), item.name)
+                } else {
+                    item.name.clone()
+                };
+                Row::new(vec![display])
+            })
+            .collect();
+
+        let table = Table::new(rows)
+            .block(block)
+            .widths(&[Constraint::Percentage(100)])
+            .highlight_style(
+                Style::default()
+                    .fg(ACTIVE_COLOR)
+                    .add_modifier(Modifier::REVERSED),
+            );
+
+        let mut table_state = TableState::default();
+        if !items.is_empty() && is_active {
+            table_state.select(Some(selected.min(items.len() - 1)));
+        }
+
+        frame.render_stateful_widget(table, area, &mut table_state);
+    }
 }
 
 fn centered_rect(width: u16, height: u16, r: Rect) -> Rect {