Restructure, move launcher to astal gtk4

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

build/build.js

@@ -0,0 +1,9 @@
+// Using commonjs instead of ejs, because more widely compatible
+const mustache = require( 'mustache' );
+
+// Define view options (for rendering with mustache)
+const view = {
+    // Colours
+    'colour_foreground': '',
+}
+

build/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "janishutz-config-build",
+  "version": "1.0.0",
+  "description": "Build janishutz's dotfiles configs",
+  "repository": {
+    "type": "git",
+    "url": "https://git.janishutz.com/janishutz/dotfiles"
+  },
+  "license": "GPL-3.0-or-later",
+  "author": "janishutz",
+  "type": "commonjs",
+  "main": "build.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "mustache": "^4.2.0"
+  }
+}

config/ags/launcher/app.ts

@@ -1,9 +1,10 @@
-import { App } from "astal/gtk3"
+import { App } from "astal/gtk4"
 import style from "./style.scss"
-import Applauncher from "./ui/AppLauncher"
+import Bar from "./widget/Bar"
 
 App.start({
-    instanceName: "launcher",
     css: style,
-    main: Applauncher,
-});
+    main() {
+        App.get_monitors().map(Bar)
+    },
+})

config/ags/launcher/tsconfig.json

@@ -9,6 +9,6 @@
         // "checkJs": true,
         // "allowJs": true,
         "jsx": "react-jsx",
-        "jsxImportSource": "astal/gtk3",
+        "jsxImportSource": "astal/gtk4",
     }
 }

config/ags/launcher/widget/Bar.tsx

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