feat!: migrate to ags v3, redesign styles

widget/time.tsx

@@ -1,12 +1,6 @@
-// let current_time = Variable(GLib.DateTime.new_now_local().format("%H:%M"))
-// GLib.timeout_add(GLib.PRIORITY_DEFAULT, 1000, () => {
-//   const now = GLib.DateTime.new_now_local()
-//   current_time.set(now.format("%b %e (%a) %H:%M"))
-//   return true
-
+import { Gtk } from "ags/gtk4"
 import { createPoll } from "ags/time"
 
-// })
 export default function Time() {
   const time = createPoll("", 500, () => {
     return new Date().toLocaleString(undefined, {
@@ -14,11 +8,13 @@ export default function Time() {
     })
   })
 
-  return <box class="status-box">
-    <label label={time} />
-  </box>
-  // return <box class="status-box">
-  //   <label label={bind(current_time)} />
-  // </box>
+  return (
+    <menubutton class="date-popover status-box">
+      <popover>
+        <Gtk.Calendar />
+      </popover>
+      <label label={time} />
+    </menubutton>
+  )
 }