Update deps, add ethernet config

src/components/PageComponents/Config/Network.tsx

@@ -33,6 +33,12 @@ export const Network = (): JSX.Element => {
     defaultValue: false,
   });
 
+  const ethEnabled = useWatch({
+    control,
+    name: "ethEnabled",
+    defaultValue: false,
+  });
+
   useEffect(() => {
     reset(config.network);
   }, [reset, config.network]);
@@ -108,8 +114,57 @@ export const Network = (): JSX.Element => {
         label="NTP Server"
         description="NTP server for time synchronization"
         error={errors.ntpServer?.message}
+        disabled={!wifiEnabled && !ethEnabled}
         {...register("ntpServer")}
       />
+      <Controller
+        name="ethEnabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Ethernet Enabled"
+            description="Enable or disbale the Ethernet port"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Select
+        label="Ethernet Mode"
+        description="Address assignment selection"
+        disabled={!ethEnabled}
+        {...register("ethMode", { valueAsNumber: true })}
+      >
+        {renderOptions(Protobuf.Config_NetworkConfig_WiFiMode)}
+      </Select>
+      <Input
+        label="Ethernet IP"
+        description="IP Address"
+        error={errors.wifiSsid?.message}
+        disabled={!ethEnabled}
+        {...register("ethConfig.ip")}
+      />
+      <Input
+        label="Ethernet Gateway"
+        description="Default Gatewat"
+        error={errors.wifiSsid?.message}
+        disabled={!ethEnabled}
+        {...register("ethConfig.gateway")}
+      />
+      <Input
+        label="Ethernet Subnet"
+        description="Subnet Mask"
+        error={errors.wifiSsid?.message}
+        disabled={!ethEnabled}
+        {...register("ethConfig.subnet")}
+      />
+      <Input
+        label="Ethernet DNS"
+        description="DNS Server"
+        error={errors.wifiSsid?.message}
+        disabled={!ethEnabled}
+        {...register("ethConfig.dns")}
+      />
     </Form>
   );
 };

src/components/Sidebar.tsx

@@ -34,7 +34,7 @@ export const Sidebar = (): JSX.Element => {
           removeDevice(selectedDevice ?? 0);
         }}
         reconnect={() => {
-          console.log("");
+          void connection?.disconnect();
         }}
       />
 

src/components/form/Input.tsx

@@ -16,7 +16,16 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { label, description, prefix, suffix, action, error, ...rest }: InputProps,
+  {
+    label,
+    description,
+    prefix,
+    suffix,
+    action,
+    error,
+    disabled,
+    ...rest
+  }: InputProps,
   ref
 ) {
   return (
@@ -34,7 +43,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           ref={ref}
           className={`flex h-10 w-full rounded-md border-transparent bg-orange-100 px-3 text-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 ${
             prefix ? "rounded-l-none" : ""
-          } ${action ? "rounded-r-none" : ""}`}
+          } ${action ? "rounded-r-none" : ""} ${
+            disabled ? "cursor-not-allowed bg-orange-50 text-orange-200" : ""
+          }`}
+          disabled={disabled}
           {...rest}
         />
         {suffix && (

src/components/form/Select.tsx

@@ -43,7 +43,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Input(
           className={`flex h-10 w-full rounded-md border-transparent bg-orange-100 px-3 text-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 ${
             prefix ? "rounded-l-none" : ""
           } ${action ? "rounded-r-none" : ""} ${
-            disabled ? "cursor-not-allowed" : ""
+            disabled ? "cursor-not-allowed bg-orange-50 text-orange-200" : ""
           }`}
           disabled={disabled}
           {...rest}