💥 fix(control-center/tile): use ::onclicked signal for tile button instead of adding an unnecessary gesture controller

ags/widget/control-center/tiles/Network.tsx

@@ -82,4 +82,4 @@ export const TileNetwork = () => <Gtk.Box>
             />
         }}
     </With>
-</Gtk.Box> as Gtk.Box;
+</Gtk.Box>;

ags/widget/control-center/tiles/Recording.tsx

@@ -29,4 +29,4 @@ export const TileRecording = () =>
       onToggledOn={() => Recording.getDefault().startRecording()}
       toggleState={createBinding(Recording.getDefault(), "recording")}
       iconSize={16}
-    /> as Gtk.Widget;
+    />;

ags/widget/control-center/tiles/Tile.tsx

@@ -1,10 +1,11 @@
-import { Gdk, Gtk } from "ags/gtk4";
+import { Gtk } from "ags/gtk4";
 import { tr } from "../../../i18n/intl";
-import { Accessor, createComputed, createState } from "ags";
+import { Accessor, createComputed, createState, onCleanup } from "ags";
-import GObject from "gi://GObject?version=2.0";
-import Pango from "gi://Pango?version=1.0";
 import { variableToBoolean } from "../../../scripts/utils";
 
+import Pango from "gi://Pango?version=1.0";
+
+
 export type TileProps = {
     class?: string | Accessor<string>;
     icon?: string | Accessor<string>;
@@ -14,7 +15,7 @@ export type TileProps = {
     description?: string | Accessor<string>;
     toggleState?: boolean | Accessor<boolean>;
     enableOnClickMore?: boolean | Accessor<boolean>;
-    onDestroy?: () => void;
+    onDestroy?: (self: Gtk.Box) => void;
     onToggledOn: () => void;
     onToggledOff: () => void;
     onClickMore?: () => void;
@@ -32,7 +33,9 @@ export function Tile(props: TileProps): Gtk.Widget {
             setToggled((props.toggleState as Accessor<boolean>).get() ?? false))
     );
 
-    return <Gtk.Box class={
+    onCleanup(() => subs.forEach(s => s()));
+
+    return <Gtk.Box hexpand visible={props.visible} onDestroy={props.onDestroy} class={
         (props.class instanceof Accessor) ?
           createComputed([props.class, toggled], (clss, isToggled) => 
               `tile ${clss} ${isToggled ? "toggled" : ""} ${
@@ -44,29 +47,16 @@ export function Tile(props: TileProps): Gtk.Widget {
                 props.onClickMore ? "has-more" : ""
             }`
         )
-    } hexpand={true} visible={props.visible} onDestroy={(_) => {
+    }>
-        subs.forEach(sub => sub());
+        <Gtk.Button class={"toggle-button"} onClicked={() => {
-        props.onDestroy?.();
+            if(toggled.get()) {
-    }}>
+                setToggled(false);
+                props.onToggledOff?.();
+                return;
+            }
 
-        <Gtk.Button class={"toggle-button"} $={(self) => {
+            setToggled(true);
-            const gestureClick = Gtk.GestureClick.new();
+            props.onToggledOn?.();
-            const conns: Map<GObject.Object, number> = new Map();
-
-            self.add_controller(gestureClick);
-
-            conns.set(gestureClick, gestureClick.connect("released", (gesture) => {
-                if(gesture.get_current_button() === Gdk.BUTTON_PRIMARY) {
-                    if(toggled.get()) {
-                        setToggled(false);
-                        props.onToggledOff?.();
-                        return;
-                    }
-
-                    setToggled(true);
-                    props.onToggledOn?.();
-                }
-            }));
         }}>
 
             <Gtk.Box class={"content"} hexpand={true} vexpand={true}>