feat(ags4): migrate lib and misc widgets

modules/ags/gtk4/widget/misc/popup-window.ts

@@ -0,0 +1,111 @@
+import { App, Astal, Gtk } from 'astal/gtk4';
+import { property, register } from 'astal/gobject';
+import { Binding, idle } from 'astal';
+
+import { WindowClass, WindowProps } from '../subclasses';
+import { get_hyprland_monitor, hyprMessage } from '../../lib';
+
+/* Types */
+type CloseType = 'none' | 'stay' | 'released' | 'clicked';
+type HyprTransition = 'slide' | 'slide top' | 'slide bottom' | 'slide left' |
+    'slide right' | 'popin' | 'fade';
+type PopupCallback = (self?: WindowClass) => void;
+
+export type PopupWindowProps = WindowProps & {
+    transition?: HyprTransition | Binding<HyprTransition>
+    close_on_unfocus?: CloseType | Binding<CloseType>
+    on_open?: PopupCallback
+    on_close?: PopupCallback
+};
+
+
+@register()
+export class PopupWindow extends WindowClass {
+    @property(String)
+    declare transition: HyprTransition | Binding<HyprTransition>;
+
+    @property(String)
+    declare close_on_unfocus: CloseType | Binding<CloseType>;
+
+    on_open: PopupCallback;
+    on_close: PopupCallback;
+
+    constructor({
+        transition = 'slide top',
+        close_on_unfocus = 'released',
+        on_open = () => { /**/ },
+        on_close = () => { /**/ },
+
+        name,
+        visible = false,
+        layer = Astal.Layer.OVERLAY,
+        ...rest
+    }: PopupWindowProps) {
+        super({
+            ...rest,
+            name: `win-${name}`,
+            namespace: `win-${name}`,
+            visible: false,
+            layer,
+            setup: () => idle(() => {
+                // Add way to make window open on startup
+                if (visible) {
+                    this.visible = true;
+                }
+            }),
+        } as WindowProps);
+
+        App.add_window(this);
+
+        const setTransition = (_: PopupWindow, t: HyprTransition | Binding<HyprTransition>) => {
+            hyprMessage(`keyword layerrule animation ${t}, ${this.name}`).catch(console.log);
+        };
+
+        this.connect('notify::transition', setTransition);
+
+        this.close_on_unfocus = close_on_unfocus;
+        this.transition = transition;
+        this.on_open = on_open;
+        this.on_close = on_close;
+
+        this.connect('notify::visible', () => {
+            // Make sure we have the right animation
+            setTransition(this, this.transition);
+
+            if (this.visible) {
+                this.on_open(this);
+            }
+            else {
+                this.on_close(this);
+            }
+        });
+    };
+
+    async set_x_pos(
+        alloc: Gtk.Allocation,
+        side = 'right' as 'left' | 'right',
+    ) {
+        const monitor = this.gdkmonitor ?? this.get_current_monitor();
+
+        const transform = get_hyprland_monitor(monitor)?.get_transform();
+
+        let width: number;
+
+        if (transform && (transform === 1 || transform === 3)) {
+            width = monitor.get_geometry().height;
+        }
+        else {
+            width = monitor.get_geometry().width;
+        }
+
+        this.margin_right = side === 'right' ?
+            (width - alloc.x - alloc.width) :
+            this.margin_right;
+
+        this.margin_left = side === 'right' ?
+            this.margin_left :
+            (alloc.x - alloc.width);
+    }
+}
+
+export default PopupWindow;

modules/ags/gtk4/widget/misc/separator.ts

@@ -0,0 +1,12 @@
+import { Box, BoxProps } from '../subclasses';
+
+
+export default ({
+    size,
+    vertical = false,
+    css = '',
+    ...rest
+}: { size: number } & BoxProps) => Box({
+    css: `* { ${vertical ? 'min-height' : 'min-width'}: ${size}px; ${css} }`,
+    ...rest,
+} as BoxProps);