feat(usb): dynamic usb devices config

ui/src/components/UsbDeviceSetting.tsx

@@ -0,0 +1,130 @@
+import { useCallback } from "react";
+
+import { useEffect, useState } from "react";
+import { useJsonRpc } from "../hooks/useJsonRpc";
+import notifications from "../notifications";
+import { SettingsItem } from "../routes/devices.$id.settings";
+import Checkbox from "./Checkbox";
+
+export interface USBConfig {
+  vendor_id: string;
+  product_id: string;
+  serial_number: string;
+  manufacturer: string;
+  product: string;
+}
+
+export interface UsbDeviceConfig {
+  keyboard: boolean;
+  absolute_mouse: boolean;
+  relative_mouse: boolean;
+  mass_storage: boolean;
+}
+
+const defaultUsbDeviceConfig: UsbDeviceConfig = {
+  keyboard: true,
+  absolute_mouse: true,
+  relative_mouse: true,
+  mass_storage: true,
+}
+
+export function UsbDeviceSetting() {
+  const [send] = useJsonRpc();
+
+  const [usbDeviceConfig, setUsbDeviceConfig] = useState<UsbDeviceConfig>(defaultUsbDeviceConfig);
+  const syncUsbDeviceConfig = useCallback(() => {
+    send("getUsbDevices", {}, resp => {
+      if ("error" in resp) {
+        console.error("Failed to load USB devices:", resp.error);
+        notifications.error(
+          `Failed to load USB devices: ${resp.error.data || "Unknown error"}`,
+        );
+      } else {
+        console.log("syncUsbDeviceConfig#getUsbDevices result:", resp.result);
+        const usbConfigState = resp.result as UsbDeviceConfig;
+        setUsbDeviceConfig(usbConfigState);
+      }
+    });
+  }, [send]);
+
+  const handleUsbConfigChange = useCallback(
+    (devices: UsbDeviceConfig) => {
+      send("setUsbDevices", { devices }, resp => {
+        if ("error" in resp) {
+          notifications.error(
+            `Failed to set usb devices: ${resp.error.data || "Unknown error"}`,
+          );
+          return;
+        }
+        // setUsbConfigProduct(usbConfig.product);
+        notifications.success(
+          `USB Devices updated`
+        );
+        syncUsbDeviceConfig();
+      });
+    },
+    [send, syncUsbDeviceConfig],
+  );
+
+  const onUsbConfigItemChange = useCallback((key: keyof UsbDeviceConfig) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUsbDeviceConfig((val) => {
+      val[key] = e.target.checked;
+      handleUsbConfigChange(val);
+      return val;
+    });
+  }, [handleUsbConfigChange]);
+
+  useEffect(() => {
+    syncUsbDeviceConfig();
+  }, [syncUsbDeviceConfig]);
+
+  return (
+    <>
+      <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
+      <div className="space-y-4">
+        <SettingsItem
+          title="Enable Keyboard"
+          description="Enable Keyboard"
+        >
+          <Checkbox
+            checked={usbDeviceConfig.keyboard}
+            onChange={onUsbConfigItemChange("keyboard")}
+          />
+        </SettingsItem>
+      </div>
+      <div className="space-y-4">
+        <SettingsItem
+          title="Enable Absolute Mouse (Pointer)"
+          description="Enable Absolute Mouse (Pointer)"
+        >
+          <Checkbox
+            checked={usbDeviceConfig.absolute_mouse}
+            onChange={onUsbConfigItemChange("absolute_mouse")}
+          />
+        </SettingsItem>
+      </div>
+      <div className="space-y-4">
+        <SettingsItem
+          title="Enable Relative Mouse"
+          description="Enable Relative Mouse"
+        >
+          <Checkbox
+            checked={usbDeviceConfig.relative_mouse}
+            onChange={onUsbConfigItemChange("relative_mouse")}
+          />
+        </SettingsItem>
+      </div>
+      <div className="space-y-4">
+        <SettingsItem
+          title="Enable USB Mass Storage"
+          description="Sometimes it might need to be disabled to prevent issues with certain devices"
+        >
+          <Checkbox
+            checked={usbDeviceConfig.mass_storage}
+            onChange={onUsbConfigItemChange("mass_storage")}
+          />
+        </SettingsItem>
+      </div>
+    </>
+  );
+}

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

@@ -7,6 +7,7 @@ import { useJsonRpc } from "@/hooks/useJsonRpc";
 import notifications from "../notifications";
 import { SelectMenuBasic } from "@components/SelectMenuBasic";
 import { UsbConfigSetting } from "../components/UsbConfigSetting";
+import { UsbDeviceSetting } from "@components/UsbDeviceSetting";
 import { FeatureFlag } from "../components/FeatureFlag";
 
 export default function SettingsHardwareRoute() {
@@ -132,6 +133,10 @@ export default function SettingsHardwareRoute() {
       <FeatureFlag minAppVersion="0.3.8">
         <UsbConfigSetting />
       </FeatureFlag>
+
+      <FeatureFlag minAppVersion="0.3.8">
+        <UsbDeviceSetting />
+      </FeatureFlag>
     </div>
   );
 }