feat: dashboard show on hover, media and weather tabs added

Components/ColorArcPicker.qml

@@ -46,10 +46,10 @@ Item {
 	}
 
 	function syncFromPenColor() {
-		if (!drawing.drawingState)
+		if (!drawing.screenState)
 			return;
 
-		const c = drawing.drawingState.penColor;
+		const c = drawing.screenState.penColor;
 
 		if (c.hsvSaturation > 0) {
 			currentHue = c.hsvHue;
@@ -86,7 +86,7 @@ Item {
 
 		currentHue = relative / arcSweep;
 		lastChromaticHue = currentHue;
-		drawing.drawingState.penColor = Qt.hsva(currentHue, drawing.drawingState.penColor.hsvSaturation, drawing.drawingState.penColor.hsvValue, drawing.drawingState.penColor.a);
+		drawing.screenState.penColor = Qt.hsva(currentHue, drawing.screenState.penColor.hsvSaturation, drawing.screenState.penColor.hsvValue, drawing.screenState.penColor.a);
 	}
 
 	implicitHeight: 180
@@ -112,7 +112,7 @@ Item {
 			root.syncFromPenColor();
 		}
 
-		target: root.drawing.drawingState
+		target: root.drawing.screenState
 	}
 
 	Canvas {
@@ -152,7 +152,7 @@ Item {
 
 	CustomRect {
 		anchors.centerIn: parent
-		color: root.drawing?.drawingState.penColor
+		color: root.drawing?.screenState.penColor
 		implicitHeight: implicitWidth
 		implicitWidth: canvas.height - root.handleSize - Tokens.padding.extraLarge * 2
 		radius: Tokens.rounding.full

Components/CustomFlickable.qml

@@ -1,12 +1,12 @@
 import QtQuick
-import qs.Helpers
+import qs.Services
 
 Flickable {
 	id: root
 
 	property bool doneFakeFlick
 
-	interactive: !Visibilities.getForActive().isDrawing
+	interactive: !ShellState.forActive().isDrawing
 	maximumFlickVelocity: 3000
 
 	rebound: Transition {

Components/CustomListView.qml

@@ -1,12 +1,12 @@
 import QtQuick
-import qs.Helpers
+import qs.Services
 
 ListView {
 	id: root
 
 	property bool doneFakeFlick
 
-	interactive: !Visibilities.getForActive()?.isDrawing
+	interactive: !ShellState.forActive()?.isDrawing
 	maximumFlickVelocity: 3000
 
 	rebound: Transition {

Components/CustomScrollBar.qml

@@ -1,6 +1,6 @@
 import QtQuick
 import QtQuick.Templates
-import qs.Helpers
+import qs.Services
 import ZShell.Config
 import qs.Services
 
@@ -17,8 +17,12 @@ ScrollBar {
 	property bool shouldBeActive
 	readonly property real travelScale: root.rawTravel > 0 ? root.effectiveTravel / root.rawTravel : 0
 
-	enabled: !Visibilities.getForActive().isDrawing
-	implicitWidth: Tokens.padding.extraSmall * 2
+	property bool shouldBeActive
+	property bool inverted
+
+	enabled: !ShellState.forActive().isDrawing
+	implicitWidth: size === 1 ? 0 : isHorizontal ? 0 : Tokens.padding.extraSmall * 2
+	implicitHeight: size === 1 ? 0 : isHorizontal ? Tokens.padding.extraSmall * 2 : 0
 
 	contentItem: Item {
 	}

Components/CustomTextField.qml

@@ -15,28 +15,33 @@ TextFieldBase {
 
 	readonly property int clampedRadius: Math.min(horizontalPadding, Math.min(width, height) / 2, radius)
 	readonly property string effectiveSupportingText: isError && errorText ? errorText : supportingText
+	readonly property int filledOffset: type === CustomTextField.Filled ? Tokens.spacing.small : 0
+	readonly property int leadingOffset: leadingIcon ? leadingIconLoader.width + leadingIconLoader.anchors.leftMargin : 0
+	readonly property real smallFontScale: smallFontSize / font.pointSize
+	readonly property int supportingTextOffset: effectiveSupportingText ? supportingTextLoader.height + Tokens.spacing.extraSmall : 0
+	readonly property int trailingOffset: trailingIcon ? trailingIconLoader.width + trailingIconLoader.anchors.rightMargin : 0
+	readonly property bool valid: !validate || (!text && emptyIsValid) || (validate instanceof RegExp ? validate.test(text) : !!validate(text))
+
+	property int horizontalPadding: Tokens.padding.large
+	property int verticalPadding: Tokens.padding.large
+
+	property int radius: Tokens.rounding.small
+
+	property string supportingText
+	property string trailingIcon
+	property int smallFontSize: Tokens.font.size.small
+
+	property int type: CustomTextField.Outlined
+	property var validate // Regex or function
 	property bool emptyIsValid: true
 	property string errorText
-	readonly property int filledOffset: type === CustomTextField.Filled ? Tokens.spacing.small : 0
-	readonly property int horizontalPadding: Tokens.padding.large
 	property bool isError
 	property string leadingIcon
-	readonly property int leadingOffset: leadingIcon ? leadingIconLoader.width + leadingIconLoader.anchors.leftMargin : 0
-	property int radius: Tokens.rounding.small
-	readonly property real smallFontScale: smallFontSize / font.pointSize
-	property int smallFontSize: Tokens.font.size.small
-	property string supportingText
-	readonly property int supportingTextOffset: effectiveSupportingText ? supportingTextLoader.height + Tokens.spacing.extraSmall : 0
-	property string trailingIcon
-	readonly property int trailingOffset: trailingIcon ? trailingIconLoader.width + trailingIconLoader.anchors.rightMargin : 0
-	property int type: CustomTextField.Outlined
-	readonly property bool valid: !validate || (!text && emptyIsValid) || (validate instanceof RegExp ? validate.test(text) : !!validate(text))
-	property var validate // Regex or function
 
-	bottomPadding: Tokens.padding.large + supportingTextOffset - filledOffset
+	bottomPadding: verticalPadding + supportingTextOffset - filledOffset
 	leftPadding: horizontalPadding + leadingOffset
 	rightPadding: horizontalPadding + trailingOffset
-	topPadding: Tokens.padding.large + filledOffset
+	topPadding: verticalPadding + filledOffset
 
 	background: Loader {
 		anchors.bottomMargin: root.supportingTextOffset
@@ -212,12 +217,10 @@ TextFieldBase {
 					}
 				}
 				Behavior on strokeColor {
-					CAnim {
-					}
+					CAnim {}
 				}
 				Behavior on strokeWidth {
-					Anim {
-					}
+					Anim {}
 				}
 
 				PathLine {
@@ -292,8 +295,7 @@ TextFieldBase {
 				implicitHeight: root.activeFocus ? 2 : 1
 
 				Behavior on implicitHeight {
-					Anim {
-					}
+					Anim {}
 				}
 			}
 		}

Components/LineGraph.qml

@@ -0,0 +1,467 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+
+Item {
+	id: root
+
+	required property list<var> values
+
+	property int xSteps: 24
+	property real yMin: NaN
+	property real yMax: NaN
+	property real yPaddingTop: 0
+	property real yPaddingBottom: 0
+
+	property int verticalLineStep: 0
+	property int horizontalLineStep: 0
+	property bool firstXLine: true
+	property bool lastXLine: false
+	property int minHorizontalLines: 0
+
+	property var xLabel: null
+	property var yLabel: null
+
+	property real smoothing: 0
+	property bool curveSmoothing: true
+	property real markerX: -1
+	property real markerGap: 2 // px gap between line and marker dot edge, each side
+
+	property color lineColor: "white"
+	property color gridColor: "white"
+	property color markerColor: "white"
+	property color labelColor: "white"
+	property real gridAlpha: 0.12
+	property real labelAlpha: 0.6
+	property real fillAlpha: 0.15
+	property real lineWidth: 2
+	property real markerDotRadius: 4
+	property real labelFontSize: 10
+
+	Canvas {
+		id: canvas
+
+		anchors.fill: parent
+		renderStrategy: Canvas.Immediate
+
+		onWidthChanged: requestPaint()
+		onHeightChanged: requestPaint()
+
+		function strokeCurve(ctx, pts) {
+			ctx.beginPath();
+			ctx.moveTo(pts[0].x, pts[0].y);
+
+			if (root.curveSmoothing && pts.length > 2) {
+				const k = 1 / 6;
+				const n = pts.length;
+
+				for (let i = 0; i < n - 1; i++) {
+					const p0 = pts[Math.max(i - 1, 0)];
+					const p1 = pts[i];
+					const p2 = pts[i + 1];
+					const p3 = pts[Math.min(i + 2, n - 1)];
+
+					let c1x = p1.x + (p2.x - p0.x) * k;
+					let c1y = p1.y + (p2.y - p0.y) * k;
+					let c2x = p2.x - (p3.x - p1.x) * k;
+					let c2y = p2.y - (p3.y - p1.y) * k;
+
+					const minY = Math.min(p1.y, p2.y);
+					const maxY = Math.max(p1.y, p2.y);
+					c1y = Math.max(minY, Math.min(maxY, c1y));
+					c2y = Math.max(minY, Math.min(maxY, c2y));
+
+					ctx.bezierCurveTo(c1x, c1y, c2x, c2y, p2.x, p2.y);
+				}
+			} else {
+				for (let i = 0; i < pts.length - 1; i++) {
+					const p0 = pts[i];
+					const p1 = pts[i + 1];
+					const cx = (p0.x + p1.x) * 0.5;
+					ctx.bezierCurveTo(cx, p0.y, cx, p1.y, p1.x, p1.y);
+				}
+			}
+		}
+
+		// Control points for segment i (pts[i] -> pts[i+1]), matching strokeCurve
+		function segmentControls(pts, i) {
+			const p0 = pts[Math.max(i - 1, 0)];
+			const p1 = pts[i];
+			const p2 = pts[i + 1];
+			const p3 = pts[Math.min(i + 2, pts.length - 1)];
+
+			if (root.curveSmoothing && pts.length > 2) {
+				const k = 1 / 6;
+				let c1x = p1.x + (p2.x - p0.x) * k;
+				let c1y = p1.y + (p2.y - p0.y) * k;
+				let c2x = p2.x - (p3.x - p1.x) * k;
+				let c2y = p2.y - (p3.y - p1.y) * k;
+
+				const minY = Math.min(p1.y, p2.y);
+				const maxY = Math.max(p1.y, p2.y);
+				c1y = Math.max(minY, Math.min(maxY, c1y));
+				c2y = Math.max(minY, Math.min(maxY, c2y));
+
+				return [c1x, c1y, c2x, c2y];
+			}
+
+			const cx = (p1.x + p2.x) * 0.5;
+			return [cx, p1.y, cx, p2.y];
+		}
+
+		// Point on the curve at a given x (x is monotonic per segment)
+		function pointAtX(pts, targetX) {
+			let j = pts.length - 2;
+			for (let i = 0; i < pts.length - 1; i++) {
+				if (targetX <= pts[i + 1].x) {
+					j = i;
+					break;
+				}
+			}
+
+			const p1 = pts[j];
+			const p2 = pts[j + 1];
+			const [c1x, c1y, c2x, c2y] = segmentControls(pts, j);
+
+			let tlo = 0;
+			let thi = 1;
+			for (let it = 0; it < 24; it++) {
+				const tm = (tlo + thi) / 2;
+				const u = 1 - tm;
+				const x = u * u * u * p1.x + 3 * u * u * tm * c1x + 3 * u * tm * tm * c2x + tm * tm * tm * p2.x;
+				if (x < targetX)
+					tlo = tm;
+				else
+					thi = tm;
+			}
+
+			const t = (tlo + thi) / 2;
+			const u = 1 - t;
+			const y = u * u * u * p1.y + 3 * u * u * t * c1y + 3 * u * t * t * c2y + t * t * t * p2.y;
+			return { x: targetX, y };
+		}
+
+		// Part of the curve left/right of a cut x, including the cut point
+		function cutLeft(pts, targetX) {
+			if (targetX <= pts[0].x)
+				return [];
+			if (targetX >= pts[pts.length - 1].x)
+				return pts.slice();
+
+			let j = pts.length - 2;
+			for (let i = 0; i < pts.length - 1; i++) {
+				if (targetX <= pts[i + 1].x) {
+					j = i;
+					break;
+				}
+			}
+
+			const left = pts.slice(0, j + 1);
+			if (targetX > pts[j].x)
+				left.push(pointAtX(pts, targetX));
+			return left;
+		}
+
+		function cutRight(pts, targetX) {
+			if (targetX >= pts[pts.length - 1].x)
+				return [];
+			if (targetX <= pts[0].x)
+				return pts.slice();
+
+			let j = pts.length - 2;
+			for (let i = 0; i < pts.length - 1; i++) {
+				if (targetX <= pts[i + 1].x) {
+					j = i;
+					break;
+				}
+			}
+
+			const right = pts.slice(j + 1);
+			if (targetX < pts[j + 1].x)
+				right.unshift(pointAtX(pts, targetX));
+			return right;
+		}
+
+		onPaint: {
+			const ctx = getContext("2d");
+			ctx.reset();
+
+			const W = width;
+			const H = height;
+			if (W < 2 || H < 2)
+				return;
+
+			const padLeft = root.labelFontSize * 3.4;
+			const padRight = 2;
+			const padTop = 2;
+			const padBottom = root.labelFontSize + 8;
+			const plot = {
+				x: padLeft,
+				y: padTop,
+				w: W - padLeft - padRight,
+				h: H - padTop - padBottom
+			};
+			if (plot.w < 2 || plot.h < 2)
+				return;
+
+			// Auto-fit: NaN yMin/yMax derive from the data, snapped to the
+			// horizontal step grid, honoring minHorizontalLines
+			let lo = root.yMin;
+			let hi = root.yMax;
+			const loAuto = Number.isNaN(lo);
+			const hiAuto = Number.isNaN(hi);
+
+			if (loAuto || hiAuto) {
+				let dmin = Infinity;
+				let dmax = -Infinity;
+				for (const v of root.values) {
+					if (v == null)
+						continue;
+					if (v < dmin)
+						dmin = v;
+					if (v > dmax)
+						dmax = v;
+				}
+				if (dmin === Infinity) {
+					dmin = 0;
+					dmax = 1;
+				}
+
+				const step = root.horizontalLineStep;
+				const minSteps = root.minHorizontalLines > 1 ? root.minHorizontalLines - 1 : 0;
+
+				if (step > 0) {
+					if (hiAuto) {
+						const baseLo = loAuto ? Math.floor(dmin / step) * step : lo;
+						const span = Math.max(Math.ceil((dmax - baseLo) / step), minSteps, 1);
+						lo = baseLo;
+						hi = baseLo + span * step;
+					} else {
+						const span = Math.max(Math.ceil((hi - dmin) / step), minSteps, 1);
+						lo = hi - span * step;
+					}
+				} else {
+					if (loAuto)
+						lo = dmin;
+					if (hiAuto)
+						hi = dmax;
+					if (hi <= lo)
+						hi = lo + 1;
+				}
+			}
+
+			const scaleBottom = lo - root.yPaddingBottom;
+			const scaleTop = hi + root.yPaddingTop;
+			const range = scaleTop - scaleBottom;
+			if (range <= 0 || root.xSteps < 1)
+				return;
+
+			let series = root.values;
+			if (root.smoothing > 0 && series.length > 0) {
+				const radius = Math.round(root.smoothing);
+				const raw = series;
+				series = raw.map((v, i) => {
+					if (v == null)
+						return null;
+
+					let sum = 0;
+					let n = 0;
+					for (let j = -radius; j <= radius; j++) {
+						const u = raw[i + j];
+						if (u != null) {
+							sum += u;
+							n++;
+						}
+					}
+					return n > 0 ? sum / n : null;
+				});
+			}
+
+			const xAt = i => plot.x + (i / root.xSteps) * plot.w;
+			const yAt = v => plot.y + (1 - (v - scaleBottom) / range) * plot.h;
+			const crisp = v => Math.floor(v) + 0.5;
+
+			// 1. Grid lines
+			ctx.strokeStyle = Qt.alpha(root.gridColor, root.gridAlpha);
+			ctx.lineWidth = 1;
+
+			if (root.verticalLineStep > 0) {
+				for (let i = 0; i <= root.xSteps; i += root.verticalLineStep) {
+					if (i === 0 && !root.firstXLine)
+						continue;
+					if (i === root.xSteps && !root.lastXLine)
+						continue;
+
+					const x = crisp(xAt(i));
+					ctx.beginPath();
+					ctx.moveTo(x, plot.y);
+					ctx.lineTo(x, H);
+					ctx.stroke();
+				}
+			}
+
+			// Lines extend down into yPaddingBottom, snapped to the grid
+			const vStart = lo - (root.yPaddingBottom > 0 ? Math.floor(root.yPaddingBottom / root.horizontalLineStep) * root.horizontalLineStep : 0);
+
+			if (root.horizontalLineStep > 0) {
+				for (let v = vStart; v <= hi + 0.001; v += root.horizontalLineStep) {
+					const y = crisp(yAt(v));
+					ctx.beginPath();
+					ctx.moveTo(0, y);
+					ctx.lineTo(plot.x + plot.w, y);
+					ctx.stroke();
+				}
+			}
+
+			// 2. Labels
+			ctx.fillStyle = Qt.alpha(root.labelColor, root.labelAlpha);
+			ctx.font = root.labelFontSize + "px sans-serif";
+
+			ctx.textAlign = "left";
+			ctx.textBaseline = "top";
+			if (root.verticalLineStep > 0 && root.xLabel) {
+				for (let i = 0; i <= root.xSteps; i += root.verticalLineStep) {
+					if (i === 0 && !root.firstXLine)
+						continue;
+					if (i === root.xSteps && !root.lastXLine)
+						continue;
+
+					const text = root.xLabel(i);
+					if (text)
+						ctx.fillText(text, xAt(i) + 4, plot.y + plot.h + 4);
+				}
+			}
+
+			ctx.textBaseline = "bottom";
+			if (root.horizontalLineStep > 0 && root.yLabel) {
+				for (let v = vStart; v <= hi + 0.001; v += root.horizontalLineStep) {
+					const text = root.yLabel(v);
+					if (text)
+						ctx.fillText(text, 2, yAt(v) - 2);
+				}
+			}
+
+			// 3. Curve, split into segments at null gaps
+			const segments = [];
+			let current = null;
+			for (let i = 0; i < series.length; i++) {
+				if (series[i] == null) {
+					if (current)
+						segments.push(current);
+					current = null;
+					continue;
+				}
+				const pt = {
+					x: xAt(i),
+					y: yAt(series[i])
+				};
+				if (!current)
+					current = [];
+				current.push(pt);
+			}
+			if (current)
+				segments.push(current);
+
+			ctx.lineCap = "round";
+			ctx.lineJoin = "round";
+
+			const hasMarker = root.markerX >= 0 && root.markerX <= root.xSteps;
+			const markerPx = hasMarker ? xAt(root.markerX) : 0;
+			let gapPx = 0;
+			if (hasMarker) {
+				// markerGap is measured from the dot edge, perpendicular to the
+				// curve; project onto x via the local curve slope
+				let slope = 0;
+				const seg = segments.find(s => s[0].x <= markerPx && markerPx <= s[s.length - 1].x);
+				if (seg && seg.length > 2 && markerPx - 1 >= seg[0].x && markerPx + 1 <= seg[seg.length - 1].x)
+					slope = (pointAtX(seg, markerPx + 1).y - pointAtX(seg, markerPx - 1).y) / 2;
+				gapPx = (root.markerDotRadius + root.markerGap) / Math.sqrt(1 + slope * slope);
+			}
+
+			for (const seg of segments) {
+				if (seg.length < 2)
+					continue;
+
+				// Fill stays continuous under the marker
+				ctx.fillStyle = Qt.alpha(root.lineColor, root.fillAlpha);
+				strokeCurve(ctx, seg);
+				ctx.lineTo(seg[seg.length - 1].x, plot.y + plot.h);
+				ctx.lineTo(seg[0].x, plot.y + plot.h);
+				ctx.closePath();
+				ctx.fill();
+
+				// Stroke has a gap around the marker
+				const pieces = hasMarker ? [cutLeft(seg, markerPx - gapPx), cutRight(seg, markerPx + gapPx)] : [seg];
+
+				for (const pts of pieces) {
+					if (pts.length < 2)
+						continue;
+
+					ctx.strokeStyle = root.lineColor;
+					ctx.lineWidth = root.lineWidth;
+					strokeCurve(ctx, pts);
+					ctx.stroke();
+				}
+			}
+
+			// 4. Marker: dashed vertical + dot
+			if (root.markerX >= 0 && root.markerX <= root.xSteps) {
+				const x = markerPx;
+
+				ctx.setLineDash([4, 4]);
+				ctx.strokeStyle = Qt.alpha(root.markerColor, 0.6);
+				ctx.lineWidth = 1;
+				ctx.beginPath();
+				ctx.moveTo(crisp(x), plot.y);
+				ctx.lineTo(crisp(x), H);
+				ctx.stroke();
+				ctx.setLineDash([]);
+
+				const i0 = Math.floor(root.markerX);
+				const v0 = series[i0];
+				const v1 = series[i0 + 1];
+				let y = null;
+
+				if (v0 != null && v1 != null)
+					y = yAt(v0 + (v1 - v0) * (root.markerX - i0));
+				else if (v0 != null)
+					y = yAt(v0);
+
+				if (y != null) {
+					ctx.fillStyle = root.markerColor;
+					ctx.beginPath();
+					ctx.arc(x, y, root.markerDotRadius, 0, Math.PI * 2);
+					ctx.fill();
+				}
+			}
+		}
+	}
+
+	onValuesChanged: canvas.requestPaint()
+	onXStepsChanged: canvas.requestPaint()
+	onYMinChanged: canvas.requestPaint()
+	onYMaxChanged: canvas.requestPaint()
+	onYPaddingTopChanged: canvas.requestPaint()
+	onYPaddingBottomChanged: canvas.requestPaint()
+	onVerticalLineStepChanged: canvas.requestPaint()
+	onHorizontalLineStepChanged: canvas.requestPaint()
+	onFirstXLineChanged: canvas.requestPaint()
+	onLastXLineChanged: canvas.requestPaint()
+	onMinHorizontalLinesChanged: canvas.requestPaint()
+	onXLabelChanged: canvas.requestPaint()
+	onYLabelChanged: canvas.requestPaint()
+	onSmoothingChanged: canvas.requestPaint()
+	onCurveSmoothingChanged: canvas.requestPaint()
+	onMarkerXChanged: canvas.requestPaint()
+	onMarkerGapChanged: canvas.requestPaint()
+	onLineColorChanged: canvas.requestPaint()
+	onGridColorChanged: canvas.requestPaint()
+	onMarkerColorChanged: canvas.requestPaint()
+	onLabelColorChanged: canvas.requestPaint()
+	onGridAlphaChanged: canvas.requestPaint()
+	onLabelAlphaChanged: canvas.requestPaint()
+	onFillAlphaChanged: canvas.requestPaint()
+	onLineWidthChanged: canvas.requestPaint()
+	onMarkerDotRadiusChanged: canvas.requestPaint()
+	onLabelFontSizeChanged: canvas.requestPaint()
+}

Components/ScreenState.qml

@@ -0,0 +1,37 @@
+import QtQuick
+import Quickshell
+
+PersistentProperties {
+	required property ShellScreen modelData
+
+	reloadableId: "screenState"
+
+	// Drawer visibilities
+	property bool bar
+	property bool clipboard
+	property bool dashboard
+	property bool dock
+	property bool isDrawing
+	property bool launcher
+	property bool osd
+	property bool resources
+	property bool settings
+	property bool sidebar
+
+	// Dashboard state
+	property int dashboardTab
+	property date dashboardDate: new Date()
+
+	// Sidebar state
+	property int sidebarTab
+	property list<string> expandedNotifs: []
+
+	// Utilities state
+	property string recordingConfirmDelete
+	property bool recordingListExpanded
+	property string recordingMode
+
+	// Drawing state
+	property color penColor: "white"
+	property int penWidth: 4
+}

Components/StateLayer.qml

@@ -2,7 +2,7 @@ import QtQuick
 import QtQuick.Shapes
 import ZShell
 import ZShell.Config
-import qs.Helpers
+import qs.Services
 import qs.Services
 
 MouseArea {
@@ -52,7 +52,7 @@ MouseArea {
 
 	anchors.fill: parent
 	cursorShape: !enabled ? undefined : Qt.PointingHandCursor
-	enabled: parent.enabled && !Visibilities.getForActive()?.isDrawing
+	enabled: parent.enabled && !ShellState.forActive()?.isDrawing
 	hoverEnabled: true
 
 	Behavior on stateOpacity {