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,74 +71,103 @@ export const LoRa = (): JSX.Element => {
       dirty={isDirty}
       onSubmit={onSubmit}
     >
-      <Controller
-        name="usePreset"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Use Preset"
-            description="Use one of the predefined modem presets"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Select
-        label="Preset"
-        description="Modem preset to use"
-        disabled={!usePreset}
-        {...register("modemPreset", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
-      </Select>
-
-      <Input
-        label="Bandwidth"
-        description="Max transmit power in dBm"
-        type="number"
-        suffix="MHz"
-        error={errors.bandwidth?.message}
-        {...register("bandwidth", {
-          valueAsNumber: true,
-        })}
-        disabled={usePreset}
-      />
-      <Input
-        label="Spread Factor"
-        description="Max transmit power in dBm"
-        type="number"
-        suffix="CPS"
-        error={errors.spreadFactor?.message}
-        {...register("spreadFactor", {
-          valueAsNumber: true,
-        })}
-        disabled={usePreset}
-      />
-      <Input
-        label="Coding Rate"
-        description="Max transmit power in dBm"
-        type="number"
-        error={errors.codingRate?.message}
-        {...register("codingRate", {
-          valueAsNumber: true,
-        })}
-        disabled={usePreset}
-      />
-      <Input
-        label="Frequency Offset"
-        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>
+      <FormSection title="Modem Settings">
+        <Controller
+          name="usePreset"
+          control={control}
+          render={({ field: { value, ...rest } }) => (
+            <Toggle
+              label="Use Preset"
+              description="Use one of the predefined modem presets"
+              checked={value}
+              {...rest}
+            />
+          )}
+        />
+        <Select
+          label="Preset"
+          description="Modem preset to use"
+          disabled={!usePreset}
+          {...register("modemPreset", { valueAsNumber: true })}
+        >
+          {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
+        </Select>
+        <Input
+          label="Bandwidth"
+          description="Max transmit power in dBm"
+          type="number"
+          suffix="MHz"
+          error={errors.bandwidth?.message}
+          {...register("bandwidth", {
+            valueAsNumber: true,
+          })}
+          disabled={usePreset}
+        />
+        <Input
+          label="Spread Factor"
+          description="Max transmit power in dBm"
+          type="number"
+          suffix="CPS"
+          error={errors.spreadFactor?.message}
+          {...register("spreadFactor", {
+            valueAsNumber: true,
+          })}
+          disabled={usePreset}
+        />
+        <Input
+          label="Coding Rate"
+          description="Max transmit power in dBm"
+          type="number"
+          error={errors.codingRate?.message}
+          {...register("codingRate", {
+            valueAsNumber: true,
+          })}
+          disabled={usePreset}
+        />
+      </FormSection>
+      <FormSection title="Radio Settings">
+        <Controller
+          name="txEnabled"
+          control={control}
+          render={({ field: { value, ...rest } }) => (
+            <Toggle
+              label="Transmit Enabled"
+              description="Description"
+              checked={value}
+              {...rest}
+            />
+          )}
+        />
+        <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"
+          type="number"
+          error={errors.txPower?.message}
+          {...register("txPower", { valueAsNumber: true })}
+        />
+        <Input
+          label="Channel Number"
+          description="LoRa channel number"
+          type="number"
+          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."
@@ -146,32 +176,6 @@ export const LoRa = (): JSX.Element => {
         error={errors.hopLimit?.message}
         {...register("hopLimit", { valueAsNumber: true })}
       />
-      <Controller
-        name="txEnabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Transmit Enabled"
-            description="Description"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Input
-        label="Transmit Power"
-        description="Max transmit power in dBm"
-        type="number"
-        error={errors.txPower?.message}
-        {...register("txPower", { valueAsNumber: true })}
-      />
-      <Input
-        label="Channel Number"
-        description="LoRa channel number"
-        type="number"
-        error={errors.channelNum?.message}
-        {...register("channelNum", { 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,41 +76,91 @@ export const Network = (): JSX.Element => {
       dirty={isDirty}
       onSubmit={onSubmit}
     >
-      <Controller
-        name="wifiEnabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="WiFi Enabled"
-            description="Enable or disbale the WiFi radio"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Select
-        label="WiFi Mode"
-        description="How the WiFi radio should be used"
-        disabled={!wifiEnabled}
-        {...register("wifiMode", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.Config_NetworkConfig_WiFiMode)}
-      </Select>
-      <Input
-        label="SSID"
-        description="Network name"
-        error={errors.wifiSsid?.message}
-        disabled={!wifiEnabled}
-        {...register("wifiSsid")}
-      />
-      <Input
-        label="PSK"
-        type="password"
-        description="Network password"
-        error={errors.wifiPsk?.message}
-        disabled={!wifiEnabled}
-        {...register("wifiPsk")}
-      />
+      <FormSection title="WiFi Config">
+        <Controller
+          name="wifiEnabled"
+          control={control}
+          render={({ field: { value, ...rest } }) => (
+            <Toggle
+              label="WiFi Enabled"
+              description="Enable or disbale the WiFi radio"
+              checked={value}
+              {...rest}
+            />
+          )}
+        />
+        <Select
+          label="WiFi Mode"
+          description="How the WiFi radio should be used"
+          disabled={!wifiEnabled}
+          {...register("wifiMode", { valueAsNumber: true })}
+        >
+          {renderOptions(Protobuf.Config_NetworkConfig_WiFiMode)}
+        </Select>
+        <Input
+          label="SSID"
+          description="Network name"
+          error={errors.wifiSsid?.message}
+          disabled={!wifiEnabled}
+          {...register("wifiSsid")}
+        />
+        <Input
+          label="PSK"
+          type="password"
+          description="Network password"
+          error={errors.wifiPsk?.message}
+          disabled={!wifiEnabled}
+          {...register("wifiPsk")}
+        />
+      </FormSection>
+      <FormSection title="Ethernet Config">
+        <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>
+      </FormSection>
+      <FormSection title="IP Config">
+        <Input
+          label="IP"
+          description="IP Address"
+          error={errors.wifiSsid?.message}
+          {...register("ethConfig.ip")}
+        />
+        <Input
+          label="Gateway"
+          description="Default Gateway"
+          error={errors.wifiSsid?.message}
+          {...register("ethConfig.gateway")}
+        />
+        <Input
+          label="Subnet"
+          description="Subnet Mask"
+          error={errors.wifiSsid?.message}
+          {...register("ethConfig.subnet")}
+        />
+        <Input
+          label="DNS"
+          description="DNS Server"
+          error={errors.wifiSsid?.message}
+          {...register("ethConfig.dns")}
+        />
+      </FormSection>
       <Input
         label="NTP Server"
         description="NTP server for time synchronization"
@@ -117,54 +168,6 @@ export const Network = (): JSX.Element => {
         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/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,38 +88,40 @@ export const Power = (): JSX.Element => {
         error={errors.adcMultiplierOverride?.message}
         {...register("adcMultiplierOverride", { valueAsNumber: true })}
       />
-      <Input
-        label="Minimum Wake Time"
-        description="Minimum amount of time the device will stay awake for after receiving a packet"
-        suffix="Seconds"
-        type="number"
-        error={errors.minWakeSecs?.message}
-        {...register("minWakeSecs", { valueAsNumber: true })}
-      />
-      <Input
-        label="Mesh SDS Timeout"
-        description="The device will enter super deep sleep after this time"
-        suffix="Seconds"
-        type="number"
-        error={errors.meshSdsTimeoutSecs?.message}
-        {...register("meshSdsTimeoutSecs", { valueAsNumber: true })}
-      />
-      <Input
-        label="Super Deep Sleep Duration"
-        description="How long the device will be in super deep sleep for"
-        suffix="Seconds"
-        type="number"
-        error={errors.sdsSecs?.message}
-        {...register("sdsSecs", { valueAsNumber: true })}
-      />
-      <Input
-        label="Light Sleep Duration"
-        description="How long the device will be in light sleep for"
-        suffix="Seconds"
-        type="number"
-        error={errors.lsSecs?.message}
-        {...register("lsSecs", { 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"
+          suffix="Seconds"
+          type="number"
+          error={errors.minWakeSecs?.message}
+          {...register("minWakeSecs", { valueAsNumber: true })}
+        />
+        <Input
+          label="Mesh SDS Timeout"
+          description="The device will enter super deep sleep after this time"
+          suffix="Seconds"
+          type="number"
+          error={errors.meshSdsTimeoutSecs?.message}
+          {...register("meshSdsTimeoutSecs", { valueAsNumber: true })}
+        />
+        <Input
+          label="Super Deep Sleep Duration"
+          description="How long the device will be in super deep sleep for"
+          suffix="Seconds"
+          type="number"
+          error={errors.sdsSecs?.message}
+          {...register("sdsSecs", { valueAsNumber: true })}
+        />
+        <Input
+          label="Light Sleep Duration"
+          description="How long the device will be in light sleep for"
+          suffix="Seconds"
+          type="number"
+          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
-  implements Protobuf.Config_NetworkConfig_NetworkConfig
+export class NetworkValidation_IpV4Config
+  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;
 }