From e4323f4ef0278b6c18149bbce351e79f28048219 Mon Sep 17 00:00:00 2001
From: Micah Stanley <stanleymicah@proton.me>
Date: Thu, 20 Mar 2025 02:06:33 +0000
Subject: [PATCH] notification list: fix notification scrolling within action
 drawer and lockscreen

This merge request fixes an issue with notification list scrolling and also adds a few general improvements.

To accomplish this, the notification widget was moved outside of the action drawer swipe area and lock screen swipe area, separating them from the parent-child relationship. Instead, the notification widget is now layered separately on top. This change seems to fix the conflict when both areas are accepting swipes from the same direction.

Additionally, changes were made to the notification list widget for the action drawer to make it behave similarly to the folio home screen app library. Specifically, when at the top of the list, one can swipe down over the notification area to expand the action drawer. In landscape mode, the media widget, clock, and date were also added to the notification list to provide more room for viewing notifications when scrolling.

Closes https://invent.kde.org/plasma/plasma-mobile/-/issues/318
---
 .../qml/actiondrawer/ActionDrawer.qml         |  74 +++----
 .../qml/actiondrawer/ContentContainer.qml     | 208 +++++++++++++++---
 .../LandscapeContentContainer.qml             |  86 +-------
 .../qml/actiondrawer/NotificationDrawer.qml   | 200 +++++++++++++++++
 .../actiondrawer/PortraitContentContainer.qml |  41 +---
 .../components}/FlickableOpacityGradient.qml  |   0
 .../notifications/NotificationsWidget.qml     | 170 +++++++-------
 .../folio/package/contents/ui/AppDrawer.qml   |   4 +-
 .../contents/ui/settings/AppletListViewer.qml |   3 +-
 shell/contents/lockscreen/HeaderComponent.qml |   2 +
 shell/contents/lockscreen/LockScreen.qml      | 194 ++++++++--------
 .../contents/lockscreen/LockScreenContent.qml |  20 +-
 .../lockscreen/NotificationsComponent.qml     |  28 ++-
 13 files changed, 653 insertions(+), 377 deletions(-)
 create mode 100644 components/mobileshell/qml/actiondrawer/NotificationDrawer.qml
 rename {containments/homescreens/folio/package/contents/ui/private => components/mobileshell/qml/components}/FlickableOpacityGradient.qml (100%)

diff --git a/components/mobileshell/qml/actiondrawer/ActionDrawer.qml b/components/mobileshell/qml/actiondrawer/ActionDrawer.qml
index 3427d25fb..d099deeb7 100644
--- a/components/mobileshell/qml/actiondrawer/ActionDrawer.qml
+++ b/components/mobileshell/qml/actiondrawer/ActionDrawer.qml
@@ -59,6 +59,19 @@ Item {
      */
     property real offset: 0
 
+    /**
+     * Same as offset value except this adds resistance when passing the open position of the current drawer state.
+     */
+    readonly property real offsetResistance: {
+        if (!openToPinnedMode) {
+            return root.calculateResistance(offset, contentContainer.maximizedQuickSettingsOffset);
+        } else if (!opened) {
+            return root.calculateResistance(offset, contentContainer.minimizedQuickSettingsOffset);
+        } else {
+            return root.calculateResistance(offset, contentContainer.maximizedQuickSettingsOffset);
+        }
+    }
+
     /**
      * Whether the panel is being dragged.
      */
@@ -80,11 +93,6 @@ Item {
      */
     property int direction: MobileShell.Direction.None
 
-    /**
-     * The notifications widget being shown. May be null.
-     */
-    property var notificationsWidget: contentContainer.notificationsWidget
-
     /**
      * The mode of the action drawer (portrait or landscape).
      */
@@ -135,8 +143,8 @@ Item {
         }
 
         root.direction = (oldOffset === offset)
-                            ? MobileShell.Direction.None
-                            : (offset > oldOffset ? MobileShell.Direction.Down : MobileShell.Direction.Up);
+            ? MobileShell.Direction.None
+            : (offset > oldOffset ? MobileShell.Direction.Down : MobileShell.Direction.Up);
 
         oldOffset = offset;
 
@@ -150,6 +158,15 @@ Item {
         }
     }
 
+    // calculates offset resistance for the action drawer overshoots it's open position
+    function calculateResistance(value : double, threshold : int) : double {
+        if (value > threshold) {
+            return threshold + Math.pow(value - threshold + 1, Math.max(0.8 - (value - threshold) / ((root.height - threshold) * 15), 0.35));
+        } else {
+            return value;
+        }
+    }
+
     function cancelAnimations() {
         root.state = "";
     }
@@ -267,45 +284,12 @@ Item {
         }
     }
 
-    MobileShell.SwipeArea {
-        id: swipeArea
-        mode: MobileShell.SwipeArea.VerticalOnly
+    // action drawer ui content
+    ContentContainer {
+        id: contentContainer
         anchors.fill: parent
 
-        function startSwipe() {
-            root.cancelAnimations();
-            root.dragging = true;
-
-            // Immediately open action drawer if we interact with it and it's already open
-            // This allows us to have 2 quick flicks from minimized -> expanded
-            if (root.visible && !root.opened) {
-                root.opened = true;
-            }
-        }
-
-        function endSwipe() {
-            root.dragging = false;
-            root.updateState();
-        }
-
-        function moveSwipe(totalDeltaX, totalDeltaY, deltaX, deltaY) {
-            root.offset += deltaY;
-        }
-
-        onSwipeStarted: startSwipe()
-        onSwipeEnded: endSwipe()
-        onSwipeMove: (totalDeltaX, totalDeltaY, deltaX, deltaY) => moveSwipe(totalDeltaX, totalDeltaY, deltaX, deltaY)
-
-        onTouchpadScrollStarted: startSwipe()
-        onTouchpadScrollEnded: endSwipe()
-        onTouchpadScrollMove: (totalDeltaX, totalDeltaY, deltaX, deltaY) => moveSwipe(totalDeltaX, totalDeltaY, deltaX, deltaY)
-
-        ContentContainer {
-            id: contentContainer
-            anchors.fill: parent
-
-            actionDrawer: root
-            quickSettingsModel: root.quickSettingsModel
-        }
+        actionDrawer: root
+        quickSettingsModel: root.quickSettingsModel
     }
 }
diff --git a/components/mobileshell/qml/actiondrawer/ContentContainer.qml b/components/mobileshell/qml/actiondrawer/ContentContainer.qml
index 206bb608d..fabb6d9ec 100644
--- a/components/mobileshell/qml/actiondrawer/ContentContainer.qml
+++ b/components/mobileshell/qml/actiondrawer/ContentContainer.qml
@@ -3,9 +3,10 @@
 
 import QtQuick 2.15
 import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.1
 import QtQuick.Window 2.2
+import QtQuick.Layouts
 
+import org.kde.plasma.components 3.0 as PlasmaComponents
 import org.kde.plasma.private.mobileshell as MobileShell
 import org.kde.plasma.components 3.0 as PC3
 import org.kde.kirigami as Kirigami
