feat(ags overview): make custom reveal anim

devices/wim/config/ags/config.js

@@ -16,7 +16,7 @@ import QSettings from './js/quick-settings/main.js';
 
 const scss = `${App.configDir }/scss/main.scss`;
 const css = `${App.configDir }/style.css`;
-const closeWinDelay = 500;
+const closeWinDelay = 800;
 
 exec(`sassc ${scss} ${css}`);
 Setup();

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

@@ -17,7 +17,7 @@ import AppItem from './app-item.js';
 const Applauncher = ({ window_name = 'applauncher' } = {}) => {
     /** @type Array<any> */
     let fzfResults;
-    const list = ListBox();
+    const list = ListBox({});
 
     /** @param {String} text */
     const setSort = (text) => {
@@ -33,7 +33,6 @@ const Applauncher = ({ window_name = 'applauncher' } = {}) => {
         });
 
         fzfResults = fzf.find(text);
-        // @ts-expect-error
         list.set_sort_func(
             /**
              * @param {ListBoxRow} a
@@ -55,7 +54,6 @@ const Applauncher = ({ window_name = 'applauncher' } = {}) => {
 
     const makeNewChildren = () => {
         /** @type Array<typeof imports.gi.Gtk.ListBoxRow> */
-        // @ts-expect-error
         const rows = list.get_children();
 
         rows.forEach((ch) => {
@@ -66,7 +64,6 @@ const Applauncher = ({ window_name = 'applauncher' } = {}) => {
             .flatMap((app) => AppItem(app));
 
         children.forEach((ch) => {
-            // @ts-expect-error
             list.add(ch);
         });
         list.show_all();
@@ -103,7 +100,6 @@ const Applauncher = ({ window_name = 'applauncher' } = {}) => {
             let visibleApps = 0;
 
             /** @type Array<ListBoxRow> */
-            // @ts-expect-error
             const rows = list.get_children();
 
             rows.forEach((row) => {

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

@@ -22,7 +22,7 @@ import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
  */
 export default ({
     transition = 'slide_down',
-    transition_duration = 500,
+    transition_duration = 800,
     onOpen = () => {/**/},
     onClose = () => {/**/},
 

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

@@ -1,9 +1,8 @@
 import App from 'resource:///com/github/Aylur/ags/app.js';
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 
-import { Box, Overlay } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Box, Overlay, Window } from 'resource:///com/github/Aylur/ags/widget.js';
 
-import PopupWindow from '../misc/popup.js';
 import { WorkspaceRow, getWorkspaces, updateWorkspaces } from './workspaces.js';
 import { Highlighter, updateCurrentWorkspace } from './current-workspace.js';
 import { updateClients } from './clients.js';
@@ -65,8 +64,10 @@ export const Overview = () => {
 
         attribute: {
             get_child: () => mainBox,
+            closing: false,
         },
 
+        // Make size of overlay big enough for content
         child: Box({
             class_name: 'overview',
             css: `
@@ -78,7 +79,7 @@ export const Overview = () => {
         // TODO: throttle this?
         setup: (self) => {
             self.on('get-child-position', (_, ch) => {
-                if (ch === mainBox) {
+                if (ch === mainBox && !self.attribute.closing) {
                     // @ts-expect-error
                     self.child.setCss(`
                         transition: min-height 0.2s ease, min-width 0.2s ease;
@@ -93,14 +94,52 @@ export const Overview = () => {
     return widget;
 };
 
+// FIXME: can't use PopupWindow because this is an overlay already
 export default () => {
-    const win = PopupWindow({
+    const transition_duration = 800;
+    const win = Window({
         name: 'overview',
-        blur: true,
-        close_on_unfocus: 'none',
-        onOpen: () => {
-            win.attribute.set_child(Overview());
-            win.attribute.get_child().attribute.get_child().attribute.update();
+        visible: false,
+
+        // Needs this to have space
+        // allocated at the start
+        child: Box({
+            css: `
+                min-height: 1px;
+                min-width: 1px;
+                padding: 1px;
+            `,
+        }),
+
+        attribute: { close_on_unfocus: 'none' },
+
+        setup: (self) => {
+            Hyprland.sendMessage('[[BATCH]] ' +
+                `keyword layerrule ignorealpha[0.97],${self.name}; ` +
+                `keyword layerrule blur,${self.name}
+            `);
+
+            self.hook(App, (_, currentName, isOpen) => {
+                if (currentName === self.name) {
+                    if (isOpen) {
+                        self.child = Overview();
+                        self.show_all();
+                        // @ts-expect-error
+                        self.child.attribute.get_child().attribute.update();
+                    }
+                    else {
+                        // @ts-expect-error
+                        self.child.attribute.closing = true;
+                        // @ts-expect-error
+                        self.child.child.css = `
+                            min-height: 1px;
+                            min-width: 1px;
+                            transition: all
+                                ${transition_duration - 10}ms ease;
+                        `;
+                    }
+                }
+            });
         },
     });
 

devices/wim/config/ags/js/powermenu.js

@@ -45,6 +45,5 @@ const PowermenuWidget = () => CenterBox({
 
 export default () => PopupWindow({
     name: 'powermenu',
-    transition: 'crossfade',
     child: PowermenuWidget(),
 });