wip

modules/bar/components/workspaces/ActiveIndicator.qml

@@ -0,0 +1,111 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import QtQuick
+import QtQuick.Effects
+
+StyledRect {
+    id: root
+
+    required property list<Workspace> workspaces
+    required property Item mask
+    required property real maskWidth
+    required property real maskHeight
+    required property int groupOffset
+
+    readonly property int currentWsIdx: Hyprland.activeWsId - 1 - groupOffset
+    property real leading: getWsY(currentWsIdx)
+    property real trailing: getWsY(currentWsIdx)
+    property real currentSize: workspaces[currentWsIdx]?.size ?? 0
+    property real offset: Math.min(leading, trailing)
+    property real size: {
+        const s = Math.abs(leading - trailing) + currentSize;
+        if (BarConfig.workspaces.activeTrail && lastWs > currentWsIdx)
+            return Math.min(getWsY(lastWs) + (workspaces[lastWs]?.size ?? 0) - offset, s);
+        return s;
+    }
+
+    property int cWs
+    property int lastWs
+
+    function getWsY(idx: int): real {
+        let y = 0;
+        for (let i = 0; i < idx; i++)
+            y += workspaces[i]?.size ?? 0;
+        return y;
+    }
+
+    onCurrentWsIdxChanged: {
+        lastWs = cWs;
+        cWs = currentWsIdx;
+    }
+
+    clip: true
+    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
+
+    StyledRect {
+        id: base
+
+        visible: false
+        anchors.fill: parent
+        color: Colours.palette.m3onPrimary
+    }
+
+    MultiEffect {
+        source: base
+        maskSource: root.mask
+        maskEnabled: true
+        maskSpreadAtMin: 1
+        maskThresholdMin: 0.5
+
+        x: 0
+        y: -parent.offset
+        implicitWidth: root.maskWidth
+        implicitHeight: root.maskHeight
+
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+
+    Behavior on leading {
+        enabled: BarConfig.workspaces.activeTrail
+
+        Anim {}
+    }
+
+    Behavior on trailing {
+        enabled: BarConfig.workspaces.activeTrail
+
+        Anim {
+            duration: Appearance.anim.durations.normal * 2
+        }
+    }
+
+    Behavior on currentSize {
+        enabled: BarConfig.workspaces.activeTrail
+
+        Anim {}
+    }
+
+    Behavior on offset {
+        enabled: !BarConfig.workspaces.activeTrail
+
+        Anim {}
+    }
+
+    Behavior on size {
+        enabled: !BarConfig.workspaces.activeTrail
+
+        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

@@ -0,0 +1,99 @@
+pragma ComponentBehavior: Bound
+
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import Quickshell
+import QtQuick
+
+Item {
+    id: root
+
+    required property list<Workspace> workspaces
+    required property var occupied
+    required property int groupOffset
+
+    property list<var> pills: []
+
+    onOccupiedChanged: {
+        let count = 0;
+        const start = groupOffset;
+        const end = start + BarConfig.workspaces.shown;
+        for (const [ws, occ] of Object.entries(occupied)) {
+            if (ws > start && ws <= end && occ) {
+                if (!occupied[ws - 1]) {
+                    if (pills[count])
+                        pills[count].start = ws;
+                    else
+                        pills.push(pillComp.createObject(root, {
+                            start: ws
+                        }));
+                    count++;
+                }
+                if (!occupied[ws + 1])
+                    pills[count - 1].end = ws;
+            }
+        }
+        if (pills.length > count)
+            pills.splice(count, pills.length - count).forEach(p => p.destroy());
+    }
+
+    Repeater {
+        model: ScriptModel {
+            values: root.pills.filter(p => p)
+        }
+
+        StyledRect {
+            id: rect
+
+            required property var modelData
+
+            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: Colours.alpha(Colours.palette.m3surfaceContainerHigh, true)
+            radius: BarConfig.workspaces.rounded ? Appearance.rounding.full : 0
+
+            x: start?.x ?? 0
+            y: start?.y ?? 0
+            implicitWidth: BarConfig.sizes.innerHeight
+            implicitHeight: end?.y + end?.height - start?.y
+
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            scale: 0
+            Component.onCompleted: scale = 1
+
+            Behavior on scale {
+                Anim {
+                    easing.bezierCurve: Appearance.anim.curves.standardDecel
+                }
+            }
+
+            Behavior on x {
+                Anim {}
+            }
+
+            Behavior on y {
+                Anim {}
+            }
+        }
+    }
+
+    component Anim: NumberAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.standard
+    }
+
+    component Pill: QtObject {
+        property int start
+        property int end
+    }
+
+    Component {
+        id: pillComp
+
+        Pill {}
+    }
+}

modules/bar/components/workspaces/Workspace.qml

@@ -0,0 +1,93 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/utils"
+import "root:/config"
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    required property int index
+    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.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
+    Layout.preferredHeight: size
+
+    StyledText {
+        id: indicator
+
+        readonly property string label: BarConfig.workspaces.label || root.ws
+        readonly property string occupiedLabel: BarConfig.workspaces.occupiedLabel || label
+        readonly property string activeLabel: BarConfig.workspaces.activeLabel || (root.isOccupied ? occupiedLabel : label)
+
+        animate: true
+        text: Hyprland.activeWsId === root.ws ? activeLabel : root.isOccupied ? occupiedLabel : label
+        color: BarConfig.workspaces.occupiedBg || root.isOccupied || Hyprland.activeWsId === root.ws ? Colours.palette.m3onSurface : Colours.palette.m3outlineVariant
+        horizontalAlignment: StyledText.AlignHCenter
+        verticalAlignment: StyledText.AlignVCenter
+
+        width: BarConfig.sizes.innerHeight
+        height: BarConfig.sizes.innerHeight
+    }
+
+    Loader {
+        id: windows
+
+        active: BarConfig.workspaces.showWindows
+        asynchronous: true
+
+        anchors.horizontalCenter: indicator.horizontalCenter
+        anchors.top: indicator.bottom
+
+        sourceComponent: Column {
+            spacing: Appearance.spacing.small
+
+            add: Transition {
+                Anim {
+                    properties: "scale"
+                    from: 0
+                    to: 1
+                    easing.bezierCurve: Appearance.anim.curves.standardDecel
+                }
+            }
+
+            Repeater {
+                model: ScriptModel {
+                    values: Hyprland.clients.filter(c => c.workspace?.id === root.ws)
+                }
+
+                MaterialIcon {
+                    required property Hyprland.Client modelData
+
+                    text: Icons.getAppCategoryIcon(modelData.wmClass, "terminal")
+                    color: Colours.palette.m3onSurfaceVariant
+                }
+            }
+        }
+    }
+
+    Behavior on Layout.preferredWidth {
+        Anim {}
+    }
+
+    Behavior on Layout.preferredHeight {
+        Anim {}
+    }
+
+    component Anim: NumberAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.standard
+    }
+}

