feat: improve lock fetch

Also lock fetch is static height, media fills height instead

modules/lock/Content.qml

@@ -20,18 +20,14 @@ RowLayout {
             rootHeight: root.height
         }
 
-        StyledRect {
+        Fetch {
             Layout.fillWidth: true
-            Layout.fillHeight: true
+            rootHeight: root.height
-
-            radius: Tokens.rounding.medium
-            color: Colours.tPalette.m3surfaceContainer
-
-            Fetch {}
         }
 
         Media {
             Layout.fillWidth: true
+            Layout.fillHeight: true
             lock: root.lock
         }
     }

modules/lock/Fetch.qml

@@ -3,18 +3,30 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Services.UPower
+import Caelestia
 import Caelestia.Config
 import qs.components
 import qs.components.effects
 import qs.services
 import qs.utils
 
-ColumnLayout {
+StyledRect {
     id: root
 
+    required property real rootHeight
+    readonly property int cBoxSize: Tokens.font.body.medium.pointSize * 2
+
+    implicitHeight: layout.implicitHeight + layout.anchors.topMargin + layout.anchors.margins
+    radius: Tokens.rounding.medium
+    color: Colours.tPalette.m3surfaceContainer
+
+    ColumnLayout {
+        id: layout
+
         anchors.fill: parent
-    anchors.margins: Tokens.padding.extraLargeIncreased
+        anchors.margins: Tokens.padding.extraLarge
-    anchors.topMargin: Tokens.padding.large
+        anchors.topMargin: Tokens.padding.extraLarge
+        anchors.bottomMargin: Tokens.padding.extraLarge
 
         spacing: Tokens.spacing.small
 
@@ -25,7 +37,7 @@ ColumnLayout {
 
             StyledRect {
                 implicitWidth: prompt.implicitWidth + Tokens.padding.medium * 2
-            implicitHeight: prompt.implicitHeight + Tokens.padding.medium * 2
+                implicitHeight: prompt.implicitHeight + Tokens.padding.small * 2
 
                 color: Colours.palette.m3primary
                 radius: Tokens.rounding.medium
@@ -35,7 +47,6 @@ ColumnLayout {
 
                     anchors.centerIn: parent
                     text: ">"
-                font: root.width > 400 ? Tokens.font.mono.large : Tokens.font.mono.medium
                     color: Colours.palette.m3onPrimary
                 }
             }
@@ -43,12 +54,13 @@ ColumnLayout {
             MonoText {
                 Layout.fillWidth: true
                 text: "caelestiafetch.sh"
-            font: root.width > 400 ? Tokens.font.mono.large : Tokens.font.mono.medium
                 elide: Text.ElideRight
             }
 
             WrappedLoader {
                 Layout.fillHeight: true
+                Layout.preferredWidth: height
+                Layout.preferredHeight: 0
                 active: !iconLoader.active
 
                 sourceComponent: SysInfo.isDefaultLogo ? caelestiaLogo : distroIcon
@@ -56,9 +68,11 @@ ColumnLayout {
         }
 
         RowLayout {
+            Layout.topMargin: -Tokens.spacing.extraSmall
+            Layout.bottomMargin: Tokens.spacing.small
             Layout.fillWidth: true
-        Layout.fillHeight: false
+            Layout.fillHeight: true
-        spacing: height * 0.15
+            spacing: Tokens.spacing.extraLarge
 
             WrappedLoader {
                 id: iconLoader
@@ -73,48 +87,37 @@ ColumnLayout {
                 Layout.fillWidth: true
                 Layout.topMargin: Tokens.padding.medium
                 Layout.bottomMargin: Tokens.padding.medium
-            Layout.leftMargin: iconLoader.active ? 0 : width * 0.1
                 spacing: Tokens.spacing.medium
 
-            WrappedLoader {
+                Repeater {
-                Layout.fillWidth: true
+                    model: {
-                active: !batLoader.active && root.height > 200
+                        const items = [];
+                        const hasBatt = UPower.displayDevice.isLaptopBattery;
+                        const rHeight = root.rootHeight;
 
-                sourceComponent: FetchText {
+                        if (!hasBatt && rHeight > 200)
-                    text: `OS  : ${SysInfo.osPrettyName || SysInfo.osName}`
+                            items.push(`OS  : ${SysInfo.osPrettyName || SysInfo.osName}`);
-                }
+
+                        if (rHeight > (hasBatt ? 200 : 110))
+                            items.push(`WM  : ${SysInfo.wm}`);
+
+                        if (!hasBatt || rHeight > 110)
+                            items.push(`USER: ${SysInfo.user}`);
+
+                        items.push(`UP  : ${SysInfo.uptime}`);
+
+                        if (hasBatt)
+                            items.push(`BATT: ${[UPowerDeviceState.Charging, UPowerDeviceState.FullyCharged, UPowerDeviceState.PendingCharge].includes(UPower.displayDevice.state) ? "(+) " : ""}${Math.round(UPower.displayDevice.percentage * 100)}%`);
+
+                        return items;
                     }
 
-            WrappedLoader {
+                    MonoText {
-                Layout.fillWidth: true
+                        required property string modelData
-                active: root.height > (batLoader.active ? 200 : 110)
-
-                sourceComponent: FetchText {
-                    text: `WM  : ${SysInfo.wm}`
-                }
-            }
-
-            WrappedLoader {
-                Layout.fillWidth: true
-                active: !batLoader.active || root.height > 110
-
-                sourceComponent: FetchText {
-                    text: `USER: ${SysInfo.user}`
-                }
-            }
-
-            FetchText {
-                text: `UP  : ${SysInfo.uptime}`
-            }
-
-            WrappedLoader {
-                id: batLoader
 
                         Layout.fillWidth: true
-                active: UPower.displayDevice.isLaptopBattery
+                        text: modelData
-
+                        elide: Text.ElideRight
-                sourceComponent: FetchText {
-                    text: `BATT: ${[UPowerDeviceState.Charging, UPowerDeviceState.FullyCharged, UPowerDeviceState.PendingCharge].includes(UPower.displayDevice.state) ? "(+) " : ""}${Math.round(UPower.displayDevice.percentage * 100)}%`
                     }
                 }
             }
@@ -122,25 +125,28 @@ ColumnLayout {
 
         WrappedLoader {
             Layout.alignment: Qt.AlignHCenter
-        active: root.height > 180
+            active: root.rootHeight > 180
 
             sourceComponent: RowLayout {
+                id: coloursRow
+
                 spacing: Tokens.spacing.largeIncreased
 
                 Repeater {
-                model: Math.max(0, Math.min(8, root.width / (Tokens.font.body.large.pointSize * 2 + Tokens.spacing.large)))
+                    model: CUtils.clamp(Math.floor((layout.width + coloursRow.spacing) / (root.cBoxSize + coloursRow.spacing)), 0, 8)
 
                     StyledRect {
                         required property int index
 
                         implicitWidth: implicitHeight
-                    implicitHeight: Tokens.font.body.large.pointSize * 2
+                        implicitHeight: root.cBoxSize
                         color: Colours.palette[`term${index}`]
                         radius: Tokens.rounding.medium
                     }
                 }
             }
         }
+    }
 
     Component {
         id: caelestiaLogo
@@ -166,13 +172,7 @@ ColumnLayout {
         visible: active
     }
 
-    component FetchText: MonoText {
-        Layout.fillWidth: true
-        font: root.width > 400 ? Tokens.font.mono.large : Tokens.font.mono.medium
-        elide: Text.ElideRight
-    }
-
     component MonoText: StyledText {
-        font: Tokens.font.mono.small
+        font: root.width > 400 ? Tokens.font.mono.medium : Tokens.font.mono.small
     }
 }

modules/lock/Media.qml

@@ -47,7 +47,9 @@ StyledClippingRect {
     ColumnLayout {
         id: layout
 
-        anchors.fill: parent
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
         anchors.margins: Tokens.padding.extraLarge
         spacing: Tokens.spacing.extraSmall