refactor(ags applauncher): use latest code from aylur

devices/wim/config/ags/js/applauncher/app-item.js

@@ -0,0 +1,51 @@
+import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import { lookUpIcon } from 'resource:///com/github/Aylur/ags/utils.js';
+
+import Separator from '../misc/separator.js';
+
+
+export default app => {
+    const title = Widget.Label({
+        class_name: 'title',
+        label: app.name,
+        xalign: 0,
+        vpack: 'center',
+        truncate: 'end',
+    });
+
+    const description = Widget.Label({
+        class_name: 'description',
+        label: app.description || '',
+        wrap: true,
+        xalign: 0,
+        justification: 'left',
+        vpack: 'center',
+    });
+
+    const icon = Widget.Icon({
+        icon: lookUpIcon(app.icon_name) ? app.icon_name :
+            app.app.get_string('Icon') !== 'nix-snowflake' ? app.app.get_string('Icon') : '',
+        size: 42,
+    });
+
+    const textBox = Widget.Box({
+        vertical: true,
+        vpack: 'center',
+        children: [title, description],
+    });
+
+    return Widget.Button({
+        class_name: 'app',
+        setup: self => self.app = app,
+        on_clicked: () => {
+            App.closeWindow('applauncher');
+            Hyprland.sendMessage(`dispatch exec sh -c ${app.executable}`);
+            ++app.frequency;
+        },
+        child: Widget.Box({
+            children: [icon, Separator(16), textBox],
+        }),
+    });
+};

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

@@ -2,102 +2,78 @@ import App          from 'resource:///com/github/Aylur/ags/app.js';
 import Applications from 'resource:///com/github/Aylur/ags/service/applications.js';
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 
-import { Label, Box, Icon, Button, Scrollable, Entry } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Box, Entry, Icon, Label, Scrollable } from 'resource:///com/github/Aylur/ags/widget.js';
 
-import Separator   from '../misc/separator.js';
 import PopupWindow from '../misc/popup.js';
-
+import Separator from '../misc/separator.js';
-const icons = {
+import AppItem from './app-item.js';
-    apps: {
-        apps: 'view-app-grid-symbolic',
-        search: 'preferences-system-search-symbolic',
-    },
-};
 
 
-const AppItem = (app, window) => {
+const Applauncher = ({ window_name = 'applauncher' } = {}) => {
-    if (app.app.get_string('Icon') == 'Nextcloud')
+    const children = () => [
-        return;
+        ...Applications.query('').flatMap(app => {
-
+            const item = AppItem(app);
-    return Button({
+            return [
-        className: 'app',
+                Separator(4, {
-        connections: [['clicked', () => {
+                    binds: [['visible', item, 'visible']],
-            App.closeWindow(window);
-            Hyprland.sendMessage(`dispatch exec sh -c ${app.executable}`);
-            // TODO: focus on new client. Is this only needed after launch?
-            ++app.frequency;
-        }]],
-        child: Box({
-            children: [
-                Icon({
-                    icon: app.app.get_string('Icon'),
-                    size: 42,
                 }),
-                Box({
+                item,
+            ];
+        }),
+        Separator(4),
+    ];
+
+    const list = Box({
         vertical: true,
-                    children: [
+        children: children(),
-                        Label({
+    });
-                            className: 'title',
+
-                            label: app.name,
+    const entry = Entry({
-                            xalign: 0,
+        hexpand: true,
-                            vpack: 'center',
+        placeholder_text: 'Search',
-                            ellipsize: 3,
+
-                        }),
+        // set some text so on-change works the first time
-                        Label({
+        text: '-',
-                            className: 'description',
+        on_accept: ({ text }) => {
-                            label: app.description || '',
+            const list = Applications.query(text || '');
-                            wrap: true,
+            if (list[0]) {
-                            xalign: 0,
+                App.toggleWindow(window_name);
-                            justification: 'left',
+                Hyprland.sendMessage(`dispatch exec sh -c ${list[0]}`);
-                            vpack: 'center',
+                ++list[0].frequency;
-                        }),
+            }
-                    ],
+        },
-                }),
+        on_change: ({ text }) => {
-            ],
+            let visibleApps = 0;
-        }),
+            list.children.map(item => {
+                if (item.app) {
+                    item.visible = item.app.match(text);
+
+                    if (item.app.match(text))
+                        ++visibleApps;
+                }
+            });
+            placeholder.visible = visibleApps <= 0;
+        },
     });
-};
 
-const Applauncher = ({ windowName = 'applauncher' } = {}) => {
-    const list = Box({ vertical: true });
     const placeholder = Label({
         label: "   Couldn't find a match",
         className: 'placeholder',
     });
-    const entry = Entry({
-        hexpand: true,
-        placeholderText: 'Search',
-        onAccept: ({ text }) => {
-            const list = Applications.query(text);
-            if (list[0]) {
-                App.toggleWindow(windowName);
-                list[0].launch();
-            }
-        },
-        onChange: ({ text }) => {
-            list.children = Applications.query(text).map(app => [
-                Separator(4),
-                AppItem(app, windowName),
-            ]).flat();
-            list.add(Separator(4));
-            list.show_all();
 
-            placeholder.visible = list.children.length === 1;
-        },
-    });
 
     return Box({
         className: 'applauncher',
-        properties: [['list', list]],
         vertical: true,
         children: [
             Box({
                 className: 'header',
                 children: [
-                    Icon(icons.apps.search),
+                    Icon('preferences-system-search-symbolic'),
                     entry,
                 ],
             }),
+
             Scrollable({
                 hscroll: 'never',
                 child: Box({
@@ -106,14 +82,15 @@ const Applauncher = ({ windowName = 'applauncher' } = {}) => {
                 }),
             }),
         ],
-        connections: [[App, (_b, name, visible) => {
+        connections: [[App, (_, name, visible) => {
-            if (name !== windowName)
+            if (name !== window_name)
                 return;
 
-            entry.set_text('-'); // force onChange
+            entry.text = '';
-            entry.set_text('');
             if (visible)
                 entry.grab_focus();
+            else
+                list.children = children();
         }]],
     });
 };

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

@@ -1,15 +1,17 @@
 import { Box } from 'resource:///com/github/Aylur/ags/widget.js';
 
 
-export default (size, { vertical = false } = {}) => {
+export default (size, { vertical = false, ...props } = {}) => {
     if (vertical) {
         return Box({
             css: `min-height: ${size}px;`,
+            ...props,
         });
     }
     else {
         return Box({
             css: `min-width: ${size}px;`,
+            ...props,
         });
     }
 };

devices/wim/config/ags/scss/widgets/applauncher.scss

@@ -107,7 +107,8 @@
 
     image {
       transition: 200ms;
-      margin-right: 9px;
+      margin-left: -10px;
+      margin-bottom: -8px;
     }
   }
 }