made the tablet buttons a component and added an animation

Bar/Time.qml

@@ -344,6 +344,63 @@ Container {
 		anchors {
 		  fill: parent
 		  margins: 3
+		  topMargin: 3
+		}
+
+		Component {
+		  id: tabletButton
+
+		  Rectangle {
+			id: tabletButtonRoot
+
+			required property var modelData
+
+			color: Colors.overlay0
+			implicitWidth: 25
+			radius: root.boxRadius - 4
+
+			Behavior on color {
+			  ColorAnimation {
+				duration: 60
+			  }
+			}
+
+			anchors {
+			  bottom: parent.bottom
+			  top: parent.top
+			}
+
+			TapHandler {
+			  onTapped: {
+				tabletButtonRoot.modelData.onTapped();
+				tabletButtonRoot.color = Colors.text;
+				tapAnimationTimer.restart();
+			  }
+			}
+
+			Timer {
+			  id: tapAnimationTimer
+
+			  interval: 80
+			  repeat: false
+			  running: false
+
+			  onTriggered: {
+				tabletButtonRoot.color = Colors.overlay0;
+			  }
+			}
+
+			StyledText {
+			  anchors.fill: parent
+			  color: Colors.mauve
+			  fontSize: 14
+			  fontWeight: 10
+			  horizontalAlignment: Qt.AlignHCenter
+			  propo: true
+			  text: tabletButtonRoot.modelData.text
+			  verticalAlignment: Qt.AlignVCenter
+			}
+		  }
 		}
 
 		Row {
@@ -356,32 +413,16 @@ Container {
 			topMargin: 3
 		  }
 
-		  Rectangle {
+		  Repeater {
-			color: Colors.overlay0
+			delegate: tabletButton
-			implicitWidth: 25
+			model: [
-			radius: root.boxRadius - 4
+			  {
-
+				text: "󱗿",
-			anchors {
+				onTapped: function () {
-			  bottom: parent.bottom
+				  IpcManager.toggleLauncher();
-			  top: parent.top
-			}
-
-			TapHandler {
-			  onTapped: {
-				console.log("kando");
-			  }
-			}
-
-			StyledText {
-			  anchors.fill: parent
-			  color: Colors.mauve
-			  fontSize: 14
-			  fontWeight: 10
-			  horizontalAlignment: Qt.AlignHCenter
-			  propo: true
-			  text: "󱗿"
-			  verticalAlignment: Qt.AlignVCenter
 				}
+			  },
+			]
 		  }
 		}
 
@@ -389,7 +430,6 @@ Container {
 		  color: Colors.mauve
 		  text: TimeManager.time
 		}
-	  }
 
 		Row {
 		  spacing: 3
@@ -398,68 +438,27 @@ Container {
 			bottom: parent.bottom
 			bottomMargin: 3
 			right: parent.right
-		  rightMargin: 7
+			rightMargin: 4
 			top: parent.top
 			topMargin: 3
 		  }
 
-		Rectangle {
+		  Repeater {
-		  color: Colors.overlay0
+			delegate: tabletButton
-		  implicitWidth: 25
+			model: [
-		  radius: root.boxRadius - 4
+			  {
-
+				text: "",
-		  anchors {
+				onTapped: function () {
-			bottom: parent.bottom
-			bottomMargin: 3
-			top: parent.top
-			topMargin: 3
-		  }
-
-		  TapHandler {
-			onTapped: {
 				  WorkspaceManager.activateWorkspaceById("-1");
 				}
-		  }
+			  },
-
+			  {
-		  StyledText {
+				text: "",
-			anchors.fill: parent
+				onTapped: function () {
-			color: Colors.mauve
-			fontSize: 14
-			fontWeight: 10
-			horizontalAlignment: Qt.AlignHCenter
-			propo: true
-			text: ""
-			verticalAlignment: Qt.AlignVCenter
-		  }
-		}
-
-		Rectangle {
-		  color: Colors.overlay0
-		  implicitWidth: 25
-		  radius: root.boxRadius - 4
-
-		  anchors {
-			bottom: parent.bottom
-			bottomMargin: 3
-			top: parent.top
-			topMargin: 3
-		  }
-
-		  TapHandler {
-			onTapped: {
 				  Hyprland.dispatch(`hl.dsp.focus({workspace = "+1"})`);
 				}
-		  }
+			  },
-
+			]
-		  StyledText {
-			anchors.fill: parent
-			color: Colors.mauve
-			fontSize: 14
-			fontWeight: 10
-			horizontalAlignment: Qt.AlignHCenter
-			propo: true
-			text: ""
-			verticalAlignment: Qt.AlignVCenter
 		  }
 		}
 	  }