🔧 chore: general improvements

- save night light filter data in `userData`
- better click detection in control center tiles
- continue development of the native polkit agent
- start night light module on shell init, drop hyprsunset scripts

src/window/control-center/widgets/pages/index.tsx

@@ -1,20 +1,18 @@
 import { register } from "ags/gobject";
 import { Gtk } from "ags/gtk4";
 import { Page } from "../Page";
-import { timeout } from "ags/time";
 
-import AstalIO from "gi://AstalIO";
+import GLib from "gi://GLib?version=2.0";
 
 
-export { Pages };
 export type PagesProps = {
     initialPage?: Page;
     transitionDuration?: number;
 };
 
 @register({ GTypeName: "Pages" })
-class Pages extends Gtk.Box {
-    #timeouts: Array<[AstalIO.Time, (() => void)|undefined]> = [];
+export class Pages extends Gtk.Box {
+    #timeouts: Array<[GLib.Source, (() => void)|undefined]> = [];
     #page: (Page|undefined);
     #transDuration: number;
     #transType: Gtk.RevealerTransitionType = Gtk.RevealerTransitionType.SLIDE_DOWN;
@@ -40,7 +38,7 @@ class Pages extends Gtk.Box {
         const destroyId = this.connect("destroy", () => {
             this.disconnect(destroyId);
             this.#timeouts.forEach((tmout) => {
-                tmout[0].cancel();
+                tmout[0].destroy();
                 (async () => tmout[1]?.())().catch((err: Error) => {
                     console.error(`${err.message}\n${err.stack}`);
                 });
@@ -89,10 +87,10 @@ class Pages extends Gtk.Box {
 
         page.set_reveal_child(false);
         this.#timeouts.push([
-            timeout(page.transitionDuration, () => {
+            setTimeout(() => {
                 this.remove(page);
                 onClosed?.();
-            }),
+            }, page.transitionDuration),
             onClosed
         ]);
     }

src/window/control-center/widgets/tiles/Bluetooth.tsx

@@ -19,7 +19,7 @@ export const TileBluetooth = () =>
       onEnabled={() => Bluetooth.getDefault().adapter?.set_powered(true)}
       onDisabled={() => Bluetooth.getDefault().adapter?.set_powered(false)}
       onClicked={() => TilesPages?.toggle(BluetoothPage)}
-      enableOnClicked hasArrow
+      hasArrow
       state={createBinding(AstalBluetooth.get_default(), "isPowered")}
       icon={createComputed([
             createBinding(AstalBluetooth.get_default(), "isPowered"),

src/window/control-center/widgets/tiles/NightLight.tsx

@@ -23,7 +23,6 @@ export const TileNightLight = () =>
         hasArrow visible={isInstalled("hyprsunset")}
         onDisabled={() => NightLight.getDefault().identity = true}
         onEnabled={() => NightLight.getDefault().identity = false}
-        enableOnClicked
         onClicked={() => TilesPages?.toggle(PageNightLight)}
         state={createBinding(NightLight.getDefault(), "identity").as(identity => !identity)}
     />

src/window/control-center/widgets/tiles/Tile.tsx

@@ -11,7 +11,10 @@ export class Tile extends Gtk.Box {
     @signal(Boolean) toggled(_state: boolean) {}
     @signal() enabled() {}
     @signal() disabled() {}
-    @signal() clicked() {}
+    @signal() clicked() {
+        if(this.enableOnClicked)
+            this.enable();
+    }
 
     @property(String)
     public icon: string;
@@ -20,7 +23,7 @@ export class Tile extends Gtk.Box {
     @property(String)
     public description: string = "";
     @property(Boolean)
-    public enableOnClicked: boolean = true;
+    public enableOnClicked: boolean = false;
     @property(Boolean)
     public state: boolean = false;
     @property(Boolean)
@@ -39,6 +42,7 @@ export class Tile extends Gtk.Box {
         this.state = true;
         !this.has_css_class("enabled") &&
             this.add_css_class("enabled");
+
         this.emit("toggled", true);
         this.emit("enabled");
     }
@@ -69,25 +73,34 @@ export class Tile extends Gtk.Box {
         ]));
 
         this.add_css_class("tile");
+        this.add_controller(
+            <Gtk.GestureClick onReleased={(_, __, px, py) => {
+                // gets the icon part of the tile
+                const { x, y, width, height } = this.get_first_child()!.get_allocation();
+                
+                if((px < x || px > x+width) || (py < y || y > py+height)) 
+                    this.emit("clicked");
+            }} /> as Gtk.GestureClick
+        );
 
         this.icon = props.icon;
         this.title = props.title;
         this.hexpand = true;
 
-        if(props.hasArrow != null)
+        if(props.hasArrow !== undefined)
             this.hasArrow = props.hasArrow;
 
-        if(props.description != null)
+        if(props.description !== undefined)
             this.description = props.description;
 
-        if(props.state != null)
+        if(props.state !== undefined)
             this.state = props.state;
 
-        if(props.enableOnClicked != null)
+        if(props.enableOnClicked !== undefined)
             this.enableOnClicked = props.enableOnClicked;
 
-        if(this.state)
-            this.add_css_class("enabled"); // fix no highlight with state = true on construct
+        this.state &&
+            this.add_css_class("enabled"); // fix no highlight when enabled on init
 
         this.prepend(
             <Gtk.Box hexpand={false} vexpand class={"icon"}>
@@ -110,28 +123,14 @@ export class Tile extends Gtk.Box {
                       variableToBoolean(createBinding(this, "description"))
                   } maxWidthChars={12} hexpand={false}
                 />
-
-                <Gtk.GestureClick onReleased={() => {
-                    this.emit("clicked");
-                    if(this.enableOnClicked && !this.state)
-                        this.enable();
-
-                    return true;
-                }} />
             </Gtk.Box> as Gtk.Box
         );
 
         if(this.hasArrow)
             this.append(
-                <Gtk.Image class={"arrow"} iconName={"go-next-symbolic"} halign={Gtk.Align.END}>
-                    <Gtk.GestureClick onReleased={() => {
-                        this.emit("clicked");
-                        if(this.enableOnClicked && !this.state)
-                            this.enable();
-
-                        return true;
-                    }} />
-                </Gtk.Image> as Gtk.Image
+                <Gtk.Image class={"arrow"} iconName={"go-next-symbolic"} 
+                  halign={Gtk.Align.END} 
+                /> as Gtk.Image
             );
     }