feat(keybinds): draw the macropad keycaps as they look

Each key showed its plain action as text. It now carries the real
cap's legends, Nerd Font glyphs checked by name in Inconsolata, with
the shifted or Alt legend below and the cap in the palette colour
nearest the real one. Hovering still lists every action.

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

2 files changed, 57 insertions, 21 deletions

diff --git a/keybinds/PadPanel.qml b/keybinds/PadPanel.qml
index 04c95a5..d9f8941 100644
--- a/keybinds/PadPanel.qml
+++ b/keybinds/PadPanel.qml
@@ -12,7 +12,7 @@
 import QtQuick
 
 // The macropad as it sits on the desk: twelve keys in three rows of four,
-// the two encoders to their right. Each key carries its plain action;
+// the two encoders to their right. Each key carries its keycap's legends;
 // hovering a key or an encoder lists everything it does underneath. The
 // last one hovered stays listed, so moving the pointer off does not blank it.
 Item {
@@ -27,10 +27,25 @@ Item {
     readonly property int unit: Math.floor(width * 0.85 / 5.56)
     readonly property int padWidth: Math.round(unit * 5.56)
 
-    function plain(id) {
-        const a = (actions[id] ?? []).find(x => x.how === "Press");
-        return a ? a.label : "";
-    }
+    // The keycaps, left to right and top to bottom, as printed: icon and
+    // text on top, the shifted (or Alt) legend below, in the palette's
+    // colours nearest the real caps: orange is peach, purple is mauve.
+    // Glyphs are checked by name in Inconsolata Nerd Font (see AGENTS.md,
+    // Theme).
+    readonly property var caps: [
+        { icon: "\u{F0239}", sub: "\u{F05F9}", cap: Theme.red, ink: Theme.base },         // firefox / incognito
+        { icon: "\u{F0174}", sub: "\u{F0354}", cap: Theme.teal, ink: Theme.base },        // code_tags / markdown
+        { icon: "\u{F338}", cap: Theme.yellow, ink: Theme.base },                          // gimp
+        { icon: "\u{F0147}", sub: "\u{F0432}", cap: Theme.mauve, ink: Theme.base },       // clipboard / qrcode
+        { icon: "\u{F018D}", text: "SSH", cap: Theme.crust, ink: Theme.green },           // console
+        { icon: "\u{F0BCC}", text: "split", cap: Theme.peach, ink: Theme.base },          // view_split_vertical
+        { icon: "\u{F036C}", cap: Theme.blue, ink: Theme.base },                           // microphone
+        { icon: "\u{F02C3}", text: "group", cap: Theme.peach, ink: Theme.base },          // group
+        { text: "1", sub: "\u{F03B0}", cap: Theme.peach, ink: Theme.base },               // numeric_5_box_outline
+        { text: "2", sub: "\u{F03B5}", cap: Theme.peach, ink: Theme.base },
+        { text: "3", sub: "\u{F03B8}", cap: Theme.peach, ink: Theme.base },
+        { text: "4", sub: "\u{F03BB}", cap: Theme.peach, ink: Theme.base },
+    ]
 
     function title(id) {
         if (id === "top") return "Top encoder";
@@ -57,27 +72,47 @@ Item {
                     model: 12
 
                     Rectangle {
+                        id: keycap
                         required property int index
                         readonly property string padId: "k" + (index + 1)
+                        readonly property var cap: panel.caps[index]
 
                         width: panel.unit
                         height: panel.unit
                         radius: panel.unit * 0.12
-                        color: panel.hovered === padId ? Theme.surfaceAlt : Theme.surface
-                        border.color: panel.hovered === padId ? Theme.accent : "transparent"
-                        border.width: 2
-
-                        Text {
-                            anchors.fill: parent
-                            anchors.margins: 4
-                            text: panel.plain(parent.padId)
-                            wrapMode: Text.Wrap
-                            elide: Text.ElideRight
-                            horizontalAlignment: Text.AlignHCenter
-                            verticalAlignment: Text.AlignVCenter
-                            color: Theme.text
-                            font.family: Theme.fontFamily
-                            font.pixelSize: Math.max(10, panel.unit * 0.16)
+                        color: cap.cap
+                        border.color: panel.hovered === padId ? Theme.text : "transparent"
+                        border.width: 3
+
+                        Column {
+                            anchors.centerIn: parent
+
+                            Text {
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                visible: !!keycap.cap.icon
+                                text: keycap.cap.icon ?? ""
+                                color: keycap.cap.ink
+                                font.family: Theme.iconFamily
+                                font.pixelSize: panel.unit * 0.34
+                            }
+                            Text {
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                visible: !!keycap.cap.text
+                                text: keycap.cap.text ?? ""
+                                color: keycap.cap.ink
+                                font.family: Theme.fontFamily
+                                font.bold: true
+                                // A lone digit is the cap's main legend.
+                                font.pixelSize: panel.unit * (keycap.cap.icon ? 0.16 : 0.34)
+                            }
+                            Text {
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                visible: !!keycap.cap.sub
+                                text: keycap.cap.sub ?? ""
+                                color: keycap.cap.ink
+                                font.family: Theme.iconFamily
+                                font.pixelSize: panel.unit * 0.26
+                            }
                         }
 
                         MouseArea {
diff --git a/keybinds/README.md b/keybinds/README.md
index e933600..11244d5 100644
--- a/keybinds/README.md
+++ b/keybinds/README.md
@@ -21,7 +21,8 @@ Key names are Hyprland's unless `NAMES` in `Binds.js` gives a friendlier one
 Win. Add a line there to rename another.
 
 The left fifth of the screen is the macropad, drawn as it sits on the desk:
-twelve keys, each carrying its plain action, and the two encoders. Hovering
+twelve keys wearing their real keycaps' icons and colours, and the two
+encoders. Hovering
 a key or an encoder lists everything it does underneath, with what is held
 and how an encoder is turned. `PAD` in `Binds.js` maps each combo the pad's
 firmware sends to its place, keyed by the combo as displayed, so renaming a