feat: recording of keystrokes on the keyboard followed by insertion on the layer

src/components/n-links/keyboard.tsx

@@ -1,5 +1,6 @@
 import {useCallback, useContext, useEffect, useMemo} from 'react';
 import {matrixKeycodes} from 'src/utils/key-event';
+import { useKeyboardRecord } from 'src/utils/use-keyboard-record';
 import fullKeyboardDefinition from '../../utils/test-keyboard-definition.json';
 import {VIAKey, DefinitionVersionMap} from '@the-via/reader';
 import {useAppDispatch, useAppSelector} from 'src/store/hooks';
@@ -79,6 +80,9 @@ export const ConfigureKeyboard = (props: {
   }
 
   const KeyboardCanvas = getKeyboardCanvas(props.nDimension);
+
+  useKeyboardRecord();
+
   return (
     <>
       <KeyboardCanvas
@@ -227,7 +231,7 @@ export const Design = (props: {
 };
 
 const EMPTY_ARR = [] as any[];
-export const Test = (props: {dimensions?: DOMRect; nDimension: NDimension}) => {
+export const Test = (props: { dimensions?: DOMRect; nDimension: NDimension }) => {
   const dispatch = useAppDispatch();
   const [path] = useLocation();
   const isShowingTest = path === '/test';
@@ -336,7 +340,7 @@ export const Test = (props: {dimensions?: DOMRect; nDimension: NDimension}) => {
         nDimension={props.nDimension}
       />
       {partitionedPressedKeys && testKeyboardSoundsSettings.isEnabled && (
-        <TestKeyboardSounds pressedKeys={partitionedPressedKeys} />
+        <TestKeyboardSounds pressedKeys={partitionedPressedKeys}/>
       )}
     </>
   );

src/components/panes/settings.tsx

@@ -24,7 +24,7 @@ import {
   getThemeName,
   updateThemeName,
   getRenderMode,
-  updateRenderMode,
+  updateRenderMode, getDisableRecordKeyboard, toggleRecordKeyboard,
 } from 'src/store/settingsSlice';
 import {AccentSelect} from '../inputs/accent-select';
 import {THEMES} from 'src/utils/themes';
@@ -57,6 +57,7 @@ export const Settings = () => {
   const dispatch = useDispatch();
   const showDesignTab = useAppSelector(getShowDesignTab);
   const disableFastRemap = useAppSelector(getDisableFastRemap);
+  const disableRecordKeyboard = useAppSelector(getDisableRecordKeyboard);
   const themeMode = useAppSelector(getThemeMode);
   const themeName = useAppSelector(getThemeName);
   const renderMode = useAppSelector(getRenderMode);
@@ -94,7 +95,7 @@ export const Settings = () => {
           <MenuContainer>
             <Row $selected={true}>
               <IconContainer>
-                <FontAwesomeIcon icon={faToolbox} />
+                <FontAwesomeIcon icon={faToolbox}/>
                 <MenuTooltip>General</MenuTooltip>
               </IconContainer>
             </Row>
@@ -120,6 +121,15 @@ export const Settings = () => {
                 />
               </Detail>
             </ControlRow>
+            <ControlRow>
+              <Label>Record Keyboard</Label>
+              <Detail>
+                <AccentSlider
+                  onChange={() => dispatch(toggleRecordKeyboard())}
+                  isChecked={!disableRecordKeyboard}
+                />
+              </Detail>
+            </ControlRow>
             <ControlRow>
               <Label>Light Mode</Label>
               <Detail>

src/store/settingsSlice.ts

@@ -42,6 +42,9 @@ const settingsSlice = createSlice({
     toggleFastRemap: (state) => {
       toggleBool(state, 'disableFastRemap');
     },
+    toggleRecordKeyboard: (state) => {
+      toggleBool(state, 'disableRecordKeyboard');
+    },
     toggleCreatorMode: (state) => {
       toggleBool(state, 'showDesignTab');
     },
@@ -104,6 +107,7 @@ const settingsSlice = createSlice({
 export const {
   toggleFastRemap,
   toggleCreatorMode,
+  toggleRecordKeyboard,
   setTestMatrixEnabled,
   setTestKeyboardSoundsSettings,
   setMacroEditorSettings,
@@ -123,6 +127,8 @@ export const getAllowGlobalHotKeys = (state: RootState) =>
   state.settings.allowGlobalHotKeys;
 export const getDisableFastRemap = (state: RootState) =>
   state.settings.disableFastRemap;
+export const getDisableRecordKeyboard = (state: RootState) =>
+  state.settings.disableRecordKeyboard;
 export const getShowDesignTab = (state: RootState) =>
   state.settings.showDesignTab;
 export const getRestartRequired = (state: RootState) =>

src/types/types.ts

@@ -84,6 +84,7 @@ export type TestKeyboardSoundsSettings = {
 export type Settings = {
   showDesignTab: boolean;
   disableFastRemap: boolean;
+  disableRecordKeyboard: boolean;
   renderMode: '3D' | '2D';
   themeMode: 'light' | 'dark';
   themeName: string;

src/utils/device-store.ts

@@ -31,6 +31,7 @@ const defaultStoreData = {
   settings: {
     showDesignTab: false,
     disableFastRemap: false,
+    disableRecordKeyboard: false,
     renderMode: '2D' as const,
     themeMode: 'dark' as const,
     designDefinitionVersion: 'v3' as const,