feat(keybinds): show where a bind sits on the macropad

The macropad's firmware sends ordinary combos, so the overlay listed
them as keyboard shortcuts nobody presses. A PAD table in Binds.js maps
each combo to its key (1-12) or encoder (top or bottom, turned or
pressed) and what is held with it, and the row draws the pad small with
that key lit. The workspace row is built in a loop, as it is in
keybindings.lua. Every entry was checked against hyprctl binds -j.

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

1 files changed, 63 insertions, 1 deletions

diff --git a/keybinds/Keybinds.qml b/keybinds/Keybinds.qml
index be28e2f..532ae86 100644
--- a/keybinds/Keybinds.qml
+++ b/keybinds/Keybinds.qml
@@ -122,7 +122,7 @@ Scope {
 
                             Column {
                                 required property var modelData
-                                width: 440
+                                width: 552
                                 spacing: 4
 
                                 Text {
@@ -159,6 +159,68 @@ Scope {
                                             font.family: Theme.fontFamily
                                             font.pixelSize: 14
                                         }
+
+                                        // The macropad, drawn small: its 4x3
+                                        // keys and two encoders, the one to
+                                        // use lit. Empty but still 100 wide
+                                        // on a row the pad has no part in, so
+                                        // the column keeps its width.
+                                        Item {
+                                            id: padGlyph
+                                            readonly property var pad: modelData.pad ?? null
+                                            width: 100
+                                            height: 17
+                                            anchors.verticalCenter: parent.verticalCenter
+
+                                            Grid {
+                                                visible: padGlyph.pad !== null
+                                                columns: 4
+                                                spacing: 1
+
+                                                Repeater {
+                                                    model: 12
+
+                                                    Rectangle {
+                                                        required property int index
+                                                        width: 5
+                                                        height: 5
+                                                        radius: 1
+                                                        color: padGlyph.pad?.key === index + 1
+                                                            ? Theme.accent : Theme.surfaceAlt
+                                                    }
+                                                }
+                                            }
+
+                                            Column {
+                                                x: 26
+                                                visible: padGlyph.pad !== null
+                                                spacing: 3
+
+                                                Repeater {
+                                                    model: ["top", "bottom"]
+
+                                                    Rectangle {
+                                                        required property string modelData
+                                                        width: 7
+                                                        height: 7
+                                                        radius: 3.5
+                                                        color: padGlyph.pad?.knob === modelData
+                                                            ? Theme.accent : Theme.surfaceAlt
+                                                    }
+                                                }
+                                            }
+
+                                            Text {
+                                                x: 38
+                                                anchors.verticalCenter: parent.verticalCenter
+                                                visible: padGlyph.pad !== null
+                                                text: [padGlyph.pad?.turn, padGlyph.pad?.mod]
+                                                    .filter(Boolean).join(" ")
+                                                color: Theme.subtext
+                                                font.family: Theme.fontFamily
+                                                font.pixelSize: 12
+                                            }
+                                        }
                                     }
                                 }
                             }