✨ Add theme selector modal with live preview and search filtering

Introduce a dedicated theme selection experience in Iris Studio that lets
users browse all available themes with live preview. The modal displays
themes organized by variant (dark/light), supports filtering by name or
author, and applies themes in real-time as the user navigates.

Key additions:
- Theme selector modal with two-panel layout (list + preview)
- Live preview showing color swatches and gradients
- Keyboard navigation with j/k and arrow keys
- Search/filter support with automatic selection update
- Dark themes sorted before light themes for better organization

Also reorganizes theme tests into dedicated test modules for improved
maintainability.

Author: hyperb1iss

src/studio/handlers/modals/mod.rs

@@ -10,6 +10,7 @@ mod preset_selector;
 mod ref_selector;
 mod search;
 mod settings;
+mod theme_selector;
 
 use crossterm::event::KeyEvent;
 
@@ -32,6 +33,7 @@ pub fn handle_modal_key(state: &mut StudioState, key: KeyEvent) -> Vec<SideEffec
         Some(Modal::PresetSelector { .. }) => preset_selector::handle(state, key),
         Some(Modal::EmojiSelector { .. }) => emoji_selector::handle(state, key),
         Some(Modal::Settings(_)) => settings::handle(state, key),
+        Some(Modal::ThemeSelector { .. }) => theme_selector::handle(state, key),
         None => vec![],
     }
 }

src/studio/handlers/modals/settings.rs

@@ -3,7 +3,7 @@
 use crossterm::event::{KeyCode, KeyEvent};
 
 use crate::studio::events::SideEffect;
