quickshell: anchor calendar to the clock, space out the bottom cluster

Calendar was left on dropdownY: bar.height / 2 from the rotation, so
it opened at screen centre instead of next to the clock it comes from.
It now maps the clock's position like every other dropdown.

Bottom cluster reads as one clump: bumped its spacing to 12 to match
the top and split status icons / tray / power with separators.

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

settings/quickshell.nix

@@ -1501,13 +1501,24 @@ in
                             }
                         }
 
+                        // Anchors to the clock like every other dropdown
+                        // anchors to its widget; the clamp in BarDropdown
+                        // pulls it back on screen when it overhangs.
+                        function openCalendar() {
+                            bar.toggleDropdown(calPopup, function() {
+                                let pos = clockText.mapToItem(bar.contentItem, 0, clockText.height / 2);
+                                calPopup.dropdownY = pos.y;
+                                calPopup.resetView();
+                            });
+                        }
+
                         MouseArea {
                             anchors.fill: parent
                             hoverEnabled: true
-                            onClicked: bar.toggleDropdown(calPopup, function() { calPopup.resetView(); })
+                            onClicked: clockText.openCalendar()
                             onEntered: {
                                 if (bar.activeDropdown) {
-                                    if (bar.activeDropdown !== calPopup) bar.toggleDropdown(calPopup, function() { calPopup.resetView(); });
+                                    if (bar.activeDropdown !== calPopup) clockText.openCalendar();
                                 }
                             }
                         }
@@ -1562,7 +1573,7 @@ in
                     anchors.bottom: parent.bottom
                     anchors.bottomMargin: 12
                     anchors.horizontalCenter: barBgRect.horizontalCenter
-                    spacing: 10
+                    spacing: 12
 
                     // Volume
                     Item {
@@ -1903,6 +1914,10 @@ in
                     }
                     ''}
 
+                    // Group separator: status icons / tray / power read
+                    // as three clusters instead of one clump.
+                    Item { width: Theme.barWidth; height: 5 }
+
                     // Tray icons — stacked, like everything else in the column
                     Column {
                         id: trayArea
@@ -1982,6 +1997,10 @@ in
                         }
                     }
 
+                    // Group separator: status icons / tray / power read
+                    // as three clusters instead of one clump.
+                    Item { width: Theme.barWidth; height: 5 }
+
                     // Power menu opener — bottom-left corner. Opens the same
                     // session menu as Super+L, which now unfolds from here.
                     Item {
@@ -2762,7 +2781,6 @@ in
                 // Right: MPRIS media controls + notification list.
                 BarDropdown {
                     id: calPopup
-                    dropdownY: bar.height / 2
                     // ceil: Text metrics give fractional sizes; fractional rect
                     // edges render as soft 2px lines
                     fullWidth: Math.ceil(calRow.width) + 2 * Theme.panelGap