Function SettingsModal

SettingsModal.tsx:59–188

({ onClose }: SettingsModalProps)

type SettingsTab = 'api' | 'prompt' | 'appearance' | 'privacy' | 'liquid' | 'autotune' | 'parseltongue' | 'stm' | 'memory' | 'ultraplinian' | 'consortium' | 'plan' | 'data'

export function SettingsModal({ onClose }: SettingsModalProps) {
  const [activeTab, setActiveTab] = useState<SettingsTab>('api')

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* Modal */}
      <div className="relative w-full max-w-2xl bg-theme-bg border border-theme-primary rounded-lg shadow-2xl overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-theme-primary">
          <h2 className="text-xl font-bold theme-primary">Settings</h2>
          <button
            onClick={onClose}
            className="p-2 hover:bg-theme-accent rounded-lg transition-colors"
            aria-label="Close settings"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content */}
        <div className="flex min-h-[400px]">
          {/* Sidebar */}
          <nav className="w-48 border-r border-theme-primary p-2">
            <TabButton
              icon={<Key className="w-4 h-4" />}
              label="API Key"
              active={activeTab === 'api'}
              onClick={() => setActiveTab('api')}
            />
            <TabButton
              icon={<FileText className="w-4 h-4" />}
              label="System Prompt"
              active={activeTab === 'prompt'}
              onClick={() => setActiveTab('prompt')}
            />
            <TabButton
              icon={<SlidersHorizontal className="w-4 h-4" />}
              label="AutoTune"
              active={activeTab === 'autotune'}
              onClick={() => setActiveTab('autotune')}
            />
            <TabButton
              icon={<Palette className="w-4 h-4" />}
              label="Appearance"
              active={activeTab === 'appearance'}
              onClick={() => setActiveTab('appearance')}
            />
            <TabButton
              icon={<Shield className="w-4 h-4" />}
              label="Privacy"
              active={activeTab === 'privacy'}
              onClick={() => setActiveTab('privacy')}