@@ -23,30 +24,190 @@ Item {
     readonly property real minimizedQuickSettingsOffset: contentContainerLoader.minimizedQuickSettingsOffset
     readonly property real maximizedQuickSettingsOffset: contentContainerLoader.maximizedQuickSettingsOffset
 
+    Kirigami.Theme.colorSet: Kirigami.Theme.View
+    Kirigami.Theme.inherit: false
+
+    readonly property alias brightnessPressedValue: quickSettings.brightnessPressedValue
+
     function applyMinMax(val) {
         return Math.max(0, Math.min(1, val));
     }
 
-    Kirigami.Theme.colorSet: Kirigami.Theme.View
-    Kirigami.Theme.inherit: false
+    function startSwipe() {
+        actionDrawer.cancelAnimations();
+        actionDrawer.dragging = true;
+        // Immediately open action drawer if we interact with it and it's already open
+        // This allows us to have 2 quick flicks from minimized -> expanded
+        if (actionDrawer.visible && !actionDrawer.opened) {
+            actionDrawer.opened = true;
+        }
+    }
 
-    readonly property alias brightnessPressedValue: quickSettings.brightnessPressedValue
+    function endSwipe() {
+        actionDrawer.dragging = false;
+        actionDrawer.updateState();
+    }
+
+    function moveSwipe(totalDeltaX, totalDeltaY, deltaX, deltaY) {
+        actionDrawer.offset += deltaY;
+    }
 
     // Background color
     Rectangle {
         anchors.fill: parent
         color: Qt.rgba(Kirigami.Theme.backgroundColor.r,
-                        Kirigami.Theme.backgroundColor.g,
-                        Kirigami.Theme.backgroundColor.b,
-                        (root.actionDrawer.mode == ActionDrawer.Portrait || notificationWidget.hasNotifications) ? 0.95 : 0.9)
+                       Kirigami.Theme.backgroundColor.g,
+                       Kirigami.Theme.backgroundColor.b,
+                       0.95)
         Behavior on color { ColorAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.OutQuad } }
         opacity: Math.max(0, Math.min(brightnessPressedValue, actionDrawer.offset / root.minimizedQuickSettingsOffset))
     }
 
