dock: fix alignment

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

@@ -88,7 +88,7 @@ Scope { // Scope
                             id: dockVisualBackground
                             property real margin: Appearance.sizes.elevationMargin
                             anchors.fill: parent
-                            anchors.topMargin: margin
+                            anchors.topMargin: Appearance.sizes.elevationMargin
                             anchors.bottomMargin: Appearance.sizes.hyprlandGapsOut
                             color: Appearance.colors.colLayer0
                             radius: Appearance.rounding.large
@@ -103,6 +103,7 @@ Scope { // Scope
                             property real padding: 5
 
                             VerticalButtonGroup {
+                                Layout.topMargin: Appearance.sizes.hyprlandGapsOut // why does this work
                                 GroupButton { // Pin button
                                     baseWidth: 35
                                     baseHeight: 35
@@ -120,12 +121,13 @@ Scope { // Scope
                                 }
                             }
                             DockSeparator {}
-                            DockApps { id: dockApps }
+                            DockApps { id: dockApps; }
                             DockSeparator {}
                             DockButton {
+                                Layout.fillHeight: true
                                 onClicked: Hyprland.dispatch("global quickshell:overviewToggle")
                                 contentItem: MaterialSymbol {
-                                    anchors.centerIn: parent
+                                    anchors.fill: parent
                                     horizontalAlignment: Text.AlignHCenter
                                     font.pixelSize: parent.width / 2
                                     text: "apps"

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

@@ -23,59 +23,66 @@ Item {
     property Item lastHoveredButton
     property bool buttonHovered: false
     property bool requestDockShow: previewPopup.show
-    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
 
-    RowLayout {
+    Layout.fillHeight: true
-        id: rowLayout
+    Layout.topMargin: Appearance.sizes.hyprlandGapsOut // why does this work
+    implicitWidth: listView.implicitWidth
+    
+    StyledListView {
+        id: listView
         spacing: 2
+        orientation: ListView.Horizontal
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+        }
+        implicitWidth: contentWidth
 
-        Repeater {
+        Behavior on implicitWidth {
-            model: ScriptModel {
+            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                objectProp: "appId"
+        }
-                values: {
-                    var map = new Map();
 
-                    // Pinned apps
+        model: ScriptModel {
-                    const pinnedApps = ConfigOptions?.dock.pinnedApps ?? [];
+            objectProp: "appId"
-                    for (const appId of pinnedApps) {
+            values: {
-                        if (!map.has(appId.toLowerCase())) map.set(appId.toLowerCase(), ({
+                var map = new Map();
-                            pinned: true,
-                            toplevels: []
-                        }));
-                    }
 
-                    // Separator
+                // Pinned apps
-                    if (pinnedApps.length > 0) {
+                const pinnedApps = ConfigOptions?.dock.pinnedApps ?? [];
-                        map.set("SEPARATOR", { pinned: false, toplevels: [] });
+                for (const appId of pinnedApps) {
-                    }
+                    if (!map.has(appId.toLowerCase())) map.set(appId.toLowerCase(), ({
-                    
+                        pinned: true,
-                    // Open windows
+                        toplevels: []
-                    for (const toplevel of ToplevelManager.toplevels.values) {
+                    }));
-                        if (!map.has(toplevel.appId.toLowerCase())) map.set(toplevel.appId.toLowerCase(), ({
-                            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.toplevels, pinned: value.pinned });
-                    }
-
-                    return values;
                 }
+
+                // 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(), ({
+                        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.toplevels, pinned: value.pinned });
+                }
+
+                return values;
             }
-            delegate: DockAppButton {
+        }
-                required property var modelData
+        delegate: DockAppButton {
-                appToplevel: modelData
+            required property var modelData
-                appListRoot: root
+            appToplevel: modelData
-            }
+            appListRoot: root
         }
     }
 

.config/quickshell/modules/dock/DockButton.qml

@@ -7,9 +7,10 @@ import QtQuick.Layouts
 
 RippleButton {
     Layout.fillHeight: true
+    Layout.topMargin: Appearance.sizes.elevationMargin - Appearance.sizes.hyprlandGapsOut
     implicitWidth: implicitHeight - topInset - bottomInset
     buttonRadius: Appearance.rounding.normal
 
-    topInset: dockVisualBackground.margin + dockRow.padding
+    topInset: Appearance.sizes.hyprlandGapsOut + dockRow.padding
-    bottomInset: dockVisualBackground.margin + dockRow.padding
+    bottomInset: Appearance.sizes.hyprlandGapsOut + dockRow.padding
 }

.config/quickshell/modules/dock/DockSeparator.qml

@@ -5,8 +5,8 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 Rectangle {
-    Layout.topMargin: dockVisualBackground.margin + dockRow.padding + Appearance.rounding.normal
+    Layout.topMargin: Appearance.sizes.elevationMargin + dockRow.padding + Appearance.rounding.normal
-    Layout.bottomMargin: dockVisualBackground.margin + dockRow.padding + Appearance.rounding.normal
+    Layout.bottomMargin: Appearance.sizes.hyprlandGapsOut + dockRow.padding + Appearance.rounding.normal
     Layout.fillHeight: true
     implicitWidth: 1
     color: Appearance.m3colors.m3outlineVariant