feat(ags osk): add excl button and cap slide up anim

nixosModules/ags/config/configurations/wim.ts

@@ -46,10 +46,6 @@ export default () => {
                 popup_osd(request.replace('popup ', ''));
                 respond('osd popped up');
             }
-            else if (request.startsWith('osk')) {
-                console.log(`TODO: ${request.replace('osk ', '')}`);
-                respond('implement this');
-            }
         },
 
         main: () => {

nixosModules/ags/config/style/main.scss

@@ -7,7 +7,7 @@
 @use '../widgets/icon-browser';
 @use '../widgets/misc';
 @use '../widgets/notifs';
+@use '../widgets/on-screen-display';
 @use '../widgets/on-screen-keyboard';
-@use '../widgets/osd';
 @use '../widgets/powermenu';
 @use '../widgets/screenshot';

nixosModules/ags/config/widgets/on-screen-keyboard/_index.scss

@@ -1,6 +1,21 @@
 @use 'sass:color';
 @use '../../style/colors';
 
+.settings {
+    padding: 0.5rem;
+
+    .button {
+        background-color: colors.$window_bg_color;
+        border: 0.1rem solid color.adjust(colors.$window_bg_color, $lightness: -3%);
+        border-radius: 0.7rem;
+        padding: 0.3rem;
+
+        &.toggled {
+            background-color: colors.$accent-color;
+        }
+    }
+}
+
 .osk {
     padding-top: 4px;
     border-radius: 10px 10px 0;

nixosModules/ags/config/widgets/on-screen-keyboard/gesture.ts

@@ -85,9 +85,16 @@ export default (window: OskWindow) => {
                         return;
                     }
 
-                    window.get_child().css = `
+                    if (offset > HIDDEN_MARGIN) {
-                        margin-bottom: ${offset - HIDDEN_MARGIN}px;
+                        window.get_child().css = `
-                    `;
+                            margin-bottom: 0px;
+                        `;
+                    }
+                    else {
+                        window.get_child().css = `
+                            margin-bottom: ${offset - HIDDEN_MARGIN}px;
+                        `;
+                    }
                 });
             }),
         );

nixosModules/ags/config/widgets/on-screen-keyboard/keyboard.tsx

@@ -1,4 +1,5 @@
-import { Gtk, Widget } from 'astal/gtk3';
+import { Astal, astalify, Gtk, type ConstructProps, Widget } from 'astal/gtk3';
+import { register } from 'astal/gobject';
 
 import Separator from '../misc/separator';
 
@@ -6,15 +7,26 @@ import Key from './keys';
 
 import { defaultOskLayout, oskLayouts } from './keyboard-layouts';
 
+
 const keyboardLayout = defaultOskLayout;
 const keyboardJson = oskLayouts[keyboardLayout];
 
+@register()
+class ToggleButton extends astalify(Gtk.ToggleButton) {
+    constructor(props: ConstructProps<
+        ToggleButton,
+        Gtk.ToggleButton.ConstructorProps
+    >) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        super(props as any);
+    }
+}
 
 const L_KEY_PER_ROW = [8, 7, 6, 6, 6, 4]; // eslint-disable-line
 const COLOR = 'rgba(0, 0, 0, 0.3)';
 const SPACING = 4;
 
-export default (): Widget.Box => (
+export default () => (
     <box vertical>
         <centerbox
             css={`background: ${COLOR};`}
@@ -51,8 +63,39 @@ export default (): Widget.Box => (
 
             <box
                 halign={Gtk.Align.CENTER}
-                valign={Gtk.Align.CENTER}
+                valign={Gtk.Align.END}
             >
+                <box
+                    halign={Gtk.Align.CENTER}
+                    className="settings"
+                >
+                    <ToggleButton
+                        className="button"
+                        cursor="pointer"
+                        active
+                        valign={Gtk.Align.CENTER}
+
+                        onToggled={(self) => {
+                            self.toggleClassName(
+                                'toggled',
+                                self.get_active(),
+                            );
+
+                            if (self.get_toplevel() === self) {
+                                return;
+                            }
+
+                            (self.get_toplevel() as Widget.Window | undefined)
+                                ?.set_exclusivity(
+                                    self.get_active() ?
+                                        Astal.Exclusivity.EXCLUSIVE :
+                                        Astal.Exclusivity.NORMAL,
+                                );
+                        }}
+                    >
+                        Exclusive
+                    </ToggleButton>
+                </box>
             </box>
 
             <box
@@ -71,7 +114,6 @@ export default (): Widget.Box => (
 
                     return (
                         <box vertical>
-
                             <box
                                 halign={Gtk.Align.END}
                                 className="row"