From 24b3e2f2ce36d26ef5a08c75240a0b1836bbb18e Mon Sep 17 00:00:00 2001
From: Avii <git@avii.nl>
Date: Sat, 8 Aug 2026 14:31:44 +0200
Subject: [PATCH] 1786192304

---
 dashboard/ui/climate.slint | 170 +++++++++++++++++++------------------
 1 file changed, 87 insertions(+), 83 deletions(-)

diff --git a/dashboard/ui/climate.slint b/dashboard/ui/climate.slint
index 220273b..138adc0 100644
--- a/dashboard/ui/climate.slint
+++ b/dashboard/ui/climate.slint
@@ -5,7 +5,7 @@ in property <string> : "CONNECTING";
 in property <string> : "cloud";
 */
 
-import { Palette } from "std-widgets.slint";
+import { Palette, HorizontalBox, VerticalBox } from "std-widgets.slint";
 export struct WeatherData {
     kind: string,
     label: string,
@@ -31,18 +31,93 @@ export component Climate inherits Rectangle {
     in property <WeatherData> weather;
     in property <bool> is-night;
 
-    Text {
-        text: "\{weather.temperature}\{weather.temperature-unit}";
-        font-size: 72px;
-        font-weight: 700;
-        vertical-alignment: center;
-    }
+    HorizontalBox {
+        if weather.kind == "sun": Image {
+            colorize: Palette.foreground;
+            width: 120px;
+            height: 105px;
+            source: @image-url("icons/sun.svg");
+            image-fit: contain;
+        }
+        if weather.kind == "cloud-sun" && !is-night: Image {
+            colorize: Palette.foreground;
+            width: 120px;
+            height: 105px;
+            source: @image-url("icons/cloud-sun.svg");
+            image-fit: contain;
+        }
+        if weather.kind == "cloud-sun" && is-night: Image {
+            colorize: Palette.foreground;
+            width: 120px;
+            height: 105px;
+            source: @image-url("icons/cloud-moon.svg");
+            image-fit: contain;
+        }
+        if weather.kind == "cloud": Image {
+            colorize: Palette.foreground;
+            width: 120px;
+            height: 105px;
+            source: @image-url("icons/cloud.svg");
+            image-fit: contain;
+        }
+        if weather.kind == "cloud-rain": Image {
+            colorize: Palette.foreground;
+            width: 120px;
+            height: 105px;
+            source: @image-url("icons/cloud-rain.svg");
+            image-fit: contain;
+        }
+        if weather.kind == "cloud-rain-wind": Image {
+            colorize: Palette.foreground;
+            width: 120px;
+            height: 105px;
+            source: @image-url("icons/cloud-rain-wind.svg");
+            image-fit: contain;
+        }
+        if weather.kind == "cloud-lightning": Image {
+            colorize: Palette.foreground;
+            width: 120px;
+            height: 105px;
+            source: @image-url("icons/cloud-lightning.svg");
+            image-fit: contain;
+        }
+        if weather.kind == "snowflake": Image {
+            colorize: Palette.foreground;
+            width: 120px;
+            height: 105px;
+            source: @image-url("icons/snowflake.svg");
+            image-fit: contain;
+        }
+        if weather.kind == "cloud-fog": Image {
+            colorize: Palette.foreground;
+            width: 120px;
+            height: 105px;
+            source: @image-url("icons/cloud-fog.svg");
+            image-fit: contain;
+        }
+        if weather.kind == "moon": Image {
+            colorize: Palette.foreground;
+            width: 120px;
+            height: 105px;
+            source: @image-url("icons/moon.svg");
+            image-fit: contain;
+        }
 
-    Text {
-        text: weather.label;
-        font-size: 24px;
-        font-weight: 500;
-        vertical-alignment: center;
+        VerticalBox {
+            Text {
+                text: "\{weather.temperature}\{weather.temperature-unit}";
+                font-size: 36px;
+                font-weight: 700;
+                vertical-alignment: center;
+            }
+
+            Text {
+                text: weather.label;
+                font-size: 24px;
+                font-weight: 500;
+                vertical-alignment: center;
+            }
+        }
     }
 
     // Text {
@@ -53,75 +128,4 @@ export component Climate inherits Rectangle {
     //     font-weight: 700;
     //     vertical-alignment: center;
     // }
-
-    if weather.kind == "sun": Image {
-        colorize: Palette.foreground;
-        width: 120px;
-        height: 105px;
-        source: @image-url("icons/sun.svg");
-        image-fit: contain;
-    }
-    if weather.kind == "cloud-sun" && !is-night: Image {
-        colorize: Palette.foreground;
-        width: 120px;
-        height: 105px;
-        source: @image-url("icons/cloud-sun.svg");
-        image-fit: contain;
-    }
-    if weather.kind == "cloud-sun" && is-night: Image {
-        colorize: Palette.foreground;
-        width: 120px;
-        height: 105px;
-        source: @image-url("icons/cloud-moon.svg");
-        image-fit: contain;
-    }
-    if weather.kind == "cloud": Image {
-        colorize: Palette.foreground;
-        width: 120px;
-        height: 105px;
-        source: @image-url("icons/cloud.svg");
-        image-fit: contain;
-    }
-    if weather.kind == "cloud-rain": Image {
-        colorize: Palette.foreground;
-        width: 120px;
-        height: 105px;
-        source: @image-url("icons/cloud-rain.svg");
-        image-fit: contain;
-    }
-    if weather.kind == "cloud-rain-wind": Image {
-        colorize: Palette.foreground;
-        width: 120px;
-        height: 105px;
-        source: @image-url("icons/cloud-rain-wind.svg");
-        image-fit: contain;
-    }
-    if weather.kind == "cloud-lightning": Image {
-        colorize: Palette.foreground;
-        width: 120px;
-        height: 105px;
-        source: @image-url("icons/cloud-lightning.svg");
-        image-fit: contain;
-    }
-    if weather.kind == "snowflake": Image {
-        colorize: Palette.foreground;
-        width: 120px;
-        height: 105px;
-        source: @image-url("icons/snowflake.svg");
-        image-fit: contain;
-    }
-    if weather.kind == "cloud-fog": Image {
-        colorize: Palette.foreground;
-        width: 120px;
-        height: 105px;
-        source: @image-url("icons/cloud-fog.svg");
-        image-fit: contain;
-    }
-    if weather.kind == "moon": Image {
-        colorize: Palette.foreground;
-        width: 120px;
-        height: 105px;
-        source: @image-url("icons/moon.svg");
-        image-fit: contain;
-    }
 }