feat: allow user to disable keyboard LED synchronization (#507)

* feat: allow user to disable keyboard LED synchronization

* Update ui/src/hooks/stores.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from "react";
 
-import { useSettingsStore } from "@/hooks/stores";
+import { KeyboardLedSync, useSettingsStore } from "@/hooks/stores";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import notifications from "@/notifications";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
@@ -12,11 +12,20 @@ import { SettingsItem } from "./devices.$id.settings";
 
 export default function SettingsKeyboardRoute() {
   const keyboardLayout = useSettingsStore(state => state.keyboardLayout);
+  const keyboardLedSync = useSettingsStore(state => state.keyboardLedSync);
   const setKeyboardLayout = useSettingsStore(
     state => state.setKeyboardLayout,
   );
+  const setKeyboardLedSync = useSettingsStore(
+    state => state.setKeyboardLedSync,
+  );
 
   const layoutOptions = Object.entries(layouts).map(([code, language]) => { return { value: code, label: language } })
+  const ledSyncOptions = [
+    { value: "auto", label: "Automatic" },
+    { value: "browser", label: "Browser Only" },
+    { value: "host", label: "Host Only" },
+  ];
 
   const [send] = useJsonRpc();
 
@@ -47,7 +56,7 @@ export default function SettingsKeyboardRoute() {
     <div className="space-y-4">
       <SettingsPageHeader
         title="Keyboard"
-        description="Configure keyboard layout settings for your device"
+        description="Configure keyboard settings for your device"
       />
 
       <div className="space-y-4">
@@ -69,6 +78,23 @@ export default function SettingsKeyboardRoute() {
           Pasting text sends individual key strokes to the target device. The keyboard layout determines which key codes are being sent. Ensure that the keyboard layout in JetKVM matches the settings in the operating system.
         </p>
       </div>
+
+      <div className="space-y-4">
+        { /* this menu item could be renamed to plain "Keyboard layout" in the future, when also the virtual keyboard layout mappings are being implemented */ }
+        <SettingsItem
+          title="LED state synchronization"
+          description="Synchronize the LED state of the keyboard with the target device"
+        >
+          <SelectMenuBasic
+            size="SM"
+            label=""
+            fullWidth
+            value={keyboardLedSync}
+            onChange={e => setKeyboardLedSync(e.target.value as KeyboardLedSync)}
+            options={ledSyncOptions}
+          />
+        </SettingsItem>
+      </div>
     </div>
   );
 }

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

@@ -590,6 +590,8 @@ export default function KvmIdRoute() {
   const keyboardLedState = useHidStore(state => state.keyboardLedState);
   const setKeyboardLedState = useHidStore(state => state.setKeyboardLedState);
 
+  const setKeyboardLedStateSyncAvailable = useHidStore(state => state.setKeyboardLedStateSyncAvailable);
+
   const [hasUpdated, setHasUpdated] = useState(false);
   const { navigateTo } = useDeviceUiNavigation();
 
@@ -615,6 +617,7 @@ export default function KvmIdRoute() {
       const ledState = resp.params as KeyboardLedState;
       console.log("Setting keyboard led state", ledState);
       setKeyboardLedState(ledState);
+      setKeyboardLedStateSyncAvailable(true);
     }
 
     if (resp.method === "otaState") {
@@ -658,12 +661,23 @@ export default function KvmIdRoute() {
     if (rpcDataChannel?.readyState !== "open") return;
     if (keyboardLedState !== undefined) return;
     console.log("Requesting keyboard led state");
+
     send("getKeyboardLedState", {}, resp => {
-      if ("error" in resp) return;
+      if ("error" in resp) {
+        // -32601 means the method is not supported
+        if (resp.error.code === -32601) {
+          setKeyboardLedStateSyncAvailable(false);
+          console.error("Failed to get keyboard led state, disabling sync", resp.error);
+        } else {
+          console.error("Failed to get keyboard led state", resp.error);
+        }
+        return;
+      }
       console.log("Keyboard led state", resp.result);
       setKeyboardLedState(resp.result as KeyboardLedState);
+      setKeyboardLedStateSyncAvailable(true);
     });
-  }, [rpcDataChannel?.readyState, send, setKeyboardLedState, keyboardLedState]);
+  }, [rpcDataChannel?.readyState, send, setKeyboardLedState, setKeyboardLedStateSyncAvailable, keyboardLedState]);
 
   // When the update is successful, we need to refresh the client javascript and show a success modal
   useEffect(() => {