COMMIT

widget/Bar.tsx

@@ -1,15 +1,16 @@
 import { App, Astal, Gdk, Gtk } from "astal/gtk4";
+import Bluetooth from "./Bluetooth";
 import Calendar from "./Calendar";
 import Hyprland from "./Hyprland";
+import Workspaces from "./Hyprland/workspaces";
 import Internet from "./Internet";
+import Memory from "./Memory";
 import Mpris from "./Mpris";
 import OS from "./OS";
 import Pywal from "./Pywal";
-import Tray from "./Tray";
 import SwayNC from "./SwayNC";
+import Tray from "./Tray";
 import WirePlumber from "./WirePlumber";
-import Memory from "./Memory";
-import Workspaces from "./Hyprland/workspaces";
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
   const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
@@ -37,6 +38,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
           <Pywal />
           <WirePlumber />
           <Internet />
+          <Bluetooth />
           <Memory />
           <Calendar />
           <SwayNC />

widget/Bluetooth.tsx

@@ -0,0 +1,48 @@
+import { Binding } from "astal";
+import { bind, derive } from "astal";
+import AstalBluetooth from "gi://AstalBluetooth";
+
+const DeviceList = function ({
+  devices,
+}: {
+  devices: Binding<AstalBluetooth.Device[]>;
+}) {
+  return (
+    <box vertical>
+      {devices.as((devices) => {
+        return devices.map((device) => {
+          const name = bind(device, "name");
+          const connected = bind(device, "connected");
+
+          return (
+            <button
+              label={bind(
+                derive(
+                  [name, connected],
+                  (name, connected) => `${connected ? "󰂱" : ""} ${name}`,
+                ),
+              )}
+            />
+          );
+        });
+      })}
+    </box>
+  );
+};
+
+const Bluetooth = function () {
+  const bluetooth = AstalBluetooth.get_default();
+
+  const devices = bind(bluetooth, "devices");
+
+  return (
+    <menubutton>
+      <label label={"󰂯"} />
+      <popover>
+        <DeviceList devices={devices} />
+      </popover>
+    </menubutton>
+  );
+};
+
+export default Bluetooth;

widget/Mpris.tsx

@@ -16,7 +16,7 @@ function FormatLabel(player: {
 	length: number;
 	status: AstalMpris.PlaybackStatus;
 }) {
-  return `${player.status === AstalMpris.PlaybackStatus.PLAYING ? "" : ""} ${player.title} - ${player.artist} [${IntegerToMinuteSeconds(player.position)}/${IntegerToMinuteSeconds(player.length)}]`;
+	return `${player.status === AstalMpris.PlaybackStatus.PLAYING ? "" : ""} ${player.title} - ${player.artist} [${IntegerToMinuteSeconds(player.position)}/${IntegerToMinuteSeconds(player.length)}]`;
 }
 
 const Mpris = function () {

widget/Notifications.tsx

@@ -0,0 +1,14 @@
+import { Gdk, Gtk } from "astal/gtk4";
+
+const Notifications = function () {
+  return (
+    <menubutton hexpand halign={Gtk.Align.END}>
+      <label cursor={Gdk.Cursor.new_from_name("pointer", null)} label={""} />
+      <popover>
+        <Gtk.Grid></Gtk.Grid>
+      </popover>
+    </menubutton>
+  );
+};
+
+export default Notifications;

widget/Tray.tsx

@@ -2,6 +2,16 @@ import { bind } from "astal";
 import { Gdk } from "astal/gtk4";
 import AstalTray from "gi://AstalTray";
 
+const TrayItemPopover = function ({ item }: { item: AstalTray.TrayItem }) {
+  const actionGroup = bind(item, "actionGroup");
+
+  return (
+    <popover>
+      <box>{actionGroup.get()}</box>
+    </popover>
+  );
+};
+
 const Tray = function () {
   const tray = AstalTray.get_default();
 
@@ -19,6 +29,7 @@ const Tray = function () {
                   (iconName) => iconName || "NONE",
                 )}
               />
+              <TrayItemPopover item={item} />
             </menubutton>
           );
         }),