ags: lot of stuff lmao

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

@@ -0,0 +1,21 @@
+import { bind } from "astal";
+import { Tile, TileProps } from "./Tile";
+import AstalBluetooth from "gi://AstalBluetooth";
+import { togglePage } from "../Pages";
+import { BluetoothPage } from "../pages/Bluetooth";
+
+export const TileBluetooth = Tile({
+    title: "Bluetooth",
+    description: bind(AstalBluetooth.get_default(), "devices").as((devices: Array<AstalBluetooth.Device>) => {
+        const connected: Array<AstalBluetooth.Device> = devices.filter(
+            (dev: AstalBluetooth.Device) => dev.connected);
+
+        return connected[0] ? connected[0].get_alias() : undefined;
+    }),
+    onToggledOn: () => AstalBluetooth.get_default().adapter.set_powered(true),
+    onToggledOff: () => AstalBluetooth.get_default().adapter.set_powered(false),
+    onClickMore: () => togglePage(BluetoothPage()),
+    icon: "󰂯",
+    iconSize: 16,
+    toggleState: bind(AstalBluetooth.get_default().adapter, "powered")
+} as TileProps);

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

@@ -1,8 +1,26 @@
-import { Gtk, Widget } from "astal/gtk3";
+import { bind, execAsync } from "astal";
+import { Tile, TileProps } from "./Tile";
+import AstalNetwork from "gi://AstalNetwork";
+import { Widget } from "astal/gtk3";
 
 export const TileInternet = new Widget.Box({
-    className: "tile more internet",
-    children: [
-        toggleButton
-    ]
+    child: bind(AstalNetwork.get_default(), "wired").as((wired: AstalNetwork.Wired) => Tile({
+        title: "Wired",
+        description: bind(wired, "internet").as((internet: AstalNetwork.Internet) => {
+            switch(internet) {
+                case AstalNetwork.Internet.CONNECTED: 
+                    return "Connected";
+                case AstalNetwork.Internet.DISCONNECTED:
+                    return "Disconnected";
+                case AstalNetwork.Internet.CONNECTING:
+                    return "Connecting...";
+            }
+        }),
+        onToggledOn: () => execAsync("nmcli n on"),
+        onToggledOff: () => execAsync("nmcli n off"),
+        icon: "󰛳",
+        iconSize: 16,
+        toggleState: bind(wired, "internet").as((internet: AstalNetwork.Internet) => 
+            internet === AstalNetwork.Internet.CONNECTING || internet === AstalNetwork.Internet.CONNECTED)
+    } as TileProps))
 } as Widget.BoxProps);

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

@@ -1,39 +1,94 @@
-import { Binding } from "astal";
+import { Binding, Variable } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 
 export type TileProps = {
     className?: string | Binding<string | undefined>;
-    iconName?: string | Binding<string | undefined>;
+    icon?: string | Binding<string | undefined>;
     visible?: boolean | Binding<boolean | undefined>;
     iconSize?: number | Binding<number | undefined>;
-    title: string | Binding<string>;
+    title: string | Binding<string | undefined>;
     description?: string | Binding<string | undefined>;
-    defaultToggleState?: boolean;
+    toggleState?: boolean | Binding<boolean | undefined>;
     onToggledOn: () => void;
     onToggledOff: () => void;
     onClickMore?: () => void;
 }
 
-export function Tile(props: TileProps): Widget.Box {
+export function Tile(props: TileProps): Widget.EventBox {
+    const toggled = new Variable<boolean>(props.toggleState instanceof Binding ?
+        (props.toggleState.get() || false) : (props.toggleState || false));
 
-    const toggleButton = new Gtk.ToggleButton();
-    toggleButton.set_active(props.defaultToggleState || false);
+    if(props?.toggleState instanceof Binding) 
+        props.toggleState.subscribe(val => toggled.set(val || false))();
 
-    const moreButton = new Widget.Button({
-        className: "more",
-        visible: props.onClickMore 
-    });
+    return new Widget.EventBox({
+        className: toggled().as((state: boolean) => 
+            state ? "tile-eventbox toggled" : "tile-eventbox"),
+        expand: true,
+        onClick: () => {
+            if(toggled.get()) {
+                toggled.set(false);
+                console.log(toggled.get());
+                props.onToggledOff && props.onToggledOff();
+                return;
+            }
 
-    return new Widget.Box({
-        className: (typeof Binding<string | undefined>) === (typeof props.className) ? 
-            (props.className as Binding<string | undefined>).as((clsName: (string|undefined)) => 
-                `tile ${clsName || ""}`)
-        : 
-            props.className,
-        visible: props.visible,
-        children: [
-            toggleButton,
-            moreButton
-        ]
-    })
+            toggled.set(true);
+            props.onToggledOn && props.onToggledOn(); 
+        },
+        child: new Widget.Box({
+            className: (props.className instanceof Binding) ? 
+                props.className.as((clsName: (string|undefined)) => 
+                    `tile ${clsName || ""}`)
+                : `tile ${props.className || ""}`,
+            visible: props.visible,
+            expand: true,
+            hexpand: true,
+            children: [
+                new Widget.Box({
+                    className: "content",
+                    expand: true,
+                    children: [
+                        new Widget.Label({
+                            className: "icon nf",
+                            label: props.icon || "icon",
+                            css: `.icon { font-size: ${props.iconSize || "12px"} }`
+                        } as Widget.LabelProps),
+                        new Widget.Box({
+                            className: "text",
+                            orientation: Gtk.Orientation.VERTICAL,
+                            vexpand: true,
+                            valign: Gtk.Align.CENTER,
+                            children: [
+                                new Widget.Label({
+                                    className: "title",
+                                    xalign: 0,
+                                    truncate: true,
+                                    label: props.title
+                                } as Widget.LabelProps),
+                                new Widget.Label({
+                                    className: "description",
+                                    visible: props.description,
+                                    truncate: true,
+                                    xalign: 0,
+                                    label: props.description
+                                } as Widget.LabelProps)
+                            ]
+                        } as Widget.BoxProps)
+                    ]
+                } as Widget.BoxProps),
+                new Widget.Button({
+                    className: "more icon",
+                    visible: props.onClickMore !== undefined,
+                    halign: Gtk.Align.END,
+                    image: new Widget.Icon({
+                        icon: "go-next-symbolic",
+                        css: "icon { font-size: 16px; }"
+                    }),
+                    onClick: () => props.onClickMore && props?.onClickMore(),
+                    widthRequest: 32
+                })
+            ]
+        })
+    } as Widget.EventBoxProps)
 }