[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/notifications/notifications.tsx

@@ -24,9 +24,9 @@ const urgency = (n: Notifd.Notification) => {
 }
 
 type Props = {
-    delete( id: number ): void
+    delete: ( id: number ) => void;
     notification: Notifd.Notification
-    id: number
+    id: number,
 }
 
 export default function Notification(props: Props) {
@@ -34,54 +34,54 @@ export default function Notification(props: Props) {
     const { START, CENTER, END } = Gtk.Align
 
     return <box vertical
-        cssClasses={['Notification', urgency(n)]}>
-        <box cssName="header">
+        cssClasses={['Notification', `${urgency(n)}`]}>
+        <box cssClasses={["header"]}>
             {(n.appIcon || n.desktopEntry) ? <Gtk.Image
-                cssName="app-icon"
+                cssClasses={["app-icon"]}
                 visible={Boolean(n.appIcon || n.desktopEntry)}
                 iconName={n.appIcon || n.desktopEntry}
-            /> : <Gtk.Image iconName={'window-close-symbolic'}></Gtk.Image>}
+            /> : <image iconName={'window-close-symbolic'}></image>}
             <label
-                cssName="app-name"
+                cssClasses={["app-name"]}
                 halign={START}
                 // ellipsize={Pango.EllipsizeMode.END}
                 label={n.appName || "Unknown"}
             />
             <label
-                cssName="time"
+                cssClasses={["time"]}
                 hexpand
                 halign={END}
                 label={time(n.time)}
             />
-            <button onClicked={() => del( id )}>
-                <Gtk.Image iconName="window-close-symbolic" />
+            <button onClicked={() => { del( id ) }}>
+                <image iconName="window-close-symbolic" />
             </button>
         </box>
         <Gtk.Separator visible />
-        <box cssName="content">
+        <box cssClasses={["content"]}>
             {n.image && fileExists(n.image) ? <box
                 valign={START}
-                cssName="image">
-                <Gtk.Image file={n.image}></Gtk.Image>
+                cssClasses={["image"]}>
+                <image file={n.image}></image>
             </box>
                 : <box></box>}
             {n.image ? <box
                 expand={false}
                 valign={START}
-                className="icon-image">
-                <Gtk.Image iconName={n.image} expand halign={CENTER} valign={CENTER} />
+                cssClasses={["icon-image"]}>
+                <image iconName={n.image} expand halign={CENTER} valign={CENTER} />
             </box>
                 : <box></box>}
             <box vertical>
-                <Gtk.Label
-                    cssName="summary"
+                <label
+                    cssClasses={["summary"]}
                     halign={START}
                     xalign={0}
                     label={n.summary}
                     // ellipsize={Pango.EllipsizeMode.END}
                 />
                 {n.body ? <label
-                    cssName="body"
+                    cssClasses={["body"]}
                     wrap
                     useMarkup
                     halign={START}
@@ -90,7 +90,7 @@ export default function Notification(props: Props) {
                 /> : <label></label>}
             </box>
         </box>
-        {n.get_actions().length > 0 ? <box cssName="actions">
+        {n.get_actions().length > 0 ? <box cssClasses={["actions"]}>
             {n.get_actions().map(({ label, id }) => (
                 <button
                     hexpand