Re-add initial implementation of Bar component with subcomponents

src/app.ts

@@ -0,0 +1,10 @@
+import { App } from "astal/gtk4";
+import style from "./style.scss";
+import Bar from "./app/windows/Bar";
+
+App.start({
+    css: style,
+    main() {
+        App.get_monitors().map(Bar);
+    },
+});

src/app/windows/Bar/components/BarCenter.tsx

@@ -0,0 +1,16 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk4";
+import { GLib, Variable } from "astal";
+
+function Time({ format = "%H:%M - %A %e." }) {
+    const time = Variable<string>("").poll(1000, () => GLib.DateTime.new_now_local().format(format)!);
+
+    return <label cssName="Time" onDestroy={() => time.drop()} label={time()} />;
+}
+
+export default function BarCenter() {
+    return (
+        <box>
+            <Time />
+        </box>
+    );
+}

src/app/windows/Bar/components/BarLeft.tsx

@@ -0,0 +1,46 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk4";
+import { bind, GLib, Variable } from "astal";
+import Hyprland from "gi://AstalHyprland";
+
+const time = Variable("").poll(1000, "date");
+
+function Launcher() {
+    return (
+        <button cssName="barauncher">
+            <image iconName={GLib.get_os_info("LOGO") || "missing-symbolic"} />
+        </button>
+    );
+}
+
+function Workspaces() {
+    const hypr = Hyprland.get_default();
+
+    return (
+        <box cssName="Workspaces">
+            {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
+                            cssName={bind(hypr, "focusedWorkspace")
+                                .as((fw) => (ws === fw ? "focused" : ""))
+                                .get()}
+                            onClicked={() => ws.focus()}
+                        >
+                            {ws.id}
+                        </button>
+                    ))
+            )}
+        </box>
+    );
+}
+
+export default function BarLeft() {
+    return (
+        <box>
+            <Launcher />
+            <Workspaces />
+        </box>
+    );
+}

src/app/windows/Bar/components/BarRight.tsx

@@ -0,0 +1,8 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk4";
+import { Variable } from "astal";
+
+const time = Variable("").poll(1000, "date");
+
+export default function BarRight() {
+    return <></>;
+}

src/app/windows/Bar/components/index.tsx

@@ -0,0 +1,3 @@
+export { default as BarLeft } from "./BarLeft";
+export { default as BarCenter } from "./BarCenter";
+export { default as BarRight } from "./BarRight";

src/app/windows/Bar/index.tsx

@@ -0,0 +1,36 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk4";
+import { Variable } from "astal";
+import { BarLeft, BarCenter, BarRight } from "./components";
+
+const time = Variable("").poll(1000, "date");
+
+export default function Bar(gdkmonitor: Gdk.Monitor) {
+    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
+
+    return (
+        <window cssName="Bar" visible gdkmonitor={gdkmonitor} exclusivity={Astal.Exclusivity.EXCLUSIVE} anchor={TOP | LEFT | RIGHT} application={App}>
+            <centerbox cssName="Bar-centerbox">
+                <BarLeft />
+                <BarCenter />
+                <BarRight />
+            </centerbox>
+        </window>
+    );
+
+    // return (
+    //     <window visible cssClasses={["Bar"]} 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>
+    // );
+}

src/env.d.ts

@@ -0,0 +1,21 @@
+declare const SRC: string
+
+declare module "inline:*" {
+    const content: string
+    export default content
+}
+
+declare module "*.scss" {
+    const content: string
+    export default content
+}
+
+declare module "*.blp" {
+    const content: string
+    export default content
+}
+
+declare module "*.css" {
+    const content: string
+    export default content
+}

src/style.scss

@@ -0,0 +1,20 @@
+// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
+$fg-color: #{"@theme_fg_color"};
+$bg-color: #{"@theme_bg_color"};
+
+window.Bar {
+    background: transparent;
+    color: $fg-color;
+    font-weight: bold;
+
+    >centerbox {
+        background: $bg-color;
+        border-radius: 10px;
+        margin: 8px;
+    }
+
+    button {
+        border-radius: 8px;
+        margin: 2px;
+    }
+}

tsconfig.json

@@ -2,13 +2,13 @@
     "$schema": "https://json.schemastore.org/tsconfig",
     "compilerOptions": {
         "experimentalDecorators": true,
-        "strict": true,
-        "target": "ES2022",
-        "module": "ES2022",
-        "moduleResolution": "Bundler",
         // "checkJs": true,
         // "allowJs": true,
         "jsx": "react-jsx",
         "jsxImportSource": "astal/gtk4",
+        "module": "ES2022",
+        "moduleResolution": "Bundler",
+        "strict": true,
+        "target": "ES2022"
     }
 }