From 5f4b9622d9b26777e61b47fdccc1fd6c1b31a4d1 Mon Sep 17 00:00:00 2001
From: Chris Toph <toph@ryot.foo>
Date: Sat, 22 Mar 2025 20:32:34 -0400
Subject: [PATCH] Re-add initial implementation of Bar component with
 subcomponents

---
 src/app.ts                                   | 10 +++++
 src/app/windows/Bar/components/BarCenter.tsx | 16 +++++++
 src/app/windows/Bar/components/BarLeft.tsx   | 46 ++++++++++++++++++++
 src/app/windows/Bar/components/BarRight.tsx  |  8 ++++
 src/app/windows/Bar/components/index.tsx     |  3 ++
 src/app/windows/Bar/index.tsx                | 36 +++++++++++++++
 src/app/windows/Run/index.tsx                |  0
 src/env.d.ts                                 | 21 +++++++++
 src/style.scss                               | 20 +++++++++
 tsconfig.json                                |  8 ++--
 10 files changed, 164 insertions(+), 4 deletions(-)
 create mode 100644 src/app.ts
 create mode 100644 src/app/windows/Bar/components/BarCenter.tsx
 create mode 100644 src/app/windows/Bar/components/BarLeft.tsx
 create mode 100644 src/app/windows/Bar/components/BarRight.tsx
 create mode 100644 src/app/windows/Bar/components/index.tsx
 create mode 100644 src/app/windows/Bar/index.tsx
 create mode 100644 src/app/windows/Run/index.tsx
 create mode 100644 src/env.d.ts
 create mode 100644 src/style.scss

diff --git a/src/app.ts b/src/app.ts
new file mode 100644
index 0000000..137c42c
--- /dev/null
+++ b/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);
+    },
+});
diff --git a/src/app/windows/Bar/components/BarCenter.tsx b/src/app/windows/Bar/components/BarCenter.tsx
new file mode 100644
index 0000000..60636a5
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/src/app/windows/Bar/components/BarLeft.tsx b/src/app/windows/Bar/components/BarLeft.tsx
new file mode 100644
index 0000000..070a619
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/src/app/windows/Bar/components/BarRight.tsx b/src/app/windows/Bar/components/BarRight.tsx
new file mode 100644
index 0000000..a76c4a7
--- /dev/null
+++ b/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 <></>;
+}
diff --git a/src/app/windows/Bar/components/index.tsx b/src/app/windows/Bar/components/index.tsx
new file mode 100644
index 0000000..388b971
--- /dev/null
+++ b/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";
diff --git a/src/app/windows/Bar/index.tsx b/src/app/windows/Bar/index.tsx
new file mode 100644
index 0000000..3f89cab
--- /dev/null
+++ b/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>
+    // );
+}
diff --git a/src/app/windows/Run/index.tsx b/src/app/windows/Run/index.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 0000000..467c0a4
--- /dev/null
+++ b/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
+}
diff --git a/src/style.scss b/src/style.scss
new file mode 100644
index 0000000..1d0d3a9
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/tsconfig.json b/tsconfig.json
index a92bc43..a8021bf 100644
--- a/tsconfig.json
+++ b/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"
     }
 }