chore: update ags and start fixing breaking changes

devices/wim/config/ags/config.js

@@ -21,6 +21,7 @@ exec(`sassc ${scss} ${css}`);
 Setup();
 
 
+// TODO: get rid of 'properties' and 'binds' prop
 export default {
     style: css,
     notificationPopupTimeout: 5000,

devices/wim/config/ags/js/applauncher/main.js

@@ -101,6 +101,23 @@ const Applauncher = ({ window_name = 'applauncher' } = {}) => {
         className: 'applauncher',
         vertical: true,
 
+        setup: (self) => {
+            self.hook(App, (_, name, visible) => {
+                if (name !== window_name) {
+                    return;
+                }
+
+                entry.text = '';
+
+                if (visible) {
+                    entry.grab_focus();
+                }
+                else {
+                    makeNewChildren();
+                }
+            });
+        },
+
         children: [
             Box({
                 className: 'header',
@@ -119,21 +136,6 @@ const Applauncher = ({ window_name = 'applauncher' } = {}) => {
                 }),
             }),
         ],
-
-        connections: [[App, (_, name, visible) => {
-            if (name !== window_name) {
-                return;
-            }
-
-            entry.text = '';
-
-            if (visible) {
-                entry.grab_focus();
-            }
-            else {
-                makeNewChildren();
-            }
-        }]],
     });
 };
 

devices/wim/config/ags/js/bar/buttons/audio.js

