✨ ags,hypr: initial code!

ags/.gitignore

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

ags/app.ts

@@ -0,0 +1,13 @@
+import { Gio, monitorFile, readFile, Process } from "astal";
+import { App } from "astal/gtk3"
+
+import { Bar } from "./window/Bar";
+import { runStyleHandler } from "./scripts/style-handler";
+
+runStyleHandler();
+
+App.start({
+    main() {
+        Bar(0);
+    }
+});

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

ags/package-lock.json

@@ -0,0 +1,21 @@
+{
+    "name": "astal-shell",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "astal-shell",
+            "dependencies": {
+                "astal": "/usr/share/astal/gjs"
+            }
+        },
+        "../../../../usr/share/astal/gjs": {
+            "name": "astal",
+            "license": "LGPL-2.1"
+        },
+        "node_modules/astal": {
+            "resolved": "../../../../usr/share/astal/gjs",
+            "link": true
+        }
+    }
+}

ags/package.json

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

ags/scripts/pywal.ts

@@ -0,0 +1,10 @@
+import { readFile } from "astal";
+import { getUserDirs } from "./user";
+
+export abstract class Wal {
+    getColors(): JSON {
+        return JSON.parse(
+            readFile(`${getUserDirs().cache}/wal/colors.json`)!
+        );
+    }
+}

ags/scripts/style-handler.ts

@@ -0,0 +1,57 @@
+// handles reloading stylesheet and pywal colors
+
+import { readFile, monitorFile, Process, Gio } from "astal";
+import { App } from "astal/gtk3";
+import { getUserDirs } from "./user";
+
+const stylePath = `${getUserDirs().state}/ags/style`
+const watchPaths = [
+    "./style",
+    "./style.scss"
+];
+
+export function runStyleHandler(): void {
+    reloadStyle();
+    watch();
+}
+
+export function reloadStyle(): void {
+    compileStyle();
+    applyStyle();
+}
+
+export function compileStyle(): void {
+    console.log("[LOG] Compiling sass (stylesheet)");
+    Process.exec(`mkdir -p ${stylePath}`);
+    Process.exec(`bash -c "sass -I ./style ./style.scss ${stylePath}/style.css"`);
+}
+
+export function applyStyle(): void {
+    console.log("[LOG] Applying stylesheet");
+    App.reset_css();
+    App.apply_css(
+        readFile(`${stylePath}/style.css`)!
+    );
+}
+
+function watch(): void {
+    // Monitor changes on stylesheet at runtime
+    watchPaths.map((path: string) =>
+        monitorFile(
+            `${path}`,
+            (file: string) => {
+                console.log(`[LOG] Stylesheet ${file} file updated`)
+                compileStyle();
+                applyStyle();
+            }
+        )
+    )
+
+    // Monitor PyWal colorscheme file
+    monitorFile(
+        `${getUserDirs().cache}/wal/colors.scss`,
+        (file: string) => {
+            Process.exec(`bash -c "cp -f ${file} ./style/_wal.scss"`)
+        }
+    );
+}

ags/scripts/user.ts

@@ -0,0 +1,11 @@
+import { GLib } from "astal";
+
+export function getUserDirs() {
+    return {
+        home: GLib.getenv("HOME"),
+        state: GLib.getenv("XDG_STATE_HOME"),
+        cache: GLib.getenv("XDG_CACHE_HOME"),
+        config: GLib.getenv("XDG_CONFIG_HOME"),
+        data: GLib.getenv("XDG_DATA_HOME")
+    } as const;
+}

ags/style.scss

@@ -0,0 +1,16 @@
+@use "./style/bar";
+@use "./style/wal";
+
+* {
+  all: unset;
+  transition: 120ms linear;
+}
+
+button {
+  padding: 6px;
+  border-radius: 12px;
+
+  &:hover {
+    background: wal.$color1;
+  }
+}

ags/style/_bar.scss

@@ -0,0 +1,47 @@
+@use "./_wal";
+
+.bar-container {
+  padding: 6px;
+  padding-bottom: 0px;
+  .bar-centerbox > * {
+    background: rgba($color: wal.$background, $alpha: .6);
+    padding: 6px;
+    border-radius: 18px;
+  }
+}
+
+label {
+  font-size: 12px;
+  font-family: "Cantarell", "Noto Sans";
+  font-weight: 500;
+}
+
+.workspaces {
+  & button {
+    transition: 80ms linear;
+    padding: 0 12px;
+    background: wal.$color1;
+    margin: 3px 2px;
+
+    &.focus {
+      background: wal.$foreground;
+      padding: 0 20px;
+    }
+  }
+}
+
+.logo button {
+  $padding-inline: 12px;
+  padding-left: $padding-inline;
+  padding-right: calc($padding-inline + 3.9px);
+
+  & label {
+    font-size: 14px;
+  }
+}
+
+.cc-toggle button {
+  $padding-inline: 12px;
+  padding-left: $padding-inline;
+  padding-right: calc($padding-inline + 2px);
+}

ags/style/_wal.scss

