NotificationHistory panel

Modules/Bar/NotificationHistory.qml

@@ -20,21 +20,6 @@ NIconButton {
   colorBorderHover: Color.transparent
 
   onClicked: {
-    if (!notificationHistoryPanel.active) {
-      notificationHistoryPanel.isLoaded = true
-    }
-    if (notificationHistoryPanel.item) {
-      if (notificationHistoryPanel.item.visible) {
-        // Panel is visible, hide it with animation
-        if (notificationHistoryPanel.item.hide) {
-          notificationHistoryPanel.item.hide()
-        } else {
-          notificationHistoryPanel.item.visible = false
-        }
-      } else {
-        // Panel is hidden, show it
-        notificationHistoryPanel.item.visible = true
-      }
-    }
+    notificationHistoryPanel.toggle(screen)
   }
 }

Modules/Notification/NotificationHistoryPanel.qml

@@ -8,104 +8,28 @@ import qs.Commons
 import qs.Services
 import qs.Widgets
 
-// Loader for Notification History panel
-NLoader {
+// Notification History panel
+NPanel {
   id: root
 
-  content: Component {
-    NPanel {
-      id: notificationPanel
+  rWidth: 400 * scaling
+  rHeight: 500 * scaling
+  rAnchorRight: true
 
-      // Override hide function to animate first
-      function hide() {
-        // Start hide animation
-        notificationRect.scaleValue = 0.8
-        notificationRect.opacityValue = 0.0
-
-        // Hide after animation completes
-        hideTimer.start()
-      }
-
-      Connections {
-        target: notificationPanel
-        ignoreUnknownSignals: true
-        function onDismissed() {
-          // Start hide animation
-          notificationRect.scaleValue = 0.8
-          notificationRect.opacityValue = 0.0
-
-          // Hide after animation completes
-          hideTimer.start()
-        }
-      }
-
-      // Also handle visibility changes from external sources
-      onVisibleChanged: {
-        if (!visible && notificationRect.opacityValue > 0) {
-          // Start hide animation
-          notificationRect.scaleValue = 0.8
-          notificationRect.opacityValue = 0.0
-
-          // Hide after animation completes
-          hideTimer.start()
-        }
-      }
-
-      // Timer to hide panel after animation
-      Timer {
-        id: hideTimer
-        interval: Style.animationSlow
-        repeat: false
-        onTriggered: {
-          notificationPanel.visible = false
-          notificationPanel.dismissed()
-        }
-      }
-
-      WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
-
-      Rectangle {
+  panelContent: Rectangle {
     id: notificationRect
-        color: Color.mSurface
-        radius: Style.radiusL * scaling
-        border.color: Color.mOutline
-        border.width: Math.max(1, Style.borderS * scaling)
-        width: 400 * scaling
-        height: 500 * scaling
-        anchors.top: parent.top
-        anchors.right: parent.right
-        anchors.topMargin: Style.marginXS * scaling
-        anchors.rightMargin: Style.marginXS * scaling
-        clip: true
+    color: Color.transparent
 
-        // Animation properties
-        property real scaleValue: 0.8
-        property real opacityValue: 0.0
-
-        scale: scaleValue
-        opacity: opacityValue
-
-        // Animate in when component is completed
-        Component.onCompleted: {
-          scaleValue = 1.0
-          opacityValue = 1.0
-        }
-
-        // Animation behaviors
-        Behavior on scale {
-          NumberAnimation {
-            duration: Style.animationSlow
-            easing.type: Easing.OutExpo
-          }
-        }
-
-        Behavior on opacity {
-          NumberAnimation {
-            duration: Style.animationNormal
-            easing.type: Easing.OutQuad
-          }
-        }
+    // color: Color.mSurface
+    // radius: Style.radiusL * scaling
+    // border.color: Color.mOutline
+    // border.width: Math.max(1, Style.borderS * scaling)
 
+    // anchors.top: parent.top
+    // anchors.right: parent.right
+    // anchors.topMargin: Style.marginXS * scaling
+    // anchors.rightMargin: Style.marginXS * scaling
+    // clip: true
     ColumnLayout {
       anchors.fill: parent
       anchors.margins: Style.marginL * scaling
@@ -141,12 +65,14 @@ NLoader {
           tooltipText: "Close"
           sizeMultiplier: 0.8
           onClicked: {
-                notificationPanel.hide()
+            root.close()
           }
         }
       }
 
-          NDivider {}
+      NDivider {
+        Layout.fillWidth: true
+      }
 
       // Empty state when no notifications
       Item {
@@ -272,5 +198,3 @@ NLoader {
     }
   }
 }
-  }
-}

Modules/SidePanel/SidePanel.qml

@@ -14,9 +14,6 @@ NPanel {
   rHeight: 700 * scaling
   rAnchorRight: true
 
-  // rectX: Math.max(Style.marginS * scaling, Math.min(parent.width - width - Style.marginS * scaling,
-  //                                                   Math.round(anchorX - width / 2)))
-  // rectY: Settings.data.bar.position === "top" ? Style.marginS * scaling : undefined
   panelContent: Item {
     id: content