[QuickActions] Prep

config/ags/quickactions/app.ts

@@ -1,4 +1,4 @@
-import { App } from "astal/gtk3"
+import { App } from "astal/gtk4"
 import style from "./style.scss"
 import Bar from "./widget/Bar"
 

config/ags/quickactions/tsconfig.json

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

config/ags/quickactions/widget/Bar.tsx

@@ -1,4 +1,4 @@
-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")
@@ -7,25 +7,30 @@ 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>
 }