From 899621a8354f6bdae4cea7a0c28346a239752e6d Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Fri, 30 Jun 2023 01:17:04 +0200
Subject: [PATCH] Show the keycode in the tooltip

---
 src/components/two-string/unit-key/keycap.tsx | 6 ++++--
 src/utils/keyboard-rendering.ts               | 5 +++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/two-string/unit-key/keycap.tsx b/src/components/two-string/unit-key/keycap.tsx
index 027adc1c..ac67c75a 100644
--- a/src/components/two-string/unit-key/keycap.tsx
+++ b/src/components/two-string/unit-key/keycap.tsx
@@ -301,6 +301,8 @@ export const Keycap: React.FC<TwoStringKeycapProps> = React.memo((props) => {
     idx,
     mode,
   ]);
+  const primaryTooltip = macroData || (label && label.tooltipLabel)
+  const secondaryTooltip = label?.keyCode
   return shouldRotate ? (
     <EncoderKey
       onClick={onClick}
@@ -405,10 +407,10 @@ export const Keycap: React.FC<TwoStringKeycapProps> = React.memo((props) => {
             <canvas ref={canvasRef} style={{}} />
           </CanvasContainer>
         </GlowContainer>
-        {(macroData || overflowsTexture) && (
+        {(macroData || overflowsTexture || (label?.tooltipLabel) || (label?.keyCode)) && (
           <TooltipContainer $rotate={rotation[2]}>
             <Keycap2DTooltip>
-              {macroData || (label && label.tooltipLabel)}
+              {primaryTooltip || secondaryTooltip}{secondaryTooltip && primaryTooltip && ` (${secondaryTooltip})`}
             </Keycap2DTooltip>
           </TooltipContainer>
         )}
diff --git a/src/utils/keyboard-rendering.ts b/src/utils/keyboard-rendering.ts
index 689f9885..3804bacb 100644
--- a/src/utils/keyboard-rendering.ts
+++ b/src/utils/keyboard-rendering.ts
@@ -491,6 +491,8 @@ export const getLabel = (
     tooltipLabel = macroExpression || '';
   }
 
+  const keyCode = byteToKey[keycodeByte];
+
   if (isAlpha(label) || isNumpadNumber(label)) {
     return (
       label && {
@@ -499,6 +501,7 @@ export const getLabel = (
         key: (label || '') + (macroExpression || ''),
         size: size,
         offset: offset,
+        keyCode,
       }
     );
   } else if (isMultiLegend(label)) {
@@ -512,6 +515,7 @@ export const getLabel = (
         key: (label || '') + (macroExpression || ''),
         size: size,
         offset: getLabelOffsets(topLabel, bottomLabel),
+        keyCode,
       }
     );
   } else {
@@ -529,6 +533,7 @@ export const getLabel = (
       key: (label || '') + (macroExpression || ''),
       size: size,
       offset: offset,
+      keyCode,
     };
   }
 };