💥 fix(ags): bar/media widget, new appearance to control center

ags/widget/bar/Audio.ts

@@ -1,5 +1,5 @@
-import { bind } from "astal";
-import { Astal, Widget } from "astal/gtk3";
+import { bind, Process } from "astal";
+import { Widget } from "astal/gtk3";
 import AstalWp from "gi://AstalWp?version=0.1";
 import { Wireplumber } from "../../scripts/volume";
 
@@ -8,6 +8,7 @@ const wp = AstalWp.get_default();
 export function Audio() {
     return wp && new Widget.EventBox({
         className: "audio",
+        onClick: () => Process.exec_async("astal toggle control-center", () => {}),
         child: new Widget.Box({
             children: [
                 new Widget.EventBox({

ags/widget/bar/CCToggle.tsx

@@ -1,11 +0,0 @@
-import {Process} from "astal";
-import { Box, Button } from "astal/gtk3/widget";
-
-export function CCToggle() {
-    return (
-        <Box className={"cc-toggle"}>
-            <Button onClick={() => Process.exec("eww open --toggle control-center")} 
-                    label={"󰂚"}/>
-        </Box>
-    )
-}

ags/widget/bar/FocusedClient.ts

@@ -5,9 +5,9 @@ import { getAppIcon } from "../../scripts/apps";
 
 const hyprland = AstalHyprland.get_default();
 
-export function FocusedWindow() {
+export function FocusedClient() {
     return new Widget.Box({
-        className: "focused-window",
+        className: "focused-client",
         visible: bind(hyprland, "focusedClient").as(Boolean),
         children: [
             new Widget.Icon({

ags/widget/bar/Logo.tsx

@@ -1,10 +1,13 @@
+import { Widget } from "astal/gtk3";
 import { Box, Button } from "astal/gtk3/widget";
 import AstalHyprland from "gi://AstalHyprland";
+import { tr } from "../../i18n/intl";
 
 export function Logo() {
-    return (
-        <Box className={"logo"}>
+    return new Widget.Box({
+        className: "logo",
+        //tooltipText: tr("bar.logo.tooltip"),
+        child: 
             <Button onClick={ () => AstalHyprland.get_default().dispatch("exec", "anyrun") } label={""} />
-        </Box>
-    )
+    } as Widget.BoxProps);
 }

ags/widget/bar/Media.ts

@@ -4,7 +4,6 @@ import AstalMpris from "gi://AstalMpris";
 import { Separator, SeparatorProps } from "../Separator";
 
 const mpris: AstalMpris.Mpris = AstalMpris.get_default();
-let defaultPlayer: (AstalMpris.Player|undefined) = mpris.get_players()?.[0];
 
 const playerIcons = {
     spotify: '󰓇',
@@ -15,80 +14,77 @@ const playerIcons = {
 }
 
 export function Media(): JSX.Element {
-
-    bind(mpris, "players")?.as((players: Array<AstalMpris.Player>) => {
-        defaultPlayer = players?.[0] as AstalMpris.Player;
-    });
-
     const mediaControlsRevealer: Widget.Revealer = new Widget.Revealer({
         transitionType: Gtk.RevealerTransitionType.SLIDE_RIGHT,
         transitionDuration: 260,
         revealChild: false,
         child: new Widget.Box({
             className: "media-controls",
+            expand: false,
             homogeneous: false,
-            children: [
-                new Widget.Button({
-                    className: "previous",
-                    label: "󰒮",
-                    onClick: () => {
-                        if(bind(defaultPlayer!, "canGoPrevious").as(Boolean))
-                            defaultPlayer?.previous();
-                    }
-                } as Widget.ButtonProps),
-                new Widget.Button({
-                    className: "pause",
-                    label: bind(defaultPlayer!, "playback_status").as((status: AstalMpris.PlaybackStatus) => {
-                        return status === AstalMpris.PlaybackStatus.PLAYING ? "󰏤" : "󰐊"
-                    }),
-                    onClick: () => {
-                        if(bind(defaultPlayer!, "canPlay").as(Boolean)
-                          || bind(defaultPlayer!, "canPause").as(Boolean))
-                            defaultPlayer?.play_pause();
-                    }
-                } as Widget.ButtonProps),
-                new Widget.Button({
-                    className: "next",
-                    label: "󰒭",
-                    onClick: () => {
-                        if(bind(defaultPlayer!, "canGoNext").as(Boolean))
-                            defaultPlayer?.next();
-                    }
-                } as Widget.ButtonProps)
-            ]
+            children: bind(mpris, "players").as((players: Array<AstalMpris.Player>) =>
+                players[0] ? [ 
+                    new Widget.Button({
+                        className: "previous",
+                        label: "󰒮",
+                        onClick: () => players[0].canGoPrevious && players[0].previous()
+                    } as Widget.ButtonProps),
+                    new Widget.Button({
+                        className: "pause",
+                        label: bind(players[0], "playbackStatus").as((status: AstalMpris.PlaybackStatus) => 
+                            status === AstalMpris.PlaybackStatus.PLAYING ? "󰏤" : "󰐊"),
+                        onClick: () => {
+                            players[0].playbackStatus === AstalMpris.PlaybackStatus.PAUSED ?
+                                players[0].play()
+                            :
+                                players[0].pause()
+                        }
+                    } as Widget.ButtonProps),
+                    new Widget.Button({
+                        className: "next",
+                        label: "󰒭",
+                        onClick: () => players[0].canGoNext && players[0].next()
+                    } as Widget.ButtonProps)
+                ] : new Widget.Label({
+                    label: "Don't Stop The Music!"
+                } as Widget.LabelProps)
+            )
         } as Widget.BoxProps)
     } as Widget.RevealerProps);
 
     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>) => players[0]).as(Boolean),
         child: new Widget.Box({
             className: "media",
             children: [
                 new Widget.Box({
-                    children: [
-                        new Widget.Label({
-                            className: "icon",
-                            label: defaultPlayer && bind(defaultPlayer, "busName")?.as((name: string) => {
-                                const banana: Array<string> = name.split('.');
-                                const playerName: string = banana[banana.length-1];
-                                return playerIcons[playerName as keyof typeof playerIcons] || '󰎇';
-                            })
-                        } as Widget.LabelProps),
-                        new Widget.Label({
-                            className: "title",
-                            label: defaultPlayer && bind(defaultPlayer, "title")?.as((title: string) => title)
-                        } as Widget.LabelProps),
-                        Separator({
-                            size: 2,
-                            cssColor: `rgb(180, 180, 180)`,
-                            alpha: 1
-                        } as SeparatorProps),
-                        new Widget.Label({
-                            className: "artist",
-                            label: defaultPlayer && bind(defaultPlayer, "artist")?.as((artist: string) => artist)
+                    children: bind(mpris, "players").as((players: Array<AstalMpris.Player>) =>
+                        players[0] ? [
+                            new Widget.Label({
+                                className: "icon",
+                                label: bind(players[0], "busName").as((busName: string) => {
+                                    const playerName: string = busName.split('.')[busName.split('.').length-1];
+                                    return playerIcons[playerName as keyof typeof playerIcons] || "󰎇";
+                                })
+                            } as Widget.LabelProps),
+                            new Widget.Label({
+                                className: "title",
+                                label: bind(players[0], "title").as((title: string) => title || "No Title")
+                            } as Widget.LabelProps),
+                            Separator({
+                                size: 2,
+                                cssColor: `rgb(180, 180, 180)`,
+                                alpha: 1
+                            } as SeparatorProps),
+                            new Widget.Label({
+                                className: "artist",
+                                label: bind(players[0], "artist").as((artist: string) => artist || "No Artist")
+                            } as Widget.LabelProps)
+                        ] : new Widget.Label({
+                            label: "Crazy to think this widget didn't disappear yet!"
                         } as Widget.LabelProps)
-                    ]
+                    )
                 } as Widget.BoxProps),
                 mediaControlsRevealer
             ]

ags/widget/control-center/QuickActions.ts

@@ -49,7 +49,7 @@ function LogoutButton(): Widget.Button {
     return new Widget.Button({
         label: "󰗽",
         onClick: () => Process.exec_async(
-            "bash -c 'loginctl terminate-user $USER'",
+            "bash -c 'wlogout -b 5'",
             () => {}
         )
     } as Widget.ButtonProps);

ags/widget/control-center/tiles/NormalTile.ts

@@ -1,4 +1,4 @@
-import { Binding } from "astal";
+import { Binding, Variable } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 
 export interface NormalTileProps {
@@ -14,9 +14,6 @@ export interface NormalTileProps {
 
 export function MoreTile(props: NormalTileProps): Gtk.Widget {
 
-    let toggleState: boolean = props?.toggleState !== undefined ? 
-        props.toggleState : false;
-
     const mainEventBox = new Widget.EventBox({
         onClick: () => toggleState ? props.onToggledOff() : props.onToggledOn(),
         expand: true,