ags: setup example bar

flake.lock

@@ -2,15 +2,15 @@
   "nodes": {
     "ags": {
       "inputs": {
-        "nixpkgs": "nixpkgs",
+        "astal": "astal",
-        "systems": "systems"
+        "nixpkgs": "nixpkgs"
       },
       "locked": {
-        "lastModified": 1728326430,
+        "lastModified": 1731590200,
-        "narHash": "sha256-tV1ABHuA1HItMdCTuNdA8fMB+qw7LpjvI945VwMSABI=",
+        "narHash": "sha256-fLJNq7MWHP3pSSa4kxZ4fz+Mw0THT+dGqnJyGY5Gb1Y=",
         "owner": "Aylur",
         "repo": "ags",
-        "rev": "60180a184cfb32b61a1d871c058b31a3b9b0743d",
+        "rev": "d8c2748d231464f40e62bafbdc87298b566aa026",
         "type": "github"
       },
       "original": {
@@ -19,6 +19,27 @@
         "type": "github"
       }
     },
+    "astal": {
+      "inputs": {
+        "nixpkgs": [
+          "ags",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1731533099,
+        "narHash": "sha256-q0JcigMAoz3bJqCJwms5mR2de5J1Cw5NgjCev+2ylDA=",
+        "owner": "aylur",
+        "repo": "astal",
+        "rev": "f7cfc8eb77a395373bf40f83b0d779ece34a6108",
+        "type": "github"
+      },
+      "original": {
+        "owner": "aylur",
+        "repo": "astal",
+        "type": "github"
+      }
+    },
     "base16": {
       "inputs": {
         "fromYaml": "fromYaml"
@@ -119,7 +140,7 @@
     },
     "flake-utils": {
       "inputs": {
-        "systems": "systems_2"
+        "systems": "systems"
       },
       "locked": {
         "lastModified": 1710146030,
@@ -196,11 +217,11 @@
         ]
       },
       "locked": {
-        "lastModified": 1731235328,
+        "lastModified": 1731604581,
-        "narHash": "sha256-NjavpgE9/bMe/ABvZpyHIUeYF1mqR5lhaep3wB79ucs=",
+        "narHash": "sha256-Qq2YZZaDTB3FZLWU/Hgh1uuWlUBl3cMLGB99bm7rFUM=",
         "owner": "nix-community",
         "repo": "home-manager",
-        "rev": "60bb110917844d354f3c18e05450606a435d2d10",
+        "rev": "1d0862ee2d7c6f6cd720d6f32213fa425004be10",
         "type": "github"
       },
       "original": {
@@ -219,11 +240,11 @@
         "xwayland-satellite-unstable": "xwayland-satellite-unstable"
       },
       "locked": {
-        "lastModified": 1731397402,
+        "lastModified": 1731577605,
-        "narHash": "sha256-oK3BrUc6EXl/06VYAJVHCvUHABaxeUER4l+fraZf3+g=",
+        "narHash": "sha256-gT7+CbsPtNQXHL32Z4fUZinlVWZSgW87qFty9HMsFN4=",
         "owner": "sodiboo",
         "repo": "niri-flake",
-        "rev": "19211cda822834ce06e47cc9afd231d6aa20b665",
+        "rev": "9bd436676472da23fefe06fb07fbb8ff7574a8f3",
         "type": "github"
       },
       "original": {
@@ -252,11 +273,11 @@
     "niri-unstable": {
       "flake": false,
       "locked": {
-        "lastModified": 1731395501,
+        "lastModified": 1731575130,
-        "narHash": "sha256-Rvm4tj+Pl7UL8CLx+E0TQjGV1dKGyrizb2uzUSxtpVk=",
+        "narHash": "sha256-V+bIsYXshtdMv7Ycw1Y/xVfKdWVywXuqHHII7FgV6dg=",
         "owner": "YaLTeR",
         "repo": "niri",
-        "rev": "c2c415d2e8ab6f3cbe3a0efd5de727d47f7c9aca",
+        "rev": "1a0612cbfd0abee0796efa86470226686ae78f21",
         "type": "github"
       },
       "original": {
@@ -272,11 +293,11 @@
         "nixpkgs": "nixpkgs_3"
       },
       "locked": {
-        "lastModified": 1731375910,
+        "lastModified": 1731548914,
-        "narHash": "sha256-LSzQ2lj0Tt663NYNEo4R+Mh173zdi/FS0N5L9wYQv4w=",
+        "narHash": "sha256-UtYkHq8OdZcz2Q/r7gh+3HFGVgX9AFfYDrMjAVO6sj4=",
         "owner": "nix-community",
         "repo": "nix-vscode-extensions",
-        "rev": "db33a1df899d08e12160bc836d34d309d6ca372b",
+        "rev": "00e11784c89ecd236ff045acd7a447e0fe5b80df",
         "type": "github"
       },
       "original": {
@@ -287,15 +308,15 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1725634671,
+        "lastModified": 1731139594,
-        "narHash": "sha256-v3rIhsJBOMLR8e/RNWxr828tB+WywYIoajrZKFM+0Gg=",
+        "narHash": "sha256-IigrKK3vYRpUu+HEjPL/phrfh7Ox881er1UEsZvw9Q4=",
-        "owner": "NixOS",
+        "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "574d1eac1c200690e27b8eb4e24887f8df7ac27c",
+        "rev": "76612b17c0ce71689921ca12d9ffdc9c23ce40b2",
         "type": "github"
       },
       "original": {
-        "owner": "NixOS",
+        "owner": "nixos",
         "ref": "nixos-unstable",
         "repo": "nixpkgs",
         "type": "github"
@@ -303,11 +324,11 @@
     },
     "nixpkgs-stable": {
       "locked": {
-        "lastModified": 1731239293,
+        "lastModified": 1731386116,
-        "narHash": "sha256-q2yjIWFFcTzp5REWQUOU9L6kHdCDmFDpqeix86SOvDc=",
+        "narHash": "sha256-lKA770aUmjPHdTaJWnP3yQ9OI1TigenUqVC3wweqZuI=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "9256f7c71a195ebe7a218043d9f93390d49e6884",
+        "rev": "689fed12a013f56d4c4d3f612489634267d86529",
         "type": "github"
       },
       "original": {
@@ -319,11 +340,11 @@
     },
     "nixpkgs_2": {
       "locked": {
-        "lastModified": 1731139594,
+        "lastModified": 1731319897,
-        "narHash": "sha256-IigrKK3vYRpUu+HEjPL/phrfh7Ox881er1UEsZvw9Q4=",
+        "narHash": "sha256-PbABj4tnbWFMfBp6OcUK5iGy1QY+/Z96ZcLpooIbuEI=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "76612b17c0ce71689921ca12d9ffdc9c23ce40b2",
+        "rev": "dc460ec76cbff0e66e269457d7b728432263166c",
         "type": "github"
       },
       "original": {
@@ -351,11 +372,11 @@
     },
     "nixpkgs_4": {
       "locked": {
-        "lastModified": 1731139594,
+        "lastModified": 1731319897,
-        "narHash": "sha256-IigrKK3vYRpUu+HEjPL/phrfh7Ox881er1UEsZvw9Q4=",
+        "narHash": "sha256-PbABj4tnbWFMfBp6OcUK5iGy1QY+/Z96ZcLpooIbuEI=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "76612b17c0ce71689921ca12d9ffdc9c23ce40b2",
+        "rev": "dc460ec76cbff0e66e269457d7b728432263166c",
         "type": "github"
       },
       "original": {
@@ -390,17 +411,17 @@
         "nixpkgs": [
           "nixpkgs"
         ],
-        "systems": "systems_3",
+        "systems": "systems_2",
         "tinted-foot": "tinted-foot",
         "tinted-kitty": "tinted-kitty",
         "tinted-tmux": "tinted-tmux"
       },
       "locked": {
-        "lastModified": 1731090365,
+        "lastModified": 1731577695,
-        "narHash": "sha256-ti3gXhgVpIUL/7w6zDJuH+hOnyTZqxrIX/yYqALmiEI=",
+        "narHash": "sha256-ohxX2gG7zDWIA3slEbiSyAVSiO98clCoL+CmiEiYwVU=",
         "owner": "danth",
         "repo": "stylix",
-        "rev": "6863412636c8f2cb3b7360f747fbd020fbfddf68",
+        "rev": "e0a278871b63b1800ccdda568861b5324dd93797",
         "type": "github"
       },
       "original": {
@@ -410,21 +431,6 @@
       }
     },
     "systems": {
-      "locked": {
-        "lastModified": 1689347949,
-        "narHash": "sha256-12tWmuL2zgBgZkdoB6qXZsgJEH9LR3oUgpaQq2RbI80=",
-        "owner": "nix-systems",
-        "repo": "default-linux",
-        "rev": "31732fcf5e8fea42e59c2488ad31a0e651500f68",
-        "type": "github"
-      },
-      "original": {
-        "owner": "nix-systems",
-        "repo": "default-linux",
-        "type": "github"
-      }
-    },
-    "systems_2": {
       "locked": {
         "lastModified": 1681028828,
         "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
@@ -439,7 +445,7 @@
         "type": "github"
       }
     },
-    "systems_3": {
+    "systems_2": {
       "locked": {
         "lastModified": 1681028828,
         "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",

homeManagerModules/niri/ags.nix

@@ -1,13 +0,0 @@
-{ pkgs, ... }:
-{
-  programs.ags = {
-    enable = true;
-
-    # additional packages to add to gjs's runtime
-    extraPackages = with pkgs; [
-      gtksourceview
-      webkitgtk
-      accountsservice
-    ];
-  };
-}

homeManagerModules/niri/ags/.gitignore

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

homeManagerModules/niri/ags/ags.nix

@@ -0,0 +1,26 @@
+{ inputs, pkgs, ... }:
+{
+  programs.ags = {
+    enable = true;
+
+    configDir = ../ags;
+
+    # additional packages to add to gjs's runtime
+    extraPackages = [
+      inputs.ags.packages.${pkgs.system}.battery
+      inputs.ags.packages.${pkgs.system}.mpris
+      inputs.ags.packages.${pkgs.system}.wireplumber
+      inputs.ags.packages.${pkgs.system}.network
+      inputs.ags.packages.${pkgs.system}.tray
+    ];
+  };
+
+  home.packages = [
+    inputs.ags.packages.${pkgs.system}.io
+    inputs.ags.packages.${pkgs.system}.battery
+    inputs.ags.packages.${pkgs.system}.mpris
+    inputs.ags.packages.${pkgs.system}.wireplumber
+    inputs.ags.packages.${pkgs.system}.network
+    inputs.ags.packages.${pkgs.system}.tray
+  ];
+}

homeManagerModules/niri/ags/app.ts

@@ -0,0 +1,13 @@
+import { App } from "astal/gtk3";
+import style from "./style.scss";
+import Bar from "./widget/Bar";
+
+App.start({
+    css: style,
+    instanceName: "js",
+    requestHandler(request, res) {
+        print(request);
+        res("ok");
+    },
+    main: () => App.get_monitors().map(Bar),
+});

homeManagerModules/niri/ags/env.d.ts

@@ -0,0 +1,21 @@
+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;
+}

homeManagerModules/niri/ags/style.scss

@@ -0,0 +1,88 @@
+$bg: #212223;
+$fg: #f1f1f1;
+$accent: #378DF7;
+$radius: 7px;
+
+window.Bar {
+    border: none;
+    box-shadow: none;
+    background-color: $bg;
+    color: $fg;
+    font-size: 1.1em;
+    font-weight: bold;
+
+    button {
+        all: unset;
+        background-color: transparent;
+
+        &:hover label {
+            background-color: transparentize($fg, 0.84);
+            border-color: transparentize($accent, 0.8);
+        }
+
+        &:active label {
+            background-color: transparentize($fg, 0.8)
+        }
+    }
+
+    label {
+        transition: 200ms;
+        padding: 0 8px;
+        margin: 2px;
+        border-radius: $radius;
+        border: 1pt solid transparent;
+    }
+
+    .Workspaces .focused label {
+        color: $accent;
+        border-color: $accent;
+    }
+
+    .FocusedClient {
+        color: $accent;
+    }
+
+    .Media .Cover {
+        min-height: 1.2em;
+        min-width: 1.2em;
+        border-radius: $radius;
+        background-position: center;
+        background-size: contain;
+    }
+
+    .Battery label {
+        padding-left: 0;
+        margin-left: 0;
+    }
+
+    .AudioSlider {
+        * {
+            all: unset;
+        }
+
+        icon {
+            margin-right: .6em;
+        }
+
+        margin: 0 1em;
+
+        trough {
+            background-color: transparentize($fg, 0.8);
+            border-radius: $radius;
+        }
+
+        highlight {
+            background-color: $accent;
+            min-height: .8em;
+            border-radius: $radius;
+        }
+
+        slider {
+            background-color: $fg;
+            border-radius: $radius;
+            min-height: 1em;
+            min-width: 1em;
+            margin: -.2em;
+        }
+    }
+}

homeManagerModules/niri/ags/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "$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": "/home/fedfer/.local/share/ags/gtk3",
+        "paths": {
+            "astal": [
+                "/home/fedfer/.local/share/ags"
+            ],
+            "astal/*": [
+                "/home/fedfer/.local/share/ags/*"
+            ]
+        },
+    }
+}

homeManagerModules/niri/ags/widget/Bar.tsx

@@ -0,0 +1,128 @@
+import { App } from "astal/gtk3";
+import { Variable, GLib, bind } from "astal";
+import { Astal, Gtk, Gdk } from "astal/gtk3";
+import Mpris from "gi://AstalMpris";
+import Battery from "gi://AstalBattery";
+import Wp from "gi://AstalWp";
+import Network from "gi://AstalNetwork";
+import Tray from "gi://AstalTray";
+
+function SysTray() {
+    const tray = Tray.get_default();
+
+    return <box>
+        {bind(tray, "items").as(items => items.map(item => {
+            if (item.iconThemePath)
+                App.add_icons(item.iconThemePath);
+
+            const menu = item.create_menu();
+
+            return <button
+                tooltipMarkup={bind(item, "tooltipMarkup")}
+                onDestroy={() => menu?.destroy()}
+                onClickRelease={self => {
+                    menu?.popup_at_widget(self, Gdk.Gravity.SOUTH, Gdk.Gravity.NORTH, null);
+                }}>
+                <icon gIcon={bind(item, "gicon")} />
+            </button>;
+        }))}
+    </box>;
+}
+
+function Wifi() {
+    const { wifi } = Network.get_default();
+
+    return <icon
+        tooltipText={bind(wifi, "ssid").as(String)}
+        className="Wifi"
+        icon={bind(wifi, "iconName")}
+    />;
+}
+
+function AudioSlider() {
+    const speaker = Wp.get_default()?.audio.defaultSpeaker!;
+
+    return <box className="AudioSlider" css="min-width: 140px">
+        <icon icon={bind(speaker, "volumeIcon")} />
+        <slider
+            hexpand
+            onDragged={({ value }) => speaker.volume = value}
+            value={bind(speaker, "volume")}
+        />
+    </box>;
+}
+
+function BatteryLevel() {
+    const bat = Battery.get_default();
+
+    return <box className="Battery"
+        visible={bind(bat, "isPresent")}>
+        <icon icon={bind(bat, "batteryIconName")} />
+        <label label={bind(bat, "percentage").as(p =>
+            `${Math.floor(p * 100)} %`
+        )} />
+    </box>;
+}
+
+function Media() {
+    const mpris = Mpris.get_default();
+
+    return <box className="Media">
+        {bind(mpris, "players").as(ps => ps[0] ? (
+            <box>
+                <box
+                    className="Cover"
+                    valign={Gtk.Align.CENTER}
+                    css={bind(ps[0], "coverArt").as(cover =>
+                        `background-image: url('${cover}');`
+                    )}
+                />
+                <label
+                    label={bind(ps[0], "title").as(() =>
+                        `${ps[0].title} - ${ps[0].artist}`
+                    )}
+                />
+            </box>
+        ) : (
+            "Nothing Playing"
+        ))}
+    </box>;
+}
+
+function Time({ format = "%H:%M - %A %e." }) {
+    const time = Variable<string>("").poll(1000, () =>
+        GLib.DateTime.new_now_local().format(format)!);
+
+    return <label
+        className="Time"
+        onDestroy={() => time.drop()}
+        label={time()}
+    />;
+}
+
+export default function Bar(monitor: Gdk.Monitor) {
+    const anchor = Astal.WindowAnchor.TOP
+        | Astal.WindowAnchor.LEFT
+        | Astal.WindowAnchor.RIGHT;
+
+    return <window
+        className="Bar"
+        gdkmonitor={monitor}
+        exclusivity={Astal.Exclusivity.EXCLUSIVE}
+        anchor={anchor}>
+        <centerbox>
+            <box hexpand halign={Gtk.Align.START}>
+            </box>
+            <box>
+                <Media />
+            </box>
+            <box hexpand halign={Gtk.Align.END} >
+                <SysTray />
+                <Wifi />
+                <AudioSlider />
+                <BatteryLevel />
+                <Time />
+            </box>
+        </centerbox>
+    </window>;
+}

homeManagerModules/niri/niri.nix

@@ -1,6 +1,6 @@
 { pkgs, ... }:
 {
-  imports = [ ./ags.nix ];
+  imports = [ ./ags/ags.nix ];
 
   services.mako = {
     enable = true;