dock: pin button, launcher button

.config/quickshell/modules/common/ConfigOptions.qml

@@ -37,6 +37,12 @@ Singleton {
         }
     }
 
+    property QtObject dock: QtObject {
+        property real height: 60
+        property real hoverRegionHeight: 3
+        property bool pinnedOnStartup: false
+    }
+
     property QtObject networking: QtObject {
         property string userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36"
     }

.config/quickshell/modules/common/widgets/GroupButton.qml

@@ -27,9 +27,10 @@ Button {
     property var parentGroup: root.parent
     property int clickIndex: parentGroup?.clickIndex ?? -1
 
-    Layout.fillWidth: (clickIndex - 1 <= parentGroup.children.indexOf(button) && parentGroup.children.indexOf(button) <= clickIndex + 1)
+    Layout.fillWidth: (clickIndex - 1 <= parentGroup.children.indexOf(root) && parentGroup.children.indexOf(root) <= clickIndex + 1)
-    implicitWidth: (button.down && bounce) ? clickedWidth : baseWidth
+    Layout.fillHeight: (clickIndex - 1 <= parentGroup.children.indexOf(root) && parentGroup.children.indexOf(root) <= clickIndex + 1)
-    implicitHeight: (button.down && bounce) ? clickedHeight : baseHeight
+    implicitWidth: (root.down && bounce) ? clickedWidth : baseWidth
+    implicitHeight: (root.down && bounce) ? clickedHeight : baseHeight
     
     Behavior on implicitWidth {
         animation: Appearance.animation.clickBounce.numberAnimation.createObject(this)
@@ -56,9 +57,9 @@ Button {
             colBackground)) : colBackground
 
     onDownChanged: {
-        if (button.down) {
+        if (root.down) {
-            if (button.parent.clickIndex !== undefined) {
+            if (root.parent.clickIndex !== undefined) {
-                button.parent.clickIndex = parent.children.indexOf(button)
+                root.parent.clickIndex = parent.children.indexOf(root)
             }
         }
     }

.config/quickshell/modules/common/widgets/VerticalButtonGroup.qml

@@ -0,0 +1,47 @@
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+/**
+ * A container that supports GroupButton children for bounciness.
+ * See https://m3.material.io/components/button-groups/overview
+ */
+Rectangle {
+    id: root
+    default property alias content: columnLayout.data
+    property real spacing: 5
+    property real padding: 0
+    property int clickIndex: columnLayout.clickIndex
+
+    property real contentHeight: {
+        let total = 0;
+        for (let i = 0; i < columnLayout.children.length; ++i) {
+            const child = columnLayout.children[i];
+            total += child.baseHeight ?? child.implicitHeight ?? child.height;
+        }
+        return total + columnLayout.spacing * (columnLayout.children.length - 1);
+    }
+
+    topLeftRadius: columnLayout.children.length > 0 ? (columnLayout.children[0].radius + padding) : 
+        Appearance?.rounding?.small
+    topRightRadius: topLeftRadius
+    bottomLeftRadius: columnLayout.children.length > 0 ? (columnLayout.children[columnLayout.children.length - 1].radius + padding) : 
+        Appearance?.rounding?.small
+    bottomRightRadius: bottomLeftRadius
+
+    color: "transparent"
+    height: root.contentHeight + padding * 2
+    implicitWidth: columnLayout.implicitWidth + padding * 2
+    implicitHeight: root.contentHeight + padding * 2
+    
+    children: [ColumnLayout {
+        id: columnLayout
+        anchors.fill: parent
+        anchors.margins: root.padding
+        spacing: root.spacing
+        property int clickIndex: -1
+    }]
+}

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

@@ -0,0 +1,141 @@
+import "root:/"
+import "root:/services"
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import QtQuick.Layouts
+import Quickshell.Io
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Wayland
+import Quickshell.Hyprland
+
+Scope { // Scope
+    id: root
+    property bool pinned: ConfigOptions?.dock.pinnedOnStartup ?? false
+
+    Variants { // For each monitor
+        model: Quickshell.screens
+        PanelWindow { // Window
+            required property var modelData
+            id: dockRoot
+            screen: modelData
+            
+            property bool reveal: root.pinned || dockMouseArea.containsMouse
+
+            anchors {
+                bottom: true
+                left: true
+                right: true
+            }
+
+            function hide() {
+                cheatsheetLoader.active = false
+            }
+            exclusiveZone: root.pinned ? implicitHeight - Appearance.sizes.hyprlandGapsOut : 0
+            Component.onCompleted: {
+                console.log(ConfigOptions.dock.hoverRegionHeight)
+            }
+
+            implicitWidth: dockBackground.implicitWidth
+            WlrLayershell.namespace: "quickshell:dock"
+            color: "transparent"
+
+            implicitHeight: (ConfigOptions?.dock.height ?? 70) + Appearance.sizes.elevationMargin + Appearance.sizes.hyprlandGapsOut
+
+            mask: Region {
+                item: dockMouseArea
+            }
+
+            MouseArea {
+                id: dockMouseArea
+                anchors.top: parent.top
+                height: parent.height
+                anchors.topMargin: dockRoot.reveal ? 0 : dockRoot.implicitHeight - ConfigOptions.dock.hoverRegionHeight
+                anchors.left: parent.left
+                anchors.right: parent.right
+                hoverEnabled: true
+
+                Behavior on anchors.topMargin {
+                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+
+                Item {
+                    id: dockHoverRegion
+                    anchors.fill: parent
+
+                    Item {
+                        id: dockBackground
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+                        anchors.horizontalCenter: parent.horizontalCenter
+
+                        implicitWidth: dockRow.implicitWidth + 5 * 2
+                        height: parent.height - Appearance.sizes.elevationMargin - Appearance.sizes.hyprlandGapsOut
+
+                        RectangularShadow {
+                            anchors.fill: dockVisualBackground
+                            radius: dockVisualBackground.radius
+                            blur: 1.2 * Appearance.sizes.elevationMargin
+                            spread: 1
+                            color: Appearance.colors.colShadow
+                            cached: true
+                        }
+                        Rectangle {
+                            id: dockVisualBackground
+                            property real margin: Appearance.sizes.elevationMargin
+                            anchors.fill: parent
+                            anchors.topMargin: margin
+                            anchors.bottomMargin: margin
+                            color: Appearance.colors.colLayer0
+                            radius: Appearance.rounding.large
+                        }
+
+                        RowLayout {
+                            id: dockRow
+                            anchors.top: parent.top
+                            anchors.bottom: parent.bottom
+                            anchors.horizontalCenter: parent.horizontalCenter
+                            spacing: 3
+                            property real padding: 5
+
+                            VerticalButtonGroup {
+                                GroupButton { // Pin button
+                                    baseWidth: 35
+                                    baseHeight: 35
+                                    clickedWidth: baseWidth
+                                    clickedHeight: baseHeight + 20
+                                    buttonRadius: Appearance.rounding.normal
+                                    toggled: root.pinned
+                                    onClicked: root.pinned = !root.pinned
+                                    contentItem: MaterialSymbol {
+                                        text: "keep"
+                                        horizontalAlignment: Text.AlignHCenter
+                                        iconSize: Appearance.font.pixelSize.larger
+                                        color: root.pinned ? Appearance.m3colors.m3onPrimary : Appearance.colors.colOnLayer0
+                                    }
+                                }
+                            }
+                            DockSeparator {}
+                            DockApps {}
+                            DockSeparator {}
+                            DockButton {
+                                onClicked: Hyprland.dispatch("global quickshell:overviewToggle")
+                                contentItem: MaterialSymbol {
+                                    anchors.centerIn: parent
+                                    horizontalAlignment: Text.AlignHCenter
+                                    font.pixelSize: parent.width / 2
+                                    text: "apps"
+                                    color: Appearance.colors.colOnLayer0
+                                }
+                            }
+                        }
+                    }    
+                }
+
+            }
+        }
+    }
+}

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

@@ -0,0 +1,17 @@
+import "root:/"
+import "root:/services"
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import QtQuick.Layouts
+import Quickshell.Io
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Wayland
+import Quickshell.Hyprland
+
+RowLayout {
+    
+}

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

@@ -0,0 +1,15 @@
+import "root:/"
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+RippleButton {
+    Layout.fillHeight: true
+    implicitWidth: background.height
+    buttonRadius: Appearance.rounding.normal
+
+    topInset: dockVisualBackground.margin + dockRow.padding
+    bottomInset: dockVisualBackground.margin + dockRow.padding
+}

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

@@ -0,0 +1,13 @@
+import "root:/"
+import "root:/modules/common"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Rectangle {
+    Layout.topMargin: dockVisualBackground.margin + dockRow.padding + Appearance.rounding.normal
+    Layout.bottomMargin: dockVisualBackground.margin + dockRow.padding + Appearance.rounding.normal
+    Layout.fillHeight: true
+    implicitWidth: 1
+    color: Appearance.m3colors.m3outlineVariant
+}