Restructure, move launcher to astal gtk4

config/ags/launcher/app.ts

@@ -1,9 +1,10 @@
-import { App } from "astal/gtk3"
+import { App } from "astal/gtk4"
 import style from "./style.scss"
-import Applauncher from "./ui/AppLauncher"
+import Bar from "./widget/Bar"
 
 App.start({
-    instanceName: "launcher",
     css: style,
-    main: Applauncher,
-});
+    main() {
+        App.get_monitors().map(Bar)
+    },
+})

config/ags/launcher/tsconfig.json

@@ -9,6 +9,6 @@
         // "checkJs": true,
         // "allowJs": true,
         "jsx": "react-jsx",
-        "jsxImportSource": "astal/gtk3",
+        "jsxImportSource": "astal/gtk4",
     }
 }

config/ags/launcher/widget/Bar.tsx

@@ -1,31 +1,36 @@
-import { App, Astal, Gtk, Gdk } from "astal/gtk3"
+import { App, Astal, Gtk, Gdk } from "astal/gtk4"
 import { Variable } from "astal"
 
 const time = Variable("").poll(1000, "date")
 
-export default function AppLauncher(gdkmonitor: Gdk.Monitor) {
+export default function Bar(gdkmonitor: Gdk.Monitor) {
     const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
 
     return <window
-        className="Bar"
+        visible
+        cssClasses={["Bar"]}
         gdkmonitor={gdkmonitor}
         exclusivity={Astal.Exclusivity.EXCLUSIVE}
         anchor={TOP | LEFT | RIGHT}
         application={App}>
-        <centerbox>
+        <centerbox cssName="centerbox">
             <button
                 onClicked="echo hello"
+                hexpand
                 halign={Gtk.Align.CENTER}
             >
                 Welcome to AGS!
             </button>
             <box />
-            <button
-                onClicked={() => print("hello")}
+            <menubutton
+                hexpand
                 halign={Gtk.Align.CENTER}
             >
                 <label label={time()} />
-            </button>
+                <popover>
+                    <Gtk.Calendar />
+                </popover>
+            </menubutton>
         </centerbox>
     </window>
 }