Add ALL keycode tab and search

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/inputs/custom-keycode-modal.tsx

@@ -20,6 +20,7 @@ import {
   PromptText,
   RowDiv,
 } from './dialog-base';
+import { getSelectedLanguage } from 'src/store/settingsSlice';
 
 const AutocompleteContainer = styled.ul`
   position: fixed;

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

@@ -1,4 +1,4 @@
 import {FC, useState, useEffect, useMemo} from 'react';
 import styled from 'styled-components';
 import {Button} from '../../inputs/button';
 import {KeycodeModal} from '../../inputs/custom-keycode-modal';
@@ -42,8 +42,12 @@
   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;
   grid-template-columns: repeat(auto-fill, 64px);
@@ -95,6 +99,7 @@
 `;
 
 const KeycodeContainer = styled.div`
+  text-align: center;
   padding: 12px;
   padding-bottom: 30px;
 `;
@@ -151,10 +156,11 @@
   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
@@ -275,6 +281,13 @@
 
   const renderKeycode = (keycode: IKeycode, index: number) => {
     const {code, title, name} = keycode;
+    const found = code.toLowerCase().includes(search) || name.toLowerCase().includes(search) || title?.toLowerCase().includes(search) || false
+    if (search !== "" && !found)
+    {
+      return (
+        <></>
+      )
+    }
     return (
       <Keycode
         key={code}
@@ -301,6 +314,8 @@
     );
   };
 
+  const [search, setSearch] = useState("")
+
   const renderSelectedCategory = (
     keycodes: IKeycode[],
     selectedCategory: string,
@@ -345,6 +360,33 @@
           </KeycodeList>
         );
       }
+      case 'all': {
+        const allKeycodes = []
+        for (const item of getEnabledMenus())
+        {
+          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 keycode of keycodesList)
+          {
+            allKeycodes.push(keycode)
+          }
+        }
+        return (
+          <KeycodeList>
+            {allKeycodes.map((keycode, i) =>
+              renderKeycode(keycode, i),
+            ).concat(renderCustomKeycode())}
+          </KeycodeList>
+        )
+      }
       default: {
         return <KeycodeList>{keycodeListItems}</KeycodeList>;
       }
@@ -360,6 +402,7 @@
       <SubmenuOverflowCell>{renderCategories()}</SubmenuOverflowCell>
       <OverflowCell>
         <KeycodeContainer>
+          <TextInput placeholder = "search..." onChange={(e) => {setSearch(e.target.value.toLowerCase())}}/>
           {renderSelectedCategory(selectedCategoryKeycodes, selectedCategory)}
         </KeycodeContainer>
         <KeycodeDesc>{mouseOverDesc}</KeycodeDesc>

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,11 @@ export const MacroRecorder: React.FC<{
     isRecording,
     recordDelaysEnabled,
   );
+
+  const numMacros = useAppSelector(getMacroCount)
+  const KeycodeMap = getKeycodes(numMacros)
+  .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,8 @@ 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';
+import { updateKeycodesList } from '../utils/key';
 
 // 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 +100,10 @@ const settingsSlice = createSlice({
     enableGlobalHotKeys: (state) => {
       state.allowGlobalHotKeys = true;
     },
+    updateLanguage: (state, action: PayloadAction<string>) => {
+      state.language = action.payload;
+      setSettings(state);
+    },
   },
 });
 
@@ -113,6 +119,7 @@ export const {
   updateRenderMode,
   updateThemeName,
   updateDesignDefinitionVersion,
+  updateLanguage
 } = settingsSlice.actions;
 
 export default settingsSlice.reducer;
@@ -140,6 +147,11 @@ 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) => {
+  updateKeycodesList();
+  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;
+};