refactored default state stuff to be in the container component instead of repeated 4 times

Bar/Battery.qml

@@ -18,61 +18,16 @@ Container {
 
   animOffset: 150
   boxColor: Colors.green
+  boxHeight: 25
+  boxHeightOpened: root.batteryDisplayHeight
   boxRadius: radius
+  boxWidth: 60
+  boxWidthOpened: 410
   defaultItem: icon
   exclusiveMonitor: root.monitor
   exclusiveToScreen: true
   forceHidden: !BatteryManager.hasLaptopBattery
-
+  openedItem: batteryDisplay
-  states: [
-	State {
-	  name: "closed"
-	  when: root.hovered == false && root.opened == false
-
-	  PropertyChanges {
-		root.boxHeight: 25
-		root.boxRadius: root.radius
-		root.boxWidth: 60
-	  }
-	},
-	State {
-	  name: "hovered"
-	  when: root.hovered == true && root.opened == false
-
-	  PropertyChanges {
-		root.boxHeight: 28
-		root.boxWidth: 64
-	  }
-	},
-	State {
-	  name: "opened"
-	  when: root.opened == true && root.hovered == true
-
-	  PropertyChanges {
-		root.boxHeight: root.batteryDisplayHeight
-		root.boxRadius: 12
-		root.boxWidth: 450
-	  }
-
-	  StateChangeScript {
-		script: {
-		  stack.replace(batteryDisplay);
-		}
-	  }
-	}
-  ]
-
-  hover.onHoveredChanged: {
-	if (hover.hovered == false) {
-	  root.opened = false;
-	  if (root.state != "icon") {
-		root.stack.replace(icon);
-	  }
-	}
-  }
-  tap.onTapped: {
-	root.opened = true;
-  }
 
   Component {
 	id: icon

Bar/Bluetooth.qml

@@ -14,67 +14,19 @@ Container {
   property double devicePlaqueHeight: 60
   property double devicePlaqueSpacing: 4
   required property HyprlandMonitor monitor
-  property bool opened: false
 
   animOffset: 200
   boxColor: Colors.peach
   boxHeight: 25
+  boxHeightOpened: (root.devicePlaqueHeight * BluetoothManager.getConnectedDevicesList().length) + (
+					 root.devicePlaqueSpacing * (BluetoothManager.getConnectedDevicesList().length + 1)) + 2
   boxWidth: 33
+  boxWidthOpened: 350
   defaultItem: icon
   exclusiveMonitor: root.monitor
   exclusiveToScreen: true
   forceHidden: !BluetoothManager.anyConnected
-
+  openedItem: deviceList
-  states: [
-	State {
-	  name: "closed"
-	  when: root.hovered == false && root.opened == false
-
-	  PropertyChanges {
-		root.boxHeight: 25
-		root.boxRadius: 9
-		root.boxWidth: 33
-	  }
-	},
-	State {
-	  name: "hovered"
-	  when: root.hovered == true && root.opened == false
-
-	  PropertyChanges {
-		root.boxHeight: 28
-		root.boxWidth: 35
-	  }
-	},
-	State {
-	  name: "opened"
-	  when: root.opened == true && root.hovered == true
-
-	  PropertyChanges {
-		root.boxHeight: (root.devicePlaqueHeight * BluetoothManager.getConnectedDevicesList().length) + (
-						  root.devicePlaqueSpacing * (BluetoothManager.getConnectedDevicesList().length + 1)) + 2
-		root.boxRadius: 12
-		root.boxWidth: 350
-	  }
-
-	  StateChangeScript {
-		script: {
-		  stack.replace(deviceList);
-		}
-	  }
-	}
-  ]
-
-  hover.onHoveredChanged: {
-	if (hover.hovered == false) {
-	  root.opened = false;
-	  if (root.state != "icon") {
-		root.stack.replace(icon);
-	  }
-	}
-  }
-  tap.onTapped: {
-	root.opened = true;
-  }
 
   Component {
 	id: icon

Bar/Network.qml

@@ -13,66 +13,18 @@ Container {
 
   required property HyprlandMonitor monitor
   property double networkDisplayHeight: 80
-  property bool opened: false
 
   animOffset: 250
   boxColor: Colors.red
   boxHeight: 25
+  boxHeightOpened: root.networkDisplayHeight
   boxWidth: 33
+  boxWidthOpened: 350
   defaultItem: icon
   exclusiveMonitor: root.monitor
   exclusiveToScreen: true
   forceHidden: !NetworkManager.connectedWifi
-
+  openedItem: networkDisplay
-  states: [
-	State {
-	  name: "closed"
-	  when: root.hovered == false && root.opened == false
-
-	  PropertyChanges {
-		root.boxHeight: 25
-		root.boxRadius: 9
-		root.boxWidth: 33
-	  }
-	},
-	State {
-	  name: "hovered"
-	  when: root.hovered == true && root.opened == false
-
-	  PropertyChanges {
-		root.boxHeight: 28
-		root.boxWidth: 35
-	  }
-	},
-	State {
-	  name: "opened"
-	  when: root.opened == true && root.hovered == true
-
-	  PropertyChanges {
-		root.boxHeight: root.networkDisplayHeight
-		root.boxRadius: 12
-		root.boxWidth: 350
-	  }
-
-	  StateChangeScript {
-		script: {
-		  stack.replace(wifiInfo);
-		}
-	  }
-	}
-  ]
-
-  hover.onHoveredChanged: {
-	if (hover.hovered == false) {
-	  root.opened = false;
-	  if (root.state != "icon") {
-		root.stack.replace(icon);
-	  }
-	}
-  }
-  tap.onTapped: {
-	root.opened = true;
-  }
 
   Component {
 	id: icon
@@ -86,7 +38,7 @@ Container {
   }
 
   Component {
-	id: wifiInfo
+	id: networkDisplay
 
 	Item {
 	  id: networkDisplayRoot

Bar/Time.qml

@@ -22,7 +22,6 @@ Container {
   property double notificationHeight: 100
   property double notificationWidth: 350
   property bool notified: false
-  property bool overriden: false
 
   boxColor: Colors.mauve
   defaultItem: time
@@ -30,43 +29,6 @@ Container {
   exclusiveToScreen: true
 
   states: [
-	State {
-	  name: "closed"
-	  when: root.hovered == false && root.overriden == false
-
-	  PropertyChanges {
-		root.boxHeight: 28
-		root.boxRadius: 9
-		root.boxWidth: 100
-	  }
-
-	  StateChangeScript {
-		script: {
-		  if (!root.stack.currentItem) {
-			return;
-		  }
-		  if (root.stack.currentItem.component != "time") {
-			root.stack.replace(time);
-		  }
-		}
-	  }
-	},
-	State {
-	  name: "hovered"
-	  when: root.hovered == true && root.overriden == false
-
-	  PropertyChanges {
-		root.boxHeight: MprisManager.getPlaying() == false ? 32 : root.mprisHeight
-		root.boxRadius: 12
-		root.boxWidth: MprisManager.getPlaying() == false ? 107 : root.mprisWidth
-	  }
-
-	  StateChangeScript {
-		script: {
-		  root.stack.replace(MprisManager.getPlaying() == true ? mprisToast : time);
-		}
-	  }
-	},
 	State {
 	  name: "notified"
 	  when: root.notified == true
@@ -105,6 +67,16 @@ Container {
 	}
   ]
 
+  onHoveredChanged: {
+	if (root.hovered == true && MprisManager.getPlaying() == true) {
+	  root.overriden = true;
+	  root.mpris = true;
+	} else {
+	  root.overriden = false;
+	  root.mpris = true;
+	}
+  }
+
   Connections {
 	function onNewNotification() {
 	  notification => {

Components/Container.qml

@@ -14,8 +14,12 @@ Item {
   property double animOffset: 0
   property color boxColor: Colors.surface0
   property double boxHeight: 28
+  property double boxHeightOpened: 150
+  property bool boxOpened: false
   property double boxRadius: 9
+  property double boxRadiusOpened: 12
   property double boxWidth: 100
+  property double boxWidthOpened: 200
   readonly property double calculatedTopMargin: {
 	if (!root.exclusiveToScreen) {
 	  return visibleTopMargin;
@@ -38,6 +42,8 @@ Item {
   property alias hover: hoverHandler
   property bool hoverableWhenHidden: false
   property bool hovered: false
+  property Component openedItem
+  property bool overriden: false
   property alias rect: container
   property alias stack: containerContent
   property alias tap: tapHandler
@@ -50,13 +56,13 @@ Item {
   Behavior on anchors.topMargin {
 	animation: defaultCurve
   }
-  Behavior on boxHeight {
+  Behavior on boxRadius {
 	SpringAnimation {
 	  damping: 0.3
 	  spring: 4
 	}
   }
-  Behavior on boxRadius {
+  Behavior on implicitHeight {
 	SpringAnimation {
 	  damping: 0.3
 	  spring: 4
@@ -68,6 +74,56 @@ Item {
 	  spring: 4
 	}
   }
+  states: [
+	State {
+	  name: "closed"
+	  when: root.hovered == false && root.boxOpened == false && root.overriden == false
+
+	  PropertyChanges {
+		container.radius: root.boxRadius
+		root.implicitHeight: root.boxHeight
+		root.implicitWidth: root.boxWidth
+	  }
+
+	  StateChangeScript {
+		script: {
+		  stack.replace(root.defaultItem);
+		}
+	  }
+	},
+	State {
+	  name: "hovered"
+	  when: root.hovered == true && root.boxOpened == false && root.overriden == false
+
+	  PropertyChanges {
+		container.radius: root.boxRadius + 3
+		root.implicitHeight: root.boxHeight + 2
+		root.implicitWidth: root.boxWidth + 2
+	  }
+
+	  StateChangeScript {
+		script: {
+		  stack.replace(root.defaultItem);
+		}
+	  }
+	},
+	State {
+	  name: "opened"
+	  when: root.boxOpened == true && root.hovered == true && root.overriden == false
+
+	  PropertyChanges {
+		container.radius: root.boxRadiusOpened
+		root.implicitHeight: root.boxHeightOpened
+		root.implicitWidth: root.boxWidthOpened
+	  }
+
+	  StateChangeScript {
+		script: {
+		  stack.replace(root.openedItem);
+		}
+	  }
+	}
+  ]
 
   onForceHiddenChanged: {
 	if (root.forceHidden == true) {
@@ -125,12 +181,22 @@ Item {
 		root.hovered = true;
 	  } else {
 		root.hovered = false;
+		root.boxOpened = false;
+		if (root.state == "closed") {
+		  root.stack.replace(root.defaultItem);
+		}
 	  }
 	}
   }
 
   TapHandler {
 	id: tapHandler
+
+	onTapped: {
+	  if (root.openedItem) {
+		root.boxOpened = true;
+	  }
+	}
   }
 
   Rectangle {
@@ -141,6 +207,12 @@ Item {
 	color: root.boxColor
 	radius: root.boxRadius
 
+	Behavior on radius {
+	  NumberAnimation {
+		duration: 300
+	  }
+	}
+
 	StackView {
 	  id: containerContent