feat: add control center widget

widgets/control-center/footer.tsx

@@ -0,0 +1,11 @@
+import { Gtk } from "ags/gtk4";
+
+export const Footer = () => {
+  const { END } = Gtk.Align;
+
+  return (
+    <box valign={END} cssClasses={["footer"]}>
+      <label hexpand label="NOBODY FUX WITH TUX" />
+    </box>
+  );
+};

widgets/control-center/header.tsx

@@ -0,0 +1,39 @@
+import { Gdk, Gtk } from "ags/gtk4";
+import { exec } from "ags/process";
+import GLib from "gi://GLib";
+
+export const Header = () => {
+  const { VERTICAL } = Gtk.Orientation;
+  const { CENTER, START, END } = Gtk.Align;
+
+  return (
+    <box cssClasses={["header"]}>
+      <image
+        css="margin-left: -15px;"
+        file={`${GLib.get_user_config_dir()}/tpanel/assets/avatar.png`}
+        pixelSize={100}
+      />
+
+      <box valign={CENTER} orientation={VERTICAL} spacing={5}>
+        <label halign={START} label="tux" />
+        <label halign={START} label="@tuxdotrs" />
+      </box>
+
+      <box hexpand halign={END} spacing={10} cssClasses={["controls"]}>
+        <button
+          cursor={Gdk.Cursor.new_from_name("pointer", null)}
+          onClicked={() => exec("hyprlock")}
+        >
+          <image iconName="fa-lock-symbolic" />
+        </button>
+
+        <button
+          cursor={Gdk.Cursor.new_from_name("pointer", null)}
+          onClicked={() => exec("poweroff")}
+        >
+          <image iconName="fa-power-symbolic" />
+        </button>
+      </box>
+    </box>
+  );
+};

widgets/control-center/index.tsx

@@ -0,0 +1,44 @@
+import { Astal, Gdk, Gtk } from "ags/gtk4";
+import app from "ags/gtk4/app";
+import { Footer } from "./footer";
+import { Header } from "./header";
+import { NotificationList } from "./notification-list";
+import { SlidingControls } from "./sliding-controls";
+
+export const WINDOW_NAME = "control-center";
+
+export const ControlCenter = (gdkmonitor: Gdk.Monitor) => {
+  const { TOP, BOTTOM, RIGHT } = Astal.WindowAnchor;
+  const { VERTICAL } = Gtk.Orientation;
+
+  return (
+    <window
+      name={WINDOW_NAME}
+      cssClasses={["control-center"]}
+      gdkmonitor={gdkmonitor}
+      application={app}
+      keymode={Astal.Keymode.ON_DEMAND}
+      anchor={TOP | BOTTOM | RIGHT}
+    >
+      <Gtk.EventControllerKey onKeyPressed={onKey} />
+      <box vexpand orientation={VERTICAL} spacing={20}>
+        <Header />
+        <SlidingControls />
+        <NotificationList />
+        <Footer />
+      </box>
+    </window>
+  );
+};
+
+const onKey = (
+  _e: Gtk.EventControllerKey,
+  keyval: number,
+  _: number,
+  mod: number,
+) => {
+  if (keyval === Gdk.KEY_Escape) {
+    app.toggle_window(WINDOW_NAME);
+    return;
+  }
+};

widgets/control-center/notification-list.tsx

@@ -0,0 +1,12 @@
+import { Gtk } from "ags/gtk4";
+
+export const NotificationList = () => {
+  const { VERTICAL } = Gtk.Orientation;
+
+  return (
+    <box vexpand orientation={VERTICAL} spacing={20}>
+      <label label="Notifications" />
+      <box vexpand cssClasses={["pill"]}></box>
+    </box>
+  );
+};

widgets/control-center/sliding-controls.tsx

@@ -0,0 +1,39 @@
+import { createBinding } from "ags";
+import { Gtk } from "ags/gtk4";
+import AstalWp from "gi://AstalWp";
+
+export const SlidingControls = () => {
+  const { VERTICAL } = Gtk.Orientation;
+
+  const { defaultSpeaker: speaker, defaultMicrophone: microphone } =
+    AstalWp.get_default()!;
+
+  const speakerIsMuted = createBinding(speaker, "mute");
+
+  return (
+    <box spacing={20} cssClasses={["pill"]} orientation={VERTICAL}>
+      <box cssClasses={["volume"]} spacing={20}>
+        <image
+          iconName={speakerIsMuted((val) =>
+            val ? "fa-speaker-muted-symbolic" : "fa-speaker-symbolic",
+          )}
+        />
+
+        <slider
+          hexpand
+          onChangeValue={({ value }) => speaker.set_volume(value)}
+          value={createBinding(speaker, "volume")}
+        />
+      </box>
+
+      <box cssClasses={["volume"]} spacing={20}>
+        <image iconName="fa-microphone-symbolic" />
+        <slider
+          hexpand
+          onChangeValue={({ value }) => microphone.set_volume(value)}
+          value={createBinding(microphone, "volume")}
+        />
+      </box>
+    </box>
+  );
+};