feat(agsV2): add current-client

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

@@ -1,6 +1,6 @@
 import { Astal, bind, Gdk, Gtk, Variable, Widget } from 'astal';
-import AstalHyprland from 'gi://AstalHyprland?version=0.1';
 
+import AstalHyprland from 'gi://AstalHyprland?version=0.1';
 const Hyprland = AstalHyprland.get_default();
 
 import { get_hyprland_monitor_desc, get_monitor_desc } from '../../lib';

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

@@ -7,7 +7,7 @@ import Separator from '../../misc/separator';
 
 
 const LOW_BATT = 20;
-const SPACING = 5;
+const SPACING = 8;
 
 export default () => (
     <box className="bar-item battery">

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

@@ -0,0 +1,48 @@
+import { bind, Widget } from 'astal';
+
+import Pango from 'gi://Pango?version=1.0';
+
+import AstalApps from 'gi://AstalApps?version=0.1';
+const Applications = AstalApps.Apps.new();
+
+import AstalHyprland from 'gi://AstalHyprland?version=0.1';
+const Hyprland = AstalHyprland.get_default();
+
+import Separator from '../../misc/separator';
+
+
+const SPACING = 8;
+
+export default () => {
+    const focused = bind(Hyprland, 'focusedClient');
+
+    return (
+        <box
+            className="bar-item current-window"
+            visible={focused.as(Boolean)}
+        >
+            <icon
+                css="font-size: 32px;"
+                setup={(self: Widget.Icon) => {
+                    self.hook(Hyprland, 'notify::focused-client', () => {
+                        const app = Applications.query(
+                            Hyprland.get_focused_client().get_class(),
+                            false,
+                        )[0];
+
+                        self.set_icon(app.iconName ?? '');
+                    });
+                }}
+            />
+
+            <Separator size={SPACING} />
+
+            {focused.as((client) => (client && (
+                <label
+                    label={bind(client, 'title').as(String)}
+                    truncate={Pango.EllipsizeMode.END}
+                />
+            )))}
+        </box>
+    );
+};

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

@@ -1,6 +1,6 @@
 .bar {
     .bar-item {
-        padding: 5px;
+        padding: 5px 10px 5px 10px;
         border-radius: 7px;
         background-color: darken($window_bg_color, 3%);
         font-size: 20px;

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

@@ -1,8 +1,10 @@
 import { Astal, Gtk } from 'astal';
 
 import Battery from './items/battery';
+import CurrentClient from './items/current-client';
 
 import BarRevealer from './fullscreen';
+import Separator from '../misc/separator';
 
 
 export default () => {
@@ -15,8 +17,10 @@ export default () => {
                 Astal.WindowAnchor.RIGHT
             }
         >
+
             <centerbox className="bar widget">
                 <box hexpand halign={Gtk.Align.START}>
+                    <CurrentClient />
                 </box>
 
                 <box>
@@ -24,8 +28,11 @@ export default () => {
 
                 <box hexpand halign={Gtk.Align.END}>
                     <Battery />
+
+                    <Separator size={2} />
                 </box>
             </centerbox>
+
         </BarRevealer>
     );
 };