Initial commit: Linear-integrated autonomous coding agent with Initializer Bis support

2025-12-14 00:45:40 +01:00
commit a310d4b3cf
19 changed files with 3919 additions and 0 deletions
--- a/prompts/app_spec_theme_customization.txt
+++ b/prompts/app_spec_theme_customization.txt
@@ -0,0 +1,403 @@
+<project_specification>
+  <project_name>Claude.ai Clone - Advanced Theme Customization</project_name>
+
+  <overview>
+    This specification adds advanced theme customization features to the Claude.ai clone application.
+    Users will be able to customize accent colors, font sizes, message spacing, and choose from
+    preset color themes. All changes are additive and backward-compatible with existing theme functionality.
+    
+    The existing light/dark mode toggle remains unchanged and functional.
+  </overview>
+
+  <safety_requirements>
+    <critical>
+      - DO NOT modify existing light/dark mode functionality
+      - DO NOT break existing theme persistence
+      - DO NOT change existing CSS classes without ensuring backward compatibility
+      - All new theme options must be optional (defaults should match current behavior)
+      - Test thoroughly to ensure existing themes still work
+      - Maintain backward compatibility at all times
+      - New theme preferences should be stored separately from existing theme settings
+    </critical>
+  </safety_requirements>
+
+  <new_features>
+    <feature_6_theme_customization>
+      <title>Advanced Theme Customization</title>
+      <description>
+        Add advanced theme customization options. Users should be able to:
+        - Customize accent colors (beyond just light/dark mode)
+        - Choose from preset color themes (blue, green, purple, orange)
+        - Adjust font size globally (small, medium, large)
+        - Adjust message spacing (compact, comfortable, spacious)
+        - Preview theme changes before applying
+        - Save custom theme preferences
+        
+        The customization interface should be intuitive and provide real-time preview
+        of changes before they are applied. All preferences should persist across sessions.
+      </description>
+      <priority>3</priority>
+      <category>style</category>
+      <implementation_approach>
+        - Create a new "Appearance" or "Theme" section in settings
+        - Add accent color picker with preset options (blue, green, purple, orange)
+        - Add font size slider/selector (small, medium, large)
+        - Add message spacing selector (compact, comfortable, spacious)
+        - Implement preview functionality that shows changes in real-time
+        - Store theme preferences in localStorage or backend (user preferences)
+        - Apply theme using CSS custom properties (CSS variables)
+        - Ensure theme works with both light and dark modes
+      </implementation_approach>
+      <test_steps>
+        1. Open settings menu
+        2. Navigate to "Appearance" or "Theme" section
+        3. Select a different accent color (e.g., green)
+        4. Verify accent color changes are visible in preview
+        5. Adjust font size slider to "large"
+        6. Verify font size changes in preview
+        7. Adjust message spacing option to "spacious"
+        8. Verify spacing changes in preview
+        9. Click "Preview" to see changes applied temporarily
+        10. Click "Apply" to save changes permanently
+        11. Verify changes persist after page refresh
+        12. Test with both light and dark mode
+        13. Test reset to default theme
+        14. Verify existing conversations display correctly with new theme
+      </test_steps>
+    </feature_6_theme_customization>
+
+    <feature_accent_colors>
+      <title>Accent Color Customization</title>
+      <description>
+        Allow users to customize the accent color used throughout the application.
+        This includes:
+        - Primary button colors
+        - Link colors
+        - Focus states
+        - Active states
+        - Selection highlights
+        - Progress indicators
+        
+        Preset options:
+        - Blue (default, matches Claude.ai)
+        - Green
+        - Purple
+        - Orange
+        
+        Users should be able to see a preview of each color before applying.
+      </description>
+      <priority>3</priority>
+      <category>style</category>
+      <implementation_approach>
+        - Define accent colors as CSS custom properties
+        - Create color palette for each preset (light and dark variants)
+        - Add color picker UI component in settings
+        - Update all accent color usages to use CSS variables
+        - Ensure colors have proper contrast ratios for accessibility
+        - Store selected accent color in user preferences
+      </implementation_approach>
+      <test_steps>
+        1. Open theme settings
+        2. Select "Green" accent color
+        3. Verify buttons, links, and highlights use green
+        4. Switch to dark mode and verify green accent still works
+        5. Test all preset colors (blue, green, purple, orange)
+        6. Verify color persists after refresh
+        7. Test accessibility (contrast ratios)
+      </test_steps>
+    </feature_accent_colors>
+
+    <feature_font_size>
+      <title>Global Font Size Adjustment</title>
+      <description>
+        Allow users to adjust the global font size for better readability.
+        Options:
+        - Small (12px base)
+        - Medium (14px base, default)
+        - Large (16px base)
+        
+        Font size should scale proportionally across all text elements:
+        - Message text
+        - UI labels
+        - Input fields
+        - Buttons
+        - Sidebar text
+      </description>
+      <priority>3</priority>
+      <category>style</category>
+      <implementation_approach>
+        - Use CSS rem units for all font sizes
+        - Set base font size on root element
+        - Create font size presets (small, medium, large)
+        - Add font size selector in settings
+        - Store preference in user settings
+        - Ensure responsive design still works with different font sizes
+      </implementation_approach>
+      <test_steps>
+        1. Open theme settings
+        2. Select "Small" font size
+        3. Verify all text is smaller throughout the app
+        4. Select "Large" font size
+        5. Verify all text is larger throughout the app
+        6. Verify layout doesn't break with different font sizes
+        7. Test with long messages to ensure wrapping works
+        8. Verify preference persists after refresh
+      </test_steps>
+    </feature_font_size>
+
+    <feature_message_spacing>
+      <title>Message Spacing Customization</title>
+      <description>
+        Allow users to adjust the spacing between messages and within message bubbles.
+        Options:
+        - Compact: Minimal spacing (for users who prefer dense layouts)
+        - Comfortable: Default spacing (current behavior)
+        - Spacious: Increased spacing (for better readability)
+        
+        This affects:
+        - Vertical spacing between messages
+        - Padding within message bubbles
+        - Spacing between message elements (avatar, text, timestamp)
+      </description>
+      <priority>3</priority>
+      <category>style</category>
+      <implementation_approach>
+        - Define spacing scale using CSS custom properties
+        - Create spacing presets (compact, comfortable, spacious)
+        - Apply spacing to message containers and bubbles
+        - Add spacing selector in settings
+        - Store preference in user settings
+        - Ensure spacing works well with different font sizes
+      </implementation_approach>
+      <test_steps>
+        1. Open theme settings
+        2. Select "Compact" spacing
+        3. Verify messages are closer together
+        4. Select "Spacious" spacing
+        5. Verify messages have more space between them
+        6. Test with long conversations to ensure scrolling works
+        7. Verify spacing preference persists after refresh
+        8. Test with different font sizes to ensure compatibility
+      </test_steps>
+    </feature_message_spacing>
+
+    <feature_theme_preview>
+      <title>Theme Preview Functionality</title>
+      <description>
+        Allow users to preview theme changes before applying them permanently.
+        The preview should:
+        - Show a sample conversation with the new theme applied
+        - Update in real-time as settings are changed
+        - Allow users to cancel and revert to previous theme
+        - Show both light and dark mode previews if applicable
+        
+        Users should be able to:
+        - See preview immediately when changing settings
+        - Click "Apply" to save changes
+        - Click "Cancel" to discard changes
+        - Click "Reset" to return to default theme
+      </description>
+      <priority>3</priority>
+      <category>functional</category>
+      <implementation_approach>
+        - Create preview component showing sample conversation
+        - Apply theme changes temporarily to preview
+        - Store original theme state for cancel functionality
+        - Update preview in real-time as settings change
+        - Only persist changes when "Apply" is clicked
+        - Show clear visual feedback for preview vs. applied state
+      </implementation_approach>
+      <test_steps>
+        1. Open theme settings
+        2. Change accent color to green
+        3. Verify preview updates immediately
+        4. Change font size to large
+        5. Verify preview updates with new font size
+        6. Click "Cancel" and verify changes are reverted
+        7. Make changes again and click "Apply"
+        8. Verify changes are saved and applied to actual interface
+        9. Test preview with both light and dark mode
+      </test_steps>
+    </feature_theme_preview>
+  </new_features>
+
+  <implementation_notes>
+    <code_structure>
+      frontend/
+        components/
+          ThemeSettings.jsx        # New theme customization UI (NEW)
+          ThemePreview.jsx         # Preview component (NEW)
+        styles/
+          theme-variables.css      # CSS custom properties for themes (NEW)
+          accent-colors.css        # Accent color definitions (NEW)
+        hooks/
+          useTheme.js              # Updated to handle new theme options
+        utils/
+          themeStorage.js          # Theme preference persistence (NEW)
+    </code_structure>
+    
+    <css_architecture>
+      Use CSS custom properties (CSS variables) for all theme values:
+      - --accent-color-primary
+      - --accent-color-hover
+      - --font-size-base
+      - --message-spacing-vertical
+      - --message-padding
+      
+      This allows easy theme switching without JavaScript manipulation.
+    </css_architecture>
+    
+    <storage_approach>
+      Store theme preferences in:
+      - localStorage for client-side persistence
+      - Or backend user preferences table if available
+      
+      Structure:
+      {
+        accentColor: 'blue' | 'green' | 'purple' | 'orange',
+        fontSize: 'small' | 'medium' | 'large',
+        messageSpacing: 'compact' | 'comfortable' | 'spacious',
+        theme: 'light' | 'dark' (existing)
+      }
+    </storage_approach>
+    
+    <safety_guidelines>
+      - Keep existing theme functionality intact
+      - Default values should match current behavior
+      - Use feature detection for new theme features
+      - Gracefully degrade if CSS custom properties not supported
+      - Test with existing conversations and UI elements
+      - Ensure accessibility standards are maintained
+    </safety_guidelines>
+  </implementation_notes>
+
+  <ui_components>
+    <theme_settings_panel>
+      <description>Settings panel for theme customization</description>
+      <sections>
+        - Accent Color: Radio buttons or color swatches for preset colors
+        - Font Size: Slider or dropdown (small, medium, large)
+        - Message Spacing: Radio buttons (compact, comfortable, spacious)
+        - Preview: Live preview of theme changes
+        - Actions: Apply, Cancel, Reset buttons
+      </sections>
+    </theme_settings_panel>
+    
+    <theme_preview>
+      <description>Preview component showing sample conversation</description>
+      <elements>
+        - Sample user message
+        - Sample AI response
+        - Shows current accent color
+        - Shows current font size
+        - Shows current spacing
+        - Updates in real-time
+      </elements>
+    </theme_preview>
+  </ui_components>
+
+  <css_custom_properties>
+    <accent_colors>
+      Define CSS variables for each accent color preset:
+      --accent-blue: #2563eb;
+      --accent-green: #10b981;
+      --accent-purple: #8b5cf6;
+      --accent-orange: #f59e0b;
+      
+      Each should have hover, active, and focus variants.
+    </accent_colors>
+    
+    <font_sizes>
+      Define base font sizes:
+      --font-size-small: 0.75rem;   (12px)
+      --font-size-medium: 0.875rem; (14px, default)
+      --font-size-large: 1rem;      (16px)
+    </font_sizes>
+    
+    <spacing>
+      Define spacing scales:
+      --spacing-compact: 0.5rem;
+      --spacing-comfortable: 1rem; (default)
+      --spacing-spacious: 1.5rem;
+    </spacing>
+  </css_custom_properties>
+
+  <api_endpoints>
+    <if_backend_storage>
+      If storing preferences in backend:
+      - GET /api/user/preferences - Get user theme preferences
+      - PUT /api/user/preferences - Update user theme preferences
+      - GET /api/user/preferences/theme - Get theme preferences only
+    </if_backend_storage>
+    
+    <note>
+      If using localStorage only, no API endpoints needed.
+      Backend storage is optional but recommended for multi-device sync.
+    </note>
+  </api_endpoints>
+
+  <accessibility_requirements>
+    - All accent colors must meet WCAG AA contrast ratios (4.5:1 for text)
+    - Font size changes must not break screen reader compatibility
+    - Theme settings must be keyboard navigable
+    - Color choices should not be the only way to convey information
+    - Provide high contrast mode option if possible
+  </accessibility_requirements>
+
+  <testing_requirements>
+    <regression_tests>
+      - Verify existing light/dark mode toggle still works
+      - Verify existing theme persistence still works
+      - Test that default theme matches current behavior
+      - Verify existing conversations display correctly
+      - Test that all UI elements are styled correctly
+    </regression_tests>
+    
+    <feature_tests>
+      - Test each accent color preset
+      - Test each font size option
+      - Test each spacing option
+      - Test theme preview functionality
+      - Test theme persistence (localStorage/backend)
+      - Test theme reset to defaults
+      - Test theme with both light and dark modes
+      - Test theme changes in real-time
+    </feature_tests>
+    
+    <compatibility_tests>
+      - Test with different browsers (Chrome, Firefox, Safari, Edge)
+      - Test with different screen sizes (responsive design)
+      - Test with long conversations
+      - Test with different message types (text, code, artifacts)
+      - Test accessibility with screen readers
+    </compatibility_tests>
+  </testing_requirements>
+
+  <success_criteria>
+    <functionality>
+      - Users can customize accent colors from preset options
+      - Users can adjust global font size (small, medium, large)
+      - Users can adjust message spacing (compact, comfortable, spacious)
+      - Theme preview shows changes in real-time
+      - Theme preferences persist across sessions
+      - Existing light/dark mode functionality works unchanged
+      - All theme options work together harmoniously
+    </functionality>
+    
+    <user_experience>
+      - Theme customization is intuitive and easy to use
+      - Preview provides clear feedback before applying changes
+      - Changes apply smoothly without flickering
+      - Settings are easy to find and access
+      - Reset to defaults is easily accessible
+    </user_experience>
+    
+    <technical>
+      - Code is well-organized and maintainable
+      - CSS custom properties are used consistently
+      - Theme preferences are stored reliably
+      - No performance degradation with theme changes
+      - Backward compatibility is maintained
+    </technical>
+  </success_criteria>
+</project_specification>