fix(ui): Default the keyboardLayout to en-US if not set (#512)

The recent fix to PasteModal will silently fail a paste if the keyboardLayout hasn't been selected in the settings yet, then when you look in Settings it looks like it's set to Belgian, but it's really just blank. Set it to default to en-US in both these places so it works like it did previously.

Fixes #492

Author: IDisposable

ui/src/components/popovers/PasteModal.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { LuCornerDownLeft } from "react-icons/lu";
 import { ExclamationCircleIcon } from "@heroicons/react/16/solid";
 import { useClose } from "@headlessui/react";
@@ -39,6 +39,13 @@ export default function PasteModal() {
     state => state.setKeyboardLayout,
   );
 
+  // this ensures we always get the original en-US if it hasn't been set yet
+  const safeKeyboardLayout = useMemo(() => {
+    if (keyboardLayout && keyboardLayout.length > 0)
+      return keyboardLayout;
+    return "en-US";
+  }, [keyboardLayout]);
+
   useEffect(() => {
     send("getKeyboardLayout", {}, resp => {
       if ("error" in resp) return;
@@ -56,29 +63,28 @@ export default function PasteModal() {
     setPasteMode(false);
     setDisableVideoFocusTrap(false);
     if (rpcDataChannel?.readyState !== "open" || !TextAreaRef.current) return;
-    if (!keyboardLayout) return;
-    if (!chars[keyboardLayout]) return;
-
+    if (!safeKeyboardLayout) return;
+    if (!chars[safeKeyboardLayout]) return;
     const text = TextAreaRef.current.value;
 
     try {
       for (const char of text) {
-        const { key, shift, altRight, deadKey, accentKey } = chars[keyboardLayout][char]
+        const { key, shift, altRight, deadKey, accentKey } = chars[safeKeyboardLayout][char]
         if (!key) continue;
 
-	const keyz = [ keys[key] ];
-	const modz = [ modifierCode(shift, altRight) ];
+        const keyz = [ keys[key] ];
+        const modz = [ modifierCode(shift, altRight) ];
 
-	if (deadKey) {
+        if (deadKey) {
             keyz.push(keys["Space"]);
             modz.push(noModifier);
-	}
-	if (accentKey) {
+        }
+        if (accentKey) {
             keyz.unshift(keys[accentKey.key])
             modz.unshift(modifierCode(accentKey.shift, accentKey.altRight))
-	}
+        }
 
-	for (const [index, kei] of keyz.entries()) {
+        for (const [index, kei] of keyz.entries()) {
           await new Promise<void>((resolve, reject) => {
             send(
               "keyboardReport",
@@ -92,13 +98,13 @@ export default function PasteModal() {
               },
             );
           });
-	}
+        }
       }
     } catch (error) {
       console.error(error);
       notifications.error("Failed to paste text");
     }
-  }, [rpcDataChannel?.readyState, send, setDisableVideoFocusTrap, setPasteMode, keyboardLayout]);
+  }, [rpcDataChannel?.readyState, send, setDisableVideoFocusTrap, setPasteMode, safeKeyboardLayout]);
 
   useEffect(() => {
     if (TextAreaRef.current) {
@@ -148,7 +154,7 @@ export default function PasteModal() {
                             // @ts-expect-error TS doesn't recognize Intl.Segmenter in some environments
                             [...new Intl.Segmenter().segment(value)]
                               .map(x => x.segment)
-                              .filter(char => !chars[keyboardLayout][char]),
+                              .filter(char => !chars[safeKeyboardLayout][char]),
                           ),
                         ];
 
@@ -167,11 +173,11 @@ export default function PasteModal() {
                     )}
                   </div>
                 </div>
-		<div className="space-y-4">
+                <div className="space-y-4">
                   <p className="text-xs text-slate-600 dark:text-slate-400">
-                    Sending text using keyboard layout: {layouts[keyboardLayout]}
+                    Sending text using keyboard layout: {layouts[safeKeyboardLayout]}
                   </p>
-		</div>
+                </div>
               </div>
             </div>
           </div>

ui/src/routes/devices.$id.settings.keyboard.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 
 import { KeyboardLedSync, useSettingsStore } from "@/hooks/stores";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
@@ -20,6 +20,13 @@ export default function SettingsKeyboardRoute() {
     state => state.setKeyboardLedSync,
   );
 
+  // this ensures we always get the original en-US if it hasn't been set yet
+  const safeKeyboardLayout = useMemo(() => {
+      if (keyboardLayout && keyboardLayout.length > 0)
+        return keyboardLayout;
+      return "en-US";
+  }, [keyboardLayout]);
+
   const layoutOptions = Object.entries(layouts).map(([code, language]) => { return { value: code, label: language } })
   const ledSyncOptions = [
     { value: "auto", label: "Automatic" },
@@ -69,7 +76,7 @@ export default function SettingsKeyboardRoute() {
             size="SM"
             label=""
             fullWidth
-            value={keyboardLayout}
+            value={safeKeyboardLayout}
             onChange={onKeyboardLayoutChange}
             options={layoutOptions}
           />