switch hto monorepo structure

quickshell/Modules/Dock/Dock.qml

@@ -0,0 +1,397 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Widgets
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+pragma ComponentBehavior: Bound
+
+Variants {
+    id: dockVariants
+    model: SettingsData.getFilteredScreens("dock")
+
+    property var contextMenu
+
+    delegate: PanelWindow {
+        id: dock
+
+        WlrLayershell.namespace: "dms:dock"
+
+        readonly property bool isVertical: SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right
+
+        anchors {
+            top: !isVertical ? (SettingsData.dockPosition === SettingsData.Position.Top) : true
+            bottom: !isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom) : true
+            left: !isVertical ? true : (SettingsData.dockPosition === SettingsData.Position.Left)
+            right: !isVertical ? true : (SettingsData.dockPosition === SettingsData.Position.Right)
+        }
+
+        property var modelData: item
+    property bool autoHide: SettingsData.dockAutoHide
+    property real backgroundTransparency: SettingsData.dockTransparency
+    property bool groupByApp: SettingsData.dockGroupByApp
+
+    readonly property real widgetHeight: SettingsData.dockIconSize
+    readonly property real effectiveBarHeight: widgetHeight + SettingsData.dockSpacing * 2 + 10
+    readonly property real barSpacing: {
+        const barIsHorizontal = (SettingsData.dankBarPosition === SettingsData.Position.Top || SettingsData.dankBarPosition === SettingsData.Position.Bottom)
+        const barIsVertical = (SettingsData.dankBarPosition === SettingsData.Position.Left || SettingsData.dankBarPosition === SettingsData.Position.Right)
+        const samePosition = (SettingsData.dockPosition === SettingsData.dankBarPosition)
+        const dockIsHorizontal = !isVertical
+        const dockIsVertical = isVertical
+
+        if (!SettingsData.dankBarVisible) return 0
+        if (dockIsHorizontal && barIsHorizontal && samePosition) {
+            return SettingsData.dankBarSpacing + effectiveBarHeight + SettingsData.dankBarBottomGap
+        }
+        if (dockIsVertical && barIsVertical && samePosition) {
+            return SettingsData.dankBarSpacing + effectiveBarHeight + SettingsData.dankBarBottomGap
+        }
+        return 0
+    }
+
+    readonly property real dockMargin: SettingsData.dockSpacing
+    readonly property real positionSpacing: barSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin
+    readonly property real _dpr: (dock.screen && dock.screen.devicePixelRatio) ? dock.screen.devicePixelRatio : 1
+    function px(v) { return Math.round(v * _dpr) / _dpr }
+
+
+    property bool contextMenuOpen: (dockVariants.contextMenu && dockVariants.contextMenu.visible && dockVariants.contextMenu.screen === modelData)
+    property bool revealSticky: false
+
+    Timer {
+        id: revealHold
+        interval: 250
+        repeat: false
+        onTriggered: dock.revealSticky = false
+    }
+
+    property bool reveal: {
+        if (CompositorService.isNiri && NiriService.inOverview && SettingsData.dockOpenOnOverview) {
+            return true
+        }
+        return !autoHide || dockMouseArea.containsMouse || dockApps.requestDockShow || contextMenuOpen || revealSticky
+    }
+
+    onContextMenuOpenChanged: {
+        if (!contextMenuOpen && autoHide && !dockMouseArea.containsMouse) {
+            revealSticky = true
+            revealHold.restart()
+        }
+    }
+
+    Connections {
+        target: SettingsData
+        function onDockTransparencyChanged() {
+            dock.backgroundTransparency = SettingsData.dockTransparency
+        }
+    }
+
+    screen: modelData
+    visible: {
+        if (CompositorService.isNiri && NiriService.inOverview) {
+            return SettingsData.dockOpenOnOverview
+        }
+        return SettingsData.showDock
+    }
+    color: "transparent"
+
+
+    exclusiveZone: {
+        if (!SettingsData.showDock || autoHide) return -1
+        if (barSpacing > 0) return -1
+        return px(effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin)
+    }
+
+    property real animationHeadroom: Math.ceil(SettingsData.dockIconSize * 0.35)
+
+    implicitWidth: isVertical ? (px(effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin + SettingsData.dockIconSize * 0.3) + animationHeadroom) : 0
+    implicitHeight: !isVertical ? (px(effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin + SettingsData.dockIconSize * 0.3) + animationHeadroom) : 0
+
+    Item {
+        id: maskItem
+        parent: dock.contentItem
+        visible: false
+        x: {
+            const baseX = dockCore.x + dockMouseArea.x
+            if (isVertical && SettingsData.dockPosition === SettingsData.Position.Right) {
+                return baseX - animationHeadroom
+            }
+            return baseX
+        }
+        y: {
+            const baseY = dockCore.y + dockMouseArea.y
+            if (!isVertical && SettingsData.dockPosition === SettingsData.Position.Bottom) {
+                return baseY - animationHeadroom
+            }
+            return baseY
+        }
+        width: dockMouseArea.width + (isVertical ? animationHeadroom : 0)
+        height: dockMouseArea.height + (!isVertical ? animationHeadroom : 0)
+    }
+
+    mask: Region {
+        item: maskItem
+    }
+
+    property var hoveredButton: {
+        if (!dockApps.children[0]) {
+            return null
+        }
+        const layoutItem = dockApps.children[0]
+        const flowLayout = layoutItem.children[0]
+        let repeater = null
+        for (var i = 0; i < flowLayout.children.length; i++) {
+            const child = flowLayout.children[i]
+            if (child && typeof child.count !== "undefined" && typeof child.itemAt === "function") {
+                repeater = child
+                break
+            }
+        }
+        if (!repeater || !repeater.itemAt) {
+            return null
+        }
+        for (var i = 0; i < repeater.count; i++) {
+            const item = repeater.itemAt(i)
+            if (item && item.dockButton && item.dockButton.showTooltip) {
+                return item.dockButton
+            }
+        }
+        return null
+    }
+
+    DankTooltip {
+        id: dockTooltip
+        targetScreen: dock.screen
+    }
+
+    Timer {
+        id: tooltipRevealDelay
+        interval: 250
+        repeat: false
+        onTriggered: dock.showTooltipForHoveredButton()
+    }
+
+    function showTooltipForHoveredButton() {
+        dockTooltip.hide()
+        if (dock.hoveredButton && dock.reveal && !slideXAnimation.running && !slideYAnimation.running) {
+            const buttonGlobalPos = dock.hoveredButton.mapToGlobal(0, 0)
+            const tooltipText = dock.hoveredButton.tooltipText || ""
+            if (tooltipText) {
+                const screenX = dock.screen ? (dock.screen.x || 0) : 0
+                const screenY = dock.screen ? (dock.screen.y || 0) : 0
+                const screenHeight = dock.screen ? dock.screen.height : 0
+                if (!dock.isVertical) {
+                    const isBottom = SettingsData.dockPosition === SettingsData.Position.Bottom
+                    const globalX = buttonGlobalPos.x + dock.hoveredButton.width / 2
+                    const screenRelativeY = isBottom
+                        ? (screenHeight - dock.effectiveBarHeight - SettingsData.dockSpacing - SettingsData.dockBottomGap - SettingsData.dockMargin - 35)
+                        : (buttonGlobalPos.y - screenY + dock.hoveredButton.height + Theme.spacingS)
+                    dockTooltip.show(tooltipText,
+                                   globalX,
+                                   screenRelativeY,
+                                   dock.screen,
+                                   false, false)
+                } else {
+                    const isLeft = SettingsData.dockPosition === SettingsData.Position.Left
+                    const tooltipOffset = dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockMargin + Theme.spacingXS
+                    const tooltipX = isLeft ? tooltipOffset : (dock.screen.width - tooltipOffset)
+                    const screenRelativeY = buttonGlobalPos.y - screenY + dock.hoveredButton.height / 2
+                    dockTooltip.show(tooltipText,
+                                   screenX + tooltipX,
+                                   screenRelativeY,
+                                   dock.screen,
+                                   isLeft,
+                                   !isLeft)
+                }
+            }
+        }
+    }
+
+    Connections {
+        target: dock
+        function onRevealChanged() {
+            if (!dock.reveal) {
+                tooltipRevealDelay.stop()
+                dockTooltip.hide()
+            } else {
+                tooltipRevealDelay.restart()
+            }
+        }
+
+        function onHoveredButtonChanged() {
+            dock.showTooltipForHoveredButton()
+        }
+    }
+
+    Item {
+        id: dockCore
+        anchors.fill: parent
+        x: isVertical && SettingsData.dockPosition === SettingsData.Position.Right ? animationHeadroom : 0
+        y: !isVertical && SettingsData.dockPosition === SettingsData.Position.Bottom ? animationHeadroom : 0
+
+        Connections {
+            target: dockMouseArea
+            function onContainsMouseChanged() {
+                if (dockMouseArea.containsMouse) {
+                    dock.revealSticky = true
+                    revealHold.stop()
+                } else {
+                    if (dock.autoHide && !dock.contextMenuOpen) {
+                        revealHold.restart()
+                    }
+                }
+            }
+        }
+
+        MouseArea {
+            id: dockMouseArea
+            property real currentScreen: modelData ? modelData : dock.screen
+            property real screenWidth: currentScreen ? currentScreen.geometry.width : 1920
+            property real screenHeight: currentScreen ? currentScreen.geometry.height : 1080
+            property real maxDockWidth: screenWidth * 0.98
+            property real maxDockHeight: screenHeight * 0.98
+
+            height: {
+                if (dock.isVertical) {
+                    return dock.reveal ? Math.min(dockBackground.implicitHeight + 4, maxDockHeight) : Math.min(Math.max(dockBackground.implicitHeight + 64, 200), screenHeight * 0.5)
+                } else {
+                    return dock.reveal ? px(dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin) : 1
+                }
+            }
+            width: {
+                if (dock.isVertical) {
+                    return dock.reveal ? px(dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin) : 1
+                } else {
+                    return dock.reveal ? Math.min(dockBackground.implicitWidth + 4, maxDockWidth) : Math.min(Math.max(dockBackground.implicitWidth + 64, 200), screenWidth * 0.5)
+                }
+            }
+            anchors {
+                top: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? undefined : parent.top) : undefined
+                bottom: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? parent.bottom : undefined) : undefined
+                horizontalCenter: !dock.isVertical ? parent.horizontalCenter : undefined
+                left: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? undefined : parent.left) : undefined
+                right: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? parent.right : undefined) : undefined
+                verticalCenter: dock.isVertical ? parent.verticalCenter : undefined
+            }
+            hoverEnabled: true
+            acceptedButtons: Qt.NoButton
+
+            Behavior on height {
+                NumberAnimation {
+                    duration: Theme.shortDuration
+                    easing.type: Easing.OutCubic
+                }
+            }
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: Theme.shortDuration
+                    easing.type: Easing.OutCubic
+                }
+            }
+
+            Item {
+                id: dockContainer
+                anchors.fill: parent
+                clip: false
+
+                transform: Translate {
+                    id: dockSlide
+                    x: {
+                        if (!dock.isVertical) return 0
+                        if (dock.reveal) return 0
+                        const hideDistance = dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin + 10
+                        if (SettingsData.dockPosition === SettingsData.Position.Right) {
+                            return hideDistance
+                        } else {
+                            return -hideDistance
+                        }
+                    }
+                    y: {
+                        if (dock.isVertical) return 0
+                        if (dock.reveal) return 0
+                        const hideDistance = dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin + 10
+                        if (SettingsData.dockPosition === SettingsData.Position.Bottom) {
+                            return hideDistance
+                        } else {
+                            return -hideDistance
+                        }
+                    }
+
+                    Behavior on x {
+                        NumberAnimation {
+                            id: slideXAnimation
+                            duration: Theme.shortDuration
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+
+                    Behavior on y {
+                        NumberAnimation {
+                            id: slideYAnimation
+                            duration: Theme.shortDuration
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+                }
+
+                Item {
+                    id: dockBackground
+                    objectName: "dockBackground"
+                    anchors {
+                        top: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Top ? parent.top : undefined) : undefined
+                        bottom: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? parent.bottom : undefined) : undefined
+                        horizontalCenter: !dock.isVertical ? parent.horizontalCenter : undefined
+                        left: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Left ? parent.left : undefined) : undefined
+                        right: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? parent.right : undefined) : undefined
+                        verticalCenter: dock.isVertical ? parent.verticalCenter : undefined
+                    }
+                    anchors.topMargin: !dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Top ? barSpacing + SettingsData.dockMargin + 1 : 0
+                    anchors.bottomMargin: !dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Bottom ? barSpacing + SettingsData.dockMargin + 1 : 0
+                    anchors.leftMargin: dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Left ? barSpacing + SettingsData.dockMargin + 1 : 0
+                    anchors.rightMargin: dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Right ? barSpacing + SettingsData.dockMargin + 1 : 0
+
+                    implicitWidth: dock.isVertical ? (dockApps.implicitHeight + SettingsData.dockSpacing * 2) : (dockApps.implicitWidth + SettingsData.dockSpacing * 2)
+                    implicitHeight: dock.isVertical ? (dockApps.implicitWidth + SettingsData.dockSpacing * 2) : (dockApps.implicitHeight + SettingsData.dockSpacing * 2)
+                    width: implicitWidth
+                    height: implicitHeight
+
+                    layer.enabled: true
+                    clip: false
+
+                    DankRectangle {
+                        anchors.fill: parent
+                        color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, backgroundTransparency)
+                        overlayColor: Qt.rgba(Theme.surfaceTint.r, Theme.surfaceTint.g, Theme.surfaceTint.b, 0.04)
+                    }
+                }
+
+                DockApps {
+                    id: dockApps
+
+                    anchors.top: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Top ? dockBackground.top : undefined) : undefined
+                    anchors.bottom: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? dockBackground.bottom : undefined) : undefined
+                    anchors.horizontalCenter: !dock.isVertical ? dockBackground.horizontalCenter : undefined
+                    anchors.left: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Left ? dockBackground.left : undefined) : undefined
+                    anchors.right: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? dockBackground.right : undefined) : undefined
+                    anchors.verticalCenter: dock.isVertical ? dockBackground.verticalCenter : undefined
+                    anchors.topMargin: !dock.isVertical ? SettingsData.dockSpacing : 0
+                    anchors.bottomMargin: !dock.isVertical ? SettingsData.dockSpacing : 0
+                    anchors.leftMargin: dock.isVertical ? SettingsData.dockSpacing : 0
+                    anchors.rightMargin: dock.isVertical ? SettingsData.dockSpacing : 0
+
+                    contextMenu: dockVariants.contextMenu
+                    groupByApp: dock.groupByApp
+                    isVertical: dock.isVertical
+                    dockScreen: dock.screen
+                    iconSize: dock.widgetHeight
+                }
+            }
+        }
+        }
+    }
+}

