refactor(ags launcher): clean up stuff and fix label vpack

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

@@ -1,31 +1,13 @@
 import App from 'resource:///com/github/Aylur/ags/app.js';
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 
-import { Box, Button, CenterBox, Icon, Label } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Box, Icon, Label } from 'resource:///com/github/Aylur/ags/widget.js';
 import { lookUpIcon } from 'resource:///com/github/Aylur/ags/utils.js';
 
-import Separator from '../misc/separator.js';
+import EventBox from '../misc/cursorbox.js';
 
-const ENTRY_SPACING = 16;
 
 export default (app) => {
-    const title = Label({
-        class_name: 'title',
-        label: app.name,
-        xalign: 0,
-        vpack: 'center',
-        truncate: 'end',
-    });
-
-    const description = Label({
-        class_name: 'description',
-        label: app.description || '',
-        wrap: true,
-        xalign: 0,
-        justification: 'left',
-        vpack: 'center',
-    });
-
     const icon = Icon({
         icon: lookUpIcon(app.icon_name) ?
             app.icon_name :
@@ -35,15 +17,32 @@ export default (app) => {
         size: 42,
     });
 
-    const textBox = CenterBox({
+    const textBox = Box({
         vertical: true,
-        start_widget: title,
-        center_widget: description,
-        end_widget: Separator(ENTRY_SPACING, { vertical: true }),
+        vpack: 'start',
+
+        children: [
+            Label({
+                class_name: 'title',
+                label: app.name,
+                xalign: 0,
+                truncate: 'end',
+            }),
+
+            Label({
+                class_name: 'description',
+                label: app.description || '',
+                wrap: true,
+                xalign: 0,
+                justification: 'left',
+            }),
+
+            Label(),
+        ],
     });
 
 
-    return Button({
+    return EventBox({
         hexpand: true,
         class_name: 'app',
 
@@ -60,7 +59,6 @@ export default (app) => {
         child: Box({
             children: [
                 icon,
-                Separator(ENTRY_SPACING),
                 textBox,
             ],
         }),

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

@@ -7,15 +7,13 @@ import { Fzf } from '../../node_modules/fzf/dist/fzf.es.js';
 import { Box, Entry, Icon, Label, ListBox, Scrollable } from 'resource:///com/github/Aylur/ags/widget.js';
 
 import PopupWindow from '../misc/popup.js';
-import Separator from '../misc/separator.js';
 import AppItem from './app-item.js';
 
 
 const Applauncher = ({ window_name = 'applauncher' } = {}) => {
-    const ICON_SEPARATION = 4;
-
     let fzfResults;
     const list = ListBox();
+
     const setSort = (text) => {
         const fzf = new Fzf(Applications.list, {
             selector: (app) => app.name,
@@ -25,8 +23,8 @@ const Applauncher = ({ window_name = 'applauncher' } = {}) => {
 
         fzfResults = fzf.find(text);
         list.set_sort_func((a, b) => {
-            const row1 = a.get_children()[0].children[1]?.app.name;
-            const row2 = b.get_children()[0].children[1]?.app.name;
+            const row1 = a.get_children()[0]?.app.name;
+            const row2 = b.get_children()[0]?.app.name;
 
             if (!row1 || !row2) {
                 return 0;
@@ -42,22 +40,13 @@ const Applauncher = ({ window_name = 'applauncher' } = {}) => {
             ch.destroy();
         });
 
-        [...Applications.query('').flatMap((app) => {
-            const item = AppItem(app);
+        const children = Applications.query('')
+            .flatMap((app) => AppItem(app));
 
-            return Box({
-                children: [
-                    Separator(ICON_SEPARATION, {
-                        binds: [['visible', item, 'visible']],
-                    }),
-                    item,
-                ],
-            });
-        }),
-        Separator(ICON_SEPARATION)]
-            .forEach(((ch) => {
-                list.add(ch);
-            }));
+        children.forEach((ch) => {
+            list.add(ch);
+        });
+        list.show_all();
     };
 
     makeNewChildren();
@@ -90,7 +79,7 @@ const Applauncher = ({ window_name = 'applauncher' } = {}) => {
             list.get_children().forEach((row) => {
                 row.changed();
 
-                const item = row.get_children()[0].children[1];
+                const item = row.get_children()[0];
 
                 if (item?.app) {
                     const isMatching = fzfResults.find((r) => {

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

@@ -77,27 +77,7 @@
   .app {
     all: unset;
     transition: 200ms;
-    padding: 2px 9px;
-
-    &:active {
-      background-color: rgba($contrast-bg, 0.5);
-      border-radius: 9px;
-      box-shadow: inset 0 0 0 3px rgba(238, 238, 238, 0.03);
-
-      .title {
-        color: #f8f8f2;
-      }
-    }
-
-    &:hover, &:focus {
-      .title {
-        color: $contrast-bg;
-      }
-
-      image {
-        -gtk-icon-shadow: 2px 2px $contrast-bg;
-      }
-    }
+    border-radius: 9px;
 
     label {
       transition: 200ms;
@@ -113,10 +93,16 @@
 
     image {
       transition: 200ms;
+      margin-right: 8px;
+    }
+
+    &:active {
+      background-color: rgba($contrast-bg, 0.5);
+      box-shadow: inset 0 0 0 3px rgba(238, 238, 238, 0.03);
     }
   }
 
-  *:selected {
+  *:selected, .app:hover, .app:focus {
     * {
       font-weight: unset;
     }