Working on porting to new ags version

2025-07-09 16:09:53 +02:00 · 2025-07-09 16:09:53 +02:00 · eaba3a8978
parent 586c1e5d87
commit eaba3a8978
7 changed files with 161 additions and 151 deletions
--- a/home/ags/files/Bar.tsx
+++ b/home/ags/files/Bar.tsx
@ -1,7 +1,9 @@
-import { App, Astal, Gdk, Gtk, Widget } from "astal/gtk3";
-import { GLib, Variable, bind } from "astal";
+import { Astal, Gdk } from "ags/gtk4";
+import app from "ags/gtk4/app"
+import Gtk from "gi://Gtk?version=4.0"
+import { createBinding, createState } from "ags"
 import Tray from "gi://AstalTray";
-import { execAsync } from "astal/process"
+import { execAsync } from "ags/process"
 import Hyprland from "gi://AstalHyprland";
 import { getIconName } from "./utils";
 import Wp from "gi://AstalWp"
@ -15,17 +17,17 @@ function SysTray(): JSX.Element {
    const tray = Tray.get_default();
    return (
        <box>
-            {bind(tray, "items").as((items) =>
+            {createBinding(tray, "items").as((items) =>
                items.map((item) => {
-                    if (item.iconThemePath) App.add_icons(item.iconThemePath);
+                    if (item.iconThemePath) app.add_icons(item.iconThemePath);
                    return (
                        <menubutton
-                            className="systray"
-                            tooltipMarkup={bind(item, "tooltipMarkup")}
+                            class="systray"
+                            tooltipMarkup={createBinding(item, "tooltipMarkup")}
                            usePopover={false}
-                            actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])}
-                            menuModel={bind(item, "menuModel")}>
-                            <icon gicon={bind(item, "gicon")} className="systray-item" />
+                            actionGroup={createBinding(item, "actionGroup").as(ag => ["dbusmenu", ag])}
+                            menuModel={createBinding(item, "menuModel")}>
+                            {/* <icon gicon={createBinding(item, "gicon")} class="systray-item" /> */}
                        </menubutton>
                    );
                }),
@ -34,7 +36,7 @@ function SysTray(): JSX.Element {
    );
 }

-function Left() : JSX.Element {
+function Left(): JSX.Element {
    return (
        <box hexpand halign={Gtk.Align.START}>
            <Clients />
@ -42,7 +44,7 @@ function Left() : JSX.Element {
    );
 }

-function Center() : JSX.Element {
+function Center(): JSX.Element {
    return (
        <box>
            <Workspaces />
@ -51,10 +53,10 @@ function Center() : JSX.Element {
 }

 function Date({ format = "%Y-%m-%d" }): JSX.Element {
-    const time = Variable<string>("").poll(60000, () =>
+    const time = createState<string>("").poll(60000, () =>
        GLib.DateTime.new_now_local().format(format)!)
    return <button
-        className="item"
+        class="item"
        onDestroy={() => time.drop()}
        label={time()}
        onClicked={() => execAsync(['gnome-calendar'])}
@ -62,62 +64,62 @@ function Date({ format = "%Y-%m-%d" }): JSX.Element {
 }

 function Time({ format = "%H:%M:%S" }): JSX.Element {
-    const time = Variable<string>("").poll(1000, () =>
+    const time = createState<string>("").poll(1000, () =>
        GLib.DateTime.new_now_local().format(format)!)
    return <label
-        className="item blue"
+        class="item blue"
        onDestroy={() => time.drop()}
        label={time()}
    />
 }

 function Temp(): JSX.Element {
-    let label = Variable<string>("N/A");
+    let label = createState<string>("N/A");
    if (sensorsAvailable) {
-        label = Variable<string>("").poll(5000, 'sensors', out => {
+        label = createState<string>("").poll(5000, 'sensors', out => {
            const match = out.split('\n').find(line => line.includes('Tctl') || line.includes('Package'))?.match(/[0-9.]*°C/);
            return match ? match[0] : "N/A";
        })
    }
    return <label
-        className="item blue"
+        class="item blue"
        onDestroy={() => label.drop()}
        label={label()}
    />
 }

 function Memory(): JSX.Element {
-    const memory = Variable<string>("").poll(2000, "free", out => {
+    const memory = createState<string>("").poll(2000, "free", out => {
        const line = out.split('\n').find(line => line.includes('Mem:'));
        if (!line) return "N/A";
        const split = line.split(/\s+/).map(Number);
        return (split[2] / 1000000).toFixed(2) + "GB";
    });
    return <label
-        className="item blue"
+        class="item blue"
        onDestroy={() => memory.drop()}
        label={memory()}
    />
 }

 function ClockSpeed(): JSX.Element {
-    const command =  'bash -c "cat /proc/cpuinfo | grep \\"MHz\\" | awk \'{print \\$4}\' | sort -n | tail -1 | awk \'{printf \\"%.2fGHz\\", \\$1/1000}\'"';
-    const speed = Variable<string>("").poll(5000, command)
+    const command = 'bash -c "cat /proc/cpuinfo | grep \\"MHz\\" | awk \'{print \\$4}\' | sort -n | tail -1 | awk \'{printf \\"%.2fGHz\\", \\$1/1000}\'"';
+    const speed = createState<string>("").poll(5000, command)
    return <label
-        className="item"
+        class="item"
        onDestroy={() => speed.drop()}
        label={speed()}
    />
 }

 function CPU(): JSX.Element {
-    const usage = Variable<string>("").poll(2000, "top -b -n 1", out => {
+    const usage = createState<string>("").poll(2000, "top -b -n 1", out => {
        const line = out.split("\n").find(line => line.includes('Cpu(s)'));
        if (!line) return "N/A";
        return line.split(/\s+/)[1].replace(',', '.').toString() + "%";
    });
-    return <box className="item">
-        <icon icon="speedometer" css="margin-right: 0.7em;" />
+    return <box class="item">
+        {/* <icon icon="speedometer" css="margin-right: 0.7em;" /> */}
        <label
            onDestroy={() => usage.drop()}
            label={usage()}
@ -127,9 +129,9 @@ function CPU(): JSX.Element {



-function Right() : JSX.Element {
+function Right(): JSX.Element {
    return (
-        <box className="right" hexpand halign={Gtk.Align.END} spacing={6}>
+        <box class="right" hexpand halign={Gtk.Align.END} spacing={6}>
            <Icons />
            <Volume />
            <CPU />
@ -142,29 +144,29 @@ function Right() : JSX.Element {
    );
 }

-function BatteryIcon(): JSX.Element {
-    if (battery.get_state() == 0) return <box />;
-    return  <button className="battery-item" onClicked={() => execAsync(['gnome-power-statistics'])}>
-        <box>
-            {
-                bind(battery, "percentage").as((percentage) => {
-                    const thresholds = [...Array(11).keys()].map( i => i * 10);
-                    const icon = thresholds.find(threshold => threshold >= percentage * 100)
-                    const charging_name = battery.percentage >= 0.99 ? "charged" : "charging"
-                    return <icon
-                        icon={battery.charging? `battery-level-${icon}-${charging_name}-symbolic` : `battery-level-${icon}-symbolic`}
-                    />
-                })
-            }
-        </box>
-    </button>
-}
+// function BatteryIcon(): JSX.Element {
+//     if (battery.get_state() == 0) return <box />;
+//     return <button class="battery-item" onClicked={() => execAsync(['gnome-power-statistics'])}>
+//         <box>
+//             {
+//                 createBinding(battery, "percentage").as((percentage) => {
+//                     const thresholds = [...Array(11).keys()].map(i => i * 10);
+//                     const icon = thresholds.find(threshold => threshold >= percentage * 100)
+//                     const charging_name = battery.percentage >= 0.99 ? "charged" : "charging"
+//                     return <icon
+//                         icon={battery.charging ? `battery-level-${icon}-${charging_name}-symbolic` : `battery-level-${icon}-symbolic`}
+//                     />
+//                 })
+//             }
+//         </box>
+//     </button>
+// }

 function Icons() {
    return (
-        <box className="item icon-group">
+        <box class="item icon-group">
            <SysTray />
-            <BatteryIcon />
+            {/* <BatteryIcon /> */}
        </box>
    )
 }
@ -173,30 +175,30 @@ function Volume(): JSX.Element {
    if (!wirePlumber) return <box />;

    const audio = wirePlumber.audio;
-    const icon = bind(audio.default_speaker, "volume").as((volume) => {
-            const vol = volume * 100
-            const icon = [
-                [101, 'overamplified'],
-                [67, 'high'],
-                [34, 'medium'],
-                [1, 'low'],
-                [0, 'muted'],
-            ].find(([threshold]) => Number(threshold) <= vol)?.[1]
-            return `audio-volume-${icon}-symbolic`
+    const icon = createBinding(audio.default_speaker, "volume").as((volume) => {
+        const vol = volume * 100
+        const icon = [
+            [101, 'overamplified'],
+            [67, 'high'],
+            [34, 'medium'],
+            [1, 'low'],
+            [0, 'muted'],
+        ].find(([threshold]) => Number(threshold) <= vol)?.[1]
+        return `audio-volume-${icon}-symbolic`
    });
-    const css = bind(audio.default_speaker, "mute").as((mute) => {
-        return mute ? "margin-left:0;": "margin-left: 0.7em;"
+    const css = createBinding(audio.default_speaker, "mute").as((mute) => {
+        return mute ? "margin-left:0;" : "margin-left: 0.7em;"
    });
    return (
-        <button className="item blue" onClicked={() => audio.default_speaker.mute = !audio.default_speaker.mute}>
+        <button class="item blue" onClicked={() => audio.default_speaker.mute = !audio.default_speaker.mute}>
            <box>
-                <icon icon={icon} />
+                {/* <icon icon={icon} /> */}
                {
-                    bind(audio.default_speaker, "volume").as((volume) => <box>
+                    createBinding(audio.default_speaker, "volume").as((volume) => <box>
                        {
-                            bind(audio.default_speaker, "mute").as((mute) => <box>
+                            createBinding(audio.default_speaker, "mute").as((mute) => <box>
                                {
-                                    <label label={mute? "": `${Math.floor(volume * 100)}%`} css={css} />
+                                    <label label={mute ? "" : `${Math.floor(volume * 100)}%`} css={css} />
                                }
                            </box>)
                        }
@ -208,23 +210,23 @@ function Volume(): JSX.Element {
 }


-function Workspaces() : JSX.Element {
+function Workspaces(): JSX.Element {
    const hyprland = Hyprland.get_default();
    return (
-        <box className="workspaces">
-            {bind(hyprland, "workspaces").as((wss) =>
+        <box class="workspaces">
+            {createBinding(hyprland, "workspaces").as((wss) =>
                <box>
-                    {bind(hyprland, "focusedMonitor").as((fm) =>
+                    {createBinding(hyprland, "focusedMonitor").as((fm) =>
                        wss.sort((a, b) => a.id - b.id)
-                        .filter(ws => ws && ws.get_monitor() && ws.get_monitor().get_id() === fm.get_id())
-                        .map((ws) => (
-                            <button
-                                className={bind(hyprland, "focusedWorkspace").as((fw) => ws === fw ? "focused" : "",)}
-                                onClicked={() => ws.focus()}
-                            >
-                                {`${ws.id}`.slice(-1)}
-                            </button>
-                        )))}
+                            .filter(ws => ws && ws.get_monitor() && ws.get_monitor().get_id() === fm.get_id())
+                            .map((ws) => (
+                                <button
+                                    class={createBinding(hyprland, "focusedWorkspace").as((fw) => ws === fw ? "focused" : "",)}
+                                    onClicked={() => ws.focus()}
+                                >
+                                    {`${ws.id}`.slice(-1)}
+                                </button>
+                            )))}
                </box>
            )}
        </box>
@ -235,31 +237,31 @@ function shorten(title: string) {
    return title.length > 40 ? title.slice(0, 20) + "..." : title
 }

-function Clients() : JSX.Element {
+function Clients(): JSX.Element {
    const hyprland = Hyprland.get_default();
    return (
        <box>
            {
-                bind(hyprland, "focusedWorkspace").as(fw => (
-                    <box className="clients">
+                createBinding(hyprland, "focusedWorkspace").as(fw => (
+                    <box class="clients">
                        {
-                            bind(hyprland, "clients").as(cls =>
+                            createBinding(hyprland, "clients").as(cls =>
                                cls
-                                .sort((a, b) => a.pid - b.pid)
-                                .filter(cl => !cl.title.includes("rofi"))
-                                .filter(cl => fw && cl.get_workspace().get_id() === fw.get_id())
-                                .map(cl => (
-                                    <box
-                                        className={bind(hyprland, "focusedClient").as(a => a && a.address === cl.address ? "focused" : "unfocused")}
-                                    >
-                                        <icon
-                                            icon={getIconName(cl)}
-                                            className="app-icon"
-                                        />
-                                        <label label={bind(cl, 'title').as(title => shorten(title))} />
-                                    </box>
-                                )
-                                )
+                                    .sort((a, b) => a.pid - b.pid)
+                                    .filter(cl => !cl.title.includes("rofi"))
+                                    .filter(cl => fw && cl.get_workspace().get_id() === fw.get_id())
+                                    .map(cl => (
+                                        <box
+                                            class={createBinding(hyprland, "focusedClient").as(a => a && a.address === cl.address ? "focused" : "unfocused")}
+                                        >
+                                            {/* <icon */}
+                                            {/*     icon={getIconName(cl)} */}
+                                            {/*     class="app-icon" */}
+                                            {/* /> */}
+                                            <label label={createBinding(cl, 'title').as(title => shorten(title))} />
+                                        </box>
+                                    )
+                                    )
                            )

                        }
@ -271,23 +273,23 @@ function Clients() : JSX.Element {
    );
 }

-export default function Bar(gdkmonitor: Gdk.Monitor, scaleFactor: number = 1): Widget.Window {
-    return new Widget.Window({
+export default function Bar(gdkmonitor: Gdk.Monitor, scaleFactor: number = 1): Gtk.Window {
+    return new Gtk.Window({
        gdkmonitor,
        css: "font-size: " + scaleFactor + "em;",
        exclusivity: Astal.Exclusivity.EXCLUSIVE,
        anchor: Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT,
-        application: App,
-        className: "Bar",
+        application: app,
+        class: "Bar",
        name: "top-bar",
-        setup: self => self.connect("destroy", () => {
+        s: self => self.connect("destroy", () => {
            print("Detroying bar");
-            App.remove_window(self);
+            app.remove_window(self);
        }),
-        child: <centerbox className="window-box">
-                <Left />
-                <Center />
-                <Right />
-            </centerbox>
+        child: <centerbox class="window-box">
+            <Left />
+            <Center />
+            <Right />
+        </centerbox>
    })
 }
--- a/home/ags/files/app.ts
+++ b/home/ags/files/app.ts
@ -1,8 +1,10 @@
-import { App, Gdk, Widget } from "astal/gtk3"
+import app from "ags/gtk4/app"
 import style from "./style.scss"
 import Bar from "./Bar"
 import Hyprland from "gi://AstalHyprland";
 import NotificationPopups from "./notifications/NotificationPopups"
+import Gtk from "gi://Gtk?version=4.0";
+import { Gdk } from "ags/gtk4";

 const hyprland = Hyprland.get_default();

@ -22,21 +24,26 @@ function find_main_monitor(): Hyprland.Monitor {
 }

 function register_windows(monitor: Hyprland.Monitor) {
-    let gtkMonitor = App.get_monitors()[0].get_display().get_monitor_at_point(monitor.get_x(), monitor.get_y())
-    let scale = (monitor.get_width() >= 3000)? 1.2: 1
+    let gtkMonitors = app.get_monitors()[0].get_display().get_monitors()
+    let gtkMonitor = gtkMonitors.get_item(0)
+    if (!gtkMonitor) {
+        console.error("No GTK monitor found for the Hyprland monitor:", monitor.get_name());
+        return;
+    }
+    let scale = (monitor.get_width() >= 3000) ? 1.2 : 1
    Bar(gtkMonitor, scale)
    NotificationPopups(gtkMonitor)
 }

 function switch_to_best_monitor() {
    let mainMonitor = find_main_monitor()
-    for (var wd of App.get_windows()) {
+    for (var wd of app.get_windows()) {
        wd.destroy();
    }
    register_windows(mainMonitor);
 }

-hyprland.connect("monitor-added", (_, monitor) => {
+hyprland.connect("monitor-added", (_, _monitor: Hyprland.Monitor) => {
    switch_to_best_monitor()
 })

@ -44,7 +51,7 @@ hyprland.connect("monitor-removed", () => {
    switch_to_best_monitor()
 })

-App.start({
+app.start({
    css: style,
    iconTheme: "Papirus",
    main() {
--- a/home/ags/files/env.d.ts
+++ b/home/ags/files/env.d.ts
@ -1,21 +1,21 @@
 declare const SRC: string

 declare module "inline:*" {
-    const content: string
-    export default content
+  const content: string
+  export default content
 }

 declare module "*.scss" {
-    const content: string
-    export default content
+  const content: string
+  export default content
 }

 declare module "*.blp" {
-    const content: string
-    export default content
+  const content: string
+  export default content
 }

 declare module "*.css" {
-    const content: string
-    export default content
+  const content: string
+  export default content
 }
--- a/home/ags/files/notifications/Notification.tsx
+++ b/home/ags/files/notifications/Notification.tsx
@ -1,7 +1,7 @@
-import { GLib } from "astal"
-import { Gtk, Astal } from "astal/gtk3"
-import { type EventBox } from "astal/gtk3/widget"
+import { Gtk, Astal } from "ags/gtk4"
+import { EventBox } from "ags"
 import Notifd from "gi://AstalNotifd"
+import GLib from "gi://GLib"

 const isIcon = (icon: string) =>
    !!Astal.Icon.lookup_icon(icon)
@ -35,24 +35,24 @@ export default function Notification(props: Props) {
    const { START, CENTER, END } = Gtk.Align

    return <eventbox
-        className={`Notification ${urgency(n)}`}
+        class={`Notification ${urgency(n)}`}
        setup={setup}
        onHoverLost={onHoverLost}>
        <box vertical>
-            <box className="header">
+            <box class="header">
                {(n.appIcon || n.desktopEntry) && <icon
-                    className="app-icon"
+                    class="app-icon"
                    visible={Boolean(n.appIcon || n.desktopEntry)}
                    icon={n.appIcon || n.desktopEntry}
                />}
                <label
-                    className="app-name"
+                    class="app-name"
                    halign={START}
                    truncate
                    label={n.appName || "Unknown"}
                />
                <label
-                    className="time"
+                    class="time"
                    hexpand
                    halign={END}
                    label={time(n.time)}
@ -62,28 +62,28 @@ export default function Notification(props: Props) {
                </button>
            </box>
            <Gtk.Separator visible />
-            <box className="content">
+            <box class="content">
                {n.image && fileExists(n.image) && <box
                    valign={START}
-                    className="image"
+                    class="image"
                    css={`background-image: url('${n.image}')`}
                />}
                {n.image && isIcon(n.image) && <box
                    expand={false}
                    valign={START}
-                    className="icon-image">
+                    class="icon-image">
                    <icon icon={n.image} expand halign={CENTER} valign={CENTER} />
                </box>}
                <box vertical>
                    <label
-                        className="summary"
+                        class="summary"
                        halign={START}
                        xalign={0}
                        label={n.summary}
                        truncate
                    />
                    {n.body && <label
-                        className="body"
+                        class="body"
                        wrap
                        useMarkup
                        halign={START}
@ -93,7 +93,7 @@ export default function Notification(props: Props) {
                    />}
                </box>
            </box>
-            {n.get_actions().length > 0 && <box className="actions">
+            {n.get_actions().length > 0 && <box class="actions">
                {n.get_actions().map(({ label, id }) => (
                    <button
                        hexpand
--- a/home/ags/files/notifications/NotificationPopups.tsx
+++ b/home/ags/files/notifications/NotificationPopups.tsx
@ -1,8 +1,10 @@
-import { Astal, Gtk, Gdk } from "astal/gtk3"
+import { Astal, Gtk, Gdk } from "ags/gtk4"
 import Notifd from "gi://AstalNotifd"
 import Notification from "./Notification"
 import { type Subscribable } from "astal/binding"
-import { GLib, Variable, bind, timeout } from "astal"
+import { timeout } from "ags/time"
+import { createBinding, createState } from "ags"
+import GLib from "gi://GLib"

 // see comment below in constructor
 const TIMEOUT_DELAY = 5000
@ -16,7 +18,7 @@ class NotifiationMap implements Subscribable {

    // it makes sense to use a Variable under the hood and use its
    // reactivity implementation instead of keeping track of subscribers ourselves
-    private var: Variable<Array<Gtk.Widget>> = Variable([])
+    private var: Array<Gtk.Widget> = createState([])

    // notify subscribers to rerender when state changes
    private notifiy() {
@ -99,7 +101,7 @@ export default function NotificationPopups(gdkmonitor: Gdk.Monitor) {
        exclusivity={Astal.Exclusivity.EXCLUSIVE}
        anchor={TOP | RIGHT}>
        <box vertical>
-            {bind(notifs)}
+            {createBinding(notifs)}
        </box>
    </window>
 }
--- a/home/ags/files/package.json
+++ b/home/ags/files/package.json
@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "ags": "*"
+  }
+}
--- a/home/ags/files/tsconfig.json
+++ b/home/ags/files/tsconfig.json
@ -1,22 +1,16 @@
 {
    "$schema": "https://json.schemastore.org/tsconfig",
    "compilerOptions": {
-        "experimentalDecorators": true,
        "strict": true,
-        "target": "ES2022",
        "module": "ES2022",
+        "target": "ES2020",
+        "lib": [
+            "ES2023"
+        ],
        "moduleResolution": "Bundler",
        // "checkJs": true,
        // "allowJs": true,
        "jsx": "react-jsx",
-        "jsxImportSource": "/nix/store/1pd4fdq90f4vla3zghmfci9axsbvkd3w-astal-gjs/share/astal/gjs/gtk3",
-        "paths": {
-            "astal": [
-                "/nix/store/1pd4fdq90f4vla3zghmfci9axsbvkd3w-astal-gjs/share/astal/gjs"
-            ],
-            "astal/*": [
-                "/nix/store/1pd4fdq90f4vla3zghmfci9axsbvkd3w-astal-gjs/share/astal/gjs/*"
-            ]
-        },
+        "jsxImportSource": "ags/gtk4"
    }
 }