quickshell-config/WorkspaceWidget.qml

// A workspace indicator.
// This is in big parts taken from outfoxxed, the creator of quickshell.
// Please make sure to check out his setup.
pragma ComponentBehavior: Bound
import QtQuick
import Quickshell.Hyprland

Rectangle {
    id: root
    required property var bar

    readonly property HyprlandMonitor monitor: Hyprland.monitorFor(bar.screen)

    // Amount of workspaces
    property int wsCount: 10
    // Base index for the workspaces
    property int wsBaseIndex: 1

    // index of the current workspace
    property int currentIndex: 0
    // count how many workspaces currently exist
    property int existsCount: 0

    implicitHeight: column.implicitHeight + 10

    width: parent.width
    height: width
    border.color: "black"
    color: "#30c0ffff"
    border.width: 2
    radius: 5

    // destructor takes care of nulling
    signal workspaceAdded(workspace: HyprlandWorkspace)

    Column {
        id: column
        spacing: 0
        anchors {
            fill: parent
            margins: 5
        }

        Repeater {
            model: root.wsCount

            Item {
                id: wsItem
                implicitHeight: 15

                anchors {
                    right: parent.right
                    left: parent.left
                }

                // index of the current workspace
                required property int index
                property int wsIndex: root.wsBaseIndex + index

                property HyprlandWorkspace workspace: null
                // check if workspace exists
                property bool exists: workspace != null

                property bool active: (root.monitor?.activeWorkspace ?? false) && root.monitor.activeWorkspace == workspace

                Connections {
                    target: root

                    function onWorkspaceAdded(workspace: HyprlandWorkspace) {
                        if (workspace.id == wsItem.wsIndex) {
                            wsItem.workspace = workspace;
                        }
                    }
                }

                property real animActive: active ? 1 : 0.65
                Behavior on animActive {
                    NumberAnimation {
                        duration: 150
                    }
                }

                property real animExists: exists ? 1 : 0
                Behavior on animExists {
                    NumberAnimation {
                        duration: 100
                    }
                }

                Rectangle {
                    anchors.centerIn: parent
                    height: wsItem.height - 5
                    width: parent.width * wsItem.animActive
                    radius: height / 2
                    border.color: "black"
                    border.width: 1
                    color: "black"
                }
            }
        }
    }

    Connections {
        target: Hyprland.workspaces

        function onObjectInsertedPost(workspace) {
            root.workspaceAdded(workspace);
        }
    }

    Component.onCompleted: {
        Hyprland.workspaces.values.forEach(workspace => {
            root.workspaceAdded(workspace);
        });
    }
}