hyprland: add overview

Common/SettingsData.qml

@@ -207,6 +207,9 @@ Singleton {
     property bool dankBarAutoHide: false
     property bool dankBarOpenOnOverview: false
     property bool dankBarVisible: true
+    property int overviewRows: 2
+    property int overviewColumns: 5
+    property real overviewScale: 0.16
     property real dankBarSpacing: 4
     property real dankBarBottomGap: 0
     property real dankBarInnerPadding: 4

DMSShell.qml

@@ -22,6 +22,7 @@ import qs.Modules.ProcessList
 import qs.Modules.Settings
 import qs.Modules.DankBar
 import qs.Modules.DankBar.Popouts
+import qs.Modules.HyprWorkspaces
 import qs.Modules.Plugins
 import qs.Services
 
@@ -63,8 +64,11 @@ Item {
 
         property var currentPosition: SettingsData.dankBarPosition
         property bool initialized: false
+        property var hyprlandOverviewLoaderRef: hyprlandOverviewLoader
 
         sourceComponent: DankBar {
+            hyprlandOverviewLoader: dankBarLoader.hyprlandOverviewLoaderRef
+
             onColorPickerRequested: {
                 if (colorPickerModal.shouldBeVisible) {
                     colorPickerModal.close()
@@ -496,6 +500,7 @@ Item {
         notepadSlideoutVariants: notepadSlideoutVariants
         hyprKeybindsModalLoader: hyprKeybindsModalLoader
         dankBarLoader: dankBarLoader
+        hyprlandOverviewLoader: hyprlandOverviewLoader
     }
 
     Variants {
@@ -538,4 +543,12 @@ Item {
             modelData: item
         }
     }
+
+    LazyLoader {
+        id: hyprlandOverviewLoader
+        active: CompositorService.isHyprland
+        component: HyprlandOverview {
+            id: hyprlandOverview
+        }
+    }
 }

DMSShellIPC.qml

@@ -15,6 +15,7 @@ Item {
     required property var notepadSlideoutVariants
     required property var hyprKeybindsModalLoader
     required property var dankBarLoader
+    required property var hyprlandOverviewLoader
 
     IpcHandler {
         function open() {
@@ -347,6 +348,30 @@ Item {
             return "HYPR_KEYBINDS_TOGGLE_FAILED"
         }
 
+        function toggleOverview(): string {
+            if (!CompositorService.isHyprland || !root.hyprlandOverviewLoader.item) {
+                return "HYPR_NOT_AVAILABLE"
+            }
+            root.hyprlandOverviewLoader.item.overviewOpen = !root.hyprlandOverviewLoader.item.overviewOpen
+            return root.hyprlandOverviewLoader.item.overviewOpen ? "OVERVIEW_OPEN_SUCCESS" : "OVERVIEW_CLOSE_SUCCESS"
+        }
+
+        function closeOverview(): string {
+            if (!CompositorService.isHyprland || !root.hyprlandOverviewLoader.item) {
+                return "HYPR_NOT_AVAILABLE"
+            }
+            root.hyprlandOverviewLoader.item.overviewOpen = false
+            return "OVERVIEW_CLOSE_SUCCESS"
+        }
+
+        function openOverview(): string {
+            if (!CompositorService.isHyprland || !root.hyprlandOverviewLoader.item) {
+                return "HYPR_NOT_AVAILABLE"
+            }
+            root.hyprlandOverviewLoader.item.overviewOpen = true
+            return "OVERVIEW_OPEN_SUCCESS"
+        }
+
         target: "hypr"
     }
 }

Modules/DankBar/DankBar.qml

@@ -23,6 +23,7 @@ Item {
     signal colorPickerRequested
 
     property alias barVariants: barVariants
+    property var hyprlandOverviewLoader: null
 
     function triggerControlCenterOnFocusedScreen() {
         let focusedScreenName = ""
@@ -772,6 +773,7 @@ Item {
                                         section: topBarContent.getWidgetSection(parent)
                                         popupTarget: appDrawerLoader.item
                                         parentScreen: barWindow.screen
+                                        hyprlandOverviewLoader: root.hyprlandOverviewLoader
                                         onClicked: {
                                             appDrawerLoader.active = true
                                             appDrawerLoader.item?.toggle()
@@ -785,6 +787,7 @@ Item {
                                     WorkspaceSwitcher {
                                         screenName: barWindow.screenName
                                         widgetHeight: barWindow.widgetThickness
+                                        hyprlandOverviewLoader: root.hyprlandOverviewLoader
                                     }
                                 }
 

Modules/DankBar/Widgets/FocusedApp.qml

@@ -74,14 +74,20 @@ Rectangle {
                 return false
             }
 
-            const hyprlandToplevels = Array.from(Hyprland.toplevels.values)
-            const activeHyprToplevel = hyprlandToplevels.find(t => t.wayland === activeWindow)
+            try {
+                if (!Hyprland.toplevels) return false
+                const hyprlandToplevels = Array.from(Hyprland.toplevels.values)
+                const activeHyprToplevel = hyprlandToplevels.find(t => t?.wayland === activeWindow)
 
-            if (!activeHyprToplevel || !activeHyprToplevel.workspace) {
+                if (!activeHyprToplevel || !activeHyprToplevel.workspace) {
+                    return false
+                }
+
+                return activeHyprToplevel.workspace.id === Hyprland.focusedWorkspace.id
+            } catch (e) {
+                console.error("FocusedApp: hasWindowsOnCurrentWorkspace error:", e)
                 return false
             }
-
-            return activeHyprToplevel.workspace.id === Hyprland.focusedWorkspace.id
         }
 
         return activeWindow && activeWindow.title

Modules/DankBar/Widgets/LauncherButton.qml

@@ -17,6 +17,7 @@ Item {
     property var parentScreen: null
     property real widgetThickness: 30
     property real barThickness: 48
+    property var hyprlandOverviewLoader: null
     readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
     signal clicked()
@@ -35,6 +36,8 @@ Item {
             if (mouse.button === Qt.RightButton) {
                 if (CompositorService.isNiri) {
                     NiriService.toggleOverview()
+                } else if (CompositorService.isHyprland && root.hyprlandOverviewLoader?.item) {
+                    root.hyprlandOverviewLoader.item.overviewOpen = !root.hyprlandOverviewLoader.item.overviewOpen
                 }
                 return
             }

Modules/DankBar/Widgets/RunningApps.qml

@@ -30,22 +30,28 @@ Rectangle {
         if (!SettingsData.runningAppsGroupByApp) {
             return [];
         }
-        const appGroups = new Map();
-        sortedToplevels.forEach((toplevel, index) => {
-            const appId = toplevel.appId || "unknown";
-            if (!appGroups.has(appId)) {
-                appGroups.set(appId, {
-                    appId: appId,
-                    windows: []
+        try {
+            const appGroups = new Map();
+            sortedToplevels.forEach((toplevel, index) => {
+                if (!toplevel) return;
+                const appId = toplevel?.appId || "unknown";
+                if (!appGroups.has(appId)) {
+                    appGroups.set(appId, {
+                        appId: appId,
+                        windows: []
+                    });
+                }
+                appGroups.get(appId).windows.push({
+                    toplevel: toplevel,
+                    windowId: index,
+                    windowTitle: toplevel?.title || "(Unnamed)"
                 });
-            }
-            appGroups.get(appId).windows.push({
-                toplevel: toplevel,
-                windowId: index,
-                windowTitle: toplevel.title || "(Unnamed)"
             });
-        });
-        return Array.from(appGroups.values());
+            return Array.from(appGroups.values());
+        } catch (e) {
+            console.error("RunningApps: groupedWindows error:", e);
+            return [];
+        }
     }
     readonly property int windowCount: SettingsData.runningAppsGroupByApp ? groupedWindows.length : sortedToplevels.length
     readonly property int calculatedSize: {

Modules/DankBar/Widgets/WorkspaceSwitcher.qml

@@ -15,6 +15,7 @@ Rectangle {
     property string screenName: ""
     property real widgetHeight: 30
     property real barThickness: 48
+    property var hyprlandOverviewLoader: null
     readonly property var sortedToplevels: {
         return CompositorService.filterCurrentWorkspace(CompositorService.sortedToplevels, parentScreen?.name);
     }
@@ -244,11 +245,17 @@ Rectangle {
 
     MouseArea {
         anchors.fill: parent
-        acceptedButtons: Qt.NoButton
+        acceptedButtons: Qt.RightButton
 
         property real scrollAccumulator: 0
         property real touchpadThreshold: 500
 
+        onClicked: mouse => {
+            if (mouse.button === Qt.RightButton && CompositorService.isHyprland && root.hyprlandOverviewLoader?.item) {
+                root.hyprlandOverviewLoader.item.overviewOpen = !root.hyprlandOverviewLoader.item.overviewOpen
+            }
+        }
+
         onWheel: wheel => {
                      const deltaY = wheel.angleDelta.y
                      const isMouseWheel = Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0

Modules/HyprWorkspaces/HyprlandOverview.qml

@@ -0,0 +1,284 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import qs.Common
+import qs.Services
+
+Scope {
+    id: overviewScope
+
+    property bool overviewOpen: false
+
+    Loader {
+        id: hyprlandLoader
+        active: overviewScope.overviewOpen
+        asynchronous: false
+
+        sourceComponent: Variants {
+            id: overviewVariants
+            model: Quickshell.screens
+
+            PanelWindow {
+                id: root
+                required property var modelData
+                readonly property HyprlandMonitor monitor: Hyprland.monitorFor(root.screen)
+                property bool monitorIsFocused: (Hyprland.focusedMonitor?.id == monitor?.id)
+
+                screen: modelData
+                visible: overviewScope.overviewOpen
+                color: "transparent"
+
+                WlrLayershell.namespace: "quickshell:overview"
+                WlrLayershell.layer: WlrLayer.Overlay
+                WlrLayershell.exclusiveZone: -1
+                WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
+
+                anchors {
+                    top: true
+                    left: true
+                    right: true
+                    bottom: true
+                }
+
+            HyprlandFocusGrab {
+                id: grab
+                windows: [root]
+                active: false
+                property bool hasBeenActivated: false
+                onActiveChanged: {
+                    if (active) {
+                        hasBeenActivated = true
+                    }
+                }
+                onCleared: () => {
+                    if (hasBeenActivated && overviewScope.overviewOpen) {
+                        overviewScope.overviewOpen = false
+                    }
+                }
+            }
+
+            Connections {
+                target: overviewScope
+                function onOverviewOpenChanged() {
+                    if (overviewScope.overviewOpen) {
+                        grab.hasBeenActivated = false
+                        delayedGrabTimer.start()
+                    } else {
+                        delayedGrabTimer.stop()
+                        grab.active = false
+                        grab.hasBeenActivated = false
+                    }
+                }
+            }
+
+            Connections {
+                target: root
+                function onMonitorIsFocusedChanged() {
+                    if (overviewScope.overviewOpen && root.monitorIsFocused && !grab.active) {
+                        grab.hasBeenActivated = false
+                        grab.active = true
+                    } else if (overviewScope.overviewOpen && !root.monitorIsFocused && grab.active) {
+                        grab.active = false
+                    }
+                }
+            }
+
+            Timer {
+                id: delayedGrabTimer
+                interval: 150
+                repeat: false
+                onTriggered: {
+                    if (overviewScope.overviewOpen && root.monitorIsFocused) {
+                        grab.active = true
+                    }
+                }
+            }
+
+            Timer {
+                id: closeTimer
+                interval: Theme.expressiveDurations.expressiveDefaultSpatial + 120
+                onTriggered: {
+                    root.visible = false
+                }
+            }
+
+            Rectangle {
+                id: background
+                anchors.fill: parent
+                color: "black"
+                opacity: overviewScope.overviewOpen ? 0.5 : 0
+
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                    }
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: mouse => {
+                        const localPos = mapToItem(contentContainer, mouse.x, mouse.y)
+                        if (localPos.x < 0 || localPos.x > contentContainer.width || localPos.y < 0 || localPos.y > contentContainer.height) {
+                            overviewScope.overviewOpen = false
+                            closeTimer.restart()
+                        }
+                    }
+                }
+            }
+
+            Item {
+                id: contentContainer
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: parent.top
+                anchors.topMargin: 100
+                width: childrenRect.width
+                height: childrenRect.height
+
+                opacity: overviewScope.overviewOpen ? 1 : 0
+                transform: [scaleTransform, motionTransform]
+
+                Scale {
+                    id: scaleTransform
+                    origin.x: contentContainer.width / 2
+                    origin.y: contentContainer.height / 2
+                    xScale: overviewScope.overviewOpen ? 1 : 0.96
+                    yScale: overviewScope.overviewOpen ? 1 : 0.96
+
+                    Behavior on xScale {
+                        NumberAnimation {
+                            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                            easing.type: Easing.BezierSpline
+                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                        }
+                    }
+
+                    Behavior on yScale {
+                        NumberAnimation {
+                            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                            easing.type: Easing.BezierSpline
+                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                        }
+                    }
+                }
+
+                Translate {
+                    id: motionTransform
+                    x: 0
+                    y: overviewScope.overviewOpen ? 0 : Theme.spacingL
+
+                    Behavior on y {
+                        NumberAnimation {
+                            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                            easing.type: Easing.BezierSpline
+                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                        }
+                    }
+                }
+
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                    }
+                }
+
+                Loader {
+                    id: overviewLoader
+                    active: overviewScope.overviewOpen
+                    asynchronous: false
+
+                    sourceComponent: OverviewWidget {
+                        panelWindow: root
+                        overviewOpen: overviewScope.overviewOpen
+                    }
+                }
+            }
+
+            FocusScope {
+                id: focusScope
+                anchors.fill: parent
+                visible: overviewScope.overviewOpen
+                focus: overviewScope.overviewOpen && root.monitorIsFocused
+
+                Keys.onEscapePressed: event => {
+                    if (!root.monitorIsFocused) return
+                    overviewScope.overviewOpen = false
+                    closeTimer.restart()
+                    event.accepted = true
+                }
+
+                Keys.onPressed: event => {
+                    if (!root.monitorIsFocused) return
+
+                    if (event.key === Qt.Key_Left || event.key === Qt.Key_Right) {
+                        if (!overviewLoader.item) return
+
+                        const thisMonitorWorkspaceIds = overviewLoader.item.thisMonitorWorkspaceIds
+                        if (thisMonitorWorkspaceIds.length === 0) return
+
+                        const currentId = root.monitor.activeWorkspace?.id ?? thisMonitorWorkspaceIds[0]
+                        const currentIndex = thisMonitorWorkspaceIds.indexOf(currentId)
+
+                        let targetIndex
+                        if (event.key === Qt.Key_Left) {
+                            targetIndex = currentIndex - 1
+                            if (targetIndex < 0) targetIndex = thisMonitorWorkspaceIds.length - 1
+                        } else {
+                            targetIndex = currentIndex + 1
+                            if (targetIndex >= thisMonitorWorkspaceIds.length) targetIndex = 0
+                        }
+
+                        const targetId = thisMonitorWorkspaceIds[targetIndex]
+                        Hyprland.dispatch("workspace " + targetId)
+                        event.accepted = true
+                    }
+                }
+
+                onVisibleChanged: {
+                    if (visible && overviewScope.overviewOpen && root.monitorIsFocused) {
+                        Qt.callLater(() => focusScope.forceActiveFocus())
+                    }
+                }
+
+                Connections {
+                    target: root
+                    function onMonitorIsFocusedChanged() {
+                        if (root.monitorIsFocused && overviewScope.overviewOpen) {
+                            Qt.callLater(() => focusScope.forceActiveFocus())
+                        }
+                    }
+                }
+            }
+
+            onVisibleChanged: {
+                if (visible && overviewScope.overviewOpen) {
+                    Qt.callLater(() => focusScope.forceActiveFocus())
+                } else if (!visible) {
+                    grab.active = false
+                }
+            }
+
+            Connections {
+                target: overviewScope
+                function onOverviewOpenChanged() {
+                    if (overviewScope.overviewOpen) {
+                        closeTimer.stop()
+                        root.visible = true
+                        Qt.callLater(() => focusScope.forceActiveFocus())
+                    } else {
+                        closeTimer.restart()
+                        grab.active = false
+                    }
+                }
+            }
+        }
+        }
+    }
+}

Modules/HyprWorkspaces/OverviewWidget.qml

@@ -0,0 +1,428 @@
+import QtQuick
+import QtQuick.Effects
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+    required property var panelWindow
+    required property bool overviewOpen
+    readonly property HyprlandMonitor monitor: Hyprland.monitorFor(panelWindow.screen)
+    readonly property int workspacesShown: SettingsData.overviewRows * SettingsData.overviewColumns
+
+    readonly property var allWorkspaces: Hyprland.workspaces?.values || []
+    readonly property var allWorkspaceIds: {
+        const workspaces = allWorkspaces
+        if (!workspaces || workspaces.length === 0) return []
+        try {
+            const ids = workspaces.map(ws => ws?.id).filter(id => id !== null && id !== undefined)
+            return ids.sort((a, b) => a - b)
+        } catch (e) {
+            return []
+        }
+    }
+
+    readonly property var thisMonitorWorkspaceIds: {
+        const workspaces = allWorkspaces
+        const mon = monitor
+        if (!workspaces || workspaces.length === 0 || !mon) return []
+        try {
+            const filtered = workspaces.filter(ws => ws?.monitor?.name === mon.name)
+            return filtered.map(ws => ws?.id).filter(id => id !== null && id !== undefined).sort((a, b) => a - b)
+        } catch (e) {
+            return []
+        }
+    }
+
+    readonly property var displayedWorkspaceIds: {
+        if (!allWorkspaceIds || allWorkspaceIds.length === 0) {
+            const result = []
+            for (let i = 1; i <= workspacesShown; i++) {
+                result.push(i)
+            }
+            return result
+        }
+
+        try {
+            const maxExisting = Math.max(...allWorkspaceIds)
+            const totalNeeded = Math.max(workspacesShown, allWorkspaceIds.length)
+            const result = []
+
+            for (let i = 1; i <= maxExisting; i++) {
+                result.push(i)
+            }
+
+            let nextId = maxExisting + 1
+            while (result.length < totalNeeded) {
+                result.push(nextId)
+                nextId++
+            }
+
+            return result
+        } catch (e) {
+            const result = []
+            for (let i = 1; i <= workspacesShown; i++) {
+                result.push(i)
+            }
+            return result
+        }
+    }
+
+    readonly property int minWorkspaceId: displayedWorkspaceIds.length > 0 ? displayedWorkspaceIds[0] : 1
+    readonly property int maxWorkspaceId: displayedWorkspaceIds.length > 0 ? displayedWorkspaceIds[displayedWorkspaceIds.length - 1] : workspacesShown
+    readonly property int displayWorkspaceCount: displayedWorkspaceIds.length
+
+    function getWorkspaceMonitorName(workspaceId) {
+        if (!allWorkspaces || !workspaceId) return ""
+        try {
+            const ws = allWorkspaces.find(w => w?.id === workspaceId)
+            return ws?.monitor?.name ?? ""
+        } catch (e) {
+            return ""
+        }
+    }
+
+    function workspaceHasWindows(workspaceId) {
+        if (!workspaceId) return false
+        try {
+            const workspace = allWorkspaces.find(ws => ws?.id === workspaceId)
+            if (!workspace) return false
+            const toplevels = workspace?.toplevels?.values || []
+            return toplevels.length > 0
+        } catch (e) {
+            return false
+        }
+    }
+
+    property bool monitorIsFocused: monitor?.focused ?? false
+    property real scale: SettingsData.overviewScale
+    property color activeBorderColor: Theme.primary
+
+    property real workspaceImplicitWidth: ((monitor.width / monitor.scale) * root.scale)
+    property real workspaceImplicitHeight: ((monitor.height / monitor.scale) * root.scale)
+
+    property int workspaceZ: 0
+    property int windowZ: 1
+    property int monitorLabelZ: 2
+    property int windowDraggingZ: 99999
+    property real workspaceSpacing: 5
+
+    property int draggingFromWorkspace: -1
+    property int draggingTargetWorkspace: -1
+
+    implicitWidth: overviewBackground.implicitWidth + Theme.spacingL * 2
+    implicitHeight: overviewBackground.implicitHeight + Theme.spacingL * 2
+
+    Component.onCompleted: {
+        Hyprland.refreshToplevels()
+        Hyprland.refreshWorkspaces()
+        Hyprland.refreshMonitors()
+    }
+
+    onOverviewOpenChanged: {
+        if (overviewOpen) {
+            Hyprland.refreshToplevels()
+            Hyprland.refreshWorkspaces()
+            Hyprland.refreshMonitors()
+        }
+    }
+
+    Rectangle {
+        id: overviewBackground
+        property real padding: 10
+        anchors.fill: parent
+        anchors.margins: Theme.spacingL
+
+        implicitWidth: workspaceColumnLayout.implicitWidth + padding * 2
+        implicitHeight: workspaceColumnLayout.implicitHeight + padding * 2
+        radius: Theme.cornerRadius
+        color: Theme.surfaceContainer
+
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            shadowEnabled: true
+            shadowBlur: 0.5
+            shadowHorizontalOffset: 0
+            shadowVerticalOffset: 4
+            shadowColor: Theme.shadowStrong
+            shadowOpacity: 1
+            blurMax: 32
+        }
+
+        ColumnLayout {
+            id: workspaceColumnLayout
+
+            z: root.workspaceZ
+            anchors.centerIn: parent
+            spacing: workspaceSpacing
+
+            Repeater {
+                model: SettingsData.overviewRows
+                delegate: RowLayout {
+                    id: row
+                    property int rowIndex: index
+                    spacing: workspaceSpacing
+
+                    Repeater {
+                        model: SettingsData.overviewColumns
+                        Rectangle {
+                            id: workspace
+                            property int colIndex: index
+                            property int workspaceIndex: rowIndex * SettingsData.overviewColumns + colIndex
+                            property int workspaceValue: (root.displayedWorkspaceIds && workspaceIndex < root.displayedWorkspaceIds.length) ? root.displayedWorkspaceIds[workspaceIndex] : -1
+                            property bool workspaceExists: (root.allWorkspaceIds && workspaceValue > 0) ? root.allWorkspaceIds.includes(workspaceValue) : false
+                            property var workspaceObj: (workspaceExists && Hyprland.workspaces?.values) ? Hyprland.workspaces.values.find(ws => ws?.id === workspaceValue) : null
+                            property bool isActive: workspaceObj?.active ?? false
+                            property bool isOnThisMonitor: (workspaceObj && root.monitor) ? (workspaceObj.monitor?.name === root.monitor.name) : true
+                            property bool hasWindows: (workspaceValue > 0) ? root.workspaceHasWindows(workspaceValue) : false
+                            property string workspaceMonitorName: (workspaceValue > 0) ? root.getWorkspaceMonitorName(workspaceValue) : ""
+                            property color defaultWorkspaceColor: workspaceExists ? Theme.surfaceContainer : Theme.withAlpha(Theme.surfaceContainer, 0.3)
+                            property color hoveredWorkspaceColor: Qt.lighter(defaultWorkspaceColor, 1.1)
+                            property color hoveredBorderColor: Theme.surfaceVariant
+                            property bool hoveredWhileDragging: false
+                            property bool shouldShowActiveIndicator: isActive && isOnThisMonitor && hasWindows
+
+                            visible: workspaceValue !== -1
+
+                            implicitWidth: root.workspaceImplicitWidth
+                            implicitHeight: root.workspaceImplicitHeight
+                            color: hoveredWhileDragging ? hoveredWorkspaceColor : defaultWorkspaceColor
+                            radius: Theme.cornerRadius
+                            border.width: 2
+                            border.color: hoveredWhileDragging ? hoveredBorderColor : (shouldShowActiveIndicator ? root.activeBorderColor : "transparent")
+
+                            StyledText {
+                                anchors.centerIn: parent
+                                text: workspaceValue
+                                font.pixelSize: Theme.fontSizeXLarge * 6
+                                font.weight: Font.DemiBold
+                                color: Theme.withAlpha(Theme.surfaceText, workspaceExists ? 0.2 : 0.1)
+                                horizontalAlignment: Text.AlignHCenter
+                                verticalAlignment: Text.AlignVCenter
+                            }
+
+                            MouseArea {
+                                id: workspaceArea
+                                anchors.fill: parent
+                                acceptedButtons: Qt.LeftButton
+                                onClicked: {
+                                    if (root.draggingTargetWorkspace === -1) {
+                                        root.overviewOpen = false
+                                        Hyprland.dispatch(`workspace ${workspaceValue}`)
+                                    }
+                                }
+                            }
+
+                            DropArea {
+                                anchors.fill: parent
+                                onEntered: {
+                                    root.draggingTargetWorkspace = workspaceValue
+                                    if (root.draggingFromWorkspace == root.draggingTargetWorkspace) return
+                                    hoveredWhileDragging = true
+                                }
+                                onExited: {
+                                    hoveredWhileDragging = false
+                                    if (root.draggingTargetWorkspace == workspaceValue) root.draggingTargetWorkspace = -1
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        Item {
+            id: windowSpace
+            anchors.centerIn: parent
+            implicitWidth: workspaceColumnLayout.implicitWidth
+            implicitHeight: workspaceColumnLayout.implicitHeight
+
+            Repeater {
+                model: ScriptModel {
+                    values: {
+                        const workspaces = root.allWorkspaces
+                        const minId = root.minWorkspaceId
+                        const maxId = root.maxWorkspaceId
+
+                        if (!workspaces || workspaces.length === 0) return []
+
+                        try {
+                            const result = []
+                            for (const workspace of workspaces) {
+                                const wsId = workspace?.id ?? -1
+                                if (wsId >= minId && wsId <= maxId) {
+                                    const toplevels = workspace?.toplevels?.values || []
+                                    for (const toplevel of toplevels) {
+                                        result.push(toplevel)
+                                    }
+                                }
+                            }
+                            return result
+                        } catch (e) {
+                            console.error("OverviewWidget filter error:", e)
+                            return []
+                        }
+                    }
+                }
+                delegate: OverviewWindow {
+                    id: window
+                    required property var modelData
+
+                    overviewOpen: root.overviewOpen
+                    readonly property int windowWorkspaceId: modelData?.workspace?.id ?? -1
+
+                    function getWorkspaceIndex() {
+                        if (!root.displayedWorkspaceIds || root.displayedWorkspaceIds.length === 0) return 0
+                        if (!windowWorkspaceId || windowWorkspaceId < 0) return 0
+                        try {
+                            for (let i = 0; i < root.displayedWorkspaceIds.length; i++) {
+                                if (root.displayedWorkspaceIds[i] === windowWorkspaceId) {
+                                    return i
+                                }
+                            }
+                            return 0
+                        } catch (e) {
+                            return 0
+                        }
+                    }
+
+                    readonly property int workspaceIndex: getWorkspaceIndex()
+                    readonly property int workspaceColIndex: workspaceIndex % SettingsData.overviewColumns
+                    readonly property int workspaceRowIndex: Math.floor(workspaceIndex / SettingsData.overviewColumns)
+
+                    toplevel: modelData
+                    scale: root.scale
+                    availableWorkspaceWidth: root.workspaceImplicitWidth
+                    availableWorkspaceHeight: root.workspaceImplicitHeight
+                    widgetMonitorId: root.monitor.id
+
+                    xOffset: (root.workspaceImplicitWidth + workspaceSpacing) * workspaceColIndex
+                    yOffset: (root.workspaceImplicitHeight + workspaceSpacing) * workspaceRowIndex
+
+                    z: atInitPosition ? root.windowZ : root.windowDraggingZ
+                    property bool atInitPosition: (initX == x && initY == y)
+
+                    Drag.hotSpot.x: width / 2
+                    Drag.hotSpot.y: height / 2
+
+                    MouseArea {
+                        id: dragArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        onEntered: window.hovered = true
+                        onExited: window.hovered = false
+                        acceptedButtons: Qt.LeftButton | Qt.MiddleButton
+                        drag.target: parent
+
+                        onPressed: (mouse) => {
+                            root.draggingFromWorkspace = windowData?.workspace.id
+                            window.pressed = true
+                            window.Drag.active = true
+                            window.Drag.source = window
+                            window.Drag.hotSpot.x = mouse.x
+                            window.Drag.hotSpot.y = mouse.y
+                        }
+
+                        onReleased: {
+                            const targetWorkspace = root.draggingTargetWorkspace
+                            window.pressed = false
+                            window.Drag.active = false
+                            root.draggingFromWorkspace = -1
+                            root.draggingTargetWorkspace = -1
+
+                            if (targetWorkspace !== -1 && targetWorkspace !== windowData?.workspace.id) {
+                                Hyprland.dispatch(`movetoworkspacesilent ${targetWorkspace},address:${windowData?.address}`)
+                                Qt.callLater(() => {
+                                    Hyprland.refreshToplevels()
+                                    Hyprland.refreshWorkspaces()
+                                    Qt.callLater(() => {
+                                        window.x = window.initX
+                                        window.y = window.initY
+                                    })
+                                })
+                            } else {
+                                window.x = window.initX
+                                window.y = window.initY
+                            }
+                        }
+
+                        onClicked: (event) => {
+                            if (!windowData) return
+
+                            if (event.button === Qt.LeftButton) {
+                                root.overviewOpen = false
+                                Hyprland.dispatch(`focuswindow address:${windowData.address}`)
+                                event.accepted = true
+                            } else if (event.button === Qt.MiddleButton) {
+                                Hyprland.dispatch(`closewindow address:${windowData.address}`)
+                                event.accepted = true
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        Item {
+            id: monitorLabelSpace
+            anchors.centerIn: parent
+            implicitWidth: workspaceColumnLayout.implicitWidth
+            implicitHeight: workspaceColumnLayout.implicitHeight
+            z: root.monitorLabelZ
+
+            Repeater {
+                model: SettingsData.overviewRows
+                delegate: Item {
+                    id: labelRow
+                    property int rowIndex: index
+                    y: (root.workspaceImplicitHeight + workspaceSpacing) * rowIndex
+                    width: parent.width
+                    height: root.workspaceImplicitHeight
+
+                    Repeater {
+                        model: SettingsData.overviewColumns
+                        delegate: Item {
+                            id: labelItem
+                            property int colIndex: index
+                            property int workspaceIndex: labelRow.rowIndex * SettingsData.overviewColumns + colIndex
+                            property int workspaceValue: (root.displayedWorkspaceIds && workspaceIndex < root.displayedWorkspaceIds.length) ? root.displayedWorkspaceIds[workspaceIndex] : -1
+                            property bool workspaceExists: (root.allWorkspaceIds && workspaceValue > 0) ? root.allWorkspaceIds.includes(workspaceValue) : false
+                            property string workspaceMonitorName: (workspaceValue > 0) ? root.getWorkspaceMonitorName(workspaceValue) : ""
+
+                            x: (root.workspaceImplicitWidth + workspaceSpacing) * colIndex
+                            width: root.workspaceImplicitWidth
+                            height: root.workspaceImplicitHeight
+
+                            Rectangle {
+                                anchors.right: parent.right
+                                anchors.top: parent.top
+                                anchors.margins: Theme.spacingS
+                                width: monitorNameText.contentWidth + Theme.spacingS * 2
+                                height: monitorNameText.contentHeight + Theme.spacingXS * 2
+                                radius: Theme.cornerRadius
+                                color: Theme.surface
+                                visible: labelItem.workspaceExists && labelItem.workspaceMonitorName !== ""
+
+                                StyledText {
+                                    id: monitorNameText
+                                    anchors.centerIn: parent
+                                    text: labelItem.workspaceMonitorName
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    font.weight: Font.Medium
+                                    color: Theme.surfaceText
+                                    horizontalAlignment: Text.AlignHCenter
+                                    verticalAlignment: Text.AlignVCenter
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modules/HyprWorkspaces/OverviewWindow.qml

@@ -0,0 +1,140 @@
+import QtQuick
+import QtQuick.Effects
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+
+Item {
+    id: root
+    property var toplevel
+    property var scale
+    required property bool overviewOpen
+    property var availableWorkspaceWidth
+    property var availableWorkspaceHeight
+    property bool restrictToWorkspace: true
+
+    readonly property var windowData: toplevel?.lastIpcObject || null
+    readonly property var monitorObj: toplevel?.monitor
+    readonly property var monitorData: monitorObj?.lastIpcObject || null
+
+    property real initX: Math.max(((windowData?.at?.[0] ?? 0) - (monitorData?.x ?? 0) - (monitorData?.reserved?.[0] ?? 0)) * root.scale, 0) + xOffset
+    property real initY: Math.max(((windowData?.at?.[1] ?? 0) - (monitorData?.y ?? 0) - (monitorData?.reserved?.[1] ?? 0)) * root.scale, 0) + yOffset
+    property real xOffset: 0
+    property real yOffset: 0
+    property int widgetMonitorId: 0
+
+    property var targetWindowWidth: (windowData?.size?.[0] ?? 100) * scale
+    property var targetWindowHeight: (windowData?.size?.[1] ?? 100) * scale
+    property bool hovered: false
+    property bool pressed: false
+
+    property var iconToWindowRatio: 0.25
+    property var iconToWindowRatioCompact: 0.45
+    property var entry: DesktopEntries.heuristicLookup(windowData?.class)
+    property var iconPath: Quickshell.iconPath(entry?.icon ?? windowData?.class ?? "application-x-executable", "image-missing")
+    property bool compactMode: Theme.fontSizeSmall * 4 > targetWindowHeight || Theme.fontSizeSmall * 4 > targetWindowWidth
+
+    x: initX
+    y: initY
+    width: Math.min((windowData?.size?.[0] ?? 100) * root.scale, availableWorkspaceWidth)
+    height: Math.min((windowData?.size?.[1] ?? 100) * root.scale, availableWorkspaceHeight)
+    opacity: (monitorObj?.id ?? -1) == widgetMonitorId ? 1 : 0.4
+
+    Rectangle {
+        id: maskRect
+        width: root.width
+        height: root.height
+        radius: Theme.cornerRadius
+        visible: false
+        layer.enabled: true
+    }
+
+    layer.enabled: true
+    layer.effect: MultiEffect {
+        maskEnabled: true
+        maskSource: maskRect
+        maskSpreadAtMin: 1
+        maskThresholdMin: 0.5
+    }
+
+    Behavior on x {
+        NumberAnimation {
+            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+        }
+    }
+    Behavior on y {
+        NumberAnimation {
+            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+        }
+    }
+    Behavior on width {
+        NumberAnimation {
+            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+        }
+    }
+    Behavior on height {
+        NumberAnimation {
+            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+        }
+    }
+
+    ScreencopyView {
+        id: windowPreview
+        anchors.fill: parent
+        captureSource: root.overviewOpen ? root.toplevel?.wayland : null
+        live: true
+
+        Rectangle {
+            anchors.fill: parent
+            radius: Theme.cornerRadius
+            color: pressed ? Theme.withAlpha(Theme.surfaceContainerHigh, 0.5) :
+                hovered ? Theme.withAlpha(Theme.surfaceVariant, 0.3) :
+                Theme.withAlpha(Theme.surfaceContainer, 0.1)
+            border.color: Theme.withAlpha(Theme.outline, 0.3)
+            border.width: 1
+        }
+
+        ColumnLayout {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.right: parent.right
+            spacing: Theme.fontSizeSmall * 0.5
+
+            Image {
+                id: windowIcon
+                property var iconSize: {
+                    return Math.min(targetWindowWidth, targetWindowHeight) * (root.compactMode ? root.iconToWindowRatioCompact : root.iconToWindowRatio) / (root.monitorData?.scale ?? 1)
+                }
+                Layout.alignment: Qt.AlignHCenter
+                source: root.iconPath
+                width: iconSize
+                height: iconSize
+                sourceSize: Qt.size(iconSize, iconSize)
+
+                Behavior on width {
+                    NumberAnimation {
+                        duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+                    }
+                }
+                Behavior on height {
+                    NumberAnimation {
+                        duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+                    }
+                }
+            }
+        }
+    }
+}

README.md

@@ -460,7 +460,8 @@ bind = SUPER, comma, exec, dms ipc call settings toggle
 bind = SUPER, P, exec, dms ipc call notepad toggle
 bind = SUPERALT, L, exec, dms ipc call lock lock
 bind = SUPER, X, exec, dms ipc call powermenu toggle
-bind = SUPER, C, exec, dms ipc call control-center toggle 
+bind = SUPER, C, exec, dms ipc call control-center toggle
+bind = SUPER, TAB, exec, dms ipc call hypr toggleOverview
 
 # Audio controls (function keys)
 bindl = , XF86AudioRaiseVolume, exec, dms ipc call audio increment 3

Services/CompositorService.qml

@@ -1,5 +1,4 @@
 pragma Singleton
-
 pragma ComponentBehavior: Bound
 
 import QtQuick
@@ -17,67 +16,300 @@ Singleton {
 
     readonly property string hyprlandSignature: Quickshell.env("HYPRLAND_INSTANCE_SIGNATURE")
     readonly property string niriSocket: Quickshell.env("NIRI_SOCKET")
-
     property bool useNiriSorting: isNiri && NiriService
 
-    property var sortedToplevels: {
-        if (!ToplevelManager.toplevels || !ToplevelManager.toplevels.values) {
+    property var sortedToplevels: sortedToplevelsCache
+    property var sortedToplevelsCache: []
+
+    property bool _sortScheduled: false
+    property bool _refreshScheduled: false
+    property bool _hasRefreshedOnce: false
+
+    property var _coordCache: ({})
+
+    Timer {
+        id: refreshTimer
+        interval: 40
+        repeat: false
+        onTriggered: {
+            try {
+                Hyprland.refreshToplevels()
+            } catch(e) {}
+            _refreshScheduled = false
+            _hasRefreshedOnce = true
+            scheduleSort()
+        }
+    }
+
+    function scheduleSort() {
+        if (_sortScheduled) return
+        _sortScheduled = true
+        Qt.callLater(function() {
+            _sortScheduled = false
+            sortedToplevelsCache = computeSortedToplevels()
+        })
+    }
+
+    function scheduleRefresh() {
+        if (!isHyprland) return
+        if (_refreshScheduled) return
+        _refreshScheduled = true
+        refreshTimer.restart()
+    }
+
+    Connections {
+        target: ToplevelManager.toplevels
+        function onValuesChanged() { root.scheduleSort() }
+    }
+    Connections {
+        target: Hyprland.toplevels
+        function onValuesChanged() {
+            root._hasRefreshedOnce = false
+            root.scheduleSort()
+        }
+    }
+    Connections {
+        target: Hyprland.workspaces
+        function onValuesChanged() { root.scheduleSort() }
+    }
+    Connections {
+        target: Hyprland
+        function onFocusedWorkspaceChanged() { root.scheduleSort() }
+    }
+
+    Component.onCompleted: {
+        detectCompositor()
+        scheduleSort()
+        Qt.callLater(() => NiriService.generateNiriLayoutConfig())
+    }
+
+    function computeSortedToplevels() {
+        if (!ToplevelManager.toplevels || !ToplevelManager.toplevels.values)
             return []
-        }
 
-        if (useNiriSorting) {
+        if (useNiriSorting)
             return NiriService.sortToplevels(ToplevelManager.toplevels.values)
+
+        if (isHyprland)
+            return sortHyprlandToplevelsSafe()
+
+        return Array.from(ToplevelManager.toplevels.values)
+    }
+
+    function _get(o, path, fallback) {
+        try {
+            let v = o
+            for (let i = 0; i < path.length; i++) {
+                if (v === null || v === undefined) return fallback
+                v = v[path[i]]
+            }
+            return (v === undefined || v === null) ? fallback : v
+        } catch (e) { return fallback }
+    }
+
+    function sortHyprlandToplevelsSafe() {
+        if (!Hyprland.toplevels || !Hyprland.toplevels.values) return []
+        if (_refreshScheduled) return sortedToplevelsCache
+
+        const items = Array.from(Hyprland.toplevels.values)
+
+        function _get(o, path, fb) {
+            try {
+                let v = o
+                for (let k of path) { if (v == null) return fb; v = v[k] }
+                return (v == null) ? fb : v
+            } catch(e) { return fb }
         }
 
-        if (isHyprland) {
-            const hyprlandToplevels = Array.from(Hyprland.toplevels.values)
+        let snap = []
+        let missingAnyPosition = false
+        let hasNewWindow = false
+        for (let i = 0; i < items.length; i++) {
+            const t = items[i]
+            if (!t) continue
 
-            const sortedHyprland = hyprlandToplevels.sort((a, b) => {
-                                                              if (a.monitor && b.monitor) {
-                                                                  const monitorCompare = a.monitor.name.localeCompare(b.monitor.name)
-                                                                  if (monitorCompare !== 0) {
-                                                                      return monitorCompare
-                                                                  }
-                                                              }
+            const addr = t.address || ""
+            const li = t.lastIpcObject || null
 
-                                                              if (a.workspace && b.workspace) {
-                                                                  const workspaceCompare = a.workspace.id - b.workspace.id
-                                                                  if (workspaceCompare !== 0) {
-                                                                      return workspaceCompare
-                                                                  }
-                                                              }
+            const monName = _get(li, ["monitor"], null) ?? _get(t, ["monitor", "name"], "")
+            const monX = _get(t, ["monitor", "x"], Number.MAX_SAFE_INTEGER)
+            const monY = _get(t, ["monitor", "y"], Number.MAX_SAFE_INTEGER)
 
-                                                              if (a.lastIpcObject && b.lastIpcObject && a.lastIpcObject.at && b.lastIpcObject.at) {
-                                                                  const aX = a.lastIpcObject.at[0]
-                                                                  const bX = b.lastIpcObject.at[0]
-                                                                  const aY = a.lastIpcObject.at[1]
-                                                                  const bY = b.lastIpcObject.at[1]
+            const wsId = _get(li, ["workspace", "id"], null) ?? _get(t, ["workspace", "id"], Number.MAX_SAFE_INTEGER)
 
-                                                                  const xCompare = aX - bX
-                                                                  if (Math.abs(xCompare) > 10) {
-                                                                      return xCompare
-                                                                  }
-                                                                  return aY - bY
-                                                              }
+            const at = _get(li, ["at"], null)
+            let atX = (at !== null && at !== undefined && typeof at[0] === "number") ? at[0] : NaN
+            let atY = (at !== null && at !== undefined && typeof at[1] === "number") ? at[1] : NaN
 
-                                                              if (a.lastIpcObject && !b.lastIpcObject) {
-                                                                  return -1
-                                                              }
-                                                              if (!a.lastIpcObject && b.lastIpcObject) {
-                                                                  return 1
-                                                              }
+            if (!(atX === atX) || !(atY === atY)) {
+                const cached = _coordCache[addr]
+                if (cached) {
+                    atX = cached.x
+                    atY = cached.y
+                } else {
+                    if (addr) hasNewWindow = true
+                    missingAnyPosition = true
+                    atX = 1e9
+                    atY = 1e9
+                }
+            } else if (addr) {
+                _coordCache[addr] = { x: atX, y: atY }
+            }
 
-                                                              if (a.title && b.title) {
-                                                                  return a.title.localeCompare(b.title)
-                                                              }
+            const relX = Number.isFinite(monX) ? (atX - monX) : atX
+            const relY = Number.isFinite(monY) ? (atY - monY) : atY
 
-                                                              return 0
-                                                          })
-
-            return sortedHyprland.map(hyprToplevel => hyprToplevel.wayland).filter(wayland => wayland !== null)
+            snap.push({
+                monKey: String(monName),
+                monOrderX: Number.isFinite(monX) ? monX : Number.MAX_SAFE_INTEGER,
+                monOrderY: Number.isFinite(monY) ? monY : Number.MAX_SAFE_INTEGER,
+                wsId: (typeof wsId === "number") ? wsId : Number.MAX_SAFE_INTEGER,
+                x: relX,
+                y: relY,
+                title: t.title || "",
+                address: addr,
+                wayland: t.wayland
+            })
         }
 
-        return ToplevelManager.toplevels.values
+        if (missingAnyPosition && hasNewWindow) {
+            _hasRefreshedOnce = false
+            scheduleRefresh()
+        }
+
+        const groups = new Map()
+        for (const it of snap) {
+            const key = it.monKey + "::" + it.wsId
+            if (!groups.has(key)) groups.set(key, [])
+            groups.get(key).push(it)
+        }
+
+        let groupList = []
+        for (const [key, arr] of groups) {
+            const repr = arr[0]
+            groupList.push({
+                key,
+                monKey: repr.monKey,
+                monOrderX: repr.monOrderX,
+                monOrderY: repr.monOrderY,
+                wsId: repr.wsId,
+                items: arr
+            })
+        }
+
+        groupList.sort((a, b) => {
+            if (a.monOrderX !== b.monOrderX) return a.monOrderX - b.monOrderX
+            if (a.monOrderY !== b.monOrderY) return a.monOrderY - b.monOrderY
+            if (a.monKey !== b.monKey) return a.monKey.localeCompare(b.monKey)
+            if (a.wsId !== b.wsId) return a.wsId - b.wsId
+            return 0
+        })
+
+        const COLUMN_THRESHOLD = 48
+        const JITTER_Y = 6
+
+        let ordered = []
+        for (const g of groupList) {
+            const arr = g.items
+
+            const xs = arr.map(it => it.x).filter(x => Number.isFinite(x)).sort((a, b) => a - b)
+            let colCenters = []
+            if (xs.length > 0) {
+                for (const x of xs) {
+                    if (colCenters.length === 0) {
+                        colCenters.push(x)
+                    } else {
+                        const last = colCenters[colCenters.length - 1]
+                        if (x - last >= COLUMN_THRESHOLD) {
+                            colCenters.push(x)
+                        }
+                    }
+                }
+            } else {
+                colCenters = [0]
+            }
+
+            for (const it of arr) {
+                let bestCol = 0
+                let bestDist = Number.POSITIVE_INFINITY
+                for (let ci = 0; ci < colCenters.length; ci++) {
+                    const d = Math.abs(it.x - colCenters[ci])
+                    if (d < bestDist) {
+                        bestDist = d
+                        bestCol = ci
+                    }
+                }
+                it._col = bestCol
+            }
+
+            arr.sort((a, b) => {
+                if (a._col !== b._col) return a._col - b._col
+
+                const dy = a.y - b.y
+                if (Math.abs(dy) > JITTER_Y) return dy
+
+                if (a.title !== b.title) return a.title.localeCompare(b.title)
+                if (a.address !== b.address) return a.address.localeCompare(b.address)
+                return 0
+            })
+
+            ordered.push.apply(ordered, arr)
+        }
+
+        return ordered.map(x => x.wayland).filter(w => w !== null && w !== undefined)
+    }
+
+    function filterCurrentWorkspace(toplevels, screen) {
+        if (useNiriSorting) return NiriService.filterCurrentWorkspace(toplevels, screen)
+        if (isHyprland) return filterHyprlandCurrentWorkspaceSafe(toplevels, screen)
+        return toplevels
+    }
+
+    function filterHyprlandCurrentWorkspaceSafe(toplevels, screenName) {
+        if (!toplevels || toplevels.length === 0 || !Hyprland.toplevels) return toplevels
+
+        let currentWorkspaceId = null
+        try {
+            const hy = Array.from(Hyprland.toplevels.values)
+            for (const t of hy) {
+                const mon = _get(t, ["monitor", "name"], "")
+                const wsId = _get(t, ["workspace", "id"], null)
+                const active = !!_get(t, ["activated"], false)
+                if (mon === screenName && wsId !== null) {
+                    if (active) { currentWorkspaceId = wsId; break }
+                    if (currentWorkspaceId === null) currentWorkspaceId = wsId
+                }
+            }
+
+            if (currentWorkspaceId === null && Hyprland.workspaces) {
+                const wss = Array.from(Hyprland.workspaces.values)
+                const focusedId = _get(Hyprland, ["focusedWorkspace", "id"], null)
+                for (const ws of wss) {
+                    const monName = _get(ws, ["monitor"], "")
+                    const wsId = _get(ws, ["id"], null)
+                    if (monName === screenName && wsId !== null) {
+                        if (focusedId !== null && wsId === focusedId) { currentWorkspaceId = wsId; break }
+                        if (currentWorkspaceId === null) currentWorkspaceId = wsId
+                    }
+                }
+            }
+        } catch (e) {
+            console.warn("CompositorService: workspace snapshot failed:", e)
+        }
+
+        if (currentWorkspaceId === null) return toplevels
+
+        // Map wayland → wsId snapshot
+        let map = new Map()
+        try {
+            const hy = Array.from(Hyprland.toplevels.values)
+            for (const t of hy) {
+                const wsId = _get(t, ["workspace", "id"], null)
+                if (t && t.wayland && wsId !== null) map.set(t.wayland, wsId)
+            }
+        } catch (e) {}
+
+        return toplevels.filter(w => map.get(w) === currentWorkspaceId)
     }
 
     Timer {
@@ -91,86 +323,30 @@ Singleton {
         }
     }
 
-    function filterCurrentWorkspace(toplevels, screen) {
-        if (useNiriSorting) {
-            return NiriService.filterCurrentWorkspace(toplevels, screen)
-        }
-        if (isHyprland) {
-            return filterHyprlandCurrentWorkspace(toplevels, screen)
-        }
-        return toplevels
-    }
-
-    function filterHyprlandCurrentWorkspace(toplevels, screenName) {
-        if (!toplevels || toplevels.length === 0 || !Hyprland.toplevels) {
-            return toplevels
-        }
-
-        let currentWorkspaceId = null
-        const hyprlandToplevels = Array.from(Hyprland.toplevels.values)
-
-        for (const hyprToplevel of hyprlandToplevels) {
-            if (hyprToplevel.monitor && hyprToplevel.monitor.name === screenName && hyprToplevel.workspace) {
-                if (hyprToplevel.activated) {
-                    currentWorkspaceId = hyprToplevel.workspace.id
-                    break
-                }
-                if (currentWorkspaceId === null) {
-                    currentWorkspaceId = hyprToplevel.workspace.id
-                }
-            }
-        }
-
-        if (currentWorkspaceId === null && Hyprland.workspaces) {
-            const workspaces = Array.from(Hyprland.workspaces.values)
-            for (const workspace of workspaces) {
-                if (workspace.monitor && workspace.monitor === screenName) {
-                    if (Hyprland.focusedWorkspace && workspace.id === Hyprland.focusedWorkspace.id) {
-                        currentWorkspaceId = workspace.id
-                        break
-                    }
-                    if (currentWorkspaceId === null) {
-                        currentWorkspaceId = workspace.id
-                    }
-                }
-            }
-        }
-
-        if (currentWorkspaceId === null) {
-            return toplevels
-        }
-
-        return toplevels.filter(toplevel => {
-                                    for (const hyprToplevel of hyprlandToplevels) {
-                                        if (hyprToplevel.wayland === toplevel) {
-                                            return hyprToplevel.workspace && hyprToplevel.workspace.id === currentWorkspaceId
-                                        }
-                                    }
-                                    return false
-                                })
-    }
-
     function detectCompositor() {
         if (hyprlandSignature && hyprlandSignature.length > 0) {
             isHyprland = true
             isNiri = false
             compositor = "hyprland"
             console.log("CompositorService: Detected Hyprland")
+            try {
+                Hyprland.refreshToplevels()
+            } catch(e) {}
             return
         }
 
         if (niriSocket && niriSocket.length > 0) {
-            Proc.runCommand("niriSocketCheck", ["test", "-S", root.niriSocket], (output, exitCode) => {
+            Proc.runCommand("niriSocketCheck", ["test", "-S", niriSocket], (output, exitCode) => {
                 if (exitCode === 0) {
-                    root.isNiri = true
-                    root.isHyprland = false
-                    root.compositor = "niri"
-                    console.log("CompositorService: Detected Niri with socket:", root.niriSocket)
+                    isNiri = true
+                    isHyprland = false
+                    compositor = "niri"
+                    console.log("CompositorService: Detected Niri with socket:", niriSocket)
                     NiriService.generateNiriBinds()
                 } else {
-                    root.isHyprland = false
-                    root.isNiri = true
-                    root.compositor = "niri"
+                    isHyprland = false
+                    isNiri = true
+                    compositor = "niri"
                     console.warn("CompositorService: Niri socket check failed, defaulting to Niri anyway")
                 }
             }, 0)
@@ -183,22 +359,14 @@ Singleton {
     }
 
     function powerOffMonitors() {
-        if (isNiri) {
-            return NiriService.powerOffMonitors()
-        }
-        if (isHyprland) {
-            return Hyprland.dispatch("dpms off")
-        }
+        if (isNiri) return NiriService.powerOffMonitors()
+        if (isHyprland) return Hyprland.dispatch("dpms off")
         console.warn("CompositorService: Cannot power off monitors, unknown compositor")
     }
 
     function powerOnMonitors() {
-        if (isNiri) {
-            return NiriService.powerOnMonitors()
-        }
-        if (isHyprland) {
-            return Hyprland.dispatch("dpms on")
-        }
+        if (isNiri) return NiriService.powerOnMonitors()
+        if (isHyprland) return Hyprland.dispatch("dpms on")
         console.warn("CompositorService: Cannot power on monitors, unknown compositor")
     }
-}
+}

docs/IPC.md

@@ -512,7 +512,7 @@ File browser controls for selecting wallpapers and profile images.
   - Both browsers support common image formats (jpg, jpeg, png, bmp, gif, webp)
 
 ### Target: `hypr`
-Hyprland keybinds cheatsheet modal control (Hyprland only).
+Hyprland-specific controls including keybinds cheatsheet and workspace overview (Hyprland only).
 
 **Functions:**
 - `openBinds` - Show Hyprland keybinds cheatsheet modal
@@ -524,13 +524,31 @@ Hyprland keybinds cheatsheet modal control (Hyprland only).
 - `toggleBinds` - Toggle Hyprland keybinds cheatsheet modal visibility
   - Returns: Success/failure message
   - Note: Returns "HYPR_NOT_AVAILABLE" if not running Hyprland
+- `openOverview` - Show Hyprland workspace overview
+  - Returns: "OVERVIEW_OPEN_SUCCESS" or "HYPR_NOT_AVAILABLE"
+  - Displays all workspaces across all monitors with live window previews
+  - Allows drag-and-drop window movement between workspaces and monitors
+- `closeOverview` - Hide Hyprland workspace overview
+  - Returns: "OVERVIEW_CLOSE_SUCCESS" or "HYPR_NOT_AVAILABLE"
+- `toggleOverview` - Toggle Hyprland workspace overview visibility
+  - Returns: "OVERVIEW_OPEN_SUCCESS", "OVERVIEW_CLOSE_SUCCESS", or "HYPR_NOT_AVAILABLE"
 
-**Description:**
+**Keybinds Cheatsheet Description:**
 Displays an auto-categorized cheatsheet of all Hyprland keybinds parsed from `~/.config/hypr`. Keybinds are organized into three columns:
 - **Window / Monitor** - Window and monitor management keybinds (sorted by dispatcher)
 - **Workspace** - Workspace switching and management (sorted by dispatcher)
 - **Execute** - Application launchers and commands (sorted by keybind)
 
+**Workspace Overview Description:**
+Displays a live overview of all workspaces across all monitors with window previews:
+- **Multi-monitor support** - Shows workspaces from all connected monitors with monitor name labels
+- **Live window previews** - Real-time screen capture of all windows on each workspace
+- **Drag-and-drop** - Move windows between workspaces and monitors by dragging
+- **Keyboard navigation** - Use Left/Right arrow keys to switch between workspaces on current monitor
+- **Visual indicators** - Active workspace highlighted when it contains windows
+- **Click to switch** - Click any workspace to switch to it
+- **Click outside or press Escape** - Close the overview
+
 ### Modal Examples
 ```bash
 # Open application launcher
@@ -570,6 +588,11 @@ dms ipc call file browse profile
 # Show Hyprland keybinds cheatsheet (Hyprland only)
 dms ipc call hypr toggleBinds
 dms ipc call hypr openBinds
+
+# Show Hyprland workspace overview (Hyprland only)
+dms ipc call hypr toggleOverview
+dms ipc call hypr openOverview
+dms ipc call hypr closeOverview
 ```
 
 ## Common Usage Patterns
@@ -597,6 +620,7 @@ bind = SUPER, V, exec, qs -c dms ipc call clipboard toggle
 bind = SUPER, P, exec, qs -c dms ipc call notepad toggle
 bind = SUPER, X, exec, qs -c dms ipc call powermenu toggle
 bind = SUPER, slash, exec, qs -c dms ipc call hypr toggleBinds
+bind = SUPER, Tab, exec, qs -c dms ipc call hypr toggleOverview
 bind = , XF86AudioRaiseVolume, exec, qs -c dms ipc call audio increment 3
 bind = , XF86MonBrightnessUp, exec, qs -c dms ipc call brightness increment 5 ""
 ```