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

2026-09-30 14:22:22 +02:00
parent d259c6ffbe
commit 2c90339c77
97 changed files with 4480 additions and 990 deletions
@@ -5,78 +5,177 @@ import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 import ZShell.Config
+import ZShell
 import qs.Components

 Item {
 	id: root

-	required property PersistentProperties dashState
-	readonly property real nonAnimHeight: view.implicitHeight + viewWrapper.anchors.margins * 2
 	readonly property real nonAnimWidth: view.implicitWidth + viewWrapper.anchors.margins * 2
-	required property PersistentProperties visibilities
+	readonly property real nonAnimHeight: tabs.implicitHeight + tabs.anchors.topMargin + view.implicitHeight + viewWrapper.anchors.margins * 2
+
+	required property ScreenState screenState
+
+	readonly property var dashboardTabs: {
+		const allTabs = [
+			{
+				component: dashComponent,
+				iconName: "dashboard",
+				text: qsTr("Dashboard"),
+				enabled: true
+			},
+			{
+				component: weatherComponent,
+				iconName: "cloud",
+				text: qsTr("Weather"),
+				enabled: true
+			},
+			{
+				component: mediaComponent,
+				iconName: "queue_music",
+				text: qsTr("Media"),
+				enabled: true
+			},
+		// {
+		// 	component: testingComponent,
+		// 	iconName: "speed",
+		// 	text: qsTr("Testing"),
+		// 	enabled: true
+		// },
+		];
+		return allTabs.filter(tab => tab.enabled);
+	}

-	implicitHeight: nonAnimHeight
 	implicitWidth: nonAnimWidth
+	implicitHeight: nonAnimHeight

 	Behavior on implicitHeight {
-		Anim {
-		}
+		Anim {}
 	}
 	Behavior on implicitWidth {
-		Anim {
-		}
+		Anim {}
+	}
+
+	Tabs {
+		id: tabs
+
+		anchors.top: parent.top
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.topMargin: ZUtils.clamp(anchors.margins - Config.bar.border, 0, anchors.margins)
+		anchors.margins: Tokens.padding.large
+
+		nonAnimWidth: root.nonAnimWidth - anchors.margins * 2
+		screenState: root.screenState
+		tabs: root.dashboardTabs
 	}

 	ClippingRectangle {
 		id: viewWrapper

-		anchors.bottom: parent.bottom
+		anchors.top: tabs.bottom
 		anchors.left: parent.left
-		anchors.margins: Tokens.padding.small
 		anchors.right: parent.right
-		anchors.top: parent.top
+		anchors.bottom: parent.bottom
+		anchors.margins: Tokens.padding.small
 		color: "transparent"
 		radius: Tokens.rounding.extraLarge - anchors.margins

-		Item {
+		Flickable {
 			id: view

-			readonly property int currentIndex: root.dashState?.currentTab
-			readonly property Item currentItem: row.children[currentIndex]
+			readonly property int currentIndex: root.screenState.dashboardTab
+			readonly property Item currentItem: {
+				repeater.count;
+				return repeater.itemAt(currentIndex);
+			}

 			anchors.fill: parent
-			implicitHeight: currentItem.implicitHeight
-			implicitWidth: currentItem.implicitWidth
+
+			implicitWidth: currentItem?.implicitWidth ?? 0
+			implicitHeight: currentItem?.implicitHeight ?? 0
+
+			contentX: currentItem?.x ?? 0
+			contentWidth: row.implicitWidth
+			contentHeight: row.implicitHeight
+
+			interactive: false
+
+			onContentXChanged: {
+				if (!moving || !currentItem)
+					return;
+
+				const x = contentX - currentItem.x;
+				if (x > currentItem.implicitWidth / 2)
+					root.screenState.dashboardTab = Math.min(root.screenState.dashboardTab + 1, tabs.count - 1);
+				else if (x < -currentItem.implicitWidth / 2)
+					root.screenState.dashboardTab = Math.max(root.screenState.dashboardTab - 1, 0);
+			}

 			RowLayout {
 				id: row

-				Pane {
-					index: 0
+				Repeater {
+					id: repeater

-					sourceComponent: Dash {
-						dashState: root.dashState
-						visibilities: root.visibilities
+					model: ScriptModel {
+						values: root.dashboardTabs
 					}
+
+					delegate: Loader {
+						id: paneLoader
+
+						required property int index
+						required property var modelData
+
+						Layout.alignment: Qt.AlignTop
+
+						sourceComponent: modelData.component
+
+						Component.onCompleted: active = Qt.binding(() => {
+							if (index === view.currentIndex)
+								return true;
+							const vx = Math.floor(view.visibleArea.xPosition * view.contentWidth);
+							const vex = Math.floor(vx + view.visibleArea.widthRatio * view.contentWidth);
+							return (vx >= x && vx <= x + implicitWidth) || (vex >= x && vex <= x + implicitWidth);
+						})
+					}
+				}
+			}
+
+			Component {
+				id: dashComponent
+
+				Dash {
+					screenState: root.screenState
+				}
+			}
+
+			Component {
+				id: weatherComponent
+
+				WeatherTab {}
+			}
+
+			Component {
+				id: mediaComponent
+
+				Media {
+					screenState: root.screenState
+				}
+			}
+
+			// Component {
+			// 	id: testingComponent
+			//
+			// 	WeatherTest {}
+			// }
+
+			Behavior on contentX {
+				Anim {
+					type: Anim.DefaultEffects
 				}
 			}
 		}
 	}
-
-	component Pane: Loader {
-		id: pane
-
-		required property int index
-
-		Layout.alignment: Qt.AlignTop
-
-		Component.onCompleted: active = Qt.binding(() => {
-			// Always keep current tab loaded
-			if (pane.index === view.currentIndex)
-				return true;
-			const vx = Math.floor(view.visibleArea.xPosition * view.contentWidth);
-			const vex = Math.floor(vx + view.visibleArea.widthRatio * view.contentWidth);
-			return (vx >= x && vx <= x + implicitWidth) || (vex >= x && vex <= x + implicitWidth);
-		})
-	}
 }