have a clock again

Bar.qml

@@ -3,7 +3,7 @@ import QtQuick.Effects
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Hyprland
-import "Bar"
+import "./Bar"
 import "Color.js" as Colors
 
 Scope {
@@ -26,17 +26,9 @@ Scope {
 		screen: modelData
 
 		mask: Region {
-		  Region {
-			item: left
-		  }
-
 		  Region {
 			item: center
 		  }
-
-		  Region {
-			item: right
-		  }
 		}
 
 		anchors {
@@ -51,47 +43,35 @@ Scope {
 			topMargin: 3
 		  }
 
-		  Row {
-			id: left
-
-			height: childrenRect.height
-
+		  RowLayout {
 			anchors {
 			  left: parent.left
-			  leftMargin: 7
-			}
-
-			Left {
-			  monitor: win.monitor
-			}
-		  }
-
-		  Row {
-			id: center
-
-			height: childrenRect.height
-
-			anchors {
-			  horizontalCenter: parent.horizontalCenter
-			}
-
-			Center {
-			  monitor: win.monitor
-			}
-		  }
-
-		  Row {
-			id: right
-
-			height: childrenRect.height
-
-			anchors {
 			  right: parent.right
-			  rightMargin: 7
+			  top: parent.top
 			}
 
-			Right {
-			  monitor: win.monitor
+			Row {
+			  id: left
+			}
+
+			Item {
+			  Layout.fillWidth: true
+			}
+
+			Row {
+			  id: center
+
+			  Time {
+				monitor: win.monitor
+			  }
+			}
+
+			Item {
+			  Layout.fillWidth: true
+			}
+
+			Row {
+			  id: right
 			}
 		  }
 		}

Bar/Time.qml

@@ -0,0 +1,41 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Hyprland
+
+import "../Color.js" as Colors
+import "../Components/"
+import "../Services/"
+
+Container {
+  id: root
+
+  required property HyprlandMonitor monitor
+
+  boxColor: Colors.mauve
+  defaultItem: time
+  exclusiveMonitor: root.monitor
+
+  states: [
+	State {
+	  name: "hovered"
+	  when: root.hovered == true
+
+	  PropertyChanges {
+		root.boxHeight: 32
+		root.boxRadius: 12
+		root.boxWidth: 110
+	  }
+	}
+  ]
+
+  Component {
+	id: time
+
+	StyledText {
+	  horizontalAlignment: Qt.AlignCenter
+	  text: Time.time
+	  verticalAlignment: Qt.AlignVCenter
+	}
+  }
+}

Components/Container.qml

@@ -35,6 +35,7 @@ Item {
   property bool forceHidden: false
   property alias hover: hoverHandler
   property bool hoverableWhenHidden: false
+  property bool hovered: false
   property alias rect: container
   property alias stack: containerContent
   property alias tap: tapHandler
@@ -79,6 +80,14 @@ Item {
 
   HoverHandler {
 	id: hoverHandler
+
+	onHoveredChanged: {
+	  if (hoverHandler.hovered == true) {
+		root.hovered = true;
+	  } else {
+		root.hovered = false;
+	  }
+	}
   }
 
   TapHandler {
@@ -89,10 +98,10 @@ Item {
 	anchors.fill: container
 	blur: 30
 	color: Colors.mantle
-	offset.x: 7
-	offset.y: 3
+	offset.x: 5
+	offset.y: 2
 	radius: container.radius
-	spread: 10
+	spread: 5
   }
 
   Rectangle {