Function APIKeyTab

src/components/SettingsModal.tsx:214–278

()

}

function APIKeyTab() {
  const { apiKey, setApiKey } = useStore()
  const [showKey, setShowKey] = useState(false)
  const [localKey, setLocalKey] = useState(apiKey)
  const [saved, setSaved] = useState(false)

  const handleBlur = () => {
    if (localKey !== apiKey) {
      setApiKey(localKey)
      setSaved(true)
      setTimeout(() => setSaved(false), 2000)
    }
  }

  return (
    <div className="space-y-4">
      <div>
        <h3 className="text-lg font-semibold mb-2">OpenRouter API Key</h3>
        <p className="text-sm theme-secondary mb-4">
          Your API key is stored locally and never sent to G0DM0D3 servers.
          Get your key at{' '}
          <a
            href="https://openrouter.ai/keys"
            target="_blank"
            rel="noopener noreferrer"
            className="theme-primary underline"
          >
            openrouter.ai
          </a>
        </p>
      </div>

      <div className="relative">
        <input
          type={showKey ? 'text' : 'password'}
          value={localKey}
          onChange={(e) => setLocalKey(e.target.value)}
          onBlur={handleBlur}
          placeholder="sk-or-v1-..."
          className="w-full px-4 py-3 pr-20 bg-theme-dim border border-theme-primary rounded-lg
            focus:outline-none focus:glow-box"
        />
        <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
          {saved && (
            <span className="flex items-center gap-1 text-xs text-green-500">
              <Check className="w-3 h-3" />
              Saved
            </span>
          )}
          <button
            onClick={() => setShowKey(!showKey)}
            className="p-1 hover:theme-primary transition-colors"
            aria-label={showKey ? 'Hide key' : 'Show key'}
          >
            {showKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
          </button>
        </div>
      </div>