commit

widget/Bar.tsx

@@ -1,36 +1,39 @@
-import { App, Astal, Gtk, Gdk } from "astal/gtk4"
-import { Variable } from "astal"
-
-const time = Variable("").poll(1000, "date")
+import { App, Astal, Gdk, Gtk } from "astal/gtk4";
+import Calendar from "./Calendar";
+import Hyprland from "./Hyprland";
+import Internet from "./Internet";
+import Mpris from "./Mpris";
+import OS from "./OS";
+import Pywal from "./Pywal";
+import Tray from "./Tray";
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
-    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
+  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
 
-    return <window
-        visible
-        cssClasses={["Bar"]}
-        gdkmonitor={gdkmonitor}
-        exclusivity={Astal.Exclusivity.EXCLUSIVE}
-        anchor={TOP | LEFT | RIGHT}
-        application={App}>
-        <centerbox cssName="centerbox">
-            <button
-                onClicked="echo hello"
-                hexpand
-                halign={Gtk.Align.CENTER}
-            >
-                Welcome to AGS!
-            </button>
-            <box />
-            <menubutton
-                hexpand
-                halign={Gtk.Align.CENTER}
-            >
-                <label label={time()} />
-                <popover>
-                    <Gtk.Calendar />
-                </popover>
-            </menubutton>
-        </centerbox>
+  return (
+    <window
+      visible
+      cssClasses={["Bar"]}
+      gdkmonitor={gdkmonitor}
+      exclusivity={Astal.Exclusivity.EXCLUSIVE}
+      anchor={TOP | LEFT | RIGHT}
+      application={App}
+    >
+      <centerbox cssName="centerbox">
+        <box halign={Gtk.Align.START}>
+          <OS />
+          <Tray />
+          <Hyprland.Client />
+        </box>
+        <box halign={Gtk.Align.CENTER}>
+          <Mpris />
+        </box>
+        <box halign={Gtk.Align.END}>
+          <Pywal />
+          <Internet />
+          <Calendar />
+        </box>
+      </centerbox>
     </window>
+  );
 }

widget/Calendar.tsx

@@ -0,0 +1,23 @@
+import { Variable } from "astal";
+import { Gdk, Gtk } from "astal/gtk4";
+
+const time = Variable("").poll(1000, 'date +"%r"');
+const date = Variable("").poll(1000, 'date +"%a %b%e, %G"');
+
+function Calendar() {
+  return (
+    <menubutton hexpand halign={Gtk.Align.END}>
+      <label
+        cssClasses={["Button"]}
+        cursor={Gdk.Cursor.new_from_name("pointer", null)}
+        label={time().as((t) => `  ${t}`)}
+        tooltip_text={date().as((d) => `󰸗  ${d}`)}
+      />
+      <popover>
+        <Gtk.Calendar />
+      </popover>
+    </menubutton>
+  );
+}
+
+export default Calendar;

widget/Internet.tsx

@@ -23,6 +23,7 @@ function Internet() {
   return (
     <box>
       <label
+        cssClasses={["Label"]}
         label={bind(network, "wifi").as(
           (w) => `${icon(w.strength)}  ${w.strength}%`,
         )}

widget/Mpris.tsx

@@ -0,0 +1,48 @@
+import { bind, Variable } from "astal";
+import AstalMpris from "gi://AstalMpris";
+
+function IntegerToMinuteSeconds(value: number) {
+  const minutes = Math.floor(value / 60);
+  const seconds = Math.floor(value - minutes * 60);
+  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+}
+
+function FormatLabel(player: AstalMpris.Player) {
+  return `${player.title} - ${player.artist} [${IntegerToMinuteSeconds(player.position)}/${IntegerToMinuteSeconds(player.length)}]`;
+}
+
+const Mpris = function () {
+  const mpris = AstalMpris.get_default();
+
+  mpris.connect("player-added", () => {
+    players.set(mpris.players);
+  });
+  mpris.connect("player-closed", () => {
+    players.set(mpris.players);
+  });
+
+  const players = Variable<Array<AstalMpris.Player>>(mpris.players);
+
+  const label = Variable.derive([players], (players) => {
+    const player = players[0];
+    if (!player.title || !player.artist || !player.position || !player.length) {
+      return "";
+    }
+    return FormatLabel(player);
+  });
+
+  label.subscribe((value) => print(value));
+
+  return (
+    <box>
+      <label
+        label={bind(label)}
+        onScroll={(self, dx, dy) => {
+          dy > 0 ? print("BLING!") : print("BANG!");
+        }}
+      />
+    </box>
+  );
+};
+
+export default Mpris;

widget/OS.tsx

@@ -0,0 +1,17 @@
+import { GLib } from "astal";
+import { Gtk } from "astal/gtk4";
+
+const OS = function () {
+  return (
+    <button
+      onClicked="echo hello"
+      hexpand
+      halign={Gtk.Align.START}
+      cssClasses={["Arch"]}
+    >
+      <image iconName={GLib.get_os_info("LOGO") || "missing-symbolic"} />
+    </button>
+  );
+};
+
+export default OS;

widget/Pywal.tsx

@@ -3,14 +3,12 @@ import { Gdk } from "astal/gtk4";
 
 function Pywal() {
   return (
-    <box>
-      <button
-        cssClasses={["Pywal"]}
-        cursor={Gdk.Cursor.new_from_name("pointer", null)}
-        label={""}
-        onClicked={() => exec("bash -c ~/dotfiles/.scripts/pywal-swww.sh")}
-      />
-    </box>
+    <button
+      cssClasses={["Pywal"]}
+      cursor={Gdk.Cursor.new_from_name("pointer", null)}
+      label={""}
+      onClicked={() => exec("bash -c ~/dotfiles/.scripts/pywal-swww.sh")}
+    />
   );
 }
 

widget/Tray.tsx

@@ -0,0 +1,32 @@
+import { bind } from "astal";
+import { Gtk } from "astal/gtk4";
+import AstalTray from "gi://AstalTray";
+
+const Tray = function () {
+  const tray = AstalTray.get_default();
+
+  const trayItems = bind(tray, "items");
+
+  function OpenTrayItem(button: Gtk.MenuButton, item: AstalTray.TrayItem) {
+    item.about_to_show();
+  }
+
+  return (
+    <box cssClasses={["Tray", "Label"]}>
+      {bind(trayItems).as((items) =>
+        items.map((item) => {
+          return (
+            <menubutton>
+              <image
+                tooltip_text={item.title || item.tooltip.title}
+                file={item.iconName || "NONE"}
+              />
+            </menubutton>
+          );
+        }),
+      )}
+    </box>
+  );
+};
+
+export default Tray;