Modules/AGS: Add WIP config

home/modules/ags/config/style.scss

@@ -6,19 +6,41 @@
 $fg-color: #{"@theme_fg_color"};
 $bg-color: #{"@theme_bg_color"};
 
-window.Bar {
+// Order is Top-Right-Bottom-Left for combined properties
+
+* {
+    // Remove the default theme's background-image, otherwise background-color doesn't work
+    background-image: none;
+
+    // Clear implicit paddings and margins, otherwise size management is terrible
+    padding: 0;
+    margin: 0;
+}
+
+.Window {
     background: transparent;
-    color: $fg-color;
     font-weight: bold;
+    font-size: x-large;
 
-    >centerbox {
-        background: $bg-color;
-        border-radius: 10px;
-        margin: 8px;
-    }
+    .Bar {
+        background-color: rgba($light-base, 0.3);
+        border-radius: 6px;
+        border-width: 2px;
+        border-color: $dark-lavender;
+        border-style: solid;
+        margin: 10px 10px 0 10px;
 
-    button {
-        border-radius: 8px;
-        margin: 2px;
+        .LauncherButton {
+            background-color: $dark-lavender;
+            border-radius: 6px;
+            border-width: 0;
+            margin: -1px 10px -1px -1px; // Negative margins to remove gaps from border radii
+            min-width: 36px;
+            min-height: 36px;
+
+            >label {
+                margin-left: -4px; // Tux not centered otherwise
+            }
+        }
     }
 }

home/modules/ags/config/widget/Bar.tsx

@@ -1,36 +1,76 @@
 import { App, Astal, Gtk, Gdk } from "astal/gtk4"
-import { Variable } from "astal"
+import { GLib, Variable } from "astal"
+import { SysTray } from "./SysTray";
 
-const time = Variable("").poll(1000, "date")
+const user = Variable("")
+    .poll(60000, ["bash", "-c", "whoami"]);
+
+const time = Variable("")
+    .poll(1000, ["bash", "-c", "date +'%H:%M:%S'"]);
+
+const date = Variable("")
+    .poll(60000, ["bash", "-c", "date +'%y-%m-%d'"])
+
+const uptime = Variable("")
+    .poll(60000, ["bash", "-c", "uptime | awk -F'( |,)+' '{print $4}'"]);
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
     const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
 
     return <window
-        visible
-        cssClasses={["Bar"]}
+        cssClasses={["Window"]}
+        application={App}
         gdkmonitor={gdkmonitor}
         exclusivity={Astal.Exclusivity.EXCLUSIVE}
         anchor={TOP | LEFT | RIGHT}
-        application={App}>
-        <centerbox cssName="centerbox">
-            <button
-                onClicked="echo hello"
-                hexpand
-                halign={Gtk.Align.CENTER}
-            >
-                Welcome to AGS!
-            </button>
-            <box />
-            <menubutton
-                hexpand
-                halign={Gtk.Align.CENTER}
-            >
-                <label label={time()} />
-                <popover>
-                    <Gtk.Calendar />
-                </popover>
-            </menubutton>
-        </centerbox>
-    </window>
+        visible
+
+        child={
+            <centerbox
+                cssClasses={["Bar"]}
+
+                startWidget={
+                    <box
+                        halign={Gtk.Align.START}
+                        children={[
+                            <button
+                                cssClasses={["LauncherButton"]}
+                                onClicked="rofi -drun-show-actions -show drun"
+                                cursor={Gdk.Cursor.new_from_name("pointer", null)}
+                                label={""}
+                            />,
+
+                            <label
+                                cssClasses={["UserLabel"]}
+                                label={user((value) => `${value.toUpperCase()}`)}
+                            />,
+
+                            <label
+                                cssClasses={["UptimeLabel"]}
+                                label={uptime((value) => `${value}`)}
+                            />,
+
+                            <label
+                                cssClasses={["WindowNameLabel"]}
+                                label={"WINDOW"}
+                            />
+                        ]}
+                    />
+                }
+
+                centerWidget={
+                    <box />
+                }
+
+                endWidget={
+                    <box
+                        halign={Gtk.Align.START}
+                        children={[
+                            <SysTray />
+                        ]}
+                    />
+                }
+            />
+        }
+    />
 }

home/modules/ags/config/widget/SysTray.tsx

@@ -0,0 +1,40 @@
+import { Variable, bind } from "astal";
+import { Gtk } from "astal/gtk4"
+import AstalTray from "gi://AstalTray";
+
+export function SysTray() {
+    const tray = AstalTray.get_default()
+
+    const trayIcons = Variable.derive(
+        [bind(tray, "items")],
+        (items) => {
+            return items.map((item) => {
+                return (
+                    <menubutton
+                        item={item}
+                        child={
+                            <image gicon={bind(item, "gicon")} />
+                        }
+                    />
+                );
+            });
+        },
+    );
+
+    return <box
+        cssClasses={["SysTray"]}
+        children={
+            bind(tray, "items").as(items => items.map(item => (
+                <menubutton
+                    tooltipMarkup={bind(item, "tooltipMarkup")}
+                    usePopover={false}
+                    actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])}
+                    menuModel={bind(item, "menuModel")}
+                    child={
+                        <image gicon={bind(item, "gicon")} />
+                    }
+                />
+            )))
+        }
+    />
+}