Summary

Create a unified settings page that consolidates theme toggle and enter behavior settings, replacing the current scattered UI approach with a centralized configuration system.

Current State

• Theme Toggle: Located in top-right corner as individual button (🌙/☀️)
• Enter Behavior: Located next to send button in chat input area
• Settings Storage: Both use localStorage independently via utils/storage.ts

Proposed Changes

UI Changes

• Replace theme toggle button in top-right corner with Settings button (⚙️)
• Remove enter behavior toggle from chat input area
• Add settings page/modal accessible via new settings button
• Consolidate both settings in unified interface

Technical Implementation

Settings Infrastructure

• Create contexts/SettingsContext.tsx for unified settings management
• Create hooks/useSettings.ts for settings access
• Create types/settings.ts for settings type definitions
• Extend utils/storage.ts with settings schema versioning and migration

Settings UI Components

• components/SettingsPage.tsx (main settings interface)
• components/settings/GeneralSettings.tsx (theme, enter behavior, etc.)
• Settings button component to replace theme toggle

Migration Strategy

• Migrate existing localStorage data to new unified format
• Maintain backward compatibility for existing user settings
• Preserve current functionality during transition

Settings Structure

interface AppSettings {
  theme: "light" | "dark" | "system";
  enterBehavior: "send" | "newline";
  // Future settings can be added here
}

Benefits

• Centralized Configuration: All settings in one discoverable location
• Scalable Architecture: Easy to add new settings in the future
• Better UX: Reduced UI clutter, more organized settings access
• Maintainability: Unified settings management system

Acceptance Criteria

• Settings button replaces theme toggle in top-right corner
• Settings page/modal provides theme and enter behavior controls
• Enter behavior toggle removed from chat input area
• Existing localStorage settings automatically migrated to new format
• All current theme and enter behavior functionality preserved
• Settings page accessible and functional across all screen sizes
• Settings changes applied immediately without page reload
• Unified settings context provides consistent API for future settings

Implementation Notes

• Use modal dialog or dedicated route (/settings) for settings interface
• Integrate with existing EnterBehaviorContext and theme system
• Ensure mobile-responsive design for settings interface
• Consider settings categories for future extensibility

🎨 Generated with Claude Code