wbar: add tooltip and stuff

dots/.config/quickshell/ii/modules/waffle/bar/SystemButton.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Layouts
+import qs
 import qs.services
 import qs.modules.common
 import qs.modules.waffle.looks
@@ -7,35 +8,88 @@ import qs.modules.waffle.looks
 BarButton {
     id: root
 
-    // padding: 12
+    checked: GlobalStates.sidebarRightOpen
+    onClicked: {
+        GlobalStates.sidebarRightOpen = !GlobalStates.sidebarRightOpen; // For now...
+    }
 
     contentItem: Item {
-        anchors.centerIn: root.background
+        anchors.fill: parent
         implicitHeight: column.implicitHeight
         implicitWidth: column.implicitWidth
         Row {
             id: column
-            anchors.centerIn: parent
-            spacing: 4
-            
-            FluentIcon {
-                icon: WIcons.internetIcon
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+                horizontalCenter: parent.horizontalCenter
             }
-            
-            FluentIcon {
-                icon: {
-                    const muted = Audio.sink?.audio.muted ?? false;
-                    const volume = Audio.sink?.audio.volume ?? 0;
-                    if (muted) return volume > 0 ? "speaker-off" : "speaker-none";
-                    if (volume == 0) return "speaker-none";
-                    if (volume < 0.5) return "speaker-1";
-                    return "speaker";
+            spacing: 4
+
+            IconHoverArea {
+                id: internetHoverArea
+                iconItem: FluentIcon {
+                    anchors.verticalCenter: parent.verticalCenter
+                    icon: WIcons.internetIcon
                 }
             }
 
-            FluentIcon {
-                icon: WIcons.batteryIcon
+            IconHoverArea {
+                id: volumeHoverArea
+                iconItem: FluentIcon {
+                    anchors.verticalCenter: parent.verticalCenter
+                    icon: {
+                        const muted = Audio.sink?.audio.muted ?? false;
+                        const volume = Audio.sink?.audio.volume ?? 0;
+                        if (muted)
+                            return volume > 0 ? "speaker-off" : "speaker-none";
+                        if (volume == 0)
+                            return "speaker-none";
+                        if (volume < 0.5)
+                            return "speaker-1";
+                        return "speaker";
+                    }
+                }
+            }
+
+            IconHoverArea {
+                id: batteryHoverArea
+                iconItem: FluentIcon {
+                    anchors.verticalCenter: parent.verticalCenter
+                    icon: WIcons.batteryIcon
+                }
             }
         }
     }
+
+    component IconHoverArea: MouseArea {
+        id: hoverArea
+        required property var iconItem
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+        }
+        hoverEnabled: true
+        implicitHeight: hoverArea.iconItem.implicitHeight
+        implicitWidth: hoverArea.iconItem.implicitWidth
+
+        onPressed: (event) => event.accepted = false; // Don't consume clicks
+
+        children: [iconItem]
+    }
+
+    BarToolTip {
+        extraVisibleCondition: root.shouldShowTooltip && internetHoverArea.containsMouse
+        text: Translation.tr("%1\nInternet access").arg(Network.ethernet ? Translation.tr("Network") : Network.networkName)
+    }
+    BarToolTip {
+        extraVisibleCondition: root.shouldShowTooltip && volumeHoverArea.containsMouse
+        text: Translation.tr("Speakers (%1): %2") //
+        .arg(Audio.sink?.nickname || Audio.sink?.description || Translation.tr("Unknown")) //
+        .arg(`${Math.round(Audio.sink?.audio.volume * 100) || 0}%`) //
+    }
+    BarToolTip {
+        extraVisibleCondition: root.shouldShowTooltip && batteryHoverArea.containsMouse
+        text: Translation.tr("Battery: %1").arg(`${Math.round(Battery.percentage * 100) || 0}%`)
+    }
 }