dock: join pinned apps and open windows

.config/quickshell/modules/dock/Dock.qml

@@ -120,26 +120,6 @@ Scope { // Scope
                                 }
                             }
                             DockSeparator {}
-                            // Pinned apps
-                            Repeater {
-                                model: ConfigOptions?.dock.pinnedApps ?? []
-                                
-                                DockButton {
-                                    id: pinnedAppButton
-                                    required property string modelData
-                                    property DesktopEntry entry: DesktopEntries.byId(modelData)
-                                    onClicked: {
-                                        pinnedAppButton?.entry.execute();
-                                    }
-                                    contentItem: IconImage {
-                                        anchors.centerIn: parent
-                                        source: Quickshell.iconPath(AppSearch.guessIcon(modelData), "image-missing")
-                                    }
-                                }
-                            }
-                            
-                            DockSeparator { visible: (ConfigOptions?.dock.pinnedApps ?? []).length > 0 }
-                            
                             DockApps { id: dockApps }
                             DockSeparator {}
                             DockButton {

.config/quickshell/modules/dock/DockAppButton.qml

@@ -14,8 +14,8 @@ import Quickshell.Wayland
 import Quickshell.Hyprland
 
 DockButton {
-    id: appButton
+    id: root
-    required property var appToplevel
+    property var appToplevel
     property var appListRoot
     property int lastFocused: -1
     property real iconSize: 35
@@ -23,56 +23,86 @@ DockButton {
     property real countDotHeight: 4
     property bool appIsActive: appToplevel.toplevels.find(t => (t.activated == true)) !== undefined
 
-    MouseArea {
+    property bool isSeparator: appToplevel.appId === "SEPARATOR"
-        id: mouseArea
+    enabled: !isSeparator
-        anchors.fill: parent
+    implicitWidth: isSeparator ? 1 : implicitHeight - topInset - bottomInset
-        hoverEnabled: true
+
-        acceptedButtons: Qt.NoButton
+    Loader {
-        onEntered: {
+        active: isSeparator
-            appListRoot.lastHoveredButton = appButton
+        anchors {
-            appListRoot.buttonHovered = true
+            fill: parent
-            lastFocused = appToplevel.toplevels.length - 1
+            topMargin: dockVisualBackground.margin + dockRow.padding + Appearance.rounding.normal
+            bottomMargin: dockVisualBackground.margin + dockRow.padding + Appearance.rounding.normal
         }
-        onExited: {
+        sourceComponent: DockSeparator {}
-            if (appListRoot.lastHoveredButton === appButton) {
+    }
-                appListRoot.buttonHovered = false
+
+    Loader {
+        anchors.fill: parent
+        active: appToplevel.toplevels.length > 0
+        sourceComponent: MouseArea {
+            id: mouseArea
+            anchors.fill: parent
+            hoverEnabled: true
+            acceptedButtons: Qt.NoButton
+            onEntered: {
+                appListRoot.lastHoveredButton = root
+                appListRoot.buttonHovered = true
+                lastFocused = appToplevel.toplevels.length - 1
+            }
+            onExited: {
+                if (appListRoot.lastHoveredButton === root) {
+                    appListRoot.buttonHovered = false
+                }
             }
         }
     }
+
     onClicked: {
+        if (appToplevel.toplevels.length === 0) {
+            DesktopEntries.byId(root.appToplevel.appId)?.execute();
+            return;
+        }
         lastFocused = (lastFocused + 1) % appToplevel.toplevels.length
         appToplevel.toplevels[lastFocused].activate()
     }
-    contentItem: Item {
-        anchors.centerIn: parent
 
-        IconImage {
+    contentItem: Loader {
-            id: iconImage
+        active: !isSeparator
-            anchors {
+        sourceComponent: Item {
-                left: parent.left
+            anchors.centerIn: parent
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            source: Quickshell.iconPath(AppSearch.guessIcon(appToplevel.appId), "image-missing")
-            implicitSize: appButton.iconSize
-        }
 
-        RowLayout {
+            Loader {
-            spacing: 3
+                id: iconImageLoader
-            anchors {
+                anchors {
-                top: iconImage.bottom
+                    left: parent.left
-                topMargin: 2
+                    right: parent.right
-                horizontalCenter: parent.horizontalCenter
+                    verticalCenter: parent.verticalCenter
+                }
+                active: !root.isSeparator
+                sourceComponent: IconImage {
+                    source: Quickshell.iconPath(AppSearch.guessIcon(appToplevel.appId), "image-missing")
+                    implicitSize: root.iconSize
+                }
             }
-            Repeater {
+
-                model: Math.min(appToplevel.toplevels.length, 3)
+            RowLayout {
-                delegate: Rectangle {
+                spacing: 3
-                    required property int index
+                anchors {
-                    radius: Appearance.rounding.full
+                    top: iconImageLoader.bottom
-                    implicitWidth: (appToplevel.toplevels.length <= 3) ? 
+                    topMargin: 2
-                        appButton.countDotWidth : appButton.countDotHeight // Circles when too many
+                    horizontalCenter: parent.horizontalCenter
-                    implicitHeight: appButton.countDotHeight
+                }
-                    color: appIsActive ? Appearance.m3colors.m3primary : ColorUtils.transparentize(Appearance.colors.colOnLayer0, 0.4)
+                Repeater {
+                    model: Math.min(appToplevel.toplevels.length, 3)
+                    delegate: Rectangle {
+                        required property int index
+                        radius: Appearance.rounding.full
+                        implicitWidth: (appToplevel.toplevels.length <= 3) ? 
+                            root.countDotWidth : root.countDotHeight // Circles when too many
+                        implicitHeight: root.countDotHeight
+                        color: appIsActive ? Appearance.m3colors.m3primary : ColorUtils.transparentize(Appearance.colors.colOnLayer0, 0.4)
+                    }
                 }
             }
         }

.config/quickshell/modules/dock/DockApps.qml

@@ -23,8 +23,9 @@ Item {
     property Item lastHoveredButton
     property bool buttonHovered: false
     property bool requestDockShow: previewPopup.show
-    property real popupX: parentWindow.mapFromItem(root.lastHoveredButton, root.lastHoveredButton.width / 2, root.lastHoveredButton.height / 2).x - implicitWidth / 2
+    property var parentWindow: root.QsWindow
-
+    property real popupX: parentWindow?.mapFromItem(root.lastHoveredButton, root.lastHoveredButton?.width / 2, root.lastHoveredButton?.height / 2).x - implicitWidth / 2
+        ?? 0
     implicitWidth: rowLayout.implicitWidth
     implicitHeight: rowLayout.implicitHeight
 
@@ -38,15 +39,33 @@ Item {
                 values: {
                     var map = new Map();
 
+                    // Pinned apps
+                    const pinnedApps = ConfigOptions?.dock.pinnedApps ?? [];
+                    for (const appId of pinnedApps) {
+                        if (!map.has(appId.toLowerCase())) map.set(appId.toLowerCase(), ({
+                            pinned: true,
+                            toplevels: []
+                        }));
+                    }
+
+                    // Separator
+                    if (pinnedApps.length > 0) {
+                        map.set("SEPARATOR", { pinned: false, toplevels: [] });
+                    }
+                    
+                    // Open windows
                     for (const toplevel of ToplevelManager.toplevels.values) {
-                        if (!map.has(toplevel.appId.toLowerCase())) map.set(toplevel.appId.toLowerCase(), []);
+                        if (!map.has(toplevel.appId.toLowerCase())) map.set(toplevel.appId.toLowerCase(), ({
-                        map.get(toplevel.appId.toLowerCase()).push(toplevel);
+                            pinned: false,
+                            toplevels: []
+                        }));
+                        map.get(toplevel.appId.toLowerCase()).toplevels.push(toplevel);
                     }
 
                     var values = [];
 
                     for (const [key, value] of map) {
-                        values.push({ appId: key, toplevels: value });
+                        values.push({ appId: key, toplevels: value.toplevels, pinned: value.pinned });
                     }
 
                     return values;
@@ -118,14 +137,9 @@ Item {
             anchors.bottom: parent.bottom
             implicitWidth: popupBackground.implicitWidth + Appearance.sizes.elevationMargin * 2
             implicitHeight: root.maxWindowPreviewHeight + root.windowControlsHeight + Appearance.sizes.elevationMargin * 2
-            // anchors.horizontalCenter: parent.horizontalCenter
             hoverEnabled: true
-            // x: previewPopup.width / 2 + root.popupX
-            // Behavior on x {
-            //     animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
-            // }
             x: {
-                const itemCenter = root.QsWindow.mapFromItem(root.lastHoveredButton, root.lastHoveredButton.width / 2, 0);
+                const itemCenter = root.QsWindow?.mapFromItem(root.lastHoveredButton, root.lastHoveredButton?.width / 2, 0);
                 return itemCenter.x - width / 2
             }
             StyledRectangularShadow {
@@ -163,7 +177,9 @@ Item {
                     id: previewRowLayout
                     anchors.centerIn: parent
                     Repeater {
-                        model: previewPopup.appTopLevel?.toplevels ?? []
+                        model: ScriptModel {
+                            values: previewPopup.appTopLevel?.toplevels ?? []
+                        }
                         RippleButton {
                             id: windowButton
                             required property var modelData