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, 19 insertions, 64 deletions

diff --git a/keybinds/Keybinds.qml b/keybinds/Keybinds.qml
index 532ae86..c94a871 100644
--- a/keybinds/Keybinds.qml
+++ b/keybinds/Keybinds.qml
@@ -24,6 +24,7 @@ Scope {
     // Non-empty while loading or after a failure; the grid shows only when
     // this is empty, so a stale list from the last opening never shows.
     property string status: "Loading..."
+    readonly property var padActions: Binds.padActions(root.groups)
 
     readonly property var screenObj:
         Quickshell.screens.find(s => s.name === root.monitor) ?? Quickshell.screens[0]
@@ -104,6 +105,22 @@ Scope {
                         font.pixelSize: 22
                     }
 
+                    // The left fifth is the macropad; the list centres in the
+                    // rest.
+                    Item {
+                        id: listArea
+                        x: parent.width * 0.2
+                        width: parent.width * 0.8
+                        height: parent.height
+                    }
+
+                    PadPanel {
+                        width: parent.width * 0.2
+                        height: parent.height
+                        visible: root.status === ""
+                        actions: root.padActions
+                    }
+
                     // Groups fill a column down to the screen's height, then
                     // start the next one, so a long group never leaves a row
                     // of short ones sitting on empty space. The width is left
@@ -111,7 +128,7 @@ Scope {
                     // ponytail: a single group taller than the screen clips;
                     // split it in keybindings.lua if one ever gets there.
                     Flow {
-                        anchors.centerIn: parent
+                        anchors.centerIn: listArea
                         height: parent.height * 0.9
                         flow: Flow.TopToBottom
                         spacing: 28
@@ -122,7 +139,7 @@ Scope {
 
                             Column {
                                 required property var modelData
-                                width: 552
+                                width: 440
                                 spacing: 4
 
                                 Text {
@@ -159,68 +176,6 @@ 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
-                                            }
-                                        }
                                     }
                                 }
                             }