feat: update system

home/desktops/hyprland/ags/js/misc/BatteryIcon.js

@@ -4,15 +4,11 @@ import Battery from "resource:///com/github/Aylur/ags/service/battery.js";
 export default () =>
   Widget.Icon({
     class_name: "battery",
-    binds: [["icon", Battery, "icon-name"]],
-    connections: [
-      [
-        Battery,
-        (icon) => {
-          icon.toggleClassName("charging", Battery.charging);
-          icon.toggleClassName("charged", Battery.charged);
-          icon.toggleClassName("low", Battery.percent < 30);
-        },
-      ],
-    ],
+    icon: Battery.bind("icon_name"),
+    setup: (icon) =>
+      icon.hook(Battery, () => {
+        icon.toggleClassName("charging", Battery.charging);
+        icon.toggleClassName("charged", Battery.charged);
+        icon.toggleClassName("low", Battery.percent < 30);
+      }),
   });

home/desktops/hyprland/ags/js/misc/Clock.js

@@ -1,5 +1,5 @@
+import { clock } from "../variables.js";
 import Widget from "resource:///com/github/Aylur/ags/widget.js";
-import GLib from "gi://GLib";
 
 /**
  * @param {import('types/widgets/label').Props & {
@@ -7,20 +7,11 @@ import GLib from "gi://GLib";
  *   interval?: number,
  * }} o
  */
-export default ({
-  format = "%H:%M:%S %B %e. %A",
-  interval = 1000,
-  ...rest
-} = {}) =>
+export default ({ format = "%H:%M:%S %B %e. %A", ...rest } = {}) =>
   Widget.Label({
     class_name: "clock",
+    label: clock.bind("value").transform((time) => {
+      return time.format(format) || "wrong format";
+    }),
     ...rest,
-    connections: [
-      [
-        interval,
-        (label) =>
-          (label.label =
-            GLib.DateTime.new_now_local().format(format) || "wrong format"),
-      ],
-    ],
   });

home/desktops/hyprland/ags/js/misc/FontIcon.js

@@ -1,49 +1,48 @@
-import Gtk from "gi://Gtk";
-import { createCtor } from "resource:///com/github/Aylur/ags/widget.js";
+import Gtk from "gi://Gtk?version=3.0";
+import { subclass, register } from "resource:///com/github/Aylur/ags/widget.js";
 import AgsLabel from "resource:///com/github/Aylur/ags/widgets/label.js";
-import GObject from "gi://GObject";
 
-export default createCtor(
-  class FontIcon extends AgsLabel {
-    static {
-      GObject.registerClass(this);
-    }
+class FontIcon extends AgsLabel {
+  static {
+    register(this);
+  }
 
-    /** @param {string | import('types/widgets/label').Props & { icon?: string }} params */
-    constructor(params = "") {
-      // @ts-expect-error
-      const { icon = "", ...rest } = params;
+  /** @param {string | import('types/widgets/label').Props<any> & { icon?: string }} params */
+  constructor(params = "") {
+    // @ts-expect-error
+    const { icon = "", ...rest } = params;
 
-      super(typeof params === "string" ? {} : rest);
-      this.toggleClassName("font-icon");
+    super(typeof params === "string" ? {} : rest);
+    this.toggleClassName("font-icon");
 
-      if (typeof params === "object") this.icon = icon;
+    if (typeof params === "object") this.icon = icon;
 
-      if (typeof params === "string") this.icon = params;
-    }
+    if (typeof params === "string") this.icon = params;
+  }
 
-    get icon() {
-      return this.label;
-    }
-    set icon(icon) {
-      this.label = icon;
-    }
+  get icon() {
+    return this.label;
+  }
+  set icon(icon) {
+    this.label = icon;
+  }
 
-    get size() {
-      return this.get_style_context().get_property(
-        "font-size",
-        Gtk.StateFlags.NORMAL,
-      );
-    }
+  get size() {
+    return this.get_style_context().get_property(
+      "font-size",
+      Gtk.StateFlags.NORMAL,
+    );
+  }
 
-    /** @returns {[number, number]} */
-    vfunc_get_preferred_height() {
-      return [this.size, this.size];
-    }
+  /** @returns {[number, number]} */
+  vfunc_get_preferred_height() {
+    return [this.size, this.size];
+  }
 
-    /** @returns {[number, number]} */
-    vfunc_get_preferred_width() {
-      return [this.size, this.size];
-    }
-  },
-);
+  /** @returns {[number, number]} */
+  vfunc_get_preferred_width() {
+    return [this.size, this.size];
+  }
+}
+
+export default subclass(FontIcon);

