💥 fix(control-center/notif-history): clean all button not doing anything on ::on-clicked

ags/widget/control-center/NotifHistory.tsx

@@ -9,7 +9,7 @@ import AstalNotifd from "gi://AstalNotifd?version=0.1";
 export const NotifHistory = () => 
     <Gtk.Box orientation={Gtk.Orientation.VERTICAL} 
       class={createBinding(Notifications.getDefault(), "history").as(history => 
-          `history ${history.length < 1 ? "hide" : ""}`)}>
+          `notif-history ${history.length < 1 ? "hide" : ""}`)} vexpand={false}>
 
         <Gtk.ScrolledWindow class={"history-scrollable"} hscrollbarPolicy={Gtk.PolicyType.NEVER}
           vscrollbarPolicy={Gtk.PolicyType.AUTOMATIC} propagateNaturalHeight={true}
@@ -35,8 +35,15 @@ export const NotifHistory = () =>
             </Gtk.Box>
         </Gtk.ScrolledWindow>
 
-        <Gtk.Box hexpand={true} class={"button-row"} halign={Gtk.Align.END}>
-            <Gtk.Button class={"clear-all"} iconName={"edit-clear-all-symbolic"}
-              label={tr("clear")} onClicked={Notifications.getDefault().clearHistory} />
+        <Gtk.Box class={"button-row"} hexpand>
+            <Gtk.Button class={"clear-all"} halign={Gtk.Align.END}
+              onClicked={() => Notifications.getDefault().clearHistory()}>
+
+                <Gtk.Box hexpand>
+                    <Gtk.Image class={"icon"} iconName={"edit-clear-all-symbolic"} 
+                      css={"margin-right: 6px;"}  />
+                    <Gtk.Label label={tr("clear")} />
+                </Gtk.Box>
+            </Gtk.Button>
         </Gtk.Box>
     </Gtk.Box> as Gtk.Box;

ags/widget/control-center/Pages.tsx

@@ -1,10 +1,12 @@
 import { register } from "ags/gobject";
 import { Gtk } from "ags/gtk4";
 import { Page } from "./pages/Page";
-import AstalIO from "gi://AstalIO";
 import { timeout } from "ags/time";
 import { variableToBoolean } from "../../scripts/utils";
 
+import AstalIO from "gi://AstalIO";
+import { createRoot } from "ags";
+
 
 export { Pages };
 export type PagesProps = {
@@ -68,13 +70,13 @@ class Pages extends Gtk.Box {
     }
 
     open(newPage: Page, onOpened?: () => void) {
-        const pageWidget = <Gtk.Revealer
+        const pageWidget = createRoot(() => <Gtk.Revealer
           transitionDuration={this.#transDuration}
           transitionType={this.#transType}
           revealChild={false}>
 
             {newPage as unknown as Gtk.Widget}
-        </Gtk.Revealer> as Gtk.Revealer;
+        </Gtk.Revealer> as Gtk.Revealer);
 
         this.prepend(pageWidget);
 

ags/widget/control-center/Sliders.tsx

@@ -3,15 +3,18 @@ import { Wireplumber } from "../../scripts/volume";
 import { Pages } from "./Pages";
 import { PageSound } from "./pages/Sound";
 import { PageMicrophone } from "./pages/Microphone";
-import { createBinding, With } from "ags";
+import { createBinding, createRoot, With } from "ags";
+
 import AstalWp from "gi://AstalWp";
 
 
+export let slidersPages: Pages|undefined;
+
 export function Sliders() {
-    const slidersPages = <Pages /> as Pages;
+    slidersPages = createRoot(() => new Pages())!;
 
     return <Gtk.Box class={"sliders"} orientation={Gtk.Orientation.VERTICAL} 
-      hexpand={true} spacing={10}>
+      hexpand spacing={10} onDestroy={() => slidersPages = undefined}>
 
         <With value={createBinding(Wireplumber.getWireplumber(), "defaultSpeaker")}>
             {(sink: AstalWp.Endpoint) => <Gtk.Box class={"sink speaker"} spacing={3}>
@@ -30,7 +33,7 @@ export function Sliders() {
                   onChangeValue={(_, _scrollType, value) => sink.set_volume(value / 100)} />
 
                 <Gtk.Button class={"more"} iconName={"go-next-symbolic"} onClicked={(_) => 
-                    slidersPages.toggle(PageSound())} />
+                    slidersPages!.toggle(PageSound())} />
             </Gtk.Box>}
         </With>
         <With value={createBinding(Wireplumber.getWireplumber(), "defaultMicrophone")}>
@@ -50,7 +53,7 @@ export function Sliders() {
                   onChangeValue={(_, _scrollType, value) => source.set_volume(value / 100)} />
 
                 <Gtk.Button class={"more"} iconName={"go-next-symbolic"} onClicked={(_) => 
-                    slidersPages.toggle(PageMicrophone())} />
+                    slidersPages!.toggle(PageMicrophone())} />
             </Gtk.Box>}
         </With>
         {slidersPages}

ags/widget/control-center/Tiles.tsx

@@ -5,31 +5,32 @@ import { TileDND } from "./tiles/DoNotDisturb";
 import { TileRecording } from "./tiles/Recording";
 import { TileNightLight } from "./tiles/NightLight";
 import { Pages } from "./Pages";
+import { createRoot } from "/usr/share/ags/js/gnim/src/jsx/scope";
 
 
-export let TilesPages: (Pages|null) = null;
-export const tileList: Array<() => Gtk.Widget> = [
+export let TilesPages: Pages|undefined;
+export const tileList: Array<() => JSX.Element|Gtk.Widget> = [
     TileNetwork,
     TileBluetooth,
     TileRecording,
     TileDND,
     TileNightLight
-];
+] as Array<() => Gtk.Widget>;
 
 export function Tiles(): Gtk.Widget {
     return <Gtk.Box class={"tiles-container"} orientation={Gtk.Orientation.VERTICAL}
-      onDestroy={() => TilesPages = null} $={(self) => {
+      onDestroy={() => TilesPages = undefined} $={(self) => {
           if(!TilesPages)
-              TilesPages = <Pages class="tile-pages" /> as Pages;
+              TilesPages = createRoot(() => new Pages({ class: "tile-pages" }));
 
-          self.append(TilesPages as unknown as Gtk.Widget);
+          self.append(TilesPages!);
       }}>
 
         <Gtk.FlowBox orientation={Gtk.Orientation.HORIZONTAL} rowSpacing={6}
-          columnSpacing={6} minChildrenPerLine={2} activateOnSingleClick={true}
-          maxChildrenPerLine={2} hexpand={true} vexpand={true} homogeneous={true}>
+          columnSpacing={6} minChildrenPerLine={2} activateOnSingleClick
+          maxChildrenPerLine={2} hexpand vexpand homogeneous>
 
-            {tileList.map(tile => tile())}
+            {tileList.map(t => t())}
         </Gtk.FlowBox>
     </Gtk.Box> as Gtk.Box;
 }