✨ ags(bar): add lots of widgets ❤️

ags/widget/bar/Audio.tsx

@@ -0,0 +1,44 @@
+import { bind } from "astal";
+import { Widget } from "astal/gtk3";
+import AstalWp from "gi://AstalWp?version=0.1";
+
+const wp = AstalWp.get_default();
+
+export function Audio() {
+    return wp && new Widget.Button({
+        className: "audio",
+        child: new Widget.Box({
+            children: [
+                new Widget.EventBox({
+                    className: "sink",
+                    child: new Widget.Box({
+                        children: [
+                            new Widget.Label({
+                                className: "icon nf",
+                                label: "󰕾"
+                            } as Widget.LabelProps),
+                            new Widget.Label({
+                                className: "icon nf",
+                                label: bind(wp!.defaultSpeaker, "volume").as((volume: number) => Math.round(volume * 100).toString() + "%")
+                            } as Widget.LabelProps)
+                        ]
+                    })
+                } as Widget.EventBoxProps),
+                new Widget.EventBox({
+                    className: "source",
+                    child: new Widget.Box({
+                        children: [
+                            new Widget.Label({
+                                className: "icon",
+                                label: "󰍬"
+                            } as Widget.LabelProps),
+                            new Widget.Label({
+                                label: bind(wp!.defaultMicrophone, "volume").as((volume: number) => Math.round(volume * 100).toString() + "%")
+                            } as Widget.LabelProps)
+                        ]
+                    })
+                } as Widget.EventBoxProps)
+            ]
+        } as Widget.BoxProps)
+    } as Widget.ButtonProps);
+}

ags/widget/bar/FocusedWindow.tsx

@@ -0,0 +1,42 @@
+import { bind } from "astal";
+import { Gtk, Widget } from "astal/gtk3";
+import AstalHyprland from "gi://AstalHyprland";
+
+const hyprland = AstalHyprland.get_default();
+
+export function FocusedWindow() {
+    return new Widget.Box({
+        className: "focused-window",
+        children: [
+            new Widget.Icon({
+                className: "icon",
+                icon: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => {
+                    switch(client.initialClass) {
+                        case "zen":
+                            return "zen-browser";
+
+                        default:
+                            return client.initialClass;
+                    }}),
+                iconSize: Gtk.IconSize.SMALL_TOOLBAR
+            }),
+            new Widget.Box({
+                className: "text-content",
+                orientation: Gtk.Orientation.VERTICAL,
+                homogeneous: false,
+                children: [
+                    new Widget.Label({
+                        className: "class",
+                        xalign: 0,
+                        label: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => client.get_class())
+                    } as Widget.LabelProps),
+                    new Widget.Label({
+                        className: "title",
+                        xalign: 0,
+                        label: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => client.get_title())
+                    } as Widget.LabelProps)
+                ]
+            })
+        ]
+    } as Widget.BoxProps);
+}

ags/widget/bar/Tray.tsx

@@ -1,17 +1,26 @@
-import { Box, Label } from "astal/gtk3/widget";
+import { bind } from "astal";
+import { Astal, Gtk, Widget } from "astal/gtk3";
 import AstalTray from "gi://AstalTray"
 
 const astalTray = AstalTray.get_default();
-let items: Array<AstalTray.TrayItem> = astalTray.items;
-
-const handlerId = astalTray.connect("item-added", () => {
-    items = astalTray.items;
-    console.log(astalTray.items);
-}) as number;
 
 export function Tray() {
-    return (
-        <Box className={"tray"}>
-        </Box>
-    );
+    return new Widget.Box({
+        className: "tray",
+        children: bind(astalTray, "items").as((items: Array<AstalTray.TrayItem>) => 
+            items.map((item: AstalTray.TrayItem) => 
+                new Widget.MenuButton({
+                    className: "item",
+                    tooltipMarkup: bind(item, "tooltipMarkup"),
+                    menuModel: bind(item, "menuModel"),
+                    usePopover: false,
+                    actionGroup: bind(item, "actionGroup").as((actionGroup: any) => ["dbusmenu", actionGroup]),
+                    child: new Widget.Icon({
+                        gIcon: bind(item, "gicon"),
+                        iconSize: Gtk.IconSize.SMALL_TOOLBAR
+                    })
+                } as Widget.MenuButtonProps)
+            )
+        )
+    } as Widget.BoxProps);
 }