MORE ANIMATION FIX AAAAAA

.config/quickshell/modules/common/widgets/NotificationWidget.qml

@@ -38,6 +38,12 @@ Item {
         destroyTimer0.start()
     }
 
+    function toggleExpanded() {
+        root.enableAnimation = true
+        notificationRowWrapper.anchors.bottom = undefined
+        root.expanded = !root.expanded
+    }
+
     Timer {
         id: destroyTimer0
         interval: 0
@@ -83,7 +89,7 @@ Item {
             if (mouse.button == Qt.MiddleButton) 
                 Notifications.discardNotification(notificationObject.id);
             else if (mouse.button == Qt.RightButton) 
-                root.expanded = !root.expanded;
+                root.toggleExpanded()
         }
     }
 
@@ -95,6 +101,7 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
+        // anchors.top: parent.top
         anchors.topMargin: notificationListSpacing
         implicitHeight: notificationColumnLayout.implicitHeight + notificationListSpacing
 
@@ -103,6 +110,7 @@ Item {
             anchors.left: parent.left
             anchors.right: parent.right
             anchors.bottom: parent.bottom
+            // anchors.top: parent.top
             height: notificationColumnLayout.implicitHeight
 
             color: (notificationObject.urgency == NotificationUrgency.Critical) ? 
@@ -116,6 +124,13 @@ Item {
                     easing.type: Appearance.animation.elementDecel.type
                 }
             }
+            Behavior on height {
+                enabled: enableAnimation
+                NumberAnimation {
+                    duration: Appearance.animation.elementDecelFast.duration
+                    easing.type: Appearance.animation.elementDecel.type
+                }
+            }
         }
     }
 
