Add form sections

src/components/PageComponents/Config/LoRa.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { toast } from "react-hot-toast";
 
+import { FormSection } from "@app/components/form/FormSection.js";
 import { Input } from "@app/components/form/Input.js";
 import { Select } from "@app/components/form/Select.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -70,6 +71,7 @@ export const LoRa = (): JSX.Element => {
       dirty={isDirty}
       onSubmit={onSubmit}
     >
+      <FormSection title="Modem Settings">
         <Controller
           name="usePreset"
           control={control}
@@ -90,7 +92,6 @@ export const LoRa = (): JSX.Element => {
         >
           {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
         </Select>
-
         <Input
           label="Bandwidth"
           description="Max transmit power in dBm"
@@ -123,29 +124,8 @@ export const LoRa = (): JSX.Element => {
           })}
           disabled={usePreset}
         />
-      <Input
+      </FormSection>
-        label="Frequency Offset"
+      <FormSection title="Radio Settings">
-        description="This is a description."
-        suffix="Hz"
-        type="number"
-        error={errors.frequencyOffset?.message}
-        {...register("frequencyOffset", { valueAsNumber: true })}
-      />
-      <Select
-        label="Region"
-        description="This is a description."
-        {...register("region", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
-      </Select>
-      <Input
-        label="Hop Limit"
-        description="This is a description."
-        suffix="Hops"
-        type="number"
-        error={errors.hopLimit?.message}
-        {...register("hopLimit", { valueAsNumber: true })}
-      />
         <Controller
           name="txEnabled"
           control={control}
@@ -158,6 +138,13 @@ export const LoRa = (): JSX.Element => {
             />
           )}
         />
+        <Select
+          label="Region"
+          description="This is a description."
+          {...register("region", { valueAsNumber: true })}
+        >
+          {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
+        </Select>
         <Input
           label="Transmit Power"
           description="Max transmit power in dBm"
@@ -172,6 +159,23 @@ export const LoRa = (): JSX.Element => {
           error={errors.channelNum?.message}
           {...register("channelNum", { valueAsNumber: true })}
         />
+        <Input
+          label="Frequency Offset"
+          description="This is a description."
+          suffix="Hz"
+          type="number"
+          error={errors.frequencyOffset?.message}
+          {...register("frequencyOffset", { valueAsNumber: true })}
+        />
+      </FormSection>
+      <Input
+        label="Hop Limit"
+        description="This is a description."
+        suffix="Hops"
+        type="number"
+        error={errors.hopLimit?.message}
+        {...register("hopLimit", { valueAsNumber: true })}
+      />
     </Form>
   );
 };

src/components/PageComponents/Config/Network.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { toast } from "react-hot-toast";
 
+import { FormSection } from "@app/components/form/FormSection.js";
 import { Input } from "@app/components/form/Input.js";
 import { Select } from "@app/components/form/Select.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -75,6 +76,7 @@ export const Network = (): JSX.Element => {
       dirty={isDirty}
       onSubmit={onSubmit}
     >
+      <FormSection title="WiFi Config">
         <Controller
           name="wifiEnabled"
           control={control}
@@ -110,13 +112,8 @@ export const Network = (): JSX.Element => {
           disabled={!wifiEnabled}
           {...register("wifiPsk")}
         />
-      <Input
+      </FormSection>
-        label="NTP Server"
+      <FormSection title="Ethernet Config">
-        description="NTP server for time synchronization"
-        error={errors.ntpServer?.message}
-        disabled={!wifiEnabled && !ethEnabled}
-        {...register("ntpServer")}
-      />
         <Controller
           name="ethEnabled"
           control={control}
@@ -137,34 +134,40 @@ export const Network = (): JSX.Element => {
         >
           {renderOptions(Protobuf.Config_NetworkConfig_WiFiMode)}
         </Select>
+      </FormSection>
+      <FormSection title="IP Config">
         <Input
-        label="Ethernet IP"
+          label="IP"
           description="IP Address"
           error={errors.wifiSsid?.message}
-        disabled={!ethEnabled}
           {...register("ethConfig.ip")}
         />
         <Input
-        label="Ethernet Gateway"
+          label="Gateway"
-        description="Default Gatewat"
+          description="Default Gateway"
           error={errors.wifiSsid?.message}
-        disabled={!ethEnabled}
           {...register("ethConfig.gateway")}
         />
         <Input
-        label="Ethernet Subnet"
+          label="Subnet"
           description="Subnet Mask"
           error={errors.wifiSsid?.message}
-        disabled={!ethEnabled}
           {...register("ethConfig.subnet")}
         />
         <Input
-        label="Ethernet DNS"
+          label="DNS"
           description="DNS Server"
           error={errors.wifiSsid?.message}
-        disabled={!ethEnabled}
           {...register("ethConfig.dns")}
         />
+      </FormSection>
+      <Input
+        label="NTP Server"
+        description="NTP server for time synchronization"
+        error={errors.ntpServer?.message}
+        disabled={!wifiEnabled && !ethEnabled}
+        {...register("ntpServer")}
+      />
     </Form>
   );
 };

src/components/PageComponents/Config/Position.tsx

@@ -1,15 +1,17 @@
 import type React from "react";
 import { useEffect } from "react";
 
-import { Controller, useForm } from "react-hook-form";
+import { Controller, useForm, useWatch } from "react-hook-form";
 import { toast } from "react-hot-toast";
 
+import { FormSection } from "@app/components/form/FormSection.js";
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
 import { PositionValidation } from "@app/validation/config/position.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const Position = (): JSX.Element => {
   const { config, connection } = useDevice();
@@ -24,18 +26,52 @@ export const Position = (): JSX.Element => {
     resolver: classValidatorResolver(PositionValidation),
   });
 
