4 files changed, 35 insertions, 59 deletions
diff --git a/modules/bar/components/workspaces/ActiveIndicator.qml b/modules/bar/components/workspaces/ActiveIndicator.qml
index 58727dd..d55bdb8 100644
--- a/modules/bar/components/workspaces/ActiveIndicator.qml
+++ b/modules/bar/components/workspaces/ActiveIndicator.qml
@@ -4,10 +4,9 @@ import "root:/config"
 import QtQuick
 import QtQuick.Effects
 
-Rectangle {
+StyledRect {
     id: root
 
-    required property bool vertical
     required property list<Workspace> workspaces
     required property Item mask
     required property real maskWidth
@@ -15,34 +14,26 @@ Rectangle {
     required property int groupOffset
 
     readonly property Workspace currentWs: workspaces[Hyprland.activeWsId - 1 - groupOffset] ?? null
-    property real leading: (vertical ? currentWs?.y : currentWs?.x) ?? 0
-    property real trailing: (vertical ? currentWs?.y : currentWs?.x) ?? 0
+    property real leading: currentWs?.y ?? 0
+    property real trailing: currentWs?.y ?? 0
     property real currentSize: (currentWs?.size) ?? 0
     property real size: Math.abs(leading - trailing) + currentSize
     property real offset: Math.min(leading, trailing)
 
     clip: true
-    x: vertical ? 1 : offset + 1
-    y: vertical ? offset + 1 : 1
-    implicitWidth: (vertical ? BarConfig.sizes.innerHeight : size) - 2
-    implicitHeight: (vertical ? size : BarConfig.sizes.innerHeight) - 2
+    x: 1
+    y: offset + 1
+    implicitWidth: BarConfig.sizes.innerHeight - 2
+    implicitHeight: size - 2
     radius: BarConfig.workspaces.rounded ? Appearance.rounding.full : 0
     color: Colours.palette.m3primary
 
-    Rectangle {
+    StyledRect {
         id: base
 
         visible: false
         anchors.fill: parent
         color: Colours.palette.m3onPrimary
-
-        Behavior on color {
-            ColorAnimation {
-                duration: Appearance.anim.durations.normal
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Appearance.anim.curves.standard
-            }
-        }
     }
 
     MultiEffect {
@@ -52,21 +43,12 @@ Rectangle {
         maskSpreadAtMin: 1
         maskThresholdMin: 0.5
 
-        x: root.vertical ? 0 : -parent.offset
-        y: root.vertical ? -parent.offset : 0
+        x: 0
+        y: -parent.offset
         implicitWidth: root.maskWidth
         implicitHeight: root.maskHeight
 
-        anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
-        anchors.verticalCenter: root.vertical ? undefined : parent.verticalCenter
-    }
-
-    Behavior on color {
-        ColorAnimation {
-            duration: Appearance.anim.durations.normal
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Appearance.anim.curves.standard
-        }
+        anchors.horizontalCenter: parent.horizontalCenter
     }
 
     Behavior on leading {
diff --git a/modules/bar/components/workspaces/OccupiedBg.qml b/modules/bar/components/workspaces/OccupiedBg.qml
index 9de3d5b..4fba2f4 100644
--- a/modules/bar/components/workspaces/OccupiedBg.qml
+++ b/modules/bar/components/workspaces/OccupiedBg.qml
@@ -9,7 +9,6 @@ import QtQuick
 Item {
     id: root
 
-    required property bool vertical
     required property list<Workspace> workspaces
     required property var occupied
     required property int groupOffset
@@ -44,7 +43,7 @@ Item {
             values: root.pills.filter(p => p)
         }
 
-        Rectangle {
+        StyledRect {
             id: rect
 
             required property var modelData
@@ -57,23 +56,14 @@ Item {
 
             x: start?.x ?? 0
             y: start?.y ?? 0
-            implicitWidth: root.vertical ? BarConfig.sizes.innerHeight : end?.x + end?.width - start?.x
-            implicitHeight: root.vertical ? end?.y + end?.height - start?.y : BarConfig.sizes.innerHeight
+            implicitWidth: BarConfig.sizes.innerHeight
+            implicitHeight: end?.y + end?.height - start?.y
 
-            anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
-            anchors.verticalCenter: root.vertical ? undefined : parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
 
             scale: 0
             Component.onCompleted: scale = 1
 
-            Behavior on color {
-                ColorAnimation {
-                    duration: Appearance.anim.durations.normal
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: Appearance.anim.curves.standard
-                }
-            }
-
             Behavior on scale {
                 Anim {
                     easing.bezierCurve: Appearance.anim.curves.standardDecel
diff --git a/modules/bar/components/workspaces/Workspace.qml b/modules/bar/components/workspaces/Workspace.qml
index 7f4bc68..fa5fe62 100644
--- a/modules/bar/components/workspaces/Workspace.qml
+++ b/modules/bar/components/workspaces/Workspace.qml
@@ -10,20 +10,19 @@ Item {
     id: root
 
     required property int index
-    required property bool vertical
     required property var occupied
     required property int groupOffset
 
     readonly property bool isWorkspace: true // Flag for finding workspace children
     // Unanimated prop for others to use as reference
-    readonly property real size: childrenRect[vertical ? "height" : "width"] + (hasWindows ? Appearance.padding.normal : 0)
+    readonly property real size: childrenRect.height + (hasWindows ? Appearance.padding.normal : 0)
 
     readonly property int ws: groupOffset + index + 1
     readonly property bool isOccupied: occupied[ws] ?? false
     readonly property bool hasWindows: isOccupied && BarConfig.workspaces.showWindows
 
-    Layout.preferredWidth: childrenRect.width + (hasWindows && !vertical ? Appearance.padding.normal : 0)
-    Layout.preferredHeight: childrenRect.height + (hasWindows && vertical ? Appearance.padding.normal : 0)
+    Layout.preferredWidth: childrenRect.width
+    Layout.preferredHeight: size
 
     StyledText {
         id: indicator
@@ -43,16 +42,25 @@ Item {
     }
 
     Loader {
+        id: windows
+
         active: BarConfig.workspaces.showWindows
         asynchronous: true
 
-        anchors.left: root.vertical ? undefined : indicator.right
-        anchors.top: root.vertical ? indicator.bottom : undefined
-        anchors.verticalCenter: root.vertical ? undefined : indicator.verticalCenter
-        anchors.horizontalCenter: root.vertical ? indicator.horizontalCenter : undefined
+        anchors.horizontalCenter: indicator.horizontalCenter
+        anchors.top: indicator.bottom
+
+        sourceComponent: Column {
+            spacing: Appearance.spacing.small
 
-        sourceComponent: Box {
-            vertical: root.vertical
+            add: Transition {
+                Anim {
+                    properties: "scale"
+                    from: 0
+                    to: 1
+                    easing.bezierCurve: Appearance.anim.curves.standardDecel
+                }
+            }
 
             Repeater {
                 model: ScriptModel {
diff --git a/modules/bar/components/workspaces/Workspaces.qml b/modules/bar/components/workspaces/Workspaces.qml
index 164698c..86392ec 100644
--- a/modules/bar/components/workspaces/Workspaces.qml
+++ b/modules/bar/components/workspaces/Workspaces.qml
@@ -4,12 +4,11 @@ import "root:/widgets"
 import "root:/services"
 import "root:/config"
 import QtQuick
+import QtQuick.Layouts
 
 Item {
     id: root
 
-    property alias vertical: layout.vertical
-
     readonly property list<Workspace> workspaces: layout.children.filter(c => c.isWorkspace).sort((w1, w2) => w1.ws - w2.ws)
     readonly property var occupied: Hyprland.workspaces.values.reduce((acc, curr) => {
         acc[curr.id] = curr.lastIpcObject.windows > 0;
@@ -20,7 +19,7 @@ Item {
     implicitWidth: layout.implicitWidth
     implicitHeight: layout.implicitHeight
 
-    BoxLayout {
+    ColumnLayout {
         id: layout
 
         spacing: 0
@@ -31,7 +30,6 @@ Item {
             model: BarConfig.workspaces.shown
 
             Workspace {
-                vertical: root.vertical
                 occupied: root.occupied
                 groupOffset: root.groupOffset
             }
@@ -46,7 +44,6 @@ Item {
         anchors.fill: parent
 
         sourceComponent: OccupiedBg {
-            vertical: root.vertical
             workspaces: root.workspaces
             occupied: root.occupied
             groupOffset: root.groupOffset
@@ -58,7 +55,6 @@ Item {
         asynchronous: true
 
         sourceComponent: ActiveIndicator {
-            vertical: root.vertical
             workspaces: root.workspaces
             mask: layout
             maskWidth: root.width