Modules/Ags: Deprecate module

home/modules/1_deprecated/ags/config/.gitignore

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

home/modules/1_deprecated/ags/config/app.ts

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

home/modules/1_deprecated/ags/config/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
+}

home/modules/1_deprecated/ags/config/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "astal-shell",
+    "dependencies": {
+        "astal": "/home/christoph/.local/share/ags"
+    }
+}

home/modules/1_deprecated/ags/config/style.scss

@@ -0,0 +1,46 @@
+// Import the colors exported by the nixos config
+// TODO: Depend on username somehow...
+@use "/home/christoph/.config/colors" as *;
+
+// 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"};
+
+// Order is Top-Right-Bottom-Left for combined properties
+
+* {
+    // Remove the default theme's background-image, otherwise background-color doesn't work
+    background-image: none;
+
+    // Clear implicit paddings and margins, otherwise size management is terrible
+    padding: 0;
+    margin: 0;
+}
+
+.Window {
+    background: transparent;
+    font-weight: bold;
+    font-size: x-large;
+
+    .Bar {
+        background-color: rgba($light-base, 0.3);
+        border-radius: 6px;
+        border-width: 2px;
+        border-color: $dark-lavender;
+        border-style: solid;
+        margin: 10px 10px 0 10px;
+
+        .LauncherButton {
+            background-color: $dark-lavender;
+            border-radius: 6px;
+            border-width: 0;
+            margin: -1px 10px -1px -1px; // Negative margins to remove gaps from border radii
+            min-width: 36px;
+            min-height: 36px;
+
+            >label {
+                margin-left: -4px; // Tux not centered otherwise
+            }
+        }
+    }
+}

home/modules/1_deprecated/ags/config/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/gtk4",
+    }
+}

home/modules/1_deprecated/ags/config/widget/Bar.tsx

@@ -0,0 +1,76 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk4"
+import { GLib, Variable } from "astal"
+import { SysTray } from "./SysTray";
+
+const user = Variable("")
+    .poll(60000, ["bash", "-c", "whoami"]);
+
+const time = Variable("")
+    .poll(1000, ["bash", "-c", "date +'%H:%M:%S'"]);
+
+const date = Variable("")
+    .poll(60000, ["bash", "-c", "date +'%y-%m-%d'"])
+
+const uptime = Variable("")
+    .poll(60000, ["bash", "-c", "uptime | awk -F'( |,)+' '{print $4}'"]);
+
+export default function Bar(gdkmonitor: Gdk.Monitor) {
+    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
+
+    return <window
+        cssClasses={["Window"]}
+        application={App}
+        gdkmonitor={gdkmonitor}
+        exclusivity={Astal.Exclusivity.EXCLUSIVE}
+        anchor={TOP | LEFT | RIGHT}
+        visible
+
+        child={
+            <centerbox
+                cssClasses={["Bar"]}
+
+                startWidget={
+                    <box
+                        halign={Gtk.Align.START}
+                        children={[
+                            <button
+                                cssClasses={["LauncherButton"]}
+                                onClicked="rofi -drun-show-actions -show drun"
+                                cursor={Gdk.Cursor.new_from_name("pointer", null)}
+                                label={""}
+                            />,
+
+                            <label
+                                cssClasses={["UserLabel"]}
+                                label={user((value) => `${value.toUpperCase()}`)}
+                            />,
+
+                            <label
+                                cssClasses={["UptimeLabel"]}
+                                label={uptime((value) => `${value}`)}
+                            />,
+
+                            <label
+                                cssClasses={["WindowNameLabel"]}
+                                label={"WINDOW"}
+                            />
+                        ]}
+                    />
+                }
+
+                centerWidget={
+                    <box />
+                }
+
+                endWidget={
+                    <box
+                        halign={Gtk.Align.START}
+                        children={[
+                            <SysTray />
+                        ]}
+                    />
+                }
+            />
+        }
+    />
+}

home/modules/1_deprecated/ags/config/widget/SysTray.tsx

@@ -0,0 +1,40 @@
+import { Variable, bind } from "astal";
+import { Gtk } from "astal/gtk4"
+import AstalTray from "gi://AstalTray";
+
+export function SysTray() {
+    const tray = AstalTray.get_default()
+
+    const trayIcons = Variable.derive(
+        [bind(tray, "items")],
+        (items) => {
+            return items.map((item) => {
+                return (
+                    <menubutton
+                        item={item}
+                        child={
+                            <image gicon={bind(item, "gicon")} />
+                        }
+                    />
+                );
+            });
+        },
+    );
+
+    return <box
+        cssClasses={["SysTray"]}
+        children={
+            bind(tray, "items").as(items => items.map(item => (
+                <menubutton
+                    tooltipMarkup={bind(item, "tooltipMarkup")}
+                    usePopover={false}
+                    actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])}
+                    menuModel={bind(item, "menuModel")}
+                    child={
+                        <image gicon={bind(item, "gicon")} />
+                    }
+                />
+            )))
+        }
+    />
+}