@@ -0,0 +1,26 @@
+// SCSS Variables
+// Generated by 'wal'
+$wallpaper: "/home/joaov/wallpapers/Garden Kita.png";
+
+// Special
+$background: #101212;
+$foreground: #c3c3c3;
+$cursor: #c3c3c3;
+
+// Colors
+$color0: #101212;
+$color1: #59662a;
+$color2: #517047;
+$color3: #87863c;
+$color4: #707b48;
+$color5: #4b6266;
+$color6: #84876e;
+$color7: #8e9898;
+$color8: #596d6d;
+$color9: #778839;
+$color10: #6C965F;
+$color11: #B4B350;
+$color12: #96A460;
+$color13: #658388;
+$color14: #B0B493;
+$color15: #c3c3c3;

ags/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"
+    }
+}

ags/widget/bar/CCToggle.tsx

@@ -0,0 +1,11 @@
+import {Process} from "astal";
+import { Box, Button } from "astal/gtk3/widget";
+
+export function CCToggle() {
+    return (
+        <Box className={"cc-toggle"}>
+            <Button onClick={() => Process.exec("eww open --toggle control-center")} 
+                    label={"󰂚"}/>
+        </Box>
+    )
+}

ags/widget/bar/Clock.tsx

@@ -0,0 +1,14 @@
+import { Box, Button } from "astal/gtk3/widget";
+import { GLib, Variable } from "astal";
+
+const dateTimeFormat = "%A %d, %H:%M"
+const time = new Variable<string>("").poll(600, () => 
+    GLib.DateTime.new_now_local().format(dateTimeFormat)!);
+
+export function Clock(): JSX.Element {
+    return (
+        <Box className={"clock"}>
+            <Button label={time()} />
+        </Box>
+    )
+}

ags/widget/bar/Logo.tsx

@@ -0,0 +1,10 @@
+import { Box, Button } from "astal/gtk3/widget";
+import { Process } from "astal";
+
+export function Logo() {
+    return (
+        <Box className={"logo"}>
+            <Button onClick={ () => Process.exec("hyprctl dispatch exec anyrun") } label={""} />
+        </Box>
+    )
+}

ags/widget/bar/Tray.tsx

@@ -0,0 +1,17 @@
+import { Box, Label } from "astal/gtk3/widget";
+import AstalTray from "gi://AstalTray"
+
+const astalTray = AstalTray.get_default();
+let items: Array<AstalTray.TrayItem> = astalTray.items;
+
+const handlerId = astalTray.connect("item-added", () => {
+    items = astalTray.items;
+    console.log(astalTray.items);
+}) as number;
+
+export function Tray() {
+    return (
+        <Box className={"tray"}>
+        </Box>
+    );
+}

ags/widget/bar/Workspaces.tsx

@@ -0,0 +1,21 @@
+import { bind } from "astal";
+import { Widget } from "astal/gtk3";
+import AstalHyprland from "gi://AstalHyprland";
+
+const hyprland = AstalHyprland.get_default();
+
+export function Workspaces() {
+    return new Widget.Box({
+        className: "workspaces",
+        children: bind(hyprland, "workspaces").as((workspaces) =>
+            workspaces.sort((a: AstalHyprland.Workspace, b: AstalHyprland.Workspace) =>
+                    a.get_id() - b.get_id())
+            .map((workspace: AstalHyprland.Workspace) => 
+                new Widget.Button({
+                    className: bind(hyprland, "focusedWorkspace").as((focusedWs: AstalHyprland.Workspace) => workspace === focusedWs ? "focus" : ""),
+                    onClicked: () => workspace.focus()
+                } as Widget.ButtonProps)
+            )
+        )
+    } as Widget.BoxProps);
+}

ags/window/Bar.tsx

@@ -0,0 +1,44 @@
+import { Box, CenterBox } from "astal/gtk3/widget";
+import { Astal, Gtk } from "astal/gtk3";
+import Gdk from "gi://Gdk?version=3.0";
+
+import { Clock } from "../widget/bar/Clock";
+import { Logo } from "../widget/bar/Logo";
+import { CCToggle } from "../widget/bar/CCToggle";
+//import { Tray } from "../widget/bar/Tray";
+import { Workspaces } from "../widget/bar/Workspaces";
+
+export function Bar(monitor: number = 0, width: (number|undefined) = undefined, height: (number|undefined) = undefined) {
+    return (
+<window className="bar" monitor={ monitor } namespace={ "top-bar" }
+        anchor={ Astal.WindowAnchor.TOP } layer={ Astal.Layer.TOP }
+        exclusivity={ Astal.Exclusivity.EXCLUSIVE } canFocus={ false }
+        heightRequest={ height ? height : 0 } 
+        widthRequest={ width ? width : Gdk.Screen.get_default()?.get_monitor_geometry(monitor)?.width }>
+
+    <Box className={ "bar-container" } spacing={ 2 }>
+        <CenterBox className={ "bar-centerbox" } expand={ true }>
+            <Box className={ "widgets-left" } vertical={ false }
+             homogeneous={ false } halign={ Gtk.Align.START }>
+
+                <Logo />
+                <Workspaces />
+            </Box>
+
+            <Box className={ "widgets-center" } halign={ Gtk.Align.CENTER }
+                 vertical={ false } homogeneous={ false }>
+
+                <Clock />
+            </Box>
+
+            <Box className={ "widgets-right" } halign={ Gtk.Align.END }
+                 vertical={ false } homogeneous={ false }>
+
+                {/*<Tray />*/}
+                <CCToggle />
+            </Box>
+        </CenterBox>
+    </Box>
+</window>
+    )
+}