Add Settings & Preferences page with persistent user customization

[Copilot]

Implements comprehensive settings management for user preferences including appearance, dashboard behavior, keyboard shortcuts, and privacy controls. All settings persist via localStorage and apply in real-time without page reload.

Implementation

Settings Manager (js/settings-manager.js)

• Centralized settings store with localStorage persistence
• Auto-save with 500ms debounce to minimize writes
• Dot-notation key access for nested settings
• Import/export for backup/restore
• Storage usage tracking

// Settings apply immediately across the app
settingsManager.set('accentColor', '#10b981');
settingsManager.set('theme', 'dark');

// Export/import for portability
const backup = settingsManager.export();
settingsManager.import(backup);

Settings UI (settings.html, css/settings.css)

• Appearance: Theme (dark/light/auto), accent color picker (8 presets + custom), animation speed, reduce motion, font size, compact mode
• Dashboard: Default view, visible verticals toggle, auto-refresh interval, notification controls
• Shortcuts: Visual keyboard shortcut list with import/export
• Privacy: Data retention, analytics toggle, export data, clear cache
• System Info: Version, build date, service status, storage usage with progress bar

Global Integration (index.html, js/main.js)

• Settings gear icon (⚙️) in header navigation
• Settings apply on page load via applySettings()
• Real-time CSS custom property updates for theme/colors
• Data attributes for animation speed, reduce motion, font size, compact mode
• Keyboard shortcut: Alt+S opens settings

Responsive Design

Sidebar navigation becomes horizontal on mobile (<968px). All form controls stack vertically with adapted color picker grid.

Screenshots

Settings Page - Appearance Controls:

Accent Color Customization:

Settings Applied to Dashboard (Green Accent):

Mobile Responsive Layout:

Default Configuration

{
  theme: 'dark',
  accentColor: '#6366f1',
  animationSpeed: 'normal',
  reduceMotion: false,
  fontSize: 'medium',
  compactMode: false,
  defaultView: 'dashboard',
  visibleVerticals: ['make', 'field', 'legacy', 'kinetic', 'bio', 'ed', 'guard'],
  autoRefresh: true,
  autoRefreshInterval: 30000,
  notificationSound: true,
  notificationVolume: 0.5,
  dataRetention: 30,
  analytics: true
}

Original prompt

Add Settings & Preferences Page with User Customization

Context

Building on the existing Heady Admin UI, we need to add a comprehensive settings page that allows users to customize their dashboard experience, manage preferences, and configure system-wide options.

Tasks

1. Settings Page (HeadySystems_v13/apps/heady_admin_ui/settings.html)

Create a dedicated settings page with the following sections:

Appearance Settings

• Theme: Dark/Light/System auto-detect toggle
• Accent Color: Color picker for primary accent (purple, blue, green, golden, custom)
• Animation Speed: Slider (Off, Slow, Normal, Fast)
• Reduce Motion: Toggle for accessibility
• Font Size: Small/Medium/Large/Extra Large
• Compact Mode: Toggle for denser UI

Dashboard Preferences

• Default View: Select which section to show first (Dashboard, Verticals, Governance, Activity)
• Visible Verticals: Checklist to show/hide verticals from main view
• Auto-refresh: Toggle with interval selector (5s, 10s, 30s, 60s, Off)
• Notification Sound: Toggle with volume slider

Keyboard Shortcuts

• List all available shortcuts with ability to customize
• Reset to defaults button
• Import/Export shortcuts configuration

Data & Privacy

• Data Retention: Select how long to keep activity logs
• Analytics: Toggle anonymous usage analytics
• Export Data: Button to export all user data as JSON
• Clear Cache: Button to clear local storage

System Information

• Version number (v13.0.0)
• Build date
• Connected services status
• Storage usage indicator

2. Settings Storage (HeadySystems_v13/apps/heady_admin_ui/js/settings-manager.js)

Create a settings manager class:

class SettingsManager {
  constructor() {
    this.defaults = {...};
    this.settings = this.load();
  }
  
  get(key) { ... }
  set(key, value) { ... }
  reset() { ... }
  export() { ... }
  import(data) { ... }
  onChange(callback) { ... }
}

3. Settings Styles (HeadySystems_v13/apps/heady_admin_ui/css/settings.css)

• Settings panel layout with sidebar navigation
• Form control styles (toggles, sliders, color pickers, selects)
• Section cards with glassmorphism
• Responsive layout for mobile

4. Settings Components

Create reusable form components:

• ToggleSwitch: Animated on/off toggle
• RangeSlider: Custom styled slider with value display
• ColorPicker: Grid of preset colors + custom input
• SelectDropdown: Styled select with icons
• SettingsSection: Collapsible section container

5. Apply Settings Globally

Update js/main.js to:

• Load settings on page load
• Apply theme/accent color immediately
• Respect animation speed preference
• Honor reduce motion setting
• Save settings changes in real-time

6. Update Navigation

In HeadySystems_v13/apps/heady_admin_ui/index.html:

• Add "Settings" link to header actions (⚙️ icon)
• Add settings gear icon next to theme toggle

7. Settings Sync Indicator

• Show sync status (saved, saving, error)
• Auto-save with debounce (500ms delay)
• Visual feedback on save

Technical Requirements

• All settings stored in localStorage
• Settings apply immediately without page reload
• CSS custom properties for dynamic theming
• Accessible form controls with labels
• Mobile-responsive layout
• Import/Export as JSON

File Structure

HeadySystems_v13/apps/heady_admin_ui/
├── settings.html (NEW)
├── css/
│   └── settings.css (NEW)
├── js/
│   └── settings-manager.js (NEW)
└── index.html (UPDATE - add nav link)

Default Settings

const defaults = {
  theme: 'dark',
  accentColor: '#6366f1',
  animationSpeed: 'normal',
  reduceMotion: false,
  fontSize: 'medium',
  compactMode: false,
  defaultView: 'dashboard',
  visibleVerticals: ['make', 'field', 'legacy', 'kinetic', 'bio', 'ed', 'guard'],
  autoRefresh: true,
  autoRefreshInterval: 30000,
  notificationSound: true,
  notificationVolume: 0.5,
  dataRetention: 30,
  analytics: true
};

Success Criteria

• Settings page loads with current preferences
• All settings changes apply immediately
• Settings persist across page reloads
• Export/Import functionality works correctly
• Reset to defaults works
• Mobile-responsive layout
• Accessible with keyboard navigation
• Settings sync indicator shows status

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.