home/desktops/hyprland/ags/js/misc/HoverRevealer.js

@@ -6,8 +6,8 @@ import * as Utils from "resource:///com/github/Aylur/ags/utils.js";
  *    indicator?: import('types/widgets/box').BoxProps['child']
  *    direction?: 'left' | 'right' | 'down' | 'up'
  *    duration?: number
- *    eventboxConnections?: import('types/widgets/box').BoxProps['connections']
- *    connections?: import('types/widgets/revealer').RevealerProps['connections']
+ *    setupRevealer?: (rev: ReturnType<typeof Widget.Revealer>) => void
+ *    setupEventBox?: (rev: ReturnType<typeof Widget.EventBox>) => void
  * }} HoverRevealProps
  */
 
@@ -19,9 +19,8 @@ export default ({
   child,
   direction = "left",
   duration = 300,
-  connections = [],
-  eventboxConnections = [],
-  binds = [],
+  setupEventBox,
+  setupRevealer,
   ...rest
 }) => {
   let open = false;
@@ -31,15 +30,14 @@ export default ({
 
   const revealer = Widget.Revealer({
     transition: `slide_${direction}`,
-    connections,
-    binds,
+    setup: setupRevealer,
     transition_duration: duration,
     child,
   });
 
   const eventbox = Widget.EventBox({
     ...rest,
-    connections: eventboxConnections,
+    setup: setupEventBox,
     on_hover: () => {
       if (open) return;
 

home/desktops/hyprland/ags/js/misc/PopupWindow.js

@@ -4,23 +4,42 @@ import Widget from "resource:///com/github/Aylur/ags/widget.js";
 import options from "../options.js";
 import GObject from "gi://GObject";
 
-class PopupWindow extends AgsWindow {
+const keyGrabber = Widget.Window({
+  name: "key-grabber",
+  popup: true,
+  anchor: ["top", "left", "right", "bottom"],
+  css: "background-color: transparent;",
+  visible: false,
+  exclusivity: "ignore",
+  keymode: "on-demand",
+  layer: "top",
+  attribute: { list: [] },
+  setup: (self) =>
+    self.on("notify::visible", ({ visible }) => {
+      if (!visible)
+        self.attribute?.list.forEach((name) => App.closeWindow(name));
+    }),
+  child: Widget.EventBox({ vexpand: true }).on("button-press-event", () => {
+    App.closeWindow("key-grabber");
+    keyGrabber.attribute?.list.forEach((name) => App.closeWindow(name));
+  }),
+});
+
+// add before any PopupWindow is instantiated
+App.addWindow(keyGrabber);
+
+export class PopupWindow extends AgsWindow {
   static {
     GObject.registerClass(this);
   }
 
-  /** @param {import('types/widgets/window').WindowProps & {
-   *      name: string
-   *      child: import('types/widgets/box').default
-   *      transition?: import('types/widgets/revealer').RevealerProps['transition']
-   *  }} o
-   */
   constructor({ name, child, transition = "none", visible = false, ...rest }) {
     super({
       ...rest,
       name,
       popup: true,
-      focusable: true,
+      keymode: "exclusive",
+      layer: "overlay",
       class_names: ["popup-window", name],
     });
 
@@ -28,15 +47,11 @@ class PopupWindow extends AgsWindow {
     this.revealer = Widget.Revealer({
       transition,
       child,
-      transitionDuration: options.transition.value,
-      connections: [
-        [
-          App,
-          (_, wname, visible) => {
-            if (wname === name) this.revealer.reveal_child = visible;
-          },
-        ],
-      ],
+      transition_duration: options.transition.value,
+      setup: (self) =>
+        self.hook(App, (_, wname, visible) => {
+          if (wname === name) this.revealer.reveal_child = visible;
+        }),
     });
 
     this.child = Widget.Box({
@@ -46,6 +61,9 @@ class PopupWindow extends AgsWindow {
 
     this.show_all();
     this.visible = visible;
+
+    keyGrabber.bind("visible", this, "visible");
+    keyGrabber.attribute?.list.push(name);
   }
 
   set transition(dir) {

home/desktops/hyprland/ags/js/misc/Progress.js

@@ -1,6 +1,10 @@
 import Widget from "resource:///com/github/Aylur/ags/widget.js";
 import * as Utils from "resource:///com/github/Aylur/ags/utils.js";
 
+/** @param {import('types/widgets/box').BoxProps & {
+ *      width: number
+ *      height: number
+ * }} o */
 export default ({
   height = 18,
   width = 180,
@@ -27,31 +31,30 @@ export default ({
             min-height: ${height}px;
         `,
     children: [fill],
-    setup: (progress) =>
-      (progress.setValue = (value) => {
-        if (value < 0) return;
+    attribute: (value) => {
+      if (value < 0) return;
 
-        const axis = vertical ? "height" : "width";
-        const axisv = vertical ? height : width;
-        const min = vertical ? width : height;
-        const preferred = (axisv - min) * value + min;
+      const axis = vertical ? "height" : "width";
+      const axisv = vertical ? height : width;
+      const min = vertical ? width : height;
+      const preferred = (axisv - min) * value + min;
 
-        if (!fill_size) {
-          fill_size = preferred;
-          fill.setCss(`min-${axis}: ${preferred}px;`);
-          return;
-        }
+      if (!fill_size) {
+        fill_size = preferred;
+        fill.setCss(`min-${axis}: ${preferred}px;`);
+        return;
+      }
 
-        const frames = 10;
-        const goal = preferred - fill_size;
-        const step = goal / frames;
+      const frames = 10;
+      const goal = preferred - fill_size;
+      const step = goal / frames;
 
-        for (let i = 0; i < frames; ++i) {
-          Utils.timeout(5 * i, () => {
-            fill_size += step;
-            fill.setCss(`min-${axis}: ${fill_size}px`);
-          });
-        }
-      }),
+      for (let i = 0; i < frames; ++i) {
+        Utils.timeout(5 * i, () => {
+          fill_size += step;
+          fill.setCss(`min-${axis}: ${fill_size}px`);
+        });
+      }
+    },
   });
 };

home/desktops/hyprland/ags/js/misc/RegularWindow.js

@@ -1,19 +1,4 @@
-import Widget from "resource:///com/github/Aylur/ags/widget.js";
+import { subclass } from "resource:///com/github/Aylur/ags/widget.js";
 import Gtk from "gi://Gtk";
-import AgsWidget from "resource:///com/github/Aylur/ags/widgets/widget.js";
 
-class RegularWindow extends AgsWidget(Gtk.Window, "RegularWindow") {
-  static {
-    AgsWidget.register(this);
-  }
-  /**
-   * @param {import('types/widgets/widget').BaseProps<
-   *      RegularWindow, Gtk.Window.ConstructorProperties
-   * >} params */
-  constructor(params) {
-    // @ts-expect-error
-    super(params);
-  }
-}
-
-export default Widget.createCtor(RegularWindow);
+export default subclass(Gtk.Window, "RegularWindow");

home/desktops/hyprland/ags/js/misc/mpris.js

@@ -11,14 +11,9 @@ export const CoverArt = (player, props) =>
   Widget.Box({
     ...props,
     class_name: "cover",
-    binds: [
-      [
-        "css",
-        player,
-        "cover-path",
-        (path) => `background-image: url("${path}")`,
-      ],
-    ],
+    css: player
+      .bind("cover_path")
+      .transform((p) => `background-image: url("${p}")`),
   });
 
 /**
@@ -29,16 +24,15 @@ export const BlurredCoverArt = (player, props) =>
   Widget.Box({
     ...props,
     class_name: "blurred-cover",
-    connections: [
-      [
+    setup: (self) =>
+      self.hook(
         player,
         (box) =>
           blurImg(player.cover_path).then((img) => {
             img && box.setCss(`background-image: url("${img}")`);
           }),
         "notify::cover-path",
-      ],
-    ],
+      ),
   });
 
 /**
@@ -49,7 +43,7 @@ export const TitleLabel = (player, props) =>
   Widget.Label({
     ...props,
     class_name: "title",
-    binds: [["label", player, "track-title"]],
+    label: player.bind("track_title"),
   });
 
 /**
@@ -60,7 +54,7 @@ export const ArtistLabel = (player, props) =>
   Widget.Label({
     ...props,
     class_name: "artist",
-    binds: [["label", player, "track-artists", (a) => a.join(", ") || ""]],
+    label: player.bind("track_artists").transform((a) => a.join(", ") || ""),
   });
 
 /**
@@ -72,17 +66,13 @@ export const PlayerIcon = (player, { symbolic = true, ...props } = {}) =>
     ...props,
     class_name: "player-icon",
     tooltip_text: player.identity || "",
-    connections: [
-      [
-        player,
-        (icon) => {
-          const name = `${player.entry}${symbolic ? "-symbolic" : ""}`;
-          Utils.lookUpIcon(name)
-            ? (icon.icon = name)
-            : (icon.icon = icons.mpris.fallback);
-        },
-      ],
-    ],
+    setup: (self) =>
+      self.hook(player, (icon) => {
+        const name = `${player.entry}${symbolic ? "-symbolic" : ""}`;
+        Utils.lookUpIcon(name)
+          ? (icon.icon = name)
+          : (icon.icon = icons.mpris.fallback);
+      }),
   });
 
 /**
@@ -94,25 +84,18 @@ export const PositionSlider = (player, props) =>
     ...props,
     class_name: "position-slider",
     draw_value: false,
-    on_change: ({ value }) => {
-      player.position = player.length * value;
-    },
-    properties: [
-      [
-        "update",
-        (slider) => {
-          if (slider.dragging) return;
+    on_change: ({ value }) => (player.position = player.length * value),
+    setup: (self) => {
+      const update = () => {
+        if (self.dragging) return;
 
-          slider.visible = player.length > 0;
-          if (player.length > 0) slider.value = player.position / player.length;
-        },
-      ],
-    ],
-    connections: [
-      [player, (s) => s._update(s)],
-      [player, (s) => s._update(s), "position"],
-      [1000, (s) => s._update(s)],
-    ],
+        self.visible = player.length > 0;
+        if (player.length > 0) self.value = player.position / player.length;
+      };
+      self.hook(player, update);
+      self.hook(player, update, "position");
+      self.poll(1000, update);
+    },
   });
 
 /** @param {number} length */
@@ -126,90 +109,73 @@ function lengthStr(length) {
 /** @param {import('types/service/mpris').MprisPlayer} player */
 export const PositionLabel = (player) =>
   Widget.Label({
-    properties: [
-      [
-        "update",
-        (label, time) => {
-          player.length > 0
-            ? (label.label = lengthStr(time || player.position))
-            : (label.visible = !!player);
-        },
-      ],
-    ],
-    connections: [
-      [player, (l, time) => l._update(l, time), "position"],
-      [1000, (l) => l._update(l)],
-    ],
+    setup: (self) => {
+      const update = (_, time) => {
+        player.length > 0
+          ? (self.label = lengthStr(time || player.position))
+          : (self.visible = !!player);
+      };
+      self.hook(player, update, "position");
+      self.poll(1000, update);
+    },
   });
 
 /** @param {import('types/service/mpris').MprisPlayer} player */
 export const LengthLabel = (player) =>
   Widget.Label({
-    connections: [
-      [
-        player,
-        (label) => {
-          player.length > 0
-            ? (label.label = lengthStr(player.length))
-            : (label.visible = !!player);
-        },
-      ],
-    ],
+    label: player.bind("length").transform((l) => lengthStr(l)),
+    visible: player.bind("length").transform((l) => l > 0),
   });
 
 /** @param {import('types/service/mpris').MprisPlayer} player */
 export const Slash = (player) =>
   Widget.Label({
     label: "/",
-    connections: [
-      [
-        player,
-        (label) => {
-          label.visible = player.length > 0;
-        },
-      ],
-    ],
+    visible: player.bind("length").transform((l) => l > 0),
   });
 
 /**
  * @param {Object} o
  * @param {import('types/service/mpris').MprisPlayer} o.player
- * @param {import('types/widgets/stack').StackProps['items']} o.items
+ * @param {import('types/widgets/stack').StackProps['children']} o.children
  * @param {'shuffle' | 'loop' | 'playPause' | 'previous' | 'next'} o.onClick
  * @param {string} o.prop
  * @param {string} o.canProp
  * @param {any} o.cantValue
  */
-const PlayerButton = ({ player, items, onClick, prop, canProp, cantValue }) =>
+const PlayerButton = ({
+  player,
+  children,
+  onClick,
+  prop,
+  canProp,
+  cantValue,
+}) =>
   Widget.Button({
-    child: Widget.Stack({
-      items,
-      binds: [["shown", player, prop, (p) => `${p}`]],
-    }),
-    on_clicked: player[onClick].bind(player),
-    binds: [["visible", player, canProp, (c) => c !== cantValue]],
+    child: Widget.Stack({ children }).bind(
+      "shown",
+      player,
+      prop,
+      (p) => `${p}`,
+    ),
+    on_clicked: () => player[onClick](),
+    visible: player.bind(canProp).transform((c) => c !== cantValue),
   });
 
 /** @param {import('types/service/mpris').MprisPlayer} player */
 export const ShuffleButton = (player) =>
   PlayerButton({
     player,
-    items: [
-      [
-        "true",
-        Widget.Label({
-          class_name: "shuffle enabled",
-          label: icons.mpris.shuffle.enabled,
-        }),
-      ],
-      [
-        "false",
-        Widget.Label({
-          class_name: "shuffle disabled",
-          label: icons.mpris.shuffle.disabled,
-        }),
-      ],
-    ],
+    children: {
+      true: Widget.Label({
+        class_name: "shuffle enabled",
+        label: icons.mpris.shuffle.enabled,
+      }),
+      false: Widget.Label({
+        class_name: "shuffle disabled",
+        label: icons.mpris.shuffle.disabled,
+      }),
+    },
     onClick: "shuffle",
     prop: "shuffle-status",
     canProp: "shuffle-status",
@@ -220,29 +186,20 @@ export const ShuffleButton = (player) =>
 export const LoopButton = (player) =>
   PlayerButton({
     player,
-    items: [
-      [
-        "None",
-        Widget.Label({
-          class_name: "loop none",
-          label: icons.mpris.loop.none,
-        }),
-      ],
-      [
-        "Track",
-        Widget.Label({
-          class_name: "loop track",
-          label: icons.mpris.loop.track,
-        }),
-      ],
-      [
-        "Playlist",
-        Widget.Label({
-          class_name: "loop playlist",
-          label: icons.mpris.loop.playlist,
-        }),
-      ],
-    ],
+    children: {
+      None: Widget.Label({
+        class_name: "loop none",
+        label: icons.mpris.loop.none,
+      }),
+      Track: Widget.Label({
+        class_name: "loop track",
+        label: icons.mpris.loop.track,
+      }),
+      Playlist: Widget.Label({
+        class_name: "loop playlist",
+        label: icons.mpris.loop.playlist,
+      }),
+    },
     onClick: "loop",
     prop: "loop-status",
     canProp: "loop-status",
@@ -253,29 +210,20 @@ export const LoopButton = (player) =>
 export const PlayPauseButton = (player) =>
   PlayerButton({
     player,
-    items: [
-      [
-        "Playing",
-        Widget.Label({
-          class_name: "playing",
-          label: icons.mpris.playing,
-        }),
-      ],
-      [
-        "Paused",
-        Widget.Label({
-          class_name: "paused",
-          label: icons.mpris.paused,
-        }),
-      ],
-      [
-        "Stopped",
-        Widget.Label({
-          class_name: "stopped",
-          label: icons.mpris.stopped,
-        }),
-      ],
-    ],
+    children: {
+      Playing: Widget.Label({
+        class_name: "playing",
+        label: icons.mpris.playing,
+      }),
+      Paused: Widget.Label({
+        class_name: "paused",
+        label: icons.mpris.paused,
+      }),
+      Stopped: Widget.Label({
+        class_name: "stopped",
+        label: icons.mpris.stopped,
+      }),
+    },
     onClick: "playPause",
     prop: "play-back-status",
     canProp: "can-play",
@@ -286,15 +234,12 @@ export const PlayPauseButton = (player) =>
 export const PreviousButton = (player) =>
   PlayerButton({
     player,
-    items: [
-      [
-        "true",
-        Widget.Label({
-          class_name: "previous",
-          label: icons.mpris.prev,
-        }),
-      ],
-    ],
+    children: {
+      true: Widget.Label({
+        class_name: "previous",
+        label: icons.mpris.prev,
+      }),
+    },
     onClick: "previous",
     prop: "can-go-prev",
     canProp: "can-go-prev",
@@ -305,15 +250,12 @@ export const PreviousButton = (player) =>
 export const NextButton = (player) =>
   PlayerButton({
     player,
-    items: [
-      [
-        "true",
-        Widget.Label({
-          class_name: "next",
-          label: icons.mpris.next,
-        }),
-      ],
-    ],
+    children: {
+      true: Widget.Label({
+        class_name: "next",
+        label: icons.mpris.next,
+      }),
+    },
     onClick: "next",
     prop: "can-go-next",
     canProp: "can-go-next",