feat(DMS FrameMode): A New Connected Unified Surface & Animation Overhaul

- Introduces Standalone & Connected Modes
- Updated Animations & Motion effects for both modes
- Numerous QOL tweaks and updates throughout the system
- Highly inspired to the OG Caelestia Shell / @Soramanew

quickshell/Modules/ControlCenter/Components/DetailHost.qml

@@ -37,7 +37,7 @@ Item {
     Loader {
         id: pluginDetailLoader
         width: parent.width
-        height: parent.height - Theme.spacingS
+        height: Math.max(0, parent.height - Theme.spacingS)
         y: Theme.spacingS
         active: false
         sourceComponent: null
@@ -46,7 +46,7 @@ Item {
     Loader {
         id: coreDetailLoader
         width: parent.width
-        height: parent.height - Theme.spacingS
+        height: Math.max(0, parent.height - Theme.spacingS)
         y: Theme.spacingS
         active: false
         sourceComponent: null
@@ -134,7 +134,7 @@ Item {
             }
 
             pluginDetailLoader.sourceComponent = builtinInstance.ccDetailContent;
-            pluginDetailLoader.active = parent.height > 0;
+            pluginDetailLoader.active = true;
             return;
         }
 
@@ -155,19 +155,19 @@ Item {
             }
 
             pluginDetailLoader.sourceComponent = pluginDetailInstance.ccDetailContent;
-            pluginDetailLoader.active = parent.height > 0;
+            pluginDetailLoader.active = true;
             return;
         }
 
         if (root.expandedSection.startsWith("diskUsage_")) {
             coreDetailLoader.sourceComponent = diskUsageDetailComponent;
-            coreDetailLoader.active = parent.height > 0;
+            coreDetailLoader.active = true;
             return;
         }
 
         if (root.expandedSection.startsWith("brightnessSlider_")) {
             coreDetailLoader.sourceComponent = brightnessDetailComponent;
-            coreDetailLoader.active = parent.height > 0;
+            coreDetailLoader.active = true;
             return;
         }
 
@@ -195,7 +195,7 @@ Item {
             return;
         }
 
-        coreDetailLoader.active = parent.height > 0;
+        coreDetailLoader.active = true;
     }
 
     Component {

quickshell/Modules/ControlCenter/Components/DragDropGrid.qml

@@ -52,6 +52,35 @@ Column {
         return Math.max(100, maxPopoutHeight - totalRowHeight - rowSpacing);
     }
 
+    readonly property real targetImplicitHeight: {
+        const rows = layoutResult.rows;
+        let totalHeight = 0;
+        for (let i = 0; i < rows.length; i++) {
+            const widgets = rows[i] || [];
+            const sliderOnly = widgets.length > 0 && widgets.every(w => {
+                const id = w.id || "";
+                return id === "volumeSlider" || id === "brightnessSlider" || id === "inputVolumeSlider";
+            });
+            totalHeight += sliderOnly ? (editMode ? 56 : 36) : 60;
+            if (expandedSection !== "" && i === expandedRowIndex)
+                totalHeight += detailHeightForSection(expandedSection) + Theme.spacingS;
+        }
+        totalHeight += Math.max(0, rows.length - 1) * spacing;
+        return totalHeight;
+    }
+
+    function detailHeightForSection(section) {
+        if (!section)
+            return 0;
+        if (section === "wifi" || section === "bluetooth" || section === "builtin_vpn")
+            return Math.min(350, _maxDetailHeight);
+        if (section.startsWith("brightnessSlider_"))
+            return Math.min(400, _maxDetailHeight);
+        if (section.startsWith("plugin_"))
+            return Math.min(250, _maxDetailHeight);
+        return Math.min(250, _maxDetailHeight);
+    }
+
     function calculateRowsAndWidgets() {
         return LayoutUtils.calculateRowsAndWidgets(root, expandedSection, expandedWidgetIndex);
     }
@@ -182,7 +211,10 @@ Column {
                 id: detailHost
                 width: parent.width
                 maxAvailableHeight: root._maxDetailHeight
-                height: active ? (getDetailHeight(root.expandedSection) + Theme.spacingS) : 0
+                height: active ? (root.detailHeightForSection(root.expandedSection) + Theme.spacingS) : 0
+                clip: true
+                property string retainedSection: ""
+                property var retainedWidgetData: null
                 property bool active: {
                     if (root.expandedSection === "")
                         return false;
@@ -199,14 +231,48 @@ Column {
 
                     return rowIndex === root.expandedRowIndex;
                 }
-                visible: active
-                expandedSection: root.expandedSection
-                expandedWidgetData: root.expandedWidgetData
+                visible: active || height > 0.5
+                expandedSection: active ? root.expandedSection : retainedSection
+                expandedWidgetData: active ? root.expandedWidgetData : retainedWidgetData
                 bluetoothCodecSelector: root.bluetoothCodecSelector
                 widgetModel: root.model
                 collapseCallback: root.requestCollapse
                 screenName: root.screenName
                 screenModel: root.screenModel
+
+                function retainActiveDetail() {
+                    if (!active || !root.expandedSection)
+                        return;
+                    retainedSection = root.expandedSection;
+                    retainedWidgetData = root.expandedWidgetData;
+                }
+
+                onActiveChanged: retainActiveDetail()
+                onHeightChanged: {
+                    if (!active && height <= 0.5) {
+                        retainedSection = "";
+                        retainedWidgetData = null;
+                    }
+                }
+
+                Connections {
+                    target: root
+                    function onExpandedSectionChanged() {
+                        detailHost.retainActiveDetail();
+                    }
+                    function onExpandedWidgetDataChanged() {
+                        detailHost.retainActiveDetail();
+                    }
+                }
+
+                Behavior on height {
+                    enabled: true
+                    NumberAnimation {
+                        duration: Theme.variantDuration(Theme.popoutAnimationDuration, detailHost.active)
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: detailHost.active ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
+                    }
+                }
             }
         }
     }

quickshell/Modules/ControlCenter/Components/DragDropWidgetWrapper.qml

@@ -23,11 +23,15 @@ Item {
     signal toggleWidgetSize(int index)
 
     width: {
-        const widgetWidth = widgetData?.width || 50
-        if (widgetWidth <= 25) return gridCellWidth
-        else if (widgetWidth <= 50) return gridCellWidth * 2
-        else if (widgetWidth <= 75) return gridCellWidth * 3
-        else return gridCellWidth * 4
+        const widgetWidth = widgetData?.width || 50;
+        if (widgetWidth <= 25)
+            return gridCellWidth;
+        else if (widgetWidth <= 50)
+            return gridCellWidth * 2;
+        else if (widgetWidth <= 75)
+            return gridCellWidth * 3;
+        else
+            return gridCellWidth * 4;
     }
     height: isSlider ? 16 : gridCellHeight
 
@@ -42,10 +46,14 @@ Item {
         z: dragArea.drag.active ? 10000 : 1
 
         Behavior on border.width {
-            NumberAnimation { duration: 150 }
+            NumberAnimation {
+                duration: 150
+            }
         }
         Behavior on opacity {
-            NumberAnimation { duration: 150 }
+            NumberAnimation {
+                duration: 150
+            }
         }
     }
 
@@ -58,14 +66,17 @@ Item {
         property int globalWidgetIndex: root.widgetIndex
         property int widgetWidth: root.widgetData?.width || 50
 
-
         MouseArea {
             id: editModeBlocker
             anchors.fill: parent
             enabled: root.editMode
             acceptedButtons: Qt.AllButtons
-            onPressed: function(mouse) { mouse.accepted = true }
-            onWheel: function(wheel) { wheel.accepted = true }
+            onPressed: function (mouse) {
+                mouse.accepted = true;
+            }
+            onWheel: function (wheel) {
+                wheel.accepted = true;
+            }
             z: 100
         }
     }
@@ -79,19 +90,19 @@ Item {
         drag.axis: Drag.XAndYAxis
         drag.smoothed: true
 
-        onPressed: function(mouse) {
+        onPressed: function (mouse) {
             if (editMode) {
-                cursorShape = Qt.ClosedHandCursor
+                cursorShape = Qt.ClosedHandCursor;
                 if (root.gridLayout && root.gridLayout.moveToTop) {
-                    root.gridLayout.moveToTop(root)
+                    root.gridLayout.moveToTop(root);
                 }
             }
         }
 
-        onReleased: function(mouse) {
+        onReleased: function (mouse) {
             if (editMode) {
-                cursorShape = Qt.OpenHandCursor
-                root.snapToGrid()
+                cursorShape = Qt.OpenHandCursor;
+                root.snapToGrid();
             }
         }
     }
@@ -101,9 +112,11 @@ Item {
     Drag.hotSpot.y: height / 2
 
     function swapIndices(i, j) {
-        if (i === j) return;
+        if (i === j)
+            return;
         const arr = SettingsData.controlCenterWidgets;
-        if (!arr || i < 0 || j < 0 || i >= arr.length || j >= arr.length) return;
+        if (!arr || i < 0 || j < 0 || i >= arr.length || j >= arr.length)
+            return;
 
         const copy = arr.slice();
         const tmp = copy[i];
@@ -114,37 +127,41 @@ Item {
     }
 
     function snapToGrid() {
-        if (!editMode || !gridLayout) return
+        if (!editMode || !gridLayout)
+            return;
+        const globalPos = root.mapToItem(gridLayout, 0, 0);
+        const cellWidth = gridLayout.width / gridColumns;
+        const cellHeight = gridCellHeight + Theme.spacingS;
 
-        const globalPos = root.mapToItem(gridLayout, 0, 0)
-        const cellWidth = gridLayout.width / gridColumns
-        const cellHeight = gridCellHeight + Theme.spacingS
+        const centerX = globalPos.x + (root.width / 2);
+        const centerY = globalPos.y + (root.height / 2);
 
-        const centerX = globalPos.x + (root.width / 2)
-        const centerY = globalPos.y + (root.height / 2)
+        let targetCol = Math.max(0, Math.floor(centerX / cellWidth));
+        let targetRow = Math.max(0, Math.floor(centerY / cellHeight));
 
-        let targetCol = Math.max(0, Math.floor(centerX / cellWidth))
-        let targetRow = Math.max(0, Math.floor(centerY / cellHeight))
+        targetCol = Math.min(targetCol, gridColumns - 1);
 
-        targetCol = Math.min(targetCol, gridColumns - 1)
-
-        const newIndex = findBestInsertionIndex(targetRow, targetCol)
+        const newIndex = findBestInsertionIndex(targetRow, targetCol);
 
         if (newIndex !== widgetIndex && newIndex >= 0 && newIndex < (SettingsData.controlCenterWidgets?.length || 0)) {
-            swapIndices(widgetIndex, newIndex)
+            swapIndices(widgetIndex, newIndex);
         }
     }
 
     function findBestInsertionIndex(targetRow, targetCol) {
         const widgets = SettingsData.controlCenterWidgets || [];
         const n = widgets.length;
-        if (!n || widgetIndex < 0 || widgetIndex >= n) return -1;
+        if (!n || widgetIndex < 0 || widgetIndex >= n)
+            return -1;
 
         function spanFor(width) {
             const w = width ?? 50;
-            if (w <= 25) return 1;
-            if (w <= 50) return 2;
-            if (w <= 75) return 3;
+            if (w <= 25)
+                return 1;
+            if (w <= 50)
+                return 2;
+            if (w <= 75)
+                return 3;
             return 4;
         }
 
@@ -169,7 +186,13 @@ Item {
             if (i === widgetIndex) {
                 draggedOrigKey = centerKey;
             } else {
-                pos.push({ index: i, row, startCol, span, centerKey });
+                pos.push({
+                    index: i,
+                    row,
+                    startCol,
+                    span,
+                    centerKey
+                });
             }
 
             col += span;
@@ -179,7 +202,8 @@ Item {
             }
         }
 
-        if (pos.length === 0) return -1;
+        if (pos.length === 0)
+            return -1;
 
         const centerColCoord = targetCol + 0.5;
         const targetKey = targetRow * cols + centerColCoord;
@@ -192,15 +216,20 @@ Item {
         }
 
         let lo = 0, hi = pos.length - 1;
-        if (targetKey <= pos[0].centerKey) return pos[0].index;
-        if (targetKey >= pos[hi].centerKey) return pos[hi].index;
+        if (targetKey <= pos[0].centerKey)
+            return pos[0].index;
+        if (targetKey >= pos[hi].centerKey)
+            return pos[hi].index;
 
         while (lo <= hi) {
             const mid = (lo + hi) >> 1;
             const mk = pos[mid].centerKey;
-            if (targetKey < mk) hi = mid - 1;
-            else if (targetKey > mk) lo = mid + 1;
-            else return pos[mid].index;
+            if (targetKey < mk)
+                hi = mid - 1;
+            else if (targetKey > mk)
+                lo = mid + 1;
+            else
+                return pos[mid].index;
         }
         const movingUp = (draggedOrigKey != null) ? (targetKey < draggedOrigKey) : false;
         return (movingUp ? pos[lo].index : pos[hi].index);
@@ -240,11 +269,11 @@ Item {
         currentSize: root.widgetData?.width || 50
         isSlider: root.isSlider
         widgetIndex: root.widgetIndex
-        onSizeChanged: (newSize) => {
-            var widgets = SettingsData.controlCenterWidgets.slice()
+        onSizeChanged: newSize => {
+            var widgets = SettingsData.controlCenterWidgets.slice();
             if (widgetIndex >= 0 && widgetIndex < widgets.length) {
-                widgets[widgetIndex].width = newSize
-                SettingsData.set("controlCenterWidgets", widgets)
+                widgets[widgetIndex].width = newSize;
+                SettingsData.set("controlCenterWidgets", widgets);
             }
         }
     }
@@ -270,7 +299,9 @@ Item {
         }
 
         Behavior on opacity {
-            NumberAnimation { duration: 150 }
+            NumberAnimation {
+                duration: 150
+            }
         }
     }
 
@@ -283,7 +314,9 @@ Item {
         z: -1
 
         Behavior on color {
-            ColorAnimation { duration: Theme.shortDuration }
+            ColorAnimation {
+                duration: Theme.shortDuration
+            }
         }
     }
 }