+  const fixedPositionEnabled = useWatch({
+    control,
+    name: "fixedPosition",
+    defaultValue: false,
+  });
+
   useEffect(() => {
     reset(config.position);
   }, [reset, config.position]);
 
   const onSubmit = handleSubmit((data) => {
+    const { fixedAlt, fixedLat, fixedLng, ...rest } = data;
+
     if (connection) {
+      void toast.promise(
+        connection.sendPacket(
+          Protobuf.Position.toBinary(
+            Protobuf.Position.create({
+              altitude: fixedAlt,
+              latitudeI: fixedLat * 1e7,
+              longitudeI: fixedLng * 1e7,
+            })
+          ),
+          Protobuf.PortNum.POSITION_APP,
+          undefined,
+          true,
+          undefined,
+          true,
+          false,
+          async () => {
+            reset({ ...data });
+            await Promise.resolve();
+          }
+        ),
+        {
+          loading: "Saving...",
+          success: "Saved Channel",
+          error: "No response received",
+        }
+      );
       void toast.promise(
         connection.setConfig(
           {
             payloadVariant: {
               oneofKind: "position",
-              position: data,
+              position: rest,
             },
           },
           async () => {
@@ -92,6 +128,32 @@ export const Position = (): JSX.Element => {
           />
         )}
       />
+      <FormSection title="Fixed Position">
+        <Input
+          suffix="m"
+          label="Altitude"
+          type="number"
+          error={errors.fixedAlt?.message}
+          disabled={!fixedPositionEnabled}
+          {...register("fixedAlt", { valueAsNumber: true })}
+        />
+        <Input
+          suffix="°"
+          label="Latitude"
+          type="number"
+          error={errors.fixedLat?.message}
+          disabled={!fixedPositionEnabled}
+          {...register("fixedLat", { valueAsNumber: true })}
+        />
+        <Input
+          suffix="°"
+          label="Longitude"
+          type="number"
+          error={errors.fixedLng?.message}
+          disabled={!fixedPositionEnabled}
+          {...register("fixedLng", { valueAsNumber: true })}
+        />
+      </FormSection>
       <Controller
         name="gpsEnabled"
         control={control}

src/components/PageComponents/Config/Power.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 
+import { FormSection } from "@app/components/form/FormSection.js";
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
 import { PowerValidation } from "@app/validation/config/power.js";
@@ -87,6 +88,7 @@ export const Power = (): JSX.Element => {
         error={errors.adcMultiplierOverride?.message}
         {...register("adcMultiplierOverride", { valueAsNumber: true })}
       />
+      <FormSection title="Sleep Settings">
         <Input
           label="Minimum Wake Time"
           description="Minimum amount of time the device will stay awake for after receiving a packet"
@@ -119,6 +121,7 @@ export const Power = (): JSX.Element => {
           error={errors.lsSecs?.message}
           {...register("lsSecs", { valueAsNumber: true })}
         />
+      </FormSection>
       <Input
         label="No Connection Bluetooth Disabled"
         description="If the device does not revieve a bluetooth connection, the BLE radio will be disabled after this long"

src/components/PageComponents/Messages/Message.tsx

@@ -21,7 +21,7 @@ export const Message = ({
   message,
   sender,
 }: MessageProps): JSX.Element => {
-  const { setPeerInfoOpen, setActivePeer } = useDevice();
+  const { setPeerInfoOpen, setActivePeer, connection } = useDevice();
 
   const openPeer = (): void => {
     setActivePeer(message.packet.from);

src/components/form/FormSection.tsx

@@ -0,0 +1,22 @@
+import type React from "react";
+
+export interface FormSectionProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export const FormSection = ({
+  title,
+  children,
+}: FormSectionProps): JSX.Element => {
+  return (
+    <div className="relative">
+      <h3 className="absolute left-2 -top-2 bg-white px-1 text-lg font-medium">
+        {title}
+      </h3>
+      <div className="mt-2 rounded-md border-2 border-orange-200 p-2">
+        {children}
+      </div>
+    </div>
+  );
+};

src/pages/Messages.tsx

@@ -26,7 +26,7 @@ export const MessagesPage = (): JSX.Element => {
   });
 
   return (
-    <div className="flex w-full flex-col">
+    <div className="flex h-full w-full flex-col">
       <TabbedContent
         tabs={tabs}
         actions={[

src/validation/config/network.ts

@@ -24,11 +24,11 @@ export class NetworkValidation implements Protobuf.Config_NetworkConfig {
   @IsEnum(Protobuf.Config_NetworkConfig_EthMode)
   ethMode: Protobuf.Config_NetworkConfig_EthMode;
 
-  ethConfig: NetworkValidation_ethConfig;
+  ethConfig: NetworkValidation_IpV4Config;
 }
 
-export class NetworkValidation_ethConfig
+export class NetworkValidation_IpV4Config
-  implements Protobuf.Config_NetworkConfig_NetworkConfig
+  implements Protobuf.Config_NetworkConfig_IpV4Config
 {
   @IsIP()
   ip: number;

src/validation/config/position.ts

@@ -23,4 +23,14 @@ export class PositionValidation implements Protobuf.Config_PositionConfig {
 
   @IsInt()
   positionFlags: number;
+
+  // fixed position fields
+  @IsInt()
+  fixedAlt: number;
+
+  @IsInt()
+  fixedLat: number;
+
+  @IsInt()
+  fixedLng: number;
 }