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 (wallpaperTab.handleKeyEvent(event)) {
+                if (root.currentTabIndex === 2 && wallpaperLoader.item?.handleKeyEvent) {
+                    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,71 +316,84 @@ 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 overviewTab.implicitHeight;
+                            return weatherLoader.item?.implicitHeight ?? 410;
+                        return 410;
                     }
                     currentIndex: root.currentTabIndex
 
-                    OverviewTab {
-                        id: overviewTab
-
-                        onCloseDash: {
-                            root.dashVisible = false;
-                        }
-
-                        onSwitchToWeatherTab: {
-                            if (SettingsData.weatherEnabled) {
-                                tabBar.currentIndex = 3;
-                                tabBar.tabClicked(3);
+                    Loader {
+                        id: overviewLoader
+                        active: root.currentTabIndex === 0
+                        sourceComponent: Component {
+                            OverviewTab {
+                                onCloseDash: root.dashVisible = false
+                                onSwitchToWeatherTab: {
+                                    if (SettingsData.weatherEnabled) {
+                                        tabBar.currentIndex = 3;
+                                        tabBar.tabClicked(3);
+                                    }
+                                }
+                                onSwitchToMediaTab: {
+                                    tabBar.currentIndex = 1;
+                                    tabBar.tabClicked(1);
+                                }
                             }
                         }
+                    }
 
-                        onSwitchToMediaTab: {
-                            tabBar.currentIndex = 1;
-                            tabBar.tabClicked(1);
+                    Loader {
+                        id: mediaLoader
+                        active: root.currentTabIndex === 1
+                        sourceComponent: Component {
+                            MediaPlayerTab {
+                                targetScreen: root.screen
+                                popoutX: root.alignedX
+                                popoutY: root.alignedY
+                                popoutWidth: root.alignedWidth
+                                popoutHeight: root.alignedHeight
+                                contentOffsetY: Theme.spacingM + 48 + Theme.spacingS + Theme.spacingXS
+                                Component.onCompleted: root.__mediaTabRef = this
+                                onShowVolumeDropdown: (pos, screen, rightEdge, player, players) => {
+                                    root.__showVolumeDropdown(pos, rightEdge, player, players);
+                                }
+                                onShowAudioDevicesDropdown: (pos, screen, rightEdge) => {
+                                    root.__showAudioDevicesDropdown(pos, rightEdge);
+                                }
+                                onShowPlayersDropdown: (pos, screen, rightEdge, player, players) => {
+                                    root.__showPlayersDropdown(pos, rightEdge, player, players);
+                                }
+                                onHideDropdowns: root.__hideDropdowns()
+                                onVolumeButtonExited: root.__startCloseTimer()
+                            }
                         }
                     }
 
-                    MediaPlayerTab {
-                        id: mediaTab
-                        targetScreen: root.screen
-                        popoutX: root.alignedX
-                        popoutY: root.alignedY
-                        popoutWidth: root.alignedWidth
-                        popoutHeight: root.alignedHeight
-                        contentOffsetY: Theme.spacingM + 48 + Theme.spacingS + Theme.spacingXS
-                        Component.onCompleted: root.__mediaTabRef = this
-                        onShowVolumeDropdown: (pos, screen, rightEdge, player, players) => {
-                            root.__showVolumeDropdown(pos, rightEdge, player, players);
-                        }
-                        onShowAudioDevicesDropdown: (pos, screen, rightEdge) => {
-                            root.__showAudioDevicesDropdown(pos, rightEdge);
-                        }
-                        onShowPlayersDropdown: (pos, screen, rightEdge, player, players) => {
-                            root.__showPlayersDropdown(pos, rightEdge, player, players);
-                        }
-                        onHideDropdowns: root.__hideDropdowns()
-                        onVolumeButtonExited: root.__startCloseTimer()
-                    }
-
-                    WallpaperTab {
-                        id: wallpaperTab
+                    Loader {
+                        id: wallpaperLoader
                         active: root.currentTabIndex === 2
-                        tabBarItem: tabBar
-                        keyForwardTarget: mainContainer
-                        targetScreen: root.screen
-                        parentPopout: root
+                        sourceComponent: Component {
+                            WallpaperTab {
+                                active: true
+                                tabBarItem: tabBar
+                                keyForwardTarget: mainContainer
+                                targetScreen: root.triggerScreen
+                                parentPopout: root
+                            }
+                        }
                     }
 
-                    WeatherTab {
-                        id: weatherTab
-                        visible: SettingsData.weatherEnabled && root.currentTabIndex === 3
+                    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/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
+    }
 }