modules/bar/components/workspaces/Workspaces.qml

@@ -0,0 +1,75 @@
+pragma ComponentBehavior: Bound
+
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    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;
+    }, {})
+    readonly property int groupOffset: Math.floor((Hyprland.activeWsId - 1) / BarConfig.workspaces.shown) * BarConfig.workspaces.shown
+
+    implicitWidth: layout.implicitWidth
+    implicitHeight: layout.implicitHeight
+
+    ColumnLayout {
+        id: layout
+
+        spacing: 0
+        layer.enabled: true
+        layer.smooth: true
+
+        Repeater {
+            model: BarConfig.workspaces.shown
+
+            Workspace {
+                occupied: root.occupied
+                groupOffset: root.groupOffset
+            }
+        }
+    }
+
+    Loader {
+        active: BarConfig.workspaces.occupiedBg
+        asynchronous: true
+
+        z: -1
+        anchors.fill: parent
+
+        sourceComponent: OccupiedBg {
+            workspaces: root.workspaces
+            occupied: root.occupied
+            groupOffset: root.groupOffset
+        }
+    }
+
+    Loader {
+        active: BarConfig.workspaces.activeIndicator
+        asynchronous: true
+
+        sourceComponent: ActiveIndicator {
+            workspaces: root.workspaces
+            mask: layout
+            maskWidth: root.width
+            maskHeight: root.height
+            groupOffset: root.groupOffset
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+
+        onPressed: event => {
+            const ws = layout.childAt(event.x, event.y).index + root.groupOffset + 1;
+            if (Hyprland.activeWsId !== ws)
+                Hyprland.dispatch(`workspace ${ws}`);
+        }
+    }
+}