⚡ 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 = () => {
+    const icon: Variable<string> = Variable.derive([
+            bind(AstalBluetooth.get_default(), "isPowered"),
+            bind(AstalBluetooth.get_default(), "isConnected")
+        ],
+        (powered: boolean, isConnected: boolean) => 
+            powered ? ( isConnected ? "󰂱" : "󰂯" ) : "󰂲"
+    );
+    return Tile({
         title: "Bluetooth",
         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: Variable.derive([
-            bind(AstalBluetooth.get_default(), "isPowered"),
-            bind(AstalBluetooth.get_default(), "isConnected")
-        ],
-        (powered: boolean, isConnected: boolean) => 
-            powered ? ( isConnected ? "󰂱" : "󰂯" ) : "󰂲"
-    )(),
+        icon: icon(),
         iconSize: 16,
         toggleState: bind(AstalBluetooth.get_default(), "isPowered")
-} as TileProps);
+    } 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({
-    title: tr("control_center.tiles.recording.title") || "Screen Recording",
-    description: Variable.derive([
+export const TileRecording = () => {
+    const description: Variable<string> = 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 }`;
-    })(),
+    });
+
+    return Tile({
+        title: tr("control_center.tiles.recording.title") || "Screen Recording",
+        description: description(),
         icon: "󰻂",
         visible: wfRecorderInstalled,
+        onDestroy: () => description.drop(),
         onToggledOff: () => Recording.getDefault().stopRecording(),
         onToggledOn: () => Recording.getDefault().startRecording(),
         toggleState: bind(Recording.getDefault(), "recording"),
         iconSize: 16
-} as TileProps);
+    } as TileProps)();
+}