@@ -125,6 +140,7 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
+        // anchors.top: parent.top
         implicitHeight: notificationColumnLayout.implicitHeight + notificationListSpacing
 
         Behavior on x {
@@ -140,172 +156,186 @@ Item {
             anchors.left: parent.left
             anchors.right: parent.right
             anchors.bottom: parent.bottom
-            RowLayout {
+            spacing: 0
-                id: notificationRowLayout
+            Item {
-
+                Layout.fillWidth: true
-                Layout.fillWidth: true                    
+                implicitHeight: notificationRowLayout.implicitHeight
-
+                Behavior on implicitHeight {
-                Rectangle { // App icon
+                    enabled: enableAnimation
-                    id: iconRectangle
+                    NumberAnimation {
-                    implicitWidth: 47
+                        duration: Appearance.animation.elementDecel.duration
-                    implicitHeight: 47
+                        easing.type: Appearance.animation.elementDecel.type
-                    Layout.leftMargin: 10
-                    Layout.topMargin: 10
-                    Layout.bottomMargin: 10
-                    Layout.alignment: Qt.AlignTop
-                    Layout.fillWidth: false
-                    radius: Appearance.rounding.full
-                    color: Appearance.m3colors.m3secondaryContainer
-                    MaterialSymbol {
-                        visible: notificationObject.appIcon == ""
-                        text: (notificationObject.urgency == NotificationUrgency.Critical) ? "release_alert" : 
-                            NotificationUtils.guessMessageType(notificationObject.summary)
-                        anchors.fill: parent
-                        color: (notificationObject.urgency == NotificationUrgency.Critical) ? 
-                            Appearance.mix(Appearance.m3colors.m3onSecondary, Appearance.m3colors.m3onSecondaryContainer, 0.1) :
-                            Appearance.m3colors.m3onSecondaryContainer
-                        font.pixelSize: 27
-                        horizontalAlignment: Text.AlignHCenter
-                        verticalAlignment: Text.AlignVCenter
                     }
-                    IconImage {
+                }
-                        visible: notificationObject.image == "" && notificationObject.appIcon != ""
-                        anchors.centerIn: parent
-                        implicitSize: 33
-                        asynchronous: true
-                        source: Quickshell.iconPath(notificationObject.appIcon)
-                    }
-                    Item {
-                        anchors.fill: parent
-                        visible: notificationObject.image != ""
-                        Image {
-                            id: notifImage
 
+                RowLayout {
+                    id: notificationRowLayout
+                    anchors.top: parent.top
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    Rectangle { // App icon
+                        id: iconRectangle
+                        implicitWidth: 47
+                        implicitHeight: 47
+                        Layout.leftMargin: 10
+                        Layout.topMargin: 10
+                        Layout.bottomMargin: 10
+                        Layout.alignment: Qt.AlignTop
+                        Layout.fillWidth: false
+                        radius: Appearance.rounding.full
+                        color: Appearance.m3colors.m3secondaryContainer
+                        MaterialSymbol {
+                            visible: notificationObject.appIcon == ""
+                            text: (notificationObject.urgency == NotificationUrgency.Critical) ? "release_alert" : 
+                                NotificationUtils.guessMessageType(notificationObject.summary)
                             anchors.fill: parent
-                            readonly property int size: parent.width
+                            color: (notificationObject.urgency == NotificationUrgency.Critical) ? 
-
+                                Appearance.mix(Appearance.m3colors.m3onSecondary, Appearance.m3colors.m3onSecondaryContainer, 0.1) :
-                            source: notificationObject?.image
+                                Appearance.m3colors.m3onSecondaryContainer
-                            fillMode: Image.PreserveAspectCrop
+                            font.pixelSize: 27
-                            cache: false
+                            horizontalAlignment: Text.AlignHCenter
-                            antialiasing: true
+                            verticalAlignment: Text.AlignVCenter
-                            asynchronous: true
-
-                            width: size
-                            height: size
-                            sourceSize.width: size
-                            sourceSize.height: size
-
-                            layer.enabled: true
-                            layer.effect: OpacityMask {
-                                maskSource: Rectangle {
-                                    width: notifImage.size
-                                    height: notifImage.size
-                                    radius: Appearance.rounding.full
-                                }
-                            }
                         }
                         IconImage {
-                            visible: notificationObject.appIcon != ""
+                            visible: notificationObject.image == "" && notificationObject.appIcon != ""
-                            anchors.bottom: parent.bottom
+                            anchors.centerIn: parent
-                            anchors.right: parent.right
+                            implicitSize: 33
-                            implicitSize: 23
                             asynchronous: true
                             source: Quickshell.iconPath(notificationObject.appIcon)
                         }
-                    }
+                        Item {
-                }
+                            anchors.fill: parent
-                ColumnLayout { // Notification content
+                            visible: notificationObject.image != ""
-                    spacing: 0
+                            Image {
-                    Layout.fillWidth: true
+                                id: notifImage
 
-                    RowLayout { // Row of summary, time and expand button
+                                anchors.fill: parent
-                        Layout.topMargin: 10
+                                readonly property int size: parent.width
-                        Layout.leftMargin: 10
-                        Layout.rightMargin: 10
-                        Layout.fillWidth: true
 
-                        StyledText { // Summary
+                                source: notificationObject?.image
-                            Layout.fillWidth: true
+                                fillMode: Image.PreserveAspectCrop
-                            horizontalAlignment: Text.AlignLeft
+                                cache: false
-                            font.pixelSize: Appearance.font.pixelSize.normal
+                                antialiasing: true
-                            color: Appearance.colors.colOnLayer2
+                                asynchronous: true
-                            text: notificationObject.summary
-                            wrapMode: expanded ? Text.Wrap : Text.NoWrap
-                            elide: Text.ElideRight
-                        }
 
-                        Item { Layout.fillWidth: true }
+                                width: size
+                                height: size
+                                sourceSize.width: size
+                                sourceSize.height: size
 
-                        StyledText { // Time
+                                layer.enabled: true
-                            id: notificationTimeText
+                                layer.effect: OpacityMask {
-                            Layout.fillWidth: false
+                                    maskSource: Rectangle {
-                            wrapMode: Text.Wrap
+                                        width: notifImage.size
-                            horizontalAlignment: Text.AlignLeft
+                                        height: notifImage.size
-                            font.pixelSize: Appearance.font.pixelSize.smaller
+                                        radius: Appearance.rounding.full
-                            color: Appearance.m3colors.m3outline
+                                    }
-                            text: NotificationUtils.getFriendlyNotifTimeString(notificationObject.time)
-
-                            Connections {
-                                target: DateTime
-                                function onTimeChanged() {
-                                    notificationTimeText.text = NotificationUtils.getFriendlyNotifTimeString(notificationObject.time)
                                 }
                             }
+                            IconImage {
+                                visible: notificationObject.appIcon != ""
+                                anchors.bottom: parent.bottom
+                                anchors.right: parent.right
+                                implicitSize: 23
+                                asynchronous: true
+                                source: Quickshell.iconPath(notificationObject.appIcon)
+                            }
                         }
+                    }
 
-                        Button { // Expand button
+                    ColumnLayout { // Notification content
-                            Layout.alignment: Qt.AlignVCenter
+                        spacing: 0
-                            id: expandButton
+                        Layout.fillWidth: true
-                            implicitWidth: 22
-                            implicitHeight: 22
 
-                            PointingHandInteraction{}
+                        RowLayout { // Row of summary, time and expand button
-                            onClicked: {
+                            Layout.topMargin: 10
-                                root.enableAnimation = true
+                            Layout.leftMargin: 10
-                                root.expanded = !root.expanded
+                            Layout.rightMargin: 10
+                            Layout.fillWidth: true
+
+                            StyledText { // Summary
+                                Layout.fillWidth: true
+                                horizontalAlignment: Text.AlignLeft
+                                font.pixelSize: Appearance.font.pixelSize.normal
+                                color: Appearance.colors.colOnLayer2
+                                text: notificationObject.summary
+                                wrapMode: expanded ? Text.Wrap : Text.NoWrap
+                                elide: Text.ElideRight
                             }
 
-                            background: Rectangle {
+                            Item { Layout.fillWidth: true }
-                                anchors.fill: parent
+
-                                radius: Appearance.rounding.full
+                            StyledText { // Time
-                                color: (expandButton.down) ? Appearance.colors.colLayer2Active : (expandButton.hovered ? Appearance.colors.colLayer2Hover : Appearance.transparentize(Appearance.colors.colLayer2, 1))
+                                id: notificationTimeText
+                                Layout.fillWidth: false
+                                wrapMode: Text.Wrap
+                                horizontalAlignment: Text.AlignLeft
+                                font.pixelSize: Appearance.font.pixelSize.smaller
+                                color: Appearance.m3colors.m3outline
+                                text: NotificationUtils.getFriendlyNotifTimeString(notificationObject.time)
+
+                                Connections {
+                                    target: DateTime
+                                    function onTimeChanged() {
+                                        notificationTimeText.text = NotificationUtils.getFriendlyNotifTimeString(notificationObject.time)
+                                    }
+                                }
+                            }
+
+                            Button { // Expand button
+                                Layout.alignment: Qt.AlignVCenter
+                                id: expandButton
+                                implicitWidth: 22
+                                implicitHeight: 22
+
+                                PointingHandInteraction{}
+                                onClicked: {
+                                    root.toggleExpanded()
+                                }
+
+                                background: Rectangle {
+                                    anchors.fill: parent
+                                    radius: Appearance.rounding.full
+                                    color: (expandButton.down) ? Appearance.colors.colLayer2Active : (expandButton.hovered ? Appearance.colors.colLayer2Hover : Appearance.transparentize(Appearance.colors.colLayer2, 1))
+
+                                    Behavior on color {
+                                        ColorAnimation {
+                                            duration: Appearance.animation.elementDecel.duration
+                                            easing.type: Appearance.animation.elementDecel.type
+                                        }
 
-                                Behavior on color {
-                                    ColorAnimation {
-                                        duration: Appearance.animation.elementDecel.duration
-                                        easing.type: Appearance.animation.elementDecel.type
                                     }
 
                                 }
 
-                            }
+                                contentItem: MaterialSymbol {
+                                    anchors.centerIn: parent
+                                    text: expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"
+                                    horizontalAlignment: Text.AlignHCenter
+                                    verticalAlignment: Text.AlignVCenter
+                                    font.pixelSize: Appearance.font.pixelSize.normal
+                                    color: Appearance.colors.colOnLayer2
+                                }
 
-                            contentItem: MaterialSymbol {
-                                anchors.centerIn: parent
-                                text: expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"
-                                horizontalAlignment: Text.AlignHCenter
-                                verticalAlignment: Text.AlignVCenter
-                                font.pixelSize: Appearance.font.pixelSize.normal
-                                color: Appearance.colors.colOnLayer2
                             }
-
                         }
-                    }
 
-                    StyledText { // Notification body
+                        StyledText { // Notification body
-                        Layout.fillWidth: true
+                            Layout.fillWidth: true
-                        Layout.leftMargin: 10
+                            Layout.leftMargin: 10
-                        Layout.rightMargin: 10
+                            Layout.rightMargin: 10
-                        Layout.bottomMargin: 10
+                            Layout.bottomMargin: 10
-                        clip: true
+                            clip: true
 
-                        wrapMode: expanded ? Text.Wrap : Text.NoWrap
+                            wrapMode: expanded ? Text.Wrap : Text.NoWrap
-                        elide: Text.ElideRight
+                            elide: Text.ElideRight
-                        font.pixelSize: Appearance.font.pixelSize.small
+                            font.pixelSize: Appearance.font.pixelSize.small
-                        horizontalAlignment: Text.AlignLeft
+                            horizontalAlignment: Text.AlignLeft
-                        color: Appearance.m3colors.m3outline
+                            color: Appearance.m3colors.m3outline
-                        // textFormat: Text.MarkdownText
+                            // textFormat: Text.MarkdownText
-                        text: notificationObject.body
+                            text: expanded ? notificationObject.body : notificationObject.body.split("\n")[0]
+                        }
                     }
                 }
             }
@@ -314,18 +344,39 @@ Item {
             Flickable {
                 id: actionsFlickable
                 Layout.fillWidth: true
-                Layout.topMargin: -5
+                // Layout.topMargin: -5
                 Layout.leftMargin: 10
                 Layout.rightMargin: 10
-                Layout.bottomMargin: 10
+                Layout.bottomMargin: expanded ? 10 : 0
-                implicitHeight: actionRowLayout.implicitHeight
+                implicitHeight: expanded ? actionRowLayout.implicitHeight : 0
+                height: expanded ? actionRowLayout.implicitHeight : 0
                 contentWidth: actionRowLayout.implicitWidth
                 clip: true
 
-                visible: expanded
+                opacity: expanded ? 1 : 0
+                visible: opacity > 0
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: Appearance.animation.elementDecel.duration
+                        easing.type: Appearance.animation.elementDecel.type
+                    }
+                }
+                Behavior on height {
+                    NumberAnimation {
+                        duration: Appearance.animation.elementDecel.duration
+                        easing.type: Appearance.animation.elementDecel.type
+                    }
+                }
+                Behavior on implicitHeight {
+                    NumberAnimation {
+                        duration: Appearance.animation.elementDecel.duration
+                        easing.type: Appearance.animation.elementDecel.type
+                    }
+                }
 
                 RowLayout {
                     id: actionRowLayout
+                    Layout.alignment: Qt.AlignBottom
 
                     Repeater {
                         id: actionRepeater

.config/quickshell/modules/sidebarRight/CenterWidgetGroup.qml

@@ -17,6 +17,17 @@ Rectangle {
     property int currentTab: 0
     property var tabButtonList: [{"icon": "notifications", "name": "Notifications"}, {"icon": "volume_up", "name": "Volume mixer"}]
 
+    Keys.onPressed: (event) => {
+        if (event.key === Qt.Key_PageDown || event.key === Qt.Key_PageUp) {
+            if (event.key === Qt.Key_PageDown) {
+                root.currentTab = Math.min(root.currentTab + 1, root.tabButtonList.length - 1)
+            } else if (event.key === Qt.Key_PageUp) {
+                root.currentTab = Math.max(root.currentTab - 1, 0)
+            }
+            event.accepted = true;
+        }
+    }
+
     ColumnLayout {
         anchors.margins: 5
         anchors.fill: parent

.config/quickshell/modules/sidebarRight/SidebarRight.qml

@@ -75,7 +75,6 @@ Scope {
                 color: Appearance.colors.colLayer0
                 radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1
 
-                focus: true
                 Keys.onPressed: (event) => {
                     if (event.key === Qt.Key_Escape) {
                         sidebarRoot.visible = false;
@@ -141,6 +140,7 @@ Scope {
 
                     // Center widget group
                     CenterWidgetGroup {
+                        focus: sidebarRoot.visible
                         Layout.alignment: Qt.AlignHCenter
                         Layout.fillHeight: true
                         Layout.fillWidth: true

.config/quickshell/modules/sidebarRight/notifications/NotificationList.qml

@@ -79,8 +79,8 @@ Item {
 
         Behavior on opacity {
             NumberAnimation {
-                duration: Appearance.animation.elementDecel.duration
+                duration: Appearance.animation.menuDecel.duration
-                easing.type: Appearance.animation.elementDecel.type
+                easing.type: Appearance.animation.menuDecel.type
             }
         }
 
@@ -130,6 +130,8 @@ Item {
         Item { Layout.fillWidth: true }
 
         NotificationStatusButton {
+            Layout.alignment: Qt.AlignVCenter
+            Layout.topMargin: 5
             buttonIcon: "clear_all"
             buttonText: "Clear"
             onClicked: () => {