Add settings to toggle which LockKeys to watch. Doesn't work yet. My settings are coming back undefined

Modules/Bar/Widgets/LockKeys.qml

@@ -0,0 +1,108 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import qs.Commons
+import qs.Services
+import qs.Widgets
+import qs.Modules.Settings
+// import qs.Modules.Bar.Extras
+
+Rectangle {
+  id: root
+
+  property string widgetId: ""
+  property string section: ""
+  property int sectionWidgetIndex: -1
+  property int sectionWidgetsCount: 0
+
+  property var widgetMetadata: BarWidgetRegistry.widgetMetadata[widgetId]
+  property var widgetSettings: {
+    if (section && sectionWidgetIndex >= 0) {
+      var widgets = Settings.data.bar.widgets[section]
+      if (widgets && sectionWidgetIndex < widgets.length) {
+        return widgets[sectionWidgetIndex]
+      }
+    }
+    return {}
+  }
+
+  readonly property string barPosition: Settings.data.bar.position
+  readonly property bool isVertical: barPosition === "left" || barPosition === "right"
+
+  readonly property bool showCaps: (widgetSettings.showCapsLock !== undefined) ? widgetSettings.showCapsLock : widgetMetadata.showCapsLock
+  readonly property bool showNum: (widgetSettings.showNumLock !== undefined) ? widgetSettings.showNumLock : widgetMetadata.showNumLock
+  readonly property bool showScroll: (widgetSettings.showScrollLock !== undefined) ? widgetSettings.showScrollLock : widgetMetadata.showScrollLock
+
+  property bool capsLockOn: LockKeysService.capsLockOn
+  property bool numLockOn: LockKeysService.numLockOn
+  property bool scrollLockOn: LockKeysService.scrollLockOn
+
+  Connections {
+    target: LockKeysService
+    function onCapsLockChanged(active) { root.capsLockOn = active }
+    function onNumLockChanged(active) { root.numLockOn = active }
+    function onScrollLockChanged(active) { root.scrollLockOn = active }
+  }
+
+  implicitWidth: isVertical ? Style.capsuleHeight : Math.round(layout.implicitWidth + Style.marginM * 2)
+  implicitHeight: isVertical ? Math.round(layout.implicitHeight + Style.marginM * 2) : Style.capsuleHeight
+
+  Layout.alignment: Qt.AlignVCenter
+
+  radius: Style.radiusM
+  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+
+  Item {
+    id: layout
+    anchors.verticalCenter: parent.verticalCenter
+    anchors.horizontalCenter: parent.horizontalCenter
+
+    implicitWidth: rowLayout.visible ? rowLayout.implicitWidth : colLayout.implicitWidth
+    implicitHeight: rowLayout.visible ? rowLayout.implicitHeight : colLayout.implicitHeight
+
+    RowLayout {
+      id: rowLayout
+      visible: !root.isVertical
+      spacing: 0
+
+      NIcon {
+        visible: showCaps
+        icon: "letter-c"
+        color: root.capsLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
+      }
+      NIcon {
+        visible: showNum
+        icon: "letter-n"
+        color: root.numLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
+      }
+      NIcon {
+        visible: showScroll
+        icon: "letter-s"
+        color: root.scrollLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
+      }
+    }
+
+    ColumnLayout {
+      id: colLayout
+      visible: root.isVertical
+      spacing: 0
+
+      NIcon {
+        visible: showCaps
+        icon: "letter-c"
+        color: root.capsLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
+      }
+      NIcon {
+        visible: showNum
+        icon: "letter-n"
+        color: root.numLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
+      }
+      NIcon {
+        visible: showScroll
+        icon: "letter-s"
+        color: root.scrollLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
+      }
+    }
+  }
+}

Modules/Settings/Bar/BarWidgetSettingsDialog.qml

@@ -128,6 +128,7 @@ Popup {
       "ControlCenter": "WidgetSettings/ControlCenterSettings.qml",
       "CustomButton": "WidgetSettings/CustomButtonSettings.qml",
       "KeyboardLayout": "WidgetSettings/KeyboardLayoutSettings.qml",
+      "LockKeys": "WidgetSettings/LockKeysSettings.qml",
       "MediaMini": "WidgetSettings/MediaMiniSettings.qml",
       "Microphone": "WidgetSettings/MicrophoneSettings.qml",
       "NotificationHistory": "WidgetSettings/NotificationHistorySettings.qml",

Modules/Settings/Bar/WidgetSettings/LockKeysSettings.qml

@@ -0,0 +1,49 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  // Local state
+  property bool valueShowCapsLock: widgetData.showCapsLock !== undefined ? widgetData.showCapsLock : widgetMetadata.showCapsLock
+  property bool valueShowNumLock: widgetData.showNumLock !== undefined ? widgetData.showNumLock : widgetMetadata.showNumLock
+  property bool valueShowScrollLock: widgetData.showScrollLock !== undefined ? widgetData.showScrollLock : widgetMetadata.showScrollLock
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.showCapsLock = valueShowCapsLock
+    settings.showNumLock = valueShowNumLock
+    settings.showScrollLock = valueShowScrollLock
+    return settings
+  }
+
+  NToggle {
+    label: "Caps Lock"
+    description: "Display caps lock status"
+    checked: valueShowCapsLock
+    onToggled: checked => valueShowCapsLock = checked
+  }
+
+  NToggle {
+    label: "Num Lock"
+    description: "Display num lock status"
+    checked: valueShowNumLock
+    onToggled: checked => valueShowNumLock = checked
+  }
+
+  NToggle {
+    label: "Scroll Lock"
+    description: "Display scroll lock status"
+    checked: valueShowScrollLock
+    onToggled: checked => valueShowScrollLock = checked
+  }
+}

Services/BarWidgetRegistry.qml

@@ -99,6 +99,11 @@ Singleton {
                                     "allowUserSettings": true,
                                     "displayMode": "onhover"
                                   },
+                                  "LockKeys": {
+                                    "showCapsLock": true,
+                                    "showNumLock": true,
+                                    "showScrollLock": true
+                                  },
                                   "MediaMini": {
                                     "allowUserSettings": true,
                                     "hideMode": "hidden",