💥 fix: correctly use centerbox with gtkbuilder types, fix styles

also re-added some windows to the windows list(they were causing issues before)

ags/app.ts

@@ -78,11 +78,11 @@ App.start({
         runnerPlugins.map(plugin => Runner.addPlugin(plugin));
 
         console.log("Opening default windows");
-        /* Open openOnStart windows
+        // Open openOnStart windows
         defaultWindows.map(name => {
             if(Windows.getDefault().isVisible(name)) return;
             Windows.getDefault().open(name);
-        });*/
+        });
     }
 });
 

ags/style.scss

@@ -200,18 +200,13 @@ tooltip > box {
   }
 }
 
-menu {
+popover {
   padding: 4px;
   background: wal.$background;
   border-radius: 14px;
-                               
+  & contents {
-  & separator {
+    & * {
-    margin: 0 4px;
+      padding: 2px 4px;
-    color: wal.$background;
-  }
-                               
-  & menuitem {
-    padding: 8px 16px;
       border-radius: 10px;
       font-size: 12px;
       font-weight: 600;
@@ -220,6 +215,13 @@ menu {
         background: wal.$color1;
       }
     }
+
+    & separator {
+      all: unset;
+      margin: 0 4px;
+      color: wal.$background;
+    }
+  }
 }
 
 .button-row {

ags/style/_bar.scss

@@ -25,27 +25,11 @@
     border-radius: $radius;
     padding: 0 $padding;
 
-    & > eventbox {
+    & > box:not(.workspaces-row):not(.tray):not(.focused-client), 
-      &:hover {
+    & > button {
-        & > box {
-          background: $color-hover;
-        }
-      }
-      & > box {
       border-radius: calc($radius - $padding);
       margin: $padding 0;
-      }
-
-      & > box {
       padding: 0 8px;
-      }
-    }
-
-    & > button,
-    & > box > button {
-      border-radius: calc($radius - $padding);
-      margin: $padding 0;
-      padding: 0 9px;
 
       &:hover {
         background: $color-hover;
@@ -56,8 +40,7 @@
   .workspaces-row {
     padding: 4px;
 
-    & eventbox > box > eventbox {
+    & .workspace {
-      & > box {
       margin: 3px 0;
       border-radius: 16px;
       transition: 80ms linear;
@@ -70,9 +53,8 @@
         margin-right: 4px;
         opacity: 0;
       }
-      }
 
-      &.focus > box {
+      &.focus {
         background: colors.$fg-primary;
         min-width: 32px;
 
@@ -90,20 +72,8 @@
         opacity: 1;
       }
 
-      &:hover > box {
+      &:hover:not(.last-client-icon):not(.focus) {
-        box-shadow: inset 0 0 0 100px rgba($color: colors.$fg-primary, $alpha: .2);
+        box-shadow: inset 0 0 0 14px rgba($color: colors.$fg-primary, $alpha: .2);
-      }
-    }
-
-    &.special-workspaces {
-      & > eventbox {
-        & box {
-          background: wal.$color4;
-        }
-
-        &:hover > box {
-          background: functions.toRGB(color.adjust(wal.$color4, $lightness: -6%));
-        }
       }
     }
   }
@@ -111,12 +81,13 @@
   .focused-client {
     padding: 0 6px;
 
-    & > .icon {
+    & image {
       margin-right: 6px;
+      -gtk-icon-size: 18px;
     }
 
-    & > .text-content {
+    & .text-content {
-      & > .class {
+      & .class {
         font-size: 9px;
         font-family: monospace;
         font-weight: 600;
@@ -124,7 +95,7 @@
         margin-top: 0px;
       }
       
-      & > .title {
+      & .title {
         font-size: 12px;
         font-weight: 500;
         margin-top: -2px;
@@ -136,18 +107,17 @@
     background-color: colors.$bg-primary;
   }
 
-  .media-eventbox {
+  .media {
-    & > .media {
     background: colors.$bg-primary;
-      padding: 0 8px;
+    padding: 0 2px;
-    }
 
-    &:hover > .media {
+    &:hover {
       box-shadow: inset 0 0 0 300px rgba(colors.$fg-primary, .2);
     }
 
-    & icon {
+    & image {
-      font-size: 14px;
+      -gtk-icon-size: 14px;
+      margin-right: 4px;
     }
 
     & .media-controls {
@@ -164,54 +134,28 @@
         }
       }
     }
-
-
-    &.reveal {
-      & .media > box {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-    }
   }
 
   .tray {
     padding: 0 6px;
 
     & .item {
-      &:hover {
+      all: unset;
-        background: none;
-      }
-
-      margin: 0 6px;
-      padding: 0;
-
-      &:first-child {
-        margin-left: 0;
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
     }
   }
 
   .status {
     @include mixins.reset-props;
 
-    &:hover > box,
+    &.open {
-    &.open > box {
       background: colors.$bg-primary;
     }
 
-    & > box {
+    & image {
-      padding: 0 8px;
+      -gtk-icon-size: 14px;
-
-      & icon {
-        font-size: 14px;
     }
 
-      & revealer > eventbox > box {
+    & revealer > box {
       background: rgba($color: colors.$bg-tertiary, $alpha: .7);
       border-radius: 12px; 
       margin: 4px 0; 
@@ -228,22 +172,20 @@
       }
     }
   }
-  }
 
   .apps {
-    & > box {
+    min-width: 18px;
-      min-width: 22px;
+    & image {
-      & > icon {
       transition: 120ms linear;
-        font-size: 14px;
+      -gtk-icon-size: 14px;
     }
-    }
+
-    &.open > box {
+    &.open {
       background: colors.$bg-primary;
     }
 
-    &:hover icon {
+    &:hover image {
-      -gtk-icon-transform: scale(1.144);
+      -gtk-icon-transform: scale(1.01);
     }
   }
 }

ags/style/_osd.scss

@@ -1,17 +1,15 @@
 @use "sass:color";
-@use "./wal";
+@use "colors";
-@use "./functions" as funs;
-
 
 .osd {
-  background: funs.toRGB(color.change($color: wal.$background, $alpha: 65%));
+  background: rgba(colors.$bg-translucent-secondary, .6);
-  padding: 16px;
+  padding: 14px 14px;
   border-radius: 24px;
   min-width: 180px;
 
   .icon {
     margin-right: 10px;
-    font-size: 24px;
+    -gtk-icon-size: 24px;
   }
 
   .volume {
@@ -25,16 +23,16 @@
 
     levelbar {
       trough block {
-        border-radius: 2px;
+        border-radius: 3px;
-        background: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -36%));
+        background: colors.$bg-primary;
 
         &.empty {
-          border-radius: 2px;
+          border-radius: 3px;
         }
 
         &.filled {
-          padding: 3px 0;
+          min-height: 8px;
-          background: wal.$color1;
+          background: colors.$bg-secondary;
         }
       }
     }

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={true} vexpand={true} class={`notification ${
+    return <Gtk.Box hexpand={false} vexpand={false} class={`notification ${
           Notifications.getDefault().getUrgencyString(notification.urgency)
       }`} orientation={Gtk.Orientation.VERTICAL} spacing={5}
       $={(self) => {
@@ -102,11 +102,14 @@ export function NotificationWidget({ notification, actionClicked, holdOnHover, s
                 <Gtk.Label class={"summary"} useMarkup={true} xalign={0}
                   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} singleLineMode={false}
+                  wrapMode={Pango.WrapMode.WORD_CHAR} label={
-                  label={notification.body.replace(/[&]/g, "&amp;")} />
+                      notification.body.replace(/[&]/g, "&amp;")
+                  }
+                />
             </Gtk.Box>
         </Gtk.Box>
 

ags/widget/PopupWindow.tsx

@@ -6,6 +6,7 @@ import { omitObjectKeys, WidgetNodeType } from "../scripts/utils";
 
 
 type PopupWindowSpecificProps = {
+    $?: (self: Astal.Window) => void;
     children?: WidgetNodeType;
     onDestroy?: (self: Astal.Window) => void;
     /** Stylesheet for the background of the popup-window */
@@ -57,7 +58,7 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {
         "marginBottom"
     ]);
 
-    return <Astal.Window {...omittedProps}
+    return <Astal.Window {...omittedProps} visible
       namespace={props.namespace ?? "popup-window"} class={
           (props.class instanceof Accessor) ? 
               ((props.namespace instanceof Accessor) ?
@@ -110,6 +111,8 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {
 
           conns.set(self, self.connect("destroy", () => conns.forEach((id, obj) =>
               obj.disconnect(id))));
+
+          props.$?.(self);
       }}>
           <Gtk.Box
             halign={props.halign}

ags/widget/Separator.tsx

@@ -28,8 +28,8 @@ export function Separator(props: SeparatorProps = {
       hexpand={props.orientation === Gtk.Orientation.VERTICAL}
       class={`separator ${ props.orientation === Gtk.Orientation.VERTICAL ? 
         "vertical" : "horizontal" }`} visible={props.visible}
-      css={`.vertical { padding: {${props.spacing ?? 0}px ${props.margin ?? 7}px; }
+      css={`.vertical { padding: ${props.spacing ?? 0}px ${props.margin ?? 7}px; }
-        .horizontal { padding: {${props.margin ?? 4}px ${props.spacing ?? 0}px; }`}>
+        .horizontal { padding: ${props.margin ?? 4}px ${props.spacing ?? 0}px; }`}>
 
         <Gtk.Box class={`${props.orientation === Gtk.Orientation.VERTICAL ? 
             "vertical"

ags/widget/bar/FocusedClient.tsx

@@ -19,7 +19,7 @@ export const FocusedClient = () => {
                         getSymbolicIcon(clss) ?? getAppIcon(clss) ?? 
                           getAppIcon(focusedClient.initialClass) ?? 
                               "application-x-executable-symbolic")
-                  } css={"font-size: 18px;"} vexpand={true} />
+                  } vexpand={true} />
                 
                 <Gtk.Box valign={Gtk.Align.CENTER} class={"text-content"} 
                   orientation={Gtk.Orientation.VERTICAL}>
@@ -30,8 +30,8 @@ export const FocusedClient = () => {
                       tooltipText={createBinding(focusedClient, "class")}/>
                     <Gtk.Label class={"title"} xalign={0} maxWidthChars={50} 
                       ellipsize={Pango.EllipsizeMode.END} 
-                      label={createBinding(focusedClient, "class")}
+                      label={createBinding(focusedClient, "title")}
-                      tooltipText={createBinding(focusedClient, "class")}/>
+                      tooltipText={createBinding(focusedClient, "title")}/>
                 </Gtk.Box>
             </Gtk.Box>}
         </With>

ags/widget/bar/Media.tsx

@@ -18,7 +18,7 @@ export let [player, setPlayer] = createState(dummyPlayer);
 export const Media = () => {
     const connections: Map<GObject.Object, Array<number>|number> = new Map();
 
-    if(AstalMpris.get_default().players[0] && player.get() !== dummyPlayer)
+    if(AstalMpris.get_default().players[0])
         setPlayer(AstalMpris.get_default().players[0]);
 
     connections.set(AstalMpris.get_default(), [
@@ -26,9 +26,6 @@ export const Media = () => {
             player.available && setPlayer(player)),
 
         AstalMpris.get_default().connect("player-closed", (_, closedPlayer) => {
-            if(player.get()?.busName !== closedPlayer.busName) 
-                return;
-
             const players = AstalMpris.get_default().players.filter(pl => pl?.available);
 
             if(players.length > 0) {
@@ -113,7 +110,7 @@ export const Media = () => {
                         title ?? "No Title")} maxWidthChars={20} ellipsize={Pango.EllipsizeMode.END}
                     />
                     <Separator orientation={Gtk.Orientation.HORIZONTAL} size={1} margin={5}
-                      alpha={.3} />
+                      alpha={.3} spacing={6} />
                     <Gtk.Label class={"artist"} label={createBinding(player.get(), "artist").as(artist =>
                         artist ?? "No Artist")} maxWidthChars={18} ellipsize={Pango.EllipsizeMode.END}
                     />

ags/widget/bar/Tray.tsx

@@ -19,7 +19,7 @@ function popoverFromModel(model: Gio.MenuModel, actionGroup: Gio.ActionGroup | n
 export const Tray = () => {
     const items = createBinding(astalTray, "items").as(items => items.filter(item => item?.gicon));
 
-    return <Gtk.Box class={"tray"} visible={variableToBoolean(items)}>
+    return <Gtk.Box class={"tray"} visible={variableToBoolean(items)} spacing={10}>
         <For each={items}>
             {(item: AstalTray.TrayItem) => <Gtk.Box class={"item"}>
 

ags/widget/bar/Workspaces.tsx

@@ -114,18 +114,18 @@ export const Workspaces = () => {
                                   `${lastClient.get_class()}: `
                               : ""
                           } ${lastClient.title}` : "" }`
-                      )} onClicked={ws.focus}>
+                      )} onClicked={() => ws.focus()}>
                         
                         
                         <With value={createBinding(ws, "lastClient")}>
                             {(lastClient: AstalHyprland.Client) => 
-                                <Gtk.Box class={"last-client"}>
+                                <Gtk.Box class={"last-client"} hexpand>
                                     <Gtk.Revealer transitionDuration={200} revealChild={showId}
                                       transitionType={Gtk.RevealerTransitionType.SLIDE_LEFT}
-                                      hexpand={true}>
+                                      hexpand>
 
                                         <Gtk.Label label={createBinding(ws, "id").as(String)}
-                                          class={"id"} />
+                                          class={"id"} hexpand />
                                     </Gtk.Revealer>
                                     {lastClient && <Gtk.Image class={"last-client-icon"} iconName={
                                       createBinding(lastClient, "initialClass").as(initialClass =>

ags/widget/center-window/BigMedia.tsx

@@ -91,10 +91,10 @@ export const BigMedia = () => {
                               return pos > 0 && player.length > 0 ? 
                                   `${Math.floor(pos / 60)}:${sec < 10 ? "0" : ""}${sec}`
                               : "0:00";
-                          })}
+                          })} $type="start"
                         />
 
-                        <Gtk.Box class={"controls button-row"}>
+                        <Gtk.Box class={"controls button-row"} $type="center">
                             <Gtk.Button class={"link"} iconName={"edit-paste-symbolic"}
                               tooltipText={"Copy link to clipboard"}
                               onClicked={() => {
@@ -157,7 +157,7 @@ export const BigMedia = () => {
                               return (len > 0 && Number.isFinite(len)) ? 
                                   `${Math.floor(len / 60)}:${sec < 10 ? "0" : ""}${sec}`
                               : "0:00";
-                          })}
+                          })} $type="end"
                         />
                     </Gtk.CenterBox>
                 </Gtk.Box>

ags/window/Bar.tsx

@@ -10,32 +10,30 @@ import { Status } from "../widget/bar/Status";
 
 export const Bar = (mon: number) => {
     const widgetSpacing = 4;
-    return <Astal.Window 
+    return <Astal.Window namespace={"top-bar"} layer={Astal.Layer.TOP}
-        namespace={"top-bar"}
       anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT}
-        layer={Astal.Layer.TOP}
+      exclusivity={Astal.Exclusivity.EXCLUSIVE} heightRequest={46} monitor={mon}
-        exclusivity={Astal.Exclusivity.EXCLUSIVE}
+      visible={true} canFocus={false}>
-        heightRequest={46}
-        monitor={mon}
-        visible={true}
-        canFocus={false}>
         <Gtk.Box class={"bar-container"}>
-            <Gtk.CenterBox class={"bar-centerbox"}>
+            <Gtk.CenterBox class={"bar-centerbox"} hexpand>
                 <Gtk.Box class={"widgets-left"} homogeneous={false}
-                         halign={Gtk.Align.START} spacing={widgetSpacing}>
+                  halign={Gtk.Align.START} spacing={widgetSpacing}
+                  $type="start">
 
                     <Apps />
                     <Workspaces />
                     <FocusedClient />
                 </Gtk.Box>
                 <Gtk.Box class={"widgets-center"} homogeneous={false}
-                         spacing={widgetSpacing} halign={Gtk.Align.CENTER}>
+                  spacing={widgetSpacing} halign={Gtk.Align.CENTER}
+                  $type="center">
 
                     <Clock />
                     <Media />
                 </Gtk.Box>
                 <Gtk.Box class={"widgets-right"} homogeneous={false}
-                         spacing={widgetSpacing} halign={Gtk.Align.END}>
+                  spacing={widgetSpacing} halign={Gtk.Align.END}
+                  $type="end">
                     <Tray />
                     <Status />
                 </Gtk.Box>

ags/window/ControlCenter.tsx

@@ -1,9 +1,7 @@
 import { Astal, Gtk } from "ags/gtk4";
-import { QuickActions } from "../widget/control-center/QuickActions";
-import { Tiles } from "../widget/control-center/Tiles";
-import { Sliders } from "../widget/control-center/Sliders";
-import { NotifHistory } from "../widget/control-center/NotifHistory";
 import { PopupWindow } from "../widget/PopupWindow";
+import { NotifHistory } from "../widget/control-center/NotifHistory";
+import { QuickActions } from "../widget/control-center/QuickActions";
 
 
 export const ControlCenter = (mon: number) => 
@@ -19,10 +17,7 @@ export const ControlCenter = (mon: number) =>
               orientation={Gtk.Orientation.VERTICAL} vexpand={false}>
                 
                 <QuickActions />
-                <Sliders />
-                <Tiles />
             </Gtk.Box>
-
             <NotifHistory />
         </Gtk.Box>
     </PopupWindow> as Astal.Window;

ags/windows.ts

@@ -1,8 +1,15 @@
-import App from "ags/gtk4/app"
-import AstalHyprland from "gi://AstalHyprland";
 import GObject, { getter, register, signal } from "ags/gobject";
 import { Astal } from "ags/gtk4";
+import { Bar } from "./window/Bar";
+
+import App from "ags/gtk4/app"
+import AstalHyprland from "gi://AstalHyprland";
+import { OSD } from "./window/OSD";
 import { ControlCenter } from "./window/ControlCenter";
+import { FloatingNotifications } from "./window/FloatingNotifications";
+import { CenterWindow } from "./window/CenterWindow";
+import { LogoutMenu } from "./window/LogoutMenu";
+import { AppsWindow } from "./window/AppsWindow";
 
 
 export { Windows };
@@ -22,13 +29,13 @@ class Windows extends GObject.Object {
     #windowConnections: Record<string, (Array<number> | Array<Array<number>>)> = {};
     #appConnections: Array<number> = [];
     #windows: Record<string, (() => (Astal.Window | Array<Astal.Window>))> = {
-        //"bar": this.createWindowForMonitors(Bar),
+        "bar": this.createWindowForMonitors(Bar),
-        //"osd": this.createWindowForFocusedMonitor(OSD),
+        "osd": this.createWindowForFocusedMonitor(OSD),
         "control-center": this.createWindowForFocusedMonitor(ControlCenter),
-        /*"center-window": this.createWindowForFocusedMonitor(CenterWindow),
+        "center-window": this.createWindowForFocusedMonitor(CenterWindow),
         "logout-menu": this.createWindowForFocusedMonitor(LogoutMenu),
         "floating-notifications": this.createWindowForFocusedMonitor(FloatingNotifications),
-        "apps-window": this.createWindowForFocusedMonitor(AppsWindow)*/
+        "apps-window": this.createWindowForFocusedMonitor(AppsWindow)
     };
 
     @signal(String) opened(_name: string) {}