added a minimal zshrc to dev on and a base ags project

ags/.gitignore

@@ -0,0 +1,2 @@
+@girs/
+node_modules/

ags/app.ts

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

ags/env.d.ts

@@ -0,0 +1,21 @@
+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
+}

ags/style.scss

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

ags/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "$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": "/usr/share/astal/gjs/gtk3",
+        "paths": {
+            "astal": [
+                "/usr/share/astal/gjs"
+            ],
+            "astal/*": [
+                "/usr/share/astal/gjs/*"
+            ]
+        },
+    }
+}

ags/widget/Bar.tsx

@@ -0,0 +1,29 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk3"
+import { Variable } from "astal"
+
+const time = Variable("").poll(1000, "date")
+
+export default function Bar(gdkmonitor: Gdk.Monitor) {
+    return <window
+        className="Bar"
+        gdkmonitor={gdkmonitor}
+        exclusivity={Astal.Exclusivity.EXCLUSIVE}
+        anchor={Astal.WindowAnchor.TOP
+            | Astal.WindowAnchor.LEFT
+            | Astal.WindowAnchor.RIGHT}
+        application={App}>
+        <centerbox>
+            <button
+                onClicked="echo hello"
+                halign={Gtk.Align.CENTER} >
+                Welcome to AGS!
+            </button>
+            <box />
+            <button
+                onClick={() => print("hello")}
+                halign={Gtk.Align.CENTER} >
+                <label label={time()} />
+            </button>
+        </centerbox>
+    </window>
+}