feat(agsV2): add systray

nixosModules/ags/v2/widgets/bar/items/current-client.tsx

@@ -16,7 +16,7 @@ export default () => {
     let lastFocused: string | undefined;
 
     const updateVars = (
-        client: AstalHyprland.Client | null | undefined = Hyprland.get_focused_client(),
+        client: AstalHyprland.Client | null = Hyprland.get_focused_client(),
     ) => {
         lastFocused = client?.get_address();
         const app = Applications.query(

nixosModules/ags/v2/widgets/bar/items/tray.tsx

@@ -0,0 +1,77 @@
+import { App, bind, Gdk, Gtk, idle, Widget } from 'astal';
+
+import AstalTray from 'gi://AstalTray';
+const Tray = AstalTray.get_default();
+
+
+const SKIP_ITEMS = ['.spotify-wrapped'];
+
+const TrayItem = (item: AstalTray.TrayItem) => {
+    if (item.iconThemePath) {
+        App.add_icons(item.iconThemePath);
+    }
+
+    const menu = item.create_menu();
+
+    return (
+        <revealer
+            transitionType={Gtk.RevealerTransitionType.SLIDE_RIGHT}
+            revealChild={false}
+        >
+            <button
+                className="tray-item"
+                cursor="pointer"
+                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>
+        </revealer>
+    );
+};
+
+export default () => {
+    const itemMap = new Map<string, Widget.Revealer>();
+
+    return (
+        <box
+            className="bar-item system-tray"
+            visible={bind(Tray, 'items').as((items) => items.length !== 0)}
+            setup={(self) => {
+                self
+                    .hook(Tray, 'item-added', (_, item: string) => {
+                        if (itemMap.has(item) || SKIP_ITEMS.includes(Tray.get_item(item).title)) {
+                            return;
+                        }
+
+                        const widget = TrayItem(Tray.get_item(item)) as Widget.Revealer;
+
+                        itemMap.set(item, widget);
+
+                        self.add(widget);
+
+                        idle(() => {
+                            widget.set_reveal_child(true);
+                        });
+                    })
+
+                    .hook(Tray, 'item-removed', (_, item: string) => {
+                        if (!itemMap.has(item)) {
+                            return;
+                        }
+
+                        const widget = itemMap.get(item);
+
+                        widget?.set_reveal_child(false);
+
+                        setTimeout(() => {
+                            widget?.destroy();
+                        }, 1000);
+                    });
+            }}
+        />
+    );
+};

nixosModules/ags/v2/widgets/bar/style.scss

@@ -1,4 +1,6 @@
 .bar {
+    margin-bottom: 13px;
+
     .bar-item {
         padding: 5px 10px 5px 10px;
         border-radius: 7px;
@@ -6,7 +8,7 @@
         font-size: 20px;
         min-height: 35px;
 
-        .battery icon {
+        &.battery icon {
             &.charging {
                 color: green;
             }
@@ -42,5 +44,19 @@
                 transition: margin-left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
             }
         }
+
+        &.system-tray {
+            .tray-item {
+                all: unset;
+                font-size: 30px;
+                min-width: 36px;
+                border-radius: 100%;
+                transition: background-color 300ms;
+
+                &:hover {
+                    background: $window_bg_color;
+                }
+            }
+        }
     }
 }

nixosModules/ags/v2/widgets/bar/wim.tsx

@@ -3,6 +3,7 @@ import { Astal, Gtk } from 'astal';
 import Battery from './items/battery';
 import Clock from './items/clock';
 import CurrentClient from './items/current-client';
+import SysTray from './items/tray';
 import Workspaces from './items/workspaces';
 
 import BarRevealer from './fullscreen';
@@ -24,7 +25,13 @@ export default () => (
 
                 <Separator size={8} />
 
+                <SysTray />
+
+                <Separator size={8} />
+
                 <CurrentClient />
+
+                <Separator size={8} />
             </box>
 
             <box>