feat(control-center): add DiskUsage widget config overlay with showMountPath toggle and standardized tile sizing (#2507)

* feat(control-center): add widget config overlay with showMountPath toggle for DiskUsage

Introduces WidgetConfigOverlay and DiskUsageWidgetConfigMenu components, allowing
users to toggle mount path visibility per DiskUsage widget in edit mode

* refactor(control-center): use Theme.iconSizeLarge and Theme.fontSizeLarge for small tiles

Standardize SmallDiskUsageButton and SmallBatteryButton sizing with Theme.iconSizeLarge
and Theme.fontSizeLarge, and unify font weight to Font.Bold on both tile widgets.

* fix(control-center): adjust SmallDiskUsageButton font size based on showMountPath

* refactor(control-center): simplify DiskUsage config menu i18n strings

Remove the redundant "Disk Usage Widget" title and the toggle description
to reduce translatable strings

quickshell/Modules/ControlCenter/Components/DiskUsageWidgetConfigMenu.qml

@@ -0,0 +1,38 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property var widgetData: null
+
+    signal showMountPathChanged(bool show)
+
+    width: 260
+    height: menuColumn.implicitHeight + Theme.spacingS * 2
+    radius: Theme.cornerRadius
+    color: Theme.surfaceContainer
+    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.16)
+    border.width: 1
+
+    MouseArea {
+        anchors.fill: parent
+    }
+
+    Column {
+        id: menuColumn
+        anchors.fill: parent
+        anchors.margins: Theme.spacingS
+        spacing: 2
+
+        DankToggle {
+            width: parent.width
+            text: I18n.tr("Show mount path", "toggle in control center disk usage widget to turn mount path display on or off")
+            checked: root.widgetData?.showMountPath !== false
+            onToggled: newChecked => {
+                root.showMountPathChanged(newChecked);
+            }
+        }
+    }
+}

quickshell/Modules/ControlCenter/Components/DragDropGrid.qml

@@ -25,6 +25,7 @@ Column {
     signal moveWidget(int fromIndex, int toIndex)
     signal toggleWidgetSize(int index)
     signal collapseRequested
+    signal configRequested(int index, var widgetData, var anchor)
 
     function requestCollapse() {
         collapseRequested();
@@ -203,6 +204,7 @@ Column {
                         onWidgetMoved: (fromIndex, toIndex) => root.moveWidget(fromIndex, toIndex)
                         onRemoveWidget: index => root.removeWidget(index)
                         onToggleWidgetSize: index => root.toggleWidgetSize(index)
+                        onConfigRequested: (idx, data, anchor) => root.configRequested(idx, data, anchor)
                     }
                 }
             }
