From b2d9771a573f2acfa9cc177f47a5f70597698083 Mon Sep 17 00:00:00 2001
From: Calcium-Ion <61247483+Calcium-Ion@users.noreply.github.com>
Date: Wed, 29 Oct 2025 23:58:10 +0800
Subject: [PATCH] feat(language): add Japanese language support to
 LanguageSelector and i18n configuration (#2131)

---
 .../components/layout/headerbar/LanguageSelector.jsx  | 11 ++++++++++-
 web/src/i18n/i18n.js                                  |  2 ++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/web/src/components/layout/headerbar/LanguageSelector.jsx b/web/src/components/layout/headerbar/LanguageSelector.jsx
index 840e29628..a4b8c52b4 100644
--- a/web/src/components/layout/headerbar/LanguageSelector.jsx
+++ b/web/src/components/layout/headerbar/LanguageSelector.jsx
@@ -20,7 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import { Button, Dropdown } from '@douyinfe/semi-ui';
 import { Languages } from 'lucide-react';
-import { CN, GB, FR, RU } from 'country-flag-icons/react/3x2';
+import { CN, GB, FR, RU, JP } from 'country-flag-icons/react/3x2';
 
 const LanguageSelector = ({ currentLang, onLanguageChange, t }) => {
   return (
@@ -28,6 +28,7 @@ const LanguageSelector = ({ currentLang, onLanguageChange, t }) => {
       position='bottomRight'
       render={
         <Dropdown.Menu className='!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600'>
+          {/* Language sorting: Order by English name (Chinese, English, French, Japanese, Russian) */}
           <Dropdown.Item
             onClick={() => onLanguageChange('zh')}
             className={`!flex !items-center !gap-2 !px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'zh' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
@@ -49,6 +50,14 @@ const LanguageSelector = ({ currentLang, onLanguageChange, t }) => {
             <FR title='Français' className='!w-5 !h-auto' />
             <span>Français</span>
           </Dropdown.Item>
+          <Dropdown.Item
+            onClick={() => onLanguageChange('ja')}
+            className={`!flex !items-center !gap-2 !px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'ja' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
+          >
+            {/* Japanese flag using emoji as country-flag-icons/react/3x2 does not export JP */}
+            <JP title='日本語' className='!w-5 !h-auto' />
+            <span>日本語</span>
+          </Dropdown.Item>
           <Dropdown.Item
             onClick={() => onLanguageChange('ru')}
             className={`!flex !items-center !gap-2 !px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'ru' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
diff --git a/web/src/i18n/i18n.js b/web/src/i18n/i18n.js
index 8715951bf..f2c779a58 100644
--- a/web/src/i18n/i18n.js
+++ b/web/src/i18n/i18n.js
@@ -25,6 +25,7 @@ import enTranslation from './locales/en.json';
 import frTranslation from './locales/fr.json';
 import zhTranslation from './locales/zh.json';
 import ruTranslation from './locales/ru.json';
+import jaTranslation from './locales/ja.json';
 
 i18n
   .use(LanguageDetector)
@@ -36,6 +37,7 @@ i18n
       zh: zhTranslation,
       fr: frTranslation,
       ru: ruTranslation,
+      ja: jaTranslation,
     },
     fallbackLng: 'zh',
     interpolation: {