dankbar: add a mask while popouts are open

- Retains ability to click items on the bar, while another is open
2025-12-06 05:25:41 -05:00 · 2025-11-15 12:36:12 -05:00
parent 64ec5be919
commit ccf28fc4e7
22 changed files with 573 additions and 49 deletions
--- a/quickshell/Common/ModalManager.qml
+++ b/quickshell/Common/ModalManager.qml
@@ -12,5 +12,7 @@ Singleton {
        if (!modal.allowStacking) {
            closeAllModalsExcept(modal)
        }
+        PopoutManager.closeAllPopouts()
+        TrayMenuManager.closeAllMenus()
    }
 }
--- a/quickshell/Common/PopoutManager.qml
+++ b/quickshell/Common/PopoutManager.qml
@@ -0,0 +1,113 @@
+pragma Singleton
+
+import Quickshell
+import QtQuick
+
+Singleton {
+    id: root
+
+    property var currentPopoutsByScreen: ({})
+    property var currentPopoutTriggers: ({})
+
+    function showPopout(popout) {
+        if (!popout || !popout.screen) return
+
+        const screenName = popout.screen.name
+        const currentPopout = currentPopoutsByScreen[screenName]
+
+        if (currentPopout && currentPopout !== popout) {
+            if (currentPopout.dashVisible !== undefined) {
+                currentPopout.dashVisible = false
+            } else if (currentPopout.notificationHistoryVisible !== undefined) {
+                currentPopout.notificationHistoryVisible = false
+            } else {
+                currentPopout.close()
+            }
+        }
+
+        currentPopoutsByScreen[screenName] = popout
+        ModalManager.closeAllModalsExcept(null)
+        TrayMenuManager.closeAllMenus()
+    }
+
+    function hidePopout(popout) {
+        if (!popout || !popout.screen) return
+
+        const screenName = popout.screen.name
+        if (currentPopoutsByScreen[screenName] === popout) {
+            currentPopoutsByScreen[screenName] = null
+            currentPopoutTriggers[screenName] = null
+        }
+    }
+
+    function closeAllPopouts() {
+        for (const screenName in currentPopoutsByScreen) {
+            const popout = currentPopoutsByScreen[screenName]
+            if (!popout) continue
+
+            if (popout.dashVisible !== undefined) {
+                popout.dashVisible = false
+            } else if (popout.notificationHistoryVisible !== undefined) {
+                popout.notificationHistoryVisible = false
+            } else {
+                popout.close()
+            }
+        }
+        currentPopoutsByScreen = {}
+    }
+
+    function getActivePopout(screen) {
+        if (!screen) return null
+        return currentPopoutsByScreen[screen.name] || null
+    }
+
+    function requestPopout(popout, tabIndex, triggerSource) {
+        if (!popout || !popout.screen) return
+
+        const screenName = popout.screen.name
+        const currentPopout = currentPopoutsByScreen[screenName]
+        const triggerId = triggerSource !== undefined ? triggerSource : tabIndex
+
+        if (currentPopout === popout && popout.shouldBeVisible) {
+            if (triggerId !== undefined && currentPopoutTriggers[screenName] === triggerId) {
+                if (popout.dashVisible !== undefined) {
+                    popout.dashVisible = false
+                } else if (popout.notificationHistoryVisible !== undefined) {
+                    popout.notificationHistoryVisible = false
+                } else {
+                    popout.close()
+                }
+                return
+            }
+
+            if (triggerId === undefined) {
+                if (popout.dashVisible !== undefined) {
+                    popout.dashVisible = false
+                } else if (popout.notificationHistoryVisible !== undefined) {
+                    popout.notificationHistoryVisible = false
+                } else {
+                    popout.close()
+                }
+                return
+            }
+
+            if (tabIndex !== undefined && popout.currentTabIndex !== undefined) {
+                popout.currentTabIndex = tabIndex
+            }
+            currentPopoutTriggers[screenName] = triggerId
+            return
+        }
+
+        currentPopoutTriggers[screenName] = triggerId
+
+        if (tabIndex !== undefined && popout.currentTabIndex !== undefined) {
+            popout.currentTabIndex = tabIndex
+        }
+
+        if (popout.dashVisible !== undefined) {
+            popout.dashVisible = true
+        } else {
+            popout.open()
+        }
+    }
+}
--- a/quickshell/Common/SettingsData.qml
+++ b/quickshell/Common/SettingsData.qml
@@ -590,6 +590,53 @@ rm -rf '${home}'/.cache/icon-cache '${home}'/.cache/thumbnails 2>/dev/null || tr
        }
    }

