add: js bar example

examples/js/.gitignore

@@ -0,0 +1,3 @@
+@girs/
+tsconfig.json
+env.d.ts

examples/js/simple-bar/.gitignore

@@ -0,0 +1,2 @@
+@girs/
+node_modules/

examples/js/simple-bar/README.md

@@ -0,0 +1,9 @@
+# Simple Bar Example
+
+A simple bar for Hyprland using
+
+- [Audio library](https://aylur.github.io/astal/libraries/audio).
+- [Battery library](https://aylur.github.io/astal/libraries/battery).
+- [Hyprland library](https://aylur.github.io/astal/libraries/hyprland).
+- [Mpris library](https://aylur.github.io/astal/libraries/mpris).
+- [Network library](https://aylur.github.io/astal/libraries/network).

examples/js/simple-bar/app.ts

@@ -0,0 +1,8 @@
+import { App } from "astal"
+import style from "./style.scss"
+import Bar from "./widget/Bar"
+
+App.start({
+    css: style,
+    main: () => App.get_monitors().map(Bar),
+})

examples/js/simple-bar/style.scss

@@ -0,0 +1,88 @@
+$bg: #212223;
+$fg: #f1f1f1;
+$accent: #378DF7;
+$radius: 7px;
+
+window.Bar {
+    border: none;
+    box-shadow: none;
+    background-color: $bg;
+    color: $fg;
+    font-size: 1.1em;
+    font-weight: bold;
+
+    button {
+        all: unset;
+        background-color: transparent;
+
+        &:hover label {
+            background-color: transparentize($fg, 0.84);
+            border-color: transparentize($accent, 0.8);
+        }
+
+        &:active label {
+            background-color: transparentize($fg, 0.8)
+        }
+    }
+
+    label {
+        transition: 200ms;
+        padding: 0 8px;
+        margin: 2px;
+        border-radius: $radius;
+        border: 1pt solid transparent;
+    }
+
+    .Workspaces .focused label {
+        color: $accent;
+        border-color: $accent;
+    }
+
+    .FocusedClient {
+        color: $accent;
+    }
+
+    .Media .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;
+    }
+
+    .AudioSlider {
+        * {
+            all: unset;
+        }
+
+        icon {
+            margin-right: .6em;
+        }
+
+        margin: 0 1em;
+
+        trough {
+            background-color: transparentize($fg, 0.8);
+            border-radius: $radius;
+        }
+
+        highlight {
+            background-color: $accent;
+            min-height: .8em;
+            border-radius: $radius;
+        }
+
+        slider {
+            background-color: $fg;
+            border-radius: $radius;
+            min-height: 1em;
+            min-width: 1em;
+            margin: -.2em;
+        }
+    }
+}

examples/js/simple-bar/widget/Bar.tsx

@@ -0,0 +1,130 @@
+import { Variable, Astal, Gtk, Gdk, GLib, bind } from "astal"
+import Hyprland from "gi://AstalHyprland"
+import Mpris from "gi://AstalMpris"
+import Battery from "gi://AstalBattery"
+import Wp from "gi://AstalWp"
+import Network from "gi://AstalNetwork"
+
+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_wp()?.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, "iconName")} />
+        <label label={bind(bat, "percentage").as(p =>
+            `${Math.floor(p * 100)} %`
+        )} />
+    </box>
+}
+
+function Media() {
+    const player = Mpris.Player.new("spotify")
+
+    return <box className="Media">
+        <box
+            className="Cover"
+            valign={Gtk.Align.CENTER}
+            css={bind(player, "coverArt").as(cover =>
+                `background-image: url('${cover}');`
+            )}
+        />
+        <label
+            label={bind(player, "title").as(() =>
+                `${player.title} - ${player.artist}`
+            )}
+        />
+    </box>
+}
+
+function Workspaces() {
+    const hypr = Hyprland.get_default()
+
+    return <box className="Workspaces">
+        {bind(hypr, "workspaces").as(wss => wss
+            .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>
+}
+
+function FocusedClient() {
+    const hypr = Hyprland.get_default()
+    const focused = bind(hypr, "focusedClient")
+
+    return <box
+        className="Focused"
+        visible={focused.as(Boolean)}>
+        {focused.as(client => (
+            client && <label label={bind(client, "title").as(String)} />
+        ))}
+    </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}>
+                <Workspaces />
+                <FocusedClient />
+            </box>
+            <box>
+                <Media />
+            </box>
+            <box hexpand halign={Gtk.Align.END} >
+                <Wifi />
+                <AudioSlider />
+                <BatteryLevel />
+                <Time />
+            </box>
+        </centerbox>
+    </window>
+}