simplify language selector display to use text-only labels

Replace icon-based language options with plain text labels in both the header dropdown and preferences settings to keep the UI clean and avoid potential controversies. Remove unused country-flag-icons dependency.
2026-02-11 17:44:31 +08:00
parent 50dff6a237
commit a79ab1ebb2
4 changed files with 20 additions and 49 deletions
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -1,6 +1,5 @@
 {
  "lockfileVersion": 1,
-  "configVersion": 0,
  "workspaces": {
    "": {
      "name": "react-template",
@@ -13,7 +12,6 @@
        "@visactor/vchart-semi-theme": "~1.8.8",
        "axios": "1.12.0",
        "clsx": "^2.1.1",
-        "country-flag-icons": "^1.5.19",
        "dayjs": "^1.11.11",
        "history": "^5.3.0",
        "i18next": "^23.16.8",
@@ -884,8 +882,6 @@

    "cosmiconfig": ["cosmiconfig@7.1.0", "", { "dependencies": { "@types/parse-json": "^4.0.0", "import-fresh": "^3.2.1", "parse-json": "^5.0.0", "path-type": "^4.0.0", "yaml": "^1.10.0" } }, "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA=="],

-    "country-flag-icons": ["country-flag-icons@1.5.19", "", {}, "sha512-D/ZkRyj+ywJC6b2IrAN3/tpbReMUqmuRLlcKFoY/o0+EPQN9Ev/e8tV+D3+9scvu/tarxwLErNwS73C3yzxs/g=="],
-
    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],

    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
--- a/web/package.json
+++ b/web/package.json
@@ -12,7 +12,6 @@
    "@visactor/vchart-semi-theme": "~1.8.8",
    "axios": "1.12.0",
    "clsx": "^2.1.1",
-    "country-flag-icons": "^1.5.19",
    "dayjs": "^1.11.11",
    "history": "^5.3.0",
    "i18next": "^23.16.8",
--- a/web/src/components/layout/headerbar/LanguageSelector.jsx
+++ b/web/src/components/layout/headerbar/LanguageSelector.jsx
@@ -20,7 +20,6 @@ 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, JP, VN } from 'country-flag-icons/react/3x2';

 const LanguageSelector = ({ currentLang, onLanguageChange, t }) => {
  return (
@@ -31,46 +30,39 @@ const LanguageSelector = ({ currentLang, onLanguageChange, t }) => {
          {/* 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'}`}
+            className={`!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'}`}
          >
-            <CN title='中文' className='!w-5 !h-auto' />
-            <span>中文</span>
+            中文
          </Dropdown.Item>
          <Dropdown.Item
            onClick={() => onLanguageChange('en')}
-            className={`!flex !items-center !gap-2 !px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'en' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
+            className={`!px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'en' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
          >
-            <GB title='English' className='!w-5 !h-auto' />
-            <span>English</span>
+            English
          </Dropdown.Item>
          <Dropdown.Item
            onClick={() => onLanguageChange('fr')}
-            className={`!flex !items-center !gap-2 !px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'fr' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
+            className={`!px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'fr' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
          >
-            <FR title='Français' className='!w-5 !h-auto' />
-            <span>Français</span>
+            Français
          </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'}`}
+            className={`!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'}`}
+            className={`!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'}`}
          >
-            <RU title='Русский' className='!w-5 !h-auto' />
-            <span>Русский</span>
+            Русский
          </Dropdown.Item>
          <Dropdown.Item
            onClick={() => onLanguageChange('vi')}
-            className={`!flex !items-center !gap-2 !px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'vi' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
+            className={`!px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'vi' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
          >
-            <VN title='Tiếng Việt' className='!w-5 !h-auto' />
-            <span>Tiếng Việt</span>
+            Tiếng Việt
          </Dropdown.Item>
        </Dropdown.Menu>
      }
--- a/web/src/components/settings/personal/cards/PreferencesSettings.jsx
+++ b/web/src/components/settings/personal/cards/PreferencesSettings.jsx
@@ -24,14 +24,14 @@ import { useTranslation } from 'react-i18next';
 import { API, showSuccess, showError } from '../../../../helpers';
 import { UserContext } from '../../../../context/User';

-// Language options with native names and flags
+// Language options with native names
 const languageOptions = [
-  { value: 'zh', label: '中文', flag: '🇨🇳' },
-  { value: 'en', label: 'English', flag: '🇺🇸' },
-  { value: 'fr', label: 'Français', flag: '🇫🇷' },
-  { value: 'ru', label: 'Русский', flag: '🇷🇺' },
-  { value: 'ja', label: '日本語', flag: '🇯🇵' },
-  { value: 'vi', label: 'Tiếng Việt', flag: '🇻🇳' },
+  { value: 'zh', label: '中文' },
+  { value: 'en', label: 'English' },
+  { value: 'fr', label: 'Français' },
+  { value: 'ru', label: 'Русский' },
+  { value: 'ja', label: '日本語' },
+  { value: 'vi', label: 'Tiếng Việt' },
 ];

 const PreferencesSettings = ({ t }) => {
@@ -151,24 +151,8 @@ const PreferencesSettings = ({ t }) => {
            loading={loading}
            optionList={languageOptions.map((opt) => ({
              value: opt.value,
-              label: (
-                <div className='flex items-center gap-2'>
-                  <span>{opt.flag}</span>
-                  <span>{opt.label}</span>
-                </div>
-              ),
+              label: opt.label,
            }))}
-            renderSelectedItem={(optionNode) => {
-              const selected = languageOptions.find(
-                (opt) => opt.value === optionNode.value,
-              );
-              return (
-                <div className='flex items-center gap-2'>
-                  <span>{selected?.flag}</span>
-                  <span>{selected?.label}</span>
-                </div>
-              );
-            }}
          />
        </div>
      </Card>