update quickshell conf

roles/quickshell/files/bar/Bar.qml

@@ -17,68 +17,121 @@ PanelWindow {
     color: Theme.bg
 
     readonly property string screenName: modelData.name
+    property string activePopup: ""
 
-    // Layout — three sections anchored independently for true centering
+    readonly property int bw:  Theme.borderWidth     // 2
+    readonly property int pad: Theme.enclosureMargin // 3
+
+    // ── Bar bottom border ─────────────────────────────────────────────
+    Rectangle {
+        anchors { bottom: parent.bottom; left: parent.left; right: parent.right }
+        height: root.bw
+        color:  Theme.border
+    }
+
+    // ── Bar content ───────────────────────────────────────────────────
     Item {
-        anchors.fill: parent
-        anchors.leftMargin: 8
-        anchors.rightMargin: 8
-        anchors.topMargin: 2
-        anchors.bottomMargin: 2
-
-        // Left
-        Enclosure {
-            anchors.left: parent.left
-            anchors.verticalCenter: parent.verticalCenter
-            child: Workspaces {
-                screenName: root.screenName
-            }
+        anchors {
+            fill:         parent
+            leftMargin:   8
+            rightMargin:  8
+            topMargin:    root.bw
+            bottomMargin: root.bw
         }
 
-        // Center — truly centered regardless of left/right content width
-        Enclosure {
-            anchors.centerIn: parent
-            child: MusicPlayer {
-                id: musicChip
-                onClicked: musicControls.visible = !musicControls.visible
-            }
+        Workspaces {
+            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
+            screenName: root.screenName
         }
 
-        // Right — status chips
-        Enclosure {
-            anchors.right: parent.right
-            anchors.verticalCenter: parent.verticalCenter
-            child: Row {
-                spacing: 8
+        MusicPlayer {
+            id: musicChip
+            anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter }
+            onClicked: root.activePopup = root.activePopup === "controls" ? "" : "controls"
+        }
 
-                SysTray {
-                    anchors.verticalCenter: parent.verticalCenter
-                    barWindow: root
-                }
+        Row {
+            id: rightRow
+            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
+            spacing: 8
 
-                NetworkStatus {
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                VolumeControl {
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                Clock {
-                    anchors.verticalCenter: parent.verticalCenter
-                }
+            SysTray {
+                anchors.verticalCenter: parent.verticalCenter
+                barWindow: root
+            }
+            NetworkStatus {
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            VolumeControl {
+                anchors.verticalCenter: parent.verticalCenter
+                onClickedLeft: root.activePopup = root.activePopup === "mixer" ? "" : "mixer"
+            }
+            Clock {
+                id: clockDisp
+                anchors.verticalCenter: parent.verticalCenter
+                onClicked: root.activePopup = root.activePopup === "calendar" ? "" : "calendar"
             }
         }
     }
 
-    // Popup declared after the layout so musicChip is already initialised.
-    // Centered horizontally within the bar window, placed just below it.
-    MusicPlayerControls {
-        id: musicControls
-        visible: false
+    // ── Music controls popup ──────────────────────────────────────────
+    PopoutWindow {
+        popupName:   "controls"
+        activePopup: root.activePopup
+
+        anchor.window:   root
+        anchor.rect.y:   root.implicitHeight - root.bw - Theme.radius
+        anchor.rect.x:   Math.round((root.width - implicitWidth) / 2)
+
+        implicitWidth:  Math.max(musicChip.implicitWidth + 2 * root.pad,
+                                 ctrlContent.implicitWidth + 2 * root.bw)
+        implicitHeight: ctrlContent.implicitHeight + root.bw + Theme.radius
+
+        MusicPlayerControls {
+            id: ctrlContent
+            anchors { left: parent.left; right: parent.right }
+            player: musicChip.player
+        }
+    }
+
+    // ── Calendar popup ────────────────────────────────────────────────
+    PopoutWindow {
+        popupName:   "calendar"
+        activePopup: root.activePopup
+
         anchor.window: root
-        anchor.rect.x: Math.round((root.width - musicControls.width) / 2)
-        anchor.rect.y: root.height
-        player: musicChip.player
+        anchor.rect.y: root.implicitHeight - root.bw - Theme.radius
+        readonly property real pw: Math.max(rightRow.width + 2 * root.pad,
+                                            calContent.implicitWidth + 2 * root.bw)
+        anchor.rect.x:  root.width - pw
+
+        implicitWidth:  pw
+        implicitHeight: calContent.implicitHeight + root.bw + Theme.radius
+
+        CalendarContent {
+            id: calContent
+            anchors { left: parent.left; right: parent.right }
+            now: clockDisp.now
+        }
+    }
+
+    // ── Volume mixer popup ────────────────────────────────────────────
+    PopoutWindow {
+        popupName:   "mixer"
+        activePopup: root.activePopup
+
+        anchor.window: root
+        anchor.rect.y: root.implicitHeight - root.bw - Theme.radius
+        readonly property real pw: Math.max(rightRow.width + 2 * root.pad,
+                                            mixContent.implicitWidth + 2 * root.bw)
+        anchor.rect.x:  root.width - pw
+
+        implicitWidth:  pw
+        implicitHeight: mixContent.implicitHeight + root.bw + Theme.radius
+
+        VolumeMixerContent {
+            id: mixContent
+            anchors { left: parent.left; right: parent.right }
+        }
     }
 }