✨ chore: migrate widgets to ags v3 and gtk4

2025-07-06 19:56:44 -03:00
parent 9db1d6fc12
commit b90a799a89
16 changed files with 650 additions and 711 deletions
@@ -1,78 +0,0 @@
-import { Binding, register } from "astal";
-import { Gtk, Widget } from "astal/gtk3";
-
-export { ResultWidget, ResultWidgetProps };
-
-type ResultWidgetProps = {
-    icon?: string | Binding<string> | Gtk.Widget | Binding<Gtk.Widget>;
-    title: string | Binding<string | undefined>;
-    description?: string | Binding<string | undefined>;
-    closeOnClick?: boolean;
-    setup?: () => void;
-    onClick?: () => void;
-};
-
-@register({ GTypeName: "ResultWidget" })
-class ResultWidget extends Widget.Box {
-
-    public readonly onClick: (() => void);
-    public readonly setup: ((() => void)|undefined);
-    public icon: (string | Binding<string> | Gtk.Widget | Binding<Gtk.Widget> | undefined);
-    public closeOnClick: boolean = true;
-
-
-    constructor(props: ResultWidgetProps) {
-        super({
-            className: "result",
-            hexpand: true
-        });
-
-        this.icon = props.icon;
-        this.setup = props.setup;
-        this.closeOnClick = props.closeOnClick ?? true;
-        this.onClick = () => props.onClick?.();
-
-        if(this.icon !== undefined) {
-            if(this.icon instanceof Binding) {
-                if(typeof this.icon.get() === "string") {
-                    this.add(new Widget.Icon({
-                        icon: this.icon as Binding<string>
-                    } as Widget.IconProps));
-                } else {
-                    this.add(new Widget.Box({
-                        child: this.icon as Binding<Gtk.Widget>
-                    } as Widget.BoxProps));
-                }
-            } else {
-                if(typeof this.icon === "string") {
-                    this.add(new Widget.Icon({
-                        icon: this.icon as string
-                    } as Widget.IconProps));
-                } else 
-                    this.add(this.icon as Gtk.Widget);
-            }
-        }
-
-        this.add(new Widget.Box({
-            orientation: Gtk.Orientation.VERTICAL,
-            valign: Gtk.Align.CENTER,
-            children: [
-                new Widget.Label({
-                    className: "title",
-                    xalign: 0,
-                    truncate: true,
-                    label: props.title
-                } as Widget.LabelProps),
-                new Widget.Label({
-                    className: "description",
-                    visible: (props.description instanceof Binding) ? 
-                        props.description.as(Boolean)
-                    : Boolean(props.description),
-                    truncate: true,
-                    xalign: 0,
-                    label: props.description || ""
-                } as Widget.LabelProps)
-            ]
-        } as Widget.BoxProps));
-    }
-}
@@ -0,0 +1,67 @@
+import { Accessor, With } from "ags";
+import { register } from "ags/gobject";
+import { Gtk } from "ags/gtk4";
+import Pango from "gi://Pango?version=1.0";
+import { variableToBoolean } from "../../scripts/utils";
+
+export { ResultWidget, ResultWidgetProps };
+
+type ResultWidgetProps = {
+    icon?: string | Accessor<string> | JSX.Element | Accessor<JSX.Element>;
+    title: string | Accessor<string>;
+    description?: string | Accessor<string>;
+    closeOnClick?: boolean;
+    setup?: () => void;
+    onClick?: () => void;
+};
+
+@register({ GTypeName: "ResultWidget" })
+class ResultWidget extends Gtk.Box {
+
+    public readonly onClick: () => void;
+    public readonly setup?: () => void;
+    public icon?: (string | Accessor<string> | JSX.Element | Accessor<JSX.Element>);
+    public closeOnClick: boolean = true;
+
+
+    constructor(props: ResultWidgetProps) {
+        super({
+            cssClasses: ["result"],
+            hexpand: true
+        });
+
+        this.icon = props.icon;
+        this.setup = props.setup;
+        this.closeOnClick = props.closeOnClick ?? true;
+        this.onClick = () => props.onClick?.();
+
+        if(this.icon !== undefined) {
+            if(this.icon instanceof Accessor) {
+                if(typeof this.icon.get() === "string") {
+                    this.prepend(<Gtk.Image iconName={
+                        this.icon as Accessor<string>
+                    } /> as Gtk.Image);
+                } else {
+                    this.prepend(<Gtk.Box>
+                        <With value={this.icon as Accessor<Gtk.Widget>}>
+                            {(widget) => widget}
+                        </With>
+                    </Gtk.Box> as Gtk.Box);
+                }
+            } else {
+                if(typeof this.icon === "string") 
+                    this.prepend(<Gtk.Image iconName={this.icon as string} /> as Gtk.Image);
+                else 
+                    this.prepend(this.icon as Gtk.Widget);
+            }
+        }
+
+        this.append(<Gtk.Box orientation={Gtk.Orientation.VERTICAL} valign={Gtk.Align.CENTER}>
+            <Gtk.Label class={"title"} xalign={0} ellipsize={Pango.EllipsizeMode.END}
+              label={props.title} />
+
+            <Gtk.Label class={"description"} visible={variableToBoolean(props.description)}
+              ellipsize={Pango.EllipsizeMode.END} xalign={0} label={props.description ?? ""} />
+        </Gtk.Box> as Gtk.Box);
+    }
+}