ags: setup example bar

2024-11-14 19:51:55 +01:00 · 2024-11-14 19:51:55 +01:00 · dae1dcde13
commit dae1dcde13
parent 347690561d
10 changed files with 359 additions and 66 deletions
--- a/homeManagerModules/niri/ags/widget/Bar.tsx
+++ b/homeManagerModules/niri/ags/widget/Bar.tsx
@ -0,0 +1,128 @@
+import { App } from "astal/gtk3";
+import { Variable, GLib, bind } from "astal";
+import { Astal, Gtk, Gdk } from "astal/gtk3";
+import Mpris from "gi://AstalMpris";
+import Battery from "gi://AstalBattery";
+import Wp from "gi://AstalWp";
+import Network from "gi://AstalNetwork";
+import Tray from "gi://AstalTray";
+
+function SysTray() {
+    const tray = Tray.get_default();
+
+    return <box>
+        {bind(tray, "items").as(items => items.map(item => {
+            if (item.iconThemePath)
+                App.add_icons(item.iconThemePath);
+
+            const menu = item.create_menu();
+
+            return <button
+                tooltipMarkup={bind(item, "tooltipMarkup")}
+                onDestroy={() => menu?.destroy()}
+                onClickRelease={self => {
+                    menu?.popup_at_widget(self, Gdk.Gravity.SOUTH, Gdk.Gravity.NORTH, null);
+                }}>
+                <icon gIcon={bind(item, "gicon")} />
+            </button>;
+        }))}
+    </box>;
+}
+
+function Wifi() {
+    const { wifi } = Network.get_default();
+
+    return <icon
+        tooltipText={bind(wifi, "ssid").as(String)}
+        className="Wifi"
+        icon={bind(wifi, "iconName")}
+    />;
+}
+
+function AudioSlider() {
+    const speaker = Wp.get_default()?.audio.defaultSpeaker!;
+
+    return <box className="AudioSlider" css="min-width: 140px">
+        <icon icon={bind(speaker, "volumeIcon")} />
+        <slider
+            hexpand
+            onDragged={({ value }) => speaker.volume = value}
+            value={bind(speaker, "volume")}
+        />
+    </box>;
+}
+
+function BatteryLevel() {
+    const bat = Battery.get_default();
+
+    return <box className="Battery"
+        visible={bind(bat, "isPresent")}>
+        <icon icon={bind(bat, "batteryIconName")} />
+        <label label={bind(bat, "percentage").as(p =>
+            `${Math.floor(p * 100)} %`
+        )} />
+    </box>;
+}
+
+function Media() {
+    const mpris = Mpris.get_default();
+
+    return <box className="Media">
+        {bind(mpris, "players").as(ps => ps[0] ? (
+            <box>
+                <box
+                    className="Cover"
+                    valign={Gtk.Align.CENTER}
+                    css={bind(ps[0], "coverArt").as(cover =>
+                        `background-image: url('${cover}');`
+                    )}
+                />
+                <label
+                    label={bind(ps[0], "title").as(() =>
+                        `${ps[0].title} - ${ps[0].artist}`
+                    )}
+                />
+            </box>
+        ) : (
+            "Nothing Playing"
+        ))}
+    </box>;
+}
+
+function Time({ format = "%H:%M - %A %e." }) {
+    const time = Variable<string>("").poll(1000, () =>
+        GLib.DateTime.new_now_local().format(format)!);
+
+    return <label
+        className="Time"
+        onDestroy={() => time.drop()}
+        label={time()}
+    />;
+}
+
+export default function Bar(monitor: Gdk.Monitor) {
+    const anchor = Astal.WindowAnchor.TOP
+        | Astal.WindowAnchor.LEFT
+        | Astal.WindowAnchor.RIGHT;
+
+    return <window
+        className="Bar"
+        gdkmonitor={monitor}
+        exclusivity={Astal.Exclusivity.EXCLUSIVE}
+        anchor={anchor}>
+        <centerbox>
+            <box hexpand halign={Gtk.Align.START}>
+            </box>
+            <box>
+                <Media />
+            </box>
+            <box hexpand halign={Gtk.Align.END} >
+                <SysTray />
+                <Wifi />
+                <AudioSlider />
+                <BatteryLevel />
+                <Time />
+            </box>
+        </centerbox>
+    </window>;
+}