Add DoNotDisturb & IdleInhibitor Indicators for the ControlCenterButton widget + Add optional icon to KeyboardLayoutName widget (#2513)

* feat(ControlCenterButton): add IdleInhibitor icon

* feat(ControlCenterButton): add DoNotDisturb icon

* fix(WidgetTabSection): adjust text width for the SystemTray Widget popup

* feat(KeyboardLayoutName): add optional icon

* refactor(KeyboardLayoutName): simplify icon visibility logic by using root.showIcon

---------

quickshell/Modules/Settings/WidgetsTabSection.qml

@@ -30,6 +30,7 @@ Column {
     signal controlCenterSettingChanged(string sectionId, int widgetIndex, string settingName, bool value)
     signal controlCenterGroupOrderChanged(string sectionId, int widgetIndex, var groupOrder)
     signal privacySettingChanged(string sectionId, int widgetIndex, string settingName, bool value)
+    signal keyboardLayoutNameSettingChanged(string sectionId, int widgetIndex, string settingName, bool value)
     signal minimumWidthChanged(string sectionId, int widgetIndex, bool enabled)
     signal showSwapChanged(string sectionId, int widgetIndex, bool enabled)
     signal showInGbChanged(string sectionId, int widgetIndex, bool enabled)
@@ -42,7 +43,7 @@ Column {
             "id": widget.id,
             "enabled": widget.enabled
         };
-        var keys = ["size", "selectedGpuIndex", "pciId", "mountPath", "diskUsageMode", "showMountPath", "minimumWidth", "showSwap", "showInGb", "mediaSize", "clockCompactMode", "focusedWindowSize", "focusedWindowCompactMode", "runningAppsCompactMode", "keyboardLayoutNameCompactMode", "runningAppsGroupByApp", "runningAppsCurrentWorkspace", "runningAppsCurrentMonitor", "showNetworkIcon", "showBluetoothIcon", "showAudioIcon", "showAudioPercent", "showVpnIcon", "showBrightnessIcon", "showBrightnessPercent", "showMicIcon", "showMicPercent", "showBatteryIcon", "showPrinterIcon", "showScreenSharingIcon", "controlCenterGroupOrder", "barMaxVisibleApps", "barMaxVisibleRunningApps", "barShowOverflowBadge", "trayUseInlineExpansion"];
+        var keys = ["size", "selectedGpuIndex", "pciId", "mountPath", "diskUsageMode", "minimumWidth", "showSwap", "showInGb", "mediaSize", "clockCompactMode", "focusedWindowSize", "focusedWindowCompactMode", "runningAppsCompactMode", "keyboardLayoutNameCompactMode", "keyboardLayoutNameShowIcon", "runningAppsGroupByApp", "runningAppsCurrentWorkspace", "runningAppsCurrentMonitor", "showNetworkIcon", "showBluetoothIcon", "showAudioIcon", "showAudioPercent", "showVpnIcon", "showBrightnessIcon", "showBrightnessPercent", "showMicIcon", "showMicPercent", "showBatteryIcon", "showPrinterIcon", "showScreenSharingIcon", "showIdleInhibitorIcon", "showDoNotDisturbIcon", "controlCenterGroupOrder", "barMaxVisibleApps", "barMaxVisibleRunningApps", "barShowOverflowBadge", "trayUseInlineExpansion"];
         for (var i = 0; i < keys.length; i++) {
             if (widget[keys[i]] !== undefined)
                 result[keys[i]] = widget[keys[i]];
@@ -557,6 +558,40 @@ Column {
                                 }
                             }
 
+                            DankActionButton {
+                                id: kbdLayoutCtxMenuButton
+                                buttonSize: 32
+                                visible: modelData.id === "keyboard_layout_name"
+                                iconName: "more_vert"
+                                iconSize: 18
+                                iconColor: Theme.outline
+
+                                onClicked: {
+                                    kbdLayoutCtxMenu.widgetData = modelData;
+                                    kbdLayoutCtxMenu.sectionId = root.sectionId;
+                                    kbdLayoutCtxMenu.widgetIndex = index;
+
+                                    var buttonPos = kbdLayoutCtxMenuButton.mapToItem(root, 0, 0);
+                                    var popupWidth = kbdLayoutCtxMenu.width;
+                                    var popupHeight = kbdLayoutCtxMenu.height;
+
+                                    var xPos = buttonPos.x - popupWidth - Theme.spacingS;
+                                    if (xPos < 0)
+                                        xPos = buttonPos.x + kbdLayoutCtxMenuButton.width + Theme.spacingS;
+
+                                    var yPos = buttonPos.y - popupHeight / 2 + kbdLayoutCtxMenuButton.height / 2;
+                                    if (yPos < 0) {
+                                        yPos = Theme.spacingS;
+                                    } else if (yPos + popupHeight > root.height) {
+                                        yPos = root.height - popupHeight - Theme.spacingS;
+                                    }
+
+                                    kbdLayoutCtxMenu.x = xPos;
+                                    kbdLayoutCtxMenu.y = yPos;
+                                    kbdLayoutCtxMenu.open();
+                                }
+                            }
+
                             DankActionButton {
                                 id: appsDockMenuButton
                                 buttonSize: 32
@@ -1019,7 +1054,7 @@ Column {
         property int widgetIndex: -1
         readonly property var currentWidgetData: (widgetIndex >= 0 && widgetIndex < root.items.length) ? root.items[widgetIndex] : widgetData
 
-        width: 220
+        width: 280
         height: contentColumn.implicitHeight + Theme.spacingS * 2
         padding: 0
         modal: true
@@ -1093,6 +1128,92 @@ Column {
         }
     }
 
+    Popup {
+        id: kbdLayoutCtxMenu
+
+        property var widgetData: null
+        property string sectionId: ""
+        property int widgetIndex: -1
+        readonly property var currentWidgetData: (widgetIndex >= 0 && widgetIndex < root.items.length) ? root.items[widgetIndex] : widgetData
+
+        width: 200
+        height: kbdLayoutCtxMenuColumn.implicitHeight + Theme.spacingS * 2
+        padding: 0
+        modal: true
+        focus: true
+        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+
+        background: Rectangle {
+            color: Theme.surfaceContainer
+            radius: Theme.cornerRadius
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+            border.width: 0
+        }
+
+        contentItem: Item {
+            Column {
+                id: kbdLayoutCtxMenuColumn
+                anchors.fill: parent
+                anchors.margins: Theme.spacingS
+                spacing: 2
+
+                Rectangle {
+                    width: parent.width
+                    height: 32
+                    radius: Theme.cornerRadius
+                    color: kbdLayoutCtxMenuIconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+                    Row {
+                        anchors.left: parent.left
+                        anchors.leftMargin: Theme.spacingS
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingS
+
+                        DankIcon {
+                            name: "visibility"
+                            size: 16
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Show Icon")
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceText
+                            font.weight: Font.Normal
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+
+                    DankToggle {
+                        id: kbdLayoutCtxMenuIconToggle
+                        anchors.right: parent.right
+                        anchors.rightMargin: Theme.spacingS
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: 40
+                        height: 20
+                        checked: kbdLayoutCtxMenu.currentWidgetData?.keyboardLayoutNameShowIcon ?? SettingsData.keyboardLayoutNameShowIcon
+                        onToggled: toggled => {
+                            root.keyboardLayoutNameSettingChanged(kbdLayoutCtxMenu.sectionId, kbdLayoutCtxMenu.widgetIndex, "showIcon", toggled);
+                        }
+                    }
+
+                    MouseArea {
+                        id: kbdLayoutCtxMenuIconArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+
+                        onClicked: {
+                            kbdLayoutCtxMenuIconToggle.checked = !kbdLayoutCtxMenuIconToggle.checked;
+                            root.keyboardLayoutNameSettingChanged(kbdLayoutCtxMenu.sectionId, kbdLayoutCtxMenu.widgetIndex, "showIcon", kbdLayoutCtxMenuIconToggle.checked);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     Popup {
         id: focusedWindowContextMenu
 
@@ -1520,7 +1641,27 @@ Column {
                         setting: "showScreenSharingIcon"
                     }
                 ]
-            }
+            },
+            {
+                id: "idleInhibitor",
+                rows: [
+                    {
+                        icon: "motion_sensor_active",
+                        label: I18n.tr("Idle Inhibitor"),
+                        setting: "showIdleInhibitorIcon"
+                    }
+                ]
+            },
+            {
+                id: "doNotDisturb",
+                rows: [
+                    {
+                        icon: "do_not_disturb_on",
+                        label: I18n.tr("Do Not Disturb"),
+                        setting: "showDoNotDisturbIcon"
+                    }
+                ]
+          }
         ]
         property var controlCenterGroups: defaultControlCenterGroups
         property int draggedControlCenterGroupIndex: -1
@@ -1660,7 +1801,7 @@ Column {
                     id: longestControlCenterLabelMetrics
                     font.pixelSize: Theme.fontSizeSmall
                     text: {
-                        const labels = [I18n.tr("Network"), I18n.tr("VPN"), I18n.tr("Bluetooth"), I18n.tr("Audio"), I18n.tr("Volume"), I18n.tr("Microphone"), I18n.tr("Microphone Volume"), I18n.tr("Brightness"), I18n.tr("Brightness Value"), I18n.tr("Battery"), I18n.tr("Printer"), I18n.tr("Screen Sharing")];
+                        const labels = [I18n.tr("Network"), I18n.tr("VPN"), I18n.tr("Bluetooth"), I18n.tr("Audio"), I18n.tr("Volume"), I18n.tr("Microphone"), I18n.tr("Microphone Volume"), I18n.tr("Brightness"), I18n.tr("Brightness Value"), I18n.tr("Battery"), I18n.tr("Printer"), I18n.tr("Screen Sharing"), I18n.tr("Idle Inhibitor"), I18n.tr("Do Not Disturb")];
                         let longest = "";
                         for (let i = 0; i < labels.length; i++) {
                             if (labels[i].length > longest.length)
@@ -1707,6 +1848,10 @@ Column {
                                 return wd?.showPrinterIcon ?? SettingsData.controlCenterShowPrinterIcon;
                             case "showScreenSharingIcon":
                                 return wd?.showScreenSharingIcon ?? SettingsData.controlCenterShowScreenSharingIcon;
+                            case "showIdleInhibitorIcon":
+                                return wd?.showIdleInhibitorIcon ?? SettingsData.controlCenterShowIdleInhibitorIcon;
+                            case "showDoNotDisturbIcon":
+                                return wd?.showDoNotDisturbIcon ?? SettingsData.controlCenterShowDoNotDisturbIcon;
                             default:
                                 return false;
                             }