💄 chore(style, widget): update styles for gtk4 and fix some issues on existing widgets

focused-client widget now updates when your open a new window in a clean workspace

ags/widget/Notification.tsx

@@ -40,7 +40,7 @@ export function NotificationWidget({ notification, actionClicked, holdOnHover, s
 
     const conns: Map<GObject.Object, Array<number>> = new Map();
 
-    return <Gtk.Box hexpand={false} vexpand={false} class={`notification ${
+    return <Gtk.Box hexpand class={`notification ${
           Notifications.getDefault().getUrgencyString(notification.urgency)
       }`} orientation={Gtk.Orientation.VERTICAL} spacing={5}
       $={(self) => {
@@ -67,7 +67,7 @@ export function NotificationWidget({ notification, actionClicked, holdOnHover, s
           conns.forEach((ids, obj) => ids.forEach(id => obj.disconnect(id)));
       }}>
 
-        <Gtk.Box class={"top"} hexpand={true}>
+        <Gtk.Box class={"top"} hexpand>
             <Gtk.Image css={"font-size: 16px;"} $={(self) => {
                   const icon = getSymbolicIcon(notification.appIcon ?? notification.appName) ?? 
                       getSymbolicIcon(notification.appName) ?? getAppIcon(notification.appName);
@@ -99,16 +99,14 @@ export function NotificationWidget({ notification, actionClicked, holdOnHover, s
             <Gtk.Box class={"text"} orientation={Gtk.Orientation.VERTICAL}
               vexpand={true}>
 
-                <Gtk.Label class={"summary"} useMarkup={true} xalign={0}
-                  ellipsize={Pango.EllipsizeMode.END} label={
-                      notification.summary.replace(/[&]/g, "&amp;")
-                  }
+                <Gtk.Label class={"summary"} useMarkup={true} hexpand={false} xalign={0}
+                  vexpand ellipsize={Pango.EllipsizeMode.END} label={
+                      notification.summary.replace(/[&]/g, "&amp;")}
                 />
 
-                <Gtk.Label class={"body"} useMarkup={true} xalign={0} wrap={true} 
-                  wrapMode={Pango.WrapMode.WORD_CHAR} label={
-                      notification.body.replace(/[&]/g, "&amp;")
-                  }
+                <Gtk.Label class={"body"} useMarkup={true} xalign={0} wrap={true} hexpand={false}
+                  vexpand wrapMode={Pango.WrapMode.WORD_CHAR} label={
+                      notification.body.replace(/[&]/g, "&amp;")}
                 />
             </Gtk.Box>
         </Gtk.Box>

ags/widget/PopupWindow.tsx

@@ -1,9 +1,10 @@
 import { Astal, Gdk, Gtk } from "ags/gtk4";
 import { BackgroundWindow } from "./BackgroundWindow";
-import GObject from "gi://GObject?version=2.0";
 import { Accessor, CCProps, createComputed } from "ags";
 import { omitObjectKeys, WidgetNodeType } from "../scripts/utils";
 
+import GObject from "ags/gobject";
+
 
 type PopupWindowSpecificProps = {
     $?: (self: Astal.Window) => void;
@@ -73,7 +74,7 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {
           props.onDestroy?.(self);
       }}
       $={(self) => {
-          props.actionClickedOutside ??= self.close;
+          props.actionClickedOutside ??= (_: Astal.Window) => self.close();
 
           const conns: Map<GObject.Object, number> = new Map();
           const gestureClick = Gtk.GestureClick.new();
@@ -114,21 +115,24 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {
 
           props.$?.(self);
       }}>
-          <Gtk.Box
-            halign={props.halign}
-            valign={props.valign}
-            hexpand vexpand
-            css={`box {
+          <Gtk.Box halign={props.halign} valign={props.valign} hexpand vexpand css={`box {
                 margin-left: ${props.marginLeft ?? 0}px;
                 margin-right: ${props.marginRight ?? 0}px;
                 margin-top: ${props.marginTop ?? 0}px;
                 margin-bottom: ${props.marginBottom ?? 0}px;
-            }`}>
+            }`
+          }>
           
               <Gtk.Box widthRequest={props.widthRequest} heightRequest={props.heightRequest}
                 $={(self) => {
                     const gestureClick = Gtk.GestureClick.new();
                     self.add_controller(gestureClick);
+
+                    const clickConn = gestureClick.connect("released", () => true);
+                    const destroyConn = self.connect("destroy", () => {
+                        gestureClick.disconnect(clickConn);
+                        self.disconnect(destroyConn);
+                    });
                 }}>
                   {props.children}
               </Gtk.Box>

ags/widget/bar/FocusedClient.tsx

@@ -7,6 +7,9 @@ import Pango from "gi://Pango?version=1.0";
 
 const hyprland = AstalHyprland.get_default();
 
+// Fix empty focused-client on opening a window on an empty workspace
+hyprland.connect("client-added", () => hyprland.notify("focused-client"));
+
 export const FocusedClient = () => {
     const focusedClient = createBinding(hyprland, "focusedClient");
 

ags/widget/bar/Workspaces.tsx

@@ -81,15 +81,16 @@ export const Workspaces = () => {
                     const showId = createComputed([
                         Config.getDefault().bindProperty("workspaces.always_show_id", "boolean").as(Boolean),
                         Config.getDefault().bindProperty("workspaces.enable_helper", "boolean").as(Boolean),
-                        showNumbers
-                    ], (alwaysShowIds, enableHelper, showIds) => {
+                        showNumbers,
+                        i
+                    ], (alwaysShowIds, enableHelper, showIds, i) => {
                         if(enableHelper && !alwaysShowIds) {
-                            const previousWorkspace = defaultWorkspaces.get()[i.get()-1];
-                            const nextWorkspace = defaultWorkspaces.get()[i.get()+1];
+                            const previousWorkspace = defaultWorkspaces.get()[i-1];
+                            const nextWorkspace = defaultWorkspaces.get()[i+1];
 
-                            if((defaultWorkspaces.get().filter((_, ii) => ii < i.get()).length > 0 && 
+                            if((defaultWorkspaces.get().filter((_, ii) => ii < i).length > 0 && 
                                 previousWorkspace?.id < (ws.id-1)) || 
-                               (defaultWorkspaces.get().filter((_, ii) => ii > i.get()).length > 0 && 
+                               (defaultWorkspaces.get().filter((_, ii) => ii > i).length > 0 && 
                                 nextWorkspace?.id > (ws.id+1))) {
 
                                 return true;