Merge pull request #25 from gitcoder89431/20-implement-settings-modal-ui-component

gitcoder89431 · web-flow · commit 8ecd63286feb · 2025-08-23T21:54:27.000-04:00
feat: enhance settings modal with navigation and selection functionality
diff --git a/src/events.rs b/src/events.rs
@@ -16,6 +16,12 @@ pub enum AppEvent {
     OpenSettings,
     /// User requested to close settings modal
     CloseSettings,
+    /// Navigate up in settings modal
+    NavigateUp,
+    /// Navigate down in settings modal
+    NavigateDown,
+    /// Select current item in settings modal
+    Select,
     /// Settings action to be applied
     SettingsAction(crate::settings::SettingsAction),
     /// Terminal was resized to new dimensions
@@ -49,8 +55,11 @@ impl EventHandler {
                     match key_event.code {
                         KeyCode::Char('q') => Ok(AppEvent::Quit),
                         KeyCode::Esc => Ok(AppEvent::CloseSettings),
-                        KeyCode::Char(',') => Ok(AppEvent::OpenSettings),
+                        KeyCode::Char('s') | KeyCode::Char('S') => Ok(AppEvent::OpenSettings),
                         KeyCode::Char('t') | KeyCode::Char('T') => Ok(AppEvent::ToggleTheme),
+                        KeyCode::Up => Ok(AppEvent::NavigateUp),
+                        KeyCode::Down => Ok(AppEvent::NavigateDown),
+                        KeyCode::Enter => Ok(AppEvent::Select),
                         KeyCode::Char('c')
                             if key_event.modifiers.contains(KeyModifiers::CONTROL) =>
                         {
@@ -70,7 +79,7 @@ impl EventHandler {
 
 impl Default for EventHandler {
     fn default() -> Self {
-        Self::new(Duration::from_millis(50))
+        Self::new(Duration::from_millis(100)) // 100ms timeout for better efficiency
     }
 }
 
diff --git a/src/settings.rs b/src/settings.rs
@@ -4,6 +4,11 @@
 //! Provides clean separation of concerns and prepares for future feature expansion.
 
 use crate::theme::{Theme, ThemeVariant};
+use ratatui::{
+    Frame,
+    layout::{Alignment, Constraint, Direction, Layout, Rect},
+    widgets::{Block, Borders, Clear, List, ListItem, Paragraph},
+};
 
 /// Core settings structure with extensible design
 #[derive(Debug, Clone)]
@@ -17,6 +22,56 @@ pub struct Settings {
     // pub advanced: AdvancedConfig,
 }
 
+/// Settings modal state for UI navigation
+#[derive(Debug, Clone)]
+pub struct SettingsModalState {
+    /// Currently selected theme index in the modal
+    pub selected_theme_index: usize,
+    /// Available theme variants for selection
+    pub available_themes: Vec<ThemeVariant>,
+}
+
+impl SettingsModalState {
+    /// Create a new modal state with current theme selected
+    pub fn new(current_theme: ThemeVariant) -> Self {
+        let available_themes = vec![ThemeVariant::EverforestDark, ThemeVariant::EverforestLight];
+        let selected_theme_index = available_themes
+            .iter()
+            .position(|&t| t == current_theme)
+            .unwrap_or(0);
+
+        Self {
+            selected_theme_index,
+            available_themes,
+        }
+    }
+
+    /// Navigate up in the theme selection
+    pub fn navigate_up(&mut self) {
+        if self.selected_theme_index > 0 {
+            self.selected_theme_index -= 1;
+        } else {
+            // Wrap to bottom
+            self.selected_theme_index = self.available_themes.len() - 1;
+        }
+    }
+
+    /// Navigate down in the theme selection
+    pub fn navigate_down(&mut self) {
+        if self.selected_theme_index < self.available_themes.len() - 1 {
+            self.selected_theme_index += 1;
+        } else {
+            // Wrap to top
+            self.selected_theme_index = 0;
+        }
+    }
+
+    /// Get the currently selected theme variant
+    pub fn selected_theme(&self) -> ThemeVariant {
+        self.available_themes[self.selected_theme_index]
+    }
+}
+
 impl Settings {
     /// Create new settings instance with sensible defaults
     pub fn new() -> Self {
@@ -189,6 +244,99 @@ impl SettingsManager {
     // pub fn auto_save(&self) -> Result<(), SettingsError>
 }
 
+/// Render the settings modal as a centered popup
+pub fn render_settings_modal(
+    f: &mut Frame,
+    area: Rect,
+    modal_state: &SettingsModalState,
+    theme: &Theme,
+) {
+    // Create a centered modal area
+    let modal_area = centered_rect(60, 40, area);
+
+    // Clear the background (overlay effect)
+    f.render_widget(Clear, area);
+
+    // Create the modal layout
+    let modal_layout = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([
+            Constraint::Length(3), // Title section
+            Constraint::Min(4),    // Theme selection
+            Constraint::Length(2), // Help text
+        ])
+        .split(modal_area);
+
+    // Modal border and title
+    let modal_block = Block::default()
+        .title(" Settings ")
+        .borders(Borders::ALL)
+        .border_style(theme.border_style());
+
+    f.render_widget(modal_block, modal_area);
+
+    // Theme selection section
+    let theme_section = Paragraph::new("Theme Selection")
+        .style(theme.text_style())
+        .alignment(Alignment::Left);
+    f.render_widget(theme_section, modal_layout[0]);
+
+    // Theme options with radio buttons
+    let themes = [
+        ("Everforest Dark", ThemeVariant::EverforestDark),
+        ("Everforest Light", ThemeVariant::EverforestLight),
+    ];
+
+    let items: Vec<ListItem> = themes
+        .iter()
+        .enumerate()
+        .map(|(i, (name, _variant))| {
+            let indicator = if i == modal_state.selected_theme_index {
+                "●" // Filled circle for selected
+            } else {
+                "○" // Empty circle for unselected
+            };
+            let style = if i == modal_state.selected_theme_index {
+                theme.highlight_style()
+            } else {
+                theme.text_style()
+            };
+            ListItem::new(format!("  {} {}", indicator, name)).style(style)
+        })
+        .collect();
+
+    let theme_list = List::new(items).style(theme.text_style());
+
+    f.render_widget(theme_list, modal_layout[1]);
+
+    // Help text at bottom
+    let help_text = Paragraph::new("ESC: Close    ↑↓: Navigate")
+        .style(theme.secondary_style())
+        .alignment(Alignment::Center);
+    f.render_widget(help_text, modal_layout[2]);
+}
+
+/// Calculate centered rectangle for modal positioning
+fn centered_rect(percent_x: u16, percent_y: u16, r: Rect) -> Rect {
+    let popup_layout = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([
+            Constraint::Percentage((100 - percent_y) / 2),
+            Constraint::Percentage(percent_y),
+            Constraint::Percentage((100 - percent_y) / 2),
+        ])
+        .split(r);
+
+    Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([
+            Constraint::Percentage((100 - percent_x) / 2),
+            Constraint::Percentage(percent_x),
+            Constraint::Percentage((100 - percent_x) / 2),
+        ])
+        .split(popup_layout[1])[1]
+}
+
 impl Default for SettingsManager {
     fn default() -> Self {
         Self::new()
diff --git a/src/ui/app.rs b/src/ui/app.rs
@@ -3,7 +3,7 @@
 use crate::{
     events::{AppEvent, AppState, EventHandler},
     layout::AppLayout,
-    settings::{Settings, SettingsAction, SettingsManager},
+    settings::{Settings, SettingsAction, SettingsManager, SettingsModalState},
     theme::{Element, Theme},
 };
 use crossterm::{
@@ -17,8 +17,7 @@ use ratatui::{
     layout::Alignment,
     widgets::{Block, Borders, Paragraph, Wrap},
 };
-use std::{io, time::Duration};
-use tokio::time;
+use std::io;
 
 /// Main application state and manager
 pub struct App {
@@ -34,6 +33,8 @@ pub struct App {
     event_handler: EventHandler,
     /// Settings manager for configuration
     settings: SettingsManager,
+    /// Settings modal state for navigation
+    modal_state: Option<SettingsModalState>,
     /// Last known terminal size for resize detection
     last_size: Option<(u16, u16)>,
 }
@@ -48,6 +49,7 @@ impl App {
             layout: AppLayout::new().expect("Failed to create layout"),
             event_handler: EventHandler::default(),
             settings: SettingsManager::new(),
+            modal_state: None,
             last_size: None,
         }
     }
@@ -69,48 +71,53 @@ impl App {
             self.previous_state = self.state.clone();
         }
         self.state = AppState::Settings;
+
+        // Initialize modal state with current theme
+        self.modal_state = Some(SettingsModalState::new(self.settings.get().theme_variant));
     }
 
     /// Exit settings modal and return to previous state
     pub fn exit_settings(&mut self) {
         self.state = self.previous_state.clone();
+        self.modal_state = None;
     }
 
     /// Main application run loop with proper async event handling
     pub async fn run<B: Backend>(
         &mut self,
         terminal: &mut Terminal<B>,
     ) -> Result<(), Box<dyn std::error::Error>> {
-        let mut interval = time::interval(Duration::from_millis(16)); // ~60 FPS
+        // Initial render
+        terminal.draw(|f| self.draw(f))?;
 
         loop {
-            // Handle the render/update cycle
-            tokio::select! {
-                _ = interval.tick() => {
-                    // Render the UI
-                    terminal.draw(|f| self.draw(f))?;
-
-                    // Check if we should quit
-                    if self.should_quit() {
-                        break;
-                    }
-                }
-
-                // Handle input events
-                event_result = {
-                    let event_handler = self.event_handler.clone();
-                    tokio::task::spawn_blocking(move || event_handler.next_event())
-                } => {
-                    match event_result? {
-                        Ok(event) => {
-                            self.handle_event(event);
-                        }
-                        Err(e) => {
-                            self.state = AppState::Error(format!("Input error: {}", e));
+            // Handle input events - this will block until an event occurs
+            let event_result = {
+                let event_handler = self.event_handler.clone();
+                tokio::task::spawn_blocking(move || event_handler.next_event())
+            }.await;
+
+            match event_result? {
+                Ok(event) => {
+                    // Only handle events that aren't None
+                    if event != AppEvent::None {
+                        self.handle_event(event);
+                        
+                        // Only redraw after handling a real event
+                        terminal.draw(|f| self.draw(f))?;
+                        
+                        // Check if we should quit after handling the event
+                        if self.should_quit() {
                             break;
                         }
                     }
                 }
+                Err(e) => {
+                    self.state = AppState::Error(format!("Input error: {}", e));
+                    // Redraw to show error state
+                    terminal.draw(|f| self.draw(f))?;
+                    break;
+                }
             }
         }
 
@@ -135,6 +142,42 @@ impl App {
                     self.state = AppState::Quitting;
                 }
             }
+            AppEvent::NavigateUp => {
+                // Only handle navigation in settings modal
+                if matches!(self.state, AppState::Settings) {
+                    if let Some(ref mut modal_state) = self.modal_state {
+                        modal_state.navigate_up();
+                        // Apply live theme preview
+                        let selected_theme = modal_state.selected_theme();
+                        self.theme.set_variant(selected_theme);
+                    }
+                }
+            }
+            AppEvent::NavigateDown => {
+                // Only handle navigation in settings modal
+                if matches!(self.state, AppState::Settings) {
+                    if let Some(ref mut modal_state) = self.modal_state {
+                        modal_state.navigate_down();
+                        // Apply live theme preview
+                        let selected_theme = modal_state.selected_theme();
+                        self.theme.set_variant(selected_theme);
+                    }
+                }
+            }
+            AppEvent::Select => {
+                // Only handle selection in settings modal
+                if matches!(self.state, AppState::Settings) {
+                    if let Some(ref modal_state) = self.modal_state {
+                        let selected_theme = modal_state.selected_theme();
+                        let action = SettingsAction::ChangeTheme(selected_theme);
+                        if let Err(e) = self.handle_settings_action(action) {
+                            self.state = AppState::Error(format!("Settings error: {}", e));
+                        }
+                        // Close modal after selection
+                        self.exit_settings();
+                    }
+                }
+            }
             AppEvent::SettingsAction(action) => {
                 // Handle settings actions and apply theme changes immediately
                 if let Err(e) = self.handle_settings_action(action) {
@@ -180,6 +223,13 @@ impl App {
         self.render_header(frame, layout_rects.header);
         self.render_main_content(frame, layout_rects.body);
         self.render_footer(frame, layout_rects.footer);
+
+        // Render modal overlay if in settings state
+        if matches!(self.state, AppState::Settings) {
+            if let Some(ref modal_state) = self.modal_state {
+                crate::settings::render_settings_modal(frame, size, modal_state, &self.theme);
+            }
+        }
     }
 
     /// Render the header section
@@ -320,7 +370,7 @@ impl App {
 
         let footer_text = match self.state {
             AppState::Main => format!(
-                "ESC/q: Quit | T: Toggle Theme | ,: Settings | Current: [{}] | Production v0.1.0",
+                "ESC/q: Quit | T: Toggle Theme | S: Settings | Current: [{}] | Production v0.1.0",
                 current_theme
             ),
             AppState::Settings => format!(