@@ -869,6 +871,7 @@ Column {
 
             mountPath: widgetData.mountPath || "/"
             instanceId: widgetData.instanceId || ""
+            showMountPath: widgetData.showMountPath !== undefined ? widgetData.showMountPath : true
 
             onExpandClicked: {
                 if (!root.editMode) {
@@ -888,6 +891,7 @@ Column {
 
             mountPath: widgetData.mountPath || "/"
             instanceId: widgetData.instanceId || ""
+            showMountPath: widgetData.showMountPath !== undefined ? widgetData.showMountPath : true
 
             onClicked: {
                 if (!root.editMode) {

quickshell/Modules/ControlCenter/Components/DragDropWidgetWrapper.qml

@@ -21,6 +21,7 @@ Item {
     signal widgetMoved(int fromIndex, int toIndex)
     signal removeWidget(int index)
     signal toggleWidgetSize(int index)
+    signal configRequested(int index, var widgetData, var anchor)
 
     width: {
         const widgetWidth = widgetData?.width || 50;
@@ -236,6 +237,7 @@ Item {
     }
 
     Rectangle {
+        id: removeButton
         width: 16
         height: 16
         radius: 8
@@ -278,6 +280,34 @@ Item {
         }
     }
 
+    readonly property bool hasConfigMenu: widgetData?.id === "diskUsage"
+
+    Rectangle {
+        id: configButton
+        width: 16
+        height: 16
+        radius: 8
+        color: Theme.primary
+        anchors.top: removeButton.top
+        anchors.right: removeButton.left
+        anchors.rightMargin: 4
+        visible: editMode && root.hasConfigMenu
+        z: 10
+
+        DankIcon {
+            anchors.centerIn: parent
+            name: "settings"
+            size: 12
+            color: Theme.primaryText
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: root.configRequested(root.widgetIndex, root.widgetData, configButton)
+        }
+    }
+
     Rectangle {
         id: dragHandle
         width: 16

quickshell/Modules/ControlCenter/Components/WidgetConfigOverlay.qml

@@ -0,0 +1,77 @@
+import QtQuick
+import qs.Common
+import qs.Services
+
+Item {
+    id: root
+
+    property int widgetIndex: -1
+    property real anchorX: 0
+    property real anchorY: 0
+    property real anchorWidth: 0
+    property real anchorHeight: 0
+
+    readonly property var widgetData: {
+        if (widgetIndex < 0)
+            return null;
+        const widgets = SettingsData.controlCenterWidgets || [];
+        return widgets[widgetIndex] || null;
+    }
+
+    visible: widgetIndex >= 0
+    z: 10000
+
+    function open(index, data, anchorItem) {
+        const pos = anchorItem.mapToItem(root, 0, 0);
+        anchorX = pos.x;
+        anchorY = pos.y;
+        anchorWidth = anchorItem.width;
+        anchorHeight = anchorItem.height;
+        widgetIndex = index;
+    }
+
+    function close() {
+        widgetIndex = -1;
+    }
+
+    function persistShowMountPath(show) {
+        const widgets = (SettingsData.controlCenterWidgets || []).slice();
+        if (root.widgetIndex < 0 || root.widgetIndex >= widgets.length)
+            return;
+        const updated = Object.assign({}, widgets[root.widgetIndex]);
+        updated.showMountPath = show;
+        widgets[root.widgetIndex] = updated;
+        SettingsData.set("controlCenterWidgets", widgets);
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        enabled: root.visible
+        onClicked: root.close()
+    }
+
+    DiskUsageWidgetConfigMenu {
+        id: diskMenu
+        visible: root.visible && root.widgetData?.id === "diskUsage"
+        widgetData: root.widgetData
+
+        x: {
+            let nx = root.anchorX + root.anchorWidth - width;
+            const maxX = root.width - width - Theme.spacingS;
+            const minX = Theme.spacingS;
+            if (nx < minX)
+                nx = minX;
+            if (nx > maxX)
+                nx = maxX;
+            return nx;
+        }
+        y: {
+            let ny = root.anchorY - height - Theme.spacingS;
+            if (ny < Theme.spacingS)
+                ny = root.anchorY + root.anchorHeight + Theme.spacingS;
+            return ny;
+        }
+
+        onShowMountPathChanged: show => root.persistShowMountPath(show)
+    }
+}

quickshell/Modules/ControlCenter/ControlCenterPopout.qml

@@ -273,6 +273,7 @@ DankPopout {
                         onMoveWidget: (fromIndex, toIndex) => widgetModel.moveWidget(fromIndex, toIndex)
                         onToggleWidgetSize: index => widgetModel.toggleWidgetSize(index)
                         onCollapseRequested: root.collapseAll()
+                        onConfigRequested: (idx, data, anchor) => widgetConfigOverlay.open(idx, data, anchor)
                     }
 
                     EditControls {
@@ -303,6 +304,11 @@ DankPopout {
                 anchors.fill: parent
                 z: 10000
             }
+
+            WidgetConfigOverlay {
+                id: widgetConfigOverlay
+                anchors.fill: parent
+            }
         }
     }
 

quickshell/Modules/ControlCenter/Widgets/DiskUsagePill.qml

@@ -8,6 +8,7 @@ CompoundPill {
 
     property string mountPath: "/"
     property string instanceId: ""
+    property bool showMountPath: true
 
     iconName: "storage"
 
@@ -37,6 +38,9 @@ CompoundPill {
         if (!selectedMount) {
             return I18n.tr("No disk data");
         }
+        if (!showMountPath) {
+            return I18n.tr("Disk Usage");
+        }
         return selectedMount.mount;
     }
 

quickshell/Modules/ControlCenter/Widgets/SmallBatteryButton.qml

@@ -64,7 +64,7 @@ Rectangle {
 
         DankIcon {
             name: BatteryService.getBatteryIcon()
-            size: parent.parent.width * 0.25
+            size: Theme.iconSizeLarge
             color: {
                 if (BatteryService.isLowBattery && !BatteryService.isCharging) {
                     return Theme.error;
@@ -76,8 +76,8 @@ Rectangle {
 
         StyledText {
             text: BatteryService.batteryAvailable ? `${BatteryService.batteryLevel}%` : ""
-            font.pixelSize: parent.parent.width * 0.15
+            font.pixelSize: Theme.fontSizeLarge
-            font.weight: Font.Medium
+            font.weight: Font.Bold
             color: {
                 if (BatteryService.isLowBattery && !BatteryService.isCharging) {
                     return Theme.error;

quickshell/Modules/ControlCenter/Widgets/SmallDiskUsageButton.qml

@@ -11,6 +11,7 @@ Rectangle {
 
     property string mountPath: "/"
     property string instanceId: ""
+    property bool showMountPath: true
 
     property var selectedMount: {
         if (!DgopService.diskMounts || DgopService.diskMounts.length === 0)
@@ -67,7 +68,7 @@ Rectangle {
         DankIcon {
             anchors.verticalCenter: parent.verticalCenter
             name: "storage"
-            size: Theme.iconSizeSmall
+            size: Theme.iconSizeLarge
             color: {
                 if (root.usagePercent > 90)
                     return Theme.error;
@@ -82,6 +83,7 @@ Rectangle {
             spacing: 0
 
             StyledText {
+                visible: root.showMountPath
                 text: root.selectedMount?.mount || root.mountPath
                 font.pixelSize: Theme.fontSizeSmall
                 color: Theme.surfaceVariantText
@@ -92,7 +94,7 @@ Rectangle {
 
             StyledText {
                 text: `${root.usagePercent.toFixed(0)}%`
-                font.pixelSize: Theme.fontSizeSmall
+                font.pixelSize: root.showMountPath ? Theme.fontSizeSmall : Theme.fontSizeLarge
                 font.weight: Font.Bold
                 color: {
                     if (root.usagePercent > 90)

quickshell/Modules/ControlCenter/utils/widgets.js

@@ -13,6 +13,7 @@ function addWidget(widgetId) {
     if (widgetId === "diskUsage") {
         widget.instanceId = generateUniqueId()
         widget.mountPath = "/"
+        widget.showMountPath = true
     }
 
     if (widgetId === "brightnessSlider") {

quickshell/Modules/DankBar/Widgets/DiskUsage.qml

@@ -10,6 +10,7 @@ BasePill {
     property var widgetData: null
     property string mountPath: (widgetData && widgetData.mountPath !== undefined) ? widgetData.mountPath : "/"
     property int diskUsageMode: (widgetData && widgetData.diskUsageMode !== undefined) ? widgetData.diskUsageMode : 0
+    property bool showMountPath: (widgetData && widgetData.showMountPath !== undefined) ? widgetData.showMountPath : true
     property bool isHovered: mouseArea.containsMouse
     property bool isAutoHideBar: false
     property bool minimumWidth: (widgetData && widgetData.minimumWidth !== undefined) ? widgetData.minimumWidth : true
@@ -179,6 +180,7 @@ BasePill {
 
                 StyledText {
                     id: mountText
+                    visible: root.showMountPath
                     text: {
                         if (!root.selectedMount) {
                             return "--";

quickshell/Modules/Settings/WidgetsTab.qml

@@ -403,6 +403,7 @@ Item {
         if (widgetId === "diskUsage") {
             widgetObj.mountPath = "/";
             widgetObj.diskUsageMode = 0;
+            widgetObj.showMountPath = true;
         }
         if (widgetId === "cpuUsage" || widgetId === "memUsage" || widgetId === "cpuTemp" || widgetId === "gpuTemp" || widgetId === "diskUsage")
             widgetObj.minimumWidth = true;
@@ -690,6 +691,8 @@ Item {
                     item.mountPath = widget.mountPath;
                 if (widget.diskUsageMode !== undefined)
                     item.diskUsageMode = widget.diskUsageMode;
+                if (widget.showMountPath !== undefined)
+                    item.showMountPath = widget.showMountPath;
                 if (widget.showNetworkIcon !== undefined)
                     item.showNetworkIcon = widget.showNetworkIcon;
                 if (widget.showBluetoothIcon !== undefined)

quickshell/Modules/Settings/WidgetsTabSection.qml

@@ -42,7 +42,7 @@ Column {
             "id": widget.id,
             "enabled": widget.enabled
         };
-        var keys = ["size", "selectedGpuIndex", "pciId", "mountPath", "diskUsageMode", "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", "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"];
         for (var i = 0; i < keys.length; i++) {
             if (widget[keys[i]] !== undefined)
                 result[keys[i]] = widget[keys[i]];