quickshell/Modules/Dock/DockAppButton.qml

@@ -0,0 +1,534 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import Quickshell.Widgets
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    clip: false
+    property var appData
+    property var contextMenu: null
+    property var dockApps: null
+    property int index: -1
+    property var parentDockScreen: null
+    property bool longPressing: false
+    property bool dragging: false
+    property point dragStartPos: Qt.point(0, 0)
+    property point dragOffset: Qt.point(0, 0)
+    property int targetIndex: -1
+    property int originalIndex: -1
+    property bool showWindowTitle: false
+    property string windowTitle: ""
+    property bool isHovered: mouseArea.containsMouse && !dragging
+    property bool showTooltip: mouseArea.containsMouse && !dragging
+    property var cachedDesktopEntry: null
+    property real actualIconSize: 40
+
+    function updateDesktopEntry() {
+        if (!appData || appData.appId === "__SEPARATOR__") {
+            cachedDesktopEntry = null
+            return
+        }
+        const moddedId = Paths.moddedAppId(appData.appId)
+        cachedDesktopEntry = DesktopEntries.heuristicLookup(moddedId)
+    }
+
+    Component.onCompleted: updateDesktopEntry()
+
+    onAppDataChanged: updateDesktopEntry()
+
+    Connections {
+        target: DesktopEntries
+        function onApplicationsChanged() {
+            updateDesktopEntry()
+        }
+    }
+    property bool isWindowFocused: {
+        if (!appData) {
+            return false
+        }
+
+        if (appData.type === "window") {
+            const toplevel = getToplevelObject()
+            if (!toplevel) {
+                return false
+            }
+            return toplevel.activated
+        } else if (appData.type === "grouped") {
+            // For grouped apps, check if any window is focused
+            const allToplevels = ToplevelManager.toplevels.values
+            for (let i = 0; i < allToplevels.length; i++) {
+                const toplevel = allToplevels[i]
+                if (toplevel.appId === appData.appId && toplevel.activated) {
+                    return true
+                }
+            }
+        }
+
+        return false
+    }
+    property string tooltipText: {
+        if (!appData) {
+            return ""
+        }
+
+        if ((appData.type === "window" && showWindowTitle) || (appData.type === "grouped" && appData.windowTitle)) {
+            const appName = cachedDesktopEntry && cachedDesktopEntry.name ? cachedDesktopEntry.name : appData.appId
+            const title = appData.type === "window" ? windowTitle : appData.windowTitle
+            return appName + (title ? " • " + title : "")
+        }
+
+        if (!appData.appId) {
+            return ""
+        }
+
+        return cachedDesktopEntry && cachedDesktopEntry.name ? cachedDesktopEntry.name : appData.appId
+    }
+
+    function getToplevelObject() {
+        return appData?.toplevel || null
+    }
+
+    function getGroupedToplevels() {
+        return appData?.allWindows?.map(w => w.toplevel).filter(t => t !== null) || []
+    }
+    onIsHoveredChanged: {
+        if (mouseArea.pressed) return
+
+        if (isHovered) {
+            exitAnimation.stop()
+            if (!bounceAnimation.running) {
+                bounceAnimation.restart()
+            }
+        } else {
+            bounceAnimation.stop()
+            exitAnimation.restart()
+        }
+    }
+
+    readonly property bool animateX: SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right
+    readonly property real animationDistance: actualIconSize
+    readonly property real animationDirection: {
+        if (SettingsData.dockPosition === SettingsData.Position.Bottom) return -1
+        if (SettingsData.dockPosition === SettingsData.Position.Top) return 1
+        if (SettingsData.dockPosition === SettingsData.Position.Right) return -1
+        if (SettingsData.dockPosition === SettingsData.Position.Left) return 1
+        return -1
+    }
+
+    SequentialAnimation {
+        id: bounceAnimation
+
+        running: false
+
+        NumberAnimation {
+            target: iconTransform
+            property: animateX ? "x" : "y"
+            to: animationDirection * animationDistance * 0.25
+            duration: Anims.durShort
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Anims.emphasizedAccel
+        }
+
+        NumberAnimation {
+            target: iconTransform
+            property: animateX ? "x" : "y"
+            to: animationDirection * animationDistance * 0.2
+            duration: Anims.durShort
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Anims.emphasizedDecel
+        }
+    }
+
+    NumberAnimation {
+        id: exitAnimation
+
+        running: false
+        target: iconTransform
+        property: animateX ? "x" : "y"
+        to: 0
+        duration: Anims.durShort
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Anims.emphasizedDecel
+    }
+
+    Timer {
+        id: longPressTimer
+
+        interval: 500
+        repeat: false
+        onTriggered: {
+            if (appData && appData.isPinned) {
+                longPressing = true
+            }
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        enabled: true
+        preventStealing: true
+        cursorShape: longPressing ? Qt.DragMoveCursor : Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+        onPressed: mouse => {
+                       if (mouse.button === Qt.LeftButton && appData && appData.isPinned) {
+                           dragStartPos = Qt.point(mouse.x, mouse.y)
+                           longPressTimer.start()
+                       }
+                   }
+        onReleased: mouse => {
+                        longPressTimer.stop()
+                        if (longPressing) {
+                            if (dragging && targetIndex >= 0 && targetIndex !== originalIndex && dockApps) {
+                                dockApps.movePinnedApp(originalIndex, targetIndex)
+                            }
+
+                            longPressing = false
+                            dragging = false
+                            dragOffset = Qt.point(0, 0)
+                            targetIndex = -1
+                            originalIndex = -1
+                        }
+                    }
+        onPositionChanged: mouse => {
+                               if (longPressing && !dragging) {
+                                   const distance = Math.sqrt(Math.pow(mouse.x - dragStartPos.x, 2) + Math.pow(mouse.y - dragStartPos.y, 2))
+                                   if (distance > 5) {
+                                       dragging = true
+                                       targetIndex = index
+                                       originalIndex = index
+                                   }
+                               }
+                               if (dragging) {
+                                   dragOffset = Qt.point(mouse.x - dragStartPos.x, mouse.y - dragStartPos.y)
+                                   if (dockApps) {
+                                       const threshold = actualIconSize
+                                       let newTargetIndex = targetIndex
+                                       if (dragOffset.x > threshold && targetIndex < dockApps.pinnedAppCount - 1) {
+                                           newTargetIndex = targetIndex + 1
+                                       } else if (dragOffset.x < -threshold && targetIndex > 0) {
+                                           newTargetIndex = targetIndex - 1
+                                       }
+                                       if (newTargetIndex !== targetIndex) {
+                                           targetIndex = newTargetIndex
+                                           dragStartPos = Qt.point(mouse.x, mouse.y)
+                                       }
+                                   }
+                               }
+                           }
+        onClicked: mouse => {
+                       if (!appData || longPressing) {
+                           return
+                       }
+
+                       if (mouse.button === Qt.LeftButton) {
+                           if (appData.type === "pinned") {
+                               if (appData && appData.appId) {
+                                   const desktopEntry = cachedDesktopEntry
+                                   if (desktopEntry) {
+                                       AppUsageHistoryData.addAppUsage({
+                                                                           "id": appData.appId,
+                                                                           "name": desktopEntry.name || appData.appId,
+                                                                           "icon": desktopEntry.icon || "",
+                                                                           "exec": desktopEntry.exec || "",
+                                                                           "comment": desktopEntry.comment || ""
+                                                                       })
+                                   }
+                                   SessionService.launchDesktopEntry(desktopEntry)
+                               }
+                           } else if (appData.type === "window") {
+                               const toplevel = getToplevelObject()
+                               if (toplevel) {
+                                   toplevel.activate()
+                               }
+                           } else if (appData.type === "grouped") {
+                               if (appData.windowCount === 0) {
+                                   if (appData && appData.appId) {
+                                       const desktopEntry = cachedDesktopEntry
+                                       if (desktopEntry) {
+                                           AppUsageHistoryData.addAppUsage({
+                                                                               "id": appData.appId,
+                                                                               "name": desktopEntry.name || appData.appId,
+                                                                               "icon": desktopEntry.icon || "",
+                                                                               "exec": desktopEntry.exec || "",
+                                                                               "comment": desktopEntry.comment || ""
+                                                                           })
+                                       }
+                                       SessionService.launchDesktopEntry(desktopEntry)
+                                   }
+                               } else if (appData.windowCount === 1) {
+                                   // For single window, activate directly
+                                   const toplevel = getToplevelObject()
+                                   if (toplevel) {
+                                       console.log("Activating grouped app window:", appData.windowTitle)
+                                       toplevel.activate()
+                                   } else {
+                                       console.warn("No toplevel found for grouped app")
+                                   }
+                               } else {
+                                   if (contextMenu) {
+                                       contextMenu.showForButton(root, appData, root.height + 25, true, cachedDesktopEntry, parentDockScreen)
+                                   }
+                               }
+                           }
+                       } else if (mouse.button === Qt.MiddleButton) {
+                           if (appData?.type === "window") {
+                               appData?.toplevel?.close()
+                           } else if (appData?.type === "grouped") {
+                               if (contextMenu) {
+                                   contextMenu.showForButton(root, appData, root.height, false, cachedDesktopEntry, parentDockScreen)
+                               }
+                           } else if (appData && appData.appId) {
+                               const desktopEntry = cachedDesktopEntry
+                               if (desktopEntry) {
+                                   AppUsageHistoryData.addAppUsage({
+                                                                       "id": appData.appId,
+                                                                       "name": desktopEntry.name || appData.appId,
+                                                                       "icon": desktopEntry.icon || "",
+                                                                       "exec": desktopEntry.exec || "",
+                                                                       "comment": desktopEntry.comment || ""
+                                                                   })
+                               }
+                               SessionService.launchDesktopEntry(desktopEntry)
+                           }
+                       } else if (mouse.button === Qt.RightButton) {
+                           if (contextMenu && appData) {
+                               contextMenu.showForButton(root, appData, root.height, false, cachedDesktopEntry, parentDockScreen)
+                           } else {
+                               console.warn("No context menu or appData available")
+                           }
+                       }
+                   }
+    }
+
+    Item {
+        id: visualContent
+        anchors.fill: parent
+
+        transform: Translate {
+            id: iconTransform
+            x: 0
+            y: 0
+        }
+
+        Rectangle {
+            anchors.fill: parent
+            radius: Theme.cornerRadius
+            color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
+            border.width: 2
+            border.color: Theme.primary
+            visible: dragging
+            z: -1
+        }
+
+        IconImage {
+            id: iconImg
+
+            anchors.centerIn: parent
+            implicitSize: actualIconSize
+            source: {
+                if (appData.appId === "__SEPARATOR__") {
+                    return ""
+                }
+                const moddedId = Paths.moddedAppId(appData.appId)
+                if (moddedId.toLowerCase().includes("steam_app")) {
+                    return ""
+                }
+                return cachedDesktopEntry && cachedDesktopEntry.icon ? Quickshell.iconPath(cachedDesktopEntry.icon, true) : ""
+            }
+            mipmap: true
+            smooth: true
+            asynchronous: true
+            visible: status === Image.Ready
+        }
+
+        DankIcon {
+            anchors.centerIn: parent
+            size: actualIconSize
+            name: "sports_esports"
+            color: Theme.surfaceText
+            visible: {
+                if (!appData || !appData.appId || appData.appId === "__SEPARATOR__") {
+                    return false
+                }
+                const moddedId = Paths.moddedAppId(appData.appId)
+                return moddedId.toLowerCase().includes("steam_app")
+            }
+        }
+
+        Rectangle {
+            width: actualIconSize
+            height: actualIconSize
+            anchors.centerIn: parent
+            visible: iconImg.status !== Image.Ready
+            color: Theme.surfaceLight
+            radius: Theme.cornerRadius
+            border.width: 1
+            border.color: Theme.primarySelected
+
+            Text {
+                anchors.centerIn: parent
+                text: {
+                    if (!appData || !appData.appId) {
+                        return "?"
+                    }
+
+                    const desktopEntry = cachedDesktopEntry
+                    if (desktopEntry && desktopEntry.name) {
+                        return desktopEntry.name.charAt(0).toUpperCase()
+                    }
+
+                    return appData.appId.charAt(0).toUpperCase()
+                }
+                font.pixelSize: Math.max(8, parent.width * 0.35)
+                color: Theme.primary
+                font.weight: Font.Bold
+            }
+        }
+
+        Loader {
+            anchors.horizontalCenter: SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right ? undefined : parent.horizontalCenter
+            anchors.verticalCenter: SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right ? parent.verticalCenter : undefined
+            anchors.bottom: SettingsData.dockPosition === SettingsData.Position.Bottom ? parent.bottom : undefined
+            anchors.top: SettingsData.dockPosition === SettingsData.Position.Top ? parent.top : undefined
+            anchors.left: SettingsData.dockPosition === SettingsData.Position.Left ? parent.left : undefined
+            anchors.right: SettingsData.dockPosition === SettingsData.Position.Right ? parent.right : undefined
+            anchors.bottomMargin: SettingsData.dockPosition === SettingsData.Position.Bottom ? -(SettingsData.dockSpacing / 2) : 0
+            anchors.topMargin: SettingsData.dockPosition === SettingsData.Position.Top ? -(SettingsData.dockSpacing / 2) : 0
+            anchors.leftMargin: SettingsData.dockPosition === SettingsData.Position.Left ? -(SettingsData.dockSpacing / 2) : 0
+            anchors.rightMargin: SettingsData.dockPosition === SettingsData.Position.Right ? -(SettingsData.dockSpacing / 2) : 0
+
+            sourceComponent: SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right ? columnIndicator : rowIndicator
+
+            visible: {
+                if (!appData) return false
+                if (appData.type === "window") return true
+                if (appData.type === "grouped") return appData.windowCount > 0
+                return appData.isRunning
+            }
+        }
+    }
+
+    Component {
+        id: rowIndicator
+
+        Row {
+            spacing: 2
+
+            Repeater {
+                model: {
+                    if (!appData) return 0
+                    if (appData.type === "grouped") {
+                        return Math.min(appData.windowCount, 4)
+                    } else if (appData.type === "window" || appData.isRunning) {
+                        return 1
+                    }
+                    return 0
+                }
+
+                Rectangle {
+                    width: {
+                        if (SettingsData.dockIndicatorStyle === "circle") {
+                            return Math.max(4, actualIconSize * 0.1)
+                        }
+                        return appData && appData.type === "grouped" && appData.windowCount > 1 ? Math.max(3, actualIconSize * 0.1) : Math.max(6, actualIconSize * 0.2)
+                    }
+                    height: {
+                        if (SettingsData.dockIndicatorStyle === "circle") {
+                            return Math.max(4, actualIconSize * 0.1)
+                        }
+                        return Math.max(2, actualIconSize * 0.05)
+                    }
+                    radius: SettingsData.dockIndicatorStyle === "circle" ? width / 2 : Theme.cornerRadius
+                    color: {
+                        if (!appData) {
+                            return "transparent"
+                        }
+
+                        if (appData.type !== "grouped" || appData.windowCount === 1) {
+                            if (isWindowFocused) {
+                                return Theme.primary
+                            }
+                            return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                        }
+
+                        if (appData.type === "grouped" && appData.windowCount > 1) {
+                            const groupToplevels = getGroupedToplevels()
+                            if (index < groupToplevels.length && groupToplevels[index].activated) {
+                                return Theme.primary
+                            }
+                        }
+
+                        return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: columnIndicator
+
+        Column {
+            spacing: 2
+
+            Repeater {
+                model: {
+                    if (!appData) return 0
+                    if (appData.type === "grouped") {
+                        return Math.min(appData.windowCount, 4)
+                    } else if (appData.type === "window" || appData.isRunning) {
+                        return 1
+                    }
+                    return 0
+                }
+
+                Rectangle {
+                    width: {
+                        if (SettingsData.dockIndicatorStyle === "circle") {
+                            return Math.max(4, actualIconSize * 0.1)
+                        }
+                        return Math.max(2, actualIconSize * 0.05)
+                    }
+                    height: {
+                        if (SettingsData.dockIndicatorStyle === "circle") {
+                            return Math.max(4, actualIconSize * 0.1)
+                        }
+                        return appData && appData.type === "grouped" && appData.windowCount > 1 ? Math.max(3, actualIconSize * 0.1) : Math.max(6, actualIconSize * 0.2)
+                    }
+                    radius: SettingsData.dockIndicatorStyle === "circle" ? width / 2 : Theme.cornerRadius
+                    color: {
+                        if (!appData) {
+                            return "transparent"
+                        }
+
+                        if (appData.type !== "grouped" || appData.windowCount === 1) {
+                            if (isWindowFocused) {
+                                return Theme.primary
+                            }
+                            return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                        }
+
+                        if (appData.type === "grouped" && appData.windowCount > 1) {
+                            const groupToplevels = getGroupedToplevels()
+                            if (index < groupToplevels.length && groupToplevels[index].activated) {
+                                return Theme.primary
+                            }
+                        }
+
+                        return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                    }
+                }
+            }
+        }
+    }
+}

quickshell/Modules/Dock/DockApps.qml

@@ -0,0 +1,251 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property var contextMenu: null
+    property bool requestDockShow: false
+    property int pinnedAppCount: 0
+    property bool groupByApp: false
+    property bool isVertical: false
+    property var dockScreen: null
+    property real iconSize: 40
+
+    clip: false
+    implicitWidth: isVertical ? appLayout.height : appLayout.width
+    implicitHeight: isVertical ? appLayout.width : appLayout.height
+
+    function movePinnedApp(fromIndex, toIndex) {
+        if (fromIndex === toIndex) {
+            return
+        }
+
+        const currentPinned = [...(SessionData.pinnedApps || [])]
+        if (fromIndex < 0 || fromIndex >= currentPinned.length || toIndex < 0 || toIndex >= currentPinned.length) {
+            return
+        }
+
+        const movedApp = currentPinned.splice(fromIndex, 1)[0]
+        currentPinned.splice(toIndex, 0, movedApp)
+
+        SessionData.setPinnedApps(currentPinned)
+    }
+
+    Item {
+        id: appLayout
+        width: layoutFlow.width
+        height: layoutFlow.height
+        anchors.horizontalCenter: root.isVertical ? undefined : parent.horizontalCenter
+        anchors.verticalCenter: root.isVertical ? parent.verticalCenter : undefined
+        anchors.left: root.isVertical && SettingsData.dockPosition === SettingsData.Position.Left ? parent.left : undefined
+        anchors.right: root.isVertical && SettingsData.dockPosition === SettingsData.Position.Right ? parent.right : undefined
+        anchors.top: root.isVertical ? undefined : parent.top
+
+        Flow {
+            id: layoutFlow
+            flow: root.isVertical ? Flow.TopToBottom : Flow.LeftToRight
+            spacing: Math.min(8, Math.max(4, root.iconSize * 0.08))
+
+        Repeater {
+            id: repeater
+
+            property var dockItems: []
+
+            model: ScriptModel {
+                values: repeater.dockItems
+                objectProp: "uniqueKey"
+            }
+
+            Component.onCompleted: updateModel()
+
+            function updateModel() {
+                const items = []
+                const pinnedApps = [...(SessionData.pinnedApps || [])]
+                const sortedToplevels = CompositorService.sortedToplevels
+
+                if (root.groupByApp) {
+                    const appGroups = new Map()
+
+                    pinnedApps.forEach(appId => {
+                        appGroups.set(appId, {
+                            appId: appId,
+                            isPinned: true,
+                            windows: []
+                        })
+                    })
+
+                    sortedToplevels.forEach((toplevel, index) => {
+                        const appId = toplevel.appId || "unknown"
+                        if (!appGroups.has(appId)) {
+                            appGroups.set(appId, {
+                                appId: appId,
+                                isPinned: false,
+                                windows: []
+                            })
+                        }
+
+                        appGroups.get(appId).windows.push({
+                            toplevel: toplevel,
+                            index: index
+                        })
+                    })
+
+                    const pinnedGroups = []
+                    const unpinnedGroups = []
+
+                    Array.from(appGroups.entries()).forEach(([appId, group]) => {
+                        const firstWindow = group.windows.length > 0 ? group.windows[0] : null
+
+                        const item = {
+                            uniqueKey: "grouped_" + appId,
+                            type: "grouped",
+                            appId: appId,
+                            toplevel: firstWindow ? firstWindow.toplevel : null,
+                            isPinned: group.isPinned,
+                            isRunning: group.windows.length > 0,
+                            windowCount: group.windows.length,
+                            allWindows: group.windows
+                        }
+
+                        if (group.isPinned) {
+                            pinnedGroups.push(item)
+                        } else {
+                            unpinnedGroups.push(item)
+                        }
+                    })
+
+                    pinnedGroups.forEach(item => items.push(item))
+
+                    if (pinnedGroups.length > 0 && unpinnedGroups.length > 0) {
+                        items.push({
+                            uniqueKey: "separator_grouped",
+                            type: "separator",
+                            appId: "__SEPARATOR__",
+                            toplevel: null,
+                            isPinned: false,
+                            isRunning: false
+                        })
+                    }
+
+                    unpinnedGroups.forEach(item => items.push(item))
+                    root.pinnedAppCount = pinnedGroups.length
+                } else {
+                    pinnedApps.forEach(appId => {
+                        items.push({
+                            uniqueKey: "pinned_" + appId,
+                            type: "pinned",
+                            appId: appId,
+                            toplevel: null,
+                            isPinned: true,
+                            isRunning: false
+                        })
+                    })
+
+                    root.pinnedAppCount = pinnedApps.length
+
+                    if (pinnedApps.length > 0 && sortedToplevels.length > 0) {
+                        items.push({
+                            uniqueKey: "separator_ungrouped",
+                            type: "separator",
+                            appId: "__SEPARATOR__",
+                            toplevel: null,
+                            isPinned: false,
+                            isRunning: false
+                        })
+                    }
+
+                    sortedToplevels.forEach((toplevel, index) => {
+                        let uniqueKey = "window_" + index
+                        if (CompositorService.isHyprland && Hyprland.toplevels) {
+                            const hyprlandToplevels = Array.from(Hyprland.toplevels.values)
+                            for (let i = 0; i < hyprlandToplevels.length; i++) {
+                                if (hyprlandToplevels[i].wayland === toplevel) {
+                                    uniqueKey = "window_" + hyprlandToplevels[i].address
+                                    break
+                                }
+                            }
+                        }
+
+                        items.push({
+                            uniqueKey: uniqueKey,
+                            type: "window",
+                            appId: toplevel.appId,
+                            toplevel: toplevel,
+                            isPinned: false,
+                            isRunning: true
+                        })
+                    })
+                }
+
+                dockItems = items
+            }
+
+            delegate: Item {
+                id: delegateItem
+                property alias dockButton: button
+                property var itemData: modelData
+                clip: false
+
+                width: itemData.type === "separator" ? (root.isVertical ? root.iconSize : 8) : (root.isVertical ? root.iconSize : root.iconSize * 1.2)
+                height: itemData.type === "separator" ? (root.isVertical ? 8 : root.iconSize) : (root.isVertical ? root.iconSize * 1.2 : root.iconSize)
+
+                Rectangle {
+                    visible: itemData.type === "separator"
+                    width: root.isVertical ? root.iconSize * 0.5 : 2
+                    height: root.isVertical ? 2 : root.iconSize * 0.5
+                    color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+                    radius: 1
+                    anchors.centerIn: parent
+                }
+
+                DockAppButton {
+                    id: button
+                    visible: itemData.type !== "separator"
+                    anchors.centerIn: parent
+
+                    width: delegateItem.width
+                    height: delegateItem.height
+                    actualIconSize: root.iconSize
+
+                    appData: itemData
+                    contextMenu: root.contextMenu
+                    dockApps: root
+                    index: model.index
+                    parentDockScreen: root.dockScreen
+
+                    showWindowTitle: itemData?.type === "window" || itemData?.type === "grouped"
+                    windowTitle: {
+                        const title = itemData?.toplevel?.title || "(Unnamed)"
+                        return title.length > 50 ? title.substring(0, 47) + "..." : title
+                    }
+                }
+            }
+        }
+        }
+    }
+
+    Connections {
+        target: CompositorService
+        function onToplevelsChanged() {
+            repeater.updateModel()
+        }
+    }
+
+    Connections {
+        target: SessionData
+        function onPinnedAppsChanged() {
+            repeater.updateModel()
+        }
+    }
+
+    onGroupByAppChanged: {
+        repeater.updateModel()
+    }
+}

quickshell/Modules/Dock/DockContextMenu.qml

@@ -0,0 +1,498 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import Quickshell.Widgets
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+PanelWindow {
+    id: root
+
+    WlrLayershell.namespace: "dms:dock-context-menu"
+
+    property var appData: null
+    property var anchorItem: null
+    property real dockVisibleHeight: 40
+    property int margin: 10
+    property bool hidePin: false
+    property var desktopEntry: null
+
+    function showForButton(button, data, dockHeight, hidePinOption, entry, dockScreen) {
+        if (dockScreen) {
+            root.screen = dockScreen
+        }
+
+        anchorItem = button
+        appData = data
+        dockVisibleHeight = dockHeight || 40
+        hidePin = hidePinOption || false
+        desktopEntry = entry || null
+
+        visible = true
+    }
+    function close() {
+        visible = false
+    }
+
+    screen: null
+    visible: false
+    WlrLayershell.layer: WlrLayershell.Overlay
+    WlrLayershell.exclusiveZone: -1
+    WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+    color: "transparent"
+    anchors {
+        top: true
+        left: true
+        right: true
+        bottom: true
+    }
+
+    property point anchorPos: Qt.point(screen.width / 2, screen.height - 100)
+
+    onAnchorItemChanged: updatePosition()
+    onVisibleChanged: {
+        if (visible) {
+            updatePosition()
+        }
+    }
+
+    function updatePosition() {
+        if (!anchorItem) {
+            anchorPos = Qt.point(screen.width / 2, screen.height - 100)
+            return
+        }
+
+        const dockWindow = anchorItem.Window.window
+        if (!dockWindow) {
+            anchorPos = Qt.point(screen.width / 2, screen.height - 100)
+            return
+        }
+
+        const buttonPosInDock = anchorItem.mapToItem(dockWindow.contentItem, 0, 0)
+        let actualDockHeight = root.dockVisibleHeight
+
+        function findDockBackground(item) {
+            if (item.objectName === "dockBackground") {
+                return item
+            }
+            for (var i = 0; i < item.children.length; i++) {
+                const found = findDockBackground(item.children[i])
+                if (found) {
+                    return found
+                }
+            }
+            return null
+        }
+
+        const dockBackground = findDockBackground(dockWindow.contentItem)
+        let actualDockWidth = dockWindow.width
+        if (dockBackground) {
+            actualDockHeight = dockBackground.height
+            actualDockWidth = dockBackground.width
+        }
+
+        const isVertical = SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right
+        const dockMargin = SettingsData.dockMargin + 16
+        let buttonScreenX, buttonScreenY
+
+        if (isVertical) {
+            const dockContentHeight = dockWindow.height
+            const screenHeight = root.screen.height
+            const dockTopMargin = Math.round((screenHeight - dockContentHeight) / 2)
+            buttonScreenY = dockTopMargin + buttonPosInDock.y + anchorItem.height / 2
+
+            if (SettingsData.dockPosition === SettingsData.Position.Right) {
+                buttonScreenX = root.screen.width - actualDockWidth - dockMargin - 20
+            } else {
+                buttonScreenX = actualDockWidth + dockMargin + 20
+            }
+        } else {
+            const isDockAtBottom = SettingsData.dockPosition === SettingsData.Position.Bottom
+
+            if (isDockAtBottom) {
+                buttonScreenY = root.screen.height - actualDockHeight - dockMargin - 20
+            } else {
+                buttonScreenY = actualDockHeight + dockMargin + 20
+            }
+
+            const dockContentWidth = dockWindow.width
+            const screenWidth = root.screen.width
+            const dockLeftMargin = Math.round((screenWidth - dockContentWidth) / 2)
+            buttonScreenX = dockLeftMargin + buttonPosInDock.x + anchorItem.width / 2
+        }
+
+        anchorPos = Qt.point(buttonScreenX, buttonScreenY)
+    }
+
+    Rectangle {
+        id: menuContainer
+
+        x: {
+            const isVertical = SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right
+            if (isVertical) {
+                const isDockAtRight = SettingsData.dockPosition === SettingsData.Position.Right
+                if (isDockAtRight) {
+                    return Math.max(10, root.anchorPos.x - width + 30)
+                } else {
+                    return Math.min(root.width - width - 10, root.anchorPos.x - 30)
+                }
+            } else {
+                const left = 10
+                const right = root.width - width - 10
+                const want = root.anchorPos.x - width / 2
+                return Math.max(left, Math.min(right, want))
+            }
+        }
+        y: {
+            const isVertical = SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right
+            if (isVertical) {
+                const top = 10
+                const bottom = root.height - height - 10
+                const want = root.anchorPos.y - height / 2
+                return Math.max(top, Math.min(bottom, want))
+            } else {
+                const isDockAtBottom = SettingsData.dockPosition === SettingsData.Position.Bottom
+                if (isDockAtBottom) {
+                    return Math.max(10, root.anchorPos.y - height + 30)
+                } else {
+                    return Math.min(root.height - height - 10, root.anchorPos.y - 30)
+                }
+            }
+        }
+
+        width: Math.min(400, Math.max(180, menuColumn.implicitWidth + Theme.spacingS * 2))
+        height: Math.max(60, menuColumn.implicitHeight + Theme.spacingS * 2)
+        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        radius: Theme.cornerRadius
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+        border.width: 1
+
+        opacity: root.visible ? 1 : 0
+        visible: opacity > 0
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Theme.shortDuration
+                easing.type: Theme.emphasizedEasing
+            }
+        }
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.topMargin: 4
+            anchors.leftMargin: 2
+            anchors.rightMargin: -2
+            anchors.bottomMargin: -4
+            radius: parent.radius
+            color: Qt.rgba(0, 0, 0, 0.15)
+            z: -1
+        }
+
+        Column {
+            id: menuColumn
+            width: parent.width - Theme.spacingS * 2
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: Theme.spacingS
+            spacing: 1
+
+            // Window list for grouped apps
+            Repeater {
+                model: {
+                    if (!root.appData || root.appData.type !== "grouped") return []
+
+                    const toplevels = []
+                    const allToplevels = ToplevelManager.toplevels.values
+                    for (let i = 0; i < allToplevels.length; i++) {
+                        const toplevel = allToplevels[i]
+                        if (toplevel.appId === root.appData.appId) {
+                            toplevels.push(toplevel)
+                        }
+                    }
+                    return toplevels
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 28
+                    radius: Theme.cornerRadius
+                    color: windowArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+                    StyledText {
+                        anchors.left: parent.left
+                        anchors.leftMargin: Theme.spacingS
+                        anchors.right: closeButton.left
+                        anchors.rightMargin: Theme.spacingXS
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: (modelData && modelData.title) ? modelData.title: I18n.tr("(Unnamed)")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                        font.weight: Font.Normal
+                        elide: Text.ElideRight
+                        wrapMode: Text.NoWrap
+                    }
+
+                    Rectangle {
+                        id: closeButton
+                        anchors.right: parent.right
+                        anchors.rightMargin: Theme.spacingXS
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: 20
+                        height: 20
+                        radius: 10
+                        color: closeMouseArea.containsMouse ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.2) : "transparent"
+
+                        DankIcon {
+                            anchors.centerIn: parent
+                            name: "close"
+                            size: 12
+                            color: closeMouseArea.containsMouse ? Theme.error : Theme.surfaceText
+                        }
+
+                        MouseArea {
+                            id: closeMouseArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                if (modelData && modelData.close) {
+                                    modelData.close()
+                                }
+                                root.close()
+                            }
+                        }
+                    }
+
+                    MouseArea {
+                        id: windowArea
+                        anchors.fill: parent
+                        anchors.rightMargin: 24
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            if (modelData && modelData.activate) {
+                                modelData.activate()
+                            }
+                            root.close()
+                        }
+                    }
+                }
+            }
+
+            Rectangle {
+                visible: {
+                    if (!root.appData) return false
+                    if (root.appData.type !== "grouped") return false
+                    return root.appData.windowCount > 0
+                }
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            }
+
+            Repeater {
+                model: root.desktopEntry && root.desktopEntry.actions ? root.desktopEntry.actions : []
+
+                Rectangle {
+                    width: parent.width
+                    height: 28
+                    radius: Theme.cornerRadius
+                    color: actionArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+                    Row {
+                        anchors.left: parent.left
+                        anchors.leftMargin: Theme.spacingS
+                        anchors.right: parent.right
+                        anchors.rightMargin: Theme.spacingS
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingXS
+
+                        Item {
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: 16
+                            height: 16
+                            visible: modelData.icon && modelData.icon !== ""
+
+                            IconImage {
+                                anchors.fill: parent
+                                source: modelData.icon ? Quickshell.iconPath(modelData.icon, true) : ""
+                                smooth: true
+                                asynchronous: true
+                                visible: status === Image.Ready
+                            }
+                        }
+
+                        StyledText {
+                            anchors.verticalCenter: parent.verticalCenter
+                            text: modelData.name || ""
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceText
+                            font.weight: Font.Normal
+                            elide: Text.ElideRight
+                            wrapMode: Text.NoWrap
+                        }
+                    }
+
+                    MouseArea {
+                        id: actionArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            if (modelData) {
+                                SessionService.launchDesktopAction(root.desktopEntry, modelData)
+                            }
+                            root.close()
+                        }
+                    }
+                }
+            }
+
+            Rectangle {
+                visible: root.desktopEntry && root.desktopEntry.actions && root.desktopEntry.actions.length > 0
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            }
+
+            Rectangle {
+                visible: !root.hidePin
+                width: parent.width
+                height: 28
+                radius: Theme.cornerRadius
+                color: pinArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+                StyledText {
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingS
+                    anchors.right: parent.right
+                    anchors.rightMargin: Theme.spacingS
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: root.appData && root.appData.isPinned ? I18n.tr("Unpin from Dock") : I18n.tr("Pin to Dock")
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceText
+                    font.weight: Font.Normal
+                    elide: Text.ElideRight
+                    wrapMode: Text.NoWrap
+                }
+
+                MouseArea {
+                    id: pinArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        if (!root.appData) {
+                            return
+                        }
+                        if (root.appData.isPinned) {
+                            SessionData.removePinnedApp(root.appData.appId)
+                        } else {
+                            SessionData.addPinnedApp(root.appData.appId)
+                        }
+                        root.close()
+                    }
+                }
+            }
+
+            Rectangle {
+                visible: (root.appData && root.appData.type === "window") || (root.desktopEntry && SessionService.hasPrimeRun)
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            }
+
+            Rectangle {
+                visible: root.desktopEntry && SessionService.hasPrimeRun
+                width: parent.width
+                height: 28
+                radius: Theme.cornerRadius
+                color: primeRunArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+                StyledText {
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingS
+                    anchors.right: parent.right
+                    anchors.rightMargin: Theme.spacingS
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: I18n.tr("Launch on dGPU")
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceText
+                    font.weight: Font.Normal
+                    elide: Text.ElideRight
+                    wrapMode: Text.NoWrap
+                }
+
+                MouseArea {
+                    id: primeRunArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        if (root.desktopEntry) {
+                            SessionService.launchDesktopEntry(root.desktopEntry, true)
+                        }
+                        root.close()
+                    }
+                }
+            }
+
+            Rectangle {
+                visible: root.appData && (root.appData.type === "window" || (root.appData.type === "grouped" && root.appData.windowCount > 0))
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            }
+
+            Rectangle {
+                visible: root.appData && (root.appData.type === "window" || (root.appData.type === "grouped" && root.appData.windowCount > 0))
+                width: parent.width
+                height: 28
+                radius: Theme.cornerRadius
+                color: closeArea.containsMouse ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12) : "transparent"
+
+                StyledText {
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingS
+                    anchors.right: parent.right
+                    anchors.rightMargin: Theme.spacingS
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: {
+                        if (root.appData && root.appData.type === "grouped") {
+                            return "Close All Windows"
+                        }
+                        return "Close Window"
+                    }
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: closeArea.containsMouse ? Theme.error : Theme.surfaceText
+                    font.weight: Font.Normal
+                    elide: Text.ElideRight
+                    wrapMode: Text.NoWrap
+                }
+
+                MouseArea {
+                    id: closeArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        if (root.appData?.type === "window") {
+                            root.appData?.toplevel?.close()
+                        } else if (root.appData?.type === "grouped") {
+                            root.appData?.allWindows?.forEach(window => window.toplevel?.close())
+                        }
+                        root.close()
+                    }
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        z: -1
+        onClicked: root.close()
+    }
+}