✨ Add theme selection and custom instructions to settings modal

Reorganize settings into logical sections (Provider, Appearance, Behavior) with visual polish including section headers and box-drawing separators. New settings fields: - Theme selector with live preview and light/dark indicator - Custom instructions field for user-defined prompts UI improvements: - Theme color swatch strip with gradient preview - Row highlighting for selected fields - Bidirectional cycling with Left/Right arrows for all cycle fields - Proper background fills and visual hierarchy Refactor backward cycling logic into SettingsState to reduce duplication and ensure consistent behavior across Provider, Theme, and Preset fields.

Author: hyperb1iss

src/studio/app/mod.rs

@@ -1634,6 +1634,10 @@ impl StudioApp {
  config
  .instruction_preset
  .clone_from(&settings.instruction_preset);
+ config
+ .instructions
+ .clone_from(&settings.custom_instructions);
+ config.theme.clone_from(&settings.theme);
 
  // Update provider config
  if let Some(provider_config) = config.providers.get_mut(&settings.provider) {

src/studio/handlers/mod.rs

@@ -98,7 +98,9 @@ fn handle_global_key(state: &mut StudioState, key: KeyEvent) -> Option<Vec<SideE
 
  // Settings
  KeyCode::Char('S') if key.modifiers.contains(KeyModifiers::SHIFT) => {
- state.modal = Some(Modal::Settings(SettingsState::from_config(&state.config)));
+ state.modal = Some(Modal::Settings(Box::new(SettingsState::from_config(
+ &state.config,
+ ))));
  Some(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, SettingsField, StudioState};
+use crate::studio::state::{Modal, StudioState};
 
 /// Handle key events in settings modal
 pub fn handle(state: &mut StudioState, key: KeyEvent) -> Vec<SideEffect> {
@@ -89,44 +89,7 @@ fn handle_navigation_mode(state: &mut StudioState, key: KeyEvent) -> Vec<SideEff
  KeyCode::Left | KeyCode::Char('h') => {
  // Cycle backwards for cyclable fields
  if let Some(Modal::Settings(settings)) = &mut state.modal {
- let field = settings.current_field();
- match field {
- SettingsField::Provider => {
- if let Some(idx) = settings
- .available_providers
- .iter()
- .position(|p| p == &settings.provider)
- {
- let prev = if idx == 0 {
- settings.available_providers.len() - 1
- } else {
- idx - 1
- };
- settings.provider = settings.available_providers[prev].clone();
- settings.modified = true;
- }
- }
- SettingsField::UseGitmoji => {
- settings.use_gitmoji = !settings.use_gitmoji;
- settings.modified = true;
- }
- SettingsField::InstructionPreset => {
- if let Some(idx) = settings
- .available_presets
- .iter()
- .position(|p| p == &settings.instruction_preset)
- {
- let prev = if idx == 0 {
- settings.available_presets.len() - 1
- } else {
- idx - 1
- };
- settings.instruction_preset = settings.available_presets[prev].clone();
- settings.modified = true;
- }
- }
- _ => {}
- }
+ settings.cycle_current_field_back();
  }
  state.mark_dirty();
  vec![]

src/studio/reducer/modal.rs

@@ -11,7 +11,7 @@ pub fn create_modal(state: &StudioState, modal_type: ModalType) -> Modal {
  match modal_type {
  ModalType::Help => Modal::Help,
  ModalType::Chat => Modal::Chat,
- ModalType::Settings => Modal::Settings(SettingsState::from_config(&state.config)),
+ ModalType::Settings => Modal::Settings(Box::new(SettingsState::from_config(&state.config))),
  ModalType::PresetSelector => {
  let presets = state.get_commit_presets();
  Modal::PresetSelector {

src/studio/render/modals/mod.rs

@@ -59,8 +59,8 @@ fn modal_size(modal: &Modal, area: Rect) -> (u16, u16) {
  }
  // Emoji selector grid
  Modal::EmojiSelector { .. } => (55.min(max_width), 26.min(max_height)),
- // Settings modal
- Modal::Settings(_) => (60.min(max_width), 20.min(max_height)),
+ // Settings modal - full width for fields, compact preview strip
+ Modal::Settings(_) => (70.min(max_width), 24.min(max_height)),
  }
 }