fix: changed position of error message, disabled buttons when error is showing

src/components/Dialog/NewDeviceDialog.tsx

@@ -11,7 +11,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@components/UI/Dialog.tsx";
-import { AlertCircle, } from "lucide-react";
+import { AlertCircle, InfoIcon, } from "lucide-react";
 import {
   Tabs,
   TabsContent,
@@ -29,9 +29,7 @@ export interface TabElementProps {
 export interface TabManifest {
   label: string;
   element: React.FC<TabElementProps>;
-  disabled: boolean;
-  disabledMessage: string;
-  disabledLink?: string;
+  isDisabled: boolean;
 }
 
 export interface NewDeviceProps {
@@ -121,24 +119,21 @@ export const NewDeviceDialog = ({
     {
       label: "HTTP",
       element: HTTP,
-      disabled: false,
-      disabledMessage: "Unsuported connection method",
+      isDisabled: false,
     },
     {
       label: "Bluetooth",
       element: BLE,
-      disabled:
+      isDisabled:
         unsupported.includes("Web Bluetooth") ||
         unsupported.includes("Secure Context"),
-      disabledMessage: "",
     },
     {
       label: "Serial",
       element: Serial,
-      disabled:
+      isDisabled:
         unsupported.includes("Web Serial") ||
         unsupported.includes("Secure Context"),
-      disabledMessage: "",
     },
   ];
 
@@ -154,7 +149,6 @@ export const NewDeviceDialog = ({
               <TabsTrigger
                 key={tab.label}
                 value={tab.label}
-                disabled={tab.disabled}
               >
                 {tab.label}
               </TabsTrigger>
@@ -162,16 +156,12 @@ export const NewDeviceDialog = ({
           </TabsList>
           {tabs.map((tab) => (
             <TabsContent key={tab.label} value={tab.label}>
-              {tab.disabled ? (
-                <p className="text-sm text-slate-500 dark:text-slate-400">
-                  {tab.disabledMessage}
-                </p>
-              ) : (
+              <fieldset disabled={tab.isDisabled}>
+                {tab.isDisabled ? <ErrorMessage missingFeatures={unsupported} /> : null}
                 <tab.element closeDialog={() => onOpenChange(false)} />
-              )}
+              </fieldset>
             </TabsContent>
           ))}
-          <ErrorMessage missingFeatures={unsupported} />
         </Tabs>
       </DialogContent>
     </Dialog>

src/components/PageComponents/Connect/Serial.tsx

@@ -14,13 +14,13 @@ export const Serial = ({ closeDialog }: TabElementProps): JSX.Element => {
   const { setSelectedDevice } = useAppStore();
 
   const updateSerialPortList = useCallback(async () => {
-    setSerialPorts(await navigator.serial.getPorts());
+    setSerialPorts(await navigator?.serial.getPorts());
   }, []);
 
-  navigator.serial.addEventListener("connect", () => {
+  navigator?.serial?.addEventListener("connect", () => {
     updateSerialPortList();
   });
-  navigator.serial.addEventListener("disconnect", () => {
+  navigator?.serial?.addEventListener("disconnect", () => {
     updateSerialPortList();
   });
   useEffect(() => {
@@ -58,9 +58,8 @@ export const Serial = ({ closeDialog }: TabElementProps): JSX.Element => {
                 await onConnect(port);
               }}
             >
-              {`# ${index} - ${usbVendorId ?? "UNK"} - ${
-                usbProductId ?? "UNK"
-              }`}
+              {`# ${index} - ${usbVendorId ?? "UNK"} - ${usbProductId ?? "UNK"
+                }`}
             </Button>
           );
         })}

src/core/hooks/useBrowserFeatureDetection.ts

@@ -10,8 +10,8 @@ interface BrowserSupport {
 export function useBrowserFeatureDetection(): BrowserSupport {
   const support = useMemo(() => {
     const features: [BrowserFeature, boolean][] = [
-      ['Web Bluetooth', !!navigator.bluetooth],
-      ['Web Serial', !!navigator.serial],
+      ['Web Bluetooth', !!navigator?.bluetooth],
+      ['Web Serial', !!navigator?.serial],
       ['Secure Context', window.location.protocol === 'https:' || window.location.hostname === 'localhost']
     ];