feat(keybinds): draw the macropad beside the list

The pad glyph on each row was too small to read. The left fifth of the
overlay now draws the pad at size, each key labelled with its plain
action; hovering a key or an encoder lists everything it does, held
keys and turn direction spelled out. padActions() in Binds.js inverts
the grouped rows into that per-key list, and PAD's turn values became
words for it. The panel is pinned at a fixed height: centred, it moved
whenever the hovered key's list changed length.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 30 insertions, 12 deletions

diff --git a/keybinds/Binds.js b/keybinds/Binds.js
index d02c714..1f809cf 100644
--- a/keybinds/Binds.js
+++ b/keybinds/Binds.js
@@ -49,7 +49,7 @@ function keys(bind) {
 // Where a bind sits on the macropad, keyed by the combo as keys() writes it,
 // so a renamed key above must be renamed here too. key is 1-12, left to
 // right and top to bottom; knob is the top or bottom encoder with how it is
-// turned; mod is what is held with it. The pad's firmware sends these combos.
+// turned or pressed; mod is what is held with it. The pad's firmware sends these combos.
 const PAD = Object.assign(Object.create(null), {
     "Win + w": { key: 1 },
     "Win + SHIFT + w": { key: 1, mod: "Shift" },
@@ -63,16 +63,16 @@ const PAD = Object.assign(Object.create(null), {
     "ALT + h": { key: 6 },
     "Win + CTRL + r": { key: 7 },
     "ALT + w": { key: 8 },
-    "Volume -": { knob: "top", turn: "↺" },
-    "Volume +": { knob: "top", turn: "↻" },
-    "Mute": { knob: "top", turn: "●" },
-    "Win + Volume -": { knob: "top", turn: "↺", mod: "Win" },
-    "Win + Volume +": { knob: "top", turn: "↻", mod: "Win" },
-    "Previous song": { knob: "bottom", turn: "↺" },
-    "Next song": { knob: "bottom", turn: "↻" },
-    "Play/Pause": { knob: "bottom", turn: "●" },
-    "Win + Previous song": { knob: "bottom", turn: "↺", mod: "Win" },
-    "Win + Next song": { knob: "bottom", turn: "↻", mod: "Win" },
+    "Volume -": { knob: "top", turn: "Turn left" },
+    "Volume +": { knob: "top", turn: "Turn right" },
+    "Mute": { knob: "top", turn: "Press" },
+    "Win + Volume -": { knob: "top", turn: "Turn left", mod: "Win" },
+    "Win + Volume +": { knob: "top", turn: "Turn right", mod: "Win" },
+    "Previous song": { knob: "bottom", turn: "Turn left" },
+    "Next song": { knob: "bottom", turn: "Turn right" },
+    "Play/Pause": { knob: "bottom", turn: "Press" },
+    "Win + Previous song": { knob: "bottom", turn: "Turn left", mod: "Win" },
+    "Win + Next song": { knob: "bottom", turn: "Turn right", mod: "Win" },
 });
 // The bottom row is workspaces 1-4, 5-8 with Shift, and moves the window
 // there with Win held on the keyboard.
@@ -80,7 +80,7 @@ for (let i = 1; i <= 4; i++) {
     PAD["CTRL + F" + i] = { key: 8 + i };
     PAD["CTRL + SHIFT + F" + i] = { key: 8 + i, mod: "Shift" };
     PAD["Win + CTRL + F" + i] = { key: 8 + i, mod: "Win" };
-    PAD["Win + CTRL + SHIFT + F" + i] = { key: 8 + i, mod: "Win Shift" };
+    PAD["Win + CTRL + SHIFT + F" + i] = { key: 8 + i, mod: "Win + Shift" };
 }
 
 // A description reads "Group: Label". A bind without one still shows, last,
@@ -109,3 +109,21 @@ function group(binds) {
     if (undescribed.length) groups.push({ name: "Undescribed", rows: undescribed });
     return groups;
 }
+
+// Everything each pad key or encoder does, from group()'s output: "k1" to
+// "k12", "top" and "bottom", each a list of { how, label } in list order.
+function padActions(groups) {
+    const out = Object.create(null);
+    for (const g of groups) {
+        for (const r of g.rows) {
+            if (!r.pad) continue;
+            const id = r.pad.key ? "k" + r.pad.key : r.pad.knob;
+            if (!out[id]) out[id] = [];
+            out[id].push({
+                how: [r.pad.mod, r.pad.turn || "Press"].filter(Boolean).join(" + "),
+                label: r.label,
+            });
+        }
+    }
+    return out;
+}