WIP updates

src/components/PageComponents/Config/Display.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { SelectField, TextInputField } from "evergreen-ui";
-import { useForm } from "react-hook-form";
+import { FormField, SelectField, Switch, TextInputField } from "evergreen-ui";
+import { Controller, useForm } from "react-hook-form";
 
 import { DisplayValidation } from "@app/validation/config/display.js";
 import { Form } from "@components/form/Form";
@@ -19,6 +19,7 @@ export const Display = (): JSX.Element => {
     handleSubmit,
     formState: { errors, isDirty },
     reset,
+    control,
   } = useForm<Protobuf.Config_DisplayConfig>({
     defaultValues: config.display,
     resolver: classValidatorResolver(DisplayValidation),
@@ -67,6 +68,20 @@ export const Display = (): JSX.Element => {
       >
         {renderOptions(Protobuf.Config_DisplayConfig_GpsCoordinateFormat)}
       </SelectField>
+      <FormField
+        label="Compass North Top"
+        description="Description"
+        isInvalid={!!errors.compassNorthTop?.message}
+        validationMessage={errors.compassNorthTop?.message}
+      >
+        <Controller
+          name="compassNorthTop"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
     </Form>
   );
 };

src/components/PageComponents/Config/WiFi copy.tsx

@@ -1,94 +0,0 @@
-import type React from "react";
-import { useEffect, useState } from "react";
-
-import { FormField, Switch, TextInputField, toaster } from "evergreen-ui";
-import { Controller, useForm } from "react-hook-form";
-
-import { WiFiValidation } from "@app/validation/config/wifi.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
-
-export const WiFi = (): JSX.Element => {
-  const { config, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isDirty },
-    control,
-    reset,
-  } = useForm<WiFiValidation>({
-    defaultValues: config.wifi,
-    resolver: classValidatorResolver(WiFiValidation),
-  });
-
-  useEffect(() => {
-    reset(config.wifi);
-  }, [reset, config.wifi]);
-
-  const onSubmit = handleSubmit((data) => {
-    setLoading(true);
-    void connection?.setConfig(
-      {
-        payloadVariant: {
-          oneofKind: "wifi",
-          wifi: data,
-        },
-      },
-      async () => {
-        toaster.success("Your source is now sending data");
-        reset({ ...data });
-        setLoading(false);
-        await Promise.resolve();
-      }
-    );
-  });
-  return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <TextInputField
-        label="SSID"
-        description="This is a description."
-        isInvalid={!!errors.ssid?.message}
-        validationMessage={errors.ssid?.message}
-        {...register("ssid", { valueAsNumber: true })}
-      />
-      <TextInputField
-        label="PSK"
-        description="This is a description."
-        type="password"
-        isInvalid={!!errors.psk?.message}
-        validationMessage={errors.psk?.message}
-        {...register("psk", { valueAsNumber: true })}
-      />
-      <FormField
-        label="Enable WiFi AP"
-        description="Description"
-        isInvalid={!!errors.apMode?.message}
-        validationMessage={errors.apMode?.message}
-      >
-        <Controller
-          name="apMode"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <FormField
-        label="Don't broadcast SSID"
-        description="Description"
-        isInvalid={!!errors.apHidden?.message}
-        validationMessage={errors.apHidden?.message}
-      >
-        <Controller
-          name="apHidden"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-    </Form>
-  );
-};

src/components/PageComponents/Config/WiFi.tsx

@@ -1,13 +1,21 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, Switch, TextInputField, toaster } from "evergreen-ui";
-import { Controller, useForm } from "react-hook-form";
+import {
+  FormField,
+  SelectField,
+  Switch,
+  TextInputField,
+  toaster,
+} from "evergreen-ui";
+import { Controller, useForm, useWatch } from "react-hook-form";
 
+import { renderOptions } from "@app/core/utils/selectEnumOptions.js";
 import { WiFiValidation } from "@app/validation/config/wifi.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const WiFi = (): JSX.Element => {
   const { config, connection } = useDevice();
@@ -23,6 +31,12 @@ export const WiFi = (): JSX.Element => {
     resolver: classValidatorResolver(WiFiValidation),
   });
 
+  const wifiEnabled = useWatch({
+    control,
+    name: "enabled",
+    defaultValue: false,
+  });
+
   useEffect(() => {
     reset(config.wifi);
   }, [reset, config.wifi]);
@@ -46,6 +60,27 @@ export const WiFi = (): JSX.Element => {
   });
   return (
     <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
+      <FormField
+        label="WiFi Enabled"
+        description="Description"
+        isInvalid={!!errors.enabled?.message}
+        validationMessage={errors.enabled?.message}
+      >
+        <Controller
+          name="enabled"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <SelectField
+        label="WiFi Mode"
+        description="This is a description."
+        {...register("mode", { valueAsNumber: true })}
+      >
+        {renderOptions(Protobuf.Config_WiFiConfig_WiFiMode)}
+      </SelectField>
       <TextInputField
         label="SSID"
         description="This is a description."
@@ -53,7 +88,6 @@ export const WiFi = (): JSX.Element => {
         validationMessage={errors.ssid?.message}
         {...register("ssid")}
       />
-
       <TextInputField
         label="PSK"
         type="password"
@@ -62,35 +96,6 @@ export const WiFi = (): JSX.Element => {
         validationMessage={errors.psk?.message}
         {...register("psk")}
       />
-      <FormField
-        label="Enable WiFi AP"
-        description="Description"
-        isInvalid={!!errors.apMode?.message}
-        validationMessage={errors.apMode?.message}
-      >
-        <Controller
-          name="apMode"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-
-      <FormField
-        label="Don't broadcast SSID"
-        description="Description"
-        isInvalid={!!errors.apHidden?.message}
-        validationMessage={errors.apHidden?.message}
-      >
-        <Controller
-          name="apHidden"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
     </Form>
   );
 };

src/components/layout/Sidebar/index.tsx

@@ -82,6 +82,7 @@ export const Sidebar = (): JSX.Element => {
         {navLinks.map((Link) => (
           <Tab
             key={Link.name}
+            userSelect="none"
             gap={majorScale(2)}
             disabled={Link.disabled}
             direction="vertical"
@@ -95,6 +96,7 @@ export const Sidebar = (): JSX.Element => {
           </Tab>
         ))}
         <Tab
+          userSelect="none"
           gap={5}
           direction="vertical"
           isSelected={PeersDialogOpen}