💄 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/style.scss

@@ -200,13 +200,24 @@ tooltip > box {
   }
 }
 
-popover {
+popover.menu {
-  padding: 4px;
   background: wal.$background;
   border-radius: 14px;
+  $padding: 4px;
+
   & contents {
-    & * {
+    & viewport > stack > * {
-      padding: 2px 4px;
+      padding: 4px;
+      padding-top: 0;
+
+      & > * > * {
+        & > separator {
+          min-height: .5px;
+          margin: 3px 2px;
+          background: rgba(colors.$fg-disabled, .1);
+        }
+        & > *:not(separator) > * {
+          padding: 6px;
           border-radius: 10px;
           font-size: 12px;
           font-weight: 600;
@@ -215,11 +226,7 @@ popover {
             background: wal.$color1;
           }
         }
-
+      }
-    & separator {
-      all: unset;
-      margin: 0 4px;
-      color: wal.$background;
     }
   }
 }

ags/style/_bar.scss

@@ -17,15 +17,15 @@
 
   // Style widget groups
   & > .bar-centerbox > * {
-    $radius: 18px;
+    $radius: 18px !global;
+    $padding: 4px !global;
     $color-hover: colors.$bg-primary;
-    $padding: 4px;
 
     background: rgba(colors.$bg-translucent, .6);
     border-radius: $radius;
     padding: 0 $padding;
 
-    & > box:not(.workspaces-row):not(.tray):not(.focused-client), 
+    & > box:not(.workspaces-row):not(.tray):not(.focused-client):not(.media), 
     & > button {
       border-radius: calc($radius - $padding);
       margin: $padding 0;
@@ -41,10 +41,10 @@
     padding: 4px;
 
     & .workspace {
+      transition: 80ms linear;
       margin: 3px 0;
       border-radius: 16px;
-      transition: 80ms linear;
+      min-width: 14px;
-      min-width: 16px;
       padding: 0 6px;
       background: colors.$bg-tertiary;
 
@@ -73,7 +73,7 @@
       }
 
       &:hover:not(.last-client-icon):not(.focus) {
-        box-shadow: inset 0 0 0 14px rgba($color: colors.$fg-primary, $alpha: .2);
+        background: color.scale($color: colors.$bg-tertiary, $lightness: 10%);
       }
     }
   }
@@ -108,30 +108,30 @@
   }
 
   .media {
+    $spacing: 5px;
     background: colors.$bg-primary;
-    padding: 0 2px;
+    border-radius: calc($radius - $padding);
+    margin: $padding 0;
+    padding: 0 calc($padding + 3px);
 
     &:hover {
-      box-shadow: inset 0 0 0 300px rgba(colors.$fg-primary, .2);
+      background: color.scale($color: colors.$bg-primary, $lightness: 15%);
     }
 
-    & image {
+    & image.player-icon {
       -gtk-icon-size: 14px;
-      margin-right: 4px;
+      margin-right: $spacing;
     }
 
     & .media-controls {
-      transition: none;
-      margin-left: 6px;
       border-top-right-radius: 12px;
       border-bottom-right-radius: 12px;
+      padding: 4px 0;
+      margin-left: $spacing;
 
-      & > button {
+      & > button image {
-        margin: 4px 1px;
+        margin: 0;
-
+        -gtk-icon-size: 10px;
-        & icon {
-          font-size: 10px;
-        }
       }
     }
   }
@@ -166,8 +166,8 @@
     & .status-icons {
       padding-left: 4px;
 
-      & icon.notification-count {
+      & image.notification-count {
-        font-size: 6px;
+        -gtk-icon-size: 6px;
         margin-top: -14px;
       }
     }
@@ -183,9 +183,5 @@
     &.open {
       background: colors.$bg-primary;
     }
-
-    &:hover image {
-      -gtk-icon-transform: scale(1.01);
-    }
   }
 }

ags/style/_colors.scss

@@ -1,14 +1,13 @@
 @use "sass:color";
 @use "./wal";
-@use "./functions";
 
-$bg-primary: functions.toRGB(color.adjust($color: wal.$color1, $lightness: -34%));
+$bg-primary: color.adjust($color: wal.$color1, $lightness: -34%);
-$bg-secondary: functions.toRGB(color.adjust($color: wal.$color1, $lightness: -16%));
+$bg-secondary: color.adjust($color: wal.$color1, $lightness: -16%);
-$bg-tertiary: functions.toRGB(color.adjust($color: $bg-secondary, $lightness: 10%));
+$bg-tertiary: color.adjust($color: $bg-secondary, $lightness: 10%);
 $bg-light: wal.$foreground;
-$bg-translucent: functions.toRGB(color.change($color: $bg-primary, $alpha: 75%));
+$bg-translucent: color.change($color: $bg-primary, $alpha: 75%);
 $bg-translucent-primary: $bg-translucent;
-$bg-translucent-secondary: functions.toRGB(color.change($color: $bg-translucent, $alpha: 78%));
+$bg-translucent-secondary: color.change($color: $bg-translucent, $alpha: 78%);
 $fg-primary: wal.$foreground;
 $fg-light: $bg-primary;
-$fg-disabled: functions.toRGB(color.adjust($color: wal.$foreground, $lightness: -11%));
+$fg-disabled: color.adjust($color: wal.$foreground, $lightness: -11%);

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}
+                <Gtk.Label class={"summary"} useMarkup={true} hexpand={false} xalign={0}
-                  ellipsize={Pango.EllipsizeMode.END} label={
+                  vexpand ellipsize={Pango.EllipsizeMode.END} label={
-                      notification.summary.replace(/[&]/g, "&amp;")
+                      notification.summary.replace(/[&]/g, "&amp;")}
-                  }
                 />
 
-                <Gtk.Label class={"body"} useMarkup={true} xalign={0} wrap={true} 
+                <Gtk.Label class={"body"} useMarkup={true} xalign={0} wrap={true} hexpand={false}
-                  wrapMode={Pango.WrapMode.WORD_CHAR} label={
+                  vexpand wrapMode={Pango.WrapMode.WORD_CHAR} label={
-                      notification.body.replace(/[&]/g, "&amp;")
+                      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
+          <Gtk.Box halign={props.halign} valign={props.valign} hexpand vexpand css={`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
+                        showNumbers,
-                    ], (alwaysShowIds, enableHelper, showIds) => {
+                        i
+                    ], (alwaysShowIds, enableHelper, showIds, i) => {
                         if(enableHelper && !alwaysShowIds) {
-                            const previousWorkspace = defaultWorkspaces.get()[i.get()-1];
+                            const previousWorkspace = defaultWorkspaces.get()[i-1];
-                            const nextWorkspace = defaultWorkspaces.get()[i.get()+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;