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/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
+    }
 }