@@ -13,11 +13,13 @@ const SpeakerIndicator = (props) => Icon({
 
 const SpeakerPercentLabel = (props) => Label({
     ...props,
-    connections: [[Audio, (label) => {
+    setup: (self) => {
+        self.hook(Audio, (label) => {
             if (Audio.speaker) {
                 label.label = `${Math.round(Audio.speaker.volume * 100)}%`;
             }
-    }, 'speaker-changed']],
+        }, 'speaker-changed');
+    },
 });
 
 const SPACING = 5;

devices/wim/config/ags/js/bar/buttons/battery.js

@@ -12,20 +12,24 @@ const Indicator = () => Icon({
 
     binds: [['icon', Battery, 'icon-name']],
 
-    connections: [[Battery, (self) => {
+    setup: (self) => {
+        self.hook(Battery, () => {
             self.toggleClassName('charging', Battery.charging);
             self.toggleClassName('charged', Battery.charged);
             self.toggleClassName('low', Battery.percent < LOW_BATT);
-    }]],
+        });
+    },
 });
 
 const LevelLabel = (props) => Label({
     ...props,
     className: 'label',
 
-    connections: [[Battery, (self) => {
+    setup: (self) => {
+        self.hook(Battery, () => {
             self.label = `${Battery.percent}%`;
-    }]],
+        });
+    },
 });
 
 const SPACING = 5;

devices/wim/config/ags/js/bar/buttons/bluetooth.js

@@ -7,7 +7,8 @@ import Separator from '../../misc/separator.js';
 
 const Indicator = (props) => Icon({
     ...props,
-    connections: [[Bluetooth, (self) => {
+    setup: (self) => {
+        self.hook(Bluetooth, () => {
             if (Bluetooth.enabled) {
                 self.icon = Bluetooth.connectedDevices[0] ?
                     Bluetooth.connectedDevices[0].iconName :
@@ -16,16 +17,19 @@ const Indicator = (props) => Icon({
             else {
                 self.icon = 'bluetooth-disabled-symbolic';
             }
-    }]],
+        });
+    },
 });
 
 const ConnectedLabel = (props) => Label({
     ...props,
-    connections: [[Bluetooth, (self) => {
+    setup: (self) => {
+        self.hook(Bluetooth, () => {
             self.label = Bluetooth.connectedDevices[0] ?
                 `${Bluetooth.connectedDevices[0]}` :
                 'Disconnected';
-    }, 'notify::connected-devices']],
+        }, 'notify::connected-devices');
+    },
 });
 
 const SPACING = 5;

devices/wim/config/ags/js/bar/buttons/brightness.js

@@ -13,9 +13,11 @@ const Indicator = (props) => Icon({
 
 const BrightnessPercentLabel = (props) => Label({
     ...props,
-    connections: [[Brightness, (self) => {
+    setup: (self) => {
+        self.hook(Brightness, () => {
             self.label = `${Math.round(Brightness.screen * 100)}%`;
-    }, 'screen']],
+        }, 'screen');
+    },
 });
 
 export default () => {

devices/wim/config/ags/js/bar/buttons/clock.js

@@ -8,36 +8,32 @@ const { DateTime } = GLib;
 import EventBox from '../../misc/cursorbox.js';
 
 
-const ClockModule = ({
+const ClockModule = () => Label({
-    interval = 1000,
-    ...props
-} = {}) => {
-    return Label({
-        ...props,
     className: 'clock',
 
-        connections: [[interval, (self) => {
+    setup: (self) => {
+        self.poll(1000, () => {
             const time = DateTime.new_now_local();
 
             self.label = time.format('%a. ') +
                 time.get_day_of_month() +
                 time.format(' %b. %H:%M');
-        }]],
         });
-};
+    },
+});
 
 export default () => EventBox({
     className: 'toggle-off',
 
     onPrimaryClickRelease: () => App.toggleWindow('calendar'),
 
-    connections: [
+    setup: (self) => {
-        [App, (self, windowName, visible) => {
+        self.hook(App, (_, windowName, visible) => {
             if (windowName === 'calendar') {
                 self.toggleClassName('toggle-on', visible);
             }
-        }],
+        });
-    ],
+    },
 
     child: ClockModule(),
 });

devices/wim/config/ags/js/bar/buttons/current-window.js

@@ -13,14 +13,17 @@ export default () => Box({
 
         Icon({
             size: 30,
-            connections: [[Hyprland.active.client, (self) => {
+            setup: (self) => {
-                const app = Applications.query(Hyprland.active.client.class)[0];
+                self.hook(Hyprland.active.client, () => {
+                    const app = Applications
+                        .query(Hyprland.active.client.class)[0];
 
                     if (app) {
                         self.icon = app.iconName;
                         self.visible = Hyprland.active.client.title !== '';
                     }
-            }]],
+                });
+            },
         }),
 
         Separator(SPACING),

devices/wim/config/ags/js/bar/buttons/keyboard-layout.js

@@ -8,15 +8,10 @@ const DEFAULT_KB = 'at-translated-set-2-keyboard';
 const SPACING = 4;
 
 
-export default () => {
+const Indicator = () => Label({
-    const rev = Revealer({
-        transition: 'slide_right',
-        child: Box({
-            children: [
-                Separator(SPACING),
-                Label({
     css: 'font-size: 20px;',
-                    connections: [[Hyprland, (self, _n, layout) => {
+    setup: (self) => {
+        self.hook(Hyprland, (_, _n, layout) => {
             if (layout) {
                 if (layout === 'error') {
                     return;
@@ -40,8 +35,17 @@ export default () => {
                     self.label = shortName ? shortName[1] : layout;
                 }).catch(print);
             }
-                    }, 'keyboard-layout']],
+        }, 'keyboard-layout');
-                }),
+    },
+});
+
+export default () => {
+    const rev = Revealer({
+        transition: 'slide_right',
+        child: Box({
+            children: [
+                Separator(SPACING),
+                Indicator(),
             ],
         }),
     });

devices/wim/config/ags/js/bar/buttons/network.js

@@ -7,7 +7,8 @@ import Separator from '../../misc/separator.js';
 
 const Indicator = (props) => Icon({
     ...props,
-    connections: [[Network, (self) => {
+    setup: (self) => {
+        self.hook(Network, () => {
             if (Network.wifi.internet === 'connected' ||
                 Network.wifi.internet === 'connecting') {
                 self.icon = Network.wifi.iconName;
@@ -19,12 +20,14 @@ const Indicator = (props) => Icon({
             else {
                 self.icon = Network.wifi.iconName;
             }
-    }]],
+        });
+    },
 });
 
 const APLabel = (props) => Label({
     ...props,
-    connections: [[Network, (self) => {
+    setup: (self) => {
+        self.hook(Network, () => {
             if (Network.wifi.internet === 'connected' ||
                 Network.wifi.internet === 'connecting') {
                 self.label = Network.wifi.ssid;
@@ -36,7 +39,8 @@ const APLabel = (props) => Label({
             else {
                 self.label = 'Disconnected';
             }
-    }]],
+        });
+    },
 });
 
 const SPACING = 5;

devices/wim/config/ags/js/bar/buttons/notif-button.js

@@ -19,11 +19,13 @@ export default () => EventBox({
         App.toggleWindow('notification-center');
     },
 
-    connections: [[App, (self, windowName, visible) => {
+    setup: (self) => {
+        self.hook(App, (_, windowName, visible) => {
             if (windowName === 'notification-center') {
                 self.toggleClassName('toggle-on', visible);
             }
-    }]],
+        });
+    },
 
     child: CenterBox({
         className: 'notif-panel',
@@ -31,7 +33,8 @@ export default () => EventBox({
         center_widget: Box({
             children: [
                 Icon({
-                    connections: [[Notifications, (self) => {
+                    setup: (self) => {
+                        self.hook(Notifications, () => {
                             if (Notifications.dnd) {
                                 self.icon = 'notification-disabled-symbolic';
                             }
@@ -41,7 +44,8 @@ export default () => EventBox({
                             else {
                                 self.icon = 'notification-symbolic';
                             }
-                    }]],
+                        });
+                    },
                 }),
 
                 Separator(SPACING),

devices/wim/config/ags/js/bar/buttons/osk-toggle.js

@@ -9,9 +9,11 @@ export default () => EventBox({
 
     onPrimaryClickRelease: () => Tablet.toggleOsk(),
 
-    connections: [[Tablet, (self) => {
+    setup: (self) => {
+        self.hook(Tablet, () => {
             self.toggleClassName('toggle-on', Tablet.oskState);
-    }, 'osk-toggled']],
+        }, 'osk-toggled');
+    },
 
     child: Box({
         className: 'osk-toggle',

devices/wim/config/ags/js/bar/buttons/quick-settings.js

@@ -26,11 +26,13 @@ export default () => EventBox({
         App.toggleWindow('quick-settings');
     },
 
-    connections: [[App, (self, windowName, visible) => {
+    setup: (self) => {
+        self.hook(App, (_, windowName, visible) => {
             if (windowName === 'quick-settings') {
                 self.toggleClassName('toggle-on', visible);
             }
-    }]],
+        });
+    },
 
     child: Box({
         className: 'quick-settings-toggle',

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

@@ -33,7 +33,8 @@ const SysTray = () => MenuBar({
     setup: (self) => {
         self.items = new Map();
 
-        self.onAdded = (id) => {
+        self
+            .hook(SystemTray, (_, id) => {
                 const item = SystemTray.getItem(id);
 
                 if (self.items.has(id) || !item) {
@@ -51,9 +52,9 @@ const SysTray = () => MenuBar({
                 self.add(w);
                 self.show_all();
                 w.child.revealChild = true;
-        };
+            }, 'added')
 
-        self.onRemoved = (id) => {
+            .hook(SystemTray, (_, id) => {
                 if (!self.items.has(id)) {
                     return;
                 }
@@ -63,12 +64,8 @@ const SysTray = () => MenuBar({
                     self.items.get(id).destroy();
                     self.items.delete(id);
                 });
-        };
+            }, 'removed');
     },
-    connections: [
-        [SystemTray, (self, id) => self.onAdded(id), 'added'],
-        [SystemTray, (self, id) => self.onRemoved(id), 'removed'],
-    ],
 });
 
 export default () => {
@@ -77,9 +74,11 @@ export default () => {
     return Revealer({
         transition: 'slide_right',
 
-        connections: [[SystemTray, (rev) => {
+        setup: (self) => {
-            rev.revealChild = systray.get_children().length > 0;
+            self.hook(SystemTray, () => {
-        }]],
+                self.revealChild = systray.get_children().length > 0;
+            });
+        },
 
         child: Box({
             children: [

devices/wim/config/ags/js/bar/buttons/tablet-toggle.js

@@ -9,9 +9,11 @@ export default () => EventBox({
 
     onPrimaryClickRelease: () => Tablet.toggleMode(),
 
-    connections: [[Tablet, (self) => {
+    setup: (self) => {
+        self.hook(Tablet, () => {
             self.toggleClassName('toggle-on', Tablet.tabletMode);
-    }, 'mode-toggled']],
+        }, 'mode-toggled');
+    },
 
     child: Box({
         className: 'tablet-toggle',

devices/wim/config/ags/js/bar/buttons/workspaces.js

@@ -43,19 +43,19 @@ const Workspace = ({ i } = {}) => {
                             }
                         }
                     };
-                },
-
-                connections: [
-                    [Hyprland, (self) => self.update()],
 
+                    self
+                        .hook(Hyprland, () => self.update())
                         // Deal with urgent windows
-                    [Hyprland, (self, a) => self.update(a), 'urgent-window'],
+                        .hook(Hyprland, (_, a) => {
-                    [Hyprland.active.workspace, (self) => {
+                            self.update(a);
+                        }, 'urgent-window')
+                        .hook(Hyprland.active.workspace, () => {
                             if (Hyprland.active.workspace.id === i) {
                                 self.toggleClassName('urgent', false);
                             }
-                    }],
+                        });
-                ],
+                },
             }),
         }),
     });
@@ -81,7 +81,9 @@ export default () => {
         vpack: 'center',
         hpack: 'start',
         className: 'button active',
-        connections: [[Hyprland.active.workspace, updateHighlight]],
+        setup: (self) => {
+            self.hook(Hyprland.active.workspace, updateHighlight);
+        },
     });
 
     const widget = Overlay({
@@ -122,7 +124,8 @@ export default () => {
                     }],
                 ],
 
-                connections: [[Hyprland, (self) => {
+                setup: (self) => {
+                    self.hook(Hyprland, () => {
                         self._workspaces = self.children.filter((ch) => {
                             return Hyprland.workspaces.find((ws) => {
                                 return ws.id === ch._id;
@@ -136,7 +139,8 @@ export default () => {
                         const TEMP_TIMEOUT = 10;
 
                         timeout(TEMP_TIMEOUT, () => updateHighlight(highlight));
-                }]],
+                    });
+                },
             }),
         }),
     });

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

@@ -31,19 +31,20 @@ export default (props) => {
         hexpand: true,
         vertical: true,
 
-        connections: [
+        setup: (self) => {
-            [Hyprland.active, () => {
+            self
+                .hook(Hyprland.active, () => {
                     const workspace = Hyprland.getWorkspace(
                         Hyprland.active.workspace.id,
                     );
 
                     Revealed.value = !workspace?.hasfullscreen;
-            }],
+                })
 
-            [Hyprland, (_, fullscreen) => {
+                .hook(Hyprland, (_, fullscreen) => {
                     Revealed.value = !fullscreen;
-            }, 'fullscreen'],
+                }, 'fullscreen');
-        ],
+        },
 
         children: [
             Revealer({

devices/wim/config/ags/js/date.js

@@ -25,9 +25,11 @@ const Time = () => Box({
                 Label({
                     className: 'content',
                     label: 'hour',
-                    connections: [[1000, (self) => {
+                    setup: (self) => {
+                        self.poll(1000, () => {
                             self.label = DateTime.new_now_local().format('%H');
-                    }]],
+                        });
+                    },
                 }),
 
                 Divider(),
@@ -35,9 +37,11 @@ const Time = () => Box({
                 Label({
                     className: 'content',
                     label: 'minute',
-                    connections: [[1000, (self) => {
+                    setup: (self) => {
+                        self.poll(1000, () => {
                             self.label = DateTime.new_now_local().format('%M');
-                    }]],
+                        });
+                    },
                 }),
 
             ],
@@ -49,13 +53,15 @@ const Time = () => Box({
             child: Label({
                 css: 'font-size: 20px',
                 label: 'complete date',
-                connections: [[1000, (self) => {
+                setup: (self) => {
+                    self.poll(1000, () => {
                         const time = DateTime.new_now_local();
 
                         self.label = time.format('%A, %B ') +
                             time.get_day_of_month() +
                             time.format(', %Y');
-                }]],
+                    });
+                },
             }),
         }),
 

devices/wim/config/ags/js/media-player/gesture.js

@@ -12,7 +12,7 @@ const TRANSITION = `transition: margin ${ANIM_DURATION}ms ease,
 
 export default ({
     properties,
-    connections,
+    setup = () => {/**/},
     props,
 } = {}) => {
     const widget = EventBox();
@@ -33,10 +33,11 @@ export default ({
 
         child: emptyPlayer,
 
-        connections: [
+        setup: (self) => {
-            ...connections,
+            setup(self);
 
-            [gesture, (overlay, realGesture) => {
+            self
+                .hook(gesture, (overlay, realGesture) => {
                     if (realGesture) {
                         overlay.list().forEach((over) => {
                             over.visible = true;
@@ -74,9 +75,9 @@ export default ({
                             ${playerBox._bgStyle}
                         `);
                     }
-            }, 'drag-update'],
+                }, 'drag-update')
 
-            [gesture, (overlay) => {
+                .hook(gesture, (overlay) => {
                     // Don't allow gesture when only one player
                     if (overlay.list().length <= 1) {
                         return;
@@ -108,7 +109,8 @@ export default ({
                                 ${TRANSITION}
                                 margin-left: -${OFFSCREEN}px;
                                 margin-right: ${OFFSCREEN}px;
-                            opacity: 0.7; ${playerBox._bgStyle}`);
+                                opacity: 0.7; ${playerBox._bgStyle}
+                            `);
                         }
 
                         timeout(ANIM_DURATION, () => {
@@ -126,8 +128,8 @@ export default ({
                         // Recenter with transition for animation
                         playerBox.setCss(`${TRANSITION} ${playerBox._bgStyle}`);
                     }
-            }, 'drag-end'],
+                }, 'drag-end');
-        ],
+        },
     });
 
     widget.add(content);

devices/wim/config/ags/js/media-player/mpris.js

@@ -60,9 +60,8 @@ export const CoverArt = (player, props) => CenterBox({
                 self.setCss(self._bgStyle);
             }
         });
-    },
 
-    connections: [[player, (self) => {
+        self.hook(player, () => {
             execAsync(['bash', '-c', `[[ -f "${player.coverPath}" ]] &&
                   coloryou "${player.coverPath}" | grep -v Warning`])
                 .then((out) => {
@@ -89,7 +88,8 @@ export const CoverArt = (player, props) => CenterBox({
                         print(err);
                     }
                 });
-    }]],
+        });
+    },
 });
 
 export const TitleLabel = (player, props) => Label({
@@ -127,16 +127,19 @@ export const PlayerIcon = (player, overlay, props) => {
             className: widget ? 'position-indicator' : 'player-icon',
             size: widget ? '' : ICON_SIZE,
 
-            connections: [[p, (self) => {
+            setup: (self) => {
+                self.hook(p, () => {
                     self.icon = lookUpIcon(p.entry) ?
                         p.entry :
                         icons.mpris.fallback;
-            }]],
+                });
+            },
         }),
     });
 
     return Box({
-        connections: [[Mpris, (self) => {
+        setup: (self) => {
+            self.hook(Mpris, () => {
                 const thisIndex = overlay.list()
                     .indexOf(self.get_parent().get_parent());
 
@@ -147,7 +150,8 @@ export const PlayerIcon = (player, overlay, props) => {
                         playerIcon(player) :
                         playerIcon(over._player, overlay, over);
                 }).reverse();
-        }]],
+            });
+        },
     });
 };
 
@@ -163,38 +167,38 @@ export const PositionSlider = (player, props) => Slider({
         player.position = player.length * value;
     },
 
-    properties: [['update', (slider) => {
+    setup: (self) => {
-        if (!slider.dragging) {
+        const update = () => {
-            slider.visible = player.length > 0;
+            if (!self.dragging) {
+                self.visible = player.length > 0;
                 if (player.length > 0) {
-                slider.value = player.position / player.length;
+                    self.value = player.position / player.length;
                 }
             }
-    }]],
+        };
 
-    connections: [
+        self
-        [1000, (s) => s._update(s)],
+            .poll(1000, () => update())
-        [player, (s) => s._update(s), 'position'],
+            .hook(player, () => update(), 'position')
-        [player.colors, (s) => {
+            .hook(player.colors, () => {
                 if (player.colors.value) {
                     const c = player.colors.value;
 
-                s.setCss(`
+                    self.setCss(`
                         highlight    { background-color: ${c.buttonAccent}; }
                         slider       { background-color: ${c.buttonAccent}; }
                         slider:hover { background-color: ${c.hoverAccent}; }
                         trough       { background-color: ${c.buttonText}; }
                     `);
                 }
-        }],
+            })
-
+            .on('button-press-event', (s) => {
-        ['button-press-event', (s) => {
                 s.cursor = 'grabbing';
-        }],
+            })
-        ['button-release-event', (s) => {
+            .on('button-release-event', (s) => {
                 s.cursor = 'pointer';
-        }],
+            });
-    ],
+    },
 });
 
 const PlayerButton = ({ player, items, onClick, prop }) => EventBox({
@@ -239,12 +243,12 @@ const PlayerButton = ({ player, items, onClick, prop }) => EventBox({
             }
         },
 
-        connections: [
+        setup: (self) => {
-            [player, (button) => {
+            self
-                button.child.shown = `${player[prop]}`;
+                .hook(player, () => {
-            }],
+                    self.child.shown = `${player[prop]}`;
-
+                })
-            [player.colors, (button) => {
+                .hook(player.colors, () => {
                     if (!Mpris.players.find((p) => player === p)) {
                         return;
                     }
@@ -253,7 +257,7 @@ const PlayerButton = ({ player, items, onClick, prop }) => EventBox({
                         const c = player.colors.value;
 
                         if (prop === 'playBackStatus') {
-                        if (button._hovered) {
+                            if (self._hovered) {
                                 items.forEach((item) => {
                                     item[1].setCss(`
                                         background-color: ${c.hoverAccent};
@@ -271,19 +275,20 @@ const PlayerButton = ({ player, items, onClick, prop }) => EventBox({
                                         background-color: ${c.buttonAccent};
                                         color: ${c.buttonText};
                                         min-height: 42px;
-                                min-width: 38px;`);
+                                        min-width: 38px;
+                                    `);
                                 });
                             }
                         }
                         else {
-                        button.setCss(`
+                            self.setCss(`
                                 *       { color: ${c.buttonAccent}; }
                                 *:hover { color: ${c.hoverAccent}; }
                             `);
                         }
                     }
-            }],
+                });
-        ],
+        },
     }),
 });
 

devices/wim/config/ags/js/media-player/player.js

@@ -107,8 +107,9 @@ export default () => {
             ['setup', false],
         ],
 
-        connections: [
+        setup: (self) => {
-            [Mpris, (overlay, busName) => {
+            self
+                .hook(Mpris, (overlay, busName) => {
                     if (overlay._players.has(busName)) {
                         return;
                     }
@@ -151,10 +152,9 @@ export default () => {
                     else if (overlay.includesWidget(previousFirst)) {
                         overlay.moveToTop(previousFirst);
                     }
-            }, 'player-added'],
+                }, 'player-added')
 
-
+                .hook(Mpris, (overlay, busName) => {
-            [Mpris, (overlay, busName) => {
                     if (!busName || !overlay._players.has(busName)) {
                         return;
                     }
@@ -171,8 +171,8 @@ export default () => {
                     if (overlay.includesWidget(previousFirst)) {
                         overlay.moveToTop(previousFirst);
                     }
-            }, 'player-closed'],
+                }, 'player-closed');
-        ],
+        },
     });
 
     return Box({

devices/wim/config/ags/js/misc/cursorbox.js

@@ -42,7 +42,7 @@ export default ({
 
     const gesture = Gtk.GestureLongPress.new(widget);
 
-    widget.connectTo(gesture, () => {
+    widget.hook(gesture, () => {
         const pointer = gesture.get_point(null);
         const x = pointer[1];
         const y = pointer[2];

devices/wim/config/ags/js/misc/popup.js

@@ -58,9 +58,10 @@ export default ({
                 transition,
                 transitionDuration,
 
-                connections: [[App, (rev, currentName, isOpen) => {
+                setup: (self) => {
+                    self.hook(App, (_, currentName, isOpen) => {
                         if (currentName === name) {
-                        rev.revealChild = isOpen;
+                            self.revealChild = isOpen;
 
                             if (isOpen) {
                                 onOpen(window);
@@ -71,7 +72,8 @@ export default ({
                                 });
                             }
                         }
-                }]],
+                    });
+                },
 
                 child: child || Box(),
             }),

devices/wim/config/ags/js/notifications/center.js

@@ -28,8 +28,10 @@ const NotificationList = () => Box({
     vexpand: true,
     vpack: 'start',
     binds: [['visible', HasNotifs]],
-    connections: [
+
-        [Notifications, (box, id) => {
+    setup: (self) => {
+        self
+            .hook(Notifications, (box, id) => {
                 // Handle cached notifs
                 if (box.children.length === 0) {
                     Notifications.notifications.forEach((n) => {
@@ -40,16 +42,16 @@ const NotificationList = () => Box({
                 else if (id) {
                     addNotif(box, Notifications.getNotification(id));
                 }
-        }, 'notified'],
+            }, 'notified')
 
-        [Notifications, (box, id) => {
+            .hook(Notifications, (box, id) => {
                 const notif = box.children.find((ch) => ch._id === id);
 
                 if (notif?.sensitive) {
                     notif.slideAway('Right');
                 }
-        }, 'closed'],
+            }, 'closed');
-    ],
+    },
 });
 
 // Needs to be wrapped to still have onHover when disabled
@@ -64,11 +66,13 @@ const ClearButton = () => EventBox({
             children: [
                 Label('Clear '),
                 Icon({
-                    connections: [[Notifications, (self) => {
+                    setup: (self) => {
+                        self.hook(Notifications, () => {
                             self.icon = Notifications.notifications.length > 0 ?
                                 'user-trash-full-symbolic' :
                                 'user-trash-symbolic';
-                    }]],
+                        });
+                    },
                 }),
             ],
         }),

devices/wim/config/ags/js/notifications/gesture.js

@@ -91,10 +91,10 @@ export default ({
 
     widget.add(Box({
         css: squeezeLeft,
-        connections: [
+        setup: (self) => {
-
+            self
                 // When dragging
-            [gesture, (self) => {
+                .hook(gesture, () => {
                     let offset = gesture.get_offset()[1];
 
                     if (offset === 0) {
@@ -125,15 +125,16 @@ export default ({
                     // Put a threshold on if a click is actually dragging
                     widget._dragging = Math.abs(offset) > SLIDE_MIN_THRESHOLD;
                     widget.cursor = 'grabbing';
-            }, 'drag-update'],
+                }, 'drag-update')
-
 
                 // On drag end
-            [gesture, (self) => {
+                .hook(gesture, () => {
                     // Make it slide in on init
                     if (!widget.ready) {
                         // Reverse of slideAway, so it started at squeeze, then we go to slide
-                    self.setCss(slideIn === 'Left' ? slideLeft : slideRight);
+                        self.setCss(slideIn === 'Left' ?
+                            slideLeft :
+                            slideRight);
 
                         timeout(ANIM_DURATION, () => {
                             // Then we go to center
@@ -162,9 +163,8 @@ export default ({
                         widget.cursor = 'grab';
                         widget._dragging = false;
                     }
-            }, 'drag-end'],
+                }, 'drag-end');
-
+        },
-        ],
     }));
 
     return widget;

devices/wim/config/ags/js/notifications/popup.js

@@ -10,7 +10,11 @@ import { Notification } from './base.js';
 const DELAY = 2000;
 
 
-const addPopup = (box, id) => {
+export default () => Box({
+    vertical: true,
+
+    setup: (self) => {
+        const addPopup = (id) => {
             if (!id) {
                 return;
             }
@@ -24,13 +28,13 @@ const addPopup = (box, id) => {
 
             if (NewNotif) {
                 // Use this instead of add to put it at the top
-        box.pack_end(NewNotif, false, false, 0);
+                self.pack_end(NewNotif, false, false, 0);
-        box.show_all();
+                self.show_all();
             }
-};
+        };
 
-const handleDismiss = (box, id, force = false) => {
+        const handleDismiss = (id, force = false) => {
-    const notif = box.children.find((ch) => ch._id === id);
+            const notif = self.children.find((ch) => ch._id === id);
 
             if (!notif) {
                 return;
@@ -52,14 +56,11 @@ const handleDismiss = (box, id, force = false) => {
                     }
                 });
             }
-};
+        };
 
-export default () => Box({
+        self
-    vertical: true,
+            .hook(Notifications, (_, id) => addPopup(id), 'notified')
-
+            .hook(Notifications, (_, id) => handleDismiss(id), 'dismissed')
-    connections: [
+            .hook(Notifications, (_, id) => handleDismiss(id, true), 'closed');
-        [Notifications, (s, id) => addPopup(s, id), 'notified'],
+    },
-        [Notifications, (s, id) => handleDismiss(s, id), 'dismissed'],
-        [Notifications, (s, id) => handleDismiss(s, id, true), 'closed'],
-    ],
 });

devices/wim/config/ags/js/on-screen-keyboard/keyboard.js

@@ -37,7 +37,8 @@ export default (window) => Box({
                             active: true,
                             vpack: 'center',
 
-                            connections: [['toggled', (self) => {
+                            setup: (self) => {
+                                self.on('toggled', () => {
                                     self.toggleClassName(
                                         'toggled',
                                         self.get_active(),
@@ -45,7 +46,8 @@ export default (window) => Box({
                                     window.exclusivity = self.get_active() ?
                                         'exclusive' :
                                         'normal';
-                            }]],
+                                });
+                            },
 
                             child: Label('Exclusive'),
                         }),

devices/wim/config/ags/js/on-screen-keyboard/keys.js

@@ -86,11 +86,13 @@ const ModKey = (key) => {
             self.child.toggleClassName('active', !Mod.value);
             Mod.value = !Mod.value;
         },
-        connections: [[NormalClick, (self) => {
+        setup: (self) => {
+            self.hook(NormalClick, () => {
                 Mod.value = false;
                 self.child.toggleClassName('active', false);
                 execAsync(`ydotool key ${key.keycode}:0`);
-        }]],
+            });
+        },
         child: Label({
             class_name: `mod ${key.label}`,
             label: key.label,
@@ -114,16 +116,16 @@ const RegularKey = (key) => {
             class_name: `normal ${key.label}`,
             label: key.label,
 
-            connections: [
+            setup: (self) => {
-                [Shift, (self) => {
+                self
+                    .hook(Shift, () => {
                         if (!key.labelShift) {
                             return;
                         }
 
                         self.label = Shift.value ? key.labelShift : key.label;
-                }],
+                    })
-
+                    .hook(Caps, () => {
-                [Caps, (self) => {
                         if (key.label === 'Caps') {
                             self.toggleClassName('active', Caps.value);
 
@@ -135,19 +137,20 @@ const RegularKey = (key) => {
                         }
 
                         if (key.label.match(/[A-Za-z]/)) {
-                        self.label = Caps.value ? key.labelShift : key.label;
+                            self.label = Caps.value ?
+                                key.labelShift :
+                                key.label;
                         }
-                }],
+                    })
-
+                    .hook(AltGr, () => {
-                [AltGr, (self) => {
                         if (!key.labelAltGr) {
                             return;
                         }
 
                         self.toggleClassName('altgr', AltGr.value);
                         self.label = AltGr.value ? key.labelAltGr : key.label;
-                }],
+                    });
-            ],
+            },
         }),
     });
 
@@ -156,7 +159,7 @@ const RegularKey = (key) => {
     gesture.delay_factor = 1.0;
 
     // Long press
-    widget.connectTo(gesture, () => {
+    widget.hook(gesture, () => {
         const pointer = gesture.get_point(null);
         const x = pointer[1];
         const y = pointer[2];
@@ -171,7 +174,7 @@ const RegularKey = (key) => {
     }, 'pressed');
 
     // OnPrimaryClickRelease
-    widget.connectTo(gesture, () => {
+    widget.hook(gesture, () => {
         const pointer = gesture.get_point(null);
         const x = pointer[1];
         const y = pointer[2];

devices/wim/config/ags/js/on-screen-keyboard/main.js

@@ -16,17 +16,18 @@ export default () => {
         visible: false,
         anchor: ['left', 'bottom', 'right'],
 
-        connections: [
+        setup: (self) => {
-            [Tablet, (self, state) => {
+            self
+                .hook(Tablet, (_, state) => {
                     self.setVisible(state);
-            }, 'osk-toggled'],
+                }, 'osk-toggled')
 
-            [Tablet, () => {
+                .hook(Tablet, () => {
                     if (!Tablet.tabletMode && !Tablet.oskState) {
                         window.visible = false;
                     }
-            }, 'mode-toggled'],
+                }, 'mode-toggled');
-        ],
+        },
     });
 
     window.child = Keyboard(window);

devices/wim/config/ags/js/osd/ctor.js

@@ -36,7 +36,7 @@ export default ({ stack, icon, info } = {}) => {
         connectFunc = () => stack.popup(osd);
     }
 
-    osd.children[0].children[1].connectTo(info.mod, connectFunc, info.signal);
+    osd.children[0].children[1].hook(info.mod, connectFunc, info.signal);
 
     return osd;
 };

devices/wim/config/ags/js/overview/dragndrop.js

@@ -33,7 +33,10 @@ let hidden = 0;
 
 export const WorkspaceDrop = (props) => EventBox({
     ...props,
-    connections: [['drag-data-received', (self, _c, _x, _y, data) => {
+    setup: (self) => {
+        self.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY);
+
+        self.on('drag-data-received', (_, _c, _x, _y, data) => {
             let id = self.get_parent()._id;
 
             if (id < -1) {
@@ -51,10 +54,7 @@ export const WorkspaceDrop = (props) => EventBox({
             Hyprland.sendMessage('dispatch ' +
                 `movetoworkspacesilent ${id},address:${data.get_text()}`)
                 .catch(print);
-    }]],
+        });
-
-    setup: (self) => {
-        self.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY);
     },
 });
 
@@ -69,16 +69,16 @@ export const WindowButton = ({ address, mainBox, ...props } = {}) => Button({
             Gdk.DragAction.COPY,
         );
 
-        self.connect('drag-data-get', (_w, _c, data) => {
+        self.on('drag-data-get', (_w, _c, data) => {
             data.set_text(address, address.length);
         });
 
-        self.connect('drag-begin', (_, context) => {
+        self.on('drag-begin', (_, context) => {
             Gtk.drag_set_icon_surface(context, createSurfaceFromWidget(self));
             self.get_parent().revealChild = false;
         });
 
-        self.connect('drag-end', () => {
+        self.on('drag-end', () => {
             self.get_parent().destroy();
 
             updateClients(mainBox);

devices/wim/config/ags/js/overview/main.js

@@ -40,13 +40,15 @@ export const Overview = () => {
             }),
         ],
 
-        connections: [[Hyprland, (self) => {
+        setup: (self) => {
+            self.hook(Hyprland, () => {
                 if (!App.getWindow('overview').visible) {
                     return;
                 }
 
                 self.update();
-        }]],
+            });
+        },
 
         properties: [
             ['workspaces'],
@@ -72,7 +74,8 @@ export const Overview = () => {
         }),
 
         // TODO: throttle his?
-        connections: [['get-child-position', (self, ch) => {
+        setup: (self) => {
+            self.on('get-child-position', (_, ch) => {
                 if (ch === mainBox) {
                     self.child.setCss(`
                         transition: min-height 0.2s ease, min-width 0.2s ease;
@@ -80,7 +83,8 @@ export const Overview = () => {
                         min-width: ${mainBox.get_allocated_width()}px;
                     `);
                 }
-        }]],
+            });
+        },
     });
 
     widget.getChild = () => mainBox;

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

@@ -31,17 +31,17 @@ const Workspace = (id, name, normal = true) => {
         transition: 'slide_right',
         transitionDuration: 500,
 
-        connections: normal ?
+        setup: (self) => {
-
+            if (normal) {
-            [[Hyprland, (box) => {
+                self.hook(Hyprland, () => {
                     const activeId = Hyprland.active.workspace.id;
-                const active = activeId === box._id;
+                    const active = activeId === self._id;
 
-                box.revealChild = Hyprland.getWorkspace(box._id)
+                    self.revealChild = Hyprland.getWorkspace(self._id)
                         ?.windows > 0 || active;
-            }]] :
+                });
-
+            }
-            [],
+        },
 
         child: WorkspaceDrop({
             child: Box({
@@ -88,7 +88,8 @@ export const WorkspaceRow = (className, i) => {
         transition: 'slide_down',
         hpack: className === 'special' ? '' : 'start',
 
-        connections: [[Hyprland, (rev) => {
+        setup: (self) => {
+            self.hook(Hyprland, (rev) => {
                 const minId = i * VARS.WORKSPACE_PER_ROW;
                 const activeId = Hyprland.active.workspace.id;
 
@@ -101,11 +102,13 @@ export const WorkspaceRow = (className, i) => {
                 });
 
                 rev.revealChild = rowExists;
-        }]],
+            });
+        },
 
         child: CenterBox({
             children: [null, EventBox({
-                connections: [[Hyprland, () => {
+                setup: (self) => {
+                    self.hook(Hyprland, () => {
                         const maxId = (i + 1) * VARS.WORKSPACE_PER_ROW;
                         const activeId = Hyprland.active.workspace.id;
 
@@ -119,7 +122,8 @@ export const WorkspaceRow = (className, i) => {
                         });
 
                         addWorkspace.revealChild = isSpecial || !nextRowExists;
-                }]],
+                    });
+                },
 
                 child: Box({
                     className,

devices/wim/config/ags/js/quick-settings/bluetooth.js

@@ -5,8 +5,8 @@ import { Box, Icon, Label, ListBox, Overlay, Revealer, Scrollable } from 'resour
 
 import EventBox from '../misc/cursorbox.js';
 
-const SCROLL_THRESHOLD_H = 200;
+const SCROLL_THRESH_H = 200;
-const SCROLL_THRESHOLD_N = 7;
+const SCROLL_THRESH_N = 7;
 
 
 const BluetoothDevice = (dev) => {
@@ -29,9 +29,11 @@ const BluetoothDevice = (dev) => {
                 icon: 'object-select-symbolic',
                 hexpand: true,
                 hpack: 'end',
-                connections: [[dev, (self) => {
+                setup: (self) => {
+                    self.hook(dev, () => {
                         self.setCss(`opacity: ${dev.paired ? '1' : '0'};`);
-                }]],
+                    });
+                },
             }),
         ],
     });
@@ -95,7 +97,8 @@ export const BluetoothMenu = () => {
                 hscroll: 'never',
                 vscroll: 'never',
 
-                connections: [['edge-reached', (_, pos) => {
+                setup: (self) => {
+                    self.on('edge-reached', (_, pos) => {
                         // Manage scroll indicators
                         if (pos === 2) {
                             topArrow.revealChild = false;
@@ -105,7 +108,8 @@ export const BluetoothMenu = () => {
                             topArrow.revealChild = true;
                             bottomArrow.revealChild = false;
                         }
-                }]],
+                    });
+                },
 
                 child: ListBox({
                     setup: (self) => {
@@ -113,9 +117,8 @@ export const BluetoothMenu = () => {
                             return b.get_children()[0].dev.paired -
                                 a.get_children()[0].dev.paired;
                         });
-                    },
 
-                    connections: [[Bluetooth, (box) => {
+                        self.hook(Bluetooth, () => {
                             // Get all devices
                             const Devices = [].concat(
                                 Bluetooth.devices,
@@ -127,8 +130,8 @@ export const BluetoothMenu = () => {
                                 if (!DevList.has(dev) && dev.name) {
                                     DevList.set(dev, BluetoothDevice(dev));
 
-                                box.add(DevList.get(dev));
+                                    self.add(DevList.get(dev));
-                                box.show_all();
+                                    self.show_all();
                                 }
                             });
 
@@ -147,7 +150,8 @@ export const BluetoothMenu = () => {
                                         DevList.delete(dev);
                                     }
                                     else {
-                                    devWidget.children[0].revealChild = false;
+                                        devWidget.children[0]
+                                            .revealChild = false;
                                         devWidget.toDestroy = true;
                                     }
                                 }
@@ -156,13 +160,13 @@ export const BluetoothMenu = () => {
                             // Start scrolling after a specified height
                             // is reached by the children
                             const height = Math.max(
-                            box.get_parent().get_allocated_height(),
+                                self.get_parent().get_allocated_height(),
-                            SCROLL_THRESHOLD_H,
+                                SCROLL_THRESH_H,
                             );
 
-                        const scroll = box.get_parent().get_parent();
+                            const scroll = self.get_parent().get_parent();
 
-                        if (box.get_children().length > SCROLL_THRESHOLD_N) {
+                            if (self.get_children().length > SCROLL_THRESH_N) {
                                 scroll.vscroll = 'always';
                                 scroll.setCss(`min-height: ${height}px;`);
 
@@ -181,10 +185,11 @@ export const BluetoothMenu = () => {
                             }
 
                             // Trigger sort_func
-                        box.get_children().forEach((ch) => {
+                            self.get_children().forEach((ch) => {
                                 ch.changed();
                             });
-                    }]],
+                        });
+                    },
                 }),
             }),
         }),

devices/wim/config/ags/js/quick-settings/button-grid.js

@@ -34,24 +34,27 @@ const GridButton = ({
         icon = Icon({
             className: 'grid-label',
             icon,
-            connections: [[Activated, (self) => {
+            setup: (self) => {
+                self.hook(Activated, () => {
                     self.setCss(`color: ${Activated.value ?
                         'rgba(189, 147, 249, 0.8)' :
                         'unset'};`);
-            }]],
+                });
+            },
         });
     }
     else {
         icon = Icon({
             className: 'grid-label',
-            connections: [
+            setup: (self) => {
-                icon,
+                self
-                [Activated, (self) => {
+                    .hook(...icon)
+                    .hook(Activated, () => {
                         self.setCss(`color: ${Activated.value ?
                             'rgba(189, 147, 249, 0.8)' :
                             'unset'};`);
-                }],
+                    });
-            ],
+            },
         });
     }
 
@@ -61,7 +64,9 @@ const GridButton = ({
             justification: 'left',
             truncate: 'end',
             maxWidthChars: 12,
-            connections: [indicator],
+            setup: (self) => {
+                self.hook(...indicator);
+            },
         });
     }
 
@@ -126,7 +131,8 @@ const GridButton = ({
                             icon: `${App.configDir }/icons/down-large.svg`,
                             className: 'grid-chev',
 
-                            connections: [[Activated, (self) => {
+                            setup: (self) => {
+                                self.hook(Activated, () => {
                                     let deg = 270;
 
                                     if (Activated.value) {
@@ -136,7 +142,8 @@ const GridButton = ({
                                     self.setCss(`
                                         -gtk-icon-transform: rotate(${deg}deg);
                                     `);
-                            }]],
+                                });
+                            },
                         }),
                     }),
 

devices/wim/config/ags/js/quick-settings/network.js

@@ -7,8 +7,8 @@ import { execAsync } from 'resource:///com/github/Aylur/ags/utils.js';
 
 import EventBox from '../misc/cursorbox.js';
 
-const SCROLL_THRESHOLD_H = 200;
+const SCROLL_THRESH_H = 200;
-const SCROLL_THRESHOLD_N = 7;
+const SCROLL_THRESH_N = 7;
 
 
 const AccessPoint = (ap) => {
@@ -22,28 +22,37 @@ const AccessPoint = (ap) => {
         hexpand: true,
         children: [
             Icon({
-                connections: [[widget.ap, (self) => {
+                setup: (self) => {
+                    self.hook(widget.ap, () => {
                         self.icon = widget.ap.value.iconName;
-                }]],
+                    });
+                },
             }),
 
             Label({
-                connections: [[widget.ap, (self) => {
+                setup: (self) => {
+                    self.hook(widget.ap, () => {
                         self.label = widget.ap.value.ssid || '';
-                }]],
+                    });
+                },
             }),
 
             Icon({
                 icon: 'object-select-symbolic',
                 hexpand: true,
                 hpack: 'end',
-                connections: [[Network, (self) => {
+                setup: (self) => {
-                    self.setCss(`opacity: ${
+                    self.hook(Network, () => {
+                        self.setCss(
+                            `opacity: ${
                                 widget.ap.value.ssid === Network.wifi.ssid ?
                                     '1' :
                                     '0'
-                    };`);
+                            };
-                }]],
+                        `,
+                        );
+                    });
+                },
             }),
         ],
     });
@@ -109,7 +118,8 @@ export const NetworkMenu = () => {
                 hscroll: 'never',
                 vscroll: 'never',
 
-                connections: [['edge-reached', (_, pos) => {
+                setup: (self) => {
+                    self.on('edge-reached', (_, pos) => {
                         // Manage scroll indicators
                         if (pos === 2) {
                             topArrow.revealChild = false;
@@ -119,7 +129,8 @@ export const NetworkMenu = () => {
                             topArrow.revealChild = true;
                             bottomArrow.revealChild = false;
                         }
-                }]],
+                    });
+                },
 
                 child: ListBox({
                     setup: (self) => {
@@ -127,9 +138,8 @@ export const NetworkMenu = () => {
                             return b.get_children()[0].ap.value.strength -
                                 a.get_children()[0].ap.value.strength;
                         });
-                    },
 
-                    connections: [[Network, (box) => {
+                        self.hook(Network, () => {
                             // Add missing APs
                             Network.wifi?.access_points.forEach((ap) => {
                                 if (ap.ssid !== 'Unknown') {
@@ -144,8 +154,8 @@ export const NetworkMenu = () => {
                                     else {
                                         APList.set(ap.ssid, AccessPoint(ap));
 
-                                    box.add(APList.get(ap.ssid));
+                                        self.add(APList.get(ap.ssid));
-                                    box.show_all();
+                                        self.show_all();
                                     }
                                 }
                             });
@@ -165,7 +175,8 @@ export const NetworkMenu = () => {
                                         APList.delete(ssid);
                                     }
                                     else {
-                                    apWidget.children[0].revealChild = false;
+                                        apWidget.children[0]
+                                            .revealChild = false;
                                         apWidget.toDestroy = true;
                                     }
                                 }
@@ -174,13 +185,13 @@ export const NetworkMenu = () => {
                             // Start scrolling after a specified height
                             // is reached by the children
                             const height = Math.max(
-                            box.get_parent().get_allocated_height(),
+                                self.get_parent().get_allocated_height(),
-                            SCROLL_THRESHOLD_H,
+                                SCROLL_THRESH_H,
                             );
 
-                        const scroll = box.get_parent().get_parent();
+                            const scroll = self.get_parent().get_parent();
 
-                        if (box.get_children().length > SCROLL_THRESHOLD_N) {
+                            if (self.get_children().length > SCROLL_THRESH_N) {
                                 scroll.vscroll = 'always';
                                 scroll.setCss(`min-height: ${height}px;`);
 
@@ -199,10 +210,11 @@ export const NetworkMenu = () => {
                             }
 
                             // Trigger sort_func
-                        box.get_children().forEach((ch) => {
+                            self.get_children().forEach((ch) => {
                                 ch.changed();
                             });
-                    }]],
+                        });
+                    },
                 }),
             }),
         }),

devices/wim/config/ags/js/quick-settings/slider-box.js

@@ -34,18 +34,20 @@ export default () => Box({
                         Audio.speaker.volume = value;
                     },
 
-                    connections: [
+                    setup: (self) => {
-                        [Audio, (slider) => {
+                        self
-                            slider.value = Audio.speaker?.volume;
+                            .hook(Audio, () => {
-                        }, 'speaker-changed'],
+                                self.value = Audio.speaker?.volume;
+                            }, 'speaker-changed')
 
-                        ['button-press-event', (s) => {
+                            .on('button-press-event', () => {
-                            s.cursor = 'grabbing';
+                                self.cursor = 'grabbing';
-                        }],
+                            })
-                        ['button-release-event', (s) => {
+
-                            s.cursor = 'pointer';
+                            .on('button-release-event', () => {
-                        }],
+                                self.cursor = 'pointer';
-                    ],
+                            });
+                    },
                 }),
             ],
         }),
@@ -70,18 +72,20 @@ export default () => Box({
                         Brightness.screen = value;
                     },
 
-                    connections: [
+                    setup: (self) => {
-                        [Brightness, (slider) => {
+                        self
-                            slider.value = Brightness.screen;
+                            .hook(Brightness, () => {
-                        }, 'screen'],
+                                self.value = Brightness.screen;
+                            }, 'screen')
 
-                        ['button-press-event', (s) => {
+                            .on('button-press-event', () => {
-                            s.cursor = 'grabbing';
+                                self.cursor = 'grabbing';
-                        }],
+                            })
-                        ['button-release-event', (s) => {
+
-                            s.cursor = 'pointer';
+                            .on('button-release-event', () => {
-                        }],
+                                self.cursor = 'pointer';
-                    ],
+                            });
+                    },
                 }),
             ],
         }),

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

@@ -14,9 +14,8 @@ export default (rev) => CenterBox({
                 self.set_active(Mpris.players.length > 0);
                 Mpris.disconnect(id);
             });
-        },
 
-        connections: [['toggled', (self) => {
+            self.on('toggled', () => {
                 if (self.get_active()) {
                     self.get_children()[0]
                         .setCss('-gtk-icon-transform: rotate(0deg);');
@@ -27,7 +26,8 @@ export default (rev) => CenterBox({
                         .setCss('-gtk-icon-transform: rotate(180deg);');
                     rev.revealChild = false;
                 }
-        }]],
+            });
+        },
 
         child: Icon({
             icon: `${App.configDir }/icons/down-large.svg`,