dms: Material Animation Refactor

- Thanks Google for Material 3 Expressive stuffs
- Thanks Caelestia shell for pushing qml limits to showcase the blueprint

quickshell/Common/DankAnim.qml

@@ -0,0 +1,9 @@
+import QtQuick
+import qs.Common
+
+// Reusable NumberAnimation wrapper
+NumberAnimation {
+    duration: Theme.expressiveDurations.normal
+    easing.type: Easing.BezierSpline
+    easing.bezierCurve: Theme.expressiveCurves.standard
+}

quickshell/Common/DankColorAnim.qml

@@ -0,0 +1,9 @@
+import QtQuick
+import qs.Common
+
+// Reusable ColorAnimation wrapper
+ColorAnimation {
+    duration: Theme.expressiveDurations.normal
+    easing.type: Easing.BezierSpline
+    easing.bezierCurve: Theme.expressiveCurves.standard
+}

quickshell/Common/ListViewTransitions.qml

@@ -0,0 +1,60 @@
+pragma Singleton
+import QtQuick
+import qs.Common
+
+// Reusable ListView/GridView transitions
+QtObject {
+    id: root
+
+    readonly property Transition add: Transition {
+        ParallelAnimation {
+            DankAnim {
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+            }
+            DankAnim {
+                property: "scale"
+                from: 0.92
+                to: 1
+                duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+            }
+        }
+    }
+
+    readonly property Transition remove: Transition {
+        ParallelAnimation {
+            DankAnim {
+                property: "opacity"
+                to: 0
+                duration: Theme.expressiveDurations.fast
+                easing.bezierCurve: Theme.expressiveCurves.emphasizedAccel
+            }
+            DankAnim {
+                property: "scale"
+                to: 0.92
+                duration: Theme.expressiveDurations.fast
+                easing.bezierCurve: Theme.expressiveCurves.emphasizedAccel
+            }
+        }
+    }
+
+    readonly property Transition displaced: Transition {
+        DankAnim {
+            properties: "x,y"
+            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+            easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+        }
+    }
+
+    readonly property Transition move: Transition {
+        DankAnim {
+            properties: "x,y"
+            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+            easing.bezierCurve: Theme.expressiveCurves.standard
+        }
+    }
+}

quickshell/Common/SettingsData.qml

@@ -154,10 +154,14 @@ Singleton {
     property bool nightModeEnabled: false
     property int animationSpeed: SettingsData.AnimationSpeed.Short
     property int customAnimationDuration: 500
+    property bool syncComponentAnimationSpeeds: true
+    onSyncComponentAnimationSpeedsChanged: saveSettings()
     property int popoutAnimationSpeed: SettingsData.AnimationSpeed.Short
     property int popoutCustomAnimationDuration: 150
     property int modalAnimationSpeed: SettingsData.AnimationSpeed.Short
     property int modalCustomAnimationDuration: 150
+    property bool enableRippleEffects: true
+    onEnableRippleEffectsChanged: saveSettings()
     property string wallpaperFillMode: "Fill"
     property bool blurredWallpaperLayer: false
     property bool blurWallpaperOnOverview: false

quickshell/Common/Theme.qml

@@ -769,6 +769,9 @@ Singleton {
     readonly property int popoutAnimationDuration: {
         if (typeof SettingsData === "undefined")
             return 150;
+        if (SettingsData.syncComponentAnimationSpeeds) {
+            return Math.min(currentAnimationBaseDuration, 1000);
+        }
         const presetMap = [0, 150, 300, 500];
         if (SettingsData.popoutAnimationSpeed === SettingsData.AnimationSpeed.Custom)
             return SettingsData.popoutCustomAnimationDuration;
@@ -778,6 +781,9 @@ Singleton {
     readonly property int modalAnimationDuration: {
         if (typeof SettingsData === "undefined")
             return 150;
+        if (SettingsData.syncComponentAnimationSpeeds) {
+            return Math.min(currentAnimationBaseDuration, 1000);
+        }
         const presetMap = [0, 150, 300, 500];
         if (SettingsData.modalAnimationSpeed === SettingsData.AnimationSpeed.Custom)
             return SettingsData.modalCustomAnimationDuration;

quickshell/Common/settings/SettingsSpec.js

@@ -40,10 +40,12 @@ var SPEC = {
     nightModeEnabled: { def: false },
     animationSpeed: { def: 1 },
     customAnimationDuration: { def: 500 },
+    syncComponentAnimationSpeeds: { def: true },
     popoutAnimationSpeed: { def: 1 },
     popoutCustomAnimationDuration: { def: 150 },
     modalAnimationSpeed: { def: 1 },
     modalCustomAnimationDuration: { def: 150 },
+    enableRippleEffects: { def: true },
     wallpaperFillMode: { def: "Fill" },
     blurredWallpaperLayer: { def: false },
     blurWallpaperOnOverview: { def: false },