wbar: unpin and stuff

i realized i mixed up pinning and unpinning, but whatever

dots/.config/quickshell/ii/modules/common/widgets/PopupToolTip.qml

@@ -14,6 +14,10 @@ Item {
     property real horizontalPadding: 10
     property real verticalPadding: 5
 
+    function updateAnchor() {
+        tooltipLoader.item?.anchor.updateAnchor();
+    }
+
     readonly property bool internalVisibleCondition: (extraVisibleCondition && (parent.hovered === undefined || parent?.hovered)) || alternativeVisibleCondition
     property var anchorEdges: Edges.Top
     property var anchorGravity: anchorEdges

dots/.config/quickshell/ii/modules/waffle/bar/BarIconButton.qml

@@ -14,6 +14,7 @@ BarButton {
     property alias iconSize: iconContent.implicitSize
     property alias iconRotation: iconContent.rotation
     property alias iconMonochrome: iconContent.monochrome
+    property alias iconScale: iconContent.scale
     property alias tooltipText: tooltip.text
     property alias overlayingItems: iconContent.data
 

dots/.config/quickshell/ii/modules/waffle/bar/tray/Tray.qml

@@ -13,6 +13,7 @@ RowLayout {
     id: root
 
     property bool overflowOpen: false
+    property bool dragging: false
 
     Layout.fillHeight: true
     spacing: 0
@@ -20,7 +21,7 @@ RowLayout {
     BarIconButton {
         id: overflowButton
 
-        visible: TrayService.unpinnedItems.length > 0
+        visible: (TrayService.unpinnedItems.length > 0 || root.dragging)
         checked: root.overflowOpen
 
         iconName: "chevron-down"
@@ -64,27 +65,25 @@ RowLayout {
             required property var modelData
             item: modelData
 
-            Drag.active: dragArea.drag.active
-            Drag.hotSpot.x: width / 2
-            Drag.hotSpot.y: height / 2
             property real initialX
             property real initialY
 
-            Behavior on x {
-                animation: Looks.transition.move.createObject(this)
-            }
-
             MouseArea {
                 id: dragArea
                 anchors.fill: parent
                 drag.target: parent
                 drag.axis: Drag.XAxis
+                drag.threshold: 2
 
-                onPressed: (event) => {
+                onPressed: event => {
+                    trayButton.Drag.hotSpot.x = event.x;
                     trayButton.initialX = trayButton.x;
-                    trayButton.initialY = trayButton.y;
+                    root.dragging = true;
                     trayButton.Drag.active = true;
                 }
+                onPositionChanged: {
+                    pinTooltip.updateAnchor();
+                }
                 onReleased: {
                     if (!dragArea.drag.active) {
                         trayButton.click();
@@ -96,9 +95,22 @@ RowLayout {
                             pinDropArea.willPin = false;
                         } else {
                             trayButton.x = trayButton.initialX;
-                            trayButton.y = trayButton.initialY;
                         }
                     }
+                    trayButton.Drag.active = false;
+                    root.dragging = false;
+                }
+            }
+
+            BarToolTip {
+                id: pinTooltip
+                extraVisibleCondition: trayButton.Drag.active && pinDropArea.containsDrag && pinDropArea.willPin
+                realContentHorizontalPadding: 6
+                realContentVerticalPadding: 6
+                realContentItem: FluentIcon {
+                    anchors.centerIn: parent
+                    icon: "pin-off"
+                    implicitSize: 18
                 }
             }
         }

dots/.config/quickshell/ii/modules/waffle/bar/tray/TrayButton.qml

@@ -16,6 +16,13 @@ BarIconButton {
     property alias menuOpen: menu.visible
     readonly property bool barAtBottom: Config.options.waffles.bar.bottom
     iconSource: item.icon
+    iconScale: 0
+    Component.onCompleted: {
+        root.iconScale = 1
+    }
+    Behavior on iconScale {
+        animation: Looks.transition.enter.createObject(this)
+    }
 
     onClicked: {
         item.activate();
@@ -39,7 +46,7 @@ BarIconButton {
     }
 
     BarToolTip {
-        extraVisibleCondition: root.shouldShowTooltip
+        extraVisibleCondition: root.shouldShowTooltip && !root.Drag.active
         text: TrayService.getTooltipForItem(root.item)
     }
 }

dots/.config/quickshell/ii/modules/waffle/bar/tray/TrayOverflowMenu.qml

@@ -1,3 +1,4 @@
+pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
@@ -15,46 +16,108 @@ BarPopup {
     closeOnFocusLost: false
     onFocusCleared: {
         const hasMenuOpen = contentItem.children.some(c => (c.menuOpen));
-        if (!hasMenuOpen) root.close();
+        if (!hasMenuOpen)
-        else root.grabFocus();
+            root.close();
+        else
+            root.grabFocus();
     }
 
-    contentItem: GridLayout {
+    contentItem: Item {
         id: contentItem
         anchors.centerIn: parent
-        rows: Math.floor(Math.sqrt(TrayService.unpinnedItems.length))
+        implicitWidth: contentGrid.implicitWidth
-        columns: Math.ceil(TrayService.unpinnedItems.length / rows)
+        implicitHeight: contentGrid.implicitHeight
-        columnSpacing: 0
+        GridLayout {
-        rowSpacing: 0
+            id: contentGrid
+            anchors.centerIn: parent
+            rows: Math.floor(Math.sqrt(TrayService.unpinnedItems.length))
+            columns: Math.ceil(TrayService.unpinnedItems.length / rows)
+            columnSpacing: 0
+            rowSpacing: 0
 
-        Repeater {
+            Repeater {
-            model: ScriptModel {
+                model: ScriptModel {
-                values: TrayService.unpinnedItems
+                    values: TrayService.unpinnedItems
-            }
+                    onValuesChanged: {
-            delegate: TrayButton {
+                        if (values.length === 0) {
-                required property var modelData
+                            root.close();
-                item: modelData
+                        }
+                    }
+                }
+                delegate: TrayButton {
+                    id: trayButton
+                    required property var modelData
+                    item: modelData
 
-                topInset: 0
+                    topInset: 0
-                bottomInset: 0
+                    bottomInset: 0
-                implicitWidth: 40
+                    implicitWidth: 40
-                implicitHeight: 40
+                    implicitHeight: 40
 
-                colBackground: ColorUtils.transparentize(Looks.colors.bg2)
+                    colBackground: ColorUtils.transparentize(Looks.colors.bg2)
-                colBackgroundHover: Looks.colors.bg2Hover
+                    colBackgroundHover: Looks.colors.bg2Hover
-                colBackgroundActive: Looks.colors.bg2Active
+                    colBackgroundActive: Looks.colors.bg2Active
 
-                onMenuOpenChanged: {
+                    onMenuOpenChanged: {
-                    // The overflow menu should only be closed when the user clicks outside
+                        // The overflow menu should only be closed when the user clicks outside
-                    // However the focus grab refuses to reactivate, so we can't have that
+                        // However the focus grab refuses to reactivate, so we can't have that
-                    // But most of the time the user dismisses the menu by clicking outside anyway,
+                        // But most of the time the user dismisses the menu by clicking outside anyway,
-                    // so this is acceptable.
+                        // so this is acceptable.
-                    if (!menuOpen) { 
+                        if (!menuOpen) {
-                        root.close();
+                            root.close();
+                        }
+                    }
+
+                    property real initialX
+                    property real initialY
+
+                    Behavior on x {
+                        animation: Looks.transition.move.createObject(this)
+                    }
+                    Behavior on y {
+                        animation: Looks.transition.move.createObject(this)
+                    }
+
+                    MouseArea {
+                        id: dragArea
+                        anchors.fill: parent
+                        drag.target: parent
+                        drag.threshold: 2
+
+                        onPressed: event => {
+                            trayButton.Drag.hotSpot.x = event.x;
+                            trayButton.Drag.hotSpot.y = event.y;
+                            trayButton.initialX = trayButton.x;
+                            trayButton.initialY = trayButton.y;
+                            trayButton.Drag.active = true;
+                        }
+                        onReleased: {
+                            if (!dragArea.drag.active) {
+                                trayButton.click();
+                            } else {
+                                if (!unpinDropArea.containsDrag && unpinDropArea.willUnpin) {
+                                    // Quickshell would crash if we don't hide this item first. Took me fucking 3 hours to figure out...
+                                    trayButton.visible = false;
+                                    TrayService.togglePin(trayButton.item.id);
+                                    unpinDropArea.willUnpin = false;
+                                } else {
+                                    trayButton.x = trayButton.initialX;
+                                    trayButton.y = trayButton.initialY;
+                                }
+                            }
+                            trayButton.Drag.active = false;
+                        }
                     }
                 }
             }
         }
+
+        DropArea {
+            id: unpinDropArea
+            anchors.fill: parent
+            property bool willUnpin: false
+            onEntered: willUnpin = false
+            onExited: willUnpin = true
+        }
     }
 }
-

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

@@ -10,9 +10,17 @@ import qs.modules.waffle.looks
 PopupToolTip {
     id: root
 
+    property Item realContentItem
+    realContentItem: WText {
+        text: root.text
+        anchors.centerIn: parent
+    }
+
     property real visualMargin: 11
     verticalPadding: visualMargin
     horizontalPadding: visualMargin
+    property real realContentVerticalPadding: 8
+    property real realContentHorizontalPadding: 10
 
     contentItem: Item {
         anchors.centerIn: parent
@@ -36,16 +44,12 @@ PopupToolTip {
             id: realContent
             z: 1
             anchors.centerIn: parent
-            implicitWidth: tooltipText.implicitWidth + 10 * 2
+            implicitWidth: root.realContentItem.implicitWidth + root.realContentHorizontalPadding * 2
-            implicitHeight: tooltipText.implicitHeight + 8 * 2
+            implicitHeight: root.realContentItem.implicitHeight + root.realContentVerticalPadding * 2
             color: Looks.colors.bg1
             radius: Looks.radius.medium
 
-            WText {
+            children: [root.realContentItem]
-                id: tooltipText
-                text: root.text
-                anchors.centerIn: parent
-            }
         }
     }
 }