Quickbar/Workspaces.qml

import QtQuick
import QtQuick.Layouts
// Workspaces.qml
import Quickshell
import Quickshell.Hyprland
import Quickshell.Widgets
import qs.Common
import qs.Services

WrapperMouseArea {
    id: workspacesWidget
    
    property var monitor: "black"

    onWheel: (wheel) => {
        if (wheel.angleDelta.y > 0) {
            if ((Hyprland.focusedWorkspace.id) % 5 === 0)
                return ;

            Hyprland.dispatch("workspace " + (Hyprland.focusedWorkspace.id + 1));
        } else if (wheel.angleDelta.y < 0) {
            if (Hyprland.focusedWorkspace.id === 1 || Hyprland.focusedWorkspace.id === 6)
                return ;

            Hyprland.dispatch("workspace " + (Hyprland.focusedWorkspace.id - 1));
        }
    }

    RowLayout {

        property var monitor: workspacesWidget.monitor

        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter

        Repeater {

            property var monitor: parent.monitor

            model: 5

            delegate: Rectangle {
                id: workspacesRectangle

                required property var modelData
                property var index: modelData // Get the workspace data from the model
                property int workspaceIndex: parent.monitor === "DP-2" ? modelData + 5 : modelData
                property int workspaceIndexAlign: workspaceIndex+1
                property var workspace: Hyprland.workspaces.values.length > workspaceIndex ? Hyprland.workspaces.values[workspaceIndex] : null
                property var topLevels: HyprlandService.topLevelWorkspaces
                property bool workspaceActive: workspace === Hyprland.focusedWorkspace? true:false
                property var hasTopLevel: topLevels.filter(topLevelworkspace => topLevelworkspace.id === workspaceIndexAlign).length ? true:false

                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
                implicitHeight: Theme.heightGaps
                implicitWidth: workspaceActive? Theme.barSize* 1.5 : Theme.barSize
                radius: 25
                color: {
                    if (workspaceActive) {
                        return Theme.color6
                    } 
                    if (hasTopLevel) {
                        
                        return Theme.backgroudColorBright
                    }
                    return Theme.backgroudColor
                }

                PopupWindow {
                    id: workspacesPopUp

                    property int workspaceIndexAlign: workspacesRectangle.workspaceIndexAlign

                    anchor.item: workspacesRectangle
                    anchor.rect.y: workspacesRectangle.implicitHeight+5
                    anchor.rect.x: -implicitWidth/2 + workspacesRectangle.implicitWidth/2
                    implicitWidth: wsPopUp.implicitWidth
                    implicitHeight: wsPopUp.implicitHeight
                    color:"transparent"
                    WrapperRectangle {
                        id: wsPopUp

                        property int workspaceIndexAlign: workspacesPopUp.workspaceIndexAlign

                        leftMargin: Theme.gaps*2
                        rightMargin: Theme.gaps*2
                        topMargin: Theme.gaps
                        bottomMargin: Theme.gaps
                        color: Theme.backgroudColor
                        radius: 25

                        RowLayout {
                            id: wsPopUpRow

                            property int workspaceIndexAlign: parent.workspaceIndexAlign

                            anchors{
                                horizontalCenter:parent.horizontalCenter
                                verticalCenter:parent.verticalCenter
                            }
                            Repeater {

                                property var  modelo: HyprlandService.sortedDesktopApplications.get(parent.workspaceIndexAlign)

                                model: modelo
                                delegate: IconImage {

                                    required property var modelData

                                    width:30; height:30
                                    source: (modelData && modelData.icon) ? Quickshell.iconPath(modelData.icon, 1) : ""
                                }
                            }
                        }
                    }
                }
                Timer {
                    id: workspacesTimer

                    interval: 300
                    onTriggered: { workspacesPopUp.visible = true }
                }
                Text {

                    property int workspaceName: workspacesRectangle.workspaceIndexAlign > 5? workspacesRectangle.workspaceIndexAlign -5: workspacesRectangle.workspaceIndexAlign

                    anchors.centerIn: parent
                    text: workspaceName
                    font.bold: true
                    font.pixelSize: 14
                    font.family: Theme.fontFamily
                    color: Theme.textColor
                }

                MouseArea {
                    hoverEnabled: true
                    onEntered: {
                        if (parent.hasTopLevel) {
                            workspacesTimer.start()
                        }
                    }
                    onExited: {
                        workspacesTimer.stop()
                        workspacesPopUp.visible = false
                    }

                    anchors.fill: parent
                    onClicked: {
                        if(workspacesRectangle.workspace.id === Hyprland.focusedWorkspace.id) {return} ;
                        Hyprland.dispatch("workspace " + workspacesRectangle.workspace.id);
                    }
                }

                Behavior on implicitWidth {
                    NumberAnimation {
                        duration: 100 
                    }

                }

            }

        }

    }

}