[AGS] Redo basic setup

config/astal/components/bar/ui/modules/Hyprland.tsx

@@ -0,0 +1,57 @@
+import AstalTray from "gi://AstalTray";
+import { bind } from "astal";
+import AstalHyprland from "gi://AstalHyprland";
+
+const SysTray = () => {
+    const tray = AstalTray.get_default();
+
+    return <box className="SysTray">
+        {bind(tray, "items").as( items => items.map( item => (
+            <button
+                tooltipMarkup={bind(item, "tooltipMarkup")}
+                usePopover={false}
+                actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])}
+                menuModel={bind(item, "menuModel")}>
+                <icon gicon={bind(item, "gicon")} />
+            </button>
+        ) ) ) }
+    </box>
+}
+
+
+const HyprlandWorkspace = () => {
+    const hypr = AstalHyprland.get_default()
+
+    return <box className={"HyprlandWorkspaces"}>
+        {bind(hypr, "workspaces").as(wss => wss
+            .filter(ws => !(ws.id >= -99 && ws.id <= -2)) // filter out special workspaces
+            .sort((a, b) => a.id - b.id)
+            .map(ws => (
+                <button
+                    className={bind(hypr, "focusedWorkspace").as(fw =>
+                        ws === fw ? "HyprlandFocusedWorkspace" : "")}
+                    onClicked={() => ws.focus()}>
+                    {ws.id}
+                </button>
+            ))
+        )}
+    </box>
+}
+
+
+const HyprlandActiveWindow = () => {
+    const hypr = AstalHyprland.get_default();
+    const focused = bind( hypr, "focusedClient" );
+
+    return <box className={"HyprlandFocusedClients"} visible={focused.as(Boolean)}>
+        {focused.as( client => (
+            client && <label label={bind( client, "title" ).as( String )} />
+        ))}
+    </box>
+}
+
+export default {
+    HyprlandWorkspace, 
+    HyprlandActiveWindow,
+    SysTray
+}