bar: use loaders

Use loaders for all optional components
e.g. workspace windows and occupied background
Fix bar preset loader usage
Fix occupied group
Change text on active ws colour
Tray no extension for paths (use qt auto resolution)

6 files changed, 45 insertions, 39 deletions

diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml
index ad1621c..c6761c7 100644
--- a/modules/bar/Bar.qml
+++ b/modules/bar/Bar.qml
@@ -39,14 +39,12 @@ Variants {
 
         Preset {
             presetName: "pills"
-
-            Pills {}
+            sourceComponent: Pills {}
         }
 
         Preset {
             presetName: "panel"
-
-            Panel {}
+            sourceComponent: Panel {}
         }
     }
 
diff --git a/modules/bar/components/TrayItem.qml b/modules/bar/components/TrayItem.qml
index b050e5d..1d418dc 100644
--- a/modules/bar/components/TrayItem.qml
+++ b/modules/bar/components/TrayItem.qml
@@ -38,7 +38,7 @@ MouseArea {
             let icon = root.modelData.icon;
             if (icon.includes("?path=")) {
                 const [name, path] = icon.split("?path=");
-                icon = `file://${path}/${name.slice(name.lastIndexOf("/") + 1)}.png`;
+                icon = `file://${path}/${name.slice(name.lastIndexOf("/") + 1)}`;
             }
             return icon;
         }
diff --git a/modules/bar/components/workspaces/ActiveIndicator.qml b/modules/bar/components/workspaces/ActiveIndicator.qml
index 4d9a0c4..0d1768f 100644
--- a/modules/bar/components/workspaces/ActiveIndicator.qml
+++ b/modules/bar/components/workspaces/ActiveIndicator.qml
@@ -36,7 +36,7 @@ Rectangle {
 
         visible: false
         anchors.fill: parent
-        color: Appearance.colours.m3inverseOnSurface
+        color: Appearance.on(root.color)
 
         Behavior on color {
             ColorAnimation {
diff --git a/modules/bar/components/workspaces/OccupiedBg.qml b/modules/bar/components/workspaces/OccupiedBg.qml
index 774e176..ccbc75f 100644
--- a/modules/bar/components/workspaces/OccupiedBg.qml
+++ b/modules/bar/components/workspaces/OccupiedBg.qml
@@ -38,10 +38,6 @@ Item {
             pills.splice(count, pills.length - count);
     }
 
-    anchors.fill: parent
-    opacity: BarConfig.workspaces.occupiedBg ? 1 : 0
-    z: -1
-
     Repeater {
         model: ScriptModel {
             values: root.pills.filter(p => p)
@@ -52,8 +48,8 @@ Item {
 
             required property var modelData
 
-            property Workspace start: root.workspaces[modelData.start - 1] ?? null
-            property Workspace end: root.workspaces[modelData.end - 1] ?? null
+            readonly property Workspace start: root.workspaces[modelData.start - 1 - root.groupOffset] ?? null
+            readonly property Workspace end: root.workspaces[modelData.end - 1 - root.groupOffset] ?? null
 
             color: Appearance.alpha(Appearance.colours.m3surfaceContainerHigh, true)
             radius: BarConfig.workspaces.rounded ? Appearance.rounding.full : 0
@@ -93,10 +89,6 @@ Item {
         }
     }
 
-    Behavior on opacity {
-        Anim {}
-    }
-
     component Anim: NumberAnimation {
         duration: Appearance.anim.durations.normal
         easing.type: Easing.BezierSpline
diff --git a/modules/bar/components/workspaces/Workspace.qml b/modules/bar/components/workspaces/Workspace.qml
index bd28f7a..a29e61b 100644
--- a/modules/bar/components/workspaces/Workspace.qml
+++ b/modules/bar/components/workspaces/Workspace.qml
@@ -16,14 +16,14 @@ Item {
 
     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"] + (shouldPad ? Appearance.padding.normal : 0)
+    readonly property real size: childrenRect[vertical ? "height" : "width"] + (hasWindows ? Appearance.padding.normal : 0)
 
     readonly property int ws: groupOffset + index + 1
     readonly property bool isOccupied: occupied[ws] ?? false
-    readonly property bool shouldPad: isOccupied && BarConfig.workspaces.showWindows
+    readonly property bool hasWindows: isOccupied && BarConfig.workspaces.showWindows
 
-    Layout.preferredWidth: childrenRect.width + (shouldPad && !vertical ? Appearance.padding.normal : 0)
-    Layout.preferredHeight: childrenRect.height + (shouldPad && vertical ? Appearance.padding.normal : 0)
+    Layout.preferredWidth: childrenRect.width + (hasWindows && !vertical ? Appearance.padding.normal : 0)
+    Layout.preferredHeight: childrenRect.height + (hasWindows && vertical ? Appearance.padding.normal : 0)
 
     StyledText {
         id: indicator
@@ -42,22 +42,30 @@ Item {
         height: BarConfig.sizes.innerHeight
     }
 
-    Box {
-        anchors.left: vertical ? undefined : indicator.right
-        anchors.top: vertical ? indicator.bottom : undefined
-        anchors.verticalCenter: vertical ? undefined : indicator.verticalCenter
-        anchors.horizontalCenter: vertical ? indicator.horizontalCenter : undefined
+    Loader {
+        active: BarConfig.workspaces.showWindows
+        asynchronous: true
 
-        Repeater {
-            model: ScriptModel {
-                values: BarConfig.workspaces.showWindows ? Hyprland.clients.filter(c => c.workspace?.id === root.ws) : []
-            }
+        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
+
+        sourceComponent: Box {
+            anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
+            anchors.verticalCenter: root.vertical ? undefined : parent.verticalCenter
+
+            Repeater {
+                model: ScriptModel {
+                    values: Hyprland.clients.filter(c => c.workspace?.id === root.ws)
+                }
 
-            MaterialIcon {
-                required property Hyprland.Client modelData
+                MaterialIcon {
+                    required property Hyprland.Client modelData
 
-                text: Icons.getAppCategoryIcon(modelData.wmClass, "terminal")
-                color: Appearance.colours.m3onSurfaceVariant
+                    text: Icons.getAppCategoryIcon(modelData.wmClass, "terminal")
+                    color: Appearance.colours.m3onSurfaceVariant
+                }
             }
         }
     }
diff --git a/modules/bar/components/workspaces/Workspaces.qml b/modules/bar/components/workspaces/Workspaces.qml
index 692ae32..e4ff787 100644
--- a/modules/bar/components/workspaces/Workspaces.qml
+++ b/modules/bar/components/workspaces/Workspaces.qml
@@ -9,7 +9,7 @@ Item {
     property alias vertical: layout.vertical
     property color colour: Appearance.colours.mauve
 
-    readonly property list<Workspace> workspaces: layout.children.filter(c => c.isWorkspace)
+    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;
         return acc;
@@ -35,11 +35,19 @@ Item {
         }
     }
 
-    OccupiedBg {
-        vertical: root.vertical
-        workspaces: root.workspaces
-        occupied: root.occupied
-        groupOffset: root.groupOffset
+    Loader {
+        active: BarConfig.workspaces.occupiedBg
+        asynchronous: true
+
+        z: -1
+        anchors.fill: parent
+
+        sourceComponent: OccupiedBg {
+            vertical: root.vertical
+            workspaces: root.workspaces
+            occupied: root.occupied
+            groupOffset: root.groupOffset
+        }
     }
 
     ActiveIndicator {