Function AppearanceTab

SettingsModal.tsx:1120–1169

()

}

function AppearanceTab() {
  const { theme, setTheme, showMagic, setShowMagic } = useStore()

  const themes: { id: Theme; name: string; preview: string; emoji: string }[] = [
    { id: 'matrix', name: 'Matrix', preview: 'bg-matrix-bg border-matrix-primary', emoji: '◉' },
    { id: 'hacker', name: 'Hacker', preview: 'bg-hacker-bg border-hacker-primary', emoji: '△' },
    { id: 'glyph', name: 'Glyph', preview: 'bg-glyph-bg border-glyph-primary', emoji: '◈' },
    { id: 'minimal', name: 'Minimal', preview: 'bg-minimal-bg border-minimal-primary', emoji: '◯' }
  ]

  return (
    <div className="space-y-4">
      <div>
        <h3 className="text-lg font-semibold mb-2">Theme</h3>
        <p className="text-sm theme-secondary mb-4">
          Choose your aesthetic. Each theme affects colors, effects, and mood.
        </p>
      </div>

      <div className="grid grid-cols-2 gap-3">
        {themes.map((t) => (
          <button
            key={t.id}
            onClick={() => setTheme(t.id)}
            className={`p-4 rounded-lg border-2 transition-all
              ${theme === t.id
                ? 'border-theme-primary glow-box'
                : 'border-theme-dim hover:border-theme-primary/50'
              }`}
          >
            <div className="flex items-center gap-2 mb-2">
              <span className="text-xl">{t.emoji}</span>
              <span className="font-semibold">{t.name}</span>
            </div>
            <div className={`h-8 rounded ${t.preview} border`} />
          </button>
        ))}
      </div>

      <div className="pt-4 border-t border-theme-primary/20">
        <ToggleSetting
          label="Show Magic"
          description="Display pipeline details on messages — AutoTune params, model tags, feedback buttons, and race response version arrows"
          enabled={showMagic}
          onChange={setShowMagic}
        />
      </div>
    </div>
  )
}

function PrivacyTab() {
  const {