Ags: Add starter config

.gitignore

@@ -8,3 +8,5 @@
 result
 
 config/neovim/store
+home/modules/ags/config/types
+home/modules/ags/config/tsconfig.json

home/christoph/default.nix

@@ -33,6 +33,8 @@ rec {
 
   # Enable and configure my custom HM modules.
   modules = {
+    ags.enable = true;
+
     chromium = {
       enable = true;
       google = false;
@@ -170,10 +172,7 @@ rec {
       theme = "Foggy-Lake";
     };
 
-    waybar = {
+    waybar.enable = false;
-      enable = true;
-    };
-
     zathura.enable = true;
   };
 

home/christoph/nixinator/default.nix

@@ -48,7 +48,6 @@
         ];
       };
 
-      # TODO: Also set the dunst monitor
       waybar.monitor = "HDMI-A-1";
     };
 

home/modules/ags/config/config.js

@@ -0,0 +1,202 @@
+const hyprland = await Service.import("hyprland");
+const notifications = await Service.import("notifications");
+const mpris = await Service.import("mpris");
+const audio = await Service.import("audio");
+const battery = await Service.import("battery");
+const systemtray = await Service.import("systemtray");
+
+const date = Variable("", {
+  poll: [1000, 'date "+%H:%M:%S %b %e."'],
+});
+
+// widgets can be only assigned as a child in one container
+// so to make a reuseable widget, make it a function
+// then you can simply instantiate one by calling it
+
+function Workspaces() {
+  const activeId = hyprland.active.workspace.bind("id");
+  const workspaces = hyprland.bind("workspaces").as((ws) =>
+    ws.map(({ id }) =>
+      Widget.Button({
+        on_clicked: () => hyprland.messageAsync(`dispatch workspace ${id}`),
+        child: Widget.Label(`${id}`),
+        class_name: activeId.as((i) => `${i === id ? "focused" : ""}`),
+      }),
+    ),
+  );
+
+  return Widget.Box({
+    class_name: "workspaces",
+    children: workspaces,
+  });
+}
+
+function ClientTitle() {
+  return Widget.Label({
+    class_name: "client-title",
+    label: hyprland.active.client.bind("title"),
+  });
+}
+
+function Clock() {
+  return Widget.Label({
+    class_name: "clock",
+    label: date.bind(),
+  });
+}
+
+// we don't need dunst or any other notification daemon
+// because the Notifications module is a notification daemon itself
+function Notification() {
+  const popups = notifications.bind("popups");
+  return Widget.Box({
+    class_name: "notification",
+    visible: popups.as((p) => p.length > 0),
+    children: [
+      Widget.Icon({
+        icon: "preferences-system-notifications-symbolic",
+      }),
+      Widget.Label({
+        label: popups.as((p) => p[0]?.summary || ""),
+      }),
+    ],
+  });
+}
+
+function Media() {
+  const label = Utils.watch("", mpris, "player-changed", () => {
+    if (mpris.players[0]) {
+      const { track_artists, track_title } = mpris.players[0];
+      return `${track_artists.join(", ")} - ${track_title}`;
+    } else {
+      return "Nothing is playing";
+    }
+  });
+
+  return Widget.Button({
+    class_name: "media",
+    on_primary_click: () => mpris.getPlayer("")?.playPause(),
+    on_scroll_up: () => mpris.getPlayer("")?.next(),
+    on_scroll_down: () => mpris.getPlayer("")?.previous(),
+    child: Widget.Label({ label }),
+  });
+}
+
+function Volume() {
+  const icons = {
+    101: "overamplified",
+    67: "high",
+    34: "medium",
+    1: "low",
+    0: "muted",
+  };
+
+  function getIcon() {
+    const icon = audio.speaker.is_muted
+      ? 0
+      : [101, 67, 34, 1, 0].find(
+          (threshold) => threshold <= audio.speaker.volume * 100,
+        );
+
+    return `audio-volume-${icons[icon]}-symbolic`;
+  }
+
+  const icon = Widget.Icon({
+    icon: Utils.watch(getIcon(), audio.speaker, getIcon),
+  });
+
+  const slider = Widget.Slider({
+    hexpand: true,
+    draw_value: false,
+    on_change: ({ value }) => (audio.speaker.volume = value),
+    setup: (self) =>
+      self.hook(audio.speaker, () => {
+        self.value = audio.speaker.volume || 0;
+      }),
+  });
+
+  return Widget.Box({
+    class_name: "volume",
+    css: "min-width: 180px",
+    children: [icon, slider],
+  });
+}
+
+function BatteryLabel() {
+  const value = battery.bind("percent").as((p) => (p > 0 ? p / 100 : 0));
+  const icon = battery
+    .bind("percent")
+    .as((p) => `battery-level-${Math.floor(p / 10) * 10}-symbolic`);
+
+  return Widget.Box({
+    class_name: "battery",
+    visible: battery.bind("available"),
+    children: [
+      Widget.Icon({ icon }),
+      Widget.LevelBar({
+        widthRequest: 140,
+        vpack: "center",
+        value,
+      }),
+    ],
+  });
+}
+
+function SysTray() {
+  const items = systemtray.bind("items").as((items) =>
+    items.map((item) =>
+      Widget.Button({
+        child: Widget.Icon({ icon: item.bind("icon") }),
+        on_primary_click: (_, event) => item.activate(event),
+        on_secondary_click: (_, event) => item.openMenu(event),
+        tooltip_markup: item.bind("tooltip_markup"),
+      }),
+    ),
+  );
+
+  return Widget.Box({
+    children: items,
+  });
+}
+
+function Left() {
+  return Widget.Box({
+    spacing: 8,
+    children: [Workspaces(), ClientTitle()],
+  });
+}
+
+function Center() {
+  return Widget.Box({
+    spacing: 8,
+    children: [Media(), Notification()],
+  });
+}
+
+function Right() {
+  return Widget.Box({
+    hpack: "end",
+    spacing: 8,
+    children: [Volume(), Clock(), SysTray()],
+  });
+}
+
+function Bar(monitor = 0) {
+  return Widget.Window({
+    name: `bar-${monitor}`,
+    class_name: "ags_bar",
+    monitor,
+    anchor: ["top", "left", "right"],
+    exclusivity: "exclusive",
+    child: Widget.CenterBox({
+      start_widget: Left(),
+      center_widget: Center(),
+      end_widget: Right(),
+    }),
+  });
+}
+
+App.config({
+  style: "./style.css",
+  windows: [Bar(0)],
+});

