bar: make lower-center group more compact

dots/.config/quickshell/ii/modules/common/Icons.qml

@@ -3,10 +3,22 @@ pragma Singleton
 // From https://github.com/caelestia-dots/shell (GPLv3)
 
 import Quickshell
+import qs.services
 
 Singleton {
     id: root
 
+    function getBatteryIcon(percentage: int): string {
+        if (percentage >= 93) return "battery_android_full";
+        if (percentage >= 78) return "battery_android_6";
+        if (percentage >= 64) return "battery_android_5";
+        if (percentage >= 50) return "battery_android_4";
+        if (percentage >= 35) return "battery_android_3";
+        if (percentage >= 21) return "battery_android_2";
+        if (percentage >= 7) return "battery_android_1";
+        return "battery_android_0";
+    }
+
     function getBluetoothDeviceMaterialSymbol(systemIconName: string): string {
         if (systemIconName.includes("headset") || systemIconName.includes("headphones"))
             return "headphones";
@@ -21,6 +33,24 @@ Singleton {
         return "bluetooth";
     }
 
+    function getNetworkMaterialSymbol() {
+        if (Network.ethernet) return "lan";
+        if (Network.wifiEnabled && Network.wifiStatus === "connected") {
+            const strength = Network.active?.strength ?? 0
+            if (strength > 83) return "signal_wifi_4_bar";
+            if (strength > 67) return "network_wifi";
+            if (strength > 50) return "network_wifi_3_bar";
+            if (strength > 33) return "network_wifi_2_bar";
+            if (strength > 17) return "network_wifi_1_bar";
+            return "signal_wifi_0_bar"
+        } else {
+            if (Network.wifiStatus === "connecting") return "signal_wifi_statusbar_not_connected";
+            if (Network.wifiStatus === "disconnected") return "wifi_find";
+            if (Network.wifiStatus === "disabled") return "signal_wifi_off";
+            return "signal_wifi_bad";
+        }
+    }
+
     readonly property var weatherIconMap: ({
         "113": "clear_day",
         "116": "partly_cloudy_day",

dots/.config/quickshell/ii/modules/ii/verticalBar/BatteryIndicator.qml

@@ -21,14 +21,15 @@ MouseArea {
         id: batteryProgress
         anchors.centerIn: parent
         vertical: true
-        valueBarWidth: 21
+        valueBarWidth: 20
-        valueBarHeight: 40
+        valueBarHeight: 36
         value: percentage
+        // value: 1
         highlightColor: (isLow && !isCharging) ? Appearance.m3colors.m3error : Appearance.colors.colOnSecondaryContainer
 
         font {
-            pixelSize: text.length > 2 ? 11 : 13
+            pixelSize: 13
-            weight: text.length > 2 ? Font.Medium : Font.DemiBold
+            weight: Font.DemiBold
         }
 
         textMask: Item {
@@ -36,20 +37,29 @@ MouseArea {
             width: batteryProgress.valueBarWidth
             height: batteryProgress.valueBarHeight
 
-            ColumnLayout {
+            Column {
                 anchors.centerIn: parent
-                spacing: 0
+                spacing: -4
 
                 MaterialSymbol {
                     id: boltIcon
-                    Layout.alignment: Qt.AlignHCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
                     fill: 1
-                    text: isCharging ? "bolt" : "battery_android_full"
+                    text: {
+                        if (batteryProgress.value == 1) {
+                            return "check";
+                        } else if (root.isCharging) {
+                            return "bolt";
+                        } else {
+                            return Icons.getBatteryIcon(Battery.percentage * 100);
+                        }
+                    }
                     iconSize: Appearance.font.pixelSize.normal
                     animateChange: true
                 }
                 StyledText {
-                    Layout.alignment: Qt.AlignHCenter
+                    visible: text.length <= 2
+                    anchors.horizontalCenter: parent.horizontalCenter
                     font: batteryProgress.font
                     text: batteryProgress.text
                 }

dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalBarContent.qml

@@ -140,13 +140,6 @@ Item { // Bar content region
                 Layout.fillHeight: false
             }
 
-            HorizontalBarSeparator {}
-
-            VerticalDateWidget {
-                Layout.fillWidth: true
-                Layout.fillHeight: false
-            }
-
             HorizontalBarSeparator {
                 visible: Battery.available
             }

dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalClockWidget.qml

@@ -8,26 +8,44 @@ import qs.modules.ii.bar as Bar
 Item {
     id: root
     property bool borderless: Config.options.bar.borderless
-    implicitHeight: clockColumn.implicitHeight
+    implicitHeight: column.implicitHeight
     implicitWidth: Appearance.sizes.verticalBarWidth
 
-    ColumnLayout {
+    readonly property string dateTimeString: DateTime.time
-        id: clockColumn
+    readonly property bool hasAmPm: dateTimeString.toLowerCase().includes("am") || dateTimeString.toLowerCase().includes("pm")
-        anchors.centerIn: parent
-        spacing: 0
 
-        Repeater {
+    Column {
-            model: DateTime.time.split(/[: ]/)
+        id: column
-            delegate: StyledText {
+        anchors.centerIn: parent
-                required property string modelData
+        spacing: root.hasAmPm ? 6 : 0
-                Layout.alignment: Qt.AlignHCenter
+
-                font.pixelSize: modelData.match(/am|pm/i) ? 
+        Column {
-                    Appearance.font.pixelSize.smaller // Smaller "am"/"pm" text
+            anchors.horizontalCenter: parent.horizontalCenter
-                    : Appearance.font.pixelSize.large
+            spacing: -4
-                color: Appearance.colors.colOnLayer1
+
-                text: modelData.padStart(2, "0")
+            Repeater {
+                model: root.dateTimeString.split(/[: ]/)
+                delegate: StyledText {
+                    required property string modelData
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    font.pixelSize: {
+                        if (modelData.match(/am|pm/i))
+                            return Appearance.font.pixelSize.smaller;
+                        else
+                            // Smaller "am"/"pm" text
+                            return Appearance.font.pixelSize.large;
+                    }
+                    color: Appearance.colors.colOnLayer1
+                    text: modelData.padStart(2, "0")
+                }
             }
         }
+        StyledText {
+            anchors.horizontalCenter: parent.horizontalCenter
+            font.pixelSize: Appearance.font.pixelSize.smallest
+            color: Appearance.colors.colOnLayer1
+            text: DateTime.shortDate
+        }
     }
 
     MouseArea {

dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalDateWidget.qml

@@ -1,64 +0,0 @@
-import qs.modules.common
-import qs.modules.common.widgets
-import qs.services
-import QtQuick
-import QtQuick.Shapes
-import QtQuick.Layouts
-import qs.modules.ii.bar as Bar
-
-Item { // Full hitbox
-    id: root
-
-    implicitHeight: content.implicitHeight
-    implicitWidth: Appearance.sizes.verticalBarWidth
-    property var dayOfMonth: DateTime.shortDate.split(/[-\/]/)[0]  // What if 🍔murica🦅? good question
-    property var monthOfYear: DateTime.shortDate.split(/[-\/]/)[1]
-
-    Item { // Boundaries for date numbers
-        id: content
-        anchors.centerIn: parent
-        implicitWidth: 24
-        implicitHeight: 30
-
-        Shape {
-            id: diagonalLine
-            property real padding: 4
-            anchors.fill: parent
-            preferredRendererType: Shape.CurveRenderer
-
-            ShapePath {
-                strokeWidth: 1.2
-                strokeColor: Appearance.colors.colSubtext
-                fillColor: "transparent"
-                startX: content.width - diagonalLine.padding
-                startY: diagonalLine.padding
-                PathLine {
-                    x: diagonalLine.padding
-                    y: content.height - diagonalLine.padding
-                }
-            }
-        }
-
-        StyledText {
-            id: dayText
-            anchors {
-                top: parent.top
-                left: parent.left
-            }
-            font.pixelSize: 13
-            color: Appearance.colors.colOnLayer1
-            text: dayOfMonth
-        }
-
-        StyledText {
-            id: monthText
-            anchors {
-                bottom: parent.bottom
-                right: parent.right
-            }
-            font.pixelSize: 13
-            color: Appearance.colors.colOnLayer1
-            text: monthOfYear
-        }
-    }
-}