feat: add control center widget

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;
+  }
+};