- Interface theme
+ {t('settings.appearance.theme')}
- Select or customize your interface color scheme
+ {t('settings.appearance.themeDescription')}
@@ -417,7 +419,7 @@ export function AgentsAppearanceTab() {
: (systemLightTheme ?? null)
}
/>
-
System preference
+
{t('settings.appearance.system')}
) : (
<>
@@ -516,10 +518,10 @@ export function AgentsAppearanceTab() {
- Light
+ {t('settings.appearance.light')}
- Theme to use for light system appearance
+ {t('settings.appearance.lightDescription')}
@@ -552,10 +554,10 @@ export function AgentsAppearanceTab() {
- Dark
+ {t('settings.appearance.dark')}
- Theme to use for dark system appearance
+ {t('settings.appearance.darkDescription')}
@@ -594,10 +596,10 @@ export function AgentsAppearanceTab() {
- Workspace icon
+ {t('settings.appearance.workspaceIcon')}
- Show project icon in the sidebar workspace list
+ {t('settings.appearance.workspaceIconDescription')}
- Always expand to-do list
+ {t('settings.appearance.alwaysExpandTodoList')}
- Show the full to-do list instead of compact view
+ {t('settings.appearance.alwaysExpandTodoListDescription')}
+
+ {/* Language Section */}
+
+
+
+
+ {t('settings.appearance.language')}
+
+
+ {t('settings.appearance.languageDescription')}
+
+
+
+
{
+ i18n.changeLanguage(value)
+ localStorage.setItem('i18nextLng', value)
+ }}
+ >
+
+
+ {i18n.language === 'zh-CN' ? '简体中文' : 'English'}
+
+
+
+ English
+ 简体中文
+
+
+
+
)
}
diff --git a/src/renderer/features/onboarding/billing-method-page.tsx b/src/renderer/features/onboarding/billing-method-page.tsx
index 68abadabe..7c8d87255 100644
--- a/src/renderer/features/onboarding/billing-method-page.tsx
+++ b/src/renderer/features/onboarding/billing-method-page.tsx
@@ -3,6 +3,7 @@
import { useSetAtom } from "jotai"
import { Check } from "lucide-react"
import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
import {
ClaudeCodeIcon,
@@ -29,53 +30,54 @@ type BillingOption = {
icon: React.ReactNode
}
-const billingOptions: BillingOption[] = [
- {
- id: "claude-subscription",
- method: "claude-subscription",
- group: "claude-code",
- title: "Claude Pro/Max",
- subtitle: "Use your Claude subscription for unlimited access.",
- recommended: true,
- icon:
,
- },
- {
- id: "api-key",
- method: "api-key",
- group: "claude-code",
- title: "Anthropic API Key",
- subtitle: "Pay-as-you-go with your own API key.",
- icon:
,
- },
- {
- id: "custom-model",
- method: "custom-model",
- group: "claude-code",
- title: "Custom Model",
- subtitle: "Use a custom base URL and model.",
- icon:
,
- },
- {
- id: "codex-subscription",
- method: "codex-subscription",
- group: "codex",
- title: "Codex Subscription",
- subtitle: "Use your Codex ChatGPT login.",
- recommended: true,
- icon:
,
- },
- {
- id: "codex-api-key",
- method: "codex-api-key",
- group: "codex",
- title: "API Key",
- subtitle: "Use an app-managed OpenAI API key for Codex.",
- icon:
,
- },
-]
-
export function BillingMethodPage() {
+ const { t } = useTranslation()
const setBillingMethod = useSetAtom(billingMethodAtom)
+
+ const billingOptions: BillingOption[] = useMemo(() => [
+ {
+ id: "claude-subscription",
+ method: "claude-subscription",
+ group: "claude-code",
+ title: t('onboarding.billingMethod.claudePro'),
+ subtitle: t('onboarding.billingMethod.claudeProSubtitle'),
+ recommended: true,
+ icon:
,
+ },
+ {
+ id: "api-key",
+ method: "api-key",
+ group: "claude-code",
+ title: t('onboarding.billingMethod.apiKey'),
+ subtitle: t('onboarding.billingMethod.apiKeySubtitle'),
+ icon:
,
+ },
+ {
+ id: "custom-model",
+ method: "custom-model",
+ group: "claude-code",
+ title: t('onboarding.billingMethod.customModel'),
+ subtitle: t('onboarding.billingMethod.customModelSubtitle'),
+ icon:
,
+ },
+ {
+ id: "codex-subscription",
+ method: "codex-subscription",
+ group: "codex",
+ title: t('onboarding.billingMethod.codexSubscription'),
+ subtitle: t('onboarding.billingMethod.codexSubscriptionSubtitle'),
+ recommended: true,
+ icon:
,
+ },
+ {
+ id: "codex-api-key",
+ method: "codex-api-key",
+ group: "codex",
+ title: t('onboarding.billingMethod.codexApiKey'),
+ subtitle: t('onboarding.billingMethod.codexApiKeySubtitle'),
+ icon:
,
+ },
+ ], [t])
const setCodexOnboardingCompleted = useSetAtom(codexOnboardingCompletedAtom)
const [selectedGroup, setSelectedGroup] =
useState
("claude-code")
@@ -84,13 +86,13 @@ export function BillingMethodPage() {
const visibleOptions = useMemo(
() => billingOptions.filter((option) => option.group === selectedGroup),
- [selectedGroup],
+ [selectedGroup, billingOptions],
)
const selectedOption = useMemo(() => {
const found = billingOptions.find((option) => option.id === selectedOptionId)
return found || billingOptions[0]
- }, [selectedOptionId])
+ }, [selectedOptionId, billingOptions])
const handleContinue = () => {
if (
@@ -116,10 +118,10 @@ export function BillingMethodPage() {
{/* Header */}
- Connect AI Provider
+ {t('onboarding.billingMethod.title')}
- Choose how you'd like to connect your provider.
+ {t('onboarding.billingMethod.subtitle')}
@@ -137,7 +139,7 @@ export function BillingMethodPage() {
: "text-muted-foreground hover:text-foreground",
)}
>
- Claude Code
+ {t('onboarding.billingMethod.claudeCode')}
- Codex
+ {t('onboarding.billingMethod.codex')}
@@ -198,7 +200,7 @@ export function BillingMethodPage() {