waffles: task view: workspaces

dots/.config/hypr/hyprland/general.conf

@@ -56,10 +56,10 @@ decoration {
         size = 10
         passes = 3
         brightness = 1
-        noise = 0.15
-        contrast = 0.2
-        vibrancy = 0.8
-        vibrancy_darkness = 0.8
+        noise = 0.05
+        contrast = 0.89
+        vibrancy = 0.5
+        vibrancy_darkness = 0.5
         popups = false
         popups_ignorealpha = 0.6
         input_methods = true

dots/.config/hypr/hyprland/rules.conf

@@ -158,6 +158,8 @@ layerrule = animation slide top, quickshell:wallpaperSelector
 layerrule = noanim, quickshell:wNotificationCenter
 layerrule = noanim, quickshell:wOnScreenDisplay
 layerrule = noanim, quickshell:wStartMenu
+layerrule = ignorealpha 0, quickshell:wTaskView
+layerrule = noanim, quickshell:wTaskView
 
 # Launchers need to be FAST
 layerrule = noanim, gtk4-layer-shell

dots/.config/quickshell/ii/modules/ii/overview/OverviewWidget.qml

@@ -159,12 +159,12 @@ Item {
                 model: ScriptModel {
                     values: {
                         // console.log(JSON.stringify(ToplevelManager.toplevels.values.map(t => t), null, 2))
-                        return [...ToplevelManager.toplevels.values.filter((toplevel) => {
+                        return ToplevelManager.toplevels.values.filter((toplevel) => {
                             const address = `0x${toplevel.HyprlandToplevel?.address}`
                             var win = windowByAddress[address]
                             const inWorkspaceGroup = (root.workspaceGroup * root.workspacesShown < win?.workspace?.id && win?.workspace?.id <= (root.workspaceGroup + 1) * root.workspacesShown)
                             return inWorkspaceGroup;
-                        })].reverse()
+                        })
                     }
                 }
                 delegate: OverviewWindow {

dots/.config/quickshell/ii/modules/waffle/looks/WMouseAreaButton.qml

@@ -0,0 +1,45 @@
+import QtQuick
+import qs
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+MouseArea {
+    id: root
+
+    property real radius: Looks.radius.medium
+    hoverEnabled: true
+
+    property color colBackground: ColorUtils.transparentize(Looks.colors.bg2)
+    property color colBackgroundHover: Looks.colors.bg2Hover
+    property color colBackgroundActive: Looks.colors.bg2Active
+    property color colBorder: ColorUtils.transparentize(Looks.colors.bg2Border)
+    property color colBorderHover: Looks.colors.bg2Border
+    
+    property color color: {
+        if (containsMouse) {
+            return pressed ? colBackgroundActive : colBackgroundHover;
+        } else {
+            return colBackground;
+        }
+    }
+
+    property color borderColor: {
+        if (containsMouse) {
+            return colBorderHover;
+        } else {
+            return colBorder;
+        }
+    }
+
+    property Item background: Rectangle {
+        id: bgRect
+        parent: root
+        anchors.fill: parent
+        color: root.color
+        radius: root.radius
+
+        border.color: root.borderColor
+        border.width: 1
+    }
+}

dots/.config/quickshell/ii/modules/waffle/taskView/TaskViewContent.qml

@@ -0,0 +1,96 @@
+import QtQuick
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+
+Rectangle {
+    id: root
+
+    color: ColorUtils.transparentize(Looks.colors.bg1Base, 0.5)
+    property real openProgress: 0
+
+    Component.onCompleted: {
+        openAnim.start();
+    }
+
+    PropertyAnimation {
+        id: openAnim
+        target: root
+        property: "openProgress"
+        to: 1
+        duration: 200
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Looks.transition.easing.bezierCurve.easeIn
+    }
+    PropertyAnimation {
+        id: closeAnim
+        target: root
+        property: "openProgress"
+        to: 0
+        duration: 200
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Looks.transition.easing.bezierCurve.easeIn
+    }
+
+    // Workspaces
+    Rectangle {
+        id: wsBorder
+        property real sourceEdgeMargin: -(height + 8) + root.openProgress * (height + 16)
+        anchors {
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+            leftMargin: 8
+            rightMargin: 8
+            topMargin: sourceEdgeMargin
+            bottomMargin: sourceEdgeMargin
+        }
+        border.color: Looks.colors.bg2Border
+        border.width: 1
+        radius: Looks.radius.large
+        color: "transparent"
+
+        implicitHeight: wsBg.implicitHeight + border.width * 2
+
+        Rectangle {
+            id: wsBg
+            anchors.fill: parent
+            anchors.margins: wsBorder.border.width
+            radius: wsBorder.radius - wsBorder.border.width
+            color: Looks.colors.bgPanelFooterBase
+
+            implicitHeight: 174
+            
+            ListView {
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                    horizontalCenter: parent.horizontalCenter
+                    topMargin: 5
+                    bottomMargin: 5
+                }
+                width: Math.min(contentWidth + leftMargin + rightMargin, parent.width)
+                leftMargin: 5
+                rightMargin: 5
+                clip: true
+                orientation: ListView.Horizontal
+                spacing: 4
+
+                model: ScriptModel {
+                    values: {
+                        const maxWorkspaceId = Math.max.apply(null, HyprlandData.workspaces.map(ws => ws.id))
+                        return Array(maxWorkspaceId)
+                    }
+                }
+                delegate: TaskViewWorkspace {
+                    required property int index
+                    workspace: index + 1
+                }
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/waffle/taskView/TaskViewWorkspace.qml

@@ -0,0 +1,97 @@
+import QtQuick
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+
+WMouseAreaButton {
+    id: root
+
+    required property int workspace
+
+    readonly property real screenWidth: QsWindow.window.width
+    readonly property real screenHeight: QsWindow.window.height
+    readonly property real screenAspectRatio: screenWidth / screenHeight
+    readonly property real screenScale: QsWindow.window.devicePixelRatio
+    readonly property real scale: 0.1148148148
+
+    height: ListView.view.height
+    implicitWidth: 244 // for now
+
+    onClicked: {
+        GlobalStates.overviewOpen = false;
+        Hyprland.dispatch(`workspace ${root.workspace}`);
+    }
+
+    ColumnLayout {
+        anchors {
+            fill: parent
+            leftMargin: 12
+            rightMargin: 12
+            topMargin: 9
+            bottomMargin: 8
+        }
+        spacing: 8
+
+        WText {
+            Layout.fillWidth: true
+            Layout.fillHeight: false
+            horizontalAlignment: Text.AlignLeft
+            elide: Text.ElideRight
+            text: Translation.tr("Desktop %1").arg(root.workspace)
+        }
+
+        Rectangle {
+            id: wsBg
+            height: 124
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            color: Looks.colors.bg1Base
+
+            layer.enabled: true
+            layer.effect: OpacityMask {
+                maskSource: Rectangle {
+                    width: wsBg.width
+                    height: wsBg.height
+                    radius: Looks.radius.medium
+                }
+            }
+
+            StyledImage {
+                anchors.fill: parent
+                cache: true
+                sourceSize: Qt.size(root.screenAspectRatio * 124, 124)
+                source: Config.options.background.wallpaperPath
+                fillMode: Image.PreserveAspectCrop
+
+                Repeater {
+                    model: ScriptModel {
+                        values: ToplevelManager.toplevels.values.filter(toplevel => {
+                            const address = `0x${toplevel.HyprlandToplevel?.address}`;
+                            var win = HyprlandData.windowByAddress[address];
+                            const inWorkspace = win?.workspace?.id === root.workspace;
+                            return inWorkspace;
+                        })
+                    }
+                    delegate: ScreencopyView {
+                        required property var modelData
+                        readonly property var hyprlandWindowData: HyprlandData.windowByAddress[`0x${modelData.HyprlandToplevel?.address}`]
+                        captureSource: modelData
+                        live: true
+                        width: hyprlandWindowData?.size[0] * root.scale
+                        height: hyprlandWindowData?.size[1] * root.scale
+                        x: hyprlandWindowData?.at[0] * root.scale
+                        y: hyprlandWindowData?.at[1] * root.scale
+                    }
+                }
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/waffle/taskView/WaffleTaskView.qml

@@ -0,0 +1,84 @@
+pragma ComponentBehavior: Bound
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import Qt.labs.synchronizer
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import Quickshell.Hyprland
+
+Scope {
+    id: overviewScope
+    property bool dontAutoCancelSearch: false
+
+    Variants {
+        id: overviewVariants
+        model: Quickshell.screens
+
+        Loader {
+            id: panelLoader
+            required property var modelData
+            active: GlobalStates.overviewOpen
+            sourceComponent: PanelWindow {
+                id: root
+                property string searchingText: ""
+                readonly property HyprlandMonitor monitor: Hyprland.monitorFor(root.screen)
+                property bool monitorIsFocused: (Hyprland.focusedMonitor?.id == monitor?.id)
+                screen: panelLoader.modelData
+
+                WlrLayershell.namespace: "quickshell:wTaskView"
+                WlrLayershell.layer: WlrLayer.Overlay
+                // WlrLayershell.keyboardFocus: GlobalStates.overviewOpen ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+                color: "transparent"
+
+                anchors {
+                    top: true
+                    bottom: true
+                    left: true
+                    right: true
+                }
+
+                TaskViewContent {
+                    anchors.fill: parent
+                }
+            }
+        }
+    }
+
+    IpcHandler {
+        target: "search"
+
+        function toggle() {
+            GlobalStates.overviewOpen = !GlobalStates.overviewOpen;
+        }
+        function workspacesToggle() {
+            GlobalStates.overviewOpen = !GlobalStates.overviewOpen;
+        }
+        function close() {
+            GlobalStates.overviewOpen = false;
+        }
+        function open() {
+            GlobalStates.overviewOpen = true;
+        }
+        function toggleReleaseInterrupt() {
+            GlobalStates.superReleaseMightTrigger = false;
+        }
+        function clipboardToggle() {
+            overviewScope.toggleClipboard();
+        }
+    }
+
+    GlobalShortcut {
+        name: "overviewWorkspacesToggle"
+        description: "Toggles overview on press"
+
+        onPressed: {
+            GlobalStates.overviewOpen = !GlobalStates.overviewOpen;
+        }
+    }
+}

dots/.config/quickshell/ii/shell.qml

@@ -36,6 +36,7 @@ import qs.modules.waffle.onScreenDisplay
 import qs.modules.waffle.polkit
 import qs.modules.waffle.startMenu
 import qs.modules.waffle.sessionScreen
+import qs.modules.waffle.taskView
 
 import QtQuick
 import QtQuick.Window
@@ -90,6 +91,7 @@ ShellRoot {
     PanelLoader { identifier: "wPolkit"; component: WafflePolkit {} }
     PanelLoader { identifier: "wStartMenu"; component: WaffleStartMenu {} }
     PanelLoader { identifier: "wSessionScreen"; component: WaffleSessionScreen {} }
+    PanelLoader { identifier: "wTaskView"; component: WaffleTaskView {} }
     ReloadPopup {}
 
     component PanelLoader: LazyLoader {
@@ -102,7 +104,7 @@ ShellRoot {
     property list<string> families: ["ii", "waffle"]
     property var panelFamilies: ({
         "ii": ["iiBar", "iiBackground", "iiCheatsheet", "iiDock", "iiLock", "iiMediaControls", "iiNotificationPopup", "iiOnScreenDisplay", "iiOnScreenKeyboard", "iiOverlay", "iiOverview", "iiPolkit", "iiRegionSelector", "iiScreenCorners", "iiSessionScreen", "iiSidebarLeft", "iiSidebarRight", "iiVerticalBar", "iiWallpaperSelector"],
-        "waffle": ["wActionCenter", "wBar", "wBackground", "wLock", "wNotificationCenter", "wOnScreenDisplay", "wPolkit", "wSessionScreen", "wStartMenu", "iiCheatsheet", "iiNotificationPopup", "iiOnScreenKeyboard", "iiOverlay", "iiRegionSelector", "iiWallpaperSelector"],
+        "waffle": ["wActionCenter", "wBar", "wBackground", "wLock", "wNotificationCenter", "wOnScreenDisplay", "wTaskView", "wPolkit", "wSessionScreen", "wStartMenu", "iiCheatsheet", "iiNotificationPopup", "iiOnScreenKeyboard", "iiOverlay", "iiRegionSelector", "iiWallpaperSelector"],
     })
     function cyclePanelFamily() {
         const currentIndex = families.indexOf(Config.options.panelFamily)