⚡ chore: use floating numbers instead of integers on levelbar, simplify widget structure on apps-window

ags/window/AppsWindow.tsx

@@ -1,10 +1,11 @@
 import { Astal, Gdk, Gtk } from "ags/gtk4";
 import { execApp, getAppIcon, getApps, getAstalApps } from "../scripts/apps";
-import { PopupWindow } from "../widget/PopupWindow";
+import { getPopupWindowContainer, PopupWindow } from "../widget/PopupWindow";
 
 import AstalApps from "gi://AstalApps";
 import Pango from "gi://Pango?version=1.0";
 import { createState, For } from "ags";
+import { escapeUnintendedMarkup } from "../scripts/utils";
 
 
 const ignoredKeys = [
@@ -24,53 +25,61 @@ export const AppsWindow = (mon: number) => {
 
     return <PopupWindow namespace="apps-window" layer={Astal.Layer.OVERLAY}
       exclusivity={Astal.Exclusivity.IGNORE} monitor={mon} marginTop={64} 
+      class={"apps-window"} orientation={Gtk.Orientation.VERTICAL}
       cssBackgroundWindow="background: rgba(0, 0, 0, .2);"
       actionKeyPressed={(self, key) => {
-          const entry = self.get_first_child()!.get_first_child()!
+          const entry = getPopupWindowContainer(self).get_first_child()!
-              .get_first_child()!.get_first_child() as Gtk.SearchEntry;
+              .get_first_child()!.get_first_child()! as Gtk.SearchEntry;
 
           for(const ignoredKey of ignoredKeys) 
               if(key === ignoredKey) return
 
           entry.grab_focus();
       }}>
-
+        <Gtk.Box hexpand={false} halign={Gtk.Align.CENTER}>
-        <Gtk.Box class={"apps-window-container"} orientation={Gtk.Orientation.VERTICAL} hexpand vexpand>
+            <Gtk.SearchEntry hexpand={false} onSearchChanged={(self) => {
-            <Gtk.SearchEntry onSearchChanged={(self) => {
                 setResults(getAstalApps().fuzzy_query(self.text.trim()));
-            }} />
+            }} onStopSearch={(self) => (self.get_root() as Astal.Window)?.close()} />
-            <Gtk.Box class="apps-area" hexpand vexpand>
+        </Gtk.Box>
+
         <Gtk.ScrolledWindow vscrollbarPolicy={Gtk.PolicyType.AUTOMATIC}
-                  hscrollbarPolicy={Gtk.PolicyType.NEVER} overlayScrolling={true} 
+          hscrollbarPolicy={Gtk.PolicyType.NEVER} overlayScrolling
           propagateNaturalHeight={false} hexpand vexpand>
 
-                    <Gtk.FlowBox rowSpacing={60} columnSpacing={60} homogeneous activateOnSingleClick
+            <Gtk.Box hexpand={false} vexpand={false}>
-                      minChildrenPerLine={1}>
+                <Gtk.FlowBox rowSpacing={60} columnSpacing={60} activateOnSingleClick
+                  minChildrenPerLine={1} homogeneous onChildActivated={(_, child) =>
+                      child.get_child()!.activate() // pass activation to button
+                  }>
 
                     <For each={results}>
                         {(app) => 
-                                <Gtk.Button heightRequest={150} tooltipMarkup={`${app.name}${app.description ? 
+                            <Gtk.Button heightRequest={150} tooltipMarkup={`${
-                                      `\n<span foreground="#7f7f7f">${app.description}</span>`
+                                escapeUnintendedMarkup(app.name)}${app.description ? 
-                                    : ""}`.replace(/\&/g, "&amp;")
+                                  `\n<span foreground="#7f7f7f">${
-                                  } onActivate={() => {
+                                      escapeUnintendedMarkup(app.description)
+                                  }</span>`
+                                : ""}`
+                              } onActivate={(self) => {
                                   execApp(app);
-                                      window.close();
+                                  (self.get_root() as Astal.Window)?.close();
-                                  }} onClicked={() => {
+                              }} onClicked={(self) => {
                                   execApp(app);
-                                      window.close();
+                                  (self.get_root() as Astal.Window)?.close();
                               }}>
-                                    <Gtk.Box orientation={Gtk.Orientation.VERTICAL} vexpand>
+                                <Gtk.Box orientation={Gtk.Orientation.VERTICAL} valign={Gtk.Align.CENTER}
+                                  hexpand={false} vexpand={false}>
+
                                     <Gtk.Image iconName={getAppIcon(app) ?? "application-x-executable"} 
-                                          iconSize={Gtk.IconSize.LARGE} vexpand={false} />
+                                      iconSize={Gtk.IconSize.LARGE} vexpand={false} class={"app-icon"} />
                                     <Gtk.Label ellipsize={Pango.EllipsizeMode.END} label={app.name}
-                                          valign={Gtk.Align.END} vexpand />
+                                      valign={Gtk.Align.END} maxWidthChars={30} class={"app-name"} />
                                 </Gtk.Box>
                             </Gtk.Button>
                         }
                     </For>
                 </Gtk.FlowBox>
+            </Gtk.Box>
         </Gtk.ScrolledWindow>
-            </Gtk.Box>
-        </Gtk.Box>
     </PopupWindow>
 }

ags/window/Bar.tsx

@@ -1,5 +1,4 @@
 import { Astal, Gtk } from "ags/gtk4";
-
 import { Tray } from "../widget/bar/Tray";
 import { Workspaces } from "../widget/bar/Workspaces";
 import { FocusedClient } from "../widget/bar/FocusedClient";

ags/window/OSD.tsx

@@ -30,9 +30,8 @@ export const OSD = (mon: number) => {
                   ellipsize={Pango.EllipsizeMode.END}
                 />
                 <Gtk.LevelBar class={"levelbar"} value={createBinding(
-                      Wireplumber.getDefault().getDefaultSink(), "volume").as((volume: number) => 
+                      Wireplumber.getDefault().getDefaultSink(), "volume")} 
-                          Math.floor(volume * 100))} 
+                  maxValue={Wireplumber.getDefault().getMaxSinkVolume() / 100}
-                  maxValue={Wireplumber.getDefault().getMaxSinkVolume()}
                 />
             </Gtk.Box>
         </Gtk.Box>