move lock screen widgets to right-aligned column with slide-in animation

shell/lock/LockSurface.qml

@@ -297,19 +297,46 @@ WlSessionLockSurface {
                     }
                 }
             }
-
-            // Spacer before widgets
-            Item {
-                width: 1
-                height: 8
-                visible: _mprisCard.visible || _volumeCard.visible
         }
+    }
+
+    // Right column - widgets, slides in from right
+    Item {
+        id: _widgetCol
+        anchors.right: parent.right
+        anchors.rightMargin: 48
+        anchors.verticalCenter: parent.verticalCenter
+        width: 280
+        height: _widgetContent.implicitHeight
+        visible: _mprisCard.visible || _volumeCard.visible
+
+        opacity: 0
+        property real _slideX: 80
+
+        NumberAnimation on opacity {
+            to: 1
+            duration: 400
+            easing.type: Easing.OutCubic
+        }
+        NumberAnimation on _slideX {
+            to: 0
+            duration: 500
+            easing.type: Easing.OutCubic
+        }
+
+        transform: Translate {
+            x: _widgetCol._slideX
+        }
+
+        Column {
+            id: _widgetContent
+            width: parent.width
+            spacing: 12
 
             // Media widget
             Rectangle {
                 id: _mprisCard
-                anchors.horizontalCenter: parent.horizontalCenter
+                width: parent.width
-                width: 280
                 height: _mprisContent.implicitHeight + 16
                 radius: S.Theme.radius + 2
                 color: Qt.rgba(S.Theme.base01.r, S.Theme.base01.g, S.Theme.base01.b, 0.7)
@@ -343,8 +370,7 @@ WlSessionLockSurface {
             // Volume widget
             Rectangle {
                 id: _volumeCard
-                anchors.horizontalCenter: parent.horizontalCenter
+                width: parent.width
-                width: 280
                 height: _volumeContent.implicitHeight + 16
                 radius: S.Theme.radius + 2
                 color: Qt.rgba(S.Theme.base01.r, S.Theme.base01.g, S.Theme.base01.b, 0.7)
@@ -430,6 +456,20 @@ WlSessionLockSurface {
                 duration: 200
                 easing.type: Easing.InCubic
             }
+            NumberAnimation {
+                target: _widgetCol
+                property: "opacity"
+                to: 0
+                duration: 200
+                easing.type: Easing.InCubic
+            }
+            NumberAnimation {
+                target: _widgetCol
+                property: "_slideX"
+                to: 80
+                duration: 200
+                easing.type: Easing.InCubic
+            }
             NumberAnimation {
                 target: root
                 property: "_bgOpacity"