Add key headers outside of hover state

src/keyboard/Key.tsx

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from "react";
+import BehaviorShortNames from "./behavior-short-names.json";
 
 interface KeyProps {
   selected?: boolean;
@@ -9,6 +10,30 @@ interface KeyProps {
   onClick?: () => void;
 }
 
+interface BehaviorShortName {
+  short?: string;
+}
+
+const MAX_HEADER_LENGTH = 9;
+const shortNames: Record<string, BehaviorShortName> = BehaviorShortNames;
+
+const shortenHeader = (header: string | undefined) => {
+  if(typeof header === "undefined"){
+    return "";
+  }
+  // Empty string is a valid header for behaviors where we don't want to see a header, which is falsy
+  // So we use an undefined check here
+  if(typeof shortNames[header]?.short !== "undefined"){
+    return shortNames[header].short;
+  } else if(header.length > MAX_HEADER_LENGTH){
+    const words = header.split(/[\s,-]+/);
+    const lettersPerWord = Math.trunc(MAX_HEADER_LENGTH / words.length);
+    return words.map((word) => (word.substring(0,lettersPerWord))).join("");
+  } else {
+    return header;
+  }
+}
+
 export const Key = ({
   selected = false,
   width,
@@ -31,7 +56,7 @@ export const Key = ({
       }}
       onClick={onClick}
     >
-      <div className={`absolute text-xs ${selected ? "text-primary-content" : "z1text-base-content"} opacity-0 group-hover:opacity-80 top-1 text-nowrap left-1/2 font-light -translate-x-1/2 text-center transition-opacity`}>{header}</div>
+      <div className={`absolute text-xs ${selected ? "text-primary-content" : "z1text-base-content"} opacity-80 top-1 text-nowrap left-1/2 font-light -translate-x-1/2 text-center`}>{shortenHeader(header)}</div>
       {children}
     </button>
   );

src/keyboard/behavior-short-names.json

@@ -0,0 +1,14 @@
+{
+    "Key Press": {"short": ""},
+    "Bootloader": {"short": "Bootloadr"},
+    "External Power": {"short": "Ext Pwr"},
+    "Grave/Escape": {"short": "Grv/Esc"},
+    "Key Repeat": {"short": "Key Rept"},
+    "Key Toggle": {"short": "Key Togg"},
+    "Momentary Layer": {"short": "MLayer"},
+    "Output Selection": {"short": "OutputSel"},
+    "Sticky Key": {"short": "Stcky Key"},
+    "Studio Unlock": {"short": "Unlock"},
+    "Toggle Layer": {"short": "Togg Layr"},
+    "Transparent": {"short": "Transprnt"}
+}