1 files changed, 93 insertions, 0 deletions
diff --git a/noctalia/.config/plugins/keybind-cheatsheet/ColorPairRow.qml b/noctalia/.config/plugins/keybind-cheatsheet/ColorPairRow.qml
new file mode 100644
index 0000000..7094a4a
--- /dev/null
+++ b/noctalia/.config/plugins/keybind-cheatsheet/ColorPairRow.qml
@@ -0,0 +1,93 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import "." as Local
+
+// Label + background pill + text pill + optional rename field + reset. Used by
+// Settings.qml for per-category color customization. Empty bgValue/textValue
+// means "use fallback". When showLabel is set, an extra text field lets the user
+// rename the key's display label (used for the generic Mod2/Mod3/Mod5 keys).
+RowLayout {
+  id: row
+
+  property var pluginApi
+  property var screen
+  property string labelText: ""
+  property string bgValue: ""
+  property string textValue: ""
+  property color bgFallback: "#888888"
+  property color textFallback: "#FFFFFF"
+  property string letter: "A"
+  property string clipboardHex: ""
+  property bool showBg: true
+  property bool showText: true
+  // Optional display-label override (e.g. rename "Mod3" -> "Hyper")
+  property bool showLabel: false
+  property string labelValue: ""
+  property string labelPlaceholder: ""
+
+  signal bgPicked(color value)
+  signal textPicked(color value)
+  signal bgPasted(string hex)
+  signal textPasted(string hex)
+  signal labelEdited(string value)
+  signal resetRequested()
+
+  Layout.fillWidth: true
+  spacing: Style.marginM
+
+  NText {
+    text: row.labelText
+    color: Color.mOnSurface
+    pointSize: Style.fontSizeM
+    Layout.preferredWidth: 180 * Style.uiScaleRatio
+    elide: Text.ElideRight
+  }
+
+  Local.ColorPill {
+    Layout.preferredWidth: 130 * Style.uiScaleRatio
+    visible: row.showBg
+    screen: row.screen
+    hexValue: row.bgValue
+    displayColor: row.bgValue.length > 0 ? row.bgValue : row.bgFallback
+    textMode: false
+    clipboardHex: row.clipboardHex
+    placeholderText: row.bgValue.length === 0 ? row.pluginApi?.tr("settings.color-auto") : ""
+    onColorPicked: c => row.bgPicked(c)
+    onPasteRequested: hex => row.bgPasted(hex)
+  }
+
+  Local.ColorPill {
+    Layout.preferredWidth: 130 * Style.uiScaleRatio
+    visible: row.showText
+    screen: row.screen
+    hexValue: row.textValue
+    displayColor: row.textValue.length > 0 ? row.textValue : row.textFallback
+    textMode: true
+    letter: row.letter
+    textModeBg: row.bgValue.length > 0 ? row.bgValue : row.bgFallback
+    clipboardHex: row.clipboardHex
+    placeholderText: row.textValue.length === 0 ? row.pluginApi?.tr("settings.color-auto") : ""
+    onColorPicked: c => row.textPicked(c)
+    onPasteRequested: hex => row.textPasted(hex)
+  }
+
+  NTextInput {
+    Layout.preferredWidth: 160 * Style.uiScaleRatio
+    Layout.preferredHeight: Style.baseWidgetSize
+    visible: row.showLabel
+    text: row.labelValue
+    placeholderText: row.labelPlaceholder
+    onTextChanged: row.labelEdited(text)
+  }
+
+  Item { Layout.fillWidth: true }
+
+  NIconButton {
+    icon: "rotate"
+    tooltipText: row.pluginApi?.tr("settings.reset-color")
+    onClicked: row.resetRequested()
+  }
+}