some state nonsense

Bar.qml

@@ -70,7 +70,9 @@ Scope {
 			  horizontalCenter: parent.horizontalCenter
 			}
 
-			Center {}
+			Center {
+			  monitor: win.monitor
+			}
 		  }
 
 		  Row {

Bar/Center.qml

@@ -1,5 +1,7 @@
 import QtQuick
+import QtQuick.Layouts
 import Quickshell
+import Quickshell.Hyprland
 import "../Color.js" as Colors
 import "../Components/"
 import "../Services/"
@@ -7,28 +9,67 @@ import "../Services/"
 Container {
   id: centerPill
 
+  required property HyprlandMonitor monitor
+  property string previousState
+
   boxColor: Colors.mauve
   defaultItem: time
+  exclusiveMonitor: centerPill.monitor
   exclusiveToScreen: true
   state: ""
 
   states: [
+	State {
+	  name: ""
+
+	  StateChangeScript {
+		script: {
+		  if (centerPill.previousState != "hovered") {
+			centerPill.stack.replace(time);
+		  }
+		  centerPill.previousState = "";
+		}
+	  }
+	},
 	State {
 	  name: "hovered"
 
 	  PropertyChanges {
-		centerPill.boxColor: Colors.teal
+		centerPill.boxHeight: 35
-		centerPill.boxHeight: 200
+		centerPill.boxWidth: 110
+	  }
+
+	  StateChangeScript {
+		script: {
+		  centerPill.previousState = "hovered";
+		}
+	  }
+	},
+	State {
+	  name: "expanded"
+
+	  PropertyChanges {
+		centerPill.boxHeight: 140
+		centerPill.boxRadius: 30
+		centerPill.boxWidth: 300
+	  }
+
+	  StateChangeScript {
+		script: {
+		  centerPill.stack.replace(fullTime);
+		  centerPill.previousState = "expanded";
+		}
 	  }
 	}
   ]
 
+  mouse.onClicked: {
+	centerPill.state == "expanded" ? centerPill.state = "" : centerPill.state = "expanded";
+  }
   mouse.onEntered: {
-	print("entered");
 	centerPill.state = "hovered";
   }
   mouse.onExited: {
-	print("something");
 	centerPill.state = "";
   }
 
@@ -41,4 +82,25 @@ Container {
 	  }
 	}
   }
+
+  Component {
+	id: fullTime
+
+	Column {
+	  Layout.alignment: Qt.AlignCenter
+	  spacing: 5
+
+	  Item {
+		CenteredText {
+		  text: Time.time
+		}
+	  }
+
+	  Item {
+		CenteredText {
+		  text: Time.date
+		}
+	  }
+	}
+  }
 }

Components/Container.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import Quickshell
+import Quickshell.Hyprland
 
 import "../Color.js" as Colors
 
@@ -12,6 +13,7 @@ Item {
   property double boxRadius: 9
   property double boxWidth: 100
   property Component defaultItem
+  required property HyprlandMonitor exclusiveMonitor
   property bool exclusiveToScreen: false
   property alias mouse: mouseArea
   property alias rect: container
@@ -19,9 +21,11 @@ Item {
 
   function getVisible() {
 	if (containerRoot.exclusiveToScreen) {
-	  let minMargin = -2 - containerRoot.boxHeight;
+	  if (Hyprland.focusedMonitor != containerRoot.exclusiveMonitor) {
-	  console.log(minMargin);
+		return -2 - containerRoot.boxHeight - 5;
-	  return minMargin - 5;
+	  } else {
+		return 0;
+	  }
 	} else {
 	  return 0;
 	}
@@ -30,11 +34,25 @@ Item {
   implicitHeight: boxHeight
   implicitWidth: boxWidth
 
+  Behavior on anchors.topMargin {
+	animation: defaultCurve
+  }
   Behavior on boxHeight {
-	animation: defaultAnim
+	SpringAnimation {
+	  damping: 0.3
+	  spring: 4
+	}
+  }
+  Behavior on boxRadius {
+	NumberAnimation {
+	  duration: 100
+	}
   }
   Behavior on boxWidth {
-	animation: defaultAnim
+	SpringAnimation {
+	  damping: 0.3
+	  spring: 4
+	}
   }
 
   anchors {
@@ -42,11 +60,11 @@ Item {
 	topMargin: getVisible()
   }
 
-  SpringAnimation {
+  NumberAnimation {
-	id: defaultAnim
+	id: defaultCurve
 
-	damping: 0.3
+	duration: 200
-	spring: 4
+	easing: Easing.InOutBack
   }
 
   MouseArea {
@@ -69,6 +87,39 @@ Item {
 
 	  anchors.fill: parent
 
+	  popEnter: Transition {
+		PropertyAnimation {
+		  duration: 200
+		  from: 0
+		  property: "opacity"
+		  to: 1
+		}
+	  }
+	  popExit: Transition {
+		PropertyAnimation {
+		  duration: 200
+		  from: 1
+		  property: "opacity"
+		  to: 0
+		}
+	  }
+	  pushEnter: Transition {
+		PropertyAnimation {
+		  duration: 200
+		  from: 0
+		  property: "opacity"
+		  to: 1
+		}
+	  }
+	  pushExit: Transition {
+		PropertyAnimation {
+		  duration: 200
+		  from: 1
+		  property: "opacity"
+		  to: 0
+		}
+	  }
+
 	  Component.onCompleted: containerContent.push(containerRoot.defaultItem)
 	  onCurrentItemChanged: {
 		if (currentItem) {

Services/Time.qml

@@ -28,11 +28,11 @@ Singleton {
   Process {
 	id: dateProc
 
-	command: ["date"]
+	command: ["date", "+%A %B %d %Y"]
 	running: true
 
 	stdout: StdioCollector {
-	  onStreamFinished: root.time = this.text
+	  onStreamFinished: root.date = this.text
 	}
   }
 
@@ -41,6 +41,9 @@ Singleton {
 	repeat: true
 	running: true
 
-	onTriggered: timeProc.running = true
+	onTriggered: {
+	  timeProc.running = true;
+	  dateProc.running = true;
+	}
   }
 }