feat: added French support

src/components/settings/sections/GeneralSettings.test.tsx

@@ -89,15 +89,15 @@ vi.mock('../../../util/local-separator/modelCache', () => ({
 }));
 
 describe('GeneralSettings', () => {
-  const renderSettings = () => render(
+  const renderSettings = (locale: 'en_us' | 'zh_cn' = 'en_us') => render(
     <I18nContext.Provider
       value={{
         languageSetting: 'auto',
-        resolvedLocale: 'en_us',
+        resolvedLocale: locale,
         setLanguageSetting: async (value) => {
           await configManagerMock.set('general.language', value);
         },
-        t: (key, params) => translate(key, params, 'en_us'),
+        t: (key, params) => translate(key, params, locale),
       }}
     >
       <GeneralSettings />
@@ -137,6 +137,24 @@ describe('GeneralSettings', () => {
     expect(screen.getByText(/require more VRAM/i)).toBeTruthy();
   });
 
+  it('uses native language names in the language dropdown', async () => {
+    renderSettings();
+
+    const select = await screen.findByLabelText('Language');
+    const options = Array.from((select as HTMLSelectElement).options).map((option) => option.text);
+
+    expect(options).toEqual(['Auto', 'English', 'Français', '简体中文', '繁體中文']);
+  });
+
+  it('localizes the auto label while keeping language names native', async () => {
+    renderSettings('zh_cn');
+
+    const select = await screen.findByLabelText('语言');
+    const options = Array.from((select as HTMLSelectElement).options).map((option) => option.text);
+
+    expect(options).toEqual(['自动', 'English', 'Français', '简体中文', '繁體中文']);
+  });
+
   it('initializes the local context length from config', async () => {
     renderSettings();
 
@@ -251,11 +269,12 @@ describe('GeneralSettings', () => {
     const languageSelect = await screen.findByLabelText('Language');
     expect(languageSelect).toBeTruthy();
     expect(screen.getAllByRole('combobox')[0]).toBe(languageSelect);
+    expect(screen.getByRole('option', { name: 'Français' })).toBeTruthy();
 
-    fireEvent.change(languageSelect, { target: { value: 'zh_cn' } });
+    fireEvent.change(languageSelect, { target: { value: 'fr_fr' } });
 
     await waitFor(() => {
-      expect(configManagerMock.set).toHaveBeenCalledWith('general.language', 'zh_cn');
+      expect(configManagerMock.set).toHaveBeenCalledWith('general.language', 'fr_fr');
     });
   });
 });

src/components/settings/sections/GeneralSettings.tsx

@@ -19,6 +19,13 @@ import {
   LOCAL_SEPARATOR_MODEL_IDS,
 } from '../../../util/local-separator/config';
 
+const LANGUAGE_OPTION_LABELS: Record<Exclude<LanguageSetting, 'auto'>, string> = {
+  en_us: 'English',
+  fr_fr: 'Français',
+  zh_cn: '简体中文',
+  zh_hk: '繁體中文',
+};
+
 const GeneralSettings: React.FC = () => {
   const { t, setLanguageSetting } = useI18n();
   const [language, setLanguage] = useState<LanguageSetting>('auto');
@@ -352,9 +359,10 @@ const GeneralSettings: React.FC = () => {
               onChange={(e) => void handleLanguageChange(e.target.value as LanguageSetting)}
             >
               <option value="auto">{t('settings.general.language.auto')}</option>
-              <option value="en_us">{t('settings.general.language.en_us')}</option>
-              <option value="zh_cn">{t('settings.general.language.zh_cn')}</option>
-              <option value="zh_hk">{t('settings.general.language.zh_hk')}</option>
+              <option value="en_us">{LANGUAGE_OPTION_LABELS.en_us}</option>
+              <option value="fr_fr">{LANGUAGE_OPTION_LABELS.fr_fr}</option>
+              <option value="zh_cn">{LANGUAGE_OPTION_LABELS.zh_cn}</option>
+              <option value="zh_hk">{LANGUAGE_OPTION_LABELS.zh_hk}</option>
             </select>
             <div className="settings-help" style={{ fontSize: '12px', color: '#888', marginTop: '4px' }}>
               {t('settings.general.language.help')}