feat(ags): transfer remaining bar stuff from v1

modules/ags/config/widgets/bar/items/keyboard-layout.tsx

@@ -0,0 +1,87 @@
+import { Variable } from 'astal';
+import { Label } from 'astal/gtk3/widget';
+
+import AstalHyprland from 'gi://AstalHyprland';
+
+import { hyprMessage } from '../../../lib';
+import { Gtk } from 'astal/gtk3';
+
+/* Types */
+interface Keyboard {
+    address: string
+    name: string
+    rules: string
+    model: string
+    layout: string
+    variant: string
+    options: string
+    active_keymap: string
+    main: boolean
+}
+
+
+const DEFAULT_KB = 'at-translated-set-2-keyboard';
+
+export default () => {
+    const Hovered = Variable(false);
+
+    const hyprland = AstalHyprland.get_default();
+
+    const getKbdLayout = (self: Label, _: string, layout?: string) => {
+        if (layout) {
+            if (layout === 'error') {
+                return;
+            }
+
+            const shortName = layout.match(/\(([A-Za-z]+)\)/);
+
+            self.label = shortName ? shortName[1] : layout;
+        }
+        else {
+            // At launch, kb layout is undefined
+            hyprMessage('j/devices').then((obj) => {
+                const keyboards = Array.from(JSON.parse(obj)
+                    .keyboards) as Keyboard[];
+                const kb = keyboards.find((v) => v.name === DEFAULT_KB);
+
+                if (kb) {
+                    layout = kb.active_keymap;
+
+                    const shortName = layout
+                        .match(/\(([A-Za-z]+)\)/);
+
+                    self.label = shortName ? shortName[1] : layout;
+                }
+                else {
+                    self.label = 'None';
+                }
+            }).catch(print);
+        }
+    };
+
+    return (
+        <button
+            className="bar-item keyboard"
+            cursor="pointer"
+
+            onHover={() => Hovered.set(true)}
+            onHoverLost={() => Hovered.set(false)}
+        >
+            <box>
+                <icon icon="input-keyboard-symbolic" />
+
+                <revealer
+                    revealChild={Hovered()}
+                    transitionType={Gtk.RevealerTransitionType.SLIDE_LEFT}
+                >
+                    <label
+                        setup={(self) => {
+                            self.hook(hyprland, 'keyboard-layout', getKbdLayout);
+                            getKbdLayout(self, '');
+                        }}
+                    />
+                </revealer>
+            </box>
+        </button>
+    );
+};