getting things done

Bar.qml

@@ -1,8 +1,10 @@
 import QtQuick
 import QtQuick.Effects
+import QtQuick.Layouts
 import Quickshell
 import Quickshell.Hyprland
-import "Components/Color.js" as Colors
+import "Bar"
+import "Color.js" as Colors
 
 Scope {
   Variants {
@@ -12,22 +14,75 @@ Scope {
 	  PanelWindow {
 		id: win
 
+		property double barExclusionZone: 15
+		property double barMaxHeight: 1000
 		required property var modelData
 		property HyprlandMonitor monitor: Hyprland.monitorFor(modelData)
 
 		color: "transparent"
 		exclusionMode: ExclusionMode.Normal
-		exclusiveZone: 15
-		implicitHeight: 1000
+		exclusiveZone: barExclusionZone
+		implicitHeight: barMaxHeight
 		screen: modelData
 
-		mask: Region {}
+		mask: Region {
+		  Region {
+			item: left
+		  }
+
+		  Region {
+			item: center
+		  }
+
+		  Region {
+			item: right
+		  }
+		}
 
 		anchors {
 		  left: true
 		  right: true
 		  top: true
 		}
+
+		Item {
+		  anchors {
+			fill: parent
+			topMargin: 2
+		  }
+
+		  Row {
+			id: left
+
+			height: childrenRect.height
+
+			anchors {
+			  right: parent.right
+			}
+		  }
+
+		  Row {
+			id: center
+
+			height: childrenRect.height
+
+			anchors {
+			  horizontalCenter: parent.horizontalCenter
+			}
+
+			Center {}
+		  }
+
+		  Row {
+			id: right
+
+			height: childrenRect.height
+
+			anchors {
+			  left: parent.left
+			}
+		  }
+		}
 	  }
 	}
   }

Bar/Center.qml

@@ -0,0 +1,44 @@
+import QtQuick
+import Quickshell
+import "../Color.js" as Colors
+import "../Components/"
+import "../Services/"
+
+Container {
+  id: centerPill
+
+  boxColor: Colors.mauve
+  defaultItem: time
+  exclusiveToScreen: true
+  state: ""
+
+  states: [
+	State {
+	  name: "hovered"
+
+	  PropertyChanges {
+		centerPill.boxColor: Colors.teal
+		centerPill.boxHeight: 200
+	  }
+	}
+  ]
+
+  mouse.onEntered: {
+	print("entered");
+	centerPill.state = "hovered";
+  }
+  mouse.onExited: {
+	print("something");
+	centerPill.state = "";
+  }
+
+  Component {
+	id: time
+
+	Item {
+	  CenteredText {
+		text: Time.time
+	  }
+	}
+  }
+}

Components/CenteredText.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import "../Color.js" as Colors
+
+Text {
+  anchors.horizontalCenter: parent.horizontalCenter
+  anchors.verticalCenter: parent.verticalCenter
+  color: Colors.base
+
+  font {
+	family: "FiraMono Nerd Font"
+	pointSize: 12
+	weight: 600
+  }
+}

Components/Container.qml

@@ -0,0 +1,82 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+
+import "../Color.js" as Colors
+
+Item {
+  id: containerRoot
+
+  property color boxColor: Colors.surface0
+  property double boxHeight: 28
+  property double boxRadius: 9
+  property double boxWidth: 100
+  property Component defaultItem
+  property bool exclusiveToScreen: false
+  property alias mouse: mouseArea
+  property alias rect: container
+  property alias stack: containerContent
+
+  function getVisible() {
+	if (containerRoot.exclusiveToScreen) {
+	  let minMargin = -2 - containerRoot.boxHeight;
+	  console.log(minMargin);
+	  return minMargin - 5;
+	} else {
+	  return 0;
+	}
+  }
+
+  implicitHeight: boxHeight
+  implicitWidth: boxWidth
+
+  Behavior on boxHeight {
+	animation: defaultAnim
+  }
+  Behavior on boxWidth {
+	animation: defaultAnim
+  }
+
+  anchors {
+	top: parent.top
+	topMargin: getVisible()
+  }
+
+  SpringAnimation {
+	id: defaultAnim
+
+	damping: 0.3
+	spring: 4
+  }
+
+  MouseArea {
+	id: mouseArea
+
+	anchors.fill: parent
+	hoverEnabled: true
+	z: 1
+  }
+
+  Rectangle {
+	id: container
+
+	anchors.fill: parent
+	color: containerRoot.boxColor
+	radius: containerRoot.boxRadius
+
+	StackView {
+	  id: containerContent
+
+	  anchors.fill: parent
+
+	  Component.onCompleted: containerContent.push(containerRoot.defaultItem)
+	  onCurrentItemChanged: {
+		if (currentItem) {
+		  // Dynamically center the incoming child to the StackView
+		  currentItem.anchors.horizontalCenter = containerContent.horizontalCenter;
+		  currentItem.anchors.verticalCenter = containerContent.verticalCenter;
+		}
+	  }
+	}
+  }
+}

Services/Time.qml

@@ -0,0 +1,46 @@
+// Time.qml
+
+// with this line our type becomes a Singleton
+pragma Singleton
+import QtQuick
+
+import Quickshell
+import Quickshell.Io
+
+// your singletons should always have Singleton as the type
+Singleton {
+  id: root
+
+  property string date
+  property string time
+
+  Process {
+	id: timeProc
+
+	command: ["date", "+%T"]
+	running: true
+
+	stdout: StdioCollector {
+	  onStreamFinished: root.time = this.text
+	}
+  }
+
+  Process {
+	id: dateProc
+
+	command: ["date"]
+	running: true
+
+	stdout: StdioCollector {
+	  onStreamFinished: root.time = this.text
+	}
+  }
+
+  Timer {
+	interval: 1000
+	repeat: true
+	running: true
+
+	onTriggered: timeProc.running = true
+  }
+}

shell.qml

@@ -1,9 +1,6 @@
+import QtQuick
 import Quickshell
 import Quickshell.Hyprland
-import QtQuick
-import "Components/Color.js" as Colors
-
-import "Components"
 
 Scope {
   Bar {}