perf: Home-manager to module

feat: Optionise config

modules/user/packages/drvs/ags/README.md

@@ -0,0 +1,12 @@
+# Simple Bar Example
+
+![simple-bar](https://github.com/user-attachments/assets/a306c864-56b7-44c4-8820-81f424f32b9b)
+
+A simple bar for Hyprland using
+
+- [Battery library](https://aylur.github.io/astal/guide/libraries/battery).
+- [Hyprland library](https://aylur.github.io/astal/guide/libraries/hyprland).
+- [Mpris library](https://aylur.github.io/astal/guide/libraries/mpris).
+- [Network library](https://aylur.github.io/astal/guide/libraries/network).
+- [Tray library](https://aylur.github.io/astal/guide/libraries/tray).
+- [WirePlumber library](https://aylur.github.io/astal/guide/libraries/wireplumber).

modules/user/packages/drvs/ags/app.ts

@@ -0,0 +1,13 @@
+import { App } from "astal/gtk3"
+import style from "./style.scss"
+import Bar from "./widget/Bar"
+
+App.start({
+    css: style,
+    instanceName: "ags",
+    requestHandler(request, res) {
+        print(request)
+        res("ok")
+    },
+    main: () => App.get_monitors().map(Bar),
+})

modules/user/packages/drvs/ags/style.scss

@@ -0,0 +1,97 @@
+@use "sass:color";
+@use "colors.scss" as *;
+
+$radius: 10px;
+
+%item {
+    all: unset;
+    background: $bg;
+    border-radius: $radius;
+    padding: 4px;
+
+    & + &, .item + & { margin-left: 4px; }
+
+    label { margin: 0 8px; }
+}
+
+window.Bar {
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+    color: $fg;
+    font-size: 1.1em;
+    font-weight: bold;
+    
+    .Container {
+        margin: 10px 10px 0;
+    }
+
+    .Workspaces  {
+        button {
+            all: unset;
+
+            &:hover label {
+                background: $surface0;
+                color: $accent;
+            }
+
+            &:active label {
+                background: $surface0;
+                color: $accent;
+            }
+        }
+
+        label {
+            transition: 200ms;
+            padding: 0 6px;
+            margin: 2px;
+            border-radius: $radius;
+            border: 1pt solid transparent;
+        }
+
+        .focused label {
+            background: $accent;
+            color: $bg;
+            border-color: $accent;
+        }
+    }
+
+    .Layout.en { color: $accent; }
+
+    .SysTray button {
+        all: unset;
+        padding: 8px;
+        border-radius: inherit;
+
+        &:hover {
+            background: $surface0;
+        }
+    }
+
+    .Media {
+        &.playing {
+            border: 2pt solid $accent;
+        }
+        
+        .Cover {
+            min-height: 1.2em;
+            min-width: 1.2em;
+            border-radius: $radius;
+            background-position: center;
+            background-size: contain;
+        }
+    }
+
+    .Battery label {
+        padding-left: 0;
+        margin-left: 0;
+    }
+
+    .Time { padding: 0 8px; }
+
+    .AudioSlider icon { margin-left: 8px; }
+
+    .Workspaces, .Layout, .Media, .SysTray, .AudioSlider, .Time {
+        @extend %item;
+    }
+}

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>
+}