ags: Add keyboard layout widget

home-manager/modules/ags/style.scss

@@ -56,6 +56,8 @@ window.Bar {
         }
     }
 
+    .Layout.en { color: $accent; }
+
     .SysTray button {
         all: unset;
         padding: 8px;
@@ -89,7 +91,7 @@ window.Bar {
 
     .AudioSlider icon { margin-left: 8px; }
 
-    .Workspaces, .Media, .SysTray, .AudioSlider, .Time {
+    .Workspaces, .Layout, .Media, .SysTray, .AudioSlider, .Time {
         @extend %item;
     }
 }

home-manager/modules/ags/widget/Bar.tsx

@@ -5,6 +5,7 @@ import Time         from "./elements/Time"
 import Wifi         from "./elements/Wifi"
 import Audio        from "./elements/Audio"
 import Media        from "./elements/Media"
+import Layout       from "./elements/Keyboard"
 import SysTray      from "./elements/SysTray"
 import Workspaces   from "./elements/Workspaces"
 import BatteryLevel from "./elements/Battery"
@@ -21,6 +22,7 @@ export default function Bar(monitor: Gdk.Monitor) {
         <centerbox className="Container">
             <box hexpand halign={Gtk.Align.START}>
                 <Workspaces />
+                <Layout />
             </box>
             <box>
                 <Media />

home-manager/modules/ags/widget/elements/Keyboard.tsx

@@ -0,0 +1,12 @@
+import { Variable, bind } from "astal"
+import Hyprland from "gi://AstalHyprland"
+
+export default function Layout() {
+    const hl = Hyprland.get_default();
+    let layout = Variable("en");
+    hl.connect("keyboard-layout", (_, __, l) => { layout.set(`${l}`.slice(0, 2).toLowerCase()) })
+
+    return <box className={bind(layout).as((l) => `Layout ${l}`)}>
+        <label label={bind(layout)}/>
+    </box>
+}