feat: basic keyboard UI component

src/server/web-client/src/App.svelte

@@ -9,6 +9,7 @@
     import Mouse from "./lib/Mouse.svelte";
     import {Toolbar, ToolbarGroup, DarkMode, Toast} from 'flowbite-svelte';
     import {FireOutline} from "flowbite-svelte-icons";
+    import Keyboard from "./lib/Keyboard.svelte";
 </script>
 
 <main>
@@ -24,6 +25,10 @@
         <Mouse/>
     {/if}
 
+    {#if $selected_device?.type === "KEYBOARD"}
+        <Keyboard/>
+    {/if}
+
     <FetchRequest/>
 </main>
 

src/server/web-client/src/lib/Keyboard.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+
+    import {request, selected_device} from "./stores";
+    import {onDestroy, onMount} from "svelte";
+
+    function keydown(e: KeyboardEvent) {
+        if ($selected_device?.type === "KEYBOARD") {
+            request("/devices/keyboard/" + $selected_device?.device_id + "/press", "POST", {
+                "key": 65 // hardcoded a
+                // TODO: e.key to win32 keycode
+                //   see: https://learn.microsoft.com/en-us/windows/win32/inputdev/virtual-key-codes
+            });
+
+            // TODO: check for shift, ctrl, alt, etc..
+        }
+    }
+
+    function keyup(e: KeyboardEvent) {
+        if ($selected_device?.type === "KEYBOARD") {
+            request("/devices/keyboard/" + $selected_device?.device_id + "/release", "POST", {
+                "key": 65 // hardcoded a
+            })
+        }
+    }
+
+</script>
+
+<input on:keydown={keydown}
+       on:keyup={keyup}>