feat: make AGS colorshell configuration fully declarative

- Add complete colorshell v2.0.3 configuration to home/ags-config/
- Disable runner plugin and NightLight tile (incompatible with NixOS)
- Customize SCSS with full opacity (no transparency)
- Add dark pale blue color scheme in home/pywal-colors/
- Configure Papirus-Dark icon theme via home-manager
- Make ~/.config/ags/ immutable and managed by Nix store
- Auto-deploy pywal colors to ~/.cache/wal/colors.json

All AGS configuration is now reproducible and version controlled.

home/ags-config/window/control-center/widgets/NotifHistory.tsx

@@ -0,0 +1,50 @@
+import { Gtk } from "ags/gtk4";
+import { HistoryNotification, Notifications } from "../../../modules/notifications";
+import { NotificationWidget } from "../../../widget/Notification";
+import { tr } from "../../../i18n/intl";
+import { createBinding, For } from "ags";
+
+import AstalNotifd from "gi://AstalNotifd";
+
+
+export const NotifHistory = () => 
+    <Gtk.Box orientation={Gtk.Orientation.VERTICAL} 
+      class={createBinding(Notifications.getDefault(), "history").as(history => 
+          `notif-history ${history.length < 1 ? "hide" : ""}`)} vexpand={false}>
+
+        <Gtk.ScrolledWindow class={"history-scrollable"} hscrollbarPolicy={Gtk.PolicyType.NEVER}
+          vscrollbarPolicy={Gtk.PolicyType.AUTOMATIC} propagateNaturalHeight={true}
+          onShow={(self) => {
+              if(!(self.get_child()! as Gtk.Viewport).get_child()) return;
+
+              self.minContentHeight = 
+                  ((self.get_child()! as Gtk.Viewport).get_child() as Gtk.Box
+                      ).get_first_child()!.get_allocation().height 
+                  || 0;
+          }}>
+
+            <Gtk.Box class={"notifications"} hexpand={true} orientation={Gtk.Orientation.VERTICAL}
+              spacing={4} valign={Gtk.Align.START}>
+
+                <For each={createBinding(Notifications.getDefault(), "history")}>
+                    {(notif: AstalNotifd.Notification|HistoryNotification) => 
+                        <NotificationWidget notification={notif} showTime={true}
+                          actionClose={(n) => Notifications.getDefault().removeHistory(n.id)}
+                          actionClicked={(n) => Notifications.getDefault().removeHistory(n.id)}
+                    />}
+                </For>
+            </Gtk.Box>
+        </Gtk.ScrolledWindow>
+
+        <Gtk.Box class={"button-row"} hexpand>
+            <Gtk.Button class={"clear-all"} halign={Gtk.Align.END}
+              onClicked={() => Notifications.getDefault().clearHistory()}>
+
+                <Gtk.Box hexpand>
+                    <Gtk.Image class={"icon"} iconName={"edit-clear-all-symbolic"} 
+                      css={"margin-right: 6px;"}  />
+                    <Gtk.Label label={tr("clear")} />
+                </Gtk.Box>
+            </Gtk.Button>
+        </Gtk.Box>
+    </Gtk.Box> as Gtk.Box;

home/ags-config/window/control-center/widgets/Page.tsx

