feat: add command center launcher

widgets/bar/index.tsx

@@ -29,7 +29,7 @@ export const Bar = (gdkmonitor: Gdk.Monitor) => {
     >
       <centerbox>
         <box spacing={10} $type="start">
-          <Launcher />
+          <Launcher windowName="launcher" icon="nix-symbolic" />
           <WorkspaceButton />
         </box>
 
@@ -47,6 +47,7 @@ export const Bar = (gdkmonitor: Gdk.Monitor) => {
           <Battery />
           <Tray />
           <Time />
+          <Launcher windowName="control-center" icon="fa-ghost-symbolic" />
         </box>
       </centerbox>
     </window>

widgets/bar/launcher.tsx

@@ -1,15 +1,23 @@
 import { Gdk } from "ags/gtk4";
 import app from "ags/gtk4/app";
-import { WINDOW_NAME } from "../launcher";
+import { WINDOW_NAME as APP_LAUNCHER_WINDOW_NAME } from "../launcher";
+import { WINDOW_NAME as CONTROL_CENTER_WINDOW_NAME } from "../control-center";
 
-export const Launcher = () => {
+type Props = {
+  icon: string;
+  windowName:
+  | typeof APP_LAUNCHER_WINDOW_NAME
+  | typeof CONTROL_CENTER_WINDOW_NAME;
+};
+
+export const Launcher = ({ icon, windowName }: Props) => {
   return (
     <button
-      cssClasses={["pill", "launcher"]}
-      onClicked={() => app.toggle_window(WINDOW_NAME)}
+      cssClasses={["launcher"]}
+      onClicked={() => app.toggle_window(windowName)}
       cursor={Gdk.Cursor.new_from_name("pointer", null)}
     >
-      <image iconName="nix-symbolic" />
+      <image iconName={icon} />
     </button>
   );
 };