[AGS] GTK 4 Migration: Done, Start adding QuickActions

Probably gonna abandon the QuickActions, as that is just way too much
effort for what it does. Will be providing keybinds for doing what I
wanted to do there in Hyprland

config/astal/components/bar/ui/Bar.tsx

@@ -1,4 +1,4 @@
-import { Astal, Gdk, Gtk } from "astal/gtk3";
+import { App, Astal, Gdk, Gtk } from "astal/gtk4";
 import Hyprland from "./modules/Hyprland";
 import Calendar from "./modules/Calendar";
 import QuickView from "./modules/QuickView";
@@ -11,19 +11,23 @@ const Bar = (gdkmonitor: Gdk.Monitor) => {
         <window gdkmonitor={gdkmonitor}
             cssClasses={["Bar"]}
             exclusivity={Astal.Exclusivity.EXCLUSIVE}
-            anchor={TOP | LEFT | RIGHT}>
-            <box orientation={Gtk.Orientation.HORIZONTAL} spacing={10}>
-                <box hexpand halign={Gtk.Align.START}>
+            anchor={TOP | LEFT | RIGHT}
+            visible
+            application={App}
+            child={
+            <box orientation={Gtk.Orientation.HORIZONTAL}>
+                <box hexpand halign={Gtk.Align.START} cssClasses={["BarLeft"]}>
                     <Calendar.Time />
                     <SystemInfo.SystemInfo />
                     <Hyprland.Workspace />
                 </box>
                 <Hyprland.ActiveWindow />
-                <box hexpand halign={Gtk.Align.END}>
+                <box hexpand halign={Gtk.Align.END} cssClasses={["BarRight"]}>
                     <Hyprland.SysTray />
                     <QuickView.QuickView />
                 </box>
             </box>
+            }>
         </window>
     );
 }