ags: finish center-window widget with big-media and calendar

ags/widget/bar/Audio.ts

@@ -2,12 +2,14 @@ import { bind, Process } from "astal";
 import { Widget } from "astal/gtk3";
 import AstalWp from "gi://AstalWp";
 import { Wireplumber } from "../../scripts/volume";
+import { ControlCenter } from "../../window/ControlCenter";
 
 const wp = AstalWp.get_default();
 
 export function Audio() {
     return wp && new Widget.EventBox({
-        className: "audio",
+        className: bind(ControlCenter, "visible").as((visible: boolean) => 
+            visible ? "audio open" : "audio"),
         onClick: () => Process.exec_async("astal toggle control-center", () => {}),
         child: new Widget.Box({
             children: [

ags/widget/bar/Clock.ts

@@ -1,12 +1,13 @@
 import { Widget } from "astal/gtk3";
 import { getDateTime } from "../../scripts/time";
-import { GLib } from "astal";
+import { bind, GLib } from "astal";
 import { Windows } from "../../windows";
 import { CenterWindow } from "../../window/CenterWindow";
 
 export function Clock(): JSX.Element {
     return new Widget.Box({
-        className: "clock",
+        className: bind(CenterWindow, "visible").as((visible: boolean) =>
+            visible ? "clock open" : "clock"),
         child: new Widget.Button({
             onClick: () => Windows.toggle(CenterWindow),
             label: getDateTime().as((dateTime: GLib.DateTime) => {

ags/widget/bar/Media.ts

@@ -2,6 +2,8 @@ import { bind, GLib, Process } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 import AstalMpris from "gi://AstalMpris";
 import { Separator, SeparatorProps } from "../Separator";
+import { CenterWindow } from "../../window/CenterWindow";
+import { Windows } from "../../windows";
 
 const mpris: AstalMpris.Mpris = AstalMpris.get_default();
 
@@ -66,7 +68,10 @@ export function Media(): Gtk.Widget {
 
     const mediaWidget = new Widget.EventBox({
         className: "media-eventbox",
-        visible: bind(mpris, "players").as((players: Array<AstalMpris.Player>) => players[0]).as(Boolean),
+        visible: bind(mpris, "players").as((players: Array<AstalMpris.Player>) => {
+            return players[0] && players[0].get_available() || CenterWindow.is_visible();
+        }),
+        onClick: () => Windows.toggle(CenterWindow),
         child: new Widget.Box({
             className: "media",
             children: [
@@ -85,6 +90,7 @@ export function Media(): Gtk.Widget {
                                 label: bind(players[0], "title").as((title: string) => title || "No Title")
                             } as Widget.LabelProps),
                             Separator({
+                                orientation: Gtk.Orientation.VERTICAL,
                                 size: 2,
                                 cssColor: `rgb(180, 180, 180)`,
                                 alpha: 1