refractor text-with-fixed-width

dots/.config/quickshell/ii/modules/waffle/actionCenter/ToggleItem.qml

@@ -67,24 +67,12 @@ RowLayout {
             id: switchRow
             spacing: 12
 
-            Item {
-                implicitWidth: onOffTextMetrics.width
-                implicitHeight: onOffTextMetrics.height
-                TextMetrics {
-                    id: onOffTextMetrics
-                    text: "Off" // The larger one
-                    font {
-                        family: Looks.font.family.ui
-                        pixelSize: Looks.font.pixelSize.large
-                        weight: Looks.font.weight.regular
-                    }
-                }
-                WText {
-                    anchors.centerIn: parent
-                    text: switchWidget.checked ? Translation.tr("On") : Translation.tr("Off")
-                    font.pixelSize: Looks.font.pixelSize.large
-                }
+            WTextWithFixedWidth {
+                longestText: "Off" // The larger one
+                text: switchWidget.checked ? Translation.tr("On") : Translation.tr("Off")
+                font.pixelSize: Looks.font.pixelSize.large
             }
+            
             WSwitch {
                 id: switchWidget
                 Layout.alignment: Qt.AlignVCenter

dots/.config/quickshell/ii/modules/waffle/looks/WTextWithFixedWidth.qml

@@ -0,0 +1,31 @@
+import QtQuick
+
+Item {
+    id: root
+
+    property string longestText
+    property alias text: textItem.text
+    property alias font: textItem.font
+    property alias horizontalAlignment: textItem.horizontalAlignment
+    property alias verticalAlignment: textItem.verticalAlignment
+    property alias color: textItem.color
+
+    implicitWidth: longestTextMetrics.width
+    implicitHeight: longestTextMetrics.height
+
+    TextMetrics {
+        id: longestTextMetrics
+        text: root.longestText
+        font {
+            family: Looks.font.family.ui
+            pixelSize: Looks.font.pixelSize.large
+            weight: Looks.font.weight.regular
+        }
+    }
+
+    WText {
+        id: textItem
+        anchors.fill: parent
+        font.pixelSize: Looks.font.pixelSize.large
+    }
+}