⚡ ags(control-center/tiles): drop variables on ::destroy

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

@@ -5,24 +5,28 @@ import { BluetoothPage } from "../pages/Bluetooth";
 import { TilesPages } from "../Tiles";
 
 
-export const TileBluetooth = Tile({
+export const TileBluetooth = () => {
-    title: "Bluetooth",
+    const icon: Variable<string> = Variable.derive([
-    visible: bind(AstalBluetooth.get_default(), "adapter").as(Boolean),
-    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),
-    onToggledOff: () => AstalBluetooth.get_default().adapter?.set_powered(false),
-    onClickMore: () => TilesPages?.toggle(BluetoothPage()),
-    enableOnClickMore: true,
-    icon: Variable.derive([
             bind(AstalBluetooth.get_default(), "isPowered"),
             bind(AstalBluetooth.get_default(), "isConnected")
         ],
         (powered: boolean, isConnected: boolean) => 
             powered ? ( isConnected ? "󰂱" : "󰂯" ) : "󰂲"
-    )(),
+    );
-    iconSize: 16,
+    return Tile({
-    toggleState: bind(AstalBluetooth.get_default(), "isPowered")
+        title: "Bluetooth",
-} as TileProps);
+        visible: bind(AstalBluetooth.get_default(), "adapter").as(Boolean),
+        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() : ""
+        }),
+        onDestroy: () => icon.drop(),
+        onToggledOn: () => AstalBluetooth.get_default().adapter?.set_powered(true),
+        onToggledOff: () => AstalBluetooth.get_default().adapter?.set_powered(false),
+        onClickMore: () => TilesPages?.toggle(BluetoothPage()),
+        enableOnClickMore: true,
+        icon: icon(),
+        iconSize: 16,
+        toggleState: bind(AstalBluetooth.get_default(), "isPowered")
+    } as TileProps)();
+}

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

@@ -7,9 +7,8 @@ import { isInstalled } from "../../../scripts/utils";
 
 const wfRecorderInstalled = isInstalled("wf-recorder");
 
-export const TileRecording = Tile({
+export const TileRecording = () => {
-    title: tr("control_center.tiles.recording.title") || "Screen Recording",
+    const description: Variable<string> = Variable.derive([
-    description: Variable.derive([
         bind(Recording.getDefault(), "recording"),
         getDateTime()
     ], (recording, dateTime) => {
@@ -26,11 +25,17 @@ export const TileRecording = Tile({
         return `${ hours > 0 ? `${hours < 10 ? `0${hours}` : hours }:` : ""
             }${ minutes < 10 ? `0${minutes}` : minutes 
             }:${ seconds < 10 ? `0${seconds}` : seconds }`;
-    })(),
+    });
-    icon: "󰻂",
+
-    visible: wfRecorderInstalled,
+    return Tile({
-    onToggledOff: () => Recording.getDefault().stopRecording(),
+        title: tr("control_center.tiles.recording.title") || "Screen Recording",
-    onToggledOn: () => Recording.getDefault().startRecording(),
+        description: description(),
-    toggleState: bind(Recording.getDefault(), "recording"),
+        icon: "󰻂",
-    iconSize: 16
+        visible: wfRecorderInstalled,
-} as TileProps);
+        onDestroy: () => description.drop(),
+        onToggledOff: () => Recording.getDefault().stopRecording(),
+        onToggledOn: () => Recording.getDefault().startRecording(),
+        toggleState: bind(Recording.getDefault(), "recording"),
+        iconSize: 16
+    } as TileProps)();
+}