finished workspaces

Bar/Left.qml

@@ -13,13 +13,58 @@ import "./Left/"
 Container {
   id: root
 
+  property double extraHoveredWidth: 0
   required property HyprlandMonitor monitor
+  property double rowLeftMargin: 4
+  property double rowSpacing: 3
+  property double rowYmargin: 3
+  property double selectorFocusedExtra: 15
+  property double selectorHeight: 20
+  property double selectorWidth: 20
+  property double spacing: 3
+  property double workspaceNumber: WorkspaceManager.getNumberOfWorkspaces(monitor)
 
   boxHeight: 25
-  boxWidth: 200
+  boxWidth: (selectorWidth * workspaceNumber) + ((2 * rowLeftMargin) + (rowSpacing * (
+																		  workspaceNumber - 1))) + extraHoveredWidth + (hoverHandler.hovered == true
+																														? selectorFocusedExtra : 0)
   exclusiveMonitor: monitor
 
   defaultItem: WorkspaceContainer {
+	extraHoveredWidth: root.extraHoveredWidth
 	monitor: root.monitor
+	rowLeftMargin: root.rowLeftMargin
+	rowSpacing: root.rowSpacing
+	rowYmargin: root.rowYmargin
+	selectorFocusedExtra: root.selectorFocusedExtra
+	selectorHeight: root.selectorHeight
+	selectorWidth: root.selectorWidth
+  }
+  Behavior on rowYmargin {
+	SpringAnimation {
+	  damping: 0.3
+	  spring: 4
+	}
+  }
+  states: [
+	State {
+	  name: ""
+	  when: !hoverHandler.hovered
+	},
+	State {
+	  name: "hovered"
+	  when: hoverHandler.hovered
+
+	  PropertyChanges {
+		root.boxHeight: 40
+		root.extraHoveredWidth: 25
+		root.rowYmargin: 5
+		root.selectorWidth: 40
+	  }
+	}
+  ]
+
+  HoverHandler {
+	id: hoverHandler
   }
 }

Bar/Left/WorkspaceContainer.qml

@@ -2,17 +2,70 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Hyprland
+import "../../Color.js" as Colors
 import "../../Components/"
 import "../../Services/"
 
 Item {
   id: root
 
+  required property double extraHoveredWidth
   required property HyprlandMonitor monitor
+  required property double rowLeftMargin
+  required property double rowSpacing
+  required property double rowYmargin
+  required property double selectorFocusedExtra
+  required property double selectorHeight
+  required property double selectorWidth
 
-  RowLayout {
-	anchors.fill: parent
+  Item {
+	implicitWidth: 20
+	opacity: root.extraHoveredWidth > 0 ? 1 : 0
 
+	Behavior on opacity {
+	  NumberAnimation {
+		duration: 100
+	  }
+	}
+
+	TapHandler {
+	  id: tapHandler
+
+	  onTapped: WorkspaceManager.activateNextFreeWorkspace()
+	}
+
+	anchors {
+	  bottom: parent.bottom
+	  bottomMargin: 5 + root.rowYmargin
+	  right: parent.right
+	  rightMargin: 4
+	  top: parent.top
+	  topMargin: 5 + root.rowYmargin
+	}
+
+	Rectangle {
+	  anchors.fill: parent
+	  color: Colors.red
+	  radius: 4
+
+	  StyledText {
+		anchors.centerIn: parent
+		text: "+"
+	  }
+	}
+  }
+
+  Row {
+	spacing: root.rowSpacing
+
+	anchors {
+	  bottom: parent.bottom
+	  bottomMargin: root.rowYmargin
+	  left: parent.left
+	  leftMargin: root.rowLeftMargin
+	  top: parent.top
+	  topMargin: root.rowYmargin
+	}
 
 	Repeater {
 	  model: WorkspaceManager.getWorkspacesForMonitor(root.monitor)
@@ -20,6 +73,10 @@ Item {
 	  WorkspaceSelector {
 		required property HyprlandWorkspace modelData
 
+		extraHoveredWidth: root.extraHoveredWidth
+		selectorFocusedExtra: root.selectorFocusedExtra
+		selectorHeight: root.selectorHeight
+		selectorWidth: root.selectorWidth
 		workspace: modelData
 	  }
 	}

Bar/Left/WorkspaceSelector.qml

@@ -1,15 +1,88 @@
 import QtQuick
+import QtQuick.Controls
 import Quickshell
 import Quickshell.Hyprland
+import "../../Color.js" as Colors
 import "../../Components/"
 import "../../Services/"
 
 Item {
   id: root
 
+  required property double extraHoveredWidth
+  property bool hovered: extraHoveredWidth > 0 ? true : false
+  property color selectorColor: Colors.surface2
+  required property double selectorFocusedExtra
+  required property double selectorHeight
+  required property double selectorWidth
   required property HyprlandWorkspace workspace
+  property string workspaceState: WorkspaceManager.getWorkspaceState(workspace)
 
-  StyledText {
-	text: root.workspace.id
+  implicitWidth: selectorWidth + (root.hovered == true ? (root.workspaceState == "focused"
+														  ? selectorFocusedExtra : 0) : 0)
+
+  Behavior on implicitWidth {
+	SpringAnimation {
+	  damping: 0.3
+	  spring: 4
+	}
+  }
+  states: [
+	State {
+	  name: ""
+	  when: root.workspaceState == "inactive"
+
+	  PropertyChanges {
+		root.selectorColor: Colors.surface2
+	  }
+	},
+	State {
+	  name: "active"
+	  when: root.workspaceState == "active"
+
+	  PropertyChanges {
+		root.selectorColor: Colors.overlay2
+	  }
+	},
+	State {
+	  name: "focused"
+	  when: root.workspaceState == "focused"
+
+	  PropertyChanges {
+		root.selectorColor: Colors.lavender
+	  }
+	}
+  ]
+
+  TapHandler {
+	id: tapHandler
+
+	onTapped: root.workspace.activate()
+  }
+
+  anchors {
+	bottom: parent.bottom
+	top: parent.top
+  }
+
+  Rectangle {
+	color: root.selectorColor
+	radius: 6
+
+	Behavior on color {
+	  ColorAnimation {
+		duration: 100
+	  }
+	}
+
+	anchors {
+	  fill: parent
+	}
+
+	StyledText {
+	  anchors.centerIn: parent
+	  font.pointSize: 10.5
+	  text: root.workspace.id
+	}
   }
 }