cc: don't resize during tile drags and center trash in footer

flake.lock

@@ -3,11 +3,11 @@
     "dank-qml-common": {
       "flake": false,
       "locked": {
-        "lastModified": 1791704080,
-        "narHash": "sha256-zcbXHrade9CzEgLU1Alc5sCjUPv+m5GLSYtAurU+WV8=",
+        "lastModified": 1791733765,
+        "narHash": "sha256-X5Nq0FON2n5z404z7SbqBOXh2OzVXnCMvonHbyMVWXY=",
         "owner": "AvengeMedia",
         "repo": "dank-qml-common",
-        "rev": "0e6a5162d34abaae4542e83b0751318990a75fe0",
+        "rev": "bd90e4b6f2ec36035fc2cb560acdc0e418f669ac",
         "type": "github"
       },
       "original": {

quickshell/Modules/ControlCenter/Components/CcFooter.qml

@@ -229,11 +229,19 @@ Item {
         width: root.trackWidth * trackScale.xScale + inset * 2
         height: CcMetrics.footerHeight + inset * 2
         radius: CcMetrics.dropZoneRadius
-        color: "transparent"
+        color: root.overTrash ? Theme.withAlpha(Theme.error, Theme.stateLayerDrag) : "transparent"
         border.width: Theme.outlineWidth
-        border.color: receiving ? Theme.primary : Theme.outlineVariant
+        border.color: root.overTrash ? Theme.error : receiving ? Theme.primary : Theme.outlineVariant
         visible: root.editMode
 
+        Behavior on color {
+            enabled: CcMetrics.animationsEnabled
+            ColorAnimation {
+                duration: Theme.shortDuration
+                easing.type: Theme.standardEasing
+            }
+        }
+
         Behavior on border.color {
             enabled: CcMetrics.animationsEnabled
             ColorAnimation {
@@ -472,7 +480,15 @@ Item {
             anchors.left: parent.left
             anchors.verticalCenter: parent.verticalCenter
             spacing: root.spacing
-            visible: !root.dragging
+            opacity: root.dragging ? Theme.pendingOpacity : 1
+
+            Behavior on opacity {
+                enabled: CcMetrics.animationsEnabled
+                NumberAnimation {
+                    duration: Theme.shortDuration
+                    easing.type: Theme.standardEasing
+                }
+            }
 
             DActionButton {
                 buttonSize: Theme.iconButtonSize
@@ -496,33 +512,36 @@ Item {
                 onClicked: editMenu.openAt(moreButton)
             }
         }
+    }
 
-        StyledRect {
-            id: trash
+    StyledRect {
+        id: trash
 
-            anchors.fill: parent
-            radius: Theme.fullRadius(width, height)
-            color: root.overTrash ? Theme.errorContainer : CcMetrics.tileInactiveColor
-            border.width: Theme.outlineWidth
-            border.color: root.overTrash ? Theme.error : Theme.outlineVariant
-            visible: root.dragging && root.dragRemovable
-            Accessible.role: Accessible.Graphic
-            Accessible.name: I18n.tr("Remove")
+        anchors.centerIn: parent
+        width: root.editActionsWidth
+        height: CcMetrics.footerHeight
+        radius: Theme.fullRadius(width, height)
+        color: root.overTrash ? Theme.error : Theme.errorContainer
+        border.width: Theme.outlineWidth
+        border.color: root.overTrash ? Theme.error : Theme.outlineVariant
+        visible: root.dragging && root.dragRemovable
+        Accessible.role: Accessible.Graphic
+        Accessible.name: I18n.tr("Remove")
 
-            Behavior on color {
-                ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
+        Behavior on color {
+            enabled: CcMetrics.animationsEnabled
+            ColorAnimation {
+                duration: Theme.shortDuration
+                easing.type: Theme.standardEasing
             }
+        }
 
-            DIcon {
-                anchors.centerIn: parent
-                name: "delete"
-                size: CcMetrics.iconBoxIconSize
-                filled: root.overTrash
-                color: root.overTrash ? Theme.onErrorContainer : CcMetrics.tileInactiveContent
-            }
+        DIcon {
+            anchors.centerIn: parent
+            name: "delete"
+            size: CcMetrics.iconBoxIconSize
+            filled: root.overTrash
+            color: root.overTrash ? Theme.onError : Theme.onErrorContainer
         }
     }
 

quickshell/Modules/ControlCenter/Components/CcTileGrid.qml

@@ -34,6 +34,7 @@ DEditableGrid {
 
     readonly property real gridHeight: layoutHeight
     readonly property real cellWidth: (width + CcMetrics.gridGap) / columns
+    readonly property bool dragging: draggingSourceIndex >= 0 || externalItem !== null
     readonly property CcTileSlot draggingSlot: tileRepeater.itemAt(draggingSourceIndex) as CcTileSlot
     readonly property string hoverGroup: heldOutside && draggingSourceIndex >= 0 ? (groupAt(dragScenePoint, draggingSourceIndex)?.groupId ?? "") : ""
 

quickshell/Modules/ControlCenter/ControlCenterContent.qml

@@ -47,8 +47,11 @@ FocusScope {
         ]) : items, [])
     readonly property bool footerOnTop: SettingsData.controlCenterFooterPosition === "top"
     readonly property var gridDragWidget: widgetGrid.draggingSourceIndex >= 0 ? (widgetGrid.sourceItems[widgetGrid.draggingSourceIndex] ?? null) : null
+    // A drag holds the panel at its lift height so the footer and trash never move under the pointer; a layout
+    // that grows past it is clipped by the flickable until the drop commits.
+    readonly property real heldGridHeight: widgetGrid.dragging ? widgetGrid.pinnedHeight : gridHeight
     readonly property real targetImplicitHeight: {
-        const total = CcMetrics.sheetPadding * 2 + gridHeight + chromeHeight;
+        const total = CcMetrics.sheetPadding * 2 + heldGridHeight + chromeHeight;
         if (detailPage.shownSection === "")
             return total;
         return Math.max(total, detailPage.topInset + detailPage.minimumHeight + CcMetrics.detailDialogInset);
@@ -57,10 +60,10 @@ FocusScope {
     property var pageHistory: []
     // One string so Discard and undo can compare and restore the whole session state at once.
     readonly property string editState: JSON.stringify({
-            "widgets": SettingsData.controlCenterWidgets || [],
-            "columns": SettingsData.controlCenterColumns,
-            "footerPosition": SettingsData.controlCenterFooterPosition
-        })
+        "widgets": SettingsData.controlCenterWidgets || [],
+        "columns": SettingsData.controlCenterColumns,
+        "footerPosition": SettingsData.controlCenterFooterPosition
+    })
     property string editSnapshot: ""
     property string undoBase: ""
     property var undoStack: []
@@ -233,9 +236,9 @@ FocusScope {
         undoBase = editState;
     }
 
-    // Goes by the dragged tile, not the pointer, against the grid edge as it was at drag start so the grid growing
-    // under the drag cannot move it. Below the grid the edge sits at the middle of the row that opens while the
-    // panel has room: the upper half still drops there, past it the footer takes the tile instead of running ahead.
+    // Goes by the dragged tile, not the pointer, against the grid edge as it was at drag start. Below the grid the
+    // edge sits at the middle of the row a drop would add while the panel has room: the upper half still drops
+    // there, past it the footer takes the tile.
     function footerTakesGridDrag(tile) {
         if (gridDragWidget === null || gridDragWidget.id === WidgetUtils.GROUP_ID || footer.freeCells() < WidgetUtils.footerMinCells(gridDragWidget.id))
             return false;

quickshell/Widgets/DEditableGrid.qml

@@ -138,7 +138,6 @@ Item {
         heldOutside = dragsOutside?.(draggingSourceIndex, dragScenePoint, Qt.rect(x - contentPadding, y - contentPadding, slot.w, slot.h)) ?? false;
         if (heldOutside) {
             dragCell = null;
-            heldHeight = pinnedHeight;
             return;
         }
         const cell = GridUtils.cellAt(slotLayout, x - contentPadding, y - contentPadding, slot.cols, slot.rows);