perf: Home-manager to module

feat: Optionise config

modules/user/packages/drvs/ags/widget/Bar.tsx

@@ -0,0 +1,39 @@
+import { App } from "astal/gtk3"
+import { Astal, Gtk, Gdk } from "astal/gtk3"
+
+import Time         from "./elements/Time"
+import Wifi         from "./elements/Wifi"
+import Audio        from "./elements/Audio"
+import Media        from "./elements/Media"
+import Layout       from "./elements/Keyboard"
+import SysTray      from "./elements/SysTray"
+import Workspaces   from "./elements/Workspaces"
+import BatteryLevel from "./elements/Battery"
+
+
+export default function Bar(monitor: Gdk.Monitor) {
+    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
+
+    return <window
+        className="Bar"
+        gdkmonitor={monitor}
+        exclusivity={Astal.Exclusivity.EXCLUSIVE}
+        anchor={TOP | LEFT | RIGHT}>
+        <centerbox className="Container">
+            <box hexpand halign={Gtk.Align.START}>
+                <Workspaces />
+                <Layout />
+            </box>
+            <box>
+                <Media />
+            </box>
+            <box hexpand halign={Gtk.Align.END} >
+                <SysTray />
+                <Wifi />
+                <Audio />
+                <BatteryLevel />
+                <Time />
+            </box>
+        </centerbox>
+    </window>
+}

modules/user/packages/drvs/ags/widget/elements/Audio.tsx

@@ -0,0 +1,11 @@
+import { bind } from "astal"
+import Wp from "gi://AstalWp"
+
+export default function Audio() {
+    const speaker = Wp.get_default()?.audio.defaultSpeaker!
+
+    return <box className="AudioSlider">
+        <icon icon={bind(speaker, "volumeIcon")} />
+        <label label={bind(speaker, "volume").as(v => `${Math.floor(v*100)}%`)} />
+    </box>
+}

modules/user/packages/drvs/ags/widget/elements/Battery.tsx

@@ -0,0 +1,14 @@
+import { bind } from "astal"
+import Battery from "gi://AstalBattery"
+
+export default 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>
+}

modules/user/packages/drvs/ags/widget/elements/Keyboard.tsx

@@ -0,0 +1,12 @@
+import { Variable, bind } from "astal"
+import Hyprland from "gi://AstalHyprland"
+
+export default function Layout() {
+    const hl = Hyprland.get_default();
+    let layout = Variable("en");
+    hl.connect("keyboard-layout", (_, __, l) => { layout.set(`${l}`.slice(0, 2).toLowerCase()) })
+
+    return <box className={bind(layout).as((l) => `Layout ${l}`)}>
+        <label label={bind(layout)}/>
+    </box>
+}

modules/user/packages/drvs/ags/widget/elements/Media.tsx

@@ -0,0 +1,29 @@
+import { Variable, bind } from "astal"
+import { Gtk } from "astal/gtk3"
+import Mpris from "gi://AstalMpris"
+
+export default function Media() {
+    const mpris = Mpris.get_default()
+    // console.log(bind(mpris, "players").as(ps => ps[0] ? `${ps[0].title} ${ps[0].artist} ${ps[0].get_playback_status()}` : "-"));
+
+    return <box>
+        {bind(mpris, "players").as(ps => ps[0] ? (
+            <button
+                className={bind(ps[0], "playback-status").as(s => s == 0 ? "Media playing" : "Media")}
+                onClicked={() => ps[0].play_pause()}>
+                <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.length < 80 ?  ps[0].title : `${ps[0].title.slice(0, 77)}...`)}
+                    />
+                </box>
+            </button>
+        ) : ("") )}
+    </box>
+}

modules/user/packages/drvs/ags/widget/elements/SysTray.tsx

@@ -0,0 +1,22 @@
+import { bind } from "astal"
+import Tray from "gi://AstalTray"
+
+export default function SysTray() {
+    const tray = Tray.get_default()
+
+    return <box className="item">
+        {bind(tray, "items").as(i => (i.length > 0) ? (
+            <box className="SysTray">
+                {bind(tray, "items").as(items => items.map(item => (
+                    <menubutton
+                        tooltipMarkup={bind(item, "tooltipMarkup")}
+                        usePopover={false}
+                        actionGroup={bind(item, "action-group").as(ag => ["dbusmenu", ag])}
+                        menuModel={bind(item, "menu-model")}>
+                        <icon gicon={bind(item, "gicon")} />
+                    </menubutton>
+                )))}
+            </box>
+        ) : ("") )}
+    </box>
+}

modules/user/packages/drvs/ags/widget/elements/Time.tsx

@@ -0,0 +1,12 @@
+import { Variable, GLib } from "astal"
+
+export default function Time({ format = "%e %b - %H:%M %a" }) {
+    const time = Variable<string>("").poll(1000, () =>
+        GLib.DateTime.new_now_local().format(format)!)
+
+    return <label
+        className="Time"
+        onDestroy={() => time.drop()}
+        label={time()}
+    />
+}

modules/user/packages/drvs/ags/widget/elements/Wifi.tsx

@@ -0,0 +1,17 @@
+import { bind } from "astal"
+import Network from "gi://AstalNetwork"
+
+export default function Wifi() {
+    const network = Network.get_default()
+    const wifi = bind(network, "wifi")
+
+    return <box visible={wifi.as(Boolean)}>
+        {wifi.as(wifi => wifi && (
+            <icon
+                tooltipText={bind(wifi, "ssid").as(String)}
+                className="Wifi"
+                icon={bind(wifi, "iconName")}
+            />
+        ))}
+    </box>
+}

modules/user/packages/drvs/ags/widget/elements/Workspaces.tsx

@@ -0,0 +1,21 @@
+import { bind } from "astal"
+import Hyprland from "gi://AstalHyprland"
+
+export default function Workspaces() {
+    const hypr = Hyprland.get_default()
+
+    return <box className="Workspaces">
+        {bind(hypr, "workspaces").as(wss => wss
+            .filter(ws => !(ws.id >= -99 && ws.id <= -2)) // filter out special workspaces
+            .sort((a, b) => a.id - b.id)
+            .map(ws => (
+                <button
+                    className={bind(hypr, "focusedWorkspace").as(fw =>
+                        ws === fw ? "focused" : "")}
+                    onClicked={() => ws.focus()}>
+                    {ws.id}
+                </button>
+            ))
+        )}
+    </box>
+}