quickshell: concave corners on calendar-bar junction

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

settings/hyprland.nix

@@ -855,6 +855,70 @@ in
                               }
                           }
 
+                          // Concave corner — left
+                          Rectangle {
+                              id: cornerLeft
+                              anchors.right: calContent.left
+                              anchors.top: parent.top
+                              width: 8
+                              height: 8
+                              color: "#D1${c.base00}"
+                              visible: calPopup.open
+                              opacity: calPopup.open ? 1.0 : 0.0
+                              Behavior on opacity { NumberAnimation { duration: 150 } }
+
+                              Rectangle {
+                                  anchors.fill: parent
+                                  color: "transparent"
+                                  radius: 8
+                                  Rectangle {
+                                      anchors.fill: parent
+                                      color: "transparent"
+                                  }
+                              }
+
+                              Canvas {
+                                  anchors.fill: parent
+                                  onPaint: {
+                                      var ctx = getContext("2d");
+                                      ctx.clearRect(0, 0, width, height);
+                                      ctx.fillStyle = "#D1${c.base00}";
+                                      ctx.fillRect(0, 0, width, height);
+                                      ctx.globalCompositeOperation = "destination-out";
+                                      ctx.beginPath();
+                                      ctx.arc(0, 0, width, 0, Math.PI / 2);
+                                      ctx.fill();
+                                  }
+                              }
+                          }
+
+                          // Concave corner — right
+                          Rectangle {
+                              id: cornerRight
+                              anchors.left: calContent.right
+                              anchors.top: parent.top
+                              width: 8
+                              height: 8
+                              color: "#D1${c.base00}"
+                              visible: calPopup.open
+                              opacity: calPopup.open ? 1.0 : 0.0
+                              Behavior on opacity { NumberAnimation { duration: 150 } }
+
+                              Canvas {
+                                  anchors.fill: parent
+                                  onPaint: {
+                                      var ctx = getContext("2d");
+                                      ctx.clearRect(0, 0, width, height);
+                                      ctx.fillStyle = "#D1${c.base00}";
+                                      ctx.fillRect(0, 0, width, height);
+                                      ctx.globalCompositeOperation = "destination-out";
+                                      ctx.beginPath();
+                                      ctx.arc(width, 0, width, Math.PI / 2, Math.PI);
+                                      ctx.fill();
+                                  }
+                              }
+                          }
+
                           Rectangle {
                               id: calContent
                               anchors.horizontalCenter: parent.horizontalCenter