Request: Add ability to create layer aliases in the json defs.

[vinorodrigues]

Some keyboards use layers to define certain feature sets, specifically kb's with dip switch functionality.

It would be nice to be able to add UI aliases to the layers so that the app show the alias instead of the "[0][1][2][3]".

I would envision this to only be relative to the UI ... underlying protocol and QMK needs no changes. The json file could have something like this (example only):

{
    "layer_alias": [
        "0": "Mac",
        "1": "Mac-Fn",
        "2": "Win",
        "3": "Win-Fn"
    ]
}

The UI would then show: [Mac][Mac-Fn][Win][Win-Fn]

[Gadgetoid]

This is quite a gotcha with the Keychron K3 and I guess their other QMK boards.

I grabbed the source and patched a local copy for giggles-

diff --git a/src/components/panes/configure-panes/layer-control.tsx b/src/components/panes/configure-panes/layer-control.tsx
index 6f36e8a..d3d48c8 100644
--- a/src/components/panes/configure-panes/layer-control.tsx
+++ b/src/components/panes/configure-panes/layer-control.tsx
@@ -45,19 +45,25 @@ export const LayerControl = () => {
   const dispatch = useDispatch();
   const numberOfLayers = useAppSelector(getNumberOfLayers);
   const selectedLayerIndex = useAppSelector(getSelectedLayerIndex);
+  const layerLabels = [
+    "macOS",
+    "macOS Fn",
+    "Windows",
+    "Windows Fn"
+  ];

   const Layers = useMemo(
     () =>
       new Array(numberOfLayers)
         .fill(0)
         .map((_, idx) => idx)
-        .map((layerLabel) => (
+        .map((layerIndex) => (
           <LayerButton
-            key={layerLabel}
-            $selected={layerLabel === selectedLayerIndex}
-            onClick={() => dispatch(setLayer(layerLabel))}
+            key={layerIndex}
+            $selected={layerIndex === selectedLayerIndex}
+            onClick={() => dispatch(setLayer(layerIndex))}
           >
-            {layerLabel}
+            {layerLabels[layerIndex]}
           </LayerButton>
         )),
     [numberOfLayers, selectedLayerIndex],

This is a half-baked fix, but someone might find it useful as a stop-gap.

The UI isn't really set up to deal well with labels and the result of this change is pretty ugly:

But maybe a fraction less confusing!

[Gadgetoid]

Okay with some feedback from Discord and probably many, many sins (I am not a React developer) -

diff --git a/src/components/panes/configure-panes/layer-control.tsx b/src/components/panes/configure-panes/layer-control.tsx
index 6f36e8a..6158fb9 100644
--- a/src/components/panes/configure-panes/layer-control.tsx
+++ b/src/components/panes/configure-panes/layer-control.tsx
@@ -1,6 +1,11 @@
 import {useMemo} from 'react';
 import {useDispatch} from 'react-redux';
 import {useAppSelector} from 'src/store/hooks';
+import {getDarkenedColor, getBrightenedColor} from 'src/utils/color-math';
+import {Theme} from 'src/utils/themes';
+import {
+  getSelectedTheme,
+} from 'src/store/settingsSlice';
 import {
   getNumberOfLayers,
   getSelectedLayerIndex,
@@ -20,24 +25,41 @@ const Label = styled.label`
   color: var(--color_label-highlighted);
   margin-right: 6px;
 `;
-const LayerButton = styled.button<{$selected?: boolean}>`
+const LayerButton = styled.button<{theme: Theme, $selected?: boolean}>`
   outline: none;
   font-variant-numeric: tabular-nums;
+  padding: 0 5px 0 0;
   border: none;
+  margin-left: 5px;
   background: ${(props) =>
-    props.$selected ? 'var(--color_accent)' : 'transparent'};
+    props.$selected
+      ? props.theme.accent.c
+      : getBrightenedColor(props.theme.mod.c, 0.7)};
   color: ${(props) =>
     props.$selected
-      ? 'var(--color_inside-accent)'
-      : 'var(--color_label-highlighted)'};
+      ? props.theme.mod.c
+      : props.theme.accent.c};
   cursor: pointer;
   font-size: 20px;
   font-weight: 400;
+  span {
+    display: inline-block;
+    height: 100%;
+    width: 25px;
+    text-align: center;
+    border-right: 1px solid transparent;
+    background-color: ${(props) =>
+      props.$selected ? getDarkenedColor(props.theme.accent.c, 0.9) : props.theme.mod.c};
+  }
   &:hover {
     border: none;
-    background: ${(props) => (props.$selected ? 'auto' : 'var(--bg_menu)')};
+    background: ${(props) => props.$selected ? getBrightenedColor(props.theme.accent.c, 0.6) : getBrightenedColor(props.theme.mod.c, 0.6)};
     color: ${(props) =>
-      props.$selected ? 'auto' : 'var(--color_label-highlighted)'};
+      props.$selected ? 'auto' : 'auto'};
+    span {
+        background-color: ${(props) =>
+          props.$selected ? getBrightenedColor(props.theme.accent.c, 0.7) : getBrightenedColor(props.theme.mod.c, 0.7)};
+      }
   }
 `;

@@ -45,19 +67,27 @@ export const LayerControl = () => {
   const dispatch = useDispatch();
   const numberOfLayers = useAppSelector(getNumberOfLayers);
   const selectedLayerIndex = useAppSelector(getSelectedLayerIndex);
+  const theme = useAppSelector(getSelectedTheme);
+  const layerLabels = [
+    "macOS",
+    "macOS Fn",
+    "Windows",
+    "Windows Fn"
+  ];

   const Layers = useMemo(
     () =>
       new Array(numberOfLayers)
         .fill(0)
         .map((_, idx) => idx)
-        .map((layerLabel) => (
+        .map((layerIndex) => (
           <LayerButton
-            key={layerLabel}
-            $selected={layerLabel === selectedLayerIndex}
-            onClick={() => dispatch(setLayer(layerLabel))}
+            theme={theme}
+            key={layerIndex}
+            $selected={layerIndex === selectedLayerIndex}
+            onClick={() => dispatch(setLayer(layerIndex))}
           >
-            {layerLabel}
+            <span>{layerIndex}</span> {layerLabels[layerIndex]}
           </LayerButton>
         )),
     [numberOfLayers, selectedLayerIndex],