♻️ refactor: reorganize windows and widgets in a modular way

plus, better code for bluetooth device pairing and connecting
2025-09-25 13:19:52 -03:00
parent 7f3e66cc71
commit ba83c673aa
37 changed files with 186 additions and 176 deletions
@@ -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;
@@ -0,0 +1,176 @@
+import { Gtk } from "ags/gtk4";
+import { Separator } from "../../../widget/Separator";
+import { Accessor, createRoot } from "ags";
+import { transformWidget, variableToBoolean, WidgetNodeType } from "../../../modules/utils";
+
+import Pango from "gi://Pango?version=1.0";
+
+
+export type PageProps = {
+    id: string;
+    title: string;
+    description?: string;
+    $?: (self: Gtk.Box) => void;
+    headerButtons?: Array<HeaderButton> | Accessor<Array<HeaderButton>>;
+    bottomButtons?: Array<BottomButton> | Accessor<Array<BottomButton>>;
+    orientation?: Gtk.Orientation | Accessor<Gtk.Orientation>;
+    spacing?: number | Accessor<number>;
+    content: () => WidgetNodeType;
+    actionClosed?: () => void;
+};
+
+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;
+};
+
+export class Page {
+    #title: string;
+    #description?: string;
+    #orientation: Gtk.Orientation|Accessor<
+        Gtk.Orientation> = Gtk.Orientation.VERTICAL;
+    #spacing: number|Accessor<number> = 4;
+    #headerButtons?: Array<HeaderButton>|Accessor<Array<HeaderButton>>;
+    #bottomButtons?: Array<BottomButton>|Accessor<Array<BottomButton>>;
+    #setup?: (self: Gtk.Box) => void;
+    readonly #id?: string;
+    readonly #create: () => WidgetNodeType;
+
+    public get id() { return this.#id; }
+    public get title() { return this.#title; }
+    public get description() { return this.#description; }
+    public get headerButtons() { return this.#headerButtons; }
+    public get bottomButtons() { return this.#bottomButtons; }
+    public readonly actionClosed?: () => void;
+
+    constructor(props: PageProps) {
+        this.#id = props.id;
+        this.#title = props.title;
+        this.#description = props.description;
+        this.#create = props.content;
+        this.actionClosed = props.actionClosed;
+
+        if(props.orientation != null)
+            this.#orientation = props.orientation;
+
+        if(props.spacing != null)
+            this.#spacing = props.spacing;
+
+        if(props.headerButtons != null)
+            this.#headerButtons = props.headerButtons;
+
+        if(props.$ != null)
+            this.#setup = props.$;
+    }
+
+    public create(): Gtk.Box {
+        return createRoot((dispose) => 
+            <Gtk.Box hexpand class={`page container ${this.#id ?? ""}`} cssName={"page"} name={"page"}
+              orientation={Gtk.Orientation.VERTICAL} onUnmap={() => dispose()}
+              $={this.#setup}>
+
+                <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={this.#title} xalign={0} 
+                              ellipsize={Pango.EllipsizeMode.END} />
+
+                            <Gtk.Label class={"description"} label={this.#description} 
+                              xalign={0} ellipsize={Pango.EllipsizeMode.END} 
+                              visible={variableToBoolean(this.#description)} />
+                        </Gtk.Box>
+                        <Gtk.Box class={"button-row"} visible={variableToBoolean(this.#headerButtons)}
+                          hexpand={false}>
+
+                            {this.#headerButtons && transformWidget(this.#headerButtons, (button) =>
+                                <Gtk.Button class={"header-button"} label={button.label}
+                                  iconName={button.icon} onClicked={() => button.actionClicked?.()}
+                                  tooltipText={button.tooltipText} tooltipMarkup={button.tooltipMarkup}
+                                />
+                            )}
+                        </Gtk.Box>
+                    </Gtk.Box>
+                </Gtk.Box>
+                <Gtk.Box class={"content"} hexpand={false} orientation={this.#orientation} 
+                  spacing={this.#spacing}>
+
+                    {this.#create()}
+                </Gtk.Box>
+                <Separator alpha={.2} spacing={6} orientation={Gtk.Orientation.VERTICAL}
+                  visible={variableToBoolean(this.#bottomButtons)} 
+                />
+                <Gtk.Box class={"bottom-buttons"} orientation={Gtk.Orientation.VERTICAL}
+                  visible={variableToBoolean(this.#bottomButtons)} spacing={2}>
+                
+                    {this.#bottomButtons && transformWidget(this.#bottomButtons, (button) => 
+                        <Gtk.Button onClicked={() => button?.actionClicked?.()} tooltipText={button?.tooltipText}
+                          tooltipMarkup={button?.tooltipMarkup}>
+
+                            <Gtk.Label class={"title"} label={button?.title} xalign={0} />
+                            <Gtk.Label class={"description"} label={button?.description} 
+                              xalign={0} visible={variableToBoolean(button?.description)} />
+                        </Gtk.Button>
+                    )}
+                </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?: WidgetNodeType;
+    description?: string | Accessor<string>;
+    extraButtons?: Array<WidgetNodeType> | WidgetNodeType;
+    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}
+        </Gtk.Box>
+    </Gtk.Box> as Gtk.Box;
+}
@@ -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;
@@ -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>
+}
@@ -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 "../../../../app";
+
+
+export const PageBacklight = new Page({
+    id: "backlight",
+    title: tr("control_center.pages.backlight.title"),
+    description: tr("control_center.pages.backlight.description"),
+    $: () => {
+        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()
+    }]
+});
@@ -0,0 +1,229 @@
+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 { execAsync } from "ags/process";
+import { createBinding, createComputed, For, With } from "ags";
+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 = new 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 adapter = createBinding(Bluetooth.getDefault(), "adapter");
+        const adapters = createBinding(AstalBluetooth.get_default(), "adapters");
+        const devices = createBinding(AstalBluetooth.get_default(), "devices");
+
+        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={() => 
+                                          adapter.address !== Bluetooth.getDefault().adapter?.address &&
+                                              selectAdapter(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={devices.as(devs => devs.filter(dev => 
+                      (dev.adapter as AstalBluetooth.Adapter).address === adapter.get()?.address && 
+                          dev.paired || dev.connected || dev.trusted).length > 0)
+                }>
+
+                    <Gtk.Label class={"sub-header"} label={tr("devices")} xalign={0} />
+                    <For each={devices.as(devs => devs.filter(dev => 
+                        (dev.adapter as AstalBluetooth.Adapter).address === adapter.get()?.address &&
+                            dev.paired || dev.connected || dev.trusted))
+                    }>
+
+                        {(dev: AstalBluetooth.Device) => <DeviceWidget device={dev} />}
+                    </For>
+                </Gtk.Box>
+                <Gtk.Box class={"discovered"} orientation={Gtk.Orientation.VERTICAL} spacing={4}
+                  visible={devices.as(devs => devs.filter(dev => 
+                      (dev.adapter as AstalBluetooth.Adapter).address === adapter.get()?.address &&
+                          !dev.connected && !dev.paired && !dev.trusted).length > 0)
+                }>
+
+                    <Gtk.Label class={"sub-header"} label={tr("control_center.pages.bluetooth.new_devices")} 
+                      xalign={0} />
+                    <For each={devices.as(devs => devs.filter(dev => 
+                        (dev.adapter as AstalBluetooth.Adapter).address === adapter.get()?.address &&
+                            !dev.connected && !dev.paired && !dev.trusted))
+                    }>
+
+                        {(dev: AstalBluetooth.Device) => <DeviceWidget device={dev} />}
+                    </For>
+                </Gtk.Box>
+            </Gtk.Box>
+        ];
+    }
+});
+
+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;
+}
+
+function selectAdapter(adapter: AstalBluetooth.Adapter): void {
+    AstalBluetooth.get_default().adapters.filter(ad => {
+        if(ad.alias !== adapter.alias)
+            return true;
+
+        ad.set_powered(true);
+        return false;
+    }).forEach(ad => ad.set_powered(false));
+
+    execAsync(`bluetoothctl select ${adapter.address}`).catch(e =>
+        console.error(`Bluetooth: Couldn't select adapter. Stderr: ${e}`));
+
+    Bluetooth.getDefault().adapter = adapter;
+}
@@ -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 = new 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>
+    ]
+});
@@ -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 = new 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>
+    ]
+});
+
+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);
+}
@@ -0,0 +1,43 @@
+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 = new 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)
+          }}
+        />
+    ]
+});
@@ -0,0 +1,96 @@
+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 { 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 = new 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 conns: Map<GObject.Object, Array<number>> = new Map();
+                        const controllerMotion = Gtk.EventControllerMotion.new();
+
+                        self.add_controller(controllerMotion);
+
+                        conns.set(controllerMotion, [
+                            controllerMotion.connect("enter", () => {
+                                const revealer = self.get_last_child()!.get_first_child() as Gtk.Revealer;
+                                revealer.set_reveal_child(true);
+                            }),
+                            controllerMotion.connect("leave", () => {
+                                const revealer = self.get_last_child()!.get_first_child() as Gtk.Revealer;
+                                revealer.set_reveal_child(false);
+                            })
+                        ]);
+
+                        conns.set(self, [
+                            self.connect("destroy", () => conns.forEach((ids, obj) => 
+                                ids.forEach(id => obj.disconnect(id))
+                            ))
+                        ]);
+                    }}>
+                        <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>
+    ]
+});
@@ -0,0 +1,99 @@
+import { register } from "ags/gobject";
+import { Gtk } from "ags/gtk4";
+import { Page } from "../Page";
+import { timeout } from "ags/time";
+
+import AstalIO from "gi://AstalIO";
+
+
+export { Pages };
+export type PagesProps = {
+    initialPage?: Page;
+    transitionDuration?: number;
+};
+
+@register({ GTypeName: "Pages" })
+class Pages extends Gtk.Box {
+    #timeouts: Array<[AstalIO.Time, (() => void)|undefined]> = [];
+    #page: (Page|undefined);
+    #transDuration: number;
+    #transType: Gtk.RevealerTransitionType = Gtk.RevealerTransitionType.SLIDE_DOWN;
+
+    get isOpen() { return Boolean(this.#page); }
+    get page() { return this.#page; }
+
+    constructor(props?: PagesProps) {
+        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", () => {
+            this.disconnect(destroyId);
+            this.#timeouts.forEach((tmout) => {
+                tmout[0].cancel();
+                (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([
+            timeout(page.transitionDuration, () => {
+                this.remove(page);
+                onClosed?.();
+            }),
+            onClosed
+        ]);
+    }
+}
@@ -0,0 +1,34 @@
+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={createBinding(AstalBluetooth.get_default(), "adapters").as((connected) => {
+          if(!connected) return "";
+
+          const connectedDevs = AstalBluetooth.get_default().devices.filter(dev => dev.connected);
+          const connectedDev = connectedDevs[connectedDevs.length - 1]; // last connected device is on display
+          return connectedDev ? connectedDev.get_alias() : ""
+      })} 
+      onEnabled={() => Bluetooth.getDefault().adapter?.set_powered(true)}
+      onDisabled={() => Bluetooth.getDefault().adapter?.set_powered(false)}
+      onClicked={() => TilesPages?.toggle(BluetoothPage)}
+      enableOnClicked 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")
+      }
+    />;
@@ -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}
+    />;
@@ -0,0 +1,85 @@
+import { execAsync } from "ags/process";
+import { Tile } from "./Tile";
+import { PageNetwork } from "../pages/Network";
+import { tr } from "../../../../i18n/intl";
+import { TilesPages } from "../tiles";
+import { Gtk } from "ags/gtk4";
+import { createBinding, createComputed, With } from "ags";
+
+import AstalNetwork from "gi://AstalNetwork";
+
+
+export const TileNetwork = () => <Gtk.Box>
+    <With value={createComputed([
+        createBinding(AstalNetwork.get_default(), "primary"), 
+        createBinding(AstalNetwork.get_default(), "wired"), 
+        createBinding(AstalNetwork.get_default(), "wifi")
+    ])}>
+
+        {([primary, wired, wifi]: [AstalNetwork.Primary, AstalNetwork.Wired, AstalNetwork.Wifi]) => {
+            if(primary === AstalNetwork.Primary.WIFI) {
+                return <Tile title={tr("control_center.tiles.network.wireless")}
+                    description={createComputed([
+                        createBinding(wifi, "ssid"), createBinding(wifi, "internet")
+                    ], (ssid, internet) => ssid ? ssid : (() => {
+                            switch(internet) {
+                                case AstalNetwork.Internet.CONNECTED: 
+                                    return tr("connected");
+                                case AstalNetwork.Internet.DISCONNECTED:
+                                    return tr("disconnected");
+                                case AstalNetwork.Internet.CONNECTING:
+                                    return tr("connecting") + "...";
+                            }
+                        })()
+                    )} onEnabled={() => wifi.set_enabled(true)}
+                    onDisabled={() => wifi.set_enabled(false)}
+                    hasArrow onClicked={() => TilesPages?.toggle(PageNetwork)}
+                    icon={"network-wireless-signal-excellent-symbolic"}
+                    state={createBinding(wifi, "enabled")}
+                />
+
+            } else if(primary === AstalNetwork.Primary.WIRED) {
+                return <Tile title={tr("control_center.tiles.network.wired")}
+                    description={createBinding(wired, "internet").as((internet: AstalNetwork.Internet) => {
+                        switch(internet) {
+                            case AstalNetwork.Internet.CONNECTED: 
+                                return tr("connected");
+                            case AstalNetwork.Internet.DISCONNECTED:
+                                return tr("disconnected");
+                            case AstalNetwork.Internet.CONNECTING:
+                                return tr("connecting") + "...";
+                        }
+                    })}
+                    hasArrow onEnabled={() => execAsync("nmcli n on")}
+                    onDisabled={() => execAsync("nmcli n off")}
+                    onClicked={() => TilesPages?.toggle(PageNetwork)}
+                    icon={createBinding(wired, "internet").as((internet: AstalNetwork.Internet) => {
+                        switch(internet) {
+                            case AstalNetwork.Internet.CONNECTED: 
+                                return "network-wired-symbolic";
+                            case AstalNetwork.Internet.DISCONNECTED:
+                                return "network-wired-disconnected-symbolic";
+                        }
+
+                        return "network-wired-no-route-symbolic";
+                    })}
+                    state={createBinding(wired, "internet").as((internet: AstalNetwork.Internet) => 
+                        internet === AstalNetwork.Internet.CONNECTING 
+                            || internet === AstalNetwork.Internet.CONNECTED
+                    )}
+                />
+            }
+            
+            return <Tile
+                title={tr("control_center.tiles.network.network")}
+                description={tr("disconnected")}
+                onEnabled={() => execAsync("nmcli n on")}
+                onDisabled={() => execAsync("nmcli n off")}
+                hasArrow onClicked={() => TilesPages?.toggle(PageNetwork)}
+                icon={"network-wired-disconnected-symbolic"}
+                state={createBinding(wired, "internet").as((internet: AstalNetwork.Internet) => 
+                    internet === AstalNetwork.Internet.CONNECTING || internet === AstalNetwork.Internet.CONNECTED)}
+            />
+        }}
+    </With>
+</Gtk.Box>;
@@ -0,0 +1,29 @@
+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}
+        enableOnClicked
+        onClicked={() => TilesPages?.toggle(PageNightLight)}
+        state={createBinding(NightLight.getDefault(), "identity").as(identity => !identity)}
+    />
@@ -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")}
+    />;
@@ -0,0 +1,151 @@
+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() {}
+
+    @property(String)
+    public icon: string;
+    @property(String)
+    public title: string;
+    @property(String)
+    public description: string = "";
+    @property(Boolean)
+    public enableOnClicked: boolean = true;
+    @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.icon = props.icon;
+        this.title = props.title;
+        this.hexpand = true;
+
+        if(props.hasArrow != null)
+            this.hasArrow = props.hasArrow;
+
+        if(props.description != null)
+            this.description = props.description;
+
+        if(props.state != null)
+            this.state = props.state;
+
+        if(props.enableOnClicked != null)
+            this.enableOnClicked = props.enableOnClicked;
+
+        if(this.state)
+            this.add_css_class("enabled"); // fix no highlight with state = true on construct
+
+        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.GestureClick onReleased={() => {
+                    this.emit("clicked");
+                    if(this.enableOnClicked && !this.state)
+                        this.enable();
+
+                    return true;
+                }} />
+            </Gtk.Box> as Gtk.Box
+        );
+
+        if(this.hasArrow)
+            this.append(
+                <Gtk.Image class={"arrow"} iconName={"go-next-symbolic"} halign={Gtk.Align.END}>
+                    <Gtk.GestureClick onReleased={() => {
+                        this.emit("clicked");
+                        if(this.enableOnClicked && !this.state)
+                            this.enable();
+
+                        return true;
+                    }} />
+                </Gtk.Image> 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);
+    }
+}
@@ -0,0 +1,32 @@
+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";
+
+
+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 <Gtk.Box class={"tiles-container"} orientation={Gtk.Orientation.VERTICAL}
+      onUnmap={() => TilesPages = undefined}>
+
+        <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;
+}