config: enable/disable status icons (#243)

* Adds ability to disable/enable status icons

Improves the hover calculations so that it's not hardcoded. This should make it easier to add/remove status icons.
Also adds an optional audio status icon.

* status: move config to barconfig

* fixes

* fix merge

* loader icons

* fix audio popout

---------

Co-authored-by: Kaj Giesbers <kajgiesbers@gmail.com>
Co-authored-by: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>

config/BarConfig.qml

@@ -5,6 +5,7 @@ JsonObject {
     property bool showOnHover: true
     property int dragThreshold: 20
     property Workspaces workspaces: Workspaces {}
+    property Status status: Status {}
     property Sizes sizes: Sizes {}
 
     component Workspaces: JsonObject {
@@ -19,6 +20,13 @@ JsonObject {
         property string activeLabel: "󰮯 "
     }
 
+    component Status: JsonObject {
+        property bool showAudio: false
+        property bool showNetwork: true
+        property bool showBluetooth: true
+        property bool showBattery: true
+    }
+
     component Sizes: JsonObject {
         property int innerHeight: 30
         property int windowPreviewSize: 400

modules/bar/Bar.qml

@@ -23,14 +23,24 @@ Item {
         const th = tray.implicitHeight;
         const trayItems = tray.items;
 
-        const n = statusIconsInner.network;
+        // Check status icons hover areas
-        const ny = statusIcons.y + statusIconsInner.y + n.y - spacing / 2;
+        let statusIconFound = false;
+        for (const area of statusIconsInner.hoverAreas) {
+            if (!area.enabled)
+                continue;
 
-        const bls = statusIcons.y + statusIconsInner.y + statusIconsInner.bs - spacing / 2;
+            const item = area.item;
-        const ble = statusIcons.y + statusIconsInner.y + statusIconsInner.be + spacing / 2;
+            const itemY = statusIcons.y + statusIconsInner.y + item.y - spacing / 2;
+            const itemHeight = item.implicitHeight + spacing;
 
-        const b = statusIconsInner.battery;
+            if (y >= itemY && y <= itemY + itemHeight) {
-        const by = statusIcons.y + statusIconsInner.y + b.y - spacing / 2;
+                popouts.currentName = area.name;
+                popouts.currentCenter = Qt.binding(() => statusIcons.y + statusIconsInner.y + item.y + item.implicitHeight / 2);
+                popouts.hasCurrent = true;
+                statusIconFound = true;
+                break;
+            }
+        }
 
         if (y >= awy && y <= awy + aw.implicitHeight) {
             popouts.currentName = "activewindow";
@@ -43,19 +53,7 @@ Item {
             popouts.currentName = `traymenu${index}`;
             popouts.currentCenter = Qt.binding(() => tray.y + item.y + item.implicitHeight / 2);
             popouts.hasCurrent = true;
-        } else if (y >= ny && y <= ny + n.implicitHeight + spacing) {
+        } else if (!statusIconFound) {
-            popouts.currentName = "network";
-            popouts.currentCenter = Qt.binding(() => statusIcons.y + statusIconsInner.y + n.y + n.implicitHeight / 2);
-            popouts.hasCurrent = true;
-        } else if (y >= bls && y <= ble) {
-            popouts.currentName = "bluetooth";
-            popouts.currentCenter = Qt.binding(() => statusIcons.y + statusIconsInner.y + statusIconsInner.bs + (statusIconsInner.be - statusIconsInner.bs) / 2);
-            popouts.hasCurrent = true;
-        } else if (y >= by && y <= by + b.implicitHeight + spacing) {
-            popouts.currentName = "battery";
-            popouts.currentCenter = Qt.binding(() => statusIcons.y + statusIconsInner.y + b.y + b.implicitHeight / 2);
-            popouts.hasCurrent = true;
-        } else {
             popouts.hasCurrent = false;
         }
     }

modules/bar/components/StatusIcons.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import qs.widgets
 import qs.services
 import qs.utils
@@ -6,55 +8,96 @@ import Quickshell
 import Quickshell.Bluetooth
 import Quickshell.Services.UPower
 import QtQuick
+import QtQuick.Layouts
 
 Item {
     id: root
 
     property color colour: Colours.palette.m3secondary
 
-    readonly property Item network: network
+    readonly property list<var> hoverAreas: [
-    readonly property real bs: bluetooth.y
+        {
-    readonly property real be: repeater.count > 0 ? devices.y + devices.implicitHeight : bluetooth.y + bluetooth.implicitHeight
+            name: "audio",
-    readonly property Item battery: battery
+            item: audioIcon,
+            enabled: Config.bar.status.showAudio
+        },
+        {
+            name: "network",
+            item: networkIcon,
+            enabled: Config.bar.status.showNetwork
+        },
+        {
+            name: "bluetooth",
+            item: bluetoothGroup,
+            enabled: Config.bar.status.showBluetooth
+        },
+        {
+            name: "battery",
+            item: batteryIcon,
+            enabled: Config.bar.status.showBattery
+        }
+    ]
 
     clip: true
-    implicitWidth: Math.max(network.implicitWidth, bluetooth.implicitWidth, devices.implicitWidth, battery.implicitWidth)
+    implicitWidth: iconColumn.implicitWidth
-    implicitHeight: network.implicitHeight + bluetooth.implicitHeight + bluetooth.anchors.topMargin + (repeater.count > 0 ? devices.implicitHeight + devices.anchors.topMargin : 0) + battery.implicitHeight + battery.anchors.topMargin
+    implicitHeight: iconColumn.implicitHeight
 
-    MaterialIcon {
+    ColumnLayout {
-        id: network
+        id: iconColumn
 
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: Appearance.spacing.smaller / 2
+
+        // Audio icon
+        Loader {
+            id: audioIcon
+
+            asynchronous: true
+            active: Config.bar.status.showAudio
+            visible: active
+
+            sourceComponent: MaterialIcon {
+                animate: true
+                text: Audio.muted ? "volume_off" : Audio.volume >= 0.66 ? "volume_up" : Audio.volume >= 0.33 ? "volume_down" : "volume_mute"
+                color: root.colour
+            }
+        }
+
+        // Network icon
+        Loader {
+            id: networkIcon
+
+            asynchronous: true
+            active: Config.bar.status.showNetwork
+            visible: active
+
+            sourceComponent: MaterialIcon {
                 animate: true
                 text: Network.active ? Icons.getNetworkIcon(Network.active.strength ?? 0) : "wifi_off"
                 color: root.colour
-
+            }
-        anchors.horizontalCenter: parent.horizontalCenter
         }
 
+        // Bluetooth section (grouped for hover area)
+        Loader {
+            id: bluetoothGroup
+
+            asynchronous: true
+            active: Config.bar.status.showBluetooth
+            visible: active
+
+            sourceComponent: ColumnLayout {
+                spacing: Appearance.spacing.smaller / 2
+
+                // Bluetooth icon
                 MaterialIcon {
-        id: bluetooth
-
-        anchors.horizontalCenter: network.horizontalCenter
-        anchors.top: network.bottom
-        anchors.topMargin: Appearance.spacing.smaller / 2
-
                     animate: true
                     text: Bluetooth.defaultAdapter?.enabled ? "bluetooth" : "bluetooth_disabled"
                     color: root.colour
                 }
 
-    Column {
+                // Connected bluetooth devices
-        id: devices
-
-        anchors.horizontalCenter: bluetooth.horizontalCenter
-        anchors.top: bluetooth.bottom
-        anchors.topMargin: Appearance.spacing.smaller / 2
-
-        spacing: Appearance.spacing.smaller / 2
-
                 Repeater {
-            id: repeater
-
                     model: ScriptModel {
                         values: Bluetooth.devices.values.filter(d => d.state !== BluetoothDeviceState.Disconnected)
                     }
@@ -88,14 +131,17 @@ Item {
                     }
                 }
             }
+        }
 
-    MaterialIcon {
+        // Battery icon
-        id: battery
+        Loader {
+            id: batteryIcon
 
-        anchors.horizontalCenter: devices.horizontalCenter
+            asynchronous: true
-        anchors.top: repeater.count > 0 ? devices.bottom : bluetooth.bottom
+            active: Config.bar.status.showBattery
-        anchors.topMargin: Appearance.spacing.smaller / 2
+            visible: active
 
+            sourceComponent: MaterialIcon {
                 animate: true
                 text: {
                     if (!UPower.displayDevice.isLaptopBattery) {
@@ -118,6 +164,8 @@ Item {
                 color: !UPower.onBattery || UPower.displayDevice.percentage > 0.2 ? root.colour : Colours.palette.m3error
                 fill: 1
             }
+        }
+    }
 
     Behavior on implicitHeight {
         Anim {}

modules/bar/popouts/Audio.qml

@@ -0,0 +1,57 @@
+import qs.widgets
+import qs.services
+import qs.config
+import QtQuick.Layouts
+import Quickshell
+
+ColumnLayout {
+    id: root
+
+    required property var wrapper
+
+    spacing: Appearance.spacing.normal
+
+    VerticalSlider {
+        id: volumeSlider
+
+        icon: {
+            if (Audio.muted)
+                return "no_sound";
+            if (value >= 0.5)
+                return "volume_up";
+            if (value > 0)
+                return "volume_down";
+            return "volume_mute";
+        }
+
+        value: Audio.volume
+        onMoved: Audio.setVolume(value)
+
+        implicitWidth: Config.osd.sizes.sliderWidth
+        implicitHeight: Config.osd.sizes.sliderHeight
+    }
+
+    StyledRect {
+        id: pavuButton
+
+        implicitWidth: implicitHeight
+        implicitHeight: icon.implicitHeight + Appearance.padding.small * 2
+
+        radius: Appearance.rounding.normal
+        color: Colours.palette.m3surfaceContainer
+
+        StateLayer {
+            function onClicked(): void {
+                root.wrapper.hasCurrent = false;
+                Quickshell.execDetached(["pavucontrol"]);
+            }
+        }
+
+        MaterialIcon {
+            id: icon
+
+            anchors.centerIn: parent
+            text: "settings"
+        }
+    }
+}

modules/bar/popouts/Content.qml

@@ -45,6 +45,13 @@ Item {
             source: "Battery.qml"
         }
 
+        Popout {
+            name: "audio"
+            sourceComponent: Audio {
+                wrapper: root.wrapper
+            }
+        }
+
         Repeater {
             model: ScriptModel {
                 values: [...SystemTray.items.values]