MailUI4Agents/client/electron/src/components/ThemePicker.tsx

import { useThemeStore, type ThemePref } from '../stores/themeStore';
import { SunIcon, MoonIcon, MonitorIcon } from './icons';

/**
 * 主题切换。
 *
 * 两种形态共用一份状态：
 *   - `compact`（侧栏 / 底部导航）：单按钮，点一下翻转
 *   - 默认（「我的」页）：三选一，因为 `system` 只有在能明确选中时才有意义
 *
 * 单按钮不足以表达三态，但侧栏放不下三个选项；而只给单按钮的话
 * 用户一旦点过就永久脱离了「跟随系统」—— 那是个回不去的单向门。
 * 所以两个入口都提供，compact 用于快速切换，完整形态用于设定偏好。
 */

const OPTIONS: { value: ThemePref; label: string; hint: string; Icon: (p: { className?: string }) => JSX.Element }[] = [
  { value: 'light', label: '浅色', hint: '始终使用浅色', Icon: SunIcon },
  { value: 'dark', label: '深色', hint: '始终使用深色', Icon: MoonIcon },
  { value: 'system', label: '跟随系统', hint: '随系统的深浅色设置切换', Icon: MonitorIcon }
];

/** 侧栏用的单按钮：点一下在浅/深之间翻转。 */
export function ThemeToggleButton({ className = '' }: { className?: string }) {
  const resolved = useThemeStore(s => s.resolved);
  const pref = useThemeStore(s => s.pref);
  const toggle = useThemeStore(s => s.toggle);

  const dark = resolved === 'dark';
  return (
    <button
      onClick={toggle}
      title={
        pref === 'system'
          ? `跟随系统（当前${dark ? '深色' : '浅色'}）—— 点击固定为${dark ? '浅色' : '深色'}`
          : `当前${dark ? '深色' : '浅色'} —— 点击切换`
      }
      aria-label="切换主题"
      className={className}
    >
      {dark ? <MoonIcon className="w-3.5 h-3.5" /> : <SunIcon className="w-3.5 h-3.5" />}
    </button>
  );
}

/** 「我的」页用的三选一。 */
export default function ThemePicker() {
  const pref = useThemeStore(s => s.pref);
  const resolved = useThemeStore(s => s.resolved);
  const setPref = useThemeStore(s => s.setPref);

  return (
    <div>
      <div className="flex items-center gap-2 mb-1">
        <h3 className="text-sm font-medium text-gray-900">主题</h3>
        {pref === 'system' && (
          <span className="text-xs text-gray-500">
            当前跟随系统：{resolved === 'dark' ? '深色' : '浅色'}
          </span>
        )}
      </div>
      <p className="text-xs text-gray-500 mb-3">
        「跟随系统」会随系统的深色开关自动切换，不选它就固定在一种外观。
      </p>

      {/*
        分段控件而不是三个独立卡片。

        三选一的语义是「三种互斥的偏好」，分段控件正好表达这个；独立卡片看起来
        像可多选。选中态用整块底色（而非仅描边），在深色下也比描边更容易辨认。
      */}
      <div
        role="radiogroup"
        aria-label="主题偏好"
        className="inline-flex p-1 rounded-control bg-gray-100 border border-gray-200"
      >
        {OPTIONS.map(o => {
          const active = pref === o.value;
          return (
            <button
              key={o.value}
              role="radio"
              aria-checked={active}
              onClick={() => setPref(o.value)}
              title={o.hint}
              className={`px-3 py-1.5 rounded-md text-xs inline-flex items-center gap-1.5 transition-colors ${
                active
                  ? 'bg-white text-gray-900 shadow-1'
                  : 'text-gray-600 hover:text-gray-900'
              }`}
            >
              <o.Icon className="w-3.5 h-3.5" />
              {o.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}