Workspace overview

Lock.qml

@@ -21,7 +21,6 @@ WlSessionLock {
         color: "transparent"
 
         Rectangle {
-            id: content
             anchors.fill: parent
             opacity: !lock.animate || capture.ready
             color: "#000"
@@ -30,7 +29,7 @@ WlSessionLock {
                 radius: 16
                 color: "#141414"
                 Image {
-                    source: Quickshell.shellPath("lockbg")
+                    source: Quickshell.shellPath("assets/lockbg")
                     anchors.fill: parent
                     fillMode: Image.PreserveAspectCrop
                 }

Panes/Overview.qml

@@ -0,0 +1,74 @@
+import QtQuick
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Widgets
+import Quickshell.Wayland
+
+Grid {
+    id: overview
+    anchors {
+        top: parent.top
+        horizontalCenter: parent.horiontalCenter
+    }
+    spacing: 6
+    padding: 6
+    columns: 5
+    horizontalItemAlignment: Grid.AlignHCenter
+    verticalItemAlignment: Grid.AlignVCenter
+    component WorkspaceView: ClippingRectangle {
+        color: "#282828"
+        width: 192
+        radius: 8
+        topLeftRadius: modelData == 0 ? 12 : this.radius
+        topRightRadius: modelData == 4 ? 12 : this.radius
+        bottomLeftRadius: modelData == 5 ? 12 : this.radius
+        height: this.width * Hyprland.focusedMonitor?.height / Hyprland.focusedMonitor?.width
+        border {
+            width: 2
+            color: {
+                if (Hyprland.focusedWorkspace?.id == modelData + 1) {
+                    return "#ffffffff"
+                }
+                if (hover.hovered) {
+                    return "#aaffffff"
+                }
+                return "#00ffffff"
+                
+            } 
+            Behavior on color { ColorAnimation {duration: 150} }
+        }
+        required property var modelData
+        Image {
+            anchors.fill: parent
+            source: Quickshell.shellPath('assets/wallpaper')
+            fillMode: Image.PreserveAspectCrop
+        }
+        Repeater {
+            model: Hyprland.toplevels.values.filter(tl => tl.workspace?.id == modelData + 1)
+            delegate: ClippingRectangle {
+                x: modelData.lastIpcObject.at[0] / 10 - 2
+                y: modelData.lastIpcObject.at[1] / 10 - 2
+                width: modelData.lastIpcObject.size[0] / 10
+                height: modelData.lastIpcObject.size[1] / 10
+                ScreencopyView {
+                    anchors.fill: parent
+                    captureSource: modelData.wayland
+                    live: background.index == 7
+                }
+            }
+        }
+        TapHandler { onTapped: {
+            Hyprland.dispatch(`hl.dsp.focus({workspace = ${modelData + 1}})`)
+            root.close()
+        }}
+        HoverHandler { id: hover }
+    }
+    Repeater {
+        model: 9
+        WorkspaceView {}
+    }
+    WorkspaceView {
+        modelData: -100 
+        bottomRightRadius: 12
+    }
+}

TopBar.qml

@@ -48,6 +48,11 @@ PanelWindow {
         }
     }
 
+    mask: Region {
+        x: background.x; y: background.y
+        width: background.width; height: background.height
+    }
+
     function open() {
         root.visible = true
         background.exit.stop()
@@ -159,6 +164,7 @@ PanelWindow {
         Pane { Panes.Notifications {} }
         Pane { Panes.Volume {} }
         Pane { Panes.Brightness {} }
+        Pane { Panes.Overview {} }
 
         property var entry: SequentialAnimation {
             PauseAnimation {duration: 2}

Wall.qml

@@ -24,11 +24,11 @@ Variants {
         ClippingRectangle {
             anchors.fill: parent
             Image {
-                source: Quickshell.shellPath("wallpaper")
+                source: Quickshell.shellPath("assets/wallpaper")
                 anchors.fill: parent
                 fillMode: Image.PreserveAspectCrop
             }
-            radius: 16
+            radius: 14
             // PropertyAnimation on radius {
             //     id: radiusAnimation
             //     running: false

Widgets/Workspaces.qml

@@ -5,7 +5,14 @@ import Quickshell.Hyprland
 import Quickshell
 
 Item {
-    width: children[0].width
+    width: children[1].width + 16
+    Rectangle {
+        anchors.fill: parent
+        anchors.margins: 4
+        radius: 12
+        color: hover.hovered ? "#11ffffff": "#00ffffff"
+        Behavior on color {ColorAnimation {duration: 150}}
+    }
     Row {
         id: workspaceRow
         height: parent.height
@@ -51,7 +58,7 @@ Item {
         }
     }
     Rectangle {
-        x: (Hyprland.focusedWorkspace.id-1) * (workspaceRow.children[0].width + workspaceRow.spacing) + 2
+        x: (Hyprland.focusedWorkspace.id-1) * (workspaceRow.children[0].width + workspaceRow.spacing) + 10
         y: 2
         Behavior on x {NumberAnimation {
             duration: 300
@@ -61,6 +68,8 @@ Item {
         height: 4
         radius: height/2
     }
+    HoverHandler {id: hover}
+    TapHandler { onTapped: background.index = 7 }
     Connections {
         target: Hyprland
         function onActiveToplevelChanged() {Hyprland.refreshToplevels()}