feat(i18n): enhance language switching and UI consistency across themes and components

web/src/components/agent/agent-skills-view.tsx

@@ -258,6 +258,7 @@ export function AgentSkillsView({ clientId }: { clientId: string }) {
                     </div>
                 ),
             },
+        ],
         onClick: ({ key }) => {
             if (key === "manual") {
                 setDraft(null);

web/src/components/layout/app-config-modal.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import { ModelPicker } from "@/components/model-picker";
 import { ChannelEditorDrawer } from "@/components/layout/channel-editor-drawer";
 import { ConfigPromptSources } from "@/components/layout/config-prompt-sources";
-import { changeAppLocale, type AppLocale } from "@/i18n";
+import type { AppLocale } from "@/i18n";
 import { exportAppConfig, importAppConfig } from "@/services/config-file";
 import { syncAppDataToWebdav, type AppSyncDomainKey, type AppSyncProgressEvent } from "@/services/app-sync";
 import { testWebdavConnection, WEBDAV_MANIFEST_FILE_NAME } from "@/services/webdav-sync";
@@ -215,17 +215,6 @@ export function AppConfigPanel({ showDoneButton = false, initialTab = "channels"
                         label: t("config.tabs.preferences"),
                         children: (
                             <Form layout="vertical" requiredMark={false}>
-                                <div className="mb-2 text-sm font-semibold">{t("config.preferences.interface")}</div>
-                                <Form.Item label={t("config.preferences.language")} extra={t("config.preferences.languageDescription")} className="mb-4 max-w-sm">
-                                    <Select
-                                        value={locale}
-                                        options={[
-                                            { label: t("locale.zhCN"), value: "zh-CN" },
-                                            { label: t("locale.enUS"), value: "en-US" },
-                                        ]}
-                                        onChange={(value: AppLocale) => void changeAppLocale(value)}
-                                    />
-                                </Form.Item>
                                 <div className="mb-2 text-sm font-semibold">{t("config.preferences.defaultModels")}</div>
                                 <div className="mb-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                                     {modelGroups.map((group) => (

web/src/components/layout/user-status-actions.tsx

@@ -1,11 +1,13 @@
 import type { CSSProperties } from "react";
-import { BookOpen, Keyboard, Puzzle, Settings2 } from "lucide-react";
+import { BookOpen, Globe2, Keyboard, Puzzle, Settings2 } from "lucide-react";
+import { Dropdown } from "antd";
 import { useTranslation } from "react-i18next";
 
 import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
 import { GitHubLink } from "@/components/layout/github-link";
 import { VersionReleaseModal } from "@/components/layout/version-release-modal";
 import { DOCS_URL } from "@/constant/env";
+import { changeAppLocale, type AppLocale } from "@/i18n";
 import { cn } from "@/lib/utils";
 import { canvasThemes } from "@/lib/canvas-theme";
 import { useConfigStore } from "@/stores/use-config-store";
@@ -19,7 +21,7 @@ type UserStatusActionsProps = {
 };
 
 export function UserStatusActions({ showConfig = true, variant = "default", onOpenShortcuts, onOpenPlugins }: UserStatusActionsProps) {
-    const { t } = useTranslation();
+    const { i18n, t } = useTranslation();
     const theme = useThemeStore((state) => state.theme);
     const setTheme = useThemeStore((state) => state.setTheme);
     const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
@@ -45,6 +47,22 @@ export function UserStatusActions({ showConfig = true, variant = "default", onOp
                     <Settings2 className="size-4" />
                 </button>
             ) : null}
+            <Dropdown
+                trigger={["click"]}
+                placement="bottomRight"
+                menu={{
+                    selectedKeys: [i18n.resolvedLanguage],
+                    items: [
+                        { key: "zh-CN", label: t("locale.zhCN") },
+                        { key: "en-US", label: t("locale.enUS") },
+                    ],
+                    onClick: ({ key }) => void changeAppLocale(key as AppLocale),
+                }}
+            >
+                <button type="button" className={naturalIconClass} style={iconStyle} aria-label={t("topNav.language")} title={t("topNav.language")}>
+                    <Globe2 className="size-4" />
+                </button>
+            </Dropdown>
             <AnimatedThemeToggler theme={theme} onThemeChange={setTheme} className={naturalIconClass} style={iconStyle} aria-label={t(theme === "dark" ? "topNav.lightTheme" : "topNav.darkTheme")} title={t(theme === "dark" ? "topNav.lightTheme" : "topNav.darkTheme")} />
             <VersionReleaseModal style={versionStyle} />
             <GitHubLink className={cn("bg-transparent hover:bg-transparent dark:hover:bg-transparent", gitHubClassName)} style={gitHubStyle} />