Badge showing which monitor a workspace is on

[haydn-j-evans]

On multi-monitor, the workspace dots in the statusbar don't say which monitor they're actually showing on. Hyprland tracks one active workspace per monitor independent of keyboard focus, so on a dock/undock setup (laptop + external) it's easy to lose track of what's where without switching to it and looking.

Added a small badge to the corner of each dot showing the monitor - "L" for the built-in laptop panel, trailing digit for anything external (DP-1 -> "1", HDMI-A-2 -> "2") - driven off workspace.active / workspace.monitor. It's just a small addition on top of the existing dot rendering, not a rewrite.

Full WorkspacesModule.qml below in case it's useful to anyone else running multi-monitor.

import Quickshell.Hyprland
import QtQuick
import QtQuick.Layouts
import qs.CustomTheme

// Hyprland workspace switcher.
RowLayout {
    id: wsRoot
    spacing: 6

    // Minimum number of workspaces to always display, even when empty. The list
    // still grows beyond this to reveal any higher-numbered workspace that
    // exists (e.g. switching to workspace 6 while this is 5 adds a 6th dot).
    property int minWorkspaces: 5

    // The individual workspace buttons, exposed so StatusbarWindow can splice
    // them into its keyboard-navigation list. Rebuilt whenever workspaces are
    // added or removed.
    property var navButtons: []

    function rebuildNavButtons(): void {
        let a = []
        for (let i = 0; i < rep.count; i++)
            a.push(rep.itemAt(i))
        wsRoot.navButtons = a
    }

    // The workspace ids to render: 1..N, where N is at least minWorkspaces and
    // extends to cover the highest-numbered workspace that currently exists.
    readonly property var workspaceIds: {
        let maxId = Math.max(1, wsRoot.minWorkspaces)
        const list = Hyprland.workspaces.values
        for (let i = 0; i < list.length; i++)
            if (list[i].id > maxId)
                maxId = list[i].id
        let ids = []
        for (let id = 1; id <= maxId; id++)
            ids.push(id)
        return ids
    }

    // The live Hyprland workspace for an id, or null when it is empty (Hyprland
    // only tracks workspaces that hold windows or are focused).
    function workspaceById(id: int): var {
        const list = Hyprland.workspaces.values
        for (let i = 0; i < list.length; i++)
            if (list[i].id === id)
                return list[i]
        return null
    }

    // Short badge label for a monitor name: "L" for the built-in laptop
    // panel (eDP-*), otherwise the trailing digits of the port name
    // (DP-1 -> "1", HDMI-A-2 -> "2").
    function monitorLabel(name: string): string {
        if (name.startsWith("eDP"))
            return "L"
        const m = name.match(/(\d+)$/)
        return m ? m[1] : name
    }

    Repeater {
        id: rep
        model: wsRoot.workspaceIds

        onItemAdded: wsRoot.rebuildNavButtons()
        onItemRemoved: wsRoot.rebuildNavButtons()

        delegate: Rectangle {
            id: ws
            required property var modelData   // the workspace id (int)
            // Set by StatusbarWindow's keyboard navigation.
            property bool focused: false

            // Whether this workspace is the currently focused one.
            readonly property bool isActive: Hyprland.focusedWorkspace
                && Hyprland.focusedWorkspace.id === ws.modelData
            // The live workspace data, or null when this id doesn't exist yet.
            readonly property var wsData: wsRoot.workspaceById(ws.modelData)
            // Whether the workspace currently holds windows (exists in Hyprland).
            readonly property bool occupied: ws.wsData !== null
            // Monitor badge: shown when this workspace is the one currently
            // displayed on its monitor (Hyprland tracks one active workspace
            // per monitor, independent of which monitor has keyboard focus).
            readonly property string monitorTag: (ws.wsData && ws.wsData.active && ws.wsData.monitor)
                ? wsRoot.monitorLabel(ws.wsData.monitor.name)
                : ""

            // Run this workspace's action (mouse click or keyboard Return).
            // Hyprland with Lua dispatchers ignores the plain "workspace N"
            // string, so branch on usingLua the same way the overview does.
            function activate(): void {
                if (Hyprland.usingLua)
                    Hyprland.dispatch("hl.dsp.focus({workspace = '" + ws.modelData + "'})")
                else
                    Hyprland.dispatch("workspace " + ws.modelData)
            }

            implicitWidth: 26
            implicitHeight: 26
            radius: 13

            // Empty, unfocused workspaces are dimmed to set them apart from the
            // ones that hold windows.
            opacity: (ws.isActive || ws.occupied || wsMouse.containsMouse) ? 1 : 0.45
            Behavior on opacity {
                NumberAnimation { duration: 300; easing.type: Easing.OutQuint }
            }

            color: ws.isActive
                ? Theme.primary
                : (wsMouse.containsMouse ? Theme.surface_container_high : "transparent")
            border.color: Theme.primary
            border.width: ws.isActive ? 0 : 1

            // Crossfade the fill between active / hover / inactive states so the
            // background of the active circle fades in and the previous one out.
            Behavior on color {
                ColorAnimation { duration: 500; easing.type: Easing.OutQuint }
            }
            // Fade the outline in/out as the fill takes over on activation.
            Behavior on border.width {
                NumberAnimation { duration: 500; easing.type: Easing.OutQuint }
            }

            // Keyboard-selection ring, distinct from the active-workspace fill.
            Rectangle {
                anchors.fill: parent
                anchors.margins: -3
                radius: width / 2
                color: "transparent"
                border.color: Theme.primary
                border.width: 2
                opacity: ws.focused ? 1 : 0
                Behavior on opacity {
                    NumberAnimation { duration: 150 }
                }
            }

            Text {
                anchors.centerIn: parent
                text: ws.modelData
                color: ws.isActive ? Theme.background : Theme.on_background
                font.family: Theme.fontFamily
                font.pixelSize: 13
                font.bold: true

                // Match the fill crossfade so the label recolors in step.
                Behavior on color {
                    ColorAnimation { duration: 500; easing.type: Easing.OutQuint }
                }
            }

            // Monitor badge: which output currently shows this workspace.
            Rectangle {
                visible: ws.monitorTag !== ""
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                anchors.rightMargin: -2
                anchors.bottomMargin: -2
                implicitWidth: monitorTagText.implicitWidth + 6
                implicitHeight: 14
                radius: height / 2
                color: Theme.surface_container_high
                border.color: Theme.background
                border.width: 1

                Text {
                    id: monitorTagText
                    anchors.centerIn: parent
                    text: ws.monitorTag
                    color: Theme.on_background
                    font.family: Theme.fontFamily
                    font.pixelSize: 9
                    font.bold: true
                }
            }

            MouseArea {
                id: wsMouse
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                onClicked: ws.activate()
            }
        }
    }
}

[haydn-j-evans]

looks like this -