Overhaul (#83)

* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages

src/components/PageComponents/Config/Display.tsx

@@ -1,30 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { Input } from "@components/form/Input.js";
-import { Select } from "@components/form/Select.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { DisplayValidation } from "@app/validation/config/display.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { renderOptions } from "@core/utils/selectEnumOptions.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { DisplayValidation } from "@app/validation/config/display.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const Display = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
-  const { register, handleSubmit, reset, control } = useForm<DisplayValidation>(
-    {
-      mode: "onChange",
-      defaultValues: config.display,
-      resolver: classValidatorResolver(DisplayValidation)
-    }
-  );
 
-  useEffect(() => {
-    reset(config.display);
-  }, [reset, config.display]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: DisplayValidation) => {
     setWorkingConfig(
       new Protobuf.Config({
         payloadVariant: {
@@ -33,88 +15,80 @@ export const Display = (): JSX.Element => {
         }
       })
     );
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Input
-        label="Screen Timeout"
-        description="Turn off the display after this long"
-        suffix="Seconds"
-        type="number"
-        {...register("screenOnSecs", { valueAsNumber: true })}
-      />
-      <Input
-        label="Carousel Delay"
-        description="How fast to cycle through windows"
-        suffix="Seconds"
-        type="number"
-        {...register("autoScreenCarouselSecs", { valueAsNumber: true })}
-      />
-      <Select
-        label="GPS Display Units"
-        description="Coordinate display format"
-        {...register("gpsFormat", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.Config_DisplayConfig_GpsCoordinateFormat)}
-      </Select>
-      <Controller
-        name="compassNorthTop"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Compass North Top"
-            description="Fix north to the top of compass"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="flipScreen"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Flip Screen"
-            description="Flip display 180 degrees"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Select
-        label="Display Units"
-        description="Display metric or imperial units"
-        {...register("units", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.Config_DisplayConfig_DisplayUnits)}
-      </Select>
-      <Select
-        label="OLED Type"
-        description="Type of OLED screen attached to the device"
-        {...register("oled", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.Config_DisplayConfig_OledType)}
-      </Select>
-      <Select
-        label="Display Mode"
-        description="Screen layout variant"
-        {...register("displaymode", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.Config_DisplayConfig_DisplayMode)}
-      </Select>
-      <Controller
-        name="headingBold"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Bold Heading"
-            description="Bolden the heading text"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-    </Form>
+    <DynamicForm<DisplayValidation>
+      onSubmit={onSubmit}
+      defaultValues={config.display}
+      fieldGroups={[
+        {
+          label: "Display Settings",
+          description: "Settings for the device display",
+          fields: [
+            {
+              type: "number",
+              name: "screenOnSecs",
+              label: "Screen Timeout",
+              description: "Turn off the display after this long"
+            },
+            {
+              type: "select",
+              name: "gpsFormat",
+              label: "GPS Display Units",
+              description: "Coordinate display format",
+              enumValue: Protobuf.Config_DisplayConfig_GpsCoordinateFormat
+            },
+            {
+              type: "number",
+              name: "autoScreenCarouselSecs",
+              label: "Carousel Delay",
+              description: "How fast to cycle through windows"
+            },
+            {
+              type: "toggle",
+              name: "compassNorthTop",
+              label: "Compass North Top",
+              description: "Fix north to the top of compass"
+            },
+            {
+              type: "toggle",
+              name: "flipScreen",
+              label: "Flip Screen",
+              description: "Flip display 180 degrees"
+            },
+            {
+              type: "select",
+              name: "units",
+              label: "Display Units",
+              description: "Display metric or imperial units",
+              enumValue: Protobuf.Config_DisplayConfig_DisplayUnits,
+              formatEnumName: true
+            },
+            {
+              type: "select",
+              name: "oled",
+              label: "OLED Type",
+              description: "Type of OLED screen attached to the device",
+              enumValue: Protobuf.Config_DisplayConfig_OledType
+            },
+            {
+              type: "select",
+              name: "displaymode",
+              label: "Display Mode",
+              description: "Screen layout variant",
+              enumValue: Protobuf.Config_DisplayConfig_DisplayMode,
+              formatEnumName: true
+            },
+            {
+              type: "toggle",
+              name: "headingBold",
+              label: "Bold Heading",
+              description: "Bolden the heading text"
+            }
+          ]
+        }
+      ]}
+    />
   );
 };