test

src/components/panes/configure-panes/keycode.tsx

@@ -42,6 +42,7 @@ import {
   disableGlobalHotKeys,
   enableGlobalHotKeys,
   getDisableFastRemap,
+  getLanguage,
 } from 'src/store/settingsSlice';
 import {getNextKey} from 'src/utils/keyboard-rendering';
 import TextInput from 'src/components/inputs/text-input';
@@ -120,8 +121,8 @@ const KeycodeDesc = styled.div`
   }
 `;
 
-const generateKeycodeCategories = (basicKeyToByte: Record<string, number>, numMacros: number = 16) =>
-  getKeycodes(numMacros).concat(getOtherMenu(basicKeyToByte));
+const generateKeycodeCategories = (basicKeyToByte: Record<string, number>, numMacros: number = 16, language: string = 'ENGLISH') =>
+  getKeycodes(numMacros, language).concat(getOtherMenu(basicKeyToByte));
 
 const maybeFilter = <M extends Function>(maybe: boolean, filter: M) =>
   maybe ? () => true : filter;
@@ -154,9 +155,10 @@ export const KeycodePane: FC = () => {
   const selectedKeyDefinitions = useAppSelector(getSelectedKeyDefinitions);
   const {basicKeyToByte} = useAppSelector(getBasicKeyToByte);
   const macroCount = useAppSelector(getMacroCount);
+  const language = useAppSelector(getLanguage);
 
   const KeycodeCategories = useMemo(
-    () => generateKeycodeCategories(basicKeyToByte, macroCount),
+    () => generateKeycodeCategories(basicKeyToByte, macroCount, language),
     [basicKeyToByte, macroCount],
   );
 

src/components/panes/settings.tsx

@@ -25,6 +25,8 @@ import {
   updateThemeName,
   getRenderMode,
   updateRenderMode,
+  getLanguage,
+  updateLanguage
 } from 'src/store/settingsSlice';
 import {AccentSelect} from '../inputs/accent-select';
 import {THEMES} from 'src/utils/themes';
@@ -35,6 +37,7 @@ import {faToolbox} from '@fortawesome/free-solid-svg-icons';
 import {getSelectedConnectedDevice} from 'src/store/devicesSlice';
 import {ErrorMessage} from '../styled';
 import {webGLIsAvailable} from 'src/utils/test-webgl';
+import {LANGUAGES} from 'src/utils/languages';
 
 const Container = styled.div`
   display: flex;
@@ -61,6 +64,7 @@ export const Settings = () => {
   const themeName = useAppSelector(getThemeName);
   const renderMode = useAppSelector(getRenderMode);
   const selectedDevice = useAppSelector(getSelectedConnectedDevice);
+  const language = useAppSelector(getLanguage);
 
   const [showDiagnostics, setShowDiagnostics] = useState(false);
 
@@ -72,6 +76,14 @@ export const Settings = () => {
     (opt) => opt.value === themeName,
   );
 
+  const languageSelectOptions = Object.keys(LANGUAGES).map((k) => ({
+    label: k.replaceAll('_', ' '),
+    value: k,
+  }));
+  const defaultLanguageValue = languageSelectOptions.find(
+    (opt) => opt.value === language
+  );
+
   const renderModeOptions = webGLIsAvailable
     ? [
         {
@@ -129,6 +141,18 @@ export const Settings = () => {
                 />
               </Detail>
             </ControlRow>
+            <ControlRow>
+              <Label>Language</Label>
+              <Detail>
+                <AccentSelect
+                  defaultValue={defaultLanguageValue}
+                  options={languageSelectOptions}
+                  onChange={(option: any) => {
+                    option && dispatch(updateLanguage(option.value));
+                  }}
+                />
+              </Detail>
+            </ControlRow>
             <ControlRow>
               <Label>Keycap Theme</Label>
               <Detail>

src/store/settingsSlice.ts

@@ -98,6 +98,10 @@ const settingsSlice = createSlice({
     enableGlobalHotKeys: (state) => {
       state.allowGlobalHotKeys = true;
     },
+    updateLanguage: (state, action: PayloadAction<string>) => {
+      state.language = action.payload;
+      setSettings(state);
+    },
   },
 });
 
@@ -113,6 +117,7 @@ export const {
   updateRenderMode,
   updateThemeName,
   updateDesignDefinitionVersion,
+  updateLanguage
 } = settingsSlice.actions;
 
 export default settingsSlice.reducer;
@@ -140,6 +145,7 @@ export const getThemeName = (state: RootState) => state.settings.themeName;
 export const getSelectedTheme = createSelector(getThemeName, (themeName) => {
   return THEMES[themeName as keyof typeof THEMES];
 });
+export const getLanguage = (state: RootState) => state.settings.language;
 
 export const getSelectedSRGBTheme = createSelector(
   getSelectedTheme,

src/types/types.ts

@@ -90,6 +90,7 @@ export type Settings = {
   macroEditor: MacroEditorSettings;
   testKeyboardSoundsSettings: TestKeyboardSoundsSettings;
   designDefinitionVersion: DefinitionVersion;
+  language: string;
 };
 
 export type CommonMenusMap = {

src/utils/device-store.ts

@@ -47,6 +47,7 @@ const defaultStoreData = {
       mode: TestKeyboardSoundsMode.WickiHayden,
       transpose: 0,
     },
+    language: 'ENGLISH',
   },
 };
 
@@ -177,3 +178,7 @@ export const getSettings = (): Settings => deviceStore.get('settings');
 export const setSettings = (settings: Settings) => {
   deviceStore.set('settings', current(settings));
 };
+
+export const getLanguageFromStore = () => {
+  return deviceStore.get('settings')?.language;
+};