feat: migrate to ags v3

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 @girs/
+env.d.ts

app.ts

@@ -1,16 +1,14 @@
-import { App } from "astal/gtk4";
+import app from "ags/gtk4/app";
+import GLib from "gi://GLib";
 import style from "./style.scss";
 import windows from "./windows";
-import GLib from "gi://GLib";
-import { reqHandler } from "./handler";
 
 const icons = `${GLib.get_user_config_dir()}/tpanel/assets/icons`;
 
-App.start({
+app.start({
   css: style,
   icons: icons,
-  requestHandler: reqHandler,
   main() {
-    windows.map((win) => App.get_monitors().map(win));
+    windows.map((win) => app.get_monitors().map(win));
   },
 });

flake.lock

@@ -8,11 +8,11 @@
         ]
       },
       "locked": {
-        "lastModified": 1744557573,
+        "lastModified": 1758577685,
-        "narHash": "sha256-XAyj0iDuI51BytJ1PwN53uLpzTDdznPDQFG4RwihlTQ=",
+        "narHash": "sha256-iHT0kvsQJG+Z89quGi7rNCXEg2e3DBGfuuCMu/UwiIo=",
         "owner": "aylur",
         "repo": "ags",
-        "rev": "3ed9737bdbc8fc7a7c7ceef2165c9109f336bff6",
+        "rev": "aa7a8a2dd6e54aaeb4e13a73ed3bc2283995090b",
         "type": "github"
       },
       "original": {
@@ -29,31 +29,11 @@
         ]
       },
       "locked": {
-        "lastModified": 1742571008,
+        "lastModified": 1756474652,
-        "narHash": "sha256-5WgfJAeBpxiKbTR/gJvxrGYfqQRge5aUDcGKmU1YZ1Q=",
+        "narHash": "sha256-iiBU6itpEqE0spXeNJ3uJTfioSyKYjt5bNepykpDXTE=",
         "owner": "aylur",
         "repo": "astal",
-        "rev": "dc0e5d37abe9424c53dcbd2506a4886ffee6296e",
+        "rev": "20bd8318e4136fbd3d4eb2d64dbabc3acbc915dd",
-        "type": "github"
-      },
-      "original": {
-        "owner": "aylur",
-        "repo": "astal",
-        "type": "github"
-      }
-    },
-    "astal_2": {
-      "inputs": {
-        "nixpkgs": [
-          "nixpkgs"
-        ]
-      },
-      "locked": {
-        "lastModified": 1748416910,
-        "narHash": "sha256-FEQcs58HL8Fe4i7XlqVEUwthjxwvRvgX15gTTfW17sU=",
-        "owner": "aylur",
-        "repo": "astal",
-        "rev": "c1bd89a47c81c66ab5fc6872db5a916c0433fb89",
         "type": "github"
       },
       "original": {
@@ -64,11 +44,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1748026106,
+        "lastModified": 1758427187,
-        "narHash": "sha256-6m1Y3/4pVw1RWTsrkAK2VMYSzG4MMIj7sqUy7o8th1o=",
+        "narHash": "sha256-pHpxZ/IyCwoTQPtFIAG2QaxuSm8jWzrzBGjwQZIttJc=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "063f43f2dbdef86376cc29ad646c45c46e93234c",
+        "rev": "554be6495561ff07b6c724047bdd7e0716aa7b46",
         "type": "github"
       },
       "original": {
@@ -81,7 +61,6 @@
     "root": {
       "inputs": {
         "ags": "ags",
-        "astal": "astal_2",
         "nixpkgs": "nixpkgs"
       }
     }

flake.nix

@@ -1,11 +1,9 @@
 {
   description = "tux's widgets for wayland";
+
   inputs = {
     nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable";
-    astal = {
+
-      url = "github:aylur/astal";
-      inputs.nixpkgs.follows = "nixpkgs";
-    };
     ags = {
       url = "github:aylur/ags";
       inputs.nixpkgs.follows = "nixpkgs";
@@ -15,22 +13,16 @@
   outputs = {
     self,
     nixpkgs,
-    astal,
     ags,
   }: let
     system = "x86_64-linux";
     pkgs = nixpkgs.legacyPackages.${system};
-  in {
+    pname = "tpanel";
-    packages.${system} = {
-      default = let
-        tpanel = ags.lib.bundle {
-          inherit pkgs;
-          src = ./.;
-          name = "tpanel";
     entry = "app.ts";
-          gtk4 = true;
 
-          extraPackages = with ags.packages.${system}; [
+    agsPackages = with ags.packages.${system}; [
+      io
+      astal4
       hyprland
       apps
       battery
@@ -38,6 +30,37 @@
       network
       notifd
     ];
+
+    extraPackages =
+      agsPackages
+      ++ [
+        pkgs.libadwaita
+      ];
+  in {
+    packages.${system} = {
+      default = let
+        tpanel = pkgs.stdenv.mkDerivation {
+          name = pname;
+          src = ./.;
+
+          nativeBuildInputs = with pkgs; [
+            wrapGAppsHook
+            gobject-introspection
+            ags.packages.${system}.default
+          ];
+
+          buildInputs = extraPackages ++ [pkgs.gjs];
+
+          installPhase = ''
+            runHook preInstall
+
+            mkdir -p $out/bin
+            mkdir -p $out/share
+            cp -r * $out/share
+            ags bundle ${entry} $out/bin/${pname} -d "SRC='$out/share'"
+
+            runHook postInstall
+          '';
         };
       in
         pkgs.runCommand "tpanel" {
@@ -67,7 +90,7 @@
 
         '';
 
-      astal = astal.packages.${system};
+      ags = ags.packages.${system};
     };
 
     apps.default = {
@@ -77,20 +100,9 @@
 
     devShells.${system} = {
       default = pkgs.mkShell {
-        nativeBuildInputs = [
-          astal.packages.${system}.default
-        ];
         buildInputs = [
-          # includes astal3 astal4 astal-io by default
           (ags.packages.${system}.default.override {
-            extraPackages = with ags.packages.${system}; [
+            inherit extraPackages;
-              hyprland
-              apps
-              battery
-              tray
-              network
-              notifd
-            ];
           })
         ];
       };

handler.ts

@@ -1,14 +0,0 @@
-import { App } from "astal/gtk4";
-import { WINDOW_NAME } from "./widgets/bar";
-
-export const reqHandler = (req: string, res: (res: any) => void) => {
-  switch (req) {
-    case "toggle-bar":
-      const win = App.get_window(WINDOW_NAME);
-      win?.is_visible() ? win.hide() : win?.set_visible(true);
-      break;
-
-    default:
-      res("uknown command");
-  }
-};

package-lock.json

@@ -1,35 +0,0 @@
-{
-    "name": "astal-shell",
-    "lockfileVersion": 3,
-    "requires": true,
-    "packages": {
-        "": {
-            "name": "astal-shell",
-            "dependencies": {
-                "astal": "/nix/store/8cl58ip2nasg6rdyj59cwg2f0qbixs28-astal-gjs/share/astal/gjs",
-                "typescript": "^5.7.3"
-            }
-        },
-        "../../../../nix/store/8cl58ip2nasg6rdyj59cwg2f0qbixs28-astal-gjs/share/astal/gjs": {
-            "name": "astal",
-            "license": "LGPL-2.1"
-        },
-        "node_modules/astal": {
-            "resolved": "../../../../nix/store/8cl58ip2nasg6rdyj59cwg2f0qbixs28-astal-gjs/share/astal/gjs",
-            "link": true
-        },
-        "node_modules/typescript": {
-            "version": "5.7.3",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
-            "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
-            "license": "Apache-2.0",
-            "bin": {
-                "tsc": "bin/tsc",
-                "tsserver": "bin/tsserver"
-            },
-            "engines": {
-                "node": ">=14.17"
-            }
-        }
-    }
-}

package.json

@@ -1,7 +0,0 @@
-{
-    "name": "astal-shell",
-    "dependencies": {
-        "astal": "/nix/store/8cl58ip2nasg6rdyj59cwg2f0qbixs28-astal-gjs/share/astal/gjs",
-        "typescript": "^5.7.3"
-    }
-}

tsconfig.json

@@ -1,14 +1,10 @@
 {
-    "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
-        "experimentalDecorators": true,
+    "jsx": "react-jsx",
-        "strict": true,
+    "jsxImportSource": "ags/gtk4",
-        "target": "ES2022",
     "module": "ES2022",
     "moduleResolution": "Bundler",
-        // "checkJs": true,
+    "strict": true,
-        // "allowJs": true,
+    "target": "ES2020"
-        "jsx": "react-jsx",
-        "jsxImportSource": "astal/gtk4",
   }
 }

widgets/app-launcher/index.tsx

@@ -1,13 +1,16 @@
-import { Variable } from "astal";
+import { createState, For } from "ags";
-import { App, Astal, Gdk, Gtk, hook } from "astal/gtk4";
+import { Astal, Gdk, Gtk } from "ags/gtk4";
+import app from "ags/gtk4/app";
 import AstalApps from "gi://AstalApps";
 
 export const WINDOW_NAME = "app-launcher";
+
+let searchEntry: Gtk.Entry;
 const apps = new AstalApps.Apps();
-const text = Variable("");
+const [searchText, setSearchText] = createState("");
 
 const hide = () => {
-  App.get_window(WINDOW_NAME)?.set_visible(false);
+  app.get_window(WINDOW_NAME)?.set_visible(false);
 };
 
 const AppButton = ({ app }: { app: AstalApps.Application }) => {
@@ -29,42 +32,29 @@ const AppButton = ({ app }: { app: AstalApps.Application }) => {
 };
 
 const AppList = () => {
-  const appList = text((text) => apps.fuzzy_query(text));
+  const appList = searchText((text) => apps.fuzzy_query(text));
 
   return (
     <Gtk.ScrolledWindow vexpand heightRequest={500} widthRequest={300}>
-      <box vertical spacing={6} cssClasses={["list"]}>
+      <box
-        {appList.as((list) => list.map((app) => <AppButton app={app} />))}
+        spacing={6}
+        orientation={Gtk.Orientation.VERTICAL}
+        cssClasses={["list"]}
+      >
+        <For each={appList}>{(app) => <AppButton app={app} />}</For>
       </box>
     </Gtk.ScrolledWindow>
   );
 };
 
 const AppSearch = () => {
-  const onEnter = () => {
-    apps.fuzzy_query(text.get())?.[0].launch();
-    hide();
-  };
   return (
     <entry
+      $={(ref) => (searchEntry = ref)}
       cssClasses={["search"]}
-      vexpand
+      text={searchText}
-      text={text.get()}
       placeholderText="Search..."
-      onChanged={(self) => text.set(self.text)}
+      onNotifyText={({ text }) => setSearchText(text)}
-      onActivate={onEnter}
-      setup={(self) => {
-        hook(self, App, "window-toggled", (_, win) => {
-          const winName = win.name;
-          const visible = win.visible;
-
-          if (winName == WINDOW_NAME && visible) {
-            text.set("");
-            self.set_text("");
-            self.grab_focus();
-          }
-        });
-      }}
     />
   );
 };
@@ -75,16 +65,17 @@ export const AppLauncher = (gdkmonitor: Gdk.Monitor) => {
       name={WINDOW_NAME}
       cssClasses={["app-launcher"]}
       gdkmonitor={gdkmonitor}
+      application={app}
       exclusivity={Astal.Exclusivity.EXCLUSIVE}
-      application={App}
       keymode={Astal.Keymode.ON_DEMAND}
-      onKeyPressed={(_, keyval) => {
+      onNotifyVisible={({ visible }) => {
-        if (keyval === Gdk.KEY_Escape) {
+        if (visible) searchEntry.grab_focus();
-          App.toggle_window(WINDOW_NAME);
+        else searchEntry.set_text("");
-        }
       }}
     >
-      <box vertical spacing={6}>
+      <Gtk.EventControllerKey onKeyPressed={onKey} />
+
+      <box orientation={Gtk.Orientation.VERTICAL} spacing={6}>
         <AppSearch />
         <Gtk.Separator orientation={Gtk.Orientation.HORIZONTAL} />
         <AppList />
@@ -92,3 +83,15 @@ export const AppLauncher = (gdkmonitor: Gdk.Monitor) => {
     </window>
   );
 };
+
+const onKey = (
+  _e: Gtk.EventControllerKey,
+  keyval: number,
+  _: number,
+  mod: number,
+) => {
+  if (keyval === Gdk.KEY_Escape) {
+    app.toggle_window(WINDOW_NAME);
+    return;
+  }
+};

widgets/bar/battery.tsx

@@ -1,14 +1,15 @@
-import { bind, Variable } from "astal";
+import { createBinding, createComputed } from "ags";
 import AstalBattery from "gi://AstalBattery";
 
 export const Battery = () => {
   const battery = AstalBattery.get_default();
-  const chargingIcon = Variable.derive(
+
-    [
+  const percentage = createBinding(battery, "percentage");
-      bind(battery, "percentage"),
+  const charging = createBinding(battery, "charging");
-      bind(battery, "charging"),
+  const state = createBinding(battery, "state");
-      bind(battery, "state"),
+
-    ],
+  const chargingIcon = createComputed(
+    [percentage, charging, state],
     (percentage, charging, state) => {
       const batFull = state === AstalBattery.State.FULLY_CHARGED;
       const p = percentage * 100;
@@ -21,11 +22,13 @@ export const Battery = () => {
   );
 
   return (
-    <box cssClasses={["pill"]} visible={bind(battery, "isPresent")} spacing={5}>
+    <box
-      <image iconName={chargingIcon()} onDestroy={() => chargingIcon.drop()} />
+      cssClasses={["pill"]}
-      <label
+      visible={createBinding(battery, "isPresent")}
-        label={bind(battery, "percentage").as((p) => `${Math.floor(p * 100)}%`)}
+      spacing={5}
-      />
+    >
+      <image iconName={chargingIcon} />
+      <label label={percentage((p) => `${Math.floor(p * 100)}%`)} />
     </box>
   );
 };

widgets/bar/cpu.tsx

@@ -1,7 +1,7 @@
-import { bind, Variable } from "astal";
+import { createPoll } from "ags/time";
 
 export const CPU = () => {
-  const cpu = Variable("").poll(5000, [
+  const cpu = createPoll("", 5000, [
     "bash",
     "-c",
     "cat /sys/class/thermal/thermal_zone*/temp",
@@ -10,7 +10,7 @@ export const CPU = () => {
   return (
     <box cssClasses={["pill"]} spacing={5}>
       <image iconName="fa-cpu-symbolic" />
-      <label label={bind(cpu).as((val) => `${parseInt(val) / 1000} °C`)} />
+      <label label={cpu((val) => `${parseInt(val) / 1000} °C`)} />
     </box>
   );
 };

widgets/bar/gpu.tsx

@@ -1,12 +1,12 @@
-import { bind, Variable } from "astal";
+import { createPoll } from "ags/time";
 
 export const GPU = () => {
-  const gpu = Variable("").poll(5000, ["bash", "-c", "supergfxctl -g"]);
+  const gpu = createPoll("", 5000, ["bash", "-c", "supergfxctl -g"]);
 
   return (
     <box cssClasses={["pill"]} spacing={5}>
       <image iconName="fa-video-card-symbolic" />
-      <label label={bind(gpu).as((val) => val)} />
+      <label label={gpu((val) => val)} />
     </box>
   );
 };

widgets/bar/index.tsx

@@ -1,14 +1,15 @@
-import { App, Astal, Gdk } from "astal/gtk4";
+import { Astal, Gdk } from "ags/gtk4";
-import { FocusedClient, WorkspaceButton } from "./workspace";
+import app from "ags/gtk4/app";
 import { Battery } from "./battery";
-import { Tailscale } from "./tailscale";
+import { CPU } from "./cpu";
-import { Time } from "./time";
+import { GPU } from "./gpu";
+import { Launcher } from "./launcher";
 import { Network } from "./network";
 import { Profile } from "./profile";
-import { GPU } from "./gpu";
+import { Tailscale } from "./tailscale";
-import { CPU } from "./cpu";
+import { Time } from "./time";
-import { Launcher } from "./launcher";
 import { Tray } from "./tray";
+import { FocusedClient, WorkspaceButton } from "./workspace";
 
 export const WINDOW_NAME = "bar";
 
@@ -23,33 +24,19 @@ export const Bar = (gdkmonitor: Gdk.Monitor) => {
       gdkmonitor={gdkmonitor}
       exclusivity={Astal.Exclusivity.EXCLUSIVE}
       anchor={TOP | LEFT | RIGHT}
-      application={App}
+      application={app}
     >
       <centerbox>
-        <Start />
+        <box spacing={10} $type="start">
-        <Center />
-        <End />
-      </centerbox>
-    </window>
-  );
-};
-
-const Start = () => {
-  return (
-    <box spacing={10}>
           <Launcher />
           <WorkspaceButton />
         </box>
-  );
-};
 
-const Center = () => {
+        <box spacing={10} $type="center">
-  return <FocusedClient />;
+          <FocusedClient />
-};
+        </box>
 
-const End = () => {
+        <box spacing={10} $type="end">
-  return (
-    <box spacing={10}>
           <Network />
           <CPU />
           <GPU />
@@ -59,5 +46,7 @@ const End = () => {
           <Tray />
           <Time />
         </box>
+      </centerbox>
+    </window>
   );
 };

widgets/bar/launcher.tsx

@@ -1,12 +1,12 @@
-import { App } from "astal/gtk4";
+import { Gdk } from "ags/gtk4";
+import app from "ags/gtk4/app";
 import { WINDOW_NAME } from "../app-launcher";
-import { Gdk } from "astal/gtk4";
 
 export const Launcher = () => {
   return (
     <button
       cssClasses={["pill", "launcher"]}
-      onClicked={() => App.toggle_window(WINDOW_NAME)}
+      onClicked={() => app.toggle_window(WINDOW_NAME)}
       cursor={Gdk.Cursor.new_from_name("pointer", null)}
     >
       <image iconName="nix-symbolic" />

widgets/bar/network.tsx

@@ -1,21 +1,14 @@
-import { bind } from "astal";
 import AstalNetwork from "gi://AstalNetwork";
 
 export const Network = () => {
   const network = AstalNetwork.get_default();
-  const wifi = bind(network, "wifi");
 
   return (
-    <box cssClasses={["pill"]} visible={wifi.as(Boolean)}>
+    <box cssClasses={["pill"]}>
-      {wifi.as(
-        (wifi) =>
-          wifi && (
       <box spacing={5}>
         <image iconName="fa-wifi-symbolic" />
-              <label label={bind(wifi, "ssid")} />
+        <label label={network.wifi.ssid} />
       </box>
-          ),
-      )}
     </box>
   );
 };

widgets/bar/profile.tsx

@@ -1,13 +1,13 @@
-import { bind, Variable } from "astal";
+import { createPoll } from "ags/time";
 
 export const Profile = () => {
-  const profile = Variable("").poll(5000, ["bash", "-c", "asusctl profile -p"]);
+  const profile = createPoll("", 5000, ["bash", "-c", "asusctl profile -p"]);
 
   return (
     <box cssClasses={["pill"]} spacing={5}>
       <image iconName="fa-speed-symbolic" />
       <label
-        label={bind(profile).as((val) => {
+        label={profile((val) => {
           const data = val.split(" ");
           return data[data.length - 1];
         })}

widgets/bar/tailscale.tsx

@@ -1,7 +1,7 @@
-import { bind, Variable } from "astal";
+import { createPoll } from "ags/time";
 
 export const Tailscale = () => {
-  const tailscale = Variable("").poll(5000, [
+  const tailscale = createPoll("", 5000, [
     "bash",
     "-c",
     "tailscale ping homelab",
@@ -10,8 +10,9 @@ export const Tailscale = () => {
   return (
     <box cssClasses={["pill"]} spacing={5}>
       <image iconName="fa-home-symbolic" />
+
       <label
-        label={bind(tailscale).as((val) => {
+        label={tailscale((val) => {
           const data = val.split(" ");
           return data[data.length - 1];
         })}

widgets/bar/time.tsx

@@ -1,12 +1,12 @@
-import { GLib, Variable } from "astal";
+import { createPoll } from "ags/time";
+import GLib from "gi://GLib";
 
 export const Time = () => {
-  const time = Variable("").poll(
+  const time = createPoll(
+    "",
     1000,
     () => GLib.DateTime.new_now_local().format("%a %b %d - %I:%M:%S %p")!,
   );
 
-  return (
+  return <label cssClasses={["pill"]} label={time} />;
-    <label cssClasses={["pill"]} onDestroy={() => time.drop()} label={time()} />
-  );
 };

widgets/bar/tray.tsx

@@ -1,14 +1,13 @@
-import { bind } from "astal";
+import { createBinding, For } from "ags";
 import AstalTray from "gi://AstalTray";
 
-const tray = AstalTray.get_default();
-
 export const Tray = () => {
+  const tray = AstalTray.get_default();
+  const items = createBinding(tray, "items");
+
   return (
     <box cssClasses={["pill", "tray"]}>
-      {bind(tray, "items").as((items) =>
+      <For each={items}>{(item) => <Item item={item} />}</For>
-        items.map((item) => <Item item={item} />),
-      )}
     </box>
   );
 };
@@ -16,7 +15,7 @@ export const Tray = () => {
 const Item = ({ item }: { item: AstalTray.TrayItem }) => {
   return (
     <menubutton>
-      <image gicon={bind(item, "gicon")} />
+      <image gicon={createBinding(item, "gicon")} />
     </menubutton>
   );
 };

widgets/bar/workspace.tsx

@@ -1,17 +1,16 @@
-import { Variable, bind } from "astal";
+import { createBinding, createComputed } from "ags";
-import { Gdk, Gtk } from "astal/gtk4";
+import { Gdk, Gtk } from "ags/gtk4";
-import { ButtonProps } from "astal/gtk4/widget";
 import AstalHyprland from "gi://AstalHyprland";
 
-type WsButtonProps = ButtonProps & {
+type WsButtonProps = {
   ws: AstalHyprland.Workspace;
 };
 
-const Workspace = ({ ws, ...props }: WsButtonProps) => {
+const Workspace = ({ ws }: WsButtonProps) => {
   const hyprland = AstalHyprland.get_default();
-  const classNames = Variable.derive(
+  const focusedWorkspace = createBinding(hyprland, "focusedWorkspace");
-    [bind(hyprland, "focusedWorkspace"), bind(hyprland, "clients")],
+
-    (fws, _) => {
+  const classNames = createComputed([focusedWorkspace], (fws) => {
     const classes = ["workspace-button"];
 
     const active = fws.id == ws.id;
@@ -20,18 +19,15 @@ const Workspace = ({ ws, ...props }: WsButtonProps) => {
     const occupied = hyprland.get_workspace(ws.id)?.get_clients().length > 0;
     occupied && classes.push("occupied");
     return classes;
-    },
+  });
-  );
 
   return (
     <button
-      cssClasses={classNames()}
+      cssClasses={classNames}
-      onDestroy={() => classNames.drop()}
       valign={Gtk.Align.CENTER}
       halign={Gtk.Align.CENTER}
       onClicked={() => ws.focus()}
       cursor={Gdk.Cursor.new_from_name("pointer", null)}
-      {...props}
     />
   );
 };
@@ -49,14 +45,11 @@ export const WorkspaceButton = () => {
 
 export const FocusedClient = () => {
   const hyprland = AstalHyprland.get_default();
-  const focused = bind(hyprland, "focusedClient");
+  const focused = createBinding(hyprland, "focusedClient");
 
   return (
     <box cssClasses={["focused-client"]} visible={focused.as(Boolean)}>
-      {focused.as(
+      <label label={focused((client) => client.title)} />
-        (client) =>
-          client && <label label={bind(client, "initialTitle").as(String)} />,
-      )}
     </box>
   );
 };

widgets/common/index.ts

@@ -1 +0,0 @@
-export * from "./picture";

widgets/common/picture.tsx

@@ -1,11 +0,0 @@
-import { ConstructProps } from "astal/gtk4";
-import { astalify, Gtk } from "astal/gtk4";
-
-export type PictureProps = ConstructProps<
-  Gtk.Picture,
-  Gtk.Picture.ConstructorProps
->;
-
-export const Picture = astalify<Gtk.Picture, Gtk.Picture.ConstructorProps>(
-  Gtk.Picture,
-);

widgets/notifications/icon.tsx

@@ -1,21 +0,0 @@
-import { Gtk } from "astal/gtk4";
-import Notifd from "gi://AstalNotifd";
-import { fileExists, isIcon } from "./notifd";
-
-export const Icon = (notification: Notifd.Notification) => {
-  const icon =
-    notification.image || notification.appIcon || notification.desktopEntry;
-  if (!icon) return null;
-  if (fileExists(icon))
-    return (
-      <box hexpand={false} vexpand={false} valign={Gtk.Align.CENTER}>
-        <image file={icon} />
-      </box>
-    );
-  else if (isIcon(icon))
-    return (
-      <box hexpand={false} vexpand={false} valign={Gtk.Align.CENTER}>
-        <image iconName={icon} />
-      </box>
-    );
-};

widgets/notifications/index.tsx

@@ -1,28 +1,49 @@
-import { Astal, Gdk } from "astal/gtk4";
+import { For, createState, onCleanup } from "ags";
-import Notifd from "gi://AstalNotifd";
+import { Astal, Gdk, Gtk } from "ags/gtk4";
-import { bind } from "astal";
+import AstalNotifd from "gi://AstalNotifd";
-import { NotificationWidget } from "./notification";
+import { Notification } from "./notification";
 
 export const WINDOW_NAME = "notifications";
 
 export const Notifications = (gdkmonitor: Gdk.Monitor) => {
-  const notifd = Notifd.get_default();
+  const notifd = AstalNotifd.get_default();
+
   const { TOP, RIGHT } = Astal.WindowAnchor;
 
+  const [notifications, setNotifications] = createState(
+    new Array<AstalNotifd.Notification>(),
+  );
+
+  const notifiedHandler = notifd.connect("notified", (_, id, replaced) => {
+    const notification = notifd.get_notification(id);
+
+    if (replaced && notifications.get().some((n) => n.id === id)) {
+      setNotifications((ns) => ns.map((n) => (n.id === id ? notification : n)));
+    } else {
+      setNotifications((ns) => [notification, ...ns]);
+    }
+  });
+
+  const resolvedHandler = notifd.connect("resolved", (_, id) => {
+    setNotifications((ns) => ns.filter((n) => n.id !== id));
+  });
+
+  onCleanup(() => {
+    notifd.disconnect(notifiedHandler);
+    notifd.disconnect(resolvedHandler);
+  });
+
   return (
     <window
+      $={(self) => onCleanup(() => self.destroy())}
       name={WINDOW_NAME}
       cssClasses={["notifications"]}
       gdkmonitor={gdkmonitor}
+      visible={notifications((ns) => ns.length > 0)}
       anchor={TOP | RIGHT}
-      visible={bind(notifd, "notifications").as(
-        (notifications) => notifications.length > 0,
-      )}
     >
-      <box vertical={true} spacing={10}>
+      <box orientation={Gtk.Orientation.VERTICAL}>
-        {bind(notifd, "notifications").as((notifications) =>
+        <For each={notifications}>{(n) => <Notification n={n} />}</For>
-          notifications.map((n) => <NotificationWidget n={n} />),
-        )}
       </box>
     </window>
   );

widgets/notifications/notifd.ts

@@ -1,79 +0,0 @@
-import Notifd from "gi://AstalNotifd";
-import { GLib } from "astal";
-import { Gtk, Gdk } from "astal/gtk4";
-
-type TimeoutManager = {
-  setupTimeout: () => void;
-  clearTimeout: () => void;
-  handleHover: () => void;
-  handleHoverLost: () => void;
-  cleanup: () => void;
-};
-
-export const createTimeoutManager = (
-  dismissCallback: () => void,
-  timeoutDelay: number,
-): TimeoutManager => {
-  let isHovered = false;
-  let timeoutId: number | null = null;
-
-  const clearTimeout = () => {
-    if (timeoutId !== null) {
-      GLib.source_remove(timeoutId);
-      timeoutId = null;
-    }
-  };
-
-  const setupTimeout = () => {
-    clearTimeout();
-
-    if (!isHovered) {
-      timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, timeoutDelay, () => {
-        clearTimeout();
-        dismissCallback();
-        return GLib.SOURCE_REMOVE;
-      });
-    }
-  };
-
-  return {
-    setupTimeout,
-    clearTimeout,
-    handleHover: () => {
-      isHovered = true;
-      clearTimeout();
-    },
-    handleHoverLost: () => {
-      isHovered = false;
-      setupTimeout();
-    },
-    cleanup: clearTimeout,
-  };
-};
-
-export const time = (time: number, format = "%H:%M") =>
-  GLib.DateTime.new_from_unix_local(time).format(format)!;
-
-export const urgency = (notification: Notifd.Notification) => {
-  const { LOW, NORMAL, CRITICAL } = Notifd.Urgency;
-
-  switch (notification.urgency) {
-    case LOW:
-      return "low";
-    case CRITICAL:
-      return "critical";
-    case NORMAL:
-    default:
-      return "normal";
-  }
-};
-
-export const isIcon = (icon: string) => {
-  const display = Gdk.Display.get_default();
-  if (!display) return false;
-  const iconTheme = Gtk.IconTheme.get_for_display(display);
-  return iconTheme.has_icon(icon);
-};
-
-export const fileExists = (path: string) =>
-  GLib.file_test(path, GLib.FileTest.EXISTS);

widgets/notifications/notification.tsx

@@ -1,53 +1,112 @@
-import { bind } from "astal";
+import { Gdk, Gtk } from "ags/gtk4";
-import { Gtk } from "astal/gtk4";
+import Adw from "gi://Adw";
-import Notifd from "gi://AstalNotifd";
+import AstalNotifd from "gi://AstalNotifd";
-import { urgency, createTimeoutManager } from "./notifd";
+import GLib from "gi://GLib";
+import Pango from "gi://Pango";
 
-export const NotificationWidget = ({ n }: { n: Notifd.Notification }) => {
+const isIcon = (icon?: string | null) => {
-  const { START, CENTER } = Gtk.Align;
+  const iconTheme = Gtk.IconTheme.get_for_display(Gdk.Display.get_default()!);
-  const actions = n.actions || [];
+  return icon && iconTheme.has_icon(icon);
-  const TIMEOUT_DELAY = 3000;
+};
 
-  // Keep track of notification validity
+const fileExists = (path: string) => {
-  const timeoutManager = createTimeoutManager(() => n.dismiss(), TIMEOUT_DELAY);
+  return GLib.file_test(path, GLib.FileTest.EXISTS);
+};
 
+const time = (time: number, format = "%H:%M") => {
+  return GLib.DateTime.new_from_unix_local(time).format(format)!;
+};
+
+const urgency = (n: AstalNotifd.Notification) => {
+  const { LOW, NORMAL, CRITICAL } = AstalNotifd.Urgency;
+  switch (n.urgency) {
+    case LOW:
+      return "low";
+    case CRITICAL:
+      return "critical";
+    case NORMAL:
+    default:
+      return "normal";
+  }
+};
+
+export const Notification = ({ n }: { n: AstalNotifd.Notification }) => {
   return (
+    <Adw.Clamp maximumSize={400}>
       <box
-      setup={(self) => {
+        widthRequest={400}
-        // Set up timeout
+        class={`notification ${urgency(n)}`}
-        timeoutManager.setupTimeout();
+        orientation={Gtk.Orientation.VERTICAL}
-
-        self.connect("unrealize", () => {
-          timeoutManager.cleanup();
-        });
-      }}
-      cssClasses={["notification", `${urgency(n)}`]}
-      name={n.id.toString()}
-      spacing={10}
       >
-      <box vertical cssClasses={["text"]} spacing={10}>
+        <box class="header">
+          {(n.appIcon || isIcon(n.desktopEntry)) && (
+            <image
+              class="app-icon"
+              visible={Boolean(n.appIcon || n.desktopEntry)}
+              iconName={n.appIcon || n.desktopEntry}
+            />
+          )}
           <label
-          cssClasses={["title"]}
+            class="app-name"
-          label={bind(n, "summary")}
+            halign={Gtk.Align.START}
-          halign={START}
+            ellipsize={Pango.EllipsizeMode.END}
+            label={n.appName || "Unknown"}
+          />
+          <label
+            class="time"
+            hexpand
+            halign={Gtk.Align.END}
+            label={time(n.time)}
+          />
+          <button onClicked={() => n.dismiss()}>
+            <image iconName="window-close-symbolic" />
+          </button>
+        </box>
+        <Gtk.Separator visible />
+        <box class="content">
+          {n.image && fileExists(n.image) && (
+            <image valign={Gtk.Align.START} class="image" file={n.image} />
+          )}
+          {n.image && isIcon(n.image) && (
+            <box valign={Gtk.Align.START} class="icon-image">
+              <image
+                iconName={n.image}
+                halign={Gtk.Align.CENTER}
+                valign={Gtk.Align.CENTER}
+              />
+            </box>
+          )}
+          <box orientation={Gtk.Orientation.VERTICAL}>
+            <label
+              class="summary"
+              halign={Gtk.Align.START}
+              xalign={0}
+              label={n.summary}
+              ellipsize={Pango.EllipsizeMode.END}
             />
             {n.body && (
-          <label cssClasses={["body"]} label={bind(n, "body")} halign={START} />
+              <label
+                class="body"
+                wrap
+                useMarkup
+                halign={Gtk.Align.START}
+                xalign={0}
+                justify={Gtk.Justification.FILL}
+                label={n.body}
+              />
             )}
           </box>
-      {actions.length > 0 && (
+        </box>
-        <box cssClasses={["actions"]}>
+        {n.actions.length > 0 && (
-          {actions.map(({ label, id }) => (
+          <box class="actions">
-            <button
+            {n.actions.map(({ label, id }) => (
-              hexpand
+              <button hexpand onClicked={() => n.invoke(id)}>
-              cssClasses={["action-button"]}
+                <label label={label} halign={Gtk.Align.CENTER} hexpand />
-              onClicked={() => n.invoke(id)}
-            >
-              <label label={label} halign={CENTER} hexpand />
               </button>
             ))}
           </box>
         )}
       </box>
+    </Adw.Clamp>
   );
 };