+    // The base swipe area.
+    // Used to cover the full surface of the drawer to allow dismissing or expanding it.
+    MobileShell.SwipeArea {
+        id: swipeAreaBase
+        mode: MobileShell.SwipeArea.VerticalOnly
+        anchors.fill: parent
+
+        onSwipeStarted: root.startSwipe()
+        onSwipeEnded: root.endSwipe()
+        onSwipeMove: (totalDeltaX, totalDeltaY, deltaX, deltaY) => root.moveSwipe(totalDeltaX, totalDeltaY, deltaX, deltaY)
+
+        onTouchpadScrollStarted: root.startSwipe()
+        onTouchpadScrollEnded: root.endSwipe()
+        onTouchpadScrollMove: (totalDeltaX, totalDeltaY, deltaX, deltaY) => root.moveSwipe(totalDeltaX, totalDeltaY, deltaX, deltaY)
+
+        // Proxy in the layout that switches between landscape and portrait mode.
+        ColumnLayout {
+            anchors.fill: parent
+            visible: root.actionDrawer.mode != ActionDrawer.Portrait
+            LayoutItemProxy { target: contentContainerLoader }
+        }
+
+        // Mouse area for dismissing action drawer in portrait mode when background is clicked.
+        MouseArea {
+            anchors.fill: parent
+            visible: root.actionDrawer.mode == ActionDrawer.Portrait
+
+            // dismiss drawer when background is clicked
+            onClicked: root.actionDrawer.close();
+        }
+
+        // The clear all notification history button.
+        Item {
+            id: toolButtons
+            height: visible ? spacer.height + toolLayout.height + toolLayout.anchors.topMargin + toolLayout.anchors.bottomMargin : 0
+
+            visible: actionDrawer.intendedToBeVisible
+            opacity: Math.max(0, Math.min(root.brightnessPressedValue, actionDrawer.offsetResistance / root.minimizedQuickSettingsOffset))
+
+            anchors {
+                topMargin: notificationDrawer.height
+                leftMargin: actionDrawer.mode == ActionDrawer.Portrait ? 0 : 10
+                rightMargin: actionDrawer.mode == ActionDrawer.Portrait ? 0 : notificationDrawer.notificationWidget.anchors.rightMargin + Kirigami.Units.gridUnit - notificationDrawer.anchors.leftMargin + 370
+                top: parent.top
+                left: parent.left
+                right: parent.right
+            }
+
+            Rectangle {
+                id: spacer
+                anchors.left: parent.left
+                anchors.right: parent.right
+
+                visible: notificationDrawer.listOverflowing
+                height: 1
+                opacity: 0.25
+                color: Kirigami.Theme.textColor
+            }
+
+            RowLayout {
+                id: toolLayout
+
+                anchors {
+                    top: spacer.bottom
+                    right: parent.right
+                    left: parent.left
+                    leftMargin: Kirigami.Units.largeSpacing
+                    rightMargin: Kirigami.Units.largeSpacing
+                    topMargin: Kirigami.Units.largeSpacing
+                    bottomMargin: Kirigami.Units.largeSpacing
+                }
+
+                PlasmaComponents.ToolButton {
+                    id: clearButton
+
+                    Layout.alignment: Qt.AlignCenter
+
+                    visible: notificationDrawer.hasNotifications
+
+                    font.bold: true
+                    font.pointSize: Kirigami.Theme.smallFont.pointSize
+
+                    icon.name: "edit-clear-history"
+                    text: i18n("Clear All Notifications")
+                    onClicked: notificationDrawer.notificationWidget.clearHistory()
+                }
+            }
+        }
+    }
+
+    // notification drawer ui
+    // separated from the main drawer ui swipe area to prevent scrolling conflicts
+    NotificationDrawer {
+        id: notificationDrawer
+
+        swipeArea: swipeAreaPortrait
+        actionDrawer: root.actionDrawer
+        mediaControlsWidget: root.mediaControlsWidget
+        contentContainer: root
+        opacity: Math.max(0, Math.min(root.brightnessPressedValue, actionDrawer.offsetResistance / root.minimizedQuickSettingsOffset))
+
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+            rightMargin: root.actionDrawer.mode == ActionDrawer.Portrait ? 0 : 360
+            leftMargin: actionDrawer.mode == ActionDrawer.Portrait ? 0 : notificationDrawer.minWidthHeight * 0.06
+        }
+    }
+
+    // Secondary swipe area for uses in portrait.
+    // Covers the surface area of the quick settings panel to allow dismissing or expanding the drawer while also having it over top of the notification list.
+    MobileShell.SwipeArea {
+        id: swipeAreaPortrait
+        mode: MobileShell.SwipeArea.VerticalOnly
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: root.actionDrawer.mode === ActionDrawer.Portrait ? actionDrawer.offsetResistance : root.height
+        interactive: root.actionDrawer.mode === ActionDrawer.Portrait
+
+        onSwipeStarted: root.startSwipe()
+        onSwipeEnded: root.endSwipe()
+        onSwipeMove: (totalDeltaX, totalDeltaY, deltaX, deltaY) => root.moveSwipe(totalDeltaX, totalDeltaY, deltaX, deltaY)
+
+        onTouchpadScrollStarted: root.startSwipe()
+        onTouchpadScrollEnded: root.endSwipe()
+        onTouchpadScrollMove: (totalDeltaX, totalDeltaY, deltaX, deltaY) => root.moveSwipe(totalDeltaX, totalDeltaY, deltaX, deltaY)
+
+        // Proxy in the layout that switches between landscape and portrait mode.
+        ColumnLayout {
+            anchors.fill: parent
+            visible: root.actionDrawer.mode == ActionDrawer.Portrait
+            LayoutItemProxy { target: contentContainerLoader }
+        }
+    }
+
     // Layout that switches between landscape and portrait mode
     Loader {
         id: contentContainerLoader
-        anchors.fill: parent
+
+        Layout.fillWidth: true
+        Layout.fillHeight: true
 
         readonly property real minimizedQuickSettingsOffset: item ? item.minimizedQuickSettingsOffset : 0
         readonly property real maximizedQuickSettingsOffset: item ? item.maximizedQuickSettingsOffset : 0
@@ -59,6 +220,7 @@ Item {
         sourceComponent: root.actionDrawer.mode == ActionDrawer.Portrait ? portraitContentContainer : landscapeContentContainer
     }
 
+    // The portrait content container.
     Component {
         id: portraitContentContainer
         PortraitContentContainer {
@@ -69,10 +231,10 @@ Item {
             quickSettings: root.quickSettings
             statusBar: root.statusBar
             mediaControlsWidget: root.mediaControlsWidget
-            notificationsWidget: root.notificationsWidget
         }
     }
 
+    // The landscape content container.
     Component {
         id: landscapeContentContainer
         LandscapeContentContainer {
@@ -82,12 +244,9 @@ Item {
 
             quickSettings: root.quickSettings
             statusBar: root.statusBar
-            mediaControlsWidget: root.mediaControlsWidget
-            notificationsWidget: root.notificationsWidget
         }
     }
 
-
     // Components shared between the two layouts.
     // This allows us to avoid having to reload the components every time the screen size changes.
 
@@ -116,29 +275,8 @@ Item {
 
     property MobileShell.MediaControlsWidget mediaControlsWidget: MobileShell.MediaControlsWidget {
         id: mediaWidget
-        inActionDrawer: true
-
-        opacity: brightnessPressedValue
-    }
-
-    property MobileShell.NotificationsWidget notificationsWidget: MobileShell.NotificationsWidget {
-        id: notificationWidget
-        historyModel: root.actionDrawer.notificationModel
-        historyModelType: root.actionDrawer.notificationModelType
-        notificationSettings: root.actionDrawer.notificationSettings
-        actionsRequireUnlock: root.actionDrawer.restrictedPermissions
-        onUnlockRequested: root.actionDrawer.permissionsRequested()
+        inActionDrawer: root.actionDrawer.mode == ActionDrawer.Portrait
 
         opacity: brightnessPressedValue
-
-        Connections {
-            target: root.actionDrawer
-
-            function onRunPendingNotificationAction() {
-                notificationWidget.runPendingAction();
-            }
-        }
-
-        onBackgroundClicked: root.actionDrawer.close();
     }
-}
\ No newline at end of file
+}
diff --git a/components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml b/components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml
index 7dbc79e52..cb22d5899 100644
--- a/components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml
+++ b/components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml
@@ -24,14 +24,12 @@ Item {
 
     property alias quickSettings: quickSettingsPanel.quickSettings
     property alias statusBar: quickSettingsPanel.statusBar
-    property alias mediaControlsWidget: mediaControlsWidgetProxy.contentItem
-    property alias notificationsWidget: notificationWidgetProxy.contentItem
 
     readonly property real minimizedQuickSettingsOffset: height
     readonly property real maximizedQuickSettingsOffset: height
     readonly property bool isOnLargeScreen: width > quickSettingsPanel.width * 2.5
     readonly property real minWidthHeight: Math.min(root.width, root.height)
-    readonly property real opacityValue: Math.max(0, Math.min(1, actionDrawer.offset / root.minimizedQuickSettingsOffset))
+    readonly property real opacityValue: Math.max(0, Math.min(1, actionDrawer.offsetResistance / root.minimizedQuickSettingsOffset))
     readonly property double brightnessPressedValue: quickSettings.brightnessPressedValue
 
     Kirigami.Theme.colorSet: Kirigami.Theme.View
@@ -50,86 +48,6 @@ Item {
         // dismiss drawer when background is clicked
         onClicked: root.actionDrawer.close();
 
-        // left side
-        ColumnLayout {
-            id: columnLayout
-
-            opacity: opacityValue
-            spacing: 0
-
-            anchors {
-                top: mediaControlsWidgetProxy.bottom
-                topMargin: 0
-                bottom: parent.bottom
-                bottomMargin: 0
-                right: quickSettingsPanel.left
-                left: parent.left
-            }
-            anchors.margins: minWidthHeight * 0.06
-
-            MobileShell.BaseItem {
-                id: notificationWidgetProxy
-
-                // don't allow notifications widget to get too wide
-                Layout.maximumWidth: Kirigami.Units.gridUnit * 25
-                Layout.fillHeight: true
-                Layout.fillWidth: true
-                Layout.topMargin: minWidthHeight * 0.02
-            }
-        }
-
-        PlasmaComponents.Label {
-            id: clock
-            text: Qt.formatTime(timeSource.data.Local.DateTime, MobileShell.ShellUtil.isSystem24HourFormat ? "h:mm" : "h:mm ap")
-            verticalAlignment: Qt.AlignVCenter
-            opacity: Math.min(brightnessPressedValue, columnLayout.opacity)
-
-            anchors {
-                left: parent.left
-                top: parent.top
-                topMargin: columnLayout.anchors.margins / 2
-                leftMargin: columnLayout.anchors.margins
-            }
-
-            font.pixelSize: Math.min(40, minWidthHeight * 0.1)
-            font.weight: Font.ExtraLight
-            elide: Text.ElideRight
-        }
-
-        PlasmaComponents.Label {
-            id: date
-            text: Qt.formatDate(timeSource.data.Local.DateTime, "ddd MMMM d")
-            verticalAlignment: Qt.AlignTop
-            color: Kirigami.Theme.disabledTextColor
-            opacity: Math.min(brightnessPressedValue, columnLayout.opacity)
-
-            anchors {
-                left: parent.left
-                top: clock.bottom
-                bottom: isOnLargeScreen ? columnLayout.top : mediaControlsWidgetProxy.top
-                topMargin: Kirigami.Units.smallSpacing
-                leftMargin: columnLayout.anchors.margins
-            }
-
-            font.pixelSize: Math.min(20, minWidthHeight * 0.05)
-            font.weight: Font.Light
-        }
-
-        MobileShell.BaseItem {
-            id: mediaControlsWidgetProxy
-            property real fullHeight: visible ? height + Kirigami.Units.smallSpacing * 6 : 0
-
-            y: isOnLargeScreen ? date.y - height + date.implicitHeight : date.y + date.implicitHeight + columnLayout.anchors.margins / 2
-            opacity: columnLayout.opacity
-
-            anchors {
-                right: quickSettingsPanel.left
-                left: isOnLargeScreen ? date.right : parent.left
-                leftMargin: columnLayout.anchors.margins
-                rightMargin: columnLayout.anchors.margins - quickSettingsPanel.leftPadding
-            }
-        }
-
         // right sidebar
         MobileShell.QuickSettingsPanel {
             id: quickSettingsPanel
@@ -139,7 +57,7 @@ Item {
             readonly property real intendedWidth: 360
 
             property real offsetRatio: quickSettingsPanel.height / root.height
-            anchors.topMargin: Math.min(root.actionDrawer.offset * offsetRatio - quickSettingsPanel.height, 0)
+            anchors.topMargin: Math.min(root.actionDrawer.offsetResistance * offsetRatio - quickSettingsPanel.height, 0)
             anchors.top: parent.top
             anchors.right: parent.right
 
diff --git a/components/mobileshell/qml/actiondrawer/NotificationDrawer.qml b/components/mobileshell/qml/actiondrawer/NotificationDrawer.qml
new file mode 100644
index 000000000..480ba7d31
--- /dev/null
+++ b/components/mobileshell/qml/actiondrawer/NotificationDrawer.qml
@@ -0,0 +1,200 @@
+/*
+ *   SPDX-FileCopyrightText: 2024 Micah Stanley <stanleymicah@proton.me>
+ *
+ *   SPDX-License-Identifier: LGPL-2.0-or-later
+ */
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.1
+
+import org.kde.plasma.plasma5support 2.0 as P5Support
+import org.kde.plasma.components 3.0 as PlasmaComponents
+import org.kde.plasma.private.mobileshell as MobileShell
+import org.kde.kirigami 2.20 as Kirigami
+
+Item {
+    id: root
+
+    required property var actionDrawer
+    required property var contentContainer
+    required property var swipeArea
+
+    property alias mediaControlsWidget: notificationWidget.header
+    property alias notificationWidget: notificationWidget
+    property real contentY: notificationWidget.listView.contentY
+
+    property real topPadding: actionDrawer.mode == ActionDrawer.Portrait ? Kirigami.Units.largeSpacing : date.y + date.height + Kirigami.Units.smallSpacing * 6
+    property real topMargin: actionDrawer.mode == ActionDrawer.Portrait ? actionDrawer.offsetResistance + 1 : 0
+
+    readonly property real minWidthHeight: Math.min(actionDrawer.width, actionDrawer.height)
+    readonly property bool hasNotifications: notificationWidget.hasNotifications
+    readonly property bool listOverflowing: notificationWidget.listView.listOverflowing
+
+    height: Math.min(actionDrawer.height - toolButtons.height, notificationWidget.listView.contentHeight + 10 + topMargin)
+
+    // time source for the time and date whenin landscape mode
+    P5Support.DataSource {
+        id: timeSource
+        engine: "time"
+        connectedSources: ["Local"]
+        interval: 60 * 1000
+    }
+
+    Kirigami.Theme.colorSet: Kirigami.Theme.View
+    Kirigami.Theme.inherit: false
+
+    MobileShell.VelocityCalculator {
+        id: velocityCalculator
+    }
+
+    // notification list widget
+    // margin adjusted to fit and postion into the action drawer
+    MobileShell.NotificationsWidget {
+        id: notificationWidget
+        anchors.fill: parent
+        anchors.topMargin: root.topMargin
+        anchors.rightMargin: actionDrawer.mode == ActionDrawer.Portrait ? 0 : Math.max(root.width - Kirigami.Units.gridUnit * 25, 0)
+        anchors.leftMargin: actionDrawer.mode == ActionDrawer.Portrait ? 0 : -Kirigami.Units.gridUnit
+
+        historyModel: actionDrawer.notificationModel
+        historyModelType: actionDrawer.notificationModelType
+        notificationSettings: actionDrawer.notificationSettings
+        actionsRequireUnlock: actionDrawer.restrictedPermissions
+        onUnlockRequested: actionDrawer.permissionsRequested()
+        topPadding: root.topPadding
+        showHeader: actionDrawer.mode != ActionDrawer.Portrait
+        listView.interactive: !actionDrawer.dragging && root.listOverflowing
+
+        Connections {
+            target: actionDrawer
+
+            function onRunPendingNotificationAction() {
+                notificationWidget.runPendingAction();
+            }
+        }
+
+        // the first swipe when at the top of the notification list is handeled using a MouseArea, not the flickable
+        // this is so one can swipe down from the top of the notification drawer to expand the action drawer
+        DragHandler {
+            id: dragHandler
+            yAxis.enabled: true
+            xAxis.enabled: false
+
+            property bool startActive: false
+
+            property real startOffset: 0
+            property real startMouseY: 0
+            property real lastMouseY: 0
+
+            property bool startedAtYBeginning: false
+            property bool startedAtYEnd: false
+            property bool drawerDrag: true
+
+            property string currentState
+
+            onTranslationChanged: {
+                if (startActive) {
+                    dragHandler.startedAtYBeginning = notificationWidget.listView.atYBeginning;
+                    dragHandler.startedAtYEnd = notificationWidget.listView.atYEnd;
+                    startActive = false;
+
+                    if (notificationWidget.listView.atYBeginning) {
+                        currentState = actionDrawer.state;
+                        actionDrawer.cancelAnimations();
+                        actionDrawer.dragging = true;
+                        actionDrawer.opened = true;
+                        dragHandler.startOffset = actionDrawer.offset;
+                        dragHandler.startMouseY = translation.y;
+                        dragHandler.lastMouseY = dragHandler.startMouseY;
+                        dragHandler.drawerDrag = true;
+
+                        velocityCalculator.startMeasure();
+                        velocityCalculator.changePosition(notificationWidget.listView.contentY);
+                    }
+                }
+
+                if (!actionDrawer.dragging) {
+                    return;
+                }
+
+                if (!(dragHandler.startedAtYBeginning && dragHandler.startedAtYEnd) && ((dragHandler.startedAtYBeginning && (dragHandler.startMouseY - translation.y) > 0) || (dragHandler.startedAtYEnd && (translation.y - dragHandler.startMouseY) > 0))) {
+                    actionDrawer.state = currentState;
+                    dragHandler.drawerDrag = false;
+                }
+
+                if (dragHandler.drawerDrag) {
+                    actionDrawer.offset = dragHandler.startOffset - (dragHandler.startMouseY - translation.y);
+                } else {
+                    let contentY = notificationWidget.listView.contentY - (translation.y - dragHandler.lastMouseY);
+
+                    notificationWidget.listView.contentY = contentY;
+                    velocityCalculator.changePosition(notificationWidget.listView.contentY);
+                    dragHandler.lastMouseY = translation.y;
+                }
+            }
+
+            onActiveChanged: {
+                startActive = active;
+
+                if (!active) { // release event
+                    if (actionDrawer.dragging) {
+                        if (dragHandler.drawerDrag) {
+                            actionDrawer.updateState();
+                        } else {
+                            notificationWidget.listView.flick(0, -velocityCalculator.velocity);
+                        }
+                    }
+                    actionDrawer.dragging = false;
+                    dragHandler.drawerDrag = true;
+                }
+            }
+        }
+
+    }
+
+    // time and date displayed in landscape mode
+    Item {
+        id: landscapeModeHeader
+        anchors.fill: parent
+        visible: actionDrawer.mode != ActionDrawer.Portrait
+
+        transform: [
+            Translate {
+                y: -notificationWidget.listView.contentY + notificationWidget.listView.originY
+            }
+        ]
+
+        PlasmaComponents.Label {
+            id: clock
+            text: Qt.formatTime(timeSource.data.Local.DateTime, MobileShell.ShellUtil.isSystem24HourFormat ? "h:mm" : "h:mm ap")
+            verticalAlignment: Qt.AlignVCenter
+
+            anchors {
+                left: parent.left
+                top: parent.top
+                topMargin: minWidthHeight * 0.03
+            }
+
+            font.pixelSize: Math.min(40, minWidthHeight * 0.1)
+            font.weight: Font.ExtraLight
+            elide: Text.ElideRight
+        }
+
+        PlasmaComponents.Label {
+            id: date
+            text: Qt.formatDate(timeSource.data.Local.DateTime, "ddd MMMM d")
+            verticalAlignment: Qt.AlignTop
+            color: Kirigami.Theme.disabledTextColor
+
+            anchors {
+                left: parent.left
+                top: clock.bottom
+                topMargin: Kirigami.Units.smallSpacing
+            }
+
+            font.pixelSize: Math.min(20, minWidthHeight * 0.05)
+            font.weight: Font.Light
+        }
+    }
+}
diff --git a/components/mobileshell/qml/actiondrawer/PortraitContentContainer.qml b/components/mobileshell/qml/actiondrawer/PortraitContentContainer.qml
index c4f2e26c4..ad892d027 100644
--- a/components/mobileshell/qml/actiondrawer/PortraitContentContainer.qml
+++ b/components/mobileshell/qml/actiondrawer/PortraitContentContainer.qml
@@ -28,7 +28,6 @@ Item {
     property alias quickSettings: quickSettingsDrawer.quickSettings
     property alias statusBar: quickSettingsDrawer.statusBar
     property alias mediaControlsWidget: quickSettingsDrawer.mediaControlsWidget
-    property alias notificationsWidget: notificationWidgetProxy.contentItem
 
     Kirigami.Theme.colorSet: Kirigami.Theme.View
     Kirigami.Theme.inherit: false
@@ -39,19 +38,20 @@ Item {
 
     MobileShell.QuickSettingsDrawer {
         id: quickSettingsDrawer
-        z: 1 // ensure it's above notifications
 
         // physically move the drawer when between closed <-> pinned mode
         readonly property real offsetHeight: actionDrawer.openToPinnedMode ? minimizedQuickSettingsOffset : maximizedQuickSettingsOffset
-        anchors.topMargin: Math.min(root.actionDrawer.offset - offsetHeight, 0)
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
+        anchors {
+            topMargin: Math.min(root.actionDrawer.offsetResistance - offsetHeight, 0)
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
 
         actionDrawer: root.actionDrawer
 
         // opacity and move animation (disabled when openToPinnedMode is false)
-        property real offsetDist: actionDrawer.offset - minimizedQuickSettingsOffset
+        property real offsetDist: actionDrawer.offsetResistance - minimizedQuickSettingsOffset
         property real totalOffsetDist: maximizedQuickSettingsOffset - minimizedQuickSettingsOffset
         minimizedToFullProgress: actionDrawer.openToPinnedMode ? (actionDrawer.opened ? applyMinMax(offsetDist / totalOffsetDist) : 0) : 1
 
@@ -65,33 +65,12 @@ Item {
         addedHeight: {
             if (!actionDrawer.openToPinnedMode) {
                 // if pinned mode disabled, just go to full height
-                let progress = (root.actionDrawer.offset - maximizedQuickSettingsOffset) / (quickSettingsDrawer.maxAddedHeight * 4);
-                let effectProgress = Math.atan(Math.max(0, progress));
-                return (quickSettingsDrawer.maxAddedHeight * effectProgress) + quickSettingsDrawer.maxAddedHeight;
+                return Math.max(maximizedQuickSettingsOffset - minimizedQuickSettingsOffset, root.actionDrawer.offsetResistance - minimizedQuickSettingsOffset)
             } else if (!actionDrawer.opened) {
-                // over-scroll effect for initial opening
-                let progress = (root.actionDrawer.offset - minimizedQuickSettingsOffset) / quickSettingsDrawer.maxAddedHeight;
-                let effectProgress = Math.atan(Math.max(0, progress));
-                return quickSettingsDrawer.maxAddedHeight * 0.25 * effectProgress;
+                return Math.max(0, root.actionDrawer.offsetResistance - minimizedQuickSettingsOffset)
             } else {
-                // over-scroll effect for full drawer
-                let progress = (root.actionDrawer.offset - maximizedQuickSettingsOffset) / (quickSettingsDrawer.maxAddedHeight * 4);
-                let effectProgress = Math.atan(Math.max(0, progress));
-                // as the drawer opens, add height to the rectangle, revealing content
-                return (quickSettingsDrawer.maxAddedHeight * effectProgress) + Math.max(0, Math.min(quickSettingsDrawer.maxAddedHeight, root.actionDrawer.offset - minimizedQuickSettingsOffset));
+                return Math.max(0, root.actionDrawer.offsetResistance - minimizedQuickSettingsOffset)
             }
         }
     }
-
-    MobileShell.BaseItem {
-        id: notificationWidgetProxy
-
-        anchors {
-            top: quickSettingsDrawer.bottom
-            bottom: parent.bottom
-            left: parent.left
-            right: parent.right
-        }
-        opacity: applyMinMax(root.actionDrawer.offset / root.minimizedQuickSettingsOffset)
-    }
 }
diff --git a/containments/homescreens/folio/package/contents/ui/private/FlickableOpacityGradient.qml b/components/mobileshell/qml/components/FlickableOpacityGradient.qml
similarity index 100%
rename from containments/homescreens/folio/package/contents/ui/private/FlickableOpacityGradient.qml
rename to components/mobileshell/qml/components/FlickableOpacityGradient.qml
diff --git a/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml b/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml
index 0e32a7cfd..ce127eecf 100644
--- a/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml
+++ b/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml
@@ -53,6 +53,31 @@ Item {
      */
     property bool actionsRequireUnlock: false
 
+    /**
+     * Top padding of the notification list.
+     */
+    property int topPadding: 0
+
+    /**
+     * Bottom padding of the notification list.
+     */
+    property int bottomPadding: 0
+
+    /**
+     * Header component for notification list.
+     */
+    property var header
+
+    /**
+     * Whether to show the header component.
+     */
+    property bool showHeader: false
+
+    /**
+     * Gives access to the notification list view outside of the notification widget.
+     */
+    property alias listView: list
+
     /**
      * Whether the widget has notifications.
      */
@@ -73,11 +98,6 @@ Item {
      */
     signal unlockRequested()
 
-    /**
-     * Emitted when the background is clicked (not a notification or other element).
-     */
-    signal backgroundClicked()
-
     /**
      * Run pending action that was pending for authentication when unlockRequested() was emitted.
      */
@@ -128,13 +148,6 @@ Item {
         intervalAlignment: P5Support.Types.AlignToMinute
     }
 
-    // implement background clicking signal
-    MouseArea {
-        anchors.fill: parent
-        onClicked: backgroundClicked()
-        z: -1 // ensure that this is below notification items so we don't steal button clicks
-    }
-
     ListView {
         id: list
         model: historyModel
@@ -148,10 +161,11 @@ Item {
         readonly property int animationDuration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.longDuration : 0
 
         // If a screen overflow occurs, fix height in order to maintain tool buttons in place.
-        readonly property bool listOverflowing: contentItem.childrenRect.height + toolButtons.height + spacing >= root.height
+        readonly property bool listOverflowing: listHeight + spacing >= root.height
+        readonly property int listHeight: contentItem.childrenRect.height
 
         bottomMargin: spacing
-        height: count === 0 ? 0 : (listOverflowing ? root.height - toolButtons.height : contentItem.childrenRect.height + bottomMargin)
+        height: count === 0 ? (root.topPadding + (showHeader ? root.header.height + listHeight : 0)) : (listOverflowing ? root.height : listHeight + bottomMargin)
 
         anchors {
             top: parent.top
@@ -159,7 +173,7 @@ Item {
             right: parent.right
         }
 
-        boundsBehavior: Flickable.StopAtBounds
+        boundsBehavior: Flickable.DragAndOvershootBounds
         spacing: Kirigami.Units.largeSpacing
 
         // TODO keyboard focus
@@ -167,6 +181,39 @@ Item {
         highlightResizeDuration: 0
         highlight: Item {}
 
+        // media control widget
+        // added to the notification list when in landscape mode
+        Component {
+            id: headerComponent
+            Item {
+                width: parent.width
+
+                MobileShell.BaseItem {
+                    id: headerComponentProxy
+
+                    contentItem: showHeader ? root.header : null
+                    y: root.topPadding - Kirigami.Units.largeSpacing
+
+                    width: parent.width - Kirigami.Units.gridUnit * 2
+                    anchors.left: parent.left
+                    anchors.leftMargin: Kirigami.Units.gridUnit
+                }
+            }
+        }
+
+        // set bottom padding for the notification list
+        Component {
+            id: footerComponent
+            Item {
+                width: parent.width
+                height: root.bottomPadding
+            }
+        }
+
+        header: headerComponent
+
+        footer: footerComponent
+
         section {
             property: "isGroup"
             criteria: ViewSection.FullString
@@ -250,12 +297,28 @@ Item {
                 PropertyAction { target: delegateLoader; property: "ListView.delayRemove"; value: false }
             }
 
+            // adjust top paddding for media control widget
             Component {
                 id: groupDelegate
-                NotificationGroupHeader {
-                    applicationName: model.applicationName
-                    applicationIconSource: model.applicationIconName
-                    originName: model.originName || ""
+
+                Column {
+                    spacing: Kirigami.Units.smallSpacing
+
+                    height: headerSpace.height + groupHeader.height
+
+                    Item {
+                        id: headerSpace
+                        width: parent.width
+                        height: index == 0 ? root.topPadding + (showHeader ? root.header.height : 0) : 0
+                        visible: index == 0
+                    }
+
+                    NotificationGroupHeader {
+                        id: groupHeader
+                        applicationName: model.applicationName
+                        applicationIconSource: model.applicationIconName
+                        originName: model.originName || ""
+                    }
                 }
             }
 
@@ -265,7 +328,14 @@ Item {
                 Column {
                     spacing: Kirigami.Units.smallSpacing
 
-                    height: notificationItem.height + showMoreLoader.height
+                    height: headerSpace.height + notificationItem.height + showMoreLoader.height
+
+                    Item {
+                        id: headerSpace
+                        width: parent.width
+                        height: index == 0 ? root.topPadding + (showHeader ? root.header.height : 0) : 0
+                        visible: index == 0
+                    }
 
                     NotificationItem {
                         id: notificationItem
@@ -303,7 +373,7 @@ Item {
                                 return false;
 
                             return (model.groupChildrenCount > model.expandedGroupChildrenCount || model.isGroupExpanded)
-                                && delegateLoader.ListView.nextSection != delegateLoader.ListView.section;
+                            && delegateLoader.ListView.nextSection != delegateLoader.ListView.section;
                         }
 
                         // state + transition: animates the item when it becomes visible. Fade off is handled by above ListView.onRemove.
@@ -323,8 +393,8 @@ Item {
                         sourceComponent: PlasmaComponents3.ToolButton {
                             icon.name: model.isGroupExpanded ? "arrow-up" : "arrow-down"
                             text: model.isGroupExpanded ? i18n("Show Fewer")
-                                                        : i18nc("Expand to show n more notifications",
-                                                                "Show %1 More", (model.groupChildrenCount - model.expandedGroupChildrenCount))
+                            : i18nc("Expand to show n more notifications",
+                                    "Show %1 More", (model.groupChildrenCount - model.expandedGroupChildrenCount))
                             onClicked: {
                                 list.setGroupExpanded(model.index, !model.isGroupExpanded)
                             }
@@ -334,58 +404,4 @@ Item {
             }
         }
     }
-
-    Item {
-        id: toolButtons
-        height: visible ? spacer.height + toolLayout.height + toolLayout.anchors.topMargin + toolLayout.anchors.bottomMargin : 0
-
-        // do not show on lockscreen
-        visible: !root.actionsRequireUnlock
-
-        anchors {
-            top: list.bottom
-            left: parent.left
-            right: parent.right
-        }
-
-        Rectangle {
-            id: spacer
-            anchors.left: parent.left
-            anchors.right: parent.right
-
-            visible: list.listOverflowing
-            height: 1
-            opacity: 0.25
-            color: Kirigami.Theme.textColor
-        }
-
-        RowLayout {
-            id: toolLayout
-
-            anchors {
-                top: spacer.bottom
-                right: parent.right
-                left: parent.left
-                leftMargin: Kirigami.Units.largeSpacing
-                rightMargin: Kirigami.Units.largeSpacing
-                topMargin: list.spacing
-                bottomMargin: list.spacing
-            }
-
-            PlasmaComponents3.ToolButton {
-                id: clearButton
-
-                Layout.alignment: Qt.AlignCenter
-
-                visible: hasNotifications
-
-                font.bold: true
-                font.pointSize: Kirigami.Theme.smallFont.pointSize
-
-                icon.name: "edit-clear-history"
-                text: i18n("Clear All Notifications")
-                onClicked: clearHistory()
-            }
-        }
-    }
 }
diff --git a/containments/homescreens/folio/package/contents/ui/AppDrawer.qml b/containments/homescreens/folio/package/contents/ui/AppDrawer.qml
index 10167a616..d479b505f 100644
--- a/containments/homescreens/folio/package/contents/ui/AppDrawer.qml
+++ b/containments/homescreens/folio/package/contents/ui/AppDrawer.qml
@@ -62,12 +62,12 @@ Item {
             anchors.left: parent.left
             anchors.right: parent.right
             anchors.bottom: parent.bottom
-            opacity: 0
+            opacity: 0 // we display with the opacity gradient below
             headerHeight: root.headerHeight
         }
 
         // opacity gradient at grid edges
-        FlickableOpacityGradient {
+        MobileShell.FlickableOpacityGradient {
             anchors.fill: appDrawerGrid
             flickable: appDrawerGrid
         }
diff --git a/containments/homescreens/folio/package/contents/ui/settings/AppletListViewer.qml b/containments/homescreens/folio/package/contents/ui/settings/AppletListViewer.qml
index b02bb3129..518d25bff 100644
--- a/containments/homescreens/folio/package/contents/ui/settings/AppletListViewer.qml
+++ b/containments/homescreens/folio/package/contents/ui/settings/AppletListViewer.qml
@@ -13,6 +13,7 @@ import org.kde.plasma.private.shell 2.0
 import org.kde.private.mobile.homescreen.folio 1.0 as Folio
 import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import org.kde.plasma.components 3.0 as PC3
+import org.kde.plasma.private.mobileshell as MobileShell
 
 import '../delegate'
 import '../private'
@@ -199,7 +200,7 @@ MouseArea {
     }
 
     // opacity gradient at grid edges
-    FlickableOpacityGradient {
+    MobileShell.FlickableOpacityGradient {
         anchors.fill: gridView
         flickable: gridView
     }
diff --git a/shell/contents/lockscreen/HeaderComponent.qml b/shell/contents/lockscreen/HeaderComponent.qml
index 00ee89cb1..8844e8f32 100644
--- a/shell/contents/lockscreen/HeaderComponent.qml
+++ b/shell/contents/lockscreen/HeaderComponent.qml
@@ -20,6 +20,8 @@ Item {
 
     property var notificationsModel: []
 
+    readonly property bool actionDrawerVisible: swipeArea.actionDrawer.intendedToBeVisible
+
     signal passwordRequested()
 
     // The status bar and quicksettings take a while to load, don't pause initial lockscreen loading for it
diff --git a/shell/contents/lockscreen/LockScreen.qml b/shell/contents/lockscreen/LockScreen.qml
index 94346d5e8..314e8c71e 100644
--- a/shell/contents/lockscreen/LockScreen.qml
+++ b/shell/contents/lockscreen/LockScreen.qml
@@ -30,7 +30,7 @@ Item {
     readonly property bool isWidescreen: root.height < 720 && (root.height < root.width * 0.75)
     property bool notificationsShown: false
 
-    property var passwordBar: flickableLoader.item ? flickableLoader.item.passwordBar : null
+    property var passwordBar: flickableLoader.item ? flickableLoader.item.flickable.passwordBar : null
 
     Component.onCompleted: {
         forceActiveFocus();
@@ -40,7 +40,7 @@ Item {
     Keys.onPressed: (event) => {
         if (flickableLoader.item) {
             root.lockScreenState.isKeyboardMode = true;
-            flickableLoader.item.goToOpenPosition();
+            flickableLoader.item.flickable.goToOpenPosition();
             passwordBar.textField.forceActiveFocus();
 
             passwordBar.keyPress(event.text);
@@ -63,7 +63,7 @@ Item {
 
         sourceComponent: WallpaperBlur {
             source: wallpaper
-            opacity: flickableLoader.item ? flickableLoader.item.openFactor : 0
+            opacity: flickableLoader.item ? flickableLoader.item.flickable.openFactor : 0
         }
     }
 
@@ -73,7 +73,7 @@ Item {
         // Ensure keypad is opened when password is updated (ex. keyboard)
         function onPasswordChanged() {
             if (root.lockScreenState.password !== "" && flickableLoader.item) {
-                flickableLoader.item.goToOpenPosition();
+                flickableLoader.item.flickable.goToOpenPosition();
             }
         }
     }
@@ -85,7 +85,7 @@ Item {
         onDpmsTurnedOff: (screen) => {
             if (screen.name === Screen.name) {
                 if (flickableLoader.item) {
-                    flickableLoader.item.goToClosePosition();
+                    flickableLoader.item.flickable.goToClosePosition();
                 }
                 lockScreenState.resetPassword();
             }
@@ -102,7 +102,7 @@ Item {
             z: 1
             anchors.fill: parent
             statusBarHeight: MobileShell.Constants.topPanelHeight
-            openFactor: flickableLoader.item ? flickableLoader.item.openFactor : 0
+            openFactor: flickableLoader.item ? flickableLoader.item.flickable.openFactor : 0
             notificationsModel: root.notifModel
             onPasswordRequested: root.askPassword()
         }
@@ -145,43 +145,79 @@ Item {
             }
 
             // Container for lockscreen contents
-            sourceComponent: FlickContainer {
-                id: flickable
-                property alias passwordBar: keypad.passwordBar
-
-                // Speed up animation when passwordless
-                animationDuration: root.lockScreenState.canBeUnlocked ? 400 : 800
+            sourceComponent: Item {
+                id: item
+                property alias flickable: flickable
+                FlickContainer {
+                    id: flickable
+                    anchors.fill: parent
+                    property alias passwordBar: keypad.passwordBar
 
-                // Distance to swipe to fully open keypad
-                keypadHeight: Kirigami.Units.gridUnit * 20
+                    // Speed up animation when passwordless
+                    animationDuration: root.lockScreenState.canBeUnlocked ? 400 : 800
 
-                Component.onCompleted: {
-                    // Go to closed position when loaded
-                    flickable.position = 0;
-                    flickable.goToClosePosition();
-                }
+                    // Distance to swipe to fully open keypad
+                    keypadHeight: Kirigami.Units.gridUnit * 20
 
-                // Unlock lockscreen if it's already unlocked and keypad is opened
-                onOpened: {
-                    if (root.lockScreenState.canBeUnlocked) {
-                        Qt.quit();
+                    Component.onCompleted: {
+                        // Go to closed position when loaded
+                        flickable.position = 0;
+                        flickable.goToClosePosition();
                     }
-                }
 
-                // Unlock lockscreen if it's already unlocked and keypad is open
-                Connections {
-                    target: root.lockScreenState
-                    function onCanBeUnlockedChanged() {
-                        if (root.lockScreenState.canBeUnlocked && flickable.openFactor > 0.8) {
+                    // Unlock lockscreen if it's already unlocked and keypad is opened
+                    onOpened: {
+                        if (root.lockScreenState.canBeUnlocked) {
                             Qt.quit();
                         }
                     }
-                }
 
-                // Clear entered password after closing keypad
-                onOpenFactorChanged: {
-                    if (flickable.openFactor < 0.1 && !flickable.movingUp) {
-                        root.passwordBar.clear();
+                    // Unlock lockscreen if it's already unlocked and keypad is open
+                    Connections {
+                        target: root.lockScreenState
+                        function onCanBeUnlockedChanged() {
+                            if (root.lockScreenState.canBeUnlocked && flickable.openFactor > 0.8) {
+                                Qt.quit();
+                            }
+                        }
+                    }
+
+                    // Clear entered password after closing keypad
+                    onOpenFactorChanged: {
+                        if (flickable.openFactor < 0.1 && !flickable.movingUp) {
+                            root.passwordBar.clear();
+                        }
+                    }
+
+                    // scroll up icon
+                    BottomIconIndicator {
+                        id: scrollUpIconLoader
+                        lockScreenState: root.lockScreenState
+                        opacity: Math.max(0, 1 - flickable.openFactor * 2)
+
+                        anchors.bottom: parent.bottom
+                        anchors.bottomMargin: Kirigami.Units.gridUnit + flickable.position * 0.1
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+
+                    Rectangle {
+                        id: keypadScrim
+                        anchors.fill: parent
+                        visible: opacity > 0
+                        opacity: flickable.openFactor
+                        color: Qt.rgba(0, 0, 0, 0.5)
+                    }
+
+                    Keypad {
+                        id: keypad
+                        visible: !root.lockScreenState.canBeUnlocked // don't show for passwordless login
+                        anchors.fill: parent
+                        openProgress: flickable.openFactor
+                        lockScreenState: root.lockScreenState
+
+                        // only show in last 50% of anim
+                        opacity: (flickable.openFactor - 0.5) * 2
+                        transform: Translate { y: (flickable.keypadHeight - flickable.position) * 0.1 }
                     }
                 }
 
@@ -199,50 +212,23 @@ Item {
                         }
                     ]
 
-                    fullHeight: root.height
-
                     lockScreenState: root.lockScreenState
                     notificationsModel: root.notifModel
                     onNotificationsShownChanged: root.notificationsShown = notificationsShown
                     onPasswordRequested: flickable.goToOpenPosition()
 
-                    anchors.topMargin: headerBar.statusBarHeight
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                }
-
-                // scroll up icon
-                BottomIconIndicator {
-                    id: scrollUpIconLoader
-                    lockScreenState: root.lockScreenState
-                    opacity: Math.max(0, 1 - flickable.openFactor * 2)
-
-                    anchors.bottom: parent.bottom
-                    anchors.bottomMargin: Kirigami.Units.gridUnit + flickable.position * 0.1
-                    anchors.horizontalCenter: parent.horizontalCenter
-                }
+                    scrollLock: headerBar.actionDrawerVisible || (flickableLoader.item ? flickableLoader.item.flickable.openFactor > 0.2 : false)
+                    z: scrollLock ? -1 : 0
+
+                    anchors {
+                        //topMargin: headerBar.statusBarHeight
+                        top: item.top
+                        bottom: item.bottom
+                        left: item.left
+                        right: item.right
+                    }
+                }
 
-                Rectangle {
-                    id: keypadScrim
-                    anchors.fill: parent
-                    visible: opacity > 0
-                    opacity: flickable.openFactor
-                    color: Qt.rgba(0, 0, 0, 0.5)
-                }
-
-                Keypad {
-                    id: keypad
-                    visible: !root.lockScreenState.canBeUnlocked // don't show for passwordless login
-                    anchors.fill: parent
-                    openProgress: flickable.openFactor
-                    lockScreenState: root.lockScreenState
-
-                    // only show in last 50% of anim
-                    opacity: (flickable.openFactor - 0.5) * 2
-                    transform: Translate { y: (flickable.keypadHeight - flickable.position) * 0.1 }
-                }
             }
         }
     }
diff --git a/shell/contents/lockscreen/LockScreenContent.qml b/shell/contents/lockscreen/LockScreenContent.qml
index a76f724fe..d5acc97e0 100644
--- a/shell/contents/lockscreen/LockScreenContent.qml
+++ b/shell/contents/lockscreen/LockScreenContent.qml
@@ -13,13 +13,15 @@ import org.kde.plasma.private.mobileshell as MobileShell
 Item {
     id: root
 
-    required property var lockScreenState
     required property bool isVertical
+    required property var lockScreenState
+
+    readonly property bool listOverflowing: notificationComponent.listOverflowing
 
     property var notificationsModel: []
     property bool notificationsShown: false
 
-    property real fullHeight
+    property bool scrollLock: false
 
     signal passwordRequested()
 
@@ -29,7 +31,6 @@ Item {
         visible: root.isVertical
         spacing: 0
 
-        // Center clock when no notifications are shown, otherwise move the clock upward
         anchors.topMargin: Kirigami.Units.gridUnit * 3.5
         anchors.bottomMargin: Kirigami.Units.gridUnit * 2
         anchors.fill: parent
@@ -85,6 +86,7 @@ Item {
         }
 
         MobileShell.MediaControlsWidget {
+            id: mediaControlsWidget
             Layout.alignment: root.isVertical ? Qt.AlignHCenter : Qt.AlignLeft
             Layout.fillWidth: true
             Layout.maximumWidth: Kirigami.Units.gridUnit * 25
@@ -93,20 +95,24 @@ Item {
         }
     }
 
+    // notification widget column
     NotificationsComponent {
         id: notificationComponent
         lockScreenState: root.lockScreenState
         notificationsModel: root.notificationsModel
 
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-        Layout.fillHeight: true
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
         Layout.fillWidth: true
+        Layout.fillHeight: true
         Layout.maximumWidth: Kirigami.Units.gridUnit * (25 + 2) // clip margins
 
+        topPadding: root.isVertical ? (mediaControlsWidget.visible ? Kirigami.Units.smallSpacing : Kirigami.Units.gridUnit) : Kirigami.Units.gridUnit
+
         leftMargin: root.isVertical ? 0 : Kirigami.Units.gridUnit
         rightMargin: root.isVertical ? 0 : Kirigami.Units.gridUnit
-        bottomMargin: root.isVertical ? 0 : Kirigami.Units.gridUnit
-        topMargin: Kirigami.Units.gridUnit
+        topMargin: root.isVertical ? 0 : MobileShell.Constants.topPanelHeight
+        bottomMargin: Kirigami.Units.gridUnit * 2
+        scrollLock: root.scrollLock
 
         onPasswordRequested: root.passwordRequested()
         onNotificationsShownChanged: root.notificationsShown = notificationsShown
diff --git a/shell/contents/lockscreen/NotificationsComponent.qml b/shell/contents/lockscreen/NotificationsComponent.qml
index e5992220d..09fa51ea7 100644
--- a/shell/contents/lockscreen/NotificationsComponent.qml
+++ b/shell/contents/lockscreen/NotificationsComponent.qml
@@ -20,7 +20,13 @@ Loader {
     property real rightMargin: 0
     property real topMargin: 0
     property real bottomMargin: 0
+
+    property real topPadding: 0
+
     readonly property bool notificationsShown: item && item.notificationsList.hasNotifications
+    readonly property bool listOverflowing: item && item.notificationsList.listView.listOverflowing
+
+    property bool scrollLock: false
 
     property var notificationsList: item ? item.notificationsList : null
 
@@ -56,24 +62,31 @@ Loader {
         property alias notificationsList: notificationsList
 
         Item {
-            anchors.fill: parent
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
             anchors.topMargin: root.topMargin
-            anchors.bottomMargin: root.bottomMargin
             anchors.leftMargin: root.leftMargin
             anchors.rightMargin: root.rightMargin
 
             Kirigami.Theme.colorSet: Kirigami.Theme.Window
             Kirigami.Theme.inherit: false
 
+            height: Math.min(parent.height - root.topMargin - root.bottomMargin, notificationsList.listView.listHeight + Kirigami.Units.gridUnit)
+
             MobileShell.NotificationsWidget {
                 id: notificationsList
                 anchors.fill: parent
+                opacity: 0 // we display with the opacity gradient below
 
                 historyModelType: MobileShell.NotificationsModelType.WatchedNotificationsModel
                 actionsRequireUnlock: true
                 historyModel: root.notificationsModel
                 notificationSettings: root.notificationSettings
                 inLockscreen: true
+                topPadding: root.topPadding // Kirigami.Units.gridUnit
+                bottomPadding: Kirigami.Units.gridUnit
+                listView.interactive: !root.scrollLock && listView.listOverflowing
 
                 property bool requestNotificationAction: false
 
@@ -82,6 +95,17 @@ Loader {
                     root.passwordRequested();
                 }
             }
+
+            // opacity gradient at flickable edges
+            MobileShell.FlickableOpacityGradient {
+                anchors {
+                    top: notificationsList.top
+                    left: notificationsList.left
+                    right: notificationsList.right
+                }
+                height: notificationsList.listView.height
+                flickable: notificationsList.listView
+            }
         }
     }
 }
-- 
GitLab