Add language settings and toggle

src/i18n/i18n.ts

@@ -1,13 +1,13 @@
 import { PostProcessorModule } from 'i18next';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-const en = require('./locales/en.json');
+import en from './locales/en.json';
 
 const resources = {
     en: { translation: en },
 };
 
-export const Languages = [
+export const languages = [
     {
         label: 'English',
         value: 'en',
@@ -66,7 +66,6 @@ i18n.use(lowerCasePostProcessor)
         interpolation: {
             escapeValue: false, // react already safes from xss
         },
-        lng: 'en',
         resources,
     });
 

src/renderer/app.tsx

@@ -26,6 +26,7 @@ import { PlayerState, usePlayerStore, useQueueControls } from '/@/renderer/store
 import { FontType, PlaybackType, PlayerStatus } from '/@/renderer/types';
 import '@ag-grid-community/styles/ag-grid.css';
 import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
+import i18n from '/@/i18n/i18n';
 
 ModuleRegistry.registerModules([ClientSideRowModelModule, InfiniteRowModelModule]);
 
@@ -39,6 +40,7 @@ const remote = isElectron() ? window.electron.remote : null;
 export const App = () => {
     const theme = useTheme();
     const accent = useSettingsStore((store) => store.general.accent);
+    const language = useSettingsStore((store) => store.general.language);
     const { builtIn, custom, system, type } = useSettingsStore((state) => state.font);
     const { type: playbackType } = usePlaybackSettings();
     const { bindings } = useHotkeySettings();
@@ -178,6 +180,12 @@ export const App = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    useEffect(() => {
+        if (language) {
+            i18n.changeLanguage(language);
+        }
+    }, [language]);
+
     return (
         <MantineProvider
             withGlobalStyles

src/renderer/features/settings/components/general/application-settings.tsx

@@ -13,7 +13,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FontType } from '/@/renderer/types';
-import i18n from '/@/i18n/i18n';
+import i18n, { languages } from '/@/i18n/i18n';
 
 const localSettings = isElectron() ? window.electron.localSettings : null;
 const ipc = isElectron() ? window.electron.ipc : null;
@@ -146,12 +146,22 @@ export const ApplicationSettings = () => {
         getFonts();
     }, [fontSettings, localFonts, setSettings, t]);
 
+    const handleChangeLanguage = (e: string) => {
+        setSettings({
+            general: {
+                ...settings,
+                language: e,
+            },
+        });
+    };
+
     const options: SettingOption[] = [
         {
             control: (
                 <Select
-                    disabled
-                    data={[]}
+                    data={languages}
+                    value={settings.language}
+                    onChange={handleChangeLanguage}
                 />
             ),
             description: t('setting.language', {

src/renderer/store/settings.store.ts

@@ -171,7 +171,7 @@ export interface SettingsState {
         accent: string;
         defaultFullPlaylist: boolean;
         followSystemTheme: boolean;
-
+        language: string;
         playButtonBehavior: Play;
         resume: boolean;
         showQueueDrawerButton: boolean;
@@ -282,6 +282,7 @@ const initialState: SettingsState = {
         accent: 'rgb(53, 116, 252)',
         defaultFullPlaylist: true,
         followSystemTheme: false,
+        language: 'en',
         playButtonBehavior: Play.NOW,
         resume: false,
         showQueueDrawerButton: false,