-use crate::studio::state::{Modal, StudioState};
+use crate::studio::state::{Modal, SettingsField, StudioState};
 
 /// Handle key events in settings modal
 pub fn handle(state: &mut StudioState, key: KeyEvent) -> Vec<SideEffect> {
@@ -80,6 +80,26 @@ fn handle_navigation_mode(state: &mut StudioState, key: KeyEvent) -> Vec<SideEff
             vec![]
         }
         KeyCode::Enter | KeyCode::Char(' ') => {
+            // Check if Theme field - open theme selector modal instead
+            if let Some(Modal::Settings(settings)) = &state.modal
+                && settings.current_field() == SettingsField::Theme
+            {
+                // Get themes and current selection index
+                let themes = settings.available_themes.clone();
+                let selected = themes
+                    .iter()
+                    .position(|t| t.id == settings.theme)
+                    .unwrap_or(0);
+                // Open theme selector modal
+                state.modal = Some(Modal::ThemeSelector {
+                    input: String::new(),
+                    themes,
+                    selected,
+                    scroll: 0,
+                });
+                state.mark_dirty();
+                return vec![];
+            }
             if let Some(Modal::Settings(settings)) = &mut state.modal {
                 settings.start_editing();
             }

src/studio/handlers/modals/theme_selector.rs

@@ -0,0 +1,185 @@
+//! Theme selector modal key handler
+
+use crossterm::event::{KeyCode, KeyEvent};
+
+use crate::studio::events::SideEffect;
+use crate::studio::state::{Modal, Notification, StudioState};
+use crate::theme;
+
+/// Visible items in the list (modal height - header - footer - variant separators)
+const VISIBLE_ITEMS: usize = 16;
+
+/// Handle key events in theme selector modal
+pub fn handle(state: &mut StudioState, key: KeyEvent) -> Vec<SideEffect> {
+    // Verify we're in the right modal
+    let Some(Modal::ThemeSelector {
+        themes, selected, ..
+    }) = &state.modal
+    else {
+        return vec![];
+    };
+    let themes = themes.clone();
+    let selected = *selected;
+
+    match key.code {
+        KeyCode::Esc => {
+            state.close_modal();
+            vec![]
+        }
+        KeyCode::Enter => {
+            // Apply selected theme
+            if let Some(theme_info) = themes.get(selected) {
+                // Load the theme
+                if theme::load_theme_by_name(&theme_info.id).is_ok() {
+                    // Theme has been applied (done above)
+                    state.notify(Notification::success(format!(
+                        "Theme: {}",
+                        theme_info.display_name
+                    )));
+                } else {
+                    state.notify(Notification::error(format!(
+                        "Failed to load theme: {}",
+                        theme_info.id
+                    )));
+                }
+            }
+            state.close_modal();
+            vec![]
+        }
+        KeyCode::Up | KeyCode::Char('k') => {
+            if let Some(Modal::ThemeSelector {
+                selected,
+                scroll,
+                themes,
+                input,
+            }) = &mut state.modal
+            {
+                // Get filtered indices
+                let filtered_indices: Vec<usize> = themes
+                    .iter()
+                    .enumerate()
+                    .filter(|(_, t)| {
+                        input.is_empty()
+                            || t.display_name
+                                .to_lowercase()
+                                .contains(&input.to_lowercase())
+                            || t.author.to_lowercase().contains(&input.to_lowercase())
+                    })
+                    .map(|(i, _)| i)
+                    .collect();
+
+                // Find current position in filtered list
+                if let Some(pos) = filtered_indices.iter().position(|&i| i == *selected)
+                    && pos > 0
+                {
+                    *selected = filtered_indices[pos - 1];
+                    // Scroll up if selection goes above visible area
+                    if pos - 1 < *scroll {
+                        *scroll = pos - 1;
+                    }
+                    // Apply live preview
+                    if let Some(theme_info) = themes.get(*selected) {
+                        let _ = theme::load_theme_by_name(&theme_info.id);
+                    }
+                }
+            }
+            state.mark_dirty();
+            vec![]
+        }
+        KeyCode::Down | KeyCode::Char('j') => {
+            if let Some(Modal::ThemeSelector {
+                selected,
+                scroll,
+                themes,
+                input,
+            }) = &mut state.modal
+            {
+                // Get filtered indices
+                let filtered_indices: Vec<usize> = themes
+                    .iter()
+                    .enumerate()
+                    .filter(|(_, t)| {
+                        input.is_empty()
+                            || t.display_name
+                                .to_lowercase()
+                                .contains(&input.to_lowercase())
+                            || t.author.to_lowercase().contains(&input.to_lowercase())
+                    })
+                    .map(|(i, _)| i)
+                    .collect();
+
+                // Find current position in filtered list
+                if let Some(pos) = filtered_indices.iter().position(|&i| i == *selected)
+                    && pos + 1 < filtered_indices.len()
+                {
+                    *selected = filtered_indices[pos + 1];
+                    // Scroll down if selection goes below visible area
+                    if pos + 1 >= *scroll + VISIBLE_ITEMS {
+                        *scroll = pos + 1 - VISIBLE_ITEMS + 1;
+                    }
+                    // Apply live preview
+                    if let Some(theme_info) = themes.get(*selected) {
+                        let _ = theme::load_theme_by_name(&theme_info.id);
+                    }
+                }
+            }
+            state.mark_dirty();
+            vec![]
+        }
+        KeyCode::Char(c) => {
+            if let Some(Modal::ThemeSelector {
+                input,
+                selected,
+                scroll,
+                themes,
+            }) = &mut state.modal
+            {
+                input.push(c);
+                *scroll = 0;
+                // Select first matching theme
+                let first_match = themes
+                    .iter()
+                    .enumerate()
+                    .find(|(_, t)| {
+                        input.is_empty()
+                            || t.display_name
+                                .to_lowercase()
+                                .contains(&input.to_lowercase())
+                            || t.author.to_lowercase().contains(&input.to_lowercase())
+                    })
+                    .map(|(i, _)| i);
+                *selected = first_match.unwrap_or(0);
+            }
+            state.mark_dirty();
+            vec![]
+        }
+        KeyCode::Backspace => {
+            if let Some(Modal::ThemeSelector {
+                input,
+                selected,
+                scroll,
+                themes,
+            }) = &mut state.modal
+            {
+                input.pop();
+                *scroll = 0;
+                // Select first matching theme
+                let first_match = themes
+                    .iter()
+                    .enumerate()
+                    .find(|(_, t)| {
+                        input.is_empty()
+                            || t.display_name
+                                .to_lowercase()
+                                .contains(&input.to_lowercase())
+                            || t.author.to_lowercase().contains(&input.to_lowercase())
+                    })
+                    .map(|(i, _)| i);
+                *selected = first_match.unwrap_or(0);
+            }
+            state.mark_dirty();
+            vec![]
+        }
+        _ => vec![],
+    }
+}

src/studio/render/modals/mod.rs

@@ -11,6 +11,7 @@ mod preset_selector;
 mod ref_selector;
 mod search;
 mod settings;
+mod theme_selector;
 
 use ratatui::Frame;
 use ratatui::layout::Rect;
@@ -61,6 +62,11 @@ fn modal_size(modal: &Modal, area: Rect) -> (u16, u16) {
         Modal::EmojiSelector { .. } => (55.min(max_width), 26.min(max_height)),
         // Settings modal - full width for fields, compact preview strip
         Modal::Settings(_) => (70.min(max_width), 24.min(max_height)),
+        // Theme selector modal - spacious for preview and list
+        Modal::ThemeSelector { themes, .. } => {
+            let list_height = (themes.len() as u16 + 8).min(28);
+            (75.min(max_width), list_height.min(max_height))
+        }
     }
 }
 
@@ -112,5 +118,11 @@ pub fn render_modal(state: &StudioState, frame: &mut Frame, last_render: Instant
             scroll,
         } => emoji_selector::render(frame, modal_area, input, emojis, *selected, *scroll),
         Modal::Settings(settings_state) => settings::render(frame, modal_area, settings_state),
+        Modal::ThemeSelector {
+            input,
+            themes,
+            selected,
+            scroll,
+        } => theme_selector::render(frame, modal_area, input, themes, *selected, *scroll),
     }
 }