From 3d74676f6d936ba8cdc8769d63c52dad6b305ae5 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Tue, 25 Mar 2025 17:12:48 +0100
Subject: [PATCH] [QuickActions] Prep

---
 config/ags/quickactions/app.ts         |  2 +-
 config/ags/quickactions/tsconfig.json  |  2 +-
 config/ags/quickactions/widget/Bar.tsx | 17 +++++++++++------
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/config/ags/quickactions/app.ts b/config/ags/quickactions/app.ts
index 83217ef..7e8cc7c 100644
--- a/config/ags/quickactions/app.ts
+++ b/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"
 
diff --git a/config/ags/quickactions/tsconfig.json b/config/ags/quickactions/tsconfig.json
index 9471e35..a92bc43 100644
--- a/config/ags/quickactions/tsconfig.json
+++ b/config/ags/quickactions/tsconfig.json
@@ -9,6 +9,6 @@
         // "checkJs": true,
         // "allowJs": true,
         "jsx": "react-jsx",
-        "jsxImportSource": "astal/gtk3",
+        "jsxImportSource": "astal/gtk4",
     }
 }
diff --git a/config/ags/quickactions/widget/Bar.tsx b/config/ags/quickactions/widget/Bar.tsx
index 0384535..c2db8c5 100644
--- a/config/ags/quickactions/widget/Bar.tsx
+++ b/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>
 }