feat: add sun and moon view to WeatherTab (#787)

* feat: add sun and moon view to WeatherTab

* feat: hourly forecast and scrollable date

* fix: put listviews in loaders to prevent ui blocking

* dankdash/weather: wrap all tab content in loaders, weather updates
- remove a bunch of transitions that make things feel glitchy
- use animation durations from Theme
- configurable detailed/compact hourly view

* weather: fix scroll and some display issues

---------

Co-authored-by: bbedward <bbedward@gmail.com>

quickshell/Common/SessionData.qml

@@ -86,6 +86,7 @@ Singleton {
     property var enabledGpuPciIds: []
 
     property string wifiDeviceOverride: ""
+    property bool weatherHourlyDetailed: true
 
     Component.onCompleted: {
         if (!isGreeterMode) {
@@ -157,6 +158,7 @@ Singleton {
                 nonNvidiaGpuTempEnabled = settings.nonNvidiaGpuTempEnabled !== undefined ? settings.nonNvidiaGpuTempEnabled : false;
                 enabledGpuPciIds = settings.enabledGpuPciIds !== undefined ? settings.enabledGpuPciIds : [];
                 wifiDeviceOverride = settings.wifiDeviceOverride !== undefined ? settings.wifiDeviceOverride : "";
+                weatherHourlyDetailed = settings.weatherHourlyDetailed !== undefined ? settings.weatherHourlyDetailed : true;
                 wallpaperCyclingEnabled = settings.wallpaperCyclingEnabled !== undefined ? settings.wallpaperCyclingEnabled : false;
                 wallpaperCyclingMode = settings.wallpaperCyclingMode !== undefined ? settings.wallpaperCyclingMode : "interval";
                 wallpaperCyclingInterval = settings.wallpaperCyclingInterval !== undefined ? settings.wallpaperCyclingInterval : 300;
@@ -226,6 +228,7 @@ Singleton {
             "nonNvidiaGpuTempEnabled": nonNvidiaGpuTempEnabled,
             "enabledGpuPciIds": enabledGpuPciIds,
             "wifiDeviceOverride": wifiDeviceOverride,
+            "weatherHourlyDetailed": weatherHourlyDetailed,
             "wallpaperCyclingEnabled": wallpaperCyclingEnabled,
             "wallpaperCyclingMode": wallpaperCyclingMode,
             "wallpaperCyclingInterval": wallpaperCyclingInterval,
@@ -290,7 +293,7 @@ Singleton {
     }
 
     function cleanupUnusedKeys() {
-        const validKeys = ["isLightMode", "wallpaperPath", "perMonitorWallpaper", "monitorWallpapers", "perModeWallpaper", "wallpaperPathLight", "wallpaperPathDark", "monitorWallpapersLight", "monitorWallpapersDark", "doNotDisturb", "nightModeEnabled", "nightModeTemperature", "nightModeHighTemperature", "nightModeAutoEnabled", "nightModeAutoMode", "nightModeStartHour", "nightModeStartMinute", "nightModeEndHour", "nightModeEndMinute", "latitude", "longitude", "nightModeUseIPLocation", "nightModeLocationProvider", "pinnedApps", "hiddenTrayIds", "selectedGpuIndex", "nvidiaGpuTempEnabled", "nonNvidiaGpuTempEnabled", "enabledGpuPciIds", "wifiDeviceOverride", "wallpaperCyclingEnabled", "wallpaperCyclingMode", "wallpaperCyclingInterval", "wallpaperCyclingTime", "monitorCyclingSettings", "lastBrightnessDevice", "brightnessExponentialDevices", "brightnessUserSetValues", "brightnessExponentValues", "launchPrefix", "wallpaperTransition", "includedTransitions", "recentColors", "showThirdPartyPlugins", "configVersion"];
+        const validKeys = ["isLightMode", "wallpaperPath", "perMonitorWallpaper", "monitorWallpapers", "perModeWallpaper", "wallpaperPathLight", "wallpaperPathDark", "monitorWallpapersLight", "monitorWallpapersDark", "doNotDisturb", "nightModeEnabled", "nightModeTemperature", "nightModeHighTemperature", "nightModeAutoEnabled", "nightModeAutoMode", "nightModeStartHour", "nightModeStartMinute", "nightModeEndHour", "nightModeEndMinute", "latitude", "longitude", "nightModeUseIPLocation", "nightModeLocationProvider", "pinnedApps", "hiddenTrayIds", "selectedGpuIndex", "nvidiaGpuTempEnabled", "nonNvidiaGpuTempEnabled", "enabledGpuPciIds", "wifiDeviceOverride", "weatherHourlyDetailed", "wallpaperCyclingEnabled", "wallpaperCyclingMode", "wallpaperCyclingInterval", "wallpaperCyclingTime", "monitorCyclingSettings", "lastBrightnessDevice", "brightnessExponentialDevices", "brightnessUserSetValues", "brightnessExponentValues", "launchPrefix", "wallpaperTransition", "includedTransitions", "recentColors", "showThirdPartyPlugins", "configVersion"];
 
         try {
             const content = settingsFile.text();
@@ -894,6 +897,11 @@ Singleton {
         saveSettings();
     }
 
+    function setWeatherHourlyDetailed(detailed) {
+        weatherHourlyDetailed = detailed;
+        saveSettings();
+    }
+
     function syncWallpaperForCurrentMode() {
         if (!perModeWallpaper)
             return;

quickshell/Common/Theme.qml

@@ -1004,6 +1004,19 @@ Singleton {
         return Qt.rgba(c.r, c.g, c.b, a);
     }
 
+    function blendAlpha(c, a) {
+        return Qt.rgba(c.r, c.g, c.b, c.a*a);
+    }
+
+    function blend(c1, c2, r) {
+        return Qt.rgba(
+            c1.r * (1-r) + c2.r * r,
+            c1.g * (1-r) + c2.g * r,
+            c1.b * (1-r) + c2.b * r,
+            c1.a * (1-r) + c2.a * r,
+        );
+    }
+
     function getFillMode(modeName) {
         switch (modeName) {
         case "Stretch":

quickshell/Common/suncalc.js

@@ -0,0 +1,308 @@
+.pragma library
+// Copyright (c) 2025, Vladimir Agafonkin
+// All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without modification, are
+// permitted provided that the following conditions are met:
+//
+//    1. Redistributions of source code must retain the above copyright notice, this list of
+//       conditions and the following disclaimer.
+//
+//    2. Redistributions in binary form must reproduce the above copyright notice, this list
+//       of conditions and the following disclaimer in the documentation and/or other materials
+//       provided with the distribution.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+// COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+// EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+// HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
+// TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+// SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+// shortcuts for easier to read formulas
+
+const PI   = Math.PI,
+    sin  = Math.sin,
+    cos  = Math.cos,
+    tan  = Math.tan,
+    asin = Math.asin,
+    atan = Math.atan2,
+    acos = Math.acos,
+    rad  = PI / 180;
+
+// sun calculations are based on https://aa.quae.nl/en/reken/zonpositie.html formulas
+
+// date/time constants and conversions
+
+const dayMs = 1000 * 60 * 60 * 24,
+    J1970 = 2440588,
+    J2000 = 2451545;
+
+function toJulian(date) { return date.valueOf() / dayMs - 0.5 + J1970; }
+function fromJulian(j)  { return new Date((j + 0.5 - J1970) * dayMs); }
+function toDays(date)   { return toJulian(date) - J2000; }
+
+
+// general calculations for position
+
+const e = rad * 23.4397; // obliquity of the Earth
+
+function rightAscension(l, b) { return atan(sin(l) * cos(e) - tan(b) * sin(e), cos(l)); }
+function declination(l, b)    { return asin(sin(b) * cos(e) + cos(b) * sin(e) * sin(l)); }
+
+function azimuth(H, phi, dec)  { return atan(sin(H), cos(H) * sin(phi) - tan(dec) * cos(phi)); }
+function altitude(H, phi, dec) { return asin(sin(phi) * sin(dec) + cos(phi) * cos(dec) * cos(H)); }
+
+function siderealTime(d, lw) { return rad * (280.16 + 360.9856235 * d) - lw; }
+
+function astroRefraction(h) {
+    if (h < 0) // the following formula works for positive altitudes only.
+        h = 0; // if h = -0.08901179 a div/0 would occur.
+
+    // formula 16.4 of "Astronomical Algorithms" 2nd edition by Jean Meeus (Willmann-Bell, Richmond) 1998.
+    // 1.02 / tan(h + 10.26 / (h + 5.10)) h in degrees, result in arc minutes -> converted to rad:
+    return 0.0002967 / Math.tan(h + 0.00312536 / (h + 0.08901179));
+}
+
+// general sun calculations
+
+function solarMeanAnomaly(d) { return rad * (357.5291 + 0.98560028 * d); }
+
+function eclipticLongitude(M) {
+
+    const C = rad * (1.9148 * sin(M) + 0.02 * sin(2 * M) + 0.0003 * sin(3 * M)), // equation of center
+        P = rad * 102.9372; // perihelion of the Earth
+
+    return M + C + P + PI;
+}
+
+function sunCoords(d) {
+
+    const M = solarMeanAnomaly(d),
+        L = eclipticLongitude(M);
+
+    return {
+        dec: declination(L, 0),
+        ra: rightAscension(L, 0)
+    };
+}
+
+
+// calculates sun position for a given date and latitude/longitude
+
+function getPosition(date, lat, lng) {
+
+    const lw  = rad * -lng,
+        phi = rad * lat,
+        d   = toDays(date),
+
+        c  = sunCoords(d),
+        H  = siderealTime(d, lw) - c.ra;
+
+    return {
+        azimuth: azimuth(H, phi, c.dec),
+        altitude: altitude(H, phi, c.dec)
+    };
+};
+
+
+// sun times configuration (angle, morning name, evening name)
+
+const times = [
+    [-0.833, 'sunrise', 'sunset'],
+    [-0.3, 'sunriseEnd', 'sunsetStart'],
+    [-6, 'dawn', 'dusk'],
+    [-12, 'nauticalDawn', 'nauticalDusk'],
+    [-18, 'nightEnd', 'night'],
+    [6, 'goldenHourEnd', 'goldenHour']
+];
+
+// adds a custom time to the times config
+
+function addTime(angle, riseName, setName) {
+    times.push([angle, riseName, setName]);
+};
+
+
+// calculations for sun times
+
+const J0 = 0.0009;
+
+function julianCycle(d, lw) { return Math.round(d - J0 - lw / (2 * PI)); }
+
+function approxTransit(Ht, lw, n) { return J0 + (Ht + lw) / (2 * PI) + n; }
+function solarTransitJ(ds, M, L)  { return J2000 + ds + 0.0053 * sin(M) - 0.0069 * sin(2 * L); }
+
+function hourAngle(h, phi, d) { return acos((sin(h) - sin(phi) * sin(d)) / (cos(phi) * cos(d))); }
+function observerAngle(height) { return -2.076 * Math.sqrt(height) / 60; }
+
+// returns set time for the given sun altitude
+function getSetJ(h, lw, phi, dec, n, M, L) {
+
+    const w = hourAngle(h, phi, dec),
+        a = approxTransit(w, lw, n);
+    return solarTransitJ(a, M, L);
+}
+
+
+// calculates sun times for a given date, latitude/longitude, and, optionally,
+// the observer height (in meters) relative to the horizon
+
+function getTimes(date, lat, lng, height) {
+
+    height = height || 0;
+
+    const lw = rad * -lng,
+        phi = rad * lat,
+        dh = observerAngle(height),
+        d = toDays(date),
+        n = julianCycle(d, lw),
+        ds = approxTransit(0, lw, n),
+        M = solarMeanAnomaly(ds),
+        L = eclipticLongitude(M),
+        dec = declination(L, 0),
+        Jnoon = solarTransitJ(ds, M, L);
+
+    const result = {
+        solarNoon: fromJulian(Jnoon),
+        nadir: fromJulian(Jnoon - 0.5)
+    };
+
+    for (const time of times) {
+        const h0 = (time[0] + dh) * rad;
+        const Jset = getSetJ(h0, lw, phi, dec, n, M, L);
+        const Jrise = Jnoon - (Jset - Jnoon);
+
+        result[time[1]] = fromJulian(Jrise);
+        result[time[2]] = fromJulian(Jset);
+    }
+
+    return result;
+};
+
+
+// moon calculations, based on http://aa.quae.nl/en/reken/hemelpositie.html formulas
+
+function moonCoords(d) { // geocentric ecliptic coordinates of the moon
+
+    const L = rad * (218.316 + 13.176396 * d), // ecliptic longitude
+        M = rad * (134.963 + 13.064993 * d), // mean anomaly
+        F = rad * (93.272 + 13.229350 * d),  // mean distance
+
+        l  = L + rad * 6.289 * sin(M), // longitude
+        b  = rad * 5.128 * sin(F),     // latitude
+        dt = 385001 - 20905 * cos(M);  // distance to the moon in km
+
+    return {
+        ra: rightAscension(l, b),
+        dec: declination(l, b),
+        dist: dt
+    };
+}
+
+function getMoonPosition(date, lat, lng) {
+
+    const lw = rad * -lng,
+        phi = rad * lat,
+        d = toDays(date),
+        c = moonCoords(d),
+        H = siderealTime(d, lw) - c.ra,
+        h = altitude(H, phi, c.dec),
+        // formula 14.1 of "Astronomical Algorithms" 2nd edition by Jean Meeus (Willmann-Bell, Richmond) 1998.
+        pa = atan(sin(H), tan(phi) * cos(c.dec) - sin(c.dec) * cos(H));
+
+    return {
+        azimuth: azimuth(H, phi, c.dec),
+        altitude: h + astroRefraction(h), // altitude correction for refraction,
+        distance: c.dist,
+        parallacticAngle: pa
+    };
+};
+
+
+// calculations for illumination parameters of the moon,
+// based on http://idlastro.gsfc.nasa.gov/ftp/pro/astro/mphase.pro formulas and
+// Chapter 48 of "Astronomical Algorithms" 2nd edition by Jean Meeus (Willmann-Bell, Richmond) 1998.
+
+function getMoonIllumination(date) {
+
+    const d = toDays(date || new Date()),
+        s = sunCoords(d),
+        m = moonCoords(d),
+
+        sdist = 149598000, // distance from Earth to Sun in km
+
+        phi = acos(sin(s.dec) * sin(m.dec) + cos(s.dec) * cos(m.dec) * cos(s.ra - m.ra)),
+        inc = atan(sdist * sin(phi), m.dist - sdist * cos(phi)),
+        angle = atan(cos(s.dec) * sin(s.ra - m.ra), sin(s.dec) * cos(m.dec) -
+                cos(s.dec) * sin(m.dec) * cos(s.ra - m.ra));
+
+    return {
+        fraction: (1 + cos(inc)) / 2,
+        phase: 0.5 + 0.5 * inc * (angle < 0 ? -1 : 1) / Math.PI,
+        angle
+    };
+};
+
+
+function hoursLater(date, h) {
+    return new Date(date.valueOf() + h * dayMs / 24);
+}
+
+// calculations for moon rise/set times are based on http://www.stargazing.net/kepler/moonrise.html article
+
+function getMoonTimes(date, lat, lng, inUTC) {
+    const t = new Date(date);
+    if (inUTC) t.setUTCHours(0, 0, 0, 0);
+    else t.setHours(0, 0, 0, 0);
+
+    const hc = 0.133 * rad;
+    let h0 = getMoonPosition(t, lat, lng).altitude - hc,
+        rise, set, ye;
+
+    // go in 2-hour chunks, each time seeing if a 3-point quadratic curve crosses zero (which means rise or set)
+    for (let i = 1; i <= 24; i += 2) {
+        const h1 = getMoonPosition(hoursLater(t, i), lat, lng).altitude - hc;
+        const h2 = getMoonPosition(hoursLater(t, i + 1), lat, lng).altitude - hc;
+        const a = (h0 + h2) / 2 - h1;
+        const b = (h2 - h0) / 2;
+        const xe = -b / (2 * a);
+        const d = b * b - 4 * a * h1;
+        let roots = 0, x1 = 0, x2 = 0;
+        ye = (a * xe + b) * xe + h1;
+
+        if (d >= 0) {
+            const dx = Math.sqrt(d) / (Math.abs(a) * 2);
+            x1 = xe - dx;
+            x2 = xe + dx;
+            if (Math.abs(x1) <= 1) roots++;
+            if (Math.abs(x2) <= 1) roots++;
+            if (x1 < -1) x1 = x2;
+        }
+
+        if (roots === 1) {
+            if (h0 < 0) rise = i + x1;
+            else set = i + x1;
+
+        } else if (roots === 2) {
+            rise = i + (ye < 0 ? x2 : x1);
+            set = i + (ye < 0 ? x1 : x2);
+        }
+
+        if (rise && set) break;
+
+        h0 = h2;
+    }
+
+    const result = {};
+
+    if (rise) result.rise = hoursLater(t, rise);
+    if (set) result.set = hoursLater(t, set);
+
+    if (!rise && !set) result[ye > 0 ? 'alwaysUp' : 'alwaysDown'] = true;
+
+    return result;
+};

quickshell/Modules/DankBar/Widgets/WeatherForecastCard.qml

@@ -0,0 +1,186 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+    radius: Theme.cornerRadius
+
+    property var date: null
+    property var daily: true
+    property var forecastData: null
+    property var dense: false
+
+    readonly property bool isCurrent: {
+        if (daily) {
+            date ? WeatherService.calendarDayDifference(new Date(), date) === 0 : false;
+        } else {
+            date ? WeatherService.calendarHourDifference(new Date(), date) === 0 : false;
+        }
+    }
+
+    readonly property string dateText: (daily ? root.forecastData?.day : root.forecastData?.time) ?? "--"
+
+    readonly property var minTemp: WeatherService.formatTemp(root.forecastData?.tempMin)
+    readonly property var maxTemp: WeatherService.formatTemp(root.forecastData?.tempMax)
+    readonly property string minMaxTempText: (minTemp ?? "--") + "/" + (maxTemp ?? "--")
+
+    readonly property var temp: WeatherService.formatTemp(root.forecastData?.temp)
+    readonly property string tempText: temp ?? "--"
+
+    readonly property var feelsLikeTemp: WeatherService.formatTemp(root.forecastData?.feelsLike)
+    readonly property string feelsLikeText: feelsLikeTemp ?? "--"
+
+    readonly property var humidity: WeatherService.formatPercent(root.forecastData?.humidity)
+    readonly property string humidityText: humidity ?? "--"
+
+    readonly property var wind: WeatherService.formatSpeed(root.forecastData?.wind)
+    readonly property string windText: wind ?? "--"
+
+    readonly property var pressure: WeatherService.formatPressure(root.forecastData?.pressure)
+    readonly property string pressureText: pressure ?? "--"
+
+    readonly property var precipitation: root.forecastData?.precipitationProbability
+    readonly property string precipitationText: precipitation + "%" ?? "--"
+
+    readonly property var visibility: WeatherService.formatVisibility(root.forecastData?.visibility)
+    readonly property string visibilityText: visibility ?? "--"
+
+    readonly property var values: daily ? [] : [
+        {
+            //     'name': "Temperature",
+            //     'text': root.tempText,
+            //     'icon': "thermometer"
+            // }, {
+            //     'name': "Feels Like",
+            //     'text': root.feelsLikeText,
+            //     'icon': "thermostat"
+            // }, {
+            'name': I18n.tr("Humidity"),
+            'text': root.humidityText,
+            'icon': "humidity_low"
+        },
+        {
+            'name': I18n.tr("Wind Speed"),
+            'text': root.windText,
+            'icon': "air"
+        },
+        {
+            'name': I18n.tr("Pressure"),
+            'text': root.pressureText,
+            'icon': "speed"
+        },
+        {
+            'name': I18n.tr("Precipitation Chance"),
+            'text': root.precipitationText,
+            'icon': "rainy"
+        },
+        {
+            'name': I18n.tr("Visibility"),
+            'text': root.visibilityText,
+            'icon': "wb_sunny"
+        }
+    ]
+
+    color: isCurrent ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1) : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    border.color: isCurrent ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) : "transparent"
+    border.width: isCurrent ? 1 : 0
+
+    Column {
+        anchors.centerIn: parent
+        spacing: Theme.spacingXS
+
+        StyledText {
+            text: root.forecastData != null ? root.dateText : I18n.tr("Forecast Not Available")
+            font.pixelSize: Theme.fontSizeSmall
+            color: root.isCurrent ? Theme.primary : (root.forecastData ? Theme.surfaceText : Theme.outline)
+            font.weight: root.isCurrent ? Font.Medium : Font.Normal
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        Row {
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: Theme.spacingM
+            visible: root.forecastData != null
+
+            Column {
+                spacing: Theme.spacingXS
+
+                DankIcon {
+                    name: root.forecastData ? WeatherService.getWeatherIcon(root.forecastData.wCode || 0, root.forecastData.isDay ?? true) : "cloud"
+                    size: Theme.iconSize
+                    color: root.isCurrent ? Theme.primary : Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.8)
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    text: root.daily ? root.minMaxTempText : root.tempText
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: root.isCurrent ? Theme.primary : Theme.surfaceText
+                    font.weight: Font.Medium
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    text: root.feelsLikeText
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: root.isCurrent ? Theme.primary : Theme.surfaceText
+                    font.weight: Font.Medium
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    visible: !root.daily
+                }
+            }
+
+            Column {
+                id: detailsColumn
+                spacing: 2
+                visible: !root.dense
+                width: implicitWidth
+
+                states: [
+                    State {
+                        name: "dense"
+                        when: root.dense
+                        PropertyChanges {
+                            target: detailsColumn
+                            opacity: 0
+                            width: 0
+                        }
+                    }
+                ]
+
+                transitions: [
+                    Transition {
+                        NumberAnimation {
+                            properties: "opacity,width"
+                            duration: Theme.shortDuration
+                            easing.type: Theme.standardEasing
+                        }
+                    }
+                ]
+
+                Repeater {
+                    model: root.values.length
+                    Row {
+                        spacing: 2
+
+                        DankIcon {
+                            name: root.values[index].icon
+                            size: 8
+                            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: root.values[index].text
+                            font.pixelSize: Theme.fontSizeSmall - 2
+                            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

quickshell/Modules/DankDash/DankDashPopout.qml

@@ -226,8 +226,8 @@ DankPopout {
                     return;
                 }
 
-                if (root.currentTabIndex === 2 && wallpaperTab.handleKeyEvent) {
+                if (root.currentTabIndex === 2 && wallpaperLoader.item?.handleKeyEvent) {
-                    if (wallpaperTab.handleKeyEvent(event)) {
+                    if (wallpaperLoader.item.handleKeyEvent(event)) {
                         event.accepted = true;
                         return;
                     }
@@ -301,7 +301,7 @@ DankPopout {
                         let settingsIndex = SettingsData.weatherEnabled ? 4 : 3;
                         if (index === settingsIndex) {
                             dashVisible = false;
-                            PopoutService.openSettings();
+                            settingsModal.show();
                         }
                     }
                 }
@@ -316,39 +316,42 @@ DankPopout {
                     width: parent.width
                     implicitHeight: {
                         if (currentIndex === 0)
-                            return overviewTab.implicitHeight;
+                            return overviewLoader.item?.implicitHeight ?? 410;
                         if (currentIndex === 1)
-                            return mediaTab.implicitHeight;
+                            return mediaLoader.item?.implicitHeight ?? 410;
                         if (currentIndex === 2)
-                            return wallpaperTab.implicitHeight;
+                            return wallpaperLoader.item?.implicitHeight ?? 410;
                         if (SettingsData.weatherEnabled && currentIndex === 3)
-                            return weatherTab.implicitHeight;
+                            return weatherLoader.item?.implicitHeight ?? 410;
-                        return overviewTab.implicitHeight;
+                        return 410;
                     }
                     currentIndex: root.currentTabIndex
 
+                    Loader {
+                        id: overviewLoader
+                        active: root.currentTabIndex === 0
+                        sourceComponent: Component {
                             OverviewTab {
-                        id: overviewTab
+                                onCloseDash: root.dashVisible = false
-
-                        onCloseDash: {
-                            root.dashVisible = false;
-                        }
-
                                 onSwitchToWeatherTab: {
                                     if (SettingsData.weatherEnabled) {
                                         tabBar.currentIndex = 3;
                                         tabBar.tabClicked(3);
                                     }
                                 }
-
                                 onSwitchToMediaTab: {
                                     tabBar.currentIndex = 1;
                                     tabBar.tabClicked(1);
                                 }
                             }
+                        }
+                    }
 
+                    Loader {
+                        id: mediaLoader
+                        active: root.currentTabIndex === 1
+                        sourceComponent: Component {
                             MediaPlayerTab {
-                        id: mediaTab
                                 targetScreen: root.screen
                                 popoutX: root.alignedX
                                 popoutY: root.alignedY
@@ -368,19 +371,29 @@ DankPopout {
                                 onHideDropdowns: root.__hideDropdowns()
                                 onVolumeButtonExited: root.__startCloseTimer()
                             }
-
+                        }
-                    WallpaperTab {
-                        id: wallpaperTab
-                        active: root.currentTabIndex === 2
-                        tabBarItem: tabBar
-                        keyForwardTarget: mainContainer
-                        targetScreen: root.screen
-                        parentPopout: root
                     }
 
-                    WeatherTab {
+                    Loader {
-                        id: weatherTab
+                        id: wallpaperLoader
-                        visible: SettingsData.weatherEnabled && root.currentTabIndex === 3
+                        active: root.currentTabIndex === 2
+                        sourceComponent: Component {
+                            WallpaperTab {
+                                active: true
+                                tabBarItem: tabBar
+                                keyForwardTarget: mainContainer
+                                targetScreen: root.triggerScreen
+                                parentPopout: root
+                            }
+                        }
+                    }
+
+                    Loader {
+                        id: weatherLoader
+                        active: SettingsData.weatherEnabled && root.currentTabIndex === 3
+                        sourceComponent: Component {
+                            WeatherTab {}
+                        }
                     }
                 }
             }

quickshell/Modules/DankDash/MediaPlayerTab.qml

@@ -79,11 +79,16 @@ Item {
     }
 
     onActivePlayerChanged: {
+        if (!activePlayer) {
+            isSwitching = false;
+            _switchHold = false;
+            return;
+        }
         isSwitching = true;
         _switchHold = true;
         paletteReady = false;
         _switchHoldTimer.restart();
-        if (activePlayer && activePlayer.trackArtUrl) {
+        if (activePlayer.trackArtUrl) {
             loadArtwork(activePlayer.trackArtUrl);
         }
     }

quickshell/Services/WeatherService.qml

@@ -1,17 +1,18 @@
 pragma Singleton
-
 pragma ComponentBehavior: Bound
 
 import QtQuick
 import Quickshell
 import Quickshell.Io
 import qs.Common
+import "../Common/suncalc.js" as SunCalc
 
 Singleton {
     id: root
 
     property int refCount: 0
 
+    property var selectedDate: new Date()
     property var weather: ({
             "available": false,
             "loading": true,
@@ -109,10 +110,10 @@ Singleton {
 
     function getWeatherIcon(code, isDay) {
         if (typeof isDay === "undefined") {
-            isDay = weather.isDay
+            isDay = weather.isDay;
         }
-        const iconMap = isDay ? weatherIcons : nightWeatherIcons
+        const iconMap = isDay ? weatherIcons : nightWeatherIcons;
-        return iconMap[String(code)] || "cloud"
+        return iconMap[String(code)] || "cloud";
     }
 
     function getWeatherCondition(code) {
@@ -145,174 +146,472 @@ Singleton {
             "95": "Thunderstorm",
             "96": "Thunderstorm with hail",
             "99": "Thunderstorm with hail"
+        };
+        return conditions[String(code)] || "Unknown";
     }
-        return conditions[String(code)] || "Unknown"
+
+    property var moonWeatherIcons: ({
+            "0": "",
+            "1": "",
+            "2": "",
+            "3": "",
+            "4": "",
+            "5": "",
+            "6": "",
+            "7": "",
+            "8": "",
+            "9": "",
+            "10": "",
+            "11": "",
+            "12": "",
+            "13": "",
+            "14": "",
+            "15": "",
+            "16": "",
+            "17": "",
+            "18": "",
+            "19": "",
+            "20": "",
+            "21": "",
+            "22": "",
+            "23": "",
+            "24": "",
+            "25": "",
+            "26": "",
+            "27": ""
+        })
+
+    property var moonMaterialIcons: ({
+            "0": "󰽤",
+            "1": "󰽧",
+            "2": "󰽡",
+            "3": "󰽦",
+            "4": "󰽢",
+            "5": "󰽨",
+            "6": "󰽣",
+            "7": "󰽥"
+        })
+
+    function getMoonPhase(date) {
+        const icons = moonWeatherIcons; // more icons in this set but thinner outline than material icons
+        // const icons = moonMaterialIcons
+        const iconCount = Object.keys(icons).length;
+        const moon = SunCalc.getMoonIllumination(date);
+        const index = ((Math.floor(moon.phase * iconCount + 0.5) % iconCount) + iconCount) % iconCount;
+
+        return icons[index];
+    }
+
+    function getMoonAngle(date) {
+        if (!location) {
+            return;
+        }
+        const pos = SunCalc.getMoonPosition(date, location.latitude, location.longitude);
+        return pos.parralacticAngle;
+    }
+
+    function getLocation() {
+        return location;
+    }
+
+    function getSunDeclination(date) {
+        return SunCalc.sunCoords(SunCalc.toDays(date)).dec * 180 / Math.PI;
+    }
+
+    function getSunTimes(date) {
+        if (!location) {
+            return null;
+        }
+        return SunCalc.getTimes(date, location.latitude, location.longitude, location.elevation);
+    }
+
+    function getEcliptic(date, points = 60) {
+        if (!location) {
+            return null;
+        }
+        const lat = location.latitude;
+        const lon = location.longitude;
+        const times = SunCalc.getTimes(date, lat, lon);
+        const solarNoon = times.solarNoon;
+
+        const eclipticPoints = [];
+
+        const sunIsNorth = getSunDeclination(date) > lat;
+        const transitAzimuth = sunIsNorth ? 0 : Math.PI;
+
+        for (let i = 0; i <= points; i++) {
+            const t = new Date(solarNoon.getTime() + (i / points) * 24 * 60 * 60 * 1000);
+            const pos = SunCalc.getPosition(t, lat, lon);
+
+            let h = (((pos.azimuth - transitAzimuth) / (2 * Math.PI)) + 1) % 1;
+            h = Math.max(0, Math.min(1, h));
+            let v = Math.sin(pos.altitude);
+            v = Math.max(-1, Math.min(1, v));
+
+            eclipticPoints.push({
+                h,
+                v
+            });
+        }
+
+        const sortedEntries = eclipticPoints.sort((a, b) => a.h - b.h);
+        return sortedEntries;
+    }
+
+    function getCurrentSunTime(date) {
+        const times = getSunTimes(date);
+        if (!times) {
+            return;
+        }
+        const dateObj = new Date(date);
+
+        const periods = [
+            {
+                name: I18n.tr("Dawn (Astronomical Twilight)"),
+                start: new Date(times.nightEnd),
+                end: new Date(times.nauticalDawn)
+            },
+            {
+                name: I18n.tr("Dawn (Nautical Twilight)"),
+                start: new Date(times.nauticalDawn),
+                end: new Date(times.dawn)
+            },
+            {
+                name: I18n.tr("Dawn (Civil Twilight)"),
+                start: new Date(times.dawn),
+                end: new Date(times.sunrise)
+            },
+            {
+                name: I18n.tr("Sunrise"),
+                start: new Date(times.sunrise),
+                end: new Date(times.sunriseEnd)
+            },
+            {
+                name: I18n.tr("Golden Hour"),
+                start: new Date(times.sunriseEnd),
+                end: new Date(times.goldenHourEnd)
+            },
+            {
+                name: I18n.tr("Morning"),
+                start: new Date(times.goldenHourEnd),
+                end: new Date(times.solarNoon)
+            },
+            {
+                name: I18n.tr("Afternoon"),
+                start: new Date(times.solarNoon),
+                end: new Date(times.goldenHour)
+            },
+            {
+                name: I18n.tr("Golden Hour"),
+                start: new Date(times.goldenHour),
+                end: new Date(times.sunsetStart)
+            },
+            {
+                name: I18n.tr("Sunset"),
+                start: new Date(times.sunsetStart),
+                end: new Date(times.sunset)
+            },
+            {
+                name: I18n.tr("Dusk (Civil Twighlight)"),
+                start: new Date(times.sunset),
+                end: new Date(times.dusk)
+            },
+            {
+                name: I18n.tr("Dusk (Nautical Twilight)"),
+                start: new Date(times.dusk),
+                end: new Date(times.nauticalDusk)
+            },
+            {
+                name: I18n.tr("Dusk (Astronomical Twilight)"),
+                start: new Date(times.nauticalDusk),
+                end: new Date(times.night)
+            },
+        ];
+
+        const sunrise = new Date(times.nightEnd);
+        const sunset = new Date(times.night);
+        const dayPercent = dateObj > sunrise && dateObj < sunset ? (dateObj - sunrise) / (sunset - sunrise) : 0;
+
+        for (let i = 0; i < periods.length; i++) {
+            const {
+                name,
+                start,
+                end
+            } = periods[i];
+            if (dateObj >= start && dateObj < end) {
+                const percent = (dateObj - start) / (end - start);
+                return {
+                    period: name,
+                    periodIndex: i,
+                    periodPercent: Math.min(Math.max(percent, 0), 1),
+                    dayPercent: dayPercent
+                };
+            }
+        }
+
+        return {
+            period: I18n.tr("Night"),
+            periodIndex: 0,
+            periodPercent: 0,
+            dayPercent: dayPercent
+        };
+    }
+
+    function getSkyArcPosition(date, isSun) {
+        if (!location) {
+            return null;
+        }
+        const lat = location.latitude;
+        const lon = location.longitude;
+
+        const pos = isSun ? SunCalc.getPosition(date, lat, lon) : SunCalc.getMoonPosition(date, lat, lon);
+
+        const sunIsNorth = getSunDeclination(date) > lat;
+        const transitAzimuth = sunIsNorth ? 0 : Math.PI;
+
+        let h = (((pos.azimuth - transitAzimuth) / (2 * Math.PI)) + 1) % 1;
+        h = Math.max(0, Math.min(1, h));
+        // let v = pos.altitude / (Math.PI/2)
+        let v = Math.sin(pos.altitude);
+        v = Math.max(-1, Math.min(1, v));
+
+        return {
+            h,
+            v
+        };
+    }
+
+    function formatTemp(celcius, includeUnits = true, unitsShort = true) {
+        if (celcius == null) {
+            return null;
+        }
+        const value = SettingsData.useFahrenheit ? Math.round(celcius * (9 / 5) + 32) : celcius;
+        const unit = unitsShort ? "°" : (SettingsData.useFahrenheit ? "°F" : "°C");
+        return includeUnits ? value + unit : value;
+    }
+
+    function formatSpeed(kmh, includeUnits = true) {
+        if (kmh == null) {
+            return null;
+        }
+        const value = SettingsData.useFahrenheit ? Math.round(kmh * 0.621371) : kmh;
+        const unit = SettingsData.useFahrenheit ? "mph" : "km/h";
+        return includeUnits ? value + " " + unit : value;
+    }
+
+    function formatPressure(hpa, includeUnits = true) {
+        if (hpa == null) {
+            return null;
+        }
+        const value = SettingsData.useFahrenheit ? (hpa * 0.02953).toFixed(2) : hpa;
+        const unit = SettingsData.useFahrenheit ? "inHg" : "hPa";
+        return includeUnits ? value + " " + unit : value;
+    }
+
+    function formatPercent(percent, includeUnits = true) {
+        if (percent == null) {
+            return null;
+        }
+        const value = percent;
+        const unit = "%";
+        return includeUnits ? value + unit : value;
+    }
+
+    function formatVisibility(distance) {
+        if (distance == null) {
+            return null;
+        }
+        var value;
+        var unit;
+        if (SettingsData.useFahrenheit) {
+            value = (distance / 1609.344).toFixed(1);
+            unit = "mi";
+            if (value < 1) {
+                value = Math.round(value * 5280 / 50) * 50;
+                unit = "ft";
+            }
+        } else {
+            value = distance;
+            unit = "m";
+            if (value > 1000) {
+                value = (value / 1000).toFixed(1);
+                unit = "km";
+            }
+        }
+
+        return value + " " + unit;
     }
 
     function formatTime(isoString) {
-        if (!isoString) return "--"
+        if (!isoString)
+            return "--";
 
         try {
-            const date = new Date(isoString)
+            const date = new Date(isoString);
-            const format = SettingsData.use24HourClock ? "HH:mm" : "h:mm AP"
+            const format = SettingsData.use24HourClock ? "HH:mm" : "h:mm AP";
-            return date.toLocaleTimeString(Qt.locale(), format)
+            return date.toLocaleTimeString(Qt.locale(), format);
         } catch (e) {
-            return "--"
+            return "--";
         }
     }
 
+    function calendarDayDifference(date1, date2) {
+        const d1 = Date.UTC(date1.getFullYear(), date1.getMonth(), date1.getDate());
+        const d2 = Date.UTC(date2.getFullYear(), date2.getMonth(), date2.getDate());
+        return Math.floor((d2 - d1) / (1000 * 60 * 60 * 24));
+    }
+
+    function calendarHourDifference(date1, date2) {
+        const d1 = Date.UTC(date1.getFullYear(), date1.getMonth(), date1.getDate(), date1.getHours());
+        const d2 = Date.UTC(date2.getFullYear(), date2.getMonth(), date2.getDate(), date2.getHours());
+        return Math.floor((d2 - d1) / (1000 * 60 * 60));
+    }
+
     function formatForecastDay(isoString, index) {
-        if (!isoString) return "--"
+        if (!isoString)
+            return "--";
 
-        try {
+        if (index === 0)
-            const date = new Date(isoString)
+            return I18n.tr("Today");
-            if (index === 0) return I18n.tr("Today")
+        if (index === 1)
-            if (index === 1) return I18n.tr("Tomorrow")
+            return I18n.tr("Tomorrow");
 
-            const locale = Qt.locale()
+        const date = new Date();
-            return locale.dayName(date.getDay(), Locale.ShortFormat)
+        date.setDate(date.getDate() + index);
-        } catch (e) {
+        const locale = Qt.locale();
-            return "--"
+        return locale.dayName(date.getDay(), Locale.ShortFormat);
-        }
     }
 
     function getWeatherApiUrl() {
         if (!location) {
-            return null
+            return null;
         }
 
-        const params = [
+        const params = ["latitude=" + location.latitude, "longitude=" + location.longitude, "current=temperature_2m,relative_humidity_2m,apparent_temperature,is_day,precipitation,weather_code,surface_pressure,wind_speed_10m", "daily=sunrise,sunset,temperature_2m_max,temperature_2m_min,weather_code,precipitation_probability_max", "hourly=temperature_2m,weather_code,precipitation_probability,wind_speed_10m,apparent_temperature,relative_humidity_2m,surface_pressure,visibility,cloud_cover", "timezone=auto", "forecast_days=7"];
-            "latitude=" + location.latitude,
-            "longitude=" + location.longitude,
-            "current=temperature_2m,relative_humidity_2m,apparent_temperature,is_day,precipitation,weather_code,surface_pressure,wind_speed_10m",
-            "daily=sunrise,sunset,temperature_2m_max,temperature_2m_min,weather_code,precipitation_probability_max",
-            "timezone=auto",
-            "forecast_days=7"
-        ]
 
-        return "https://api.open-meteo.com/v1/forecast?" + params.join('&')
+        return "https://api.open-meteo.com/v1/forecast?" + params.join('&');
     }
 
     function getGeocodingUrl(query) {
-        return "https://geocoding-api.open-meteo.com/v1/search?name=" + encodeURIComponent(query) + "&count=1&language=en&format=json"
+        return "https://geocoding-api.open-meteo.com/v1/search?name=" + encodeURIComponent(query) + "&count=1&language=en&format=json";
     }
 
     function addRef() {
-        refCount++
+        refCount++;
 
         if (refCount === 1 && !weather.available && SettingsData.weatherEnabled) {
-            fetchWeather()
+            fetchWeather();
         }
     }
 
     function removeRef() {
-        refCount = Math.max(0, refCount - 1)
+        refCount = Math.max(0, refCount - 1);
     }
 
     function updateLocation() {
         if (SettingsData.useAutoLocation) {
-            getLocationFromIP()
+            getLocationFromIP();
         } else {
-            const coords = SettingsData.weatherCoordinates
+            const coords = SettingsData.weatherCoordinates;
             if (coords) {
-                const parts = coords.split(",")
+                const parts = coords.split(",");
                 if (parts.length === 2) {
-                    const lat = parseFloat(parts[0])
+                    const lat = parseFloat(parts[0]);
-                    const lon = parseFloat(parts[1])
+                    const lon = parseFloat(parts[1]);
                     if (!isNaN(lat) && !isNaN(lon)) {
-                        getLocationFromCoords(lat, lon)
+                        getLocationFromCoords(lat, lon);
-                        return
+                        return;
                     }
                 }
             }
 
-            const cityName = SettingsData.weatherLocation
+            const cityName = SettingsData.weatherLocation;
             if (cityName) {
-                getLocationFromCity(cityName)
+                getLocationFromCity(cityName);
             }
         }
     }
 
     function getLocationFromCoords(lat, lon) {
-        const url = "https://nominatim.openstreetmap.org/reverse?lat=" + lat + "&lon=" + lon + "&format=json&addressdetails=1&accept-language=en"
+        const url = "https://nominatim.openstreetmap.org/reverse?lat=" + lat + "&lon=" + lon + "&format=json&addressdetails=1&accept-language=en";
-        reverseGeocodeFetcher.command = lowPriorityCmd.concat(curlBaseCmd).concat(["-H", "User-Agent: DankMaterialShell Weather Widget", url])
+        reverseGeocodeFetcher.command = lowPriorityCmd.concat(curlBaseCmd).concat(["-H", "User-Agent: DankMaterialShell Weather Widget", url]);
-        reverseGeocodeFetcher.running = true
+        reverseGeocodeFetcher.running = true;
     }
 
     function getLocationFromCity(city) {
-        cityGeocodeFetcher.command = lowPriorityCmd.concat(curlBaseCmd).concat([getGeocodingUrl(city)])
+        cityGeocodeFetcher.command = lowPriorityCmd.concat(curlBaseCmd).concat([getGeocodingUrl(city)]);
-        cityGeocodeFetcher.running = true
+        cityGeocodeFetcher.running = true;
     }
 
     function getLocationFromIP() {
-        ipLocationFetcher.running = true
+        ipLocationFetcher.running = true;
     }
 
     function fetchWeather() {
         if (root.refCount === 0 || !SettingsData.weatherEnabled) {
-            return
+            return;
         }
 
         if (!location) {
-            updateLocation()
+            updateLocation();
-            return
+            return;
         }
 
         if (weatherFetcher.running) {
-            return
+            return;
         }
 
-        const now = Date.now()
+        const now = Date.now();
         if (now - root.lastFetchTime < root.minFetchInterval) {
-            return
+            return;
         }
 
-        const apiUrl = getWeatherApiUrl()
+        const apiUrl = getWeatherApiUrl();
         if (!apiUrl) {
-            return
+            return;
         }
 
-        root.lastFetchTime = now
+        root.lastFetchTime = now;
-        root.weather.loading = true
+        root.weather.loading = true;
-        const weatherCmd = lowPriorityCmd.concat(["curl", "-sS", "--fail", "--connect-timeout", "3", "--max-time", "6", "--limit-rate", "150k", "--compressed"])
+        const weatherCmd = lowPriorityCmd.concat(["curl", "-sS", "--fail", "--connect-timeout", "3", "--max-time", "6", "--limit-rate", "150k", "--compressed"]);
-        weatherFetcher.command = weatherCmd.concat([apiUrl])
+        weatherFetcher.command = weatherCmd.concat([apiUrl]);
-        weatherFetcher.running = true
+        weatherFetcher.running = true;
     }
 
     function forceRefresh() {
-        root.lastFetchTime = 0 // Reset throttle
+        root.lastFetchTime = 0; // Reset throttle
-        fetchWeather()
+        fetchWeather();
     }
 
     function nextInterval() {
-        const jitter = Math.floor(Math.random() * 15000) - 7500
+        const jitter = Math.floor(Math.random() * 15000) - 7500;
-        return Math.max(60000, root.updateInterval + jitter)
+        return Math.max(60000, root.updateInterval + jitter);
     }
 
     function handleWeatherSuccess() {
-        root.retryAttempts = 0
+        root.retryAttempts = 0;
-        root.persistentRetryCount = 0
+        root.persistentRetryCount = 0;
         if (persistentRetryTimer.running) {
-            persistentRetryTimer.stop()
+            persistentRetryTimer.stop();
         }
         if (updateTimer.interval !== root.updateInterval) {
-            updateTimer.interval = root.updateInterval
+            updateTimer.interval = root.updateInterval;
         }
     }
 
     function handleWeatherFailure() {
-        root.retryAttempts++
+        root.retryAttempts++;
         if (root.retryAttempts < root.maxRetryAttempts) {
-            retryTimer.start()
+            retryTimer.start();
         } else {
-            root.retryAttempts = 0
+            root.retryAttempts = 0;
             if (!root.weather.available) {
-                root.weather.loading = false
+                root.weather.loading = false;
             }
-            const backoffDelay = Math.min(60000 * Math.pow(2, persistentRetryCount), 300000)
+            const backoffDelay = Math.min(60000 * Math.pow(2, persistentRetryCount), 300000);
-            persistentRetryCount++
+            persistentRetryCount++;
-            persistentRetryTimer.interval = backoffDelay
+            persistentRetryTimer.interval = backoffDelay;
-            persistentRetryTimer.start()
+            persistentRetryTimer.start();
         }
     }
 
@@ -323,42 +622,42 @@ Singleton {
 
         stdout: StdioCollector {
             onStreamFinished: {
-                const raw = text.trim()
+                const raw = text.trim();
                 if (!raw || raw[0] !== "{") {
-                    root.handleWeatherFailure()
+                    root.handleWeatherFailure();
-                    return
+                    return;
                 }
 
                 try {
-                    const data = JSON.parse(raw)
+                    const data = JSON.parse(raw);
 
                     if (data.status === "fail") {
-                        throw new Error("IP location lookup failed")
+                        throw new Error("IP location lookup failed");
                     }
 
-                    const lat = parseFloat(data.lat)
+                    const lat = parseFloat(data.lat);
-                    const lon = parseFloat(data.lon)
+                    const lon = parseFloat(data.lon);
-                    const city = data.city
+                    const city = data.city;
 
                     if (!city || isNaN(lat) || isNaN(lon)) {
-                        throw new Error("Missing or invalid location data")
+                        throw new Error("Missing or invalid location data");
                     }
 
                     root.location = {
                         city: city,
                         latitude: lat,
                         longitude: lon
-                    }
+                    };
-                    fetchWeather()
+                    fetchWeather();
                 } catch (e) {
-                    root.handleWeatherFailure()
+                    root.handleWeatherFailure();
                 }
             }
         }
 
         onExited: exitCode => {
             if (exitCode !== 0) {
-                root.handleWeatherFailure()
+                root.handleWeatherFailure();
             }
         }
     }
@@ -369,33 +668,33 @@ Singleton {
 
         stdout: StdioCollector {
             onStreamFinished: {
-                const raw = text.trim()
+                const raw = text.trim();
                 if (!raw || raw[0] !== "{") {
-                    root.handleWeatherFailure()
+                    root.handleWeatherFailure();
-                    return
+                    return;
                 }
 
                 try {
-                    const data = JSON.parse(raw)
+                    const data = JSON.parse(raw);
-                    const address = data.address || {}
+                    const address = data.address || {};
 
                     root.location = {
                         city: address.hamlet || address.city || address.town || address.village || "Unknown",
                         country: address.country || "Unknown",
                         latitude: parseFloat(data.lat),
                         longitude: parseFloat(data.lon)
-                    }
+                    };
 
-                    fetchWeather()
+                    fetchWeather();
                 } catch (e) {
-                    root.handleWeatherFailure()
+                    root.handleWeatherFailure();
                 }
             }
         }
 
         onExited: exitCode => {
             if (exitCode !== 0) {
-                root.handleWeatherFailure()
+                root.handleWeatherFailure();
             }
         }
     }
@@ -406,39 +705,40 @@ Singleton {
 
         stdout: StdioCollector {
             onStreamFinished: {
-                const raw = text.trim()
+                const raw = text.trim();
                 if (!raw || raw[0] !== "{") {
-                    root.handleWeatherFailure()
+                    root.handleWeatherFailure();
-                    return
+                    return;
                 }
 
                 try {
-                    const data = JSON.parse(raw)
+                    const data = JSON.parse(raw);
-                    const results = data.results
+                    const results = data.results;
 
                     if (!results || results.length === 0) {
-                        throw new Error("No results found")
+                        throw new Error("No results found");
                     }
 
-                    const result = results[0]
+                    const result = results[0];
 
                     root.location = {
                         city: result.name,
                         country: result.country,
                         latitude: result.latitude,
-                        longitude: result.longitude
+                        longitude: result.longitude,
-                    }
+                        elevation: data.elevation
+                    };
 
-                    fetchWeather()
+                    fetchWeather();
                 } catch (e) {
-                    root.handleWeatherFailure()
+                    root.handleWeatherFailure();
                 }
             }
         }
 
         onExited: exitCode => {
             if (exitCode !== 0) {
-                root.handleWeatherFailure()
+                root.handleWeatherFailure();
             }
         }
     }
@@ -449,35 +749,63 @@ Singleton {
 
         stdout: StdioCollector {
             onStreamFinished: {
-                const raw = text.trim()
+                const raw = text.trim();
                 if (!raw || raw[0] !== "{") {
-                    root.handleWeatherFailure()
+                    root.handleWeatherFailure();
-                    return
+                    return;
                 }
 
                 try {
-                    const data = JSON.parse(raw)
+                    const data = JSON.parse(raw);
 
-                    if (!data.current || !data.daily) {
+                    if (!data.current || !data.daily || !data.hourly) {
-                        throw new Error("Required weather data fields missing")
+                        throw new Error("Required weather data fields missing");
                     }
 
-                    const current = data.current
+                    const hourly = data.hourly;
-                    const daily = data.daily
+                    const hourly_forecast = [];
-                    const currentUnits = data.current_units || {}
+                    if (hourly.time && hourly.time.length > 0) {
+                        for (let i = 0; i < hourly.time.length; i++) {
+                            const tempMinC = hourly.temperature_2m_min?.[i] || 0;
+                            const tempMaxC = hourly.temperature_2m_max?.[i] || 0;
+                            const tempMinF = tempMinC * 9 / 5 + 32;
+                            const tempMaxF = tempMaxC * 9 / 5 + 32;
 
-                    const tempC = current.temperature_2m || 0
+                            const tempC = hourly.temperature_2m?.[i] || 0;
-                    const tempF = (tempC * 9/5 + 32)
+                            const tempF = tempC * 9 / 5 + 32;
-                    const feelsLikeC = current.apparent_temperature || tempC
+                            const feelsLikeC = hourly.apparent_temperature?.[i] || tempC;
-                    const feelsLikeF = (feelsLikeC * 9/5 + 32)
+                            const feelsLikeF = feelsLikeC * 9 / 5 + 32;
 
-                    const forecast = []
+                            const sunrise = new Date(data.daily.sunrise?.[Math.floor(i / 24)]);
+                            const sunset = new Date(data.daily.sunset?.[Math.floor(i / 24)]);
+                            const time = new Date(hourly.time[i]);
+                            const isDay = sunrise < time && time < sunset;
+
+                            hourly_forecast.push({
+                                "time": formatTime(hourly.time[i]),
+                                "temp": Math.round(tempC),
+                                "tempF": Math.round(tempF),
+                                "feelsLike": Math.round(feelsLikeC),
+                                "feelsLikeF": Math.round(feelsLikeF),
+                                "wCode": hourly.weather_code?.[i] || 0,
+                                "humidity": Math.round(hourly.relative_humidity_2m?.[i] || 0),
+                                "wind": Math.round(hourly.wind_speed_10m?.[i] || 0),
+                                "pressure": Math.round(hourly.surface_pressure?.[i] || 0),
+                                "precipitationProbability": Math.round(hourly.precipitation_probability_max?.[0] || 0),
+                                "visibility": Math.round(hourly.visibility?.[i] || 0),
+                                "isDay": isDay
+                            });
+                        }
+                    }
+
+                    const daily = data.daily;
+                    const forecast = [];
                     if (daily.time && daily.time.length > 0) {
-                        for (let i = 0; i < Math.min(daily.time.length, 7); i++) {
+                        for (let i = 0; i < daily.time.length; i++) {
-                            const tempMinC = daily.temperature_2m_min?.[i] || 0
+                            const tempMinC = daily.temperature_2m_min?.[i] || 0;
-                            const tempMaxC = daily.temperature_2m_max?.[i] || 0
+                            const tempMaxC = daily.temperature_2m_max?.[i] || 0;
-                            const tempMinF = (tempMinC * 9/5 + 32)
+                            const tempMinF = (tempMinC * 9 / 5 + 32);
-                            const tempMaxF = (tempMaxC * 9/5 + 32)
+                            const tempMaxF = (tempMaxC * 9 / 5 + 32);
 
                             forecast.push({
                                 "day": formatForecastDay(daily.time[i], i),
@@ -489,10 +817,18 @@ Singleton {
                                 "precipitationProbability": Math.round(daily.precipitation_probability_max?.[i] || 0),
                                 "sunrise": daily.sunrise?.[i] ? formatTime(daily.sunrise[i]) : "",
                                 "sunset": daily.sunset?.[i] ? formatTime(daily.sunset[i]) : ""
-                            })
+                            });
                         }
                     }
 
+                    const current = data.current;
+                    const currentUnits = data.current_units || {};
+
+                    const tempC = current.temperature_2m || 0;
+                    const tempF = tempC * 9 / 5 + 32;
+                    const feelsLikeC = current.apparent_temperature || tempC;
+                    const feelsLikeF = feelsLikeC * 9 / 5 + 32;
+
                     root.weather = {
                         "available": true,
                         "loading": false,
@@ -511,22 +847,19 @@ Singleton {
                         "pressure": Math.round(current.surface_pressure || 0),
                         "precipitationProbability": Math.round(daily.precipitation_probability_max?.[0] || 0),
                         "isDay": Boolean(current.is_day),
-                        "forecast": forecast
+                        "forecast": forecast,
-                    }
+                        "hourlyForecast": hourly_forecast
-
+                    };
-                    const displayTemp = SettingsData.useFahrenheit ? root.weather.tempF : root.weather.temp
+                    root.handleWeatherSuccess();
-                    const unit = SettingsData.useFahrenheit ? "°F" : "°C"
-
-                    root.handleWeatherSuccess()
                 } catch (e) {
-                    root.handleWeatherFailure()
+                    root.handleWeatherFailure();
                 }
             }
         }
 
         onExited: exitCode => {
             if (exitCode !== 0) {
-                root.handleWeatherFailure()
+                root.handleWeatherFailure();
             }
         }
     }
@@ -538,8 +871,8 @@ Singleton {
         repeat: true
         triggeredOnStart: true
         onTriggered: {
-            root.fetchWeather()
+            root.fetchWeather();
-            interval = nextInterval()
+            interval = nextInterval();
         }
     }
 
@@ -549,7 +882,7 @@ Singleton {
         running: false
         repeat: false
         onTriggered: {
-            root.fetchWeather()
+            root.fetchWeather();
         }
     }
 
@@ -560,16 +893,15 @@ Singleton {
         repeat: false
         onTriggered: {
             if (!root.weather.available) {
-                root.weather.loading = true
+                root.weather.loading = true;
             }
-            root.fetchWeather()
+            root.fetchWeather();
         }
     }
 
     Component.onCompleted: {
-
         SettingsData.weatherCoordinatesChanged.connect(() => {
-                                                           root.location = null
+            root.location = null;
             root.weather = {
                 "available": false,
                 "loading": true,
@@ -589,19 +921,19 @@ Singleton {
                 "precipitationProbability": 0,
                 "isDay": true,
                 "forecast": []
-                                                           }
+            };
-                                                           root.lastFetchTime = 0
+            root.lastFetchTime = 0;
-                                                           root.forceRefresh()
+            root.forceRefresh();
-                                                       })
+        });
 
         SettingsData.weatherLocationChanged.connect(() => {
-                                                        root.location = null
+            root.location = null;
-                                                        root.lastFetchTime = 0
+            root.lastFetchTime = 0;
-                                                        root.forceRefresh()
+            root.forceRefresh();
-                                                    })
+        });
 
         SettingsData.useAutoLocationChanged.connect(() => {
-                                                        root.location = null
+            root.location = null;
             root.weather = {
                 "available": false,
                 "loading": true,
@@ -621,22 +953,22 @@ Singleton {
                 "precipitationProbability": 0,
                 "isDay": true,
                 "forecast": []
-                                                        }
+            };
-                                                        root.lastFetchTime = 0
+            root.lastFetchTime = 0;
-                                                        root.forceRefresh()
+            root.forceRefresh();
-                                                    })
+        });
 
         SettingsData.weatherEnabledChanged.connect(() => {
             if (SettingsData.weatherEnabled && root.refCount > 0 && !root.weather.available) {
-                                                           root.forceRefresh()
+                root.forceRefresh();
             } else if (!SettingsData.weatherEnabled) {
-                                                           updateTimer.stop()
+                updateTimer.stop();
-                                                           retryTimer.stop()
+                retryTimer.stop();
-                                                           persistentRetryTimer.stop()
+                persistentRetryTimer.stop();
                 if (weatherFetcher.running) {
-                                                               weatherFetcher.running = false
+                    weatherFetcher.running = false;
                 }
             }
-                                                   })
+        });
     }
 }

quickshell/Widgets/DankActionButton.qml

@@ -10,7 +10,9 @@ StyledRect {
     property color iconColor: Theme.surfaceText
     property color backgroundColor: "transparent"
     property bool circular: true
+    property bool enabled: true
     property int buttonSize: 32
+    property var tooltipText: null
 
     signal clicked
     signal entered
@@ -29,10 +31,12 @@ StyledRect {
     }
 
     StateLayer {
+        disabled: !root.enabled
         stateColor: Theme.primary
         cornerRadius: root.radius
         onClicked: root.clicked()
         onEntered: root.entered()
         onExited: root.exited()
+        tooltipText: tooltipText
     }
 }

quickshell/Widgets/DankNumberStepper.qml

@@ -0,0 +1,67 @@
+import QtCore
+import QtQuick
+import qs.Common
+
+Column {
+    id: root
+    property string text: ""
+    property var incrementTooltipText: ""
+    property var decrementTooltipText: ""
+    property var onIncrement: undefined
+    property var onDecrement: undefined
+    property string incrementIconName: "keyboard_arrow_up"
+    property string decrementIconName: "keyboard_arrow_down"
+
+    property bool incrementEnabled: true
+    property bool decrementEnabled: true
+
+    property color textColor: Theme.surfaceText
+    property color iconColor: Theme.withAlpha(Theme.surfaceText, 0.5)
+    property color backgroundColor: Theme.primary
+
+    property int textSize: Theme.fontSizeSmall
+    property var iconSize: 12
+    property int buttonSize: 20
+    property int horizontalPadding: Theme.spacingL
+
+    readonly property bool effectiveIncrementEnabled: root.onIncrement ? root.incrementEnabled : false
+    readonly property bool effectiveDecrementEnabled: root.onDecrement ? root.decrementEnabled : false
+
+
+    width: Math.max(buttonSize * 2, root.implicitWidth + horizontalPadding * 2)
+    spacing: 4
+
+    DankActionButton {
+        anchors.horizontalCenter: parent.horizontalCenter
+        enabled: root.effectiveIncrementEnabled
+        iconColor: root.effectiveIncrementEnabled ? root.iconColor : Theme.blendAlpha(root.iconColor, 0.5)
+        iconSize: root.iconSize
+        buttonSize: root.buttonSize
+        iconName: root.incrementIconName
+        onClicked: if (typeof root.onIncrement === 'function') root.onIncrement()
+        tooltipText: root.incrementTooltipText
+    }
+
+    Row {
+        anchors.horizontalCenter: parent.horizontalCenter
+        Item { width: 5; height: 1 }
+        StyledText {
+            isMonospace: true
+            text: root.text
+            font.pixelSize: root.textSize
+            color: root.textColor
+        }
+        Item { width: 5; height: 1 }
+    }
+
+    DankActionButton {
+        anchors.horizontalCenter: parent.horizontalCenter
+        enabled: root.effectiveDecrementEnabled
+        iconColor: root.effectiveDecrementEnabled ? root.iconColor : Theme.blendAlpha(root.iconColor, 0.5)
+        iconSize: root.iconSize
+        buttonSize: root.buttonSize
+        iconName: root.decrementIconName
+        onClicked: if (typeof root.onDecrement === 'function')  root.onDecrement()
+        tooltipText: root.decrementTooltipText
+    }
+}

quickshell/Widgets/StateLayer.qml

@@ -7,6 +7,7 @@ MouseArea {
     property bool disabled: false
     property color stateColor: Theme.surfaceText
     property real cornerRadius: parent && parent.radius !== undefined ? parent.radius : Theme.cornerRadius
+    property var tooltipText: null
 
     readonly property real stateOpacity: disabled ? 0 : pressed ? 0.12 : containsMouse ? 0.08 : 0
 
@@ -19,4 +20,30 @@ MouseArea {
         radius: root.cornerRadius
         color: Qt.rgba(stateColor.r, stateColor.g, stateColor.b, stateOpacity)
     }
+
+
+    Timer {
+        id: hoverDelay
+        interval: 1000
+        repeat: false
+        onTriggered: {
+            const p = root.mapToItem(null, parent.width / 2, parent.height + Theme.spacingXS)
+            tooltip.show(I18n.tr(""), p.x, p.y, null)
+        }
+    }
+
+    onEntered: {
+        if (!tooltipText) { return }
+        hoverDelay.restart()
+    }
+
+    onExited: {
+        if (!tooltipText) { return }
+        hoverDelay.stop()
+        tooltip.hide()
+    }
+
+    DankTooltip {
+        id: tooltip
+    }
 }