refactor(ags systray): use subclass

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

@@ -1,8 +1,6 @@
 import SystemTray from 'resource:///com/github/Aylur/ags/service/systemtray.js';
 import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
-import { Box, Icon, MenuItem, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Box, Icon, MenuItem, MenuBar, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
-
-import Gtk from 'gi://Gtk';
 
 import Separator from '../misc/separator.js';
 
@@ -16,55 +14,50 @@ const SysTrayItem = item => {
             transition: 'slide_right',
             child: Icon({
                 size: 24,
+                binds: [['icon', item, 'icon']],
             }),
         }),
         submenu: item.menu,
-        connections: [[item, btn => {
+        binds: [['tooltipMarkup', item, 'tooltip-markup']],
-            btn.child.child.icon = item.icon;
-            btn.tooltipMarkup = item.tooltipMarkup;
-        }]],
     });
 };
 
-const SysTray = () => {
+const SysTray = () => MenuBar({
-    const widget = Gtk.MenuBar.new();
+    setup: self => {
+        self.items = new Map();
 
-    // Properties
+        self.onAdded = id => {
-    widget._items = new Map();
+            const item = SystemTray.getItem(id);
+            if (self.items.has(id) || !item)
+                return;
 
-    widget._onAdded = id => {
+            const w = SysTrayItem(item);
-        const item = SystemTray.getItem(id);
+            // Early return if item is in blocklist
-        if (widget._items.has(id) || !item)
+            if (!w)
-            return;
+                return;
 
-        const w = SysTrayItem(item);
+            self.items.set(id, w);
-        // Early return if item is in blocklist
+            self.add(w);
-        if (!w)
+            self.show_all();
-            return;
+            w.child.revealChild = true;
+        };
 
-        widget._items.set(id, w);
+        self.onRemoved = id => {
-        widget.add(w);
+            if (!self.items.has(id))
-        widget.show_all();
+                return;
-        w.child.revealChild = true;
-    };
 
-    widget._onRemoved = id => {
+            self.items.get(id).child.revealChild = false;
-        if (!widget._items.has(id))
+            timeout(400, () => {
-            return;
+                self.items.get(id).destroy();
-
+                self.items.delete(id);
-        widget._items.get(id).child.revealChild = false;
+            });
-        timeout(400, () => {
+        };
-            widget._items.get(id).destroy();
+    },
-            widget._items.delete(id);
+    connections: [
-        });
+        [SystemTray, (self, id) => self.onAdded(id), 'added'],
-    };
+        [SystemTray, (self, id) => self.onRemoved(id), 'removed'],
-
+    ],
-    // Connections
+});
-    SystemTray.connect('added', (_, id) => widget._onAdded(id));
-    SystemTray.connect('removed', (_, id) => widget._onRemoved(id));
-
-    return widget;
-};
 
 export default () => Revealer({
     transition: 'slide_right',