hefty: bar: put popups in loaders

dots/.config/quickshell/ii/modules/common/widgets/ChoreographerGridLayout.qml

@@ -14,7 +14,7 @@ GridLayout {
     readonly property int count: choreographableChildren.length
     children: choreographableChildren
 
-    property bool shown: true
+    property bool shown: false
     onShownChanged: {
         // When hiding, hide all at once
         if (!shown) {

dots/.config/quickshell/ii/modules/common/widgets/ChoreographerLoader.qml

@@ -0,0 +1,7 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+
+FadeLoader {
+    id: root    
+    onActiveChanged: item.shown = true
+}

dots/.config/quickshell/ii/modules/common/widgets/VisuallyCenteredStyledText.qml

@@ -5,6 +5,7 @@ import QtQuick.Layouts
 Item {
     id: root
 
+    property alias textWidget: textWidget
     property alias text: textWidget.text
     property alias horizontalAlignment: textWidget.horizontalAlignment
     property alias verticalAlignment: textWidget.verticalAlignment
@@ -27,7 +28,10 @@ Item {
 
     StyledText {
         id: textWidget
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors {
+            left: parent.left
+            right: parent.right
+        }
         y: {
             const value = (parent.height - textMetrics.height) / 2;
             return root.lowerBias ? Math.ceil(value) : Math.round(value);

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/widgets/HSystemInfo.qml

@@ -29,19 +29,17 @@ HBarWidgetWithPopout {
         onClicked: root.showPopup = !root.showPopup
         property var activeItem: vertical ? verticalContent : horizontalContent
 
-        W.FadeLoader {
+        Loader {
             id: horizontalContent
             anchors.fill: parent
-            shown: !contentRoot.vertical
+            active: !contentRoot.vertical
-
             sourceComponent: HorizontalSysInfo {}
         }
 
-        W.FadeLoader {
+        Loader {
             id: verticalContent
             anchors.fill: parent
-            shown: contentRoot.vertical
+            active: contentRoot.vertical
-
             sourceComponent: HorizontalSysInfo {}
         }
 
@@ -135,13 +133,14 @@ HBarWidgetWithPopout {
         }
     }
 
-    component SysInfoPopupContent: W.ChoreographerGridLayout {
+    component SysInfoPopupContent: W.ChoreographerLoader {
+        sourceComponent: W.ChoreographerGridLayout {
             id: popupRoot
             rowSpacing: 8
 
             onShownChanged: {
                 if (shown) {
-                powerProfileSelection.focusSelectedChild()
+                    powerProfileSelection.focusSelectedChild();
                 }
             }
 
@@ -150,28 +149,30 @@ HBarWidgetWithPopout {
 
                 RowLayout {
                     spacing: 10
+                    width: parent.width
 
                     W.CircularProgress {
-                    implicitSize: 46
+                        implicitSize: notSoImportantBatteryStats.implicitHeight
                         lineWidth: 3
                         value: S.Battery.percentage
                         W.MaterialSymbol {
                             anchors.centerIn: parent
                             iconSize: 22
+                            fill: 1
+                            animateChange: true
                             text: {
                                 if (root.chargingAndNotFull)
-                                return "battery_android_plus";
+                                    return "bolt";
                                 if (root.powerSaving)
                                     return "energy_savings_leaf";
+                                if (PowerProfiles.profile == PowerProfile.Performance)
+                                    return "local_fire_department";
                                 return "battery_android_full";
                             }
                         }
                     }
-                ColumnLayout {
-                    Layout.fillWidth: true
-                    spacing: 0
                     RowLayout {
-                        Layout.fillWidth: true
+                        Layout.fillWidth: false
                         spacing: 4
                         W.StyledText {
                             Layout.alignment: Qt.AlignBaseline
@@ -188,19 +189,25 @@ HBarWidgetWithPopout {
                             }
                         }
                     }
-                    RowLayout {
+                    Item {
                         Layout.fillWidth: true
+                    }
+                    ColumnLayout {
+                        id: notSoImportantBatteryStats
+                        Layout.fillWidth: false
+                        spacing: 4
                         StatWithIcon {
                             visible: S.Battery.knownEnergyRate
-                            Layout.fillWidth: true
+                            Layout.alignment: Qt.AlignLeft
                             icon: "bolt"
-                            value: `${S.Battery.energyRate.toFixed(2)}W`
+                            value: `${S.Battery.energyRate.toFixed(1)}W`
+                            longestValueString: "69.0W"
                         }
                         StatWithIcon {
-                            Layout.fillWidth: true
+                            Layout.alignment: Qt.AlignLeft
-                            icon: "heart_check"
+                            icon: "favorite"
-                            value: `${(S.Battery.health).toFixed(1)}%`
+                            value: `${(S.Battery.health).toFixed(1 * (S.Battery.health < 100))}%`
-                        }
+                            longestValueString: "69.0%"
                         }
                     }
                 }
@@ -212,33 +219,32 @@ HBarWidgetWithPopout {
                     id: powerProfileSelection
                     currentValue: PowerProfiles.profile
                     onSelected: newValue => {
-                    PowerProfiles.profile = newValue
+                        PowerProfiles.profile = newValue;
                     }
                     options: [
                         {
                             displayName: S.Translation.tr("Power saver"),
-                        // icon: "line_curve",
                             value: PowerProfile.PowerSaver
                         },
                         {
                             displayName: S.Translation.tr("Balanced"),
-                        // icon: "page_header",
                             value: PowerProfile.Balanced
                         },
                         {
                             displayName: S.Translation.tr("Performance"),
-                        // icon: "toolbar",
                             value: PowerProfile.Performance
                         }
                     ]
                 }
             }
         }
+    }
 
     component StatWithIcon: Item {
         id: statItem
         required property string icon
         required property string value
+        property string longestValueString
         implicitWidth: statRow.implicitWidth
         implicitHeight: statRow.implicitHeight
         RowLayout {
@@ -249,12 +255,17 @@ HBarWidgetWithPopout {
                 Layout.fillWidth: false
                 Layout.alignment: Qt.AlignVCenter
                 text: statItem.icon
+                fill: 1
+                iconSize: 16
             }
+            W.FixedWidthTextContainer {
+                longestText: statItem.longestValueString
                 W.VisuallyCenteredStyledText {
-                Layout.fillWidth: false
+                    anchors.fill: parent
-                Layout.fillHeight: true
+                    horizontalAlignment: Text.AlignLeft
                     text: statItem.value
                 }
+            }
             Item {
                 Layout.fillWidth: true
             }

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/widgets/HTime.qml

@@ -34,20 +34,18 @@ HBarWidgetWithPopout {
         property Item activeItem: vertical ? verticalContent : horizontalContent
 
         // When horizontal
-        W.FadeLoader {
+        Loader {
             id: horizontalContent
             anchors.fill: parent
-            shown: !contentRoot.vertical
+            active: !contentRoot.vertical
-
             sourceComponent: HorizontalClock {}
         }
 
         // When vertical
-        W.FadeLoader {
+        Loader {
             id: verticalContent
             anchors.fill: parent
-            shown: contentRoot.vertical
+            active: contentRoot.vertical
-
             sourceComponent: VerticalClock {}
         }
 
@@ -155,7 +153,8 @@ HBarWidgetWithPopout {
         }
     }
 
-    component PopupContent: W.ChoreographerGridLayout {
+    component PopupContent: W.ChoreographerLoader {
+        sourceComponent: W.ChoreographerGridLayout {
             id: popupRoot
 
             property real buttonSize: C.Appearance.rounding.normal * 2
@@ -281,3 +280,4 @@ HBarWidgetWithPopout {
             }
         }
     }
+}