Refine dual-use layer limit handling

- Added a `limits` object with `secondaryActionLayerLimit` to `constants` in `constants.js` to define the maximum layer limit for secondary actions due to technical constraints in Kaleidoscope.
- Updated `LayerKeys.js` and `SecondaryFunction.js` to use `secondaryActionLayerLimit` from `constants` for enforcing layer limits on dual-use keys, improving code maintainability and clarity.
- Disabled layer selection beyond the limit in the UI for better user guidance in `LayerKeys.js`.

Fixes #1338

src/api/focus/keymap/db/constants.js

@@ -69,6 +69,12 @@ const keycode_ranges = {
   turbo: { start: 0xd15b, end: 0xd15b },
 };
 export const constants = {
+  limits: {
+    // Using a secondary action for layer shifts is limited to 8 layers due to
+    // technical reasons in Kaleidoscope. We overflow the key range assigned to
+    // secondary actions if we got beyond layer 7. (Layer 0 is the first layer.)
+    secondaryActionLayerLimit: 7,
+  },
   codes: {
     // Keycodes
     ESCAPE: 41,

src/renderer/screens/Editor/Sidebar/LayerKeys.js

@@ -48,8 +48,8 @@ const LayerKeys = (props) => {
     if (db.isInCategory(key.code, "layer") && key.categories.includes("dualuse")) {
       const code = key.baseCode || key.code;
 
-      if (target < 0) target = getMaxLayer();
-      if (target > getMaxLayer()) target = 0;
+      if (target < 0) target = db.constants.limits.secondaryActionLayerLimit;
+      if (target > db.constants.limits.secondaryActionLayerLimit) target = 0;
 
       props.onKeyChange(addDualUseLayer(db.lookup(code), target).code);
     } else {
@@ -120,7 +120,7 @@ const LayerKeys = (props) => {
           >
             <MenuItem value="-1" disabled></MenuItem>
             {[...Array(getMaxLayer())].map((x, i) => (
-              <MenuItem key={i} name={i} value={i}>
+              <MenuItem key={i} name={i} value={i} disabled={i > db.constants.limits.secondaryActionLayerLimit}>
                 {props.layerNames?.names[i]}
               </MenuItem>
             ))}

src/renderer/screens/Editor/Sidebar/SecondaryFunction.js

@@ -78,10 +78,6 @@ const SecondaryFunction = (props) => {
 
   const { currentKey: key, keymap } = props;
   const maxLayer = keymap.custom.length;
-  // Using a secondary action for layer shifts is limited to 8 layers due to
-  // technical reasons in Kaleidoscope. We overflow the key range assigned to
-  // secondary actions if we got beyond layer 7. (Layer 0 is the first layer.)
-  const secondaryActionLayerLimit = 7;
 
   let type = "none",
     targetLayer = -1,
@@ -131,9 +127,9 @@ const SecondaryFunction = (props) => {
       targetLayer = key.target;
 
       let layerLimitText = "";
-      if (maxLayer > secondaryActionLayerLimit) {
+      if (maxLayer > db.constants.limits.secondaryActionLayerLimit) {
         layerLimitText = t("editor.sidebar.secondary.help-layerLimit", {
-          layer7: props.layerNames?.names[secondaryActionLayerLimit],
+          layer7: props.layerNames?.names[db.constants.limits.secondaryActionLayerLimit],
         });
       }
 
@@ -142,7 +138,7 @@ const SecondaryFunction = (props) => {
           <InputLabel id="editor.sidebar.secondary.targetLayer">
             {t("editor.sidebar.secondary.targetLayer")}{" "}
           </InputLabel>
-          <Tooltip title={maxLayer > secondaryActionLayerLimit && layerLimitText}>
+          <Tooltip title={maxLayer > db.constants.limits.secondaryActionLayerLimit && layerLimitText}>
             <Select
               labelId="editor.sidebar.secondary.targetLayer"
               value={targetLayer}
@@ -152,7 +148,12 @@ const SecondaryFunction = (props) => {
             >
               <MenuItem value="-1" disabled></MenuItem>
               {[...Array(maxLayer)].map((x, i) => (
-                <MenuItem name={i} key={`dualuse-dropdown-${i}`} value={i} disabled={i > secondaryActionLayerLimit}>
+                <MenuItem
+                  name={i}
+                  key={`dualuse-dropdown-${i}`}
+                  value={i}
+                  disabled={i > db.constants.limits.secondaryActionLayerLimit}
+                >
                   {props.layerNames?.names[i]}
                 </MenuItem>
               ))}