initial commit

.gitignore

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

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)
+    },
+})

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
+}

package.json

@@ -0,0 +1,6 @@
+{
+    "name": "astal-shell",
+    "dependencies": {
+        "astal": "/usr/share/astal/gjs"
+    }
+}

style.scss

@@ -0,0 +1,54 @@
+// 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"};
+
+$bg: #212223;
+$fg: #f1f1f1;
+$accent: #{"@theme_accent_color"};
+$radius: 7px;
+
+window.Bar {
+    background: transparent;
+    color: $fg-color;
+    font-weight: bold;
+
+    >centerbox {
+        background: transparent;
+        border-radius: 10px;
+        margin: 0;
+    }
+
+    .Workspaces  {
+        button {
+            all: unset;
+            background-color: transparent;
+
+            &:hover label {
+                background-color: gray;
+                border-color: black;
+            }
+
+            &:active label {
+                background-color: black;
+            }
+        }
+
+        label {
+            transition: 200ms;
+            padding: 0 8px;
+            border-radius: $radius;
+            border: 1pt solid transparent;
+        }
+
+        .focused label {
+            color: $accent;
+            border-color: $accent;
+        }
+    }
+
+
+    button {
+        border-radius: 8px;
+        padding: 0 8px;
+    }
+}

tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "$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/gtk3",
+    }
+}

widget/Bar.tsx

@@ -0,0 +1,59 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk3"
+import { Variable, bind } from "astal"
+import Hyprland from "gi://AstalHyprland"
+
+const time = Variable("").poll(1000, "date")
+
+function Workspaces() {
+    const hypr = Hyprland.get_default()
+
+    return <box className="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
+                    className={bind(hypr, "focusedWorkspace").as(fw =>
+                        ws === fw ? "focused" : "")}
+                    onClicked={() => ws.focus()}>
+                    {ws.id}
+                </button>
+            ))
+        )}
+    </box>
+}
+
+export default function Bar(gdkmonitor: Gdk.Monitor) {
+    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
+
+    return <window
+        className="Bar"
+        gdkmonitor={gdkmonitor}
+        exclusivity={Astal.Exclusivity.EXCLUSIVE}
+        anchor={TOP | LEFT | RIGHT}
+        application={App}>
+        <centerbox>
+            <box hexpand halign={Gtk.Align.START}>
+                <Workspaces />
+            </box>
+            <button
+              onClicked="/home/tola/dotfiles/rofi/launcher/launcher.sh"
+              halign={Gtk.Align.CENTER}
+            >
+              Menu
+            </button>  
+            <button
+                onClicked="echo hello"
+                halign={Gtk.Align.CENTER}
+            >
+                Welcome to AGS!
+            </button>
+            <button
+                onClicked={() => print("hello")}
+                halign={Gtk.Align.CENTER}
+            >
+                <label label={time()} />
+            </button>
+        </centerbox>
+    </window>
+}