ags: finish center-window widget with big-media and calendar

ags/window/CenterWindow.ts

@@ -1,8 +1,9 @@
 import { Astal, Gtk, Widget } from "astal/gtk3";
-import { GLib } from "astal";
+import { bind, GLib } from "astal";
 
 import { getDateTime } from "../scripts/time";
 import { BigMedia } from "../widget/center-window/BigMedia";
+import { Separator, SeparatorProps } from "../widget/Separator";
 
 export const CenterWindow: Widget.Window = new Widget.Window({
     className: "center-window",
@@ -12,7 +13,6 @@ export const CenterWindow: Widget.Window = new Widget.Window({
     layer: Astal.Layer.OVERLAY,
     exclusivity: Astal.Exclusivity.NORMAL,
     visible: false,
-    height_request: 400,
     margin_top: 10,
     anchor: Astal.WindowAnchor.TOP,
     child: new Widget.Box({
@@ -21,7 +21,6 @@ export const CenterWindow: Widget.Window = new Widget.Window({
             new Widget.Box({
                 className: "vertical left",
                 orientation: Gtk.Orientation.VERTICAL,
-                width_request: 300,
                 children: [
                     new Widget.Box({
                         className: "top",
@@ -36,18 +35,15 @@ export const CenterWindow: Widget.Window = new Widget.Window({
                             new Widget.Label({
                                 className: "date",
                                 label: getDateTime().as((dateTime: GLib.DateTime) =>
-                                    dateTime.format("%A, %B %d %Y"))
+                                    dateTime.format("%A, %B %d"))
                             } as Widget.LabelProps)
                         ]
                     } as Widget.BoxProps),
-                    BigMedia
-                ]
-            } as Widget.BoxProps),
-            new Widget.Box({
-                className: "vertical right",
-                children: [
                     new Widget.Box({
                         className: "calendar-box",
+                        vexpand: false,
+                        hexpand: true,
+                        valign: Gtk.Align.START,
                         child: new Gtk.Calendar({
                             visible: true,
                             show_heading: true,
@@ -56,6 +52,20 @@ export const CenterWindow: Widget.Window = new Widget.Window({
                         } as Gtk.Calendar.ConstructorProps)
                     } as Widget.BoxProps)
                 ]
+            } as Widget.BoxProps),
+            Separator({
+                visible: bind(BigMedia, "visible"),
+                orientation: Gtk.Orientation.VERTICAL,
+                alpha: .5,
+                cssColor: "gray",
+                size: 1
+            } as SeparatorProps),
+            new Widget.Box({
+                className: "vertical right",
+                orientation: Gtk.Orientation.VERTICAL,
+                children: [
+                    BigMedia
+                ]
             } as Widget.BoxProps)
         ]
     } as Widget.BoxProps)

ags/window/FloatingNotifications.ts

@@ -16,14 +16,22 @@ function NotificationWidget(notification: AstalNotifd.Notification): Gtk.Widget
                 hexpand: true,
                 vexpand: false,
                 children: [
+                    new Widget.Icon({
+                        className: "icon",
+                        visible: notification.appIcon !== "",
+                        icon: notification.appIcon || "image-missing",
+                        iconSize: Gtk.IconSize.DND,
+                        css: ".icon { font-size: 24px; }"
+                    }),
                     new Widget.Label({
                         className: "app-name",
                         halign: Gtk.Align.START,
                         label: notification.appName || "Unknown Application"
                     } as Widget.LabelProps),
                     new Widget.Button({
-                        className: "close-button",
-                        onClick: () => Notifications.removeNotification(notification.id)
+                        className: "close nf",
+                        onClick: () => notification.dismiss(),
+                        label: "󰅖"
                     } as Widget.ButtonProps)
                 ]
             } as Widget.BoxProps),
@@ -71,8 +79,8 @@ export const FloatingNotifications: Widget.Window = new Widget.Window({
         className: "floating-notifications-container",
         orientation: Gtk.Orientation.VERTICAL,
         homogeneous: false,
-        children: bind(Notifications, "notifications").as((notifications: Array<AstalNotifd.Notification>) =>
-            notifications.map((notification: AstalNotifd.Notification) => 
-                NotificationWidget(notification)))
+        children: Notifications.notifications().as((notifications: Array<AstalNotifd.Notification>) =>
+            notifications.map((item: AstalNotifd.Notification) =>
+                NotificationWidget(item)))
     } as Widget.BoxProps)
 } as Widget.WindowProps);

ags/window/Runner.ts

@@ -0,0 +1,37 @@
+import { Variable } from "astal";
+import { Astal, Gtk, Widget } from "astal/gtk3";
+
+// TODO
+
+export interface RunnerProps {
+    anchor?: Astal.WindowAnchor;
+    width?: number;
+    height?: number;
+    entryPlaceHolder?: string;
+    resultsPlaceholder?: Array<Gtk.Widget>;
+}
+
+export function Runner(props?: RunnerProps) {
+
+    const entryText: Variable<string> = new Variable<string>("");
+
+    const resultsBox: Widget.Box = new Widget.Box({
+        className: "results",
+        
+    } as Widget.BoxProps);
+
+    return new Widget.Window({
+        namespace: "runner",
+        widthRequest: props?.width || 600,
+        heightRequest: props?.height || 500,
+        child: new Widget.Box({
+            className: "main",
+            children: [
+                new Widget.Entry({
+                    className: "search",
+                    onChanged: (entry) => entryText.set(entry.text),
+                } as Widget.EntryProps),
+            ]
+        } as Widget.BoxProps)
+    } as Widget.WindowProps);
+}