home/modules/ags/config/style.css

@@ -0,0 +1,40 @@
+window.bar {
+  background-color: @theme_bg_color;
+  color: @theme_fg_color;
+}
+
+button {
+  min-width: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: transparent;
+}
+
+button:active {
+  background-color: @theme_selected_bg_color;
+}
+
+button:hover {
+  border-bottom: 3px solid @theme_fg_color;
+}
+
+label {
+  font-weight: bold;
+}
+
+.workspaces button.focused {
+  border-bottom: 3px solid @theme_selected_bg_color;
+}
+
+.client-title {
+  color: @theme_selected_bg_color;
+}
+
+.notification {
+  color: yellow;
+}
+
+levelbar block,
+highlight {
+  min-height: 10px;
+}

home/modules/ags/default.nix

@@ -2,6 +2,7 @@
   config,
   lib,
   mylib,
+  pkgs,
   ...
 }:
 with lib;
@@ -10,7 +11,20 @@ with mylib.modules; let
 in {
   options.modules.ags = import ./options.nix {inherit lib mylib;};
 
-  config =
+  config = mkIf cfg.enable {
-    mkIf cfg.enable {
+    programs.ags = {
+      enable = true;
+      systemd.enable = true;
+
+      # configDir = ./config;
+    };
+
+    home.file = {
+      # NOTE: Keep this symlinked as long as I'm configuring
+      ".config/ags".source = config.lib.file.mkOutOfStoreSymlink "/home/christoph/NixFlake/home/modules/ags/config";
+
+      # LSP typechecking support
+      # ".config/ags/types".source = config.lib.file.mkOutOfStoreSymlink "${pkgs.ags}/share/com.github.Aylur.ags/types";
+    };
   };
 }

home/modules/default.nix

@@ -3,6 +3,7 @@
     # Obsolete modules are kept in "1_deprecated" for reference.
 
     # My own HM modules
+    ./ags
     ./chromium
     ./color
     ./firefox

home/modules/hyprland/default.nix

@@ -318,6 +318,7 @@ in {
       };
 
       # Notification service
+      # TODO: Allow setting the dunst monitor
       dunst = {
         enable = true;