+    function getBarBounds(screen, barThickness) {
+        if (!screen) {
+            return { "x": 0, "y": 0, "width": 0, "height": 0, "wingSize": 0 }
+        }
+
+        const wingRadius = dankBarGothCornerRadiusOverride ? dankBarGothCornerRadiusValue : Theme.cornerRadius
+        const wingSize = dankBarGothCornersEnabled ? Math.max(0, wingRadius) : 0
+        const screenWidth = screen.width
+        const screenHeight = screen.height
+
+        if (dankBarPosition === SettingsData.Position.Top) {
+            return {
+                "x": 0,
+                "y": 0,
+                "width": screenWidth,
+                "height": barThickness + dankBarSpacing + wingSize,
+                "wingSize": wingSize
+            }
+        } else if (dankBarPosition === SettingsData.Position.Bottom) {
+            return {
+                "x": 0,
+                "y": screenHeight - barThickness - dankBarSpacing - wingSize,
+                "width": screenWidth,
+                "height": barThickness + dankBarSpacing + wingSize,
+                "wingSize": wingSize
+            }
+        } else if (dankBarPosition === SettingsData.Position.Left) {
+            return {
+                "x": 0,
+                "y": 0,
+                "width": barThickness + dankBarSpacing + wingSize,
+                "height": screenHeight,
+                "wingSize": wingSize
+            }
+        } else if (dankBarPosition === SettingsData.Position.Right) {
+            return {
+                "x": screenWidth - barThickness - dankBarSpacing - wingSize,
+                "y": 0,
+                "width": barThickness + dankBarSpacing + wingSize,
+                "height": screenHeight,
+                "wingSize": wingSize
+            }
+        }
+
+        return { "x": 0, "y": 0, "width": 0, "height": 0, "wingSize": 0 }
+    }
+
    function getFilteredScreens(componentId) {
        var prefs = screenPreferences && screenPreferences[componentId] || ["all"]
        if (prefs.includes("all")) {
--- a/quickshell/Common/TrayMenuManager.qml
+++ b/quickshell/Common/TrayMenuManager.qml
@@ -0,0 +1,54 @@
+pragma Singleton
+
+import Quickshell
+import QtQuick
+
+Singleton {
+    id: root
+
+    property var activeOverflowMenus: ({})
+    property var activeTrayMenus: ({})
+
+    function registerOverflowMenu(screenName, menuOpenBinding) {
+        if (!screenName) return
+        activeOverflowMenus[screenName] = menuOpenBinding
+    }
+
+    function unregisterOverflowMenu(screenName) {
+        if (!screenName) return
+        delete activeOverflowMenus[screenName]
+    }
+
+    function registerTrayMenu(screenName, closeCallback) {
+        if (!screenName) return
+        activeTrayMenus[screenName] = closeCallback
+    }
+
+    function unregisterTrayMenu(screenName) {
+        if (!screenName) return
+        delete activeTrayMenus[screenName]
+    }
+
+    function closeOverflowMenus() {
+        for (const screenName in activeOverflowMenus) {
+            const menuBinding = activeOverflowMenus[screenName]
+            if (menuBinding && menuBinding.close) {
+                menuBinding.close()
+            }
+        }
+    }
+
+    function closeTrayMenus() {
+        for (const screenName in activeTrayMenus) {
+            const closeCallback = activeTrayMenus[screenName]
+            if (closeCallback) {
+                closeCallback()
+            }
+        }
+    }
+
+    function closeAllMenus() {
+        closeOverflowMenus()
+        closeTrayMenus()
+    }
+}
--- a/quickshell/Modules/AppDrawer/AppDrawerPopout.qml
+++ b/quickshell/Modules/AppDrawer/AppDrawerPopout.qml
@@ -40,6 +40,8 @@ DankPopout {
    positioning: ""
    screen: triggerScreen

+    onBackgroundClicked: close()
+
    onShouldBeVisibleChanged: {
        if (shouldBeVisible) {
            appLauncher.searchQuery = ""
--- a/quickshell/Modules/ControlCenter/ControlCenterPopout.qml
+++ b/quickshell/Modules/ControlCenter/ControlCenterPopout.qml
@@ -71,7 +71,8 @@ DankPopout {
    positioning: ""
    screen: triggerScreen
    shouldBeVisible: false
-    visible: shouldBeVisible
+
+    onBackgroundClicked: close()

    onShouldBeVisibleChanged: {
        if (shouldBeVisible) {
--- a/quickshell/Modules/DankBar/BarCanvas.qml
+++ b/quickshell/Modules/DankBar/BarCanvas.qml
@@ -24,6 +24,25 @@ Item {
        debounceTimer.restart()
    }

+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+        z: -999
+        onClicked: {
+            const activePopout = PopoutManager.getActivePopout(barWindow.screen)
+            if (activePopout) {
+                if (activePopout.dashVisible !== undefined) {
+                    activePopout.dashVisible = false
+                } else if (activePopout.notificationHistoryVisible !== undefined) {
+                    activePopout.notificationHistoryVisible = false
+                } else {
+                    activePopout.close()
+                }
+            }
+            TrayMenuManager.closeAllMenus()
+        }
+    }
+
    Timer {
        id: debounceTimer
        interval: 50
--- a/quickshell/Modules/DankBar/DankBar.qml
+++ b/quickshell/Modules/DankBar/DankBar.qml
@@ -127,10 +127,7 @@ Item {
                    dankDashPopoutLoader.item.triggerScreen = barWindow.screen
                }

-                if (!dankDashPopoutLoader.item.dashVisible) {
-                    dankDashPopoutLoader.item.currentTabIndex = 2
-                }
-                dankDashPopoutLoader.item.dashVisible = !dankDashPopoutLoader.item.dashVisible
+                PopoutManager.requestPopout(dankDashPopoutLoader.item, 2)
            }

            readonly property var dBarLayer: {
@@ -1130,8 +1127,7 @@ Item {
                                        onClockClicked: {
                                            dankDashPopoutLoader.active = true
                                            if (dankDashPopoutLoader.item) {
-                                                dankDashPopoutLoader.item.dashVisible = !dankDashPopoutLoader.item.dashVisible
-                                                dankDashPopoutLoader.item.currentTabIndex = 0
+                                                PopoutManager.requestPopout(dankDashPopoutLoader.item, 0)
                                            }
                                        }
                                    }
@@ -1154,8 +1150,7 @@ Item {
                                        onClicked: {
                                            dankDashPopoutLoader.active = true
                                            if (dankDashPopoutLoader.item) {
-                                                dankDashPopoutLoader.item.dashVisible = !dankDashPopoutLoader.item.dashVisible
-                                                dankDashPopoutLoader.item.currentTabIndex = 1
+                                                PopoutManager.requestPopout(dankDashPopoutLoader.item, 1)
                                            }
                                        }
                                    }
@@ -1177,8 +1172,7 @@ Item {
                                        onClicked: {
                                            dankDashPopoutLoader.active = true
                                            if (dankDashPopoutLoader.item) {
-                                                dankDashPopoutLoader.item.dashVisible = !dankDashPopoutLoader.item.dashVisible
-                                                dankDashPopoutLoader.item.currentTabIndex = 3
+                                                PopoutManager.requestPopout(dankDashPopoutLoader.item, 3)
                                            }
                                        }
                                    }
--- a/quickshell/Modules/DankBar/Popouts/BatteryPopout.qml
+++ b/quickshell/Modules/DankBar/Popouts/BatteryPopout.qml
@@ -50,8 +50,8 @@ DankPopout {
    triggerWidth: 70
    positioning: ""
    screen: triggerScreen
-    shouldBeVisible: false
-    visible: shouldBeVisible
+
+    onBackgroundClicked: close()

    content: Component {
        Rectangle {
--- a/quickshell/Modules/DankBar/Popouts/DWLLayoutPopout.qml
+++ b/quickshell/Modules/DankBar/Popouts/DWLLayoutPopout.qml
@@ -95,7 +95,6 @@ DankPopout {
    positioning: ""
    screen: triggerScreen
    shouldBeVisible: false
-    visible: shouldBeVisible

    content: Component {
        Rectangle {
--- a/quickshell/Modules/DankBar/Popouts/VpnPopout.qml
+++ b/quickshell/Modules/DankBar/Popouts/VpnPopout.qml
@@ -46,7 +46,8 @@ DankPopout {
    positioning: ""
    screen: triggerScreen
    shouldBeVisible: false
-    visible: shouldBeVisible
+
+    onBackgroundClicked: close()

    content: Component {
        Rectangle {
--- a/quickshell/Modules/DankBar/Widgets/CpuMonitor.qml
+++ b/quickshell/Modules/DankBar/Widgets/CpuMonitor.qml
@@ -132,8 +132,8 @@ BasePill {
                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
            }
            DgopService.setSortBy("cpu");
-            if (root.toggleProcessList) {
-                root.toggleProcessList();
+            if (popoutTarget) {
+                PopoutManager.requestPopout(popoutTarget, undefined, "cpu");
            }
        }
    }
--- a/quickshell/Modules/DankBar/Widgets/CpuTemperature.qml
+++ b/quickshell/Modules/DankBar/Widgets/CpuTemperature.qml
@@ -132,8 +132,8 @@ BasePill {
                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
            }
            DgopService.setSortBy("cpu");
-            if (root.toggleProcessList) {
-                root.toggleProcessList();
+            if (popoutTarget) {
+                PopoutManager.requestPopout(popoutTarget, undefined, "cpu_temp");
            }
        }
    }
--- a/quickshell/Modules/DankBar/Widgets/GpuTemperature.qml
+++ b/quickshell/Modules/DankBar/Widgets/GpuTemperature.qml
@@ -196,8 +196,8 @@ BasePill {
                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
            }
            DgopService.setSortBy("cpu");
-            if (root.toggleProcessList) {
-                root.toggleProcessList();
+            if (popoutTarget) {
+                PopoutManager.requestPopout(popoutTarget, undefined, "gpu_temp");
            }
        }
    }
--- a/quickshell/Modules/DankBar/Widgets/RamMonitor.qml
+++ b/quickshell/Modules/DankBar/Widgets/RamMonitor.qml
@@ -155,8 +155,8 @@ BasePill {
                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
            }
            DgopService.setSortBy("memory");
-            if (root.toggleProcessList) {
-                root.toggleProcessList();
+            if (popoutTarget) {
+                PopoutManager.requestPopout(popoutTarget, undefined, "memory");
            }
        }
    }
--- a/quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
+++ b/quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
@@ -51,6 +51,21 @@ Item {
    property bool menuOpen: false
    property bool overflowWasOpenBeforeTrayMenu: false

+    Component.onCompleted: {
+        if (parentScreen) {
+            TrayMenuManager.registerOverflowMenu(parentScreen.name, {
+                close: () => { root.menuOpen = false }
+            })
+        }
+    }
+
+    Component.onDestruction: {
+        if (parentScreen) {
+            TrayMenuManager.unregisterOverflowMenu(parentScreen.name)
+            TrayMenuManager.unregisterTrayMenu(parentScreen.name)
+        }
+    }
+
    Rectangle {
        id: visualBackground
        width: root.visualWidth
@@ -372,12 +387,106 @@ Item {
            : (screen?.devicePixelRatio || 1)
        property point anchorPos: Qt.point(screen.width / 2, screen.height / 2)

+        readonly property var barBounds: {
+            if (!overflowMenu.screen) {
+                return { "x": 0, "y": 0, "width": 0, "height": 0, "wingSize": 0 }
+            }
+            return SettingsData.getBarBounds(overflowMenu.screen, root.barThickness + SettingsData.dankBarSpacing)
+        }
+
+        readonly property real barX: barBounds.x
+        readonly property real barY: barBounds.y
+        readonly property real barWidth: barBounds.width
+        readonly property real barHeight: barBounds.height
+
+        readonly property real maskX: {
+            switch (SettingsData.dankBarPosition) {
+            case SettingsData.Position.Left:
+                return barWidth > 0 ? barWidth : 0
+            case SettingsData.Position.Right:
+            case SettingsData.Position.Top:
+            case SettingsData.Position.Bottom:
+            default:
+                return 0
+            }
+        }
+
+        readonly property real maskY: {
+            switch (SettingsData.dankBarPosition) {
+            case SettingsData.Position.Top:
+                return barHeight > 0 ? barHeight : 0
+            case SettingsData.Position.Bottom:
+            case SettingsData.Position.Left:
+            case SettingsData.Position.Right:
+            default:
+                return 0
+            }
+        }
+
+        readonly property real maskWidth: {
+            switch (SettingsData.dankBarPosition) {
+            case SettingsData.Position.Left:
+                return barWidth > 0 ? width - barWidth : width
+            case SettingsData.Position.Right:
+                return barWidth > 0 ? width - barWidth : width
+            case SettingsData.Position.Top:
+            case SettingsData.Position.Bottom:
+            default:
+                return width
+            }
+        }
+
+        readonly property real maskHeight: {
+            switch (SettingsData.dankBarPosition) {
+            case SettingsData.Position.Top:
+                return barHeight > 0 ? height - barHeight : height
+            case SettingsData.Position.Bottom:
+                return barHeight > 0 ? height - barHeight : height
+            case SettingsData.Position.Left:
+            case SettingsData.Position.Right:
+            default:
+                return height
+            }
+        }
+
+        mask: Region {
+            item: Rectangle {
+                x: overflowMenu.maskX
+                y: overflowMenu.maskY
+                width: overflowMenu.maskWidth
+                height: overflowMenu.maskHeight
+            }
+        }
+
        onVisibleChanged: {
            if (visible) {
+                PopoutManager.closeAllPopouts()
+                ModalManager.closeAllModalsExcept(null)
+                TrayMenuManager.closeTrayMenus()
                updatePosition()
            }
        }

+        MouseArea {
+            x: overflowMenu.maskX
+            y: overflowMenu.maskY
+            width: overflowMenu.maskWidth
+            height: overflowMenu.maskHeight
+            z: -1
+            enabled: root.menuOpen
+            acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+            onClicked: mouse => {
+                const clickX = mouse.x + overflowMenu.maskX
+                const clickY = mouse.y + overflowMenu.maskY
+                const outsideContent = clickX < menuContainer.x || clickX > menuContainer.x + menuContainer.width ||
+                                       clickY < menuContainer.y || clickY > menuContainer.y + menuContainer.height
+
+                if (!outsideContent) return
+
+                root.menuOpen = false
+            }
+        }
+
        FocusScope {
            id: overflowFocusScope
            anchors.fill: parent
@@ -622,12 +731,6 @@ Item {
                }
            }
        }
-
-        MouseArea {
-            anchors.fill: parent
-            z: -1
-            onClicked: root.menuOpen = false
-        }
    }

    Component {
@@ -730,12 +833,106 @@ Item {
                    : (screen?.devicePixelRatio || 1)
                property point anchorPos: Qt.point(screen.width / 2, screen.height / 2)

+                readonly property var barBounds: {
+                    if (!menuWindow.screen) {
+                        return { "x": 0, "y": 0, "width": 0, "height": 0, "wingSize": 0 }
+                    }
+                    return SettingsData.getBarBounds(menuWindow.screen, root.barThickness + SettingsData.dankBarSpacing)
+                }
+
+                readonly property real barX: barBounds.x
+                readonly property real barY: barBounds.y
+                readonly property real barWidth: barBounds.width
+                readonly property real barHeight: barBounds.height
+
+                readonly property real maskX: {
+                    switch (SettingsData.dankBarPosition) {
+                    case SettingsData.Position.Left:
+                        return barWidth > 0 ? barWidth : 0
+                    case SettingsData.Position.Right:
+                    case SettingsData.Position.Top:
+                    case SettingsData.Position.Bottom:
+                    default:
+                        return 0
+                    }
+                }
+
+                readonly property real maskY: {
+                    switch (SettingsData.dankBarPosition) {
+                    case SettingsData.Position.Top:
+                        return barHeight > 0 ? barHeight : 0
+                    case SettingsData.Position.Bottom:
+                    case SettingsData.Position.Left:
+                    case SettingsData.Position.Right:
+                    default:
+                        return 0
+                    }
+                }
+
+                readonly property real maskWidth: {
+                    switch (SettingsData.dankBarPosition) {
+                    case SettingsData.Position.Left:
+                        return barWidth > 0 ? width - barWidth : width
+                    case SettingsData.Position.Right:
+                        return barWidth > 0 ? width - barWidth : width
+                    case SettingsData.Position.Top:
+                    case SettingsData.Position.Bottom:
+                    default:
+                        return width
+                    }
+                }
+
+                readonly property real maskHeight: {
+                    switch (SettingsData.dankBarPosition) {
+                    case SettingsData.Position.Top:
+                        return barHeight > 0 ? height - barHeight : height
+                    case SettingsData.Position.Bottom:
+                        return barHeight > 0 ? height - barHeight : height
+                    case SettingsData.Position.Left:
+                    case SettingsData.Position.Right:
+                    default:
+                        return height
+                    }
+                }
+
+                mask: Region {
+                    item: Rectangle {
+                        x: menuWindow.maskX
+                        y: menuWindow.maskY
+                        width: menuWindow.maskWidth
+                        height: menuWindow.maskHeight
+                    }
+                }
+
                onVisibleChanged: {
                    if (visible) {
+                        PopoutManager.closeAllPopouts()
+                        ModalManager.closeAllModalsExcept(null)
+                        TrayMenuManager.closeOverflowMenus()
                        updatePosition()
                    }
                }

+                MouseArea {
+                    x: menuWindow.maskX
+                    y: menuWindow.maskY
+                    width: menuWindow.maskWidth
+                    height: menuWindow.maskHeight
+                    z: -1
+                    enabled: menuRoot.showMenu
+                    acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+                    onClicked: mouse => {
+                        const clickX = mouse.x + menuWindow.maskX
+                        const clickY = mouse.y + menuWindow.maskY
+                        const outsideContent = clickX < menuContainer.x || clickX > menuContainer.x + menuContainer.width ||
+                                               clickY < menuContainer.y || clickY > menuContainer.y + menuContainer.height
+
+                        if (!outsideContent) return
+
+                        menuRoot.close()
+                    }
+                }
+
                FocusScope {
                    id: menuFocusScope
                    anchors.fill: parent
@@ -1128,12 +1325,6 @@ Item {
                        }
                    }
                }
-
-                MouseArea {
-                    anchors.fill: parent
-                    z: -1
-                    onClicked: menuRoot.close()
-                }
            }
        }
    }
@@ -1156,11 +1347,20 @@ Item {
        }

        if (currentTrayMenu) {
+            root.overflowWasOpenBeforeTrayMenu = false
+            currentTrayMenu.showMenu = false
            currentTrayMenu.destroy()
+            currentTrayMenu = null
        }
+
        currentTrayMenu = trayMenuComponent.createObject(null)
-        if (currentTrayMenu) {
+        if (currentTrayMenu && screen) {
            currentTrayMenu.showForTrayItem(item, anchor, screen, atBottom, vertical ?? false, axisObj)
+            TrayMenuManager.registerTrayMenu(screen.name, () => {
+                if (currentTrayMenu) {
+                    currentTrayMenu.close()
+                }
+            })
        }
    }

--- a/quickshell/Modules/DankDash/DankDashPopout.qml
+++ b/quickshell/Modules/DankDash/DankDashPopout.qml
@@ -45,7 +45,6 @@ DankPopout {
    triggerY: Math.max(26 + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding)) + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap - 2
    triggerWidth: 80
    shouldBeVisible: dashVisible
-    visible: shouldBeVisible

    property bool __focusArmed: false
    property bool __contentReady: false
--- a/quickshell/Modules/Notifications/Center/NotificationCenterPopout.qml
+++ b/quickshell/Modules/Notifications/Center/NotificationCenterPopout.qml
@@ -42,7 +42,14 @@ DankPopout {
    positioning: ""
    screen: triggerScreen
    shouldBeVisible: notificationHistoryVisible
-    visible: shouldBeVisible
+
+    function toggle() {
+        notificationHistoryVisible = !notificationHistoryVisible
+    }
+
+    onBackgroundClicked: {
+        notificationHistoryVisible = false
+    }

    onNotificationHistoryVisibleChanged: {
        if (notificationHistoryVisible) {
--- a/quickshell/Modules/Plugins/PluginPopout.qml
+++ b/quickshell/Modules/Plugins/PluginPopout.qml
@@ -27,7 +27,6 @@ DankPopout {
    popupHeight: contentHeight
    screen: triggerScreen
    shouldBeVisible: false
-    visible: shouldBeVisible

    content: Component {
        Rectangle {
--- a/quickshell/Modules/ProcessList/ProcessListPopout.qml
+++ b/quickshell/Modules/ProcessList/ProcessListPopout.qml
@@ -45,9 +45,10 @@ DankPopout {
    triggerWidth: 55
    positioning: ""
    screen: triggerScreen
-    visible: shouldBeVisible
    shouldBeVisible: false

+    onBackgroundClicked: close()
+
    Ref {
        service: DgopService
    }
--- a/quickshell/Modules/SystemUpdatePopout.qml
+++ b/quickshell/Modules/SystemUpdatePopout.qml
@@ -35,9 +35,10 @@ DankPopout {
    triggerWidth: 55
    positioning: ""
    screen: triggerScreen
-    visible: shouldBeVisible
    shouldBeVisible: false

+    onBackgroundClicked: close()
+
    onShouldBeVisibleChanged: {
        if (shouldBeVisible) {
            if (SystemUpdateService.updateCount === 0 && !SystemUpdateService.isChecking) {
--- a/quickshell/Widgets/DankPopout.qml
+++ b/quickshell/Widgets/DankPopout.qml
@@ -28,7 +28,24 @@ PanelWindow {
    property list<real> animationEnterCurve: Theme.expressiveCurves.expressiveDefaultSpatial
    property list<real> animationExitCurve: Theme.expressiveCurves.emphasized
    property bool shouldBeVisible: false
-    property int keyboardFocusMode: WlrKeyboardFocus.OnDemand
+    property int keyboardFocusMode: WlrKeyboardFocus.Exclusive
+
+    visible: false
+
+    readonly property real effectiveBarThickness: Math.max(26 + SettingsData.dankBarInnerPadding * 0.6, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding)) + SettingsData.dankBarSpacing
+
+    readonly property var barBounds: {
+        if (!root.screen) {
+            return { "x": 0, "y": 0, "width": 0, "height": 0, "wingSize": 0 }
+        }
+        return SettingsData.getBarBounds(root.screen, effectiveBarThickness)
+    }
+
+    readonly property real barX: barBounds.x
+    readonly property real barY: barBounds.y
+    readonly property real barWidth: barBounds.width
+    readonly property real barHeight: barBounds.height
+    readonly property real barWingSize: barBounds.wingSize

    signal opened
    signal popoutClosed
@@ -38,6 +55,7 @@ PanelWindow {
        closeTimer.stop()
        shouldBeVisible = true
        visible = true
+        PopoutManager.showPopout(root)
        opened()
    }

@@ -59,6 +77,7 @@ PanelWindow {
        onTriggered: {
            if (!shouldBeVisible) {
                visible = false
+                PopoutManager.hidePopout(root)
                popoutClosed()
            }
        }
@@ -114,16 +133,82 @@ PanelWindow {
        }
    })(), dpr)

+    readonly property real maskX: {
+        switch (SettingsData.dankBarPosition) {
+        case SettingsData.Position.Left:
+            return root.barWidth > 0 ? root.barWidth : 0
+        case SettingsData.Position.Right:
+        case SettingsData.Position.Top:
+        case SettingsData.Position.Bottom:
+        default:
+            return 0
+        }
+    }
+
+    readonly property real maskY: {
+        switch (SettingsData.dankBarPosition) {
+        case SettingsData.Position.Top:
+            return root.barHeight > 0 ? root.barHeight : 0
+        case SettingsData.Position.Bottom:
+        case SettingsData.Position.Left:
+        case SettingsData.Position.Right:
+        default:
+            return 0
+        }
+    }
+
+    readonly property real maskWidth: {
+        switch (SettingsData.dankBarPosition) {
+        case SettingsData.Position.Left:
+            return root.barWidth > 0 ? root.width - root.barWidth : root.width
+        case SettingsData.Position.Right:
+            return root.barWidth > 0 ? root.width - root.barWidth : root.width
+        case SettingsData.Position.Top:
+        case SettingsData.Position.Bottom:
+        default:
+            return root.width
+        }
+    }
+
+    readonly property real maskHeight: {
+        switch (SettingsData.dankBarPosition) {
+        case SettingsData.Position.Top:
+            return root.barHeight > 0 ? root.height - root.barHeight : root.height
+        case SettingsData.Position.Bottom:
+            return root.barHeight > 0 ? root.height - root.barHeight : root.height
+        case SettingsData.Position.Left:
+        case SettingsData.Position.Right:
+        default:
+            return root.height
+        }
+    }
+
+    mask: Region {
+        item: Rectangle {
+            x: root.maskX
+            y: root.maskY
+            width: root.maskWidth
+            height: root.maskHeight
+        }
+    }
+
    MouseArea {
-        anchors.fill: parent
-        enabled: shouldBeVisible && contentLoader.opacity > 0.1
+        x: maskX
+        y: maskY
+        width: maskWidth
+        height: maskHeight
+        z: -1
+        enabled: shouldBeVisible
        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
        onClicked: mouse => {
-            if (mouse.x < alignedX || mouse.x > alignedX + alignedWidth ||
-                mouse.y < alignedY || mouse.y > alignedY + alignedHeight) {
-                backgroundClicked()
-                close()
-            }
+            const clickX = mouse.x + maskX
+            const clickY = mouse.y + maskY
+            const outsideContent = clickX < alignedX || clickX > alignedX + alignedWidth ||
+                                   clickY < alignedY || clickY > alignedY + alignedHeight
+
+            if (!outsideContent) return
+
+            backgroundClicked()
        }
    }