refactor: move active workspace indicator to new file

modules/bar/components/workspaces/ActiveIndicator.qml

@@ -0,0 +1,75 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import QtQuick
+import Qt5Compat.GraphicalEffects
+
+Rectangle {
+    id: root
+
+    required property bool vertical
+    required property list<Workspace> workspaces
+    required property Item mask
+    required property real maskWidth
+    required property real maskHeight
+
+    property int currentIdx: (Hyprland.activeWorkspace?.id ?? 1) - 1
+    property int lastIdx: currentIdx
+    property real leading: workspaces[currentIdx][vertical ? "y" : "x"]
+    property real trailing: workspaces[lastIdx][vertical ? "y" : "x"]
+    property real currentSize: workspaces[currentIdx][vertical ? "height" : "width"]
+    property real size: Math.abs(leading - trailing) + currentSize
+    property real offset: Math.min(leading, trailing)
+
+    clip: true
+    x: vertical ? 0 : offset
+    y: vertical ? offset : 0
+    width: vertical ? BarConfig.sizes.innerHeight : size
+    height: vertical ? size : BarConfig.sizes.innerHeight
+    color: Appearance.colours.mauve
+    radius: Appearance.rounding.full
+
+    anchors.horizontalCenter: vertical ? parent.horizontalCenter : undefined
+    anchors.verticalCenter: vertical ? undefined : parent.verticalCenter
+
+    Rectangle {
+        id: base
+
+        visible: false
+        anchors.fill: parent
+        color: Appearance.colours.base
+    }
+
+    OpacityMask {
+        source: base
+        maskSource: root.mask
+
+        x: root.vertical ? 0 : -parent.offset
+        y: root.vertical ? -parent.offset : 0
+        width: root.maskWidth
+        height: root.maskHeight
+
+        anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
+        anchors.verticalCenter: root.vertical ? undefined : parent.verticalCenter
+    }
+
+    Behavior on leading {
+        Anim {}
+    }
+
+    Behavior on trailing {
+        Anim {
+            duration: Appearance.anim.durations.normal * 2
+        }
+    }
+
+    Behavior on currentSize {
+        Anim {}
+    }
+
+    component Anim: NumberAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.emphasized
+    }
+}

modules/bar/components/workspaces/OccupiedBg.qml

@@ -7,9 +7,8 @@ BoxLayout {
     id: root
 
     required property bool vertical
-    required property list<StyledText> workspaces
+    required property list<Workspace> workspaces
     required property var occupied
-    required property BoxLayout layout
 
     anchors.centerIn: parent
     spacing: 0

modules/bar/components/workspaces/Workspace.qml

@@ -5,14 +5,16 @@ import QtQuick.Layouts
 
 StyledText {
     required property int index
-    required property BoxLayout layout
+    required property bool vertical
+    required property bool homogenous
     required property var occupied
+
     readonly property bool isWorkspace: true // Flag for finding workspace children
 
     text: index + 1
     color: BarConfig.workspaces.occupiedBg || occupied[index + 1] ? Appearance.colours.text : Appearance.colours.subtext0
     horizontalAlignment: StyledText.AlignHCenter
 
-    Layout.preferredWidth: layout.homogenous && !layout.vertical ? BarConfig.sizes.innerHeight : -1
+    Layout.preferredWidth: homogenous && !vertical ? BarConfig.sizes.innerHeight : -1
-    Layout.preferredHeight: layout.homogenous && layout.vertical ? BarConfig.sizes.innerHeight : -1
+    Layout.preferredHeight: homogenous && vertical ? BarConfig.sizes.innerHeight : -1
 }

modules/bar/components/workspaces/Workspaces.qml

@@ -1,11 +1,7 @@
-pragma ComponentBehavior: Bound
-
 import "root:/widgets"
 import "root:/services"
 import "root:/config"
 import QtQuick
-import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 
 Item {
     id: root
@@ -16,7 +12,7 @@ Item {
     property bool occupiedBg: false
     property bool showWindows: false
 
-    readonly property list<StyledText> workspaces: layout.children.filter(c => c.isWorkspace)
+    readonly property list<Workspace> workspaces: layout.children.filter(c => c.isWorkspace)
     readonly property var occupied: Hyprland.workspaces.values.reduce((acc, curr) => {
         acc[curr.id] = curr.lastIpcObject.windows > 0;
         return acc;
@@ -36,7 +32,8 @@ Item {
             model: BarConfig.workspaces.shown
 
             Workspace {
-                layout: layout
+                vertical: root.vertical
+                homogenous: true
                 occupied: root.occupied
             }
         }
@@ -47,15 +44,24 @@ Item {
         vertical: root.vertical
         workspaces: root.workspaces
         occupied: root.occupied
-        layout: layout
 
         Behavior on opacity {
-            Anim {
+            NumberAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
                 easing.bezierCurve: Appearance.anim.curves.standard
             }
         }
     }
 
+    ActiveIndicator {
+        vertical: root.vertical
+        workspaces: root.workspaces
+        mask: layout
+        maskWidth: root.width
+        maskHeight: root.height
+    }
+
     MouseArea {
         anchors.fill: parent
 
@@ -67,68 +73,4 @@ Item {
                 Hyprland.dispatch(`workspace r-1`);
         }
     }
-
-    Rectangle {
-        id: active
-
-        property int currentIdx: (Hyprland.activeWorkspace?.id ?? 1) - 1
-        property int lastIdx: currentIdx
-        property real leading: root.workspaces[currentIdx][root.vertical ? "y" : "x"]
-        property real trailing: root.workspaces[lastIdx][root.vertical ? "y" : "x"]
-        property real currentSize: root.workspaces[currentIdx][root.vertical ? "height" : "width"]
-        property real size: Math.abs(leading - trailing) + currentSize
-        property real offset: Math.min(leading, trailing)
-
-        clip: true
-        x: root.vertical ? 0 : offset
-        y: root.vertical ? offset : 0
-        width: root.vertical ? BarConfig.sizes.innerHeight : size
-        height: root.vertical ? size : BarConfig.sizes.innerHeight
-        color: Appearance.colours.mauve
-        radius: Appearance.rounding.full
-
-        anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
-        anchors.verticalCenter: root.vertical ? undefined : parent.verticalCenter
-
-        Rectangle {
-            id: base
-
-            visible: false
-            anchors.fill: parent
-            color: Appearance.colours.base
-        }
-
-        OpacityMask {
-            source: base
-            maskSource: layout
-
-            x: root.vertical ? 0 : -parent.offset
-            y: root.vertical ? -parent.offset : 0
-            width: root.width
-            height: root.height
-
-            anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
-            anchors.verticalCenter: root.vertical ? undefined : parent.verticalCenter
-        }
-
-        Behavior on leading {
-            Anim {}
-        }
-
-        Behavior on trailing {
-            Anim {
-                duration: Appearance.anim.durations.normal * 2
-            }
-        }
-
-        Behavior on currentSize {
-            Anim {}
-        }
-    }
-
-    component Anim: NumberAnimation {
-        duration: Appearance.anim.durations.normal
-        easing.type: Easing.BezierSpline
-        easing.bezierCurve: Appearance.anim.curves.emphasized
-    }
 }