✨ ags: optimizations, add media and separator widgets

ags/widget/bar/Clock.tsx

@@ -1,14 +1,16 @@
 import { Box, Button } from "astal/gtk3/widget";
 import { GLib, Variable } from "astal";
+import { Widget } from "astal/gtk3";
 
 const dateTimeFormat = "%A %d, %H:%M"
 const time = new Variable<string>("").poll(600, () => 
     GLib.DateTime.new_now_local().format(dateTimeFormat)!);
 
 export function Clock(): JSX.Element {
-    return (
-        <Box className={"clock"}>
-            <Button label={time()} />
-        </Box>
-    )
+    return new Widget.Box({
+        className: "clock",
+        child: new Widget.Button({
+            label: time()
+        } as Widget.ButtonProps)
+    } as Widget.BoxProps);
 }