@@ -0,0 +1,201 @@
+import { Gtk } from "ags/gtk4";
+import { Separator } from "../../../widget/Separator";
+import { Accessor, createBinding, createRoot, For, Node } from "ags";
+import { gtype, property, register } from "ags/gobject";
+import { variableToBoolean } from "../../../modules/utils";
+
+import Pango from "gi://Pango?version=1.0";
+import GObject from "gi://GObject?version=2.0";
+
+
+export type BottomButton = {
+    title: string | Accessor<string>;
+    description?: string | Accessor<string>;
+    tooltipText?: string | Accessor<string>;
+    tooltipMarkup?: string | Accessor<string>;
+    actionClicked?: () => void;
+};
+
+export type HeaderButton = {
+    label?: string|Accessor<string>;
+    icon: string|Accessor<string>;
+    tooltipText?: string | Accessor<string>;
+    tooltipMarkup?: string | Accessor<string>;
+    actionClicked?: () => void;
+};
+
+@register({ GTypeName: "Page" })
+export class Page extends GObject.Object {
+    readonly #id: string;
+    readonly #create: () => Node;
+
+    public readonly actionClosed?: () => void;
+    public readonly actionOpen?: () => void;
+    public get id() { return this.#id; }
+
+    @property(String)
+    title: string;
+
+    @property(gtype<string|null>(String))
+    description: string|null = null;
+
+    @property(gtype<Gtk.Orientation>(Number))
+    orientation: Gtk.Orientation = Gtk.Orientation.VERTICAL;
+
+    @property(Number)
+    spacing: number = 4;
+
+    @property(Array<HeaderButton>)
+    headerButtons: Array<HeaderButton> = [];
+    @property(Array<BottomButton>)
+    bottomButtons: Array<BottomButton> = [];
+
+
+    constructor(props: {
+        id: string;
+        title: string;
+        description?: string;
+        headerButtons?: Array<HeaderButton>;
+        bottomButtons?: Array<BottomButton>;
+        orientation?: Gtk.Orientation;
+        spacing?: number;
+        content: () => Node;
+        actionOpen?: () => void;
+        actionClosed?: () => void;
+    }) {
+        super();
+
+        this.#id = props.id;
+        this.#create = props.content;
+
+        this.title = props.title;
+        this.actionClosed = props.actionClosed;
+        this.actionOpen = props.actionOpen;
+
+        if(props.orientation != null)
+            this.orientation = props.orientation;
+
+        if(props.description != null)
+            this.description = props.description;
+
+        if(props.spacing != null)
+            this.spacing = props.spacing;
+
+        if(props.headerButtons != null)
+            this.headerButtons = props.headerButtons;
+
+        if(props.bottomButtons != null)
+            this.bottomButtons = props.bottomButtons;
+
+        if(props.actionOpen != null)
+            this.actionOpen = props.actionOpen;
+
+        if(props.actionClosed != null)
+            this.actionClosed = props.actionClosed;
+    }
+
+    public create(): Gtk.Box {
+        return createRoot((dispose) => 
+            <Gtk.Box hexpand class={`page container ${this.#id ?? ""}`} cssName={"page"} name={"page"}
+              orientation={Gtk.Orientation.VERTICAL} 
+              onDestroy={() => dispose()}>
+
+                <Gtk.Box class={"header"} orientation={Gtk.Orientation.VERTICAL}>
+                    <Gtk.Box class={"top"} hexpand>
+                        <Gtk.Box orientation={Gtk.Orientation.VERTICAL} hexpand>
+                            <Gtk.Label class={"title"} label={createBinding(this, "title")} xalign={0} 
+                              ellipsize={Pango.EllipsizeMode.END} />
+
+                            <Gtk.Label class={"description"} label={createBinding(this, "description").as(desc =>
+                                  desc ?? ""
+                              )} xalign={0} ellipsize={Pango.EllipsizeMode.END} 
+                              visible={variableToBoolean(createBinding(this, "description"))} />
+                        </Gtk.Box>
+                        <Gtk.Box class={"button-row"} visible={variableToBoolean(
+                            createBinding(this, "headerButtons")
+                        )} hexpand={false}>
+
+                            <For each={createBinding(this, "headerButtons")}>
+                                {(button: HeaderButton) => 
+                                    <Gtk.Button class={"header-button"} label={button.label}
+                                      iconName={button.icon} onClicked={() => button.actionClicked?.()}
+                                      tooltipText={button.tooltipText} tooltipMarkup={button.tooltipMarkup}
+                                    />
+                                }
+                            </For>
+                        </Gtk.Box>
+                    </Gtk.Box>
+                </Gtk.Box>
+                <Gtk.Box class={"content"} hexpand={false} orientation={createBinding(this, "orientation")} 
+                  spacing={createBinding(this, "spacing")}>
+
+                    {this.#create()}
+                </Gtk.Box>
+                <Separator alpha={.2} spacing={6} orientation={Gtk.Orientation.VERTICAL}
+                  visible={variableToBoolean(createBinding(this, "bottomButtons"))} 
+                />
+                <Gtk.Box class={"bottom-buttons"} orientation={Gtk.Orientation.VERTICAL}
+                  visible={variableToBoolean(createBinding(this, "bottomButtons"))} spacing={2}>
+                
+                    <For each={createBinding(this, "bottomButtons")}>
+                        {(button: BottomButton) => 
+                            <PageButton actionClicked={() => button.actionClicked?.()} 
+                              tooltipText={button.tooltipText}
+                              tooltipMarkup={button.tooltipMarkup}
+                              title={button.title}
+                              description={button.description}
+                            />
+                        }
+                    </For>
+                </Gtk.Box>
+            </Gtk.Box> as Gtk.Box
+        );
+    }
+
+    public static getContent(pageWidget: Gtk.Box) {
+        return pageWidget.get_first_child()!.get_next_sibling()! as Gtk.Box;
+    }
+}
+
+export function PageButton({ onUnmap, ...props }: {
+    class?: string | Accessor<string>;
+    icon?: string | Accessor<string>;
+    title: string | Accessor<string>;
+    endWidget?: Node;
+    description?: string | Accessor<string>;
+    extraButtons?: Node;
+    maxWidthChars?: number | Accessor<number>;
+    onUnmap?: (self: Gtk.Box) => void;
+    actionClicked?: (self: Gtk.Button) => void;
+    tooltipText?: string | Accessor<string>;
+    tooltipMarkup?: string | Accessor<string>;
+}): Gtk.Box {
+    return <Gtk.Box onUnmap={(self) => onUnmap?.(self)} class={"page-button"}>
+        <Gtk.Button onClicked={props.actionClicked} class={props.class} hexpand
+          tooltipText={props.tooltipText} tooltipMarkup={props.tooltipMarkup}>
+
+            <Gtk.Box class={"container"} hexpand>
+                {props.icon && <Gtk.Image iconName={props.icon} visible={variableToBoolean(props.icon)}
+                    css={"font-size: 20px; margin-right: 6px;"} />}
+
+                <Gtk.Box orientation={Gtk.Orientation.VERTICAL} hexpand vexpand={false}>
+                    <Gtk.Label class={"title"} xalign={0} tooltipText={props.title}
+                      ellipsize={Pango.EllipsizeMode.END} label={props.title}
+                      maxWidthChars={props.maxWidthChars ?? 28}
+                    />
+                    <Gtk.Label class={"description"} xalign={0} visible={variableToBoolean(props.description)}
+                      label={props.description} ellipsize={Pango.EllipsizeMode.END} 
+                      tooltipText={props.description} />
+                </Gtk.Box>
+
+                <Gtk.Box visible={variableToBoolean(props.endWidget)} halign={Gtk.Align.END}>
+                    {props.endWidget && props.endWidget}
+                </Gtk.Box>
+            </Gtk.Box>
+        </Gtk.Button>
+
+        <Gtk.Box class={"extra-buttons"} visible={variableToBoolean(props.extraButtons)}>
+            {props.extraButtons as Node}
+        </Gtk.Box>
+    </Gtk.Box> as Gtk.Box;
+}

home/ags-config/window/control-center/widgets/QuickActions.tsx

@@ -0,0 +1,91 @@
+import { Gtk } from "ags/gtk4";
+import { Windows } from "../../../windows";
+import { Wallpaper } from "../../../modules/wallpaper";
+import { execApp } from "../../../modules/apps";
+import { Accessor } from "ags";
+import { createPoll } from "ags/time";
+
+import GLib from "gi://GLib?version=2.0";
+import Gio from "gi://Gio?version=2.0";
+
+
+const userFace: Gio.File = Gio.File.new_for_path(`${GLib.get_home_dir()}/.face`);
+const uptime: Accessor<string> = createPoll("Just turned on", 1000, "uptime -p"); 
+
+function LockButton(): Gtk.Button {
+    return <Gtk.Button iconName={"system-lock-screen-symbolic"} 
+      onClicked={() => {
+          Windows.getDefault().close("control-center");
+          execApp("hyprlock");
+      }} 
+    /> as Gtk.Button;
+}
+
+function ColorPickerButton(): Gtk.Button {
+    return <Gtk.Button iconName={"color-select-symbolic"}
+      onClicked={() => {
+          Windows.getDefault().close("control-center");
+          execApp("sh $HOME/.config/hypr/scripts/color-picker.sh");
+      }}
+    /> as Gtk.Button;
+}
+
+function ScreenshotButton(): Gtk.Button {
+    return <Gtk.Button iconName={"applets-screenshooter-symbolic"}
+      onClicked={() => {
+          Windows.getDefault().close("control-center");
+          execApp(`sh ${GLib.get_user_config_dir()}/hypr/scripts/screenshot.sh`);
+      }}
+    /> as Gtk.Button;
+}
+
+function SelectWallpaperButton(): Gtk.Button {
+    return <Gtk.Button iconName={"preferences-desktop-wallpaper-symbolic"}
+      onClicked={() => {
+          Windows.getDefault().close("control-center");
+          Wallpaper.getDefault().pickWallpaper();
+      }}
+    /> as Gtk.Button;
+}
+
+function LogoutButton(): Gtk.Button {
+    return <Gtk.Button iconName={"system-shutdown-symbolic"}
+      onClicked={() => {
+          Windows.getDefault().close("control-center");
+          Windows.getDefault().open("logout-menu");
+      }}
+    /> as Gtk.Button;
+}
+
+export const QuickActions = () => 
+    <Gtk.Box class={"quickactions"}>
+        <Gtk.Box halign={Gtk.Align.START} class={"left"} hexpand>
+            {userFace.query_exists(null) && 
+                <Gtk.Box class={"user-face"} css={
+                  `background-image: url("file://${userFace.get_path()!}");`} 
+                />
+            }
+            <Gtk.Box orientation={Gtk.Orientation.VERTICAL}>
+                <Gtk.Box class={"user-host"}>
+                    <Gtk.Label class={"user"} xalign={0} 
+                      label={GLib.get_user_name()} />
+                    <Gtk.Label class={"host"} xalign={0} yalign={.8}
+                      label={`@${GLib.get_host_name()}`} />
+                </Gtk.Box>
+
+                <Gtk.Box>
+                    <Gtk.Image iconName={"hourglass-symbolic"} />
+                    <Gtk.Label class={"uptime"} xalign={0} tooltipText={"Up time"}
+                      label={uptime.as(str => str.replace(/^up /, ""))} />
+                </Gtk.Box>
+            </Gtk.Box>
+        </Gtk.Box>
+
+        <Gtk.Box class={"right button-row"} halign={Gtk.Align.END} hexpand>
+            <LockButton />
+            <ColorPickerButton />
+            <ScreenshotButton />
+            <SelectWallpaperButton />
+            <LogoutButton />
+        </Gtk.Box>
+    </Gtk.Box> as Gtk.Box;

home/ags-config/window/control-center/widgets/Sliders.tsx

@@ -0,0 +1,76 @@
+import { Astal, Gtk } from "ags/gtk4";
+import { Wireplumber } from "../../../modules/volume";
+import { Pages } from "./pages";
+import { PageSound } from "./pages/Sound";
+import { PageMicrophone } from "./pages/Microphone";
+import { createBinding, With } from "ags";
+import { Backlights } from "../../../modules/backlight";
+import { PageBacklight } from "./pages/Backlight";
+
+import AstalWp from "gi://AstalWp";
+
+
+export let slidersPages: Pages|undefined;
+
+export function Sliders() {
+    return <Gtk.Box class={"sliders"} orientation={Gtk.Orientation.VERTICAL} 
+      hexpand spacing={10} onUnmap={() => slidersPages = undefined}>
+
+        <With value={createBinding(Wireplumber.getWireplumber(), "defaultSpeaker")}>
+            {(sink: AstalWp.Endpoint) => <Gtk.Box class={"sink speaker"} spacing={3}>
+                <Gtk.Button onClicked={() => Wireplumber.getDefault().toggleMuteSink()}
+                    iconName={createBinding(sink, "volumeIcon").as((icon) => 
+                        (!Wireplumber.getDefault().isMutedSink() && 
+                            Wireplumber.getDefault().getSinkVolume() > 0
+                        ) ? icon : "audio-volume-muted-symbolic"
+                )} />
+
+                <Astal.Slider drawValue={false} hexpand value={createBinding(sink, "volume")}
+                  max={Wireplumber.getDefault().getMaxSinkVolume() / 100}
+                  onChangeValue={(_, __, value) => sink.set_volume(value)} />
+
+                <Gtk.Button class={"more"} iconName={"go-next-symbolic"} onClicked={() => 
+                    slidersPages?.toggle(PageSound)} />
+            </Gtk.Box>}
+        </With>
+        <With value={createBinding(Wireplumber.getWireplumber(), "defaultMicrophone")}>
+            {(source: AstalWp.Endpoint) => <Gtk.Box class={"source microphone"} spacing={3}>
+                <Gtk.Button onClicked={() => Wireplumber.getDefault().toggleMuteSource()}
+                    iconName={createBinding(source, "volumeIcon").as((icon) => 
+                        (!Wireplumber.getDefault().isMutedSource() && 
+                            Wireplumber.getDefault().getSourceVolume() > 0
+                        ) ? icon : "microphone-sensitivity-muted-symbolic"
+                )} />
+
+                <Astal.Slider drawValue={false} hexpand value={createBinding(source, "volume")}
+                  max={Wireplumber.getDefault().getMaxSourceVolume() / 100}
+                  onChangeValue={(_, __, value) => source.set_volume(value)} />
+
+                <Gtk.Button class={"more"} iconName={"go-next-symbolic"} onClicked={() => 
+                    slidersPages?.toggle(PageMicrophone)} />
+            </Gtk.Box>}
+        </With>
+        <Gtk.Box visible={createBinding(Backlights.getDefault(), "available")}>
+            <With value={createBinding(Backlights.getDefault(), "default")}>
+                {(bklight: Backlights.Backlight|null) => bklight && 
+                    <Gtk.Box class={"backlight"} spacing={3}>
+                        <Gtk.Button onClicked={() => {
+                              bklight.brightness = bklight.maxBrightness
+                          }} iconName={"display-brightness-symbolic"}
+                        />
+
+                        <Astal.Slider drawValue={false} hexpand value={createBinding(bklight, "brightness")} 
+                          max={bklight.maxBrightness}
+                          onChangeValue={(_, __, value) => {
+                              bklight.brightness = value
+                          }}
+                        />
+                        <Gtk.Button class={"more"} iconName={"go-next-symbolic"} onClicked={() => 
+                            slidersPages?.toggle(PageBacklight)} />
+                    </Gtk.Box>
+                }
+            </With>
+        </Gtk.Box>
+        <Pages $={(self) => slidersPages = self} />
+    </Gtk.Box>
+}

home/ags-config/window/control-center/widgets/pages/Backlight.tsx

@@ -0,0 +1,84 @@
+import { Astal, Gtk } from "ags/gtk4";
+import { tr } from "../../../../i18n/intl";
+import { Backlights } from "../../../../modules/backlight";
+import { Page, PageButton } from "../Page";
+import { createBinding, For, With } from "ags";
+import { addSliderMarksFromMinMax } from "../../../../modules/utils";
+import { userData } from "../../../../config";
+
+
+export const PageBacklight = <Page
+    id={"backlight"}
+    title={tr("control_center.pages.backlight.title")}
+    description={tr("control_center.pages.backlight.description")}
+    actionOpen={() => {
+        const dataDefaultBacklight = userData.getProperty("control_center.default_backlight", "any");
+        if(typeof dataDefaultBacklight === "string" && 
+           Backlights.getDefault().default?.name !== dataDefaultBacklight) {
+
+            const bk = Backlights.getDefault().backlights.filter(b => b.name === dataDefaultBacklight)[0];
+            if(!bk) return;
+
+            Backlights.getDefault().setDefault(bk);
+        }
+    }}
+    content={() => (
+        <With value={createBinding(Backlights.getDefault(), "backlights")}>
+            {(bklights: Array<Backlights.Backlight>) => bklights.length > 0 &&
+                <Gtk.Box orientation={Gtk.Orientation.VERTICAL} spacing={4}>
+                    <Gtk.Box class={"list"} visible={createBinding(Backlights.getDefault(), "backlights")
+                        .as((bklights) => bklights.length > 1)}>
+                        
+                        <Gtk.Label label={"Default"} />
+                        <For each={createBinding(Backlights.getDefault(), "backlights")}>
+                            {(bk: Backlights.Backlight) => 
+                                <PageButton class={createBinding(bk, "isDefault").as(is => is ? "highlight" : "")} 
+                                  title={bk.name}
+                                  icon={"video-display-symbolic"}
+                                  actionClicked={() => {
+                                      if(Backlights.getDefault().default?.path !== bk.path) {
+                                          Backlights.getDefault().setDefault(bk);
+                                          // save data
+                                          userData.setProperty(
+                                              "control_center.default_backlight", 
+                                              bk.name, 
+                                              true
+                                          );
+                                      }
+                                  }}
+                                  endWidget={
+                                      <Gtk.Image iconName={"object-select-symbolic"} 
+                                        visible={createBinding(bk, "isDefault")} 
+                                      />
+                                  }
+                                />
+                            }
+                        </For>
+                    </Gtk.Box>
+                    <Gtk.Box class={"sliders"} orientation={Gtk.Orientation.VERTICAL} spacing={6}>
+                        {bklights.map((bklight, i) =>
+                            <Gtk.Box class={"bklight"} orientation={Gtk.Orientation.VERTICAL}
+                              spacing={4}>
+
+                                <Gtk.Label class={"subheader"} label={`Backlight ${i+1} (${bklight.name})`} 
+                                  xalign={0} />
+                                <Astal.Slider $={(self) => addSliderMarksFromMinMax(self)} 
+                                  min={0} max={bklight.maxBrightness}
+                                  value={createBinding(bklight, "brightness")}
+                                  onChangeValue={(_, __, value) => {
+                                      bklight.brightness = value
+                                  }}
+                                />
+                            </Gtk.Box>
+                        )}
+                    </Gtk.Box>
+                </Gtk.Box>
+            }
+        </With>
+    )}
+    headerButtons={[{
+        icon: "arrow-circular-top-right",
+        tooltipText: tr("control_center.pages.backlight.refresh"),
+        actionClicked: () => Backlights.getDefault().scan()
+    }]}
+/> as Page;

home/ags-config/window/control-center/widgets/pages/Bluetooth.tsx

@@ -0,0 +1,205 @@
+import { Gtk } from "ags/gtk4";
+import { Page, PageButton } from "../Page";
+import { tr } from "../../../../i18n/intl";
+import { Windows } from "../../../../windows";
+import { Notifications } from "../../../../modules/notifications";
+import { execApp } from "../../../../modules/apps";
+import { createBinding, createComputed, For, With } from "ags";
+import { variableToBoolean } from "../../../../modules/utils";
+import { Bluetooth } from "../../../../modules/bluetooth";
+
+import AstalNotifd from "gi://AstalNotifd";
+import AstalBluetooth from "gi://AstalBluetooth";
+import Adw from "gi://Adw?version=1";
+import Gio from "gi://Gio?version=2.0";
+
+
+export const BluetoothPage = <Page
+    id={"bluetooth"}
+    title={tr("control_center.pages.bluetooth.title")}
+    spacing={6}
+    description={tr("control_center.pages.bluetooth.description")}
+    headerButtons={createBinding(Bluetooth.getDefault(), "adapter").as(adapter => adapter ? [{
+        icon: createBinding(adapter, "discovering")
+            .as(discovering => !discovering ? 
+                    "arrow-circular-top-right-symbolic"
+                : "media-playback-stop-symbolic"
+            ), 
+        tooltipText: createBinding(adapter, "discovering")
+            .as((discovering) => !discovering ? 
+                    tr("control_center.pages.bluetooth.start_discovering")
+                : tr("control_center.pages.bluetooth.stop_discovering")),
+        actionClicked: () => {
+            if(adapter.discovering) {
+                adapter.stop_discovery();
+                return;
+            }
+
+            adapter.start_discovery();
+        }
+    }]: [])}
+    actionClosed={() => Bluetooth.getDefault().adapter?.discovering && 
+        Bluetooth.getDefault().adapter?.stop_discovery()}
+    bottomButtons={[{
+        title: tr("control_center.pages.more_settings"),
+        actionClicked: () => {
+            Windows.getDefault().close("control-center");
+            execApp("overskride", "[float; animation slide right]");
+        }
+    }]}
+    content={() => {
+        const adapters = createBinding(AstalBluetooth.get_default(), "adapters");
+        const devices = createBinding(AstalBluetooth.get_default(), "devices");
+        const knownDevices = devices.as(devs => devs.filter(dev =>
+            dev.trusted || dev.paired || dev.connected
+        ).sort(dev => dev.connected ? 1 : 0));
+        const discoveredDevices = devices.as(devs => devs.filter(dev =>
+            !dev.trusted && !dev.paired && !dev.connected)
+        );
+
+        return [
+            <Gtk.Box class={"adapters"} visible={adapters.as(adptrs => adptrs.length > 1)
+            } spacing={2} orientation={Gtk.Orientation.VERTICAL}>
+
+                <Gtk.Label class={"sub-header"} label={tr("control_center.pages.bluetooth.adapters")} 
+                  xalign={0} />
+                <With value={adapters.as(adpts => adpts.length > 1)}>
+                    {(hasMoreAdapters: boolean) => hasMoreAdapters &&
+                        <Gtk.Box orientation={Gtk.Orientation.VERTICAL} spacing={2}>
+                            <For each={adapters}> 
+                                {(adapter: AstalBluetooth.Adapter) => {
+                                    const isSelected = createBinding(Bluetooth.getDefault(), "adapter").as(a =>
+                                        adapter.address === a?.address);
+
+                                    return <PageButton class={isSelected.as(is => is ? "selected" : "")} 
+                                      title={adapter.alias ?? "Adapter"} icon={"bluetooth-active-symbolic"} 
+                                      description={createBinding(adapter, "address")}
+                                      actionClicked={() => {
+                                          if(adapter.address !== Bluetooth.getDefault().adapter?.address)
+                                              Bluetooth.getDefault().adapter = adapter;
+                                      }}
+                                      endWidget={
+                                          <Gtk.Image iconName={"object-select-symbolic"} visible={isSelected} />
+                                      }
+                                    />;
+                                }}
+                            </For>
+                        </Gtk.Box>
+                    }
+                </With>
+            </Gtk.Box>,
+            <Gtk.Box class={"connections"} orientation={Gtk.Orientation.VERTICAL} hexpand
+              spacing={2}>
+                
+                <Gtk.Box class={"paired"} orientation={Gtk.Orientation.VERTICAL} spacing={4}
+                  visible={variableToBoolean(knownDevices)}>
+
+                    <Gtk.Label class={"sub-header"} label={tr("devices")} xalign={0} />
+                    <For each={knownDevices}>
+                        {(dev: AstalBluetooth.Device) => <DeviceWidget device={dev} />}
+                    </For>
+                </Gtk.Box>
+                <Gtk.Box class={"discovered"} orientation={Gtk.Orientation.VERTICAL} spacing={4}
+                  visible={variableToBoolean(discoveredDevices)}>
+
+                    <Gtk.Label class={"sub-header"} label={tr("control_center.pages.bluetooth.new_devices")} 
+                      xalign={0} />
+                    <For each={discoveredDevices}>
+                        {(dev: AstalBluetooth.Device) => <DeviceWidget device={dev} />}
+                    </For>
+                </Gtk.Box>
+            </Gtk.Box>
+        ];
+    }}
+/> as Page;
+
+function DeviceWidget({ device }: { device: AstalBluetooth.Device }): Gtk.Widget {
+    const pair = async () => {
+        if(device.paired) return;
+
+        device.pair();
+        device.set_trusted(true);
+    };
+
+    return <PageButton class={createBinding(device, "connected").as(conn => 
+      conn ? "selected" : "")} title={
+          createBinding(device, "alias").as(alias => alias ?? "Unknown Device")} 
+        icon={createBinding(device, "icon").as(ico => ico ?? "bluetooth-active-symbolic")}
+        tooltipText={
+            createBinding(device, "connected").as(connected => 
+                !connected ? tr("connect") : "")
+        } actionClicked={() => {
+            if(device.connected) return;
+
+            pair().then(() => {
+                device.connect_device((_, res) => {
+
+                    // get error
+                    try { device.connect_device_finish(res); }
+                    catch(e: any) {
+                        Notifications.getDefault().sendNotification({
+                            appName: "bluetooth",
+                            summary: "Connection Error",
+                            body: `An error occurred while attempting to connect to ${
+                                device.alias ?? device.name}: ${(e as Gio.IOErrorEnum).message}`
+                        });
+                    }
+                });
+            }).catch((err: Gio.IOErrorEnum) => 
+                Notifications.getDefault().sendNotification({
+                    appName: "bluetooth",
+                    summary: "Pairing Error",
+                    body: `Couldn't pair with ${device.alias ?? device.name}: ${err.message}`,
+                    urgency: AstalNotifd.Urgency.NORMAL
+                })
+            );
+        }}
+        endWidget={<Gtk.Box spacing={6}>
+            <Adw.Spinner visible={createBinding(device, "connecting")} />
+            <Gtk.Box visible={createComputed([
+                  createBinding(device, "batteryPercentage"),
+                  createBinding(device, "connected")
+              ]).as(([batt, connected]) => connected && (batt > -1))
+            } spacing={4}>
+                <Gtk.Label halign={Gtk.Align.END} label={
+                  createBinding(device, "batteryPercentage").as(batt => 
+                      `${Math.floor(batt * 100)}%`)
+                  } visible={createBinding(device, "connected")}
+                />
+
+                <Gtk.Image iconName={
+                    createBinding(device, "batteryPercentage").as(batt =>
+                        `battery-level-${Math.floor(batt * 100)}-symbolic`)
+                } css={"font-size: 16px; margin-left: 6px;"} />
+            </Gtk.Box>
+        </Gtk.Box>} extraButtons={<With value={createComputed([
+            createBinding(device, "connected"),
+            createBinding(device, "trusted")
+          ])}>
+            {([connected, trusted]: [boolean, boolean]) =>
+                <Gtk.Box visible={connected || trusted}>
+                    {<Gtk.Button iconName={connected ? 
+                          "list-remove-symbolic"
+                      : "user-trash-symbolic"} tooltipText={tr(connected ?
+                          "disconnect"
+                      : "control_center.pages.bluetooth.unpair_device"
+                    )} onClicked={() => {
+                        if(!connected) {
+                            Bluetooth.getDefault().adapter?.remove_device(device);
+                            return;
+                        }
+
+                        device.disconnect_device(null);
+                    }} />}
+
+                    <Gtk.Button iconName={trusted ? 
+                          "shield-safe-symbolic"
+                      : "shield-danger-symbolic"} tooltipText={tr(
+                          `control_center.pages.bluetooth.${trusted ? "un" : ""}trust_device`
+                      )} onClicked={() => device.set_trusted(!trusted)}
+                    />
+                </Gtk.Box>
+            }
+        </With>} 
+    /> as Gtk.Widget;
+}

home/ags-config/window/control-center/widgets/pages/Microphone.tsx

@@ -0,0 +1,34 @@
+import { Page, PageButton } from "../Page";
+import { Wireplumber } from "../../../../modules/volume";
+import { Gtk } from "ags/gtk4";
+import { tr } from "../../../../i18n/intl";
+import { createBinding, For } from "ags";
+import { lookupIcon } from "../../../../modules/apps";
+
+import AstalWp from "gi://AstalWp?version=0.1";
+
+
+export const PageMicrophone = <Page
+    id={"microphone"}
+    title={tr("control_center.pages.microphone.title")}
+    description={tr("control_center.pages.microphone.description")}
+    content={() => [
+        <Gtk.Label class={"sub-header"} label={tr("devices")} xalign={0} />,
+        <Gtk.Box orientation={Gtk.Orientation.VERTICAL} spacing={4}>
+            <For each={createBinding(Wireplumber.getWireplumber().get_audio()!, "microphones")}>
+                {(source: AstalWp.Endpoint) => <PageButton class={
+                      createBinding(source, "isDefault").as(isDefault => isDefault ? "selected" : "")
+                  } icon={createBinding(source, "icon").as(ico => lookupIcon(ico) ? 
+                      ico : "audio-input-microphone-symbolic")} title={
+                    createBinding(source, "description").as(desc => desc ?? "Microphone")
+                  } actionClicked={() => !source.isDefault && source.set_is_default(true)}
+                  endWidget={
+                    <Gtk.Image iconName={"object-select-symbolic"} visible={
+                        createBinding(source, "isDefault")} css={"font-size: 18px;"}
+                    />
+                  } 
+                />}
+            </For>
+        </Gtk.Box>
+    ]}
+/> as Page;

home/ags-config/window/control-center/widgets/pages/Network.tsx

@@ -0,0 +1,170 @@
+import { Gtk } from "ags/gtk4";
+import { Page, PageButton } from "../Page";
+import { Windows } from "../../../../windows";
+import { tr } from "../../../../i18n/intl";
+import { execApp } from "../../../../modules/apps";
+import { Notifications } from "../../../../modules/notifications";
+import { AskPopup, AskPopupProps } from "../../../../widget/AskPopup";
+import { encoder, variableToBoolean } from "../../../../modules/utils";
+import { createBinding, For, With } from "ags";
+
+import GLib from "gi://GLib?version=2.0";
+import NM from "gi://NM";
+import AstalNetwork from "gi://AstalNetwork";
+
+
+export const PageNetwork = <Page
+    id={"network"}
+    title={tr("control_center.pages.network.title")}
+    headerButtons={createBinding(AstalNetwork.get_default(), "primary").as(primary =>
+        primary === AstalNetwork.Primary.WIFI ? [{
+            icon: "arrow-circular-top-right-symbolic",
+            tooltipText: "Re-scan networks",
+            actionClicked: () => AstalNetwork.get_default().wifi.scan()
+        }] : []
+    )}
+    bottomButtons={[{
+        title: tr("control_center.pages.more_settings"),
+        actionClicked: () => {
+            Windows.getDefault().close("control-center");
+            execApp("nm-connection-editor", "[animationstyle gnomed]");
+        }
+    }]}
+    content={() => [
+        <Gtk.Box class={"devices"} hexpand orientation={Gtk.Orientation.VERTICAL}
+          visible={variableToBoolean(createBinding(AstalNetwork.get_default().client, "devices"))}
+          spacing={4}>
+
+            <Gtk.Label label={tr("devices")} xalign={0} class={"sub-header"} />
+            <For each={createBinding(AstalNetwork.get_default().client, "devices").as(devs => 
+              devs.filter(dev => dev.interface !== "lo" && dev.real /* filter local device */))}>
+
+                {(device: NM.Device) => <PageButton title={createBinding(device, "interface").as(iface =>
+                    iface ?? tr("control_center.pages.network.interface"))} class={"device"}
+                  icon={createBinding(device, "deviceType").as(type => type === NM.DeviceType.WIFI ?
+                    "network-wireless-symbolic" : "network-wired-symbolic")} extraButtons={[
+
+                      <Gtk.Button iconName={"view-more-symbolic"} onClicked={() => {
+                          Windows.getDefault().close("control-center");
+                          execApp(
+                              `nm-connection-editor --edit ${device.activeConnection?.connection.get_uuid()}`,
+                              "[animationstyle gnomed; float]"
+                          );
+                      }} />
+                  ]}
+                />}
+            </For>
+        </Gtk.Box>,
+        <With value={createBinding(AstalNetwork.get_default(), "primary").as(primary => 
+          primary === AstalNetwork.Primary.WIFI)}>
+
+            {(isWifi: boolean) => isWifi && <Gtk.Box class={"wireless-aps"} hexpand={true} 
+              orientation={Gtk.Orientation.VERTICAL}>
+
+                <Gtk.Label class={"sub-header"} label={"Wi-Fi"} />
+                <For each={createBinding(AstalNetwork.get_default().wifi, "accessPoints")}>
+                    {(ap: AstalNetwork.AccessPoint) => <PageButton class={
+                        createBinding(AstalNetwork.get_default().wifi, "activeAccessPoint").as(activeAP =>
+                            activeAP.ssid === ap.ssid ? "active" : "")
+                      } title={createBinding(ap, "ssid").as(ssid => ssid ?? "No SSID")}
+                      icon={createBinding(ap, "iconName")} endWidget={<Gtk.Image iconName={
+                          createBinding(ap, "flags").as(flags => 
+                            // @ts-ignore
+                            flags & NM["80211ApFlags"].PRIVACY ?
+                                "channel-secure-symbolic"
+                            : "channel-insecure-symbolic")}
+                          css={"font-size: 18px;"}
+                      />} extraButtons={[
+                          <Gtk.Button iconName={"window-close-symbolic"} visible={
+                              createBinding(AstalNetwork.get_default().wifi, "activeAccessPoint").as(activeAp =>
+                                  activeAp.ssid === ap.ssid)
+                          } css={"font-size: 18px;"} onClicked={() => {
+                                const active = AstalNetwork.get_default().wifi.activeAccessPoint;
+
+                                if(active?.ssid === ap.ssid) {
+                                    AstalNetwork.get_default().wifi.deactivate_connection((_, res) => {
+                                        try { 
+                                            AstalNetwork.get_default().wifi.deactivate_connection_finish(res);
+                                        } catch(e: any) {
+                                            e = e as Error;
+
+                                            console.error(
+                                                `Network: couldn't deactivate connection with access point(SSID: ${
+                                                    ap.ssid}. Stderr: \n${e.message}\n${e.stack}`
+                                            );
+                                        }
+                                    })
+                                }
+                            }}/>
+                      ]} actionClicked={() => {
+                          const uuid = NM.utils_uuid_generate();
+                          const ssidBytes = GLib.Bytes.new(encoder.encode(ap.ssid));
+
+                          const connection = NM.SimpleConnection.new();
+                          const connSetting = NM.SettingConnection.new();
+                          const wifiSetting = NM.SettingWireless.new();
+                          const wifiSecuritySetting = NM.SettingWirelessSecurity.new();
+                          const setting8021x = NM.Setting8021x.new();
+
+                          // @ts-ignore yep, type-gen issues again
+                          if(ap.rsnFlags !& NM["80211ApSecurityFlags"].KEY_MGMT_802_1X &&
+                          // @ts-ignore
+                             ap.wpaFlags !& NM["80211ApSecurityFlags"].KEY_MGMT_802_1X) {
+                              return;
+                          }
+
+                          connSetting.uuid = uuid;
+                          connection.add_setting(connSetting);
+
+                          connection.add_setting(wifiSetting);
+                          wifiSetting.ssid = ssidBytes;
+                          
+                          wifiSecuritySetting.keyMgmt = "wpa-eap";
+                          connection.add_setting(wifiSecuritySetting);
+
+                          setting8021x.add_eap_method("ttls");
+                          setting8021x.phase2Auth = "mschapv2";
+                          connection.add_setting(setting8021x);
+                      }}
+                    />}
+                </For>
+            </Gtk.Box>}
+        </With>
+    ]}
+/> as Page;
+
+function activateWirelessConnection(connection: NM.RemoteConnection, ssid: string): void {
+    AstalNetwork.get_default().get_client().activate_connection_async(
+        connection, AstalNetwork.get_default().wifi.get_device(), null, null, (_, asyncRes) => {
+            const activeConnection = AstalNetwork.get_default().get_client().activate_connection_finish(asyncRes);
+            if(!activeConnection) {
+                Notifications.getDefault().sendNotification({
+                    appName: "network",
+                    summary: "Couldn't activate wireless connection",
+                    body: `An error occurred while activating the wireless connection "${ssid}"`
+                });
+                return;
+            }
+        }
+    );
+}
+
+function notifyConnectionError(ssid: string): void {
+    Notifications.getDefault().sendNotification({
+        appName: "network",
+        summary: "Coudn't connect Wi-Fi",
+        body: `An error occurred while trying to connect to the "${ssid}" access point. \nMaybe the password is invalid?`
+    });
+}
+function saveToDisk(remoteConnection: NM.RemoteConnection, ssid: string): void {
+    AskPopup({
+        text: `Save password for connection "${ssid}"?`,
+        acceptText: "Yes",
+        onAccept: () => remoteConnection.commit_changes_async(true, null, (_, asyncRes) => 
+            !remoteConnection.commit_changes_finish(asyncRes) && Notifications.getDefault().sendNotification({
+                appName: "network",
+                summary: "Couldn't save Wi-Fi password",
+                body: `An error occurred while trying to write the password for "${ssid}" to disk`
+        }))
+    } as AskPopupProps);
+}

home/ags-config/window/control-center/widgets/pages/NightLight.tsx

@@ -0,0 +1,44 @@
+import { Page } from "../Page";
+import { NightLight } from "../../../../modules/nightlight";
+import { tr } from "../../../../i18n/intl";
+import { Astal, Gtk } from "ags/gtk4";
+import { addSliderMarksFromMinMax } from "../../../../modules/utils";
+import { createBinding } from "ags";
+
+
+export const PageNightLight = <Page
+    id={"night-light"}
+    title={tr("control_center.pages.night_light.title")}
+    description={tr("control_center.pages.night_light.description")}
+    content={() => [
+        <Gtk.Label class={"sub-header"} label={tr(
+            "control_center.pages.night_light.temperature"
+        )} xalign={0} />,
+        <Astal.Slider class={"temperature"} $={(self) => {
+              self.value = NightLight.getDefault().temperature;
+              addSliderMarksFromMinMax(self, 5, "{}K");
+          }} value={createBinding(NightLight.getDefault(), "temperature")}
+          tooltipText={createBinding(NightLight.getDefault(), "temperature").as(temp => 
+              `${temp}K`)} min={NightLight.getDefault().minTemperature} 
+          max={NightLight.getDefault().maxTemperature} 
+          onChangeValue={(_, type, value) => {
+              if(type != undefined && type !== null)
+                  NightLight.getDefault().temperature = Math.floor(value)
+          }}
+        />,
+        <Gtk.Label class={"sub-header"} label={tr(
+            "control_center.pages.night_light.gamma"
+        )} xalign={0} />,
+        <Astal.Slider class={"gamma"} $={(self) => {
+              self.value = NightLight.getDefault().gamma;
+              addSliderMarksFromMinMax(self, 5, "{}%");
+          }} value={createBinding(NightLight.getDefault(), "gamma")}
+          tooltipText={createBinding(NightLight.getDefault(), "gamma").as(gamma => 
+              `${gamma}%`)} max={NightLight.getDefault().maxGamma} 
+          onChangeValue={(_, type, value) => {
+              if(type != undefined && type !== null)
+                  NightLight.getDefault().gamma = Math.floor(value)
+          }}
+        />
+    ]}
+/> as Page;

home/ags-config/window/control-center/widgets/pages/Sound.tsx

@@ -0,0 +1,86 @@
+import { Page, PageButton } from "../Page";
+import { Astal, Gtk } from "ags/gtk4";
+import { getAppIcon, lookupIcon } from "../../../../modules/apps";
+import { Wireplumber } from "../../../../modules/volume";
+import { tr } from "../../../../i18n/intl";
+import { createBinding, For } from "ags";
+import { createScopedConnection, variableToBoolean } from "../../../../modules/utils";
+
+import AstalWp from "gi://AstalWp";
+import GObject from "gi://GObject?version=2.0";
+import Pango from "gi://Pango?version=1.0";
+
+
+export const PageSound = <Page
+    id={"sound"}
+    title={tr("control_center.pages.sound.title")}
+    description={tr("control_center.pages.sound.description")}
+    content={() => [
+        <Gtk.Label class={"sub-header"} label={tr("devices")} xalign={0} />,
+        <Gtk.Box orientation={Gtk.Orientation.VERTICAL} spacing={4}>
+            <For each={createBinding(Wireplumber.getWireplumber().audio!, "speakers")}>
+                {(sink: AstalWp.Endpoint) => 
+                    <PageButton class={createBinding(sink, "isDefault").as(isDefault =>
+                          isDefault ? "selected" : "")} 
+                      icon={createBinding(sink, "icon").as(ico =>
+                          lookupIcon(ico) ? ico : "audio-card-symbolic")}
+                      title={createBinding(sink, "description").as(desc =>
+                          desc ?? "Speaker")}
+                      actionClicked={() => !sink.isDefault && sink.set_is_default(true)}
+                      endWidget={
+                          <Gtk.Image iconName={"object-select-symbolic"}
+                            visible={createBinding(sink, "isDefault")}
+                            css={"font-size: 18px;"}
+                          />
+                      }
+                />}
+            </For>
+        </Gtk.Box>,
+        <Gtk.Box orientation={Gtk.Orientation.VERTICAL} spacing={8}>
+            <Gtk.Label class={"sub-header"} label={tr("apps")} xalign={0} 
+              visible={variableToBoolean(
+                  createBinding(Wireplumber.getWireplumber().audio!, "streams")
+              )}
+            />
+            <For each={createBinding(Wireplumber.getWireplumber().audio!, "streams")}>
+                {(stream: AstalWp.Stream) => 
+                    <Gtk.Box hexpand $={(self) => {
+                        const controllerMotion = Gtk.EventControllerMotion.new();
+
+                        self.add_controller(controllerMotion);
+                        createScopedConnection(controllerMotion, "enter", () => {
+                            const revealer = self.get_last_child()!.get_first_child() as Gtk.Revealer;
+                            revealer.set_reveal_child(true);
+                        });
+                        createScopedConnection(controllerMotion, "leave", () => {
+                            const revealer = self.get_last_child()!.get_first_child() as Gtk.Revealer;
+                            revealer.set_reveal_child(false);
+                        });
+                    }}>
+                        <Gtk.Image iconName={createBinding(stream, "name").as(name => 
+                            getAppIcon(name.split(' ')[0]) ?? "application-x-executable-symbolic")}
+                          css={"font-size: 18px; margin-right: 6px;"} />
+
+                        <Gtk.Box orientation={Gtk.Orientation.VERTICAL} hexpand={true}>
+                            <Gtk.Revealer transitionDuration={180} 
+                              transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}>
+                                
+                                <Gtk.Label label={createBinding(stream, "description").as(desc =>
+                                      desc ?? "Unnamed audio stream")} 
+                                  ellipsize={Pango.EllipsizeMode.END}
+                                  tooltipText={createBinding(stream, "name")}
+                                  class={"name"} xalign={0}
+                                />
+                            </Gtk.Revealer>
+
+                            <Astal.Slider drawValue={false} value={createBinding(stream, "volume")} 
+                              onChangeValue={(_, __, value) => stream.set_volume(value)}
+                              hexpand min={0} max={1.5}
+                            />
+                        </Gtk.Box>
+                    </Gtk.Box>
+                }
+            </For>
+        </Gtk.Box>
+    ]}
+/> as Page;

home/ags-config/window/control-center/widgets/pages/index.tsx

@@ -0,0 +1,100 @@
+import GObject, { getter, gtype, register } from "ags/gobject";
+import { Gtk } from "ags/gtk4";
+import { Page } from "../Page";
+
+import GLib from "gi://GLib?version=2.0";
+
+
+@register({ GTypeName: "Pages" })
+export class Pages extends Gtk.Box {
+    #timeouts: Array<[GLib.Source, (() => void)|undefined]> = [];
+    #page: Page|undefined;
+    #transDuration: number;
+    #transType: Gtk.RevealerTransitionType = Gtk.RevealerTransitionType.SLIDE_DOWN;
+
+    @getter(Boolean)
+    get isOpen() { return Boolean(this.#page); }
+
+    @getter(gtype<Page|undefined>(Page))
+    get page() { return this.#page; }
+
+    constructor(props?: {
+        initialPage?: Page;
+        transitionDuration?: number;
+    }) {
+        super({
+            orientation: Gtk.Orientation.VERTICAL,
+            cssName: "pages",
+            name: "pages"
+        });
+
+        this.add_css_class("pages");
+
+        this.#transDuration = props?.transitionDuration ?? 280;
+
+        if(props?.initialPage) 
+            this.open(props.initialPage);
+
+
+        const destroyId = this.connect("destroy", () => {
+            GObject.signal_handler_is_connected(this, destroyId) && 
+                this.disconnect(destroyId);
+
+            this.#timeouts.forEach((tmout) => {
+                tmout[0].destroy();
+                (async () => tmout[1]?.())().catch((err: Error) => {
+                    console.error(`${err.message}\n${err.stack}`);
+                });
+            });
+        });
+    }
+
+    toggle(newPage?: Page, onToggled?: () => void): void {
+        if(!newPage || (this.#page?.id === newPage.id)) {
+            this.close(onToggled);
+            return;
+        }
+
+        if(!this.isOpen) {
+            newPage && this.open(newPage, onToggled);
+            return;
+        }
+
+        if(this.#page?.id !== newPage.id) {
+            this.close();
+            this.open(newPage, onToggled);
+        }
+    }
+
+    open(newPage: Page, onOpen?: () => void) {
+        this.#page = newPage;
+
+        this.prepend(
+            <Gtk.Revealer revealChild={false} transitionType={this.#transType}
+              transitionDuration={this.#transDuration}>
+
+                {newPage.create()}
+            </Gtk.Revealer> as Gtk.Revealer
+        );
+
+        (this.get_first_child() as Gtk.Revealer)?.set_reveal_child(true);
+        onOpen?.();
+    }
+
+    close(onClosed?: () => void): void {
+        const page = this.get_first_child() as Gtk.Revealer|null;
+        if(!page) return;
+
+        this.#page?.actionClosed?.();
+        this.#page = undefined;
+
+        page.set_reveal_child(false);
+        this.#timeouts.push([
+            setTimeout(() => {
+                this.remove(page);
+                onClosed?.();
+            }, page.transitionDuration),
+            onClosed
+        ]);
+    }
+}

home/ags-config/window/control-center/widgets/tiles/Bluetooth.tsx

@@ -0,0 +1,38 @@
+import { Tile } from "./Tile";
+import { BluetoothPage } from "../pages/Bluetooth";
+import { TilesPages } from "../tiles";
+import { createBinding, createComputed } from "ags";
+import { Bluetooth } from "../../../../modules/bluetooth";
+
+import AstalBluetooth from "gi://AstalBluetooth";
+
+
+export const TileBluetooth = () => 
+    <Tile title={"Bluetooth"} visible={createBinding(Bluetooth.getDefault(), "isAvailable")}
+      description={createComputed([
+          createBinding(Bluetooth.getDefault(), "adapter"),
+          createBinding(AstalBluetooth.get_default(), "devices")
+      ], (adapter, devices) => {
+          const lastConnectedDevice = devices.filter(d => d.connected)[devices.length - 1];
+
+          if(!adapter || !lastConnectedDevice) 
+              return "";
+
+          return lastConnectedDevice.alias;
+      })} 
+      onEnabled={() => Bluetooth.getDefault().adapter?.set_powered(true)}
+      onDisabled={() => Bluetooth.getDefault().adapter?.set_powered(false)}
+      onClicked={() => TilesPages?.toggle(BluetoothPage)}
+      hasArrow
+      state={createBinding(AstalBluetooth.get_default(), "isPowered")}
+      icon={createComputed([
+            createBinding(AstalBluetooth.get_default(), "isPowered"),
+            createBinding(AstalBluetooth.get_default(), "isConnected")
+        ],
+        (powered: boolean, isConnected: boolean) => 
+            powered ? ( isConnected ? 
+                    "bluetooth-active-symbolic"
+                : "bluetooth-symbolic"
+            ) : "bluetooth-disabled-symbolic")
+      }
+    />;

home/ags-config/window/control-center/widgets/tiles/DoNotDisturb.tsx

@@ -0,0 +1,14 @@
+import { Notifications } from "../../../../modules/notifications";
+import { Tile } from "./Tile";
+import { tr } from "../../../../i18n/intl";
+import { createBinding } from "ags";
+
+export const TileDND = () => 
+    <Tile title={tr("control_center.tiles.dnd.title")}
+      description={createBinding(Notifications.getDefault().getNotifd(), "dontDisturb").as(
+          (dnd: boolean) => dnd ? tr("control_center.tiles.enabled") : tr("control_center.tiles.disabled"))}
+      onDisabled={() => Notifications.getDefault().getNotifd().dontDisturb = false}
+      onEnabled={() => Notifications.getDefault().getNotifd().dontDisturb = true}
+      icon={"minus-circle-filled-symbolic"}
+      state={Notifications.getDefault().getNotifd().dontDisturb}
+    />;

home/ags-config/window/control-center/widgets/tiles/Network.tsx

@@ -0,0 +1,168 @@
+import { Tile } from "./Tile";
+import { execAsync } from "ags/process";
+import { PageNetwork } from "../pages/Network";
+import { tr } from "../../../../i18n/intl";
+import { TilesPages } from "../tiles";
+import { Accessor, createBinding, createComputed } from "ags";
+import { secureBaseBinding } from "../../../../modules/utils";
+
+import AstalNetwork from "gi://AstalNetwork";
+import { Notifications } from "../../../../modules/notifications";
+
+
+const { WIFI, WIRED } = AstalNetwork.Primary,
+    { CONNECTED, CONNECTING, DISCONNECTED } = AstalNetwork.Internet;
+
+const wiredInternet = secureBaseBinding<AstalNetwork.Wired>(
+    createBinding(AstalNetwork.get_default(), "wired"),
+    "internet",
+    AstalNetwork.Internet.DISCONNECTED
+) as Accessor<AstalNetwork.Internet>;
+
+const wifiInternet = secureBaseBinding<AstalNetwork.Wifi>(
+    createBinding(AstalNetwork.get_default(), "wifi"),
+    "internet",
+    AstalNetwork.Internet.DISCONNECTED
+) as Accessor<AstalNetwork.Internet>;
+
+const wifiSSID = secureBaseBinding<AstalNetwork.Wifi>(
+    createBinding(AstalNetwork.get_default(), "wifi"),
+    "ssid",
+    "Unknown"
+) as Accessor<string>;
+
+const wifiIcon = secureBaseBinding<AstalNetwork.Wifi>(
+    createBinding(AstalNetwork.get_default(), "wifi"),
+    "iconName",
+    "network-wireless-symbolic"
+);
+
+const wiredIcon = secureBaseBinding<AstalNetwork.Wired>(
+    createBinding(AstalNetwork.get_default(), "wired"),
+    "iconName",
+    "network-wired-symbolic"
+);
+
+const primary = createBinding(AstalNetwork.get_default(), "primary");
+
+export const TileNetwork = () => 
+    <Tile hasArrow title={createComputed([
+          primary, 
+          wifiInternet, 
+          wifiSSID
+      ], (primary, wiInternet, wiSSID) => {
+        switch(primary) {
+            case WIFI:
+                if(wiInternet === CONNECTED)
+                    return wiSSID;
+
+                return tr("control_center.tiles.network.wireless");
+
+            case WIRED:
+                return tr("control_center.tiles.network.wired");
+        }
+
+        return tr("control_center.tiles.network.network");
+      })}
+      onClicked={() => TilesPages?.toggle(PageNetwork)}
+      icon={createComputed([
+          primary,
+          wifiIcon,
+          wiredIcon
+      ], (primary, wifiIcon, wiredIcon) => {
+          switch(primary) {
+              case WIFI:
+                  return wifiIcon;
+
+              case WIRED:
+                  return wiredIcon;
+          }
+
+          return "network-wired-no-route-symbolic";
+      })}
+      state={createComputed([
+          primary,
+          secureBaseBinding<AstalNetwork.Wifi>(
+              createBinding(AstalNetwork.get_default(), "wifi"),
+              "enabled",
+              false
+          ),
+          wiredInternet.as(internet => internet === CONNECTED || internet === CONNECTING)
+      ], (primary, wifiEnabled, wiredEnabled) => {
+          switch(primary) {
+              case WIFI:
+                  return wifiEnabled;
+
+              case WIRED:
+                  return wiredEnabled;
+          }
+
+          return false;
+      })}
+      description={createComputed([
+          primary,
+          wifiInternet,
+          wiredInternet
+      ], (primary, wifiInternet, wiredInternet) => {
+          switch(primary) {
+              case WIFI:
+                  return internetToTranslatedString(wifiInternet);
+
+              case WIRED:
+                  return internetToTranslatedString(wiredInternet);
+          }
+
+          return tr("disconnected");        
+      })}
+      onToggled={(self, state) => {
+          const wifi = AstalNetwork.get_default().wifi,
+              wired = AstalNetwork.get_default().wired;
+
+          switch(AstalNetwork.get_default().primary) {
+              case WIFI:
+                  wifi.set_enabled(state);
+                  return;
+
+              case WIRED:
+                  setNetworking(state);
+                  return;
+          }
+
+          if(wired && wired.internet === DISCONNECTED) {
+              setNetworking(true);
+              return;
+          } else if(wifi && !wifi.enabled) {
+              wifi.set_enabled(true);
+              return;
+          }
+
+          // disable if no device available
+          self.state = false;
+      }}
+    />;
+
+
+function internetToTranslatedString(internet: AstalNetwork.Internet): string {
+    switch(internet) {
+        case AstalNetwork.Internet.CONNECTED: 
+            return tr("connected");
+        case AstalNetwork.Internet.CONNECTING:
+            return tr("connecting") + "...";
+    }
+
+    return tr("disconnected");
+}
+
+function setNetworking(state: boolean): void {
+    (!state ? 
+        execAsync("nmcli n off")
+      : execAsync("nmcli n on")
+    ).catch(e => {
+        Notifications.getDefault().sendNotification({
+            appName: "network",
+            summary: "Couldn't turn off network",
+            body: `Turning off networking with nmcli failed${
+                e?.message !== undefined ? `: ${e?.message}` : ""}`
+        });
+    });
+}

home/ags-config/window/control-center/widgets/tiles/NightLight.tsx

@@ -0,0 +1,28 @@
+import { Tile } from "./Tile";
+import { NightLight } from "../../../../modules/nightlight";
+import { PageNightLight } from "../pages/NightLight";
+import { tr } from "../../../../i18n/intl";
+import { TilesPages } from "../tiles";
+import { isInstalled } from "../../../../modules/utils";
+import { createBinding, createComputed } from "ags";
+
+
+export const TileNightLight = () => 
+    <Tile title={tr("control_center.tiles.night_light.title")}
+        icon={"weather-clear-night-symbolic"}
+        description={createComputed([
+            createBinding(NightLight.getDefault(), "identity"),
+            createBinding(NightLight.getDefault(), "temperature"),
+            createBinding(NightLight.getDefault(), "gamma")
+        ], (identity, temp, gamma) => !identity ? 
+                `${temp === NightLight.getDefault().identityTemperature ? 
+                    tr("control_center.tiles.night_light.default_desc") : `${temp}K`
+                    } ${gamma < NightLight.getDefault().maxGamma ? `(${gamma}%)` : ""}`
+            : tr("control_center.tiles.disabled")
+        )}
+        hasArrow visible={isInstalled("hyprsunset")}
+        onDisabled={() => NightLight.getDefault().identity = true}
+        onEnabled={() => NightLight.getDefault().identity = false}
+        onClicked={() => TilesPages?.toggle(PageNightLight)}
+        state={createBinding(NightLight.getDefault(), "identity").as(identity => !identity)}
+    />

home/ags-config/window/control-center/widgets/tiles/Recording.tsx

@@ -0,0 +1,24 @@
+import { Tile } from "./Tile";
+import { Recording } from "../../../../modules/recording";
+import { tr } from "../../../../i18n/intl";
+import { isInstalled } from "../../../../modules/utils";
+import { createBinding, createComputed } from "ags";
+
+
+export const TileRecording = () => 
+    <Tile title={tr("control_center.tiles.recording.title")}
+      description={createComputed([
+          createBinding(Recording.getDefault(), "recording"),
+          createBinding(Recording.getDefault(), "recordingTime")
+      ], (recording, time) => {
+          if(!recording || !Recording.getDefault().startedAt) 
+              return tr("control_center.tiles.recording.disabled_desc") || "Start recording";
+
+          return time;
+      })}
+      icon={"media-record-symbolic"}
+      visible={isInstalled("wf-recorder")}
+      onDisabled={() => Recording.getDefault().stopRecording()}
+      onEnabled={() => Recording.getDefault().startRecording()}
+      state={createBinding(Recording.getDefault(), "recording")}
+    />;

home/ags-config/window/control-center/widgets/tiles/Tile.tsx

@@ -0,0 +1,150 @@
+import { Gtk } from "ags/gtk4";
+import { createBinding } from "ags";
+import { omitObjectKeys, variableToBoolean } from "../../../../modules/utils";
+import { property, register, signal } from "ags/gobject";
+
+import Pango from "gi://Pango?version=1.0";
+
+
+@register({ GTypeName: "Tile" })
+export class Tile extends Gtk.Box {
+    @signal(Boolean) toggled(_state: boolean) {}
+    @signal() enabled() {}
+    @signal() disabled() {}
+    @signal() clicked() {
+        if(this.enableOnClicked)
+            this.enable();
+    }
+
+    @property(String)
+    public icon: string;
+    @property(String)
+    public title: string;
+    @property(String)
+    public description: string = "";
+    @property(Boolean)
+    public enableOnClicked: boolean = false;
+    @property(Boolean)
+    public state: boolean = false;
+    @property(Boolean)
+    public hasArrow: boolean = false;
+    
+    declare $signals: Gtk.Box.SignalSignatures & {
+        "toggled": (state: boolean) => void;
+        "enabled": () => void;
+        "disabled": () => void;
+        "clicked": () => void;
+    };
+
+    public enable(): void {
+        if(this.state) return;
+
+        this.state = true;
+        !this.has_css_class("enabled") &&
+            this.add_css_class("enabled");
+
+        this.emit("toggled", true);
+        this.emit("enabled");
+    }
+
+    public disable(): void {
+        if(!this.state) return;
+
+        this.state = false;
+        this.remove_css_class("enabled");
+        this.emit("toggled", false);
+        this.emit("disabled");
+    }
+
+    constructor(props: Partial<Omit<Gtk.Box.ConstructorProps, "orientation">> & {
+        icon: string;
+        title: string;
+        description?: string;
+        state?: boolean;
+        enableOnClicked?: boolean;
+        hasArrow?: boolean;
+    }) {
+        super(omitObjectKeys(props, [
+            "icon",
+            "title",
+            "description",
+            "state",
+            "enableOnClicked"
+        ]));
+
+        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 !== undefined)
+            this.hasArrow = props.hasArrow;
+
+        if(props.description !== undefined)
+            this.description = props.description;
+
+        if(props.state !== undefined)
+            this.state = props.state;
+
+        if(props.enableOnClicked !== undefined)
+            this.enableOnClicked = props.enableOnClicked;
+
+        this.state &&
+            this.add_css_class("enabled"); // fix no highlight when enabled on init
+
+        this.prepend(
+            <Gtk.Box hexpand={false} vexpand class={"icon"}>
+                <Gtk.Image iconName={createBinding(this, "icon")} halign={Gtk.Align.CENTER} />
+                <Gtk.GestureClick onReleased={() => {
+                    this.state ? this.disable() : this.enable();
+                }} />
+            </Gtk.Box> as Gtk.Box
+        );
+
+        this.append(
+            <Gtk.Box class={"content"} orientation={Gtk.Orientation.VERTICAL} vexpand
+              valign={Gtk.Align.CENTER} hexpand>
+
+                <Gtk.Label class={"title"} label={createBinding(this, "title")} 
+                  xalign={0} ellipsize={Pango.EllipsizeMode.END} hexpand={false} 
+                  maxWidthChars={10} />
+                <Gtk.Label class={"description"} label={createBinding(this, "description")} 
+                  xalign={0} ellipsize={Pango.EllipsizeMode.END} visible={
+                      variableToBoolean(createBinding(this, "description"))
+                  } maxWidthChars={12} hexpand={false}
+                />
+            </Gtk.Box> as Gtk.Box
+        );
+
+        if(this.hasArrow)
+            this.append(
+                <Gtk.Image class={"arrow"} iconName={"go-next-symbolic"} 
+                  halign={Gtk.Align.END} 
+                /> as Gtk.Image
+            );
+    }
+
+    emit<Signal extends keyof typeof this.$signals>(
+        signal: Signal, 
+        ...args: Parameters<(typeof this.$signals)[Signal]>
+    ): void {
+        super.emit(signal, ...args);
+    }
+
+    connect<Signal extends keyof typeof this.$signals>(
+        signal: Signal, 
+        callback: (typeof this.$signals)[Signal]
+    ): number {
+        return super.connect(signal, callback);
+    }
+}

home/ags-config/window/control-center/widgets/tiles/index.tsx

@@ -0,0 +1,37 @@
+import { Gtk } from "ags/gtk4";
+import { TileNetwork } from "./Network";
+import { TileBluetooth } from "./Bluetooth";
+import { TileDND } from "./DoNotDisturb";
+import { TileRecording } from "./Recording";
+// import { TileNightLight } from "./NightLight";
+import { Pages } from "../pages";
+import { createRoot, getScope } from "ags";
+
+
+export let TilesPages: Pages|undefined;
+export const tileList: Array<() => JSX.Element|Gtk.Widget> = [
+    TileNetwork,
+    TileBluetooth,
+    TileRecording,
+    TileDND,
+    // TileNightLight
+] as Array<() => Gtk.Widget>;
+
+export function Tiles(): Gtk.Widget {
+    return createRoot((dispose) => {
+        getScope().onCleanup(() => TilesPages = undefined);
+
+        return <Gtk.Box class={"tiles-container"} orientation={Gtk.Orientation.VERTICAL}
+          onDestroy={() => dispose()}>
+
+            <Gtk.FlowBox orientation={Gtk.Orientation.HORIZONTAL} rowSpacing={6}
+              columnSpacing={6} minChildrenPerLine={2} activateOnSingleClick
+              maxChildrenPerLine={2} hexpand homogeneous>
+
+                {tileList.map(t => t())}
+            </Gtk.FlowBox>
+
+            <Pages class={"tile-pages"} $={(self) => TilesPages = self} />
+        </Gtk.Box> as Gtk.Box;
+    });
+}