[Meson] Prepare

config/astal/components/bar/modules/Hyprland.tsx

@@ -3,6 +3,7 @@ import { bind, GObject } from "astal";
 import AstalHyprland from "gi://AstalHyprland";
 import { Gtk } from "astal/gtk4";
 
+const hypr = AstalHyprland.get_default();
 const SYNC = GObject.BindingFlags.SYNC_CREATE;
 
 const SysTray = () => {
@@ -48,8 +49,6 @@ const SysTray = () => {
 };
 
 const Workspace = () => {
-    const hypr = AstalHyprland.get_default();
-
     return (
         <box>
             {bind(hypr, "workspaces").as(wss =>
@@ -61,9 +60,9 @@ const Workspace = () => {
                             cssClasses={bind(hypr, "focusedWorkspace").as(fw =>
                                 ws === fw
                                     ? [
-                                          "focused-workspace-button",
-                                          "workspace-button",
-                                      ]
+                                        "focused-workspace-button",
+                                        "workspace-button",
+                                    ]
                                     : ["workspace-button"],
                             )}
                             onButtonPressed={() => ws.focus()}
@@ -80,88 +79,13 @@ const Workspace = () => {
  * displaying all available clients
  */
 const ActiveWindow = () => {
-    const hypr = AstalHyprland.get_default();
     const focused = bind(hypr, "focusedClient");
 
     const WindowPopover = (): Gtk.Popover => {
         // Set up boxes + Popover
-        const clients = new Map<string, Gtk.Button>();
         const popover = new Gtk.Popover();
-        const popoverBox = new Gtk.Box({
-            orientation: Gtk.Orientation.VERTICAL,
-        });
 
-        const widgetTitle = new Gtk.Label({
-            cssClasses: ["title-2"],
-            label: "Available Windows",
-        });
-
-        popoverBox.append(widgetTitle);
-
-        const seaparator = new Gtk.Separator({
-            marginTop: 5,
-            marginBottom: 10,
-        });
-
-        popoverBox.append(seaparator);
-
-        const addClient = (client: AstalHyprland.Client) => {
-            const clientBox = new Gtk.Box();
-
-            // Workspace description
-            const descWS = new Gtk.Label({ label: "(WS " });
-
-            // Workpsace information
-            const workspace = new Gtk.Label();
-            client.workspace.bind_property("name", workspace, "label", SYNC);
-
-            const windowClassDesc = new Gtk.Label({ label: ") [" });
-
-            const windowClass = new Gtk.Label();
-            windowClass.label = client.get_initial_class();
-
-            const titleDesc = new Gtk.Label({ label: "] " });
-            titleDesc.set_margin_end(2);
-
-            const title = new Gtk.Label();
-            client.bind_property("title", title, "label", SYNC);
-
-            clientBox.append(descWS);
-            clientBox.append(workspace);
-            clientBox.append(windowClassDesc);
-            clientBox.append(windowClass);
-            clientBox.append(titleDesc);
-            clientBox.append(title);
-
-            const button = new Gtk.Button();
-            button.connect( 'clicked', () => {
-                client.workspace.focus();
-            } );
-            button.set_child(clientBox);
-
-            popoverBox.append(button);
-
-            clients.set(client.get_address(), button);
-        };
-
-        // Populate with already added clients
-        const c = hypr.get_clients();
-        for (let index = 0; index < c.length; index++) {
-            addClient(c[index]);
-        }
-
-        hypr.connect("client-added", (_, client) => {
-            addClient(client);
-        });
-
-        hypr.connect("client-removed", (_, client) => {
-            const c = clients.get(client);
-            if (c) {
-                popoverBox.remove(c);
-                c.run_dispose();
-                clients.delete(client);
-            }
-        });
+        const popoverBox = WindowPopoverBox();
 
         popover.set_child(popoverBox);
         return popover;
@@ -177,19 +101,37 @@ const ActiveWindow = () => {
             <button
                 onClicked={() => windowPopover.popup()}
                 cssClasses={["bar-button"]}
-            >
-                {focused.as(
-                    client =>
-                        client && (
-                            <label label={bind(client, "title").as(String)} />
-                        ),
-                )}
-            </button>
+                child={
+                    focused.as(
+                        client =>
+                            client && (
+                                <label label={bind(client, "title").as(String)} />
+                            ),
+                    )
+                }></button>
             {windowPopover}
-        </box>
+        </box >
     );
 };
 
+const WindowPopoverBox = () => {
+    return <box vertical>
+        <label label={"Available Windows"} cssClasses={['title-2']}></label>
+        <Gtk.Separator marginTop={5} marginBottom={5}></Gtk.Separator>
+        <box vertical>
+            {bind(hypr, 'clients').as(clients => {
+                return clients.map(client => {
+                    return <box>
+                        <label label={bind(client, 'workspace').as(w => `(WS ${w})`)}></label>
+                        <label label={bind(client, 'initialClass').as(c => `[${c}]`)}></label>
+                        <label label={bind(client, 'title')}></label>
+                    </box>
+                })
+            })}
+        </box>
+    </box>
+}
+
 export default {
     Workspace,
     ActiveWindow,