From 546bca4af178c4790fc9f8f453fe961a6ee67012 Mon Sep 17 00:00:00 2001
From: JackTheRooster <adrian@rydeas.com>
Date: Mon, 17 Feb 2025 22:53:23 -0600
Subject: [PATCH] added link to lookup usb device ids

---
 ui/src/components/USBConfigDialog.tsx  | 25 +++++++++++++++++--------
 ui/src/components/sidebar/settings.tsx |  2 +-
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/USBConfigDialog.tsx b/ui/src/components/USBConfigDialog.tsx
index b21a75e..21f13a4 100644
--- a/ui/src/components/USBConfigDialog.tsx
+++ b/ui/src/components/USBConfigDialog.tsx
@@ -7,6 +7,7 @@ import Modal from "@components/Modal";
 import { InputFieldWithLabel } from "./InputField";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useUsbConfigModalStore } from "@/hooks/stores";
+import ExtLink from "@components/ExtLink";
 
 export interface UsbConfigState {
   vendor_id: string;
@@ -135,18 +136,26 @@ function UpdateUsbConfigModal({
             Set custom USB parameters to control how the USB device is emulated.
             The device will rebind once the parameters are updated.
           </p>
+          <div className="flex justify-start mt-4 text-xs text-slate-500 dark:text-slate-400">
+            <ExtLink
+                href={`https://the-sz.com/products/usbid/index.php?v=${usbConfigState.vendor_id}&p=${usbConfigState.product_id}`}
+                className="hover:underline"
+            >
+              Look up USB Device IDs
+            </ExtLink>
+          </div>
         </div>
         <InputFieldWithLabel
-          required
-          label="Vendor ID"
-          placeholder="Enter Vendor ID"
-          pattern="^0[xX][\da-fA-F]{4}$"
-          defaultValue={usbConfigState?.vendor_id}
-          onChange={e => handleUsbVendorIdChange(e.target.value)}
+            required
+            label="Vendor ID"
+            placeholder="Enter Vendor ID"
+            pattern="^0[xX][\da-fA-F]{4}$"
+            defaultValue={usbConfigState?.vendor_id}
+            onChange={e => handleUsbVendorIdChange(e.target.value)}
         />
         <InputFieldWithLabel
-          required
-          label="Product ID"
+            required
+            label="Product ID"
           placeholder="Enter Product ID"
           pattern="^0[xX][\da-fA-F]{4}$"
           defaultValue={usbConfigState?.product_id}
diff --git a/ui/src/components/sidebar/settings.tsx b/ui/src/components/sidebar/settings.tsx
index 0009679..04ddd55 100644
--- a/ui/src/components/sidebar/settings.tsx
+++ b/ui/src/components/sidebar/settings.tsx
@@ -250,9 +250,9 @@ export default function SettingsSidebar() {
         );
         return;
       }
+      setUsbConfigJson(jsonString);
       notifications.success(`USB Config set to ${usbConfig.product}`);
       console.info(`usbConfigJson set to: ${usbConfigJson}`)
-      setUsbConfigJson(jsonString);
     });
   };