Add ags system tray

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

users/configs/ags/config/eslint.config.js

@@ -65,29 +65,39 @@ export default [
       '@typescript-eslint/no-misused-promises': ['error', {
         checksVoidReturn: false,
       }],
-
-      '@typescript-eslint/naming-convention': ['error', {
-        selector: 'default',
-        format: ['camelCase'],
-      }, {
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          selector: 'default',
+          format: ['camelCase'],
+          leadingUnderscore: 'allowSingleOrDouble',
+        },
+        {
           selector: 'variableLike',
           format: ['camelCase', 'PascalCase'],
-        }, {
+          leadingUnderscore: 'allowSingleOrDouble',
+        },
+        {
           selector: 'memberLike',
           format: ['camelCase'],
-        }, {
+        },
+        {
           selector: 'typeLike',
           format: ['PascalCase'],
-        }, {
+        },
+        {
           selector: 'property',
           format: ['snake_case'],
-        }, {
+        },
+        {
           selector: 'method',
           format: ['camelCase'],
-        }, {
+        },
+        {
           selector: ['enumMember', 'enum'],
           format: ['UPPER_CASE'],
-        }],
+        }
+      ],
 
       'unicorn/empty-brace-spaces': 'off',
       'unicorn/expiring-todo-comments': 'off',

users/configs/ags/config/src/widgets/bar/bar.ts

@@ -2,6 +2,7 @@ import gap from './gap/gap';
 import launcher from './launcher/launcher';
 import workspace from './workspace/workspace';
 import date from './date/date';
+import systray from './systray/systray';
 
 export default (monitor: number) => Widget.Window({
   monitor,
@@ -11,26 +12,28 @@ export default (monitor: number) => Widget.Window({
   anchor: ['top', 'right', 'left'],
   child: Widget.CenterBox({
     class_name: 'widgets',
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    startWidget: Widget.Box({
+    start_widget: Widget.Box({
       hexpand: true,
+      hpack: 'start',
       children: [
         launcher(),
         gap(),
         workspace(),
       ],
     }),
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    centerWidget: Widget.Box({
+    center_widget: Widget.Box({
+      hexpand: true,
       hpack: 'center',
       children: [
         date(),
       ],
     }),
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    endWidget: Widget.Box({
+    end_widget: Widget.Box({
       hexpand: true,
-      children: [],
+      hpack: 'end',
+      children: [
+        systray(),
+      ],
     }),
   }),
 });

users/configs/ags/config/src/widgets/bar/clipboard/clipboard.ts

@@ -1,10 +1,10 @@
 const icon = () => Widget.Icon({
   class_name: 'icon',
-  icon: "edit-paste-symbolic",
+  icon: 'edit-paste-symbolic',
 });
 
 export default () => Widget.EventBox({
   class_name: 'clipboard',
-  on_primary_click: () => Utils.execAsync('bash -c "cliphist list | rofi -cache-dir $XDG_CACHE_HOME/rofi -dmenu -display-columns 2 | cliphist decode | wl-copy"'),
   child: icon(),
+  onPrimaryClick: () => Utils.execAsync('bash -c "cliphist list | rofi -cache-dir $XDG_CACHE_HOME/rofi -dmenu -display-columns 2 | cliphist decode | wl-copy"'),
 });

users/configs/ags/config/src/widgets/bar/launcher/launcher.ts

@@ -1,10 +1,10 @@
 const icon = () => Widget.Icon({
   class_name: 'icon',
-  icon: "nix-snowflake-symbolic",
+  icon: 'nix-snowflake-symbolic',
 });
 
 export default () => Widget.EventBox({
   class_name: 'launcher',
-  on_primary_click: () => Utils.execAsync('bash -c "rofi -cache-dir $XDG_CACHE_HOME/rofi -show drun"'),
   child: icon(),
+  onPrimaryClick: () => Utils.execAsync('bash -c "rofi -cache-dir $XDG_CACHE_HOME/rofi -show drun"'),
 });

users/configs/ags/config/src/widgets/bar/systray/systray.ts

@@ -0,0 +1,16 @@
+import gdk from 'gi://Gdk';
+
+const systemtray = await Service.import('systemtray');
+
+const systrayItem = item => Widget.EventBox({
+  class_name: 'item',
+  tooltip_markup: item.bind('tooltip_markup'),
+  child: Widget.Icon({ class_name: 'icon' }).bind('icon', item, 'icon'),
+  onPrimaryClick: (_, event: gdk.Event) => item.activate(event),
+  onSecondaryClick: (_, event: gdk.Event) => item.openMenu(event),
+});
+
+export default () => Widget.Box({
+  class_name: 'systray',
+  children: systemtray.bind('items').as(i => i.map(systrayItem))
+});

users/configs/ags/config/src/widgets/bar/workspace/workspace.ts

@@ -6,7 +6,7 @@ const dispatch = ws => hyprland.messageAsync(`dispatch workspace ${ws}`);
 const workspaceButton = (i: number) => Widget.Label({
   class_name: 'button',
   attribute: i,
-  vpack: "center",
+  vpack: 'center',
   setup: self => self.hook(hyprland, () => {
     self.toggleClassName('active', hyprland.active.workspace.id === i);
     self.toggleClassName('occupied', (hyprland.getWorkspace(i)?.windows || 0) > 0);

users/configs/ags/default.nix

@@ -1,4 +1,4 @@
-{ user ? throw "user argument is required" }: { config, lib, pkgs, ... }:
+{ user ? throw "user argument is required" }: { config, lib, pkgs, inputs, ... }:
 
 let
   hmConfig = config.home-manager.users.${user.name};
@@ -6,7 +6,9 @@ let
 in
 {
   home-manager.users.${user.name} = {
-    home.packages = with pkgs; [ ags ];
+    imports = [ inputs.ags.homeManagerModules.default ];
+
+    programs.ags.enable = true;
 
     xdg.configFile.ags = {
       source = "${agsConfig}/share/config.js";
@@ -21,13 +23,14 @@ in
     wayland.windowManager.hyprland.initExtraConfig = "${lib.meta.getExe (pkgs.writeShellApplication {
       name = "init-ags";
       runtimeInputs = with pkgs; [
-        ags
+        inputs.ags.packages.${stdenv.hostPlatform.system}.default
         sassc
         hyprland
         nixos-icons
         rofi-wayland
         wl-clipboard
         cliphist
+        libdbusmenu-gtk3
       ];
       text = "ags &> /tmp/ags.log";
     })} &";

users/configs/ags/theme.sass

@@ -63,3 +63,12 @@
         font-family: {{custom.font_sans_serif_all}}
         font-weight: 500
         margin: 0 .5 * {{custom.padding}}pt
+
+    .systray
+      .item
+        @include interactive
+
+        .icon
+          font-size: {{custom.font_size}}pt
+          padding: 0 .3 * {{custom.padding}}pt
+          color: {{colors.on_surface.default.hex}}