quickshell: morphing calendar popup animation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

settings/hyprland.nix

@@ -517,7 +517,20 @@ in
 
                           MouseArea {
                               anchors.fill: parent
-                              onClicked: calPopup.visible = !calPopup.visible
+                              onClicked: {
+                                  if (calPopup.visible) {
+                                      calPopup.open = false;
+                                      calCloseTimer.start();
+                                  } else {
+                                      calPopup.visible = true;
+                                  }
+                              }
+                          }
+
+                          Timer {
+                              id: calCloseTimer
+                              interval: 280
+                              onTriggered: calPopup.visible = false
                           }
                       }
 
@@ -824,22 +837,51 @@ in
                           grabFocus: true
                           visible: false
                           color: "transparent"
-                          implicitWidth: calContent.width + 2
+
-                          implicitHeight: calContent.height + 2
+                          property bool open: false
+                          property real fullWidth: calCol.width + 32
+                          property real fullHeight: calCol.height + 24
+
+                          implicitWidth: fullWidth + 4
+                          implicitHeight: fullHeight + 4
+
+                          onVisibleChanged: {
+                              if (visible) {
+                                  open = true;
+                              }
+                          }
 
                           Rectangle {
                               id: calContent
-                              width: calCol.width + 32
+                              anchors.horizontalCenter: parent.horizontalCenter
-                              height: calCol.height + 24
+                              y: 1
+                              width: calPopup.open ? calPopup.fullWidth : 40
+                              height: calPopup.open ? calPopup.fullHeight : 4
+                              radius: calPopup.open ? 8 : 2
                               color: "#${c.base00}"
                               border.color: "#${c.base03}"
                               border.width: 1
-                              radius: 8
+                              clip: true
+
+                              Behavior on width {
+                                  NumberAnimation { duration: 250; easing.type: Easing.OutCubic }
+                              }
+                              Behavior on height {
+                                  NumberAnimation { duration: 250; easing.type: Easing.OutCubic }
+                              }
+                              Behavior on radius {
+                                  NumberAnimation { duration: 250; easing.type: Easing.OutCubic }
+                              }
 
                               Column {
                                   id: calCol
                                   anchors.centerIn: parent
                                   spacing: 8
+                                  opacity: calPopup.open ? 1.0 : 0.0
+
+                                  Behavior on opacity {
+                                      NumberAnimation { duration: 180; easing.type: Easing.OutCubic }
+                                  }
 
                                   // Date header
                                   Text {