test

src/components/inputs/autocomplete-keycode.tsx

@@ -11,9 +11,11 @@ const KeycodeLabel = styled.span`
   color: var(--color_label);
   display: flex;
 `;
+
 const Item = styled.div<{$selected?: boolean}>`
   box-sizing: border-box;
-  min-width: 200px;
+  min-width: 150px;
+  max-width: 300px;
   padding: 5px 10px;
   display: flex;
   justify-content: space-between;

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

@@ -42,9 +42,11 @@ import {
   disableGlobalHotKeys,
   enableGlobalHotKeys,
   getDisableFastRemap,
+  getSelectedLanguage,
 } from 'src/store/settingsSlice';
 import {getNextKey} from 'src/utils/keyboard-rendering';
 import TextInput from 'src/components/inputs/text-input';
+import { LANGUAGES } from 'src/utils/languages';
 
 const KeycodeList = styled.div`
   display: grid;
@@ -120,8 +122,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: any) =>
+  getKeycodes(numMacros, language).concat(getOtherMenu(basicKeyToByte));
 
 const maybeFilter = <M extends Function>(maybe: boolean, filter: M) =>
   maybe ? () => true : filter;
@@ -154,10 +156,11 @@ export const KeycodePane: FC = () => {
   const selectedKeyDefinitions = useAppSelector(getSelectedKeyDefinitions);
   const {basicKeyToByte} = useAppSelector(getBasicKeyToByte);
   const macroCount = useAppSelector(getMacroCount);
-
+  const language = useAppSelector(getSelectedLanguage);
+
   const KeycodeCategories = useMemo(
-    () => generateKeycodeCategories(basicKeyToByte, macroCount),
-    [basicKeyToByte, macroCount],
+    () => generateKeycodeCategories(basicKeyToByte, macroCount, language),
+    [basicKeyToByte, macroCount, language],
   );
 
   // TODO: improve typing so we can get rid of this
@@ -361,13 +364,19 @@ export const KeycodePane: FC = () => {
         const allKeycodes = []
         for (const item of getEnabledMenus())
         {
-          const itemKeycodes = KeycodeCategories.find(
+          const keycodesList = KeycodeCategories.find(
             ({id}) => id === item.id,
           )?.keycodes as IKeycode[]
+
+          // for now skip custom keycodes since those are generated above instead of inside the getKeycodes()
+          if (item.id === "custom")
+          {
+            continue
+          }
 
-          for (const key of itemKeycodes)
+          for (const keycode of keycodesList)
           {
-            allKeycodes.push(key)
+            allKeycodes.push(keycode)
           }
         }
         return (

src/components/panes/configure-panes/submenus/macros/macro-recorder.tsx

@@ -29,8 +29,10 @@ import {useAppSelector} from 'src/store/hooks';
 import {
   getMacroEditorSettings,
   setMacroEditorSettings,
+  getSelectedLanguage,
 } from 'src/store/settingsSlice';
 import {useDispatch} from 'react-redux';
+import { getMacroCount } from 'src/store/macrosSlice';
 
 declare global {
   interface Navigator {
@@ -113,10 +115,6 @@ const componentJoin = (arr: (JSX.Element | null)[], separator: JSX.Element) => {
   }, [] as (JSX.Element | null)[]);
 };
 
-const KeycodeMap = getKeycodes()
-  .flatMap((menu) => menu.keycodes)
-  .reduce((p, n) => ({...p, [n.code]: n}), {} as Record<string, IKeycode>);
-
 const optimizeKeycodeSequence = (sequence: RawKeycodeSequence) => {
   return pipeline(
     sequence,
@@ -158,6 +156,12 @@ export const MacroRecorder: React.FC<{
     isRecording,
     recordDelaysEnabled,
   );
+
+  const numMacros = useAppSelector(getMacroCount)
+  const language = useAppSelector(getSelectedLanguage)
+  const KeycodeMap = getKeycodes(numMacros, language)
+  .flatMap((menu) => menu.keycodes)
+  .reduce((p, n) => ({...p, [n.code]: n}), {} as Record<string, IKeycode>);
   const macroSequenceRef = useRef<HTMLDivElement>(null);
   const recordingToggleChange = useCallback(
     async (isRecording: boolean) => {

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

@@ -12,6 +12,7 @@ import {makeSRGBTheme} from 'src/utils/keyboard-rendering';
 import {updateCSSVariables} from 'src/utils/color-math';
 import {webGLIsAvailable} from 'src/utils/test-webgl';
 import {DefinitionVersion} from '@the-via/reader';
+import { LANGUAGES } from 'src/utils/languages';
 
 // TODO: why are these settings mixed? Is it because we only want some of them cached? SHould we rename to "CachedSettings"?
 type SettingsState = Settings & {
@@ -98,6 +99,10 @@ const settingsSlice = createSlice({
     enableGlobalHotKeys: (state) => {
       state.allowGlobalHotKeys = true;
     },
+    updateLanguage: (state, action: PayloadAction<string>) => {
+      state.language = action.payload;
+      setSettings(state);
+    },
   },
 });
 
@@ -113,6 +118,7 @@ export const {
   updateRenderMode,
   updateThemeName,
   updateDesignDefinitionVersion,
+  updateLanguage
 } = settingsSlice.actions;
 
 export default settingsSlice.reducer;
@@ -140,6 +146,10 @@ 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 getSelectedLanguage = createSelector(getLanguage, (language) => {
+  return LANGUAGES[language as keyof typeof LANGUAGES];
+});
 
 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;
+};