Function ToggleSetting

src/components/SettingsModal.tsx:2419–2456

({
  label,
  description,
  enabled,
  onChange,
  warning
}: {
  label: string
  description: string
  enabled: boolean
  onChange: (value: boolean) => void
  warning?: string
})

}

function ToggleSetting({
  label,
  description,
  enabled,
  onChange,
  warning
}: {
  label: string
  description: string
  enabled: boolean
  onChange: (value: boolean) => void
  warning?: string
}) {
  return (
    <div className="flex items-start justify-between gap-4 p-4 bg-theme-dim border border-theme-primary rounded-lg">
      <div className="flex-1">
        <h4 className="font-semibold">{label}</h4>
        <p className="text-sm theme-secondary">{description}</p>
        {warning && enabled && (
          <p className="text-xs text-yellow-500 mt-1 flex items-center gap-1">
            <AlertTriangle className="w-3 h-3" />
            {warning}
          </p>
        )}
      </div>
      <button
        onClick={() => onChange(!enabled)}
        className={`w-12 h-6 rounded-full transition-colors relative flex-shrink-0
          ${enabled ? 'bg-green-500' : 'bg-theme-accent'}`}
      >
        <span
          className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-transform
            ${enabled ? 'left-7' : 'left-1'}`}
        />
      </button>
    </div>
  )
}