From 2276acc97ff832d6e91756731658f1f33b005506 Mon Sep 17 00:00:00 2001
From: retrozinndev <joaovodias@gmail.com>
Date: Wed, 30 Jul 2025 16:13:49 -0300
Subject: [PATCH] :zap: chore: use floating numbers instead of integers on
 levelbar, simplify widget structure on apps-window

---
 ags/window/AppsWindow.tsx | 87 +++++++++++++++++++++------------------
 ags/window/Bar.tsx        |  1 -
 ags/window/OSD.tsx        |  5 +--
 3 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/ags/window/AppsWindow.tsx b/ags/window/AppsWindow.tsx
index 4fa7a9e..694edc9 100644
--- a/ags/window/AppsWindow.tsx
+++ b/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()!
-              .get_first_child()!.get_first_child() as Gtk.SearchEntry;
+          const entry = getPopupWindowContainer(self).get_first_child()!
+              .get_first_child()!.get_first_child()! as Gtk.SearchEntry;
 
           for(const ignoredKey of ignoredKeys) 
               if(key === ignoredKey) return
 
           entry.grab_focus();
       }}>
-
-        <Gtk.Box class={"apps-window-container"} orientation={Gtk.Orientation.VERTICAL} hexpand vexpand>
-            <Gtk.SearchEntry onSearchChanged={(self) => {
+        <Gtk.Box hexpand={false} halign={Gtk.Align.CENTER}>
+            <Gtk.SearchEntry hexpand={false} onSearchChanged={(self) => {
                 setResults(getAstalApps().fuzzy_query(self.text.trim()));
-            }} />
-            <Gtk.Box class="apps-area" hexpand vexpand>
-                <Gtk.ScrolledWindow vscrollbarPolicy={Gtk.PolicyType.AUTOMATIC}
-                  hscrollbarPolicy={Gtk.PolicyType.NEVER} overlayScrolling={true} 
-                  propagateNaturalHeight={false} hexpand vexpand>
-
-                    <Gtk.FlowBox rowSpacing={60} columnSpacing={60} homogeneous activateOnSingleClick
-                      minChildrenPerLine={1}>
-
-                        <For each={results}>
-                            {(app) => 
-                                <Gtk.Button heightRequest={150} tooltipMarkup={`${app.name}${app.description ? 
-                                      `\n<span foreground="#7f7f7f">${app.description}</span>`
-                                    : ""}`.replace(/\&/g, "&amp;")
-                                  } onActivate={() => {
-                                      execApp(app);
-                                      window.close();
-                                  }} onClicked={() => {
-                                      execApp(app);
-                                      window.close();
-                                  }}>
-                                    <Gtk.Box orientation={Gtk.Orientation.VERTICAL} vexpand>
-                                        <Gtk.Image iconName={getAppIcon(app) ?? "application-x-executable"} 
-                                          iconSize={Gtk.IconSize.LARGE} vexpand={false} />
-                                        <Gtk.Label ellipsize={Pango.EllipsizeMode.END} label={app.name}
-                                          valign={Gtk.Align.END} vexpand />
-                                    </Gtk.Box>
-                                </Gtk.Button>
-                            }
-                        </For>
-                    </Gtk.FlowBox>
-                </Gtk.ScrolledWindow>
-            </Gtk.Box>
+            }} onStopSearch={(self) => (self.get_root() as Astal.Window)?.close()} />
         </Gtk.Box>
+
+        <Gtk.ScrolledWindow vscrollbarPolicy={Gtk.PolicyType.AUTOMATIC}
+          hscrollbarPolicy={Gtk.PolicyType.NEVER} overlayScrolling
+          propagateNaturalHeight={false} hexpand vexpand>
+
+            <Gtk.Box hexpand={false} vexpand={false}>
+                <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={`${
+                                escapeUnintendedMarkup(app.name)}${app.description ? 
+                                  `\n<span foreground="#7f7f7f">${
+                                      escapeUnintendedMarkup(app.description)
+                                  }</span>`
+                                : ""}`
+                              } onActivate={(self) => {
+                                  execApp(app);
+                                  (self.get_root() as Astal.Window)?.close();
+                              }} onClicked={(self) => {
+                                  execApp(app);
+                                  (self.get_root() as Astal.Window)?.close();
+                              }}>
+                                <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} class={"app-icon"} />
+                                    <Gtk.Label ellipsize={Pango.EllipsizeMode.END} label={app.name}
+                                      valign={Gtk.Align.END} maxWidthChars={30} class={"app-name"} />
+                                </Gtk.Box>
+                            </Gtk.Button>
+                        }
+                    </For>
+                </Gtk.FlowBox>
+            </Gtk.Box>
+        </Gtk.ScrolledWindow>
     </PopupWindow>
 }
diff --git a/ags/window/Bar.tsx b/ags/window/Bar.tsx
index 2d6d1c5..eadaaac 100644
--- a/ags/window/Bar.tsx
+++ b/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";
diff --git a/ags/window/OSD.tsx b/ags/window/OSD.tsx
index 99e1a0c..b0d7954 100644
--- a/ags/window/OSD.tsx
+++ b/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) => 
-                          Math.floor(volume * 100))} 
-                  maxValue={Wireplumber.getDefault().getMaxSinkVolume()}
+                      Wireplumber.getDefault().getDefaultSink(), "volume")} 
+                  maxValue={Wireplumber.getDefault().getMaxSinkVolume() / 100}
                 />
             </Gtk.Box>
         </Gtk.Box>