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

home/modules/1_deprecated/ags/default.nix

@@ -0,0 +1,130 @@
+{
+  inputs,
+  config,
+  lib,
+  mylib,
+  pkgs,
+  ...
+}: let
+  inherit (config.modules) ags;
+in {
+  options.modules.ags = import ./options.nix {inherit lib mylib;};
+
+  config = lib.mkIf ags.enable {
+    programs.ags = {
+      enable = true;
+      systemd.enable = false; # Currently only supports GTK3, use own service below
+
+      # AGS libs go here
+      extraPackages = [
+        inputs.ags.packages.${pkgs.system}.apps
+        inputs.ags.packages.${pkgs.system}.auth
+        inputs.ags.packages.${pkgs.system}.battery
+        inputs.ags.packages.${pkgs.system}.bluetooth
+        inputs.ags.packages.${pkgs.system}.cava
+        # inputs.ags.packages.${pkgs.system}.greet
+        inputs.ags.packages.${pkgs.system}.hyprland
+        inputs.ags.packages.${pkgs.system}.mpris
+        inputs.ags.packages.${pkgs.system}.network
+        inputs.ags.packages.${pkgs.system}.notifd
+        # inputs.ags.packages.${pkgs.system}.powerprofiles
+        # inputs.ags.packages.${pkgs.system}.river
+        inputs.ags.packages.${pkgs.system}.tray
+        inputs.ags.packages.${pkgs.system}.wireplumber
+      ];
+
+      # This should symlink but doesn't, it copies the files :/
+      # configDir = ./config;
+    };
+
+    # The ags module doesn't expose the "astal" cli tool or extraPackages
+    home.packages =
+      [
+        inputs.ags.packages.${pkgs.system}.io
+      ]
+      ++ config.programs.ags.extraPackages;
+
+    systemd.user.services.ags = {
+      Unit = {
+        Description = "AGS - Tool for scaffolding Astal+TypeScript projects.";
+        Documentation = "https://github.com/Aylur/ags";
+        PartOf = ["graphical-session.target"];
+        After = ["graphical-session-pre.target"];
+      };
+
+      Service = {
+        ExecStart = "${config.programs.ags.finalPackage}/bin/ags run --gtk4";
+        Restart = "on-failure";
+        KillMode = "mixed";
+      };
+
+      Install = {
+        WantedBy = ["graphical-session.target"];
+      };
+    };
+
+    home.file = {
+      # Keep this symlinked as long as I'm configuring (not required anymore since I can start AGS locally)
+      # ".config/ags".source = config.lib.file.mkOutOfStoreSymlink "${config.paths.nixflake}/home/modules/ags/config";
+
+      # NOTE: Don't symlink to ~/.config/ags/colors.scss, since that is already used by configDir
+      ".config/_colors.scss".text = with config.modules.color.hex; ''
+        $dark-rosewater: #${dark.rosewater};
+        $dark-flamingo: #${dark.flamingo};
+        $dark-pink: #${dark.pink};
+        $dark-mauve: #${dark.mauve};
+        $dark-red: #${dark.red};
+        $dark-maroon: #${dark.maroon};
+        $dark-peach: #${dark.peach};
+        $dark-yellow: #${dark.yellow};
+        $dark-green: #${dark.green};
+        $dark-teal: #${dark.teal};
+        $dark-sky: #${dark.sky};
+        $dark-sapphire: #${dark.sapphire};
+        $dark-blue: #${dark.blue};
+        $dark-lavender: #${dark.lavender};
+
+        $dark-text: #${dark.text};
+        $dark-subtext1: #${dark.subtext1};
+        $dark-subtext0: #${dark.subtext0};
+        $dark-overlay2: #${dark.overlay2};
+        $dark-overlay1: #${dark.overlay1};
+        $dark-overlay0: #${dark.overlay0};
+        $dark-surface2: #${dark.surface2};
+        $dark-surface1: #${dark.surface1};
+        $dark-surface0: #${dark.surface0};
+        $dark-base: #${dark.base};
+        $dark-mantle: #${dark.mantle};
+        $dark-crust: #${dark.crust};
+
+        $light-rosewater: #${light.rosewater};
+        $light-flamingo: #${light.flamingo};
+        $light-pink: #${light.pink};
+        $light-mauve: #${light.mauve};
+        $light-red: #${light.red};
+        $light-maroon: #${light.maroon};
+        $light-peach: #${light.peach};
+        $light-yellow: #${light.yellow};
+        $light-green: #${light.green};
+        $light-teal: #${light.teal};
+        $light-sky: #${light.sky};
+        $light-sapphire: #${light.sapphire};
+        $light-blue: #${light.blue};
+        $light-lavender: #${light.lavender};
+
+        $light-text: #${light.text};
+        $light-subtext1: #${light.subtext1};
+        $light-subtext0: #${light.subtext0};
+        $light-overlay2: #${light.overlay2};
+        $light-overlay1: #${light.overlay1};
+        $light-overlay0: #${light.overlay0};
+        $light-surface2: #${light.surface2};
+        $light-surface1: #${light.surface1};
+        $light-surface0: #${light.surface0};
+        $light-base: #${light.base};
+        $light-mantle: #${light.mantle};
+        $light-crust: #${light.crust};
+      '';
+    };
+  };
+}

home/modules/1_deprecated/ags/options.nix

@@ -0,0 +1,9 @@
+{
+  lib,
+  mylib,
+  ...
+}:
+with lib;
+with mylib.modules; {
+  enable = mkEnableOption "Enable Ags Widgets";
+}