Calendar Panel

Modules/Bar/Clock.qml

@@ -24,7 +24,7 @@ Rectangle {
     }
 
     onEntered: {
-      if (!calendarPanel.isLoaded) {
+      if (!calendarPanel.active) {
         tooltip.show()
       }
     }
@@ -33,7 +33,7 @@ Rectangle {
     }
     onClicked: {
       tooltip.hide()
-      calendarPanel.isLoaded = !calendarPanel.isLoaded
+      calendarPanel.toggle(screen)
     }
   }
 }

Modules/Calendar/Calendar.qml

@@ -7,107 +7,15 @@ import qs.Commons
 import qs.Services
 import qs.Widgets
 
-NLoader {
+NPanel {
   id: root
 
-  content: Component {
-    NPanel {
-      id: calendarPanel
-
-      // Override hide function to animate first
-      function hide() {
-        // Start hide animation
-        calendarRect.scaleValue = 0.8
-        calendarRect.opacityValue = 0.0
-
-        // Hide after animation completes
-        hideTimer.start()
-      }
-
-      // Connect to NPanel's dismissed signal to handle external close events
-      Connections {
-        target: calendarPanel
-        function onDismissed() {
-          // Start hide animation
-          calendarRect.scaleValue = 0.8
-          calendarRect.opacityValue = 0.0
-
-          // Hide after animation completes
-          hideTimer.start()
-        }
-      }
-
-      // Also handle visibility changes from external sources
-      onVisibleChanged: {
-        if (!visible && calendarRect.opacityValue > 0) {
-          // Start hide animation
-          calendarRect.scaleValue = 0.8
-          calendarRect.opacityValue = 0.0
-
-          // Hide after animation completes
-          hideTimer.start()
-        }
-      }
-
-      // Timer to hide panel after animation
-      Timer {
-        id: hideTimer
-        interval: Style.animationSlow
-        repeat: false
-        onTriggered: {
-          calendarPanel.visible = false
-          calendarPanel.dismissed()
-        }
-      }
-
-      Rectangle {
-        id: calendarRect
-        color: Color.mSurface
-        radius: Style.radiusM * scaling
-        border.color: Color.mOutline
-        border.width: Math.max(1, Style.borderM * scaling)
-        width: 340 * scaling
-        height: 320 * scaling // Reduced height to eliminate bottom space
-        anchors.top: parent.top
-        anchors.right: parent.right
-        anchors.topMargin: Style.marginXS * scaling
-        anchors.rightMargin: Style.marginXS * scaling
-
-        // 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
-        }
-
-        // Prevent closing when clicking in the panel bg
-        MouseArea {
-          anchors.fill: parent
-        }
-
-        // Animation behaviors
-        Behavior on scale {
-          NumberAnimation {
-            duration: Style.animationSlow
-            easing.type: Easing.OutExpo
-          }
-        }
-
-        Behavior on opacity {
-          NumberAnimation {
-            duration: Style.animationNormal
-            easing.type: Easing.OutQuad
-          }
-        }
+  rWidth: 340 * scaling
+  rHeight: 320 * scaling
+  rAnchorRight: true
 
   // Main Column
-        ColumnLayout {
+  panelContent: ColumnLayout {
     anchors.fill: parent
     anchors.margins: Style.marginM * scaling
     spacing: Style.marginXS * scaling
@@ -231,6 +139,3 @@ NLoader {
     }
   }
 }
-    }
-  }
-}

Widgets/NPanel.qml

@@ -31,8 +31,6 @@ Loader {
   signal opened
   signal closed
 
-
-
   // -----------------------------------------
   function toggle(aScreen) {
     if (!active || isClosing) {
@@ -97,7 +95,6 @@ Loader {
                                                                                       Color.mShadow,
                                                                                       "BB") : Color.transparent
 
-
       WlrLayershell.exclusionMode: ExclusionMode.Ignore
       WlrLayershell.namespace: "noctalia-panel"