fix(webui): show language names only in their native form (#5646)

* fix(webui): show native language names only

* test(webui): assert native language names positively

webui/src/components/LanguageSwitcher.tsx

@@ -50,14 +50,7 @@ export function LanguageSwitcher() {
         >
           {supportedLocales.map((option) => (
             <DropdownMenuRadioItem key={option.code} value={option.code}>
-              <span className="flex min-w-0 items-center gap-2">
+              {option.nativeLabel}
-                <span>{option.nativeLabel}</span>
-                {option.nativeLabel !== option.label ? (
-                  <span className="truncate text-xs text-muted-foreground">
-                    {option.label}
-                  </span>
-                ) : null}
-              </span>
             </DropdownMenuRadioItem>
           ))}
         </DropdownMenuRadioGroup>

webui/src/i18n/config.ts

@@ -1,16 +1,16 @@
 export const LOCALE_STORAGE_KEY = "nanobot.locale";
 
 export const supportedLocales = [
-  { code: "en", label: "English", nativeLabel: "English" },
+  { code: "en", nativeLabel: "English" },
-  { code: "zh-CN", label: "Chinese (Simplified)", nativeLabel: "简体中文" },
+  { code: "zh-CN", nativeLabel: "简体中文" },
-  { code: "zh-TW", label: "Chinese (Traditional)", nativeLabel: "繁體中文" },
+  { code: "zh-TW", nativeLabel: "繁體中文" },
-  { code: "fr", label: "French", nativeLabel: "Français" },
+  { code: "fr", nativeLabel: "Français" },
-  { code: "ja", label: "Japanese", nativeLabel: "日本語" },
+  { code: "ja", nativeLabel: "日本語" },
-  { code: "ko", label: "Korean", nativeLabel: "한국어" },
+  { code: "ko", nativeLabel: "한국어" },
-  { code: "es", label: "Spanish", nativeLabel: "Español" },
+  { code: "es", nativeLabel: "Español" },
-  { code: "pt-BR", label: "Portuguese (Brazil)", nativeLabel: "Português (Brasil)" },
+  { code: "pt-BR", nativeLabel: "Português (Brasil)" },
-  { code: "vi", label: "Vietnamese", nativeLabel: "Tiếng Việt" },
+  { code: "vi", nativeLabel: "Tiếng Việt" },
-  { code: "id", label: "Indonesian", nativeLabel: "Bahasa Indonesia" },
+  { code: "id", nativeLabel: "Bahasa Indonesia" },
 ] as const;
 
 export type SupportedLocale = (typeof supportedLocales)[number]["code"];

webui/src/tests/i18n.test.tsx

@@ -452,6 +452,17 @@ describe("webui i18n", () => {
     expect(resolveInitialLocale()).toBe("zh-CN");
   });
 
+  it("lists each language by its native name", async () => {
+    const user = userEvent.setup();
+
+    render(<LanguageSwitcher />);
+    await user.click(screen.getByRole("button", { name: "Change language" }));
+
+    for (const { nativeLabel } of supportedLocales) {
+      expect(screen.getByRole("menuitemradio", { name: nativeLabel })).toBeInTheDocument();
+    }
+  });
+
   it("switches UI copy and document locale through the language switcher", async () => {
     const user = userEvent.setup();