fix(ags): get rid of Gtk error

hosts/wim/config/ags/js/bar/systray.js

@@ -21,6 +21,42 @@ const SysTrayItem = item => MenuItem({
   }]]
 });
 
+const SysTray = () => {
+  let widget = Gtk.MenuBar.new();
+
+  // Properties
+  widget._items = new Map();
+
+  widget._onAdded = (id) => {
+    const item = SystemTray.getItem(id);
+    if (widget._items.has(id) || !item)
+      return;
+
+    const w = SysTrayItem(item);
+    widget._items.set(id, w);
+    widget.add(w);
+    widget.show_all();
+    w.child.revealChild = true;
+  };
+
+  widget._onRemoved = (id) => {
+    if (!widget._items.has(id))
+      return;
+
+    widget._items.get(id).child.revealChild = false;
+    setTimeout(() => {
+      widget._items.get(id).destroy();
+      widget._items.delete(id);
+    }, 400);
+  };
+
+  // Connections
+  SystemTray.connect('added', (_, id) => widget._onAdded(id));
+  SystemTray.connect('removed', (_, id) => widget._onRemoved(id));
+
+  return widget;
+}
+
 export default () => Revealer({
   transition: 'slide_right',
   connections: [[SystemTray, rev => {
@@ -31,38 +67,7 @@ export default () => Revealer({
       Box({
         className: 'sys-tray',
         children: [
-          Widget({
+          SysTray(),
-            type: Gtk.MenuBar,
-            properties: [
-              ['items', new Map()],
-              ['onAdded', (box, id) => {
-                const item = SystemTray.getItem(id);
-                if (box._items.has(id) || !item)
-                  return;
-
-                const widget = SysTrayItem(item);
-                box._items.set(id, widget);
-                box.add(widget);
-                box.show_all();
-                widget.child.revealChild = true;
-              }],
-
-              ['onRemoved', (box, id) => {
-                if (!box._items.has(id))
-                  return;
-
-                box._items.get(id).child.revealChild = false;
-                setTimeout(() => {
-                  box._items.get(id).destroy();
-                  box._items.delete(id);
-                }, 400);
-              }],
-            ],
-            connections: [
-              [SystemTray, (box, id) => box._onAdded(box, id), 'added'],
-              [SystemTray, (box, id) => box._onRemoved(box, id), 'removed'],
-            ],
-          }),
         ],
       }),
       Separator(12),

hosts/wim/config/ags/js/overview/workspaces.js

@@ -60,9 +60,7 @@ export const WorkspaceRow = (className, i) => Revealer({
 // TODO: please make this readable for the love of god
 const Workspace = (id, name, extra = false) => {
   let workspace;
-  let fixed = Widget({
+  let fixed = Gtk.Fixed.new();
-    type: Gtk.Fixed,
-  });
 
   if (!extra) {
     workspace = Revealer({

hosts/wim/config/ags/js/quick-settings/main.js

@@ -1,13 +1,11 @@
-import { Mpris, Widget } from '../../imports.js';
+import { Widget } from '../../imports.js';
-const { Box, Label, Revealer, Icon } = Widget;
+const { Box, Label, Revealer } = Widget;
-
-import Gtk from 'gi://Gtk';
 
 import ButtonGrid   from './button-grid.js';
 import SliderBox    from './slider-box.js';
 import Player       from '../media-player/player.js';
-import EventBox    from '../misc/cursorbox.js';
 import PopupWindow  from '../misc/popup.js';
+import ToggleButton from './toggle-button.js';
 
 
 const QuickSettingsWidget = () => Box({
@@ -31,34 +29,7 @@ const QuickSettingsWidget = () => Box({
 
         SliderBox(),
 
-        EventBox({
+        ToggleButton(),
-          child: Widget({
-            type: Gtk.ToggleButton,
-            setup: btn => {
-              const id = Mpris.connect('changed', () => {
-                btn.set_active(Mpris.players.length > 0);
-                Mpris.disconnect(id);
-              });
-            },
-            connections: [['toggled', button => {
-              let rev = button.get_parent().get_parent().get_parent().children[1];
-
-              if (button.get_active()) {
-                button.child.setStyle("-gtk-icon-transform: rotate(0deg);");
-                rev.revealChild = true;
-              }
-              else {
-                button.child.setStyle('-gtk-icon-transform: rotate(180deg);');
-                rev.revealChild = false;
-              }
-            }]],
-            child: Icon({
-              icon: 'go-down-symbolic',
-              className: 'arrow',
-              style: `-gtk-icon-transform: rotate(180deg);`,
-            }),
-          }),
-        }),
 
       ],
     }),

hosts/wim/config/ags/js/quick-settings/toggle-button.js

@@ -0,0 +1,42 @@
+import { Mpris, Widget } from '../../imports.js';
+const { Icon } = Widget;
+
+import Gtk from 'gi://Gtk';
+import EventBox    from '../misc/cursorbox.js';
+
+export default () => {
+  let widget = EventBox({});
+
+  let toggleButton = Gtk.ToggleButton.new();
+  toggleButton.add(Icon({
+    icon: 'go-down-symbolic',
+    className: 'arrow',
+    style: `-gtk-icon-transform: rotate(180deg);`,
+  }));
+
+  // Setup
+  const id = Mpris.connect('changed', () => {
+    toggleButton.set_active(Mpris.players.length > 0);
+    Mpris.disconnect(id);
+  });
+
+  // Connections
+  toggleButton.connect('toggled', () => {
+    let rev = toggleButton.get_parent().get_parent().get_parent().children[1];
+
+    if (toggleButton.get_active()) {
+      toggleButton.get_children()[0]
+        .setStyle("-gtk-icon-transform: rotate(0deg);");
+      rev.revealChild = true;
+    }
+    else {
+      toggleButton.get_children()[0]
+        .setStyle('-gtk-icon-transform: rotate(180deg);');
+      rev.revealChild = false;
+    }
+  });
+
+  widget.add(toggleButton);
+
+  return widget;
+}