✨ ags(control-center): update wallpaper select button to use new module

also, bluetooth stuff are using `AstalBluetooth.isPowered` instead of `Adapter.powered`, because of binding issues

ags/widget/control-center/QuickActions.ts

@@ -2,6 +2,7 @@ import { exec, execAsync, GLib, Variable } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 import AstalHyprland from "gi://AstalHyprland";
 import { Windows } from "../../windows";
+import { Wallpaper } from "../../scripts/wallpaper";
 
 const uptime = new Variable<string>("Just turned on").poll(1000, 
     () => exec("uptime -p").replace(/^up /, "")
@@ -33,11 +34,10 @@ function ScreenshotButton(): Widget.Button {
     return new Widget.Button({
         className: "nf",
         label: "󰹑",
-        onClick: () => execAsync(
+        onClick: () => {
-            `hyprshot -m region -o ${GLib.get_user_special_dir(GLib.UserDirectory.DIRECTORY_PICTURES) ?
+            Windows.close("control-center");
-                    `${GLib.get_user_special_dir(GLib.UserDirectory.DIRECTORY_PICTURES)}/Screenshots`
+            execAsync(`sh ${GLib.get_user_config_dir()}/hypr/scripts/screenshot.sh`);
-                : `${GLib.get_home_dir()}/Screenshots` 
+        }
-            }`)
     } as Widget.ButtonProps);
 }
 
@@ -45,10 +45,10 @@ function SelectWallpaperButton(): Widget.Button {
     return new Widget.Button({
         className: "nf",
         label: "󰸉",
-        onClick: () => execAsync(
+        onClick: () => {
-            `sh ${GLib.get_user_config_dir() || `${GLib.get_home_dir()}/.config`
+            Windows.close("control-center");
-            }/hypr/scripts/change-wallpaper.sh`
+            Wallpaper.getDefault().pickWallpaper();
-        )
+        }
     } as Widget.ButtonProps);
 }
 
@@ -72,12 +72,14 @@ export const QuickActions = () => new Widget.Box({
                 new Widget.Label({
                     className: "hostname",
                     xalign: 0,
+                    tooltipText: "Host name",
                     label: GLib.get_host_name()
                 } as Widget.LabelProps),
                 new Widget.Label({
                     className: "uptime",
                     xalign: 0,
-                    label: uptime().as((uptime: string) => `󱡢  ${uptime}`)
+                    tooltipText: "Uptime",
+                    label: uptime().as((uptime: string) => `󰥔  ${uptime}`)
                 } as Widget.LabelProps)
             ]
         } as Widget.BoxProps),

ags/widget/control-center/pages/Bluetooth.ts

@@ -1,5 +1,5 @@
 import { bind, Variable } from "astal";
-import { Gtk, Widget } from "astal/gtk3";
+import { astalify, Gtk, Widget } from "astal/gtk3";
 import AstalBluetooth from "gi://AstalBluetooth";
 import { Page, PageButton } from "./Page";
 import { Separator, SeparatorProps } from "../../Separator";
@@ -8,6 +8,8 @@ import AstalHyprland from "gi://AstalHyprland?version=0.1";
 import { Windows } from "../../../windows";
 
 
+const AstalSpinner = astalify(Gtk.Spinner);
+
 export const BluetoothPage: (() => Page) = () => new Page({
     id: "bluetooth",
     title: tr("control_center.pages.bluetooth.title"),
@@ -136,33 +138,31 @@ function DeviceWidget(dev: AstalBluetooth.Device): Gtk.Widget {
         endWidget: new Widget.Box({
             visible: bind(dev, "batteryPercentage").as((bat: number) => 
                 bat <= -1 ? false : true),
-            children: Variable.derive([
+            children: [
-                bind(dev, "connecting"),
+                new Widget.Box({
-                bind(dev, "connected")
+                    visible: bind(dev, "connected"),
-            ], (connecting, connected) => {
+                    children: [
-                if(connected) return [
+                        new Widget.Label({
-                    new Widget.Label({
+                            halign: Gtk.Align.END,
-                        halign: Gtk.Align.END,
+                            label: bind(dev, "batteryPercentage").as((bat: number) =>
-                        label: bind(dev, "batteryPercentage").as((bat: number) =>
+                                `${Math.floor(bat * 100)}%`)
-                            `${Math.floor(bat * 100)}%`)
+                        } as Widget.LabelProps),
-                    } as Widget.LabelProps),
+                        new Widget.Icon({
-                    new Widget.Icon({
+                            icon: "battery-symbolic",
-                        icon: "battery-symbolic",
+                            css: "font-size: 18px; margin-left: 6px;"
-                        css: "font-size: 18px; margin-left: 6px;"
+                        } as Widget.IconProps)
-                    } as Widget.IconProps)
+                    ]
-                ];
+                } as Widget.BoxProps),
+                new Widget.Box({
+                    visible: bind(dev, "connecting"),
+                    setup: (self) => {
+                        const spinner = new AstalSpinner();
 
-                if(connecting) {
+                        self.add(spinner);
-                    const spinner = new Gtk.Spinner({
+                    }
-                        visible: true
+                } as Widget.BoxProps)
-                    } as Gtk.Spinner.ConstructorProps);
+                // Spinner here
-                    spinner.start();
+            ]
-
-                    return spinner;
-                }
-
-                return [];
-            })()
         } as Widget.BoxProps),
         extraButtons: Variable.derive([
             bind(dev, "connected"),

ags/widget/control-center/tiles/Bluetooth.ts

@@ -4,23 +4,24 @@ import AstalBluetooth from "gi://AstalBluetooth";
 import { BluetoothPage } from "../pages/Bluetooth";
 import { TilesPages } from "../Tiles";
 
+
 export const TileBluetooth = Tile({
     title: "Bluetooth",
     description: bind(AstalBluetooth.get_default(), "isConnected").as((connected) => {
         const connectedDev = AstalBluetooth.get_default().devices.filter(dev => dev.connected)?.[0];
         return connected && connectedDev ? connectedDev.get_alias() : ""
     }),
-    onToggledOn: () => AstalBluetooth.get_default().adapter.set_powered(true),
+    onToggledOn: () => AstalBluetooth.get_default().adapter?.set_powered(true),
-    onToggledOff: () => AstalBluetooth.get_default().adapter.set_powered(false),
+    onToggledOff: () => AstalBluetooth.get_default().adapter?.set_powered(false),
     onClickMore: () => TilesPages?.toggle(BluetoothPage()),
     enableOnClickMore: true,
     icon: Variable.derive([
-            bind(AstalBluetooth.get_default().adapter, "powered"),
+            bind(AstalBluetooth.get_default(), "isPowered"),
             bind(AstalBluetooth.get_default(), "isConnected")
         ],
         (powered: boolean, isConnected: boolean) => 
             powered ? ( isConnected ? "󰂱" : "󰂯" ) : "󰂲"
     )(),
     iconSize: 16,
-    toggleState: bind(AstalBluetooth.get_default().adapter, "powered")
+    toggleState: bind(AstalBluetooth.get_default(), "isPowered")
 } as TileProps);

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

@@ -11,6 +11,7 @@ export type TileProps = {
     description?: string | Binding<string | undefined>;
     toggleState?: boolean | Binding<boolean | undefined>;
     enableOnClickMore?: boolean | Binding<boolean | undefined>;
+    onDestroy?: () => void;
     onToggledOn: () => void;
     onToggledOff: () => void;
     onClickMore?: () => void;
@@ -42,7 +43,10 @@ export function Tile(props: TileProps): (() => Gtk.Widget) {
         ),
         expand: true,
         visible: props.visible,
-        onDestroy: () => subscription?.(),
+        onDestroy: () => {
+            props.onDestroy?.();
+            subscription?.();
+        },
         children: [
             new Widget.Button({
                 className: "toggle-button",