✨ ags(bar): use right-click to open tray item options, disconnect on destroy media widget

ags/widget/bar/Media.ts

@@ -16,6 +16,9 @@ const playerIcons = {
 }
 
 export function Media(): Gtk.Widget {
+    let hoverConnectionId: number;
+    let hoverLostConnectionId: number;
+
     const mediaControlsRevealer: Widget.Revealer = new Widget.Revealer({
         transitionType: Gtk.RevealerTransitionType.SLIDE_RIGHT,
         transitionDuration: 260,
@@ -71,6 +74,13 @@ export function Media(): Gtk.Widget {
         visible: bind(mpris, "players").as((players: Array<AstalMpris.Player>) => {
             return players[0] && players[0].get_available() || CenterWindow.is_visible();
         }),
+        onDestroy: (_) => {
+            hoverConnectionId !== undefined && 
+                _.disconnect(hoverConnectionId);
+
+            hoverLostConnectionId !== undefined && 
+                _.disconnect(hoverLostConnectionId);
+        },
         onClick: () => Windows.toggle(CenterWindow),
         child: new Widget.Box({
             className: "media",
@@ -79,7 +89,7 @@ export function Media(): Gtk.Widget {
                     children: bind(mpris, "players").as((players: Array<AstalMpris.Player>) =>
                         players[0] ? [
                             new Widget.Label({
-                                className: "player-icon nf",
+                                className: "icon nf",
                                 label: bind(players[0], "busName").as((busName: string) => {
                                     const playerName: string = busName.split('.')[busName.split('.').length-1];
                                     return playerIcons[playerName.toLowerCase() as keyof typeof playerIcons] || "󰎇";
@@ -92,7 +102,7 @@ export function Media(): Gtk.Widget {
                                 truncate: true
                             } as Widget.LabelProps),
                             Separator({
-                                orientation: Gtk.Orientation.VERTICAL,
+                                orientation: Gtk.Orientation.HORIZONTAL,
                                 size: 2,
                                 cssColor: `rgb(180, 180, 180)`,
                                 alpha: 1
@@ -113,14 +123,15 @@ export function Media(): Gtk.Widget {
         } as Widget.BoxProps)
     } as Widget.EventBoxProps);
 
-    mediaWidget.connect("hover", () => {
+    hoverConnectionId = mediaWidget.connect("hover", () => {
         mediaControlsRevealer.set_reveal_child(true);
         mediaWidget.className = mediaWidget.className + " reveal";
     });
-    mediaWidget.connect("hover-lost", () => {
+
+    hoverLostConnectionId = mediaWidget.connect("hover-lost", (_) => {
         mediaControlsRevealer.set_reveal_child(false);
-        mediaWidget.className = mediaWidget.className.replaceAll(" reveal", "");
-    })
+        _.className = mediaWidget.className.replaceAll(" reveal", "");
+    });
 
     return mediaWidget;
 }

ags/widget/bar/Tray.ts

@@ -1,28 +1,46 @@
-import { bind, Gio } from "astal";
-import { Gtk, Widget } from "astal/gtk3";
+import { bind, Gio, Variable } from "astal";
+import { Astal, Gdk, Gtk, Widget } from "astal/gtk3";
 import AstalTray from "gi://AstalTray"
 
 const astalTray = AstalTray.get_default();
 
+function menuFromModel(model: Gio.MenuModel, actionGroup: Gio.ActionGroup | null): Gtk.Menu {
+    const menu = Gtk.Menu.new_from_model(model);
+    menu.insert_action_group("dbusmenu", actionGroup)
+
+    return menu;
+}
+
 export function Tray() {
     return new Widget.Box({
         className: "tray",
         visible: bind(astalTray, "items").as((items: Array<AstalTray.TrayItem>) => items.length > 0),
         children: bind(astalTray, "items").as((items: Array<AstalTray.TrayItem>) => 
             items.map((item: AstalTray.TrayItem) => 
-                new Widget.MenuButton({
+                new Widget.Box({
                     className: "item",
-                    tooltipMarkup: bind(item, "tooltipMarkup"),
-                    menuModel: bind(item, "menuModel"),
-                    usePopover: false,
-                    actionGroup: bind(item, "actionGroup").as((actionGroup: any) => ["dbusmenu", actionGroup]),
-                    direction: Gtk.ArrowType.DOWN,
-                    halign: Gtk.Align.CENTER,
-                    child: new Widget.Icon({
-                        gicon: bind(item, "gicon"),
-                        iconSize: Gtk.IconSize.SMALL_TOOLBAR
-                    })
-                } as Widget.MenuButtonProps)
+                    child: Variable.derive(
+                        [ bind(item, "menuModel"), bind(item, "actionGroup") ],
+                        (menuModel: Gio.MenuModel, actionGroup: Gio.ActionGroup) => {
+                            const menu = menuFromModel(menuModel, actionGroup);
+
+                            return new Widget.Button({
+                                className: "item-button",
+                                tooltipMarkup: bind(item, "tooltipMarkup"),
+                                onClick: (_, event: Astal.ClickEvent) => {
+                                    if(event.button === Astal.MouseButton.SECONDARY) {
+                                        menu.popup_at_widget(_, Gdk.Gravity.NORTH, Gdk.Gravity.SOUTH_WEST, null);
+                                    } else if(event.button === Astal.MouseButton.PRIMARY) 
+                                        item.secondary_activate(event.x, event.y);
+                                },
+                                halign: Gtk.Align.CENTER,
+                                child: new Widget.Icon({
+                                    gIcon: bind(item, "gicon")
+                                })
+                            } as Widget.ButtonProps)
+                        }
+                    )()
+                } as Widget.BoxProps)
             )
         )
     } as Widget.BoxProps);