chore: fixes from deno linting/formatting

src/components/PageComponents/Channel.tsx

@@ -7,13 +7,13 @@ import { Protobuf } from "@meshtastic/core";
 import { fromByteArray, toByteArray } from "base64-js";
 import cryptoRandomString from "crypto-random-string";
 import { useState } from "react";
-import { PkiRegenerateDialog } from "../Dialog/PkiRegenerateDialog";
+import { PkiRegenerateDialog } from "../Dialog/PkiRegenerateDialog.tsx";
 
 export interface SettingsPanelProps {
   channel: Protobuf.Channel.Channel;
 }
 
-export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
+export const Channel = ({ channel }: SettingsPanelProps) => {
   const { config, connection, addChannel } = useDevice();
   const { toast } = useToast();
 
@@ -24,8 +24,9 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
     channel?.settings?.psk.length ?? 16,
   );
   const [validationText, setValidationText] = useState<string>();
-  const [preSharedDialogOpen, setPreSharedDialogOpen] =
-    useState<boolean>(false);
+  const [preSharedDialogOpen, setPreSharedDialogOpen] = useState<boolean>(
+    false,
+  );
 
   const onSubmit = (data: ChannelValidation) => {
     const channel = create(Protobuf.Channel.ChannelSchema, {
@@ -92,7 +93,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
       <DynamicForm<ChannelValidation>
         onSubmit={onSubmit}
         submitType="onSubmit"
-        hasSubmitButton={true}
+        hasSubmitButton
         defaultValues={{
           ...channel,
           ...{
@@ -107,7 +108,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
                 channel?.settings?.moduleSettings?.positionPrecision === 32,
               positionPrecision:
                 channel?.settings?.moduleSettings?.positionPrecision ===
-                undefined
+                    undefined
                   ? 10
                   : channel?.settings?.moduleSettings?.positionPrecision,
             },
@@ -126,10 +127,9 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
                 description:
                   "Device telemetry is sent over PRIMARY. Only one PRIMARY allowed",
                 properties: {
-                  enumValue:
-                    channel.index === 0
-                      ? { PRIMARY: 1 }
-                      : { DISABLED: 0, SECONDARY: 2 },
+                  enumValue: channel.index === 0
+                    ? { PRIMARY: 1 }
+                    : { DISABLED: 0, SECONDARY: 2 },
                 },
               },
               {
@@ -192,32 +192,31 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
                 description:
                   "If not sharing precise location, position shared on channel will be accurate within this distance",
                 properties: {
-                  enumValue:
-                    config.display?.units === 0
-                      ? {
-                          "Within 23 km": 10,
-                          "Within 12 km": 11,
-                          "Within 5.8 km": 12,
-                          "Within 2.9 km": 13,
-                          "Within 1.5 km": 14,
-                          "Within 700 m": 15,
-                          "Within 350 m": 16,
-                          "Within 200 m": 17,
-                          "Within 90 m": 18,
-                          "Within 50 m": 19,
-                        }
-                      : {
-                          "Within 15 miles": 10,
-                          "Within 7.3 miles": 11,
-                          "Within 3.6 miles": 12,
-                          "Within 1.8 miles": 13,
-                          "Within 0.9 miles": 14,
-                          "Within 0.5 miles": 15,
-                          "Within 0.2 miles": 16,
-                          "Within 600 feet": 17,
-                          "Within 300 feet": 18,
-                          "Within 150 feet": 19,
-                        },
+                  enumValue: config.display?.units === 0
+                    ? {
+                      "Within 23 km": 10,
+                      "Within 12 km": 11,
+                      "Within 5.8 km": 12,
+                      "Within 2.9 km": 13,
+                      "Within 1.5 km": 14,
+                      "Within 700 m": 15,
+                      "Within 350 m": 16,
+                      "Within 200 m": 17,
+                      "Within 90 m": 18,
+                      "Within 50 m": 19,
+                    }
+                    : {
+                      "Within 15 miles": 10,
+                      "Within 7.3 miles": 11,
+                      "Within 3.6 miles": 12,
+                      "Within 1.8 miles": 13,
+                      "Within 0.9 miles": 14,
+                      "Within 0.5 miles": 15,
+                      "Within 0.2 miles": 16,
+                      "Within 600 feet": 17,
+                      "Within 300 feet": 18,
+                      "Within 150 feet": 19,
+                    },
                 },
               },
             ],

src/components/PageComponents/Config/Bluetooth.tsx

@@ -1,4 +1,4 @@
-import { useAppStore } from "@app/core/stores/appStore";
+import { useAppStore } from "../../../core/stores/appStore.ts";
 import type { BluetoothValidation } from "@app/validation/config/bluetooth.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
@@ -111,9 +111,8 @@ export const Bluetooth = () => {
               disabledBy: [
                 {
                   fieldName: "mode",
-                  selector:
-                    Protobuf.Config.Config_BluetoothConfig_PairingMode
-                      .FIXED_PIN,
+                  selector: Protobuf.Config.Config_BluetoothConfig_PairingMode
+                    .FIXED_PIN,
                   invert: true,
                 },
                 {

src/components/PageComponents/Config/Device.tsx

@@ -4,7 +4,7 @@ import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
 
-export const Device = (): JSX.Element => {
+export const Device = () => {
   const { config, setWorkingConfig } = useDevice();
 
   const onSubmit = (data: DeviceValidation) => {

src/components/PageComponents/Config/Display.tsx

@@ -4,7 +4,7 @@ import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
 
-export const Display = (): JSX.Element => {
+export const Display = () => {
   const { config, setWorkingConfig } = useDevice();
 
   const onSubmit = (data: DisplayValidation) => {

src/components/PageComponents/Config/LoRa.tsx

@@ -4,7 +4,7 @@ import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
 
-export const LoRa = (): JSX.Element => {
+export const LoRa = () => {
   const { config, setWorkingConfig } = useDevice();
 
   const onSubmit = (data: LoRaValidation) => {

src/components/PageComponents/Config/Network.tsx

@@ -8,7 +8,7 @@ import {
 } from "@core/utils/ip.ts";
 import { Protobuf } from "@meshtastic/core";
 
-export const Network = (): JSX.Element => {
+export const Network = () => {
   const { config, setWorkingConfig } = useDevice();
 
   const onSubmit = (data: NetworkValidation) => {

src/components/PageComponents/Config/Position.tsx

@@ -1,7 +1,7 @@
 import {
   type FlagName,
   usePositionFlags,
-} from "@app/core/hooks/usePositionFlags";
+} from "../../../core/hooks/usePositionFlags.ts";
 import type { PositionValidation } from "@app/validation/config/position.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";

src/components/PageComponents/Config/Power.tsx

@@ -4,7 +4,7 @@ import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
 
-export const Power = (): JSX.Element => {
+export const Power = () => {
   const { config, setWorkingConfig } = useDevice();
 
   const onSubmit = (data: PowerValidation) => {

src/components/PageComponents/Config/Security/Security.tsx

@@ -1,10 +1,10 @@
-import { PkiRegenerateDialog } from "@app/components/Dialog/PkiRegenerateDialog";
+import { PkiRegenerateDialog } from "../../../Dialog/PkiRegenerateDialog.tsx";
 import { DynamicForm } from "@app/components/Form/DynamicForm.tsx";
-import { useAppStore } from "@app/core/stores/appStore";
+import { useAppStore } from "../../../../core/stores/appStore.ts";
 import {
   getX25519PrivateKey,
   getX25519PublicKey,
-} from "@app/core/utils/x25519";
+} from "../../../../core/utils/x25519.ts";
 import type { SecurityValidation } from "@app/validation/config/security.tsx";
 import { create } from "@bufbuild/protobuf";
 import { useDevice } from "@core/stores/deviceStore.ts";
@@ -12,7 +12,7 @@ import { Protobuf } from "@meshtastic/core";
 import { fromByteArray, toByteArray } from "base64-js";
 import { Eye, EyeOff } from "lucide-react";
 import { useReducer } from "react";
-import { securityReducer } from "./securityReducer";
+import { securityReducer } from "./securityReducer.tsx";
 
 export const Security = () => {
   const { config, setWorkingConfig, setDialogOpen } = useDevice();
@@ -308,8 +308,7 @@ export const Security = () => {
       <PkiRegenerateDialog
         open={state.privateKeyDialogOpen}
         onOpenChange={() =>
-          dispatch({ type: "SHOW_PRIVATE_KEY_DIALOG", payload: false })
-        }
+          dispatch({ type: "SHOW_PRIVATE_KEY_DIALOG", payload: false })}
         onSubmit={pkiRegenerate}
       />
     </>

src/components/PageComponents/Config/Security/securityReducer.tsx

@@ -1,4 +1,4 @@
-import type { SecurityAction, SecurityState } from "./types";
+import type { SecurityAction, SecurityState } from "./types.ts";
 
 export function securityReducer(
   state: SecurityState,

src/components/PageComponents/Config/Security/types.ts

@@ -18,7 +18,7 @@ export type SecurityAction =
   | { type: "SET_ADMIN_KEY"; payload: string }
   | { type: "SHOW_PRIVATE_KEY_DIALOG"; payload: boolean }
   | {
-      type: "REGENERATE_PRIV_PUB_KEY";
-      payload: { privateKey: string; publicKey: string };
-    }
+    type: "REGENERATE_PRIV_PUB_KEY";
+    payload: { privateKey: string; publicKey: string };
+  }
   | { type: "REGENERATE_ADMIN_KEY"; payload: { adminKey: string } };

src/components/PageComponents/Connect/BLE.tsx

@@ -1,4 +1,4 @@
-import type { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
+import type { TabElementProps } from "../../Dialog/NewDeviceDialog.tsx";
 import { Button } from "@components/UI/Button.tsx";
 import { Mono } from "@components/generic/Mono.tsx";
 import { useAppStore } from "@core/stores/appStore.ts";
@@ -8,7 +8,7 @@ import { randId } from "@core/utils/randId.ts";
 import { BleConnection, Constants } from "@meshtastic/js";
 import { useCallback, useEffect, useState } from "react";
 
-export const BLE = ({ closeDialog }: TabElementProps): JSX.Element => {
+export const BLE = ({ closeDialog }: TabElementProps) => {
   const [bleDevices, setBleDevices] = useState<BluetoothDevice[]>([]);
   const { addDevice } = useDeviceStore();
   const { setSelectedDevice } = useAppStore();

src/components/PageComponents/Connect/HTTP.tsx

@@ -1,4 +1,4 @@
-import type { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
+import type { TabElementProps } from "@app/components/Dialog/NewDeviceDialog.tsx";
 import { Button } from "@components/UI/Button.tsx";
 import { Input } from "@components/UI/Input.tsx";
 import { Label } from "@components/UI/Label.tsx";
@@ -9,23 +9,23 @@ import { subscribeAll } from "@core/subscriptions.ts";
 import { randId } from "@core/utils/randId.ts";
 import { MeshDevice } from "@meshtastic/core";
 import { TransportHTTP } from "@meshtastic/transport-http";
-import { type JSX, useState } from "react";
+import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
-export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
+export const HTTP = ({ closeDialog }: TabElementProps) => {
   const [https, setHTTPS] = useState(false);
   const { addDevice } = useDeviceStore();
   const { setSelectedDevice } = useAppStore();
-  const { register, handleSubmit, control, watch } = useForm<{
+  const { register, handleSubmit, control } = useForm<{
     ip: string;
     tls: boolean;
   }>({
     defaultValues: {
       ip: ["client.meshtastic.org", "localhost"].includes(
-        window.location.hostname,
-      )
+          globalThis.location.hostname,
+        )
         ? "meshtastic.local"
-        : window.location.host,
+        : globalThis.location.host,
       tls: location.protocol === "https:",
     },
   });
@@ -61,16 +61,15 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
         <Controller
           name="tls"
           control={control}
-          render={({ field: { value, onChange, ...rest } }) => (
+          render={({ field: { ...rest } }) => (
             <>
               <Label>Use HTTPS</Label>
               <Switch
-                onCheckedChange={(checked) => {
+                onCheckedChange={(checked: boolean) => {
                   checked ? setHTTPS(true) : setHTTPS(false);
                 }}
-                disabled={
-                  location.protocol === "https:" || connectionInProgress
-                }
+                disabled={location.protocol === "https:" ||
+                  connectionInProgress}
                 checked={https}
                 {...rest}
               />

src/components/PageComponents/Connect/Serial.tsx

@@ -1,4 +1,4 @@
-import type { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
+import type { TabElementProps } from "../../Dialog/NewDeviceDialog.tsx";
 import { Button } from "@components/UI/Button.tsx";
 import { Mono } from "@components/generic/Mono.tsx";
 import { useAppStore } from "@core/stores/appStore.ts";
@@ -9,7 +9,7 @@ import { MeshDevice } from "@meshtastic/core";
 import { TransportWebSerial } from "@meshtastic/transport-web-serial";
 import { useCallback, useEffect, useState } from "react";
 
-export const Serial = ({ closeDialog }: TabElementProps): JSX.Element => {
+export const Serial = ({ closeDialog }: TabElementProps) => {
   const [serialPorts, setSerialPorts] = useState<SerialPort[]>([]);
   const { addDevice } = useDeviceStore();
   const { setSelectedDevice } = useAppStore();

src/components/PageComponents/Map/NodeDetail.tsx

@@ -1,8 +1,8 @@
-import { Separator } from "@app/components/UI/Seperator";
+import { Separator } from "../../UI/Seperator.tsx";
 import { H5 } from "@app/components/UI/Typography/H5.tsx";
 import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
-import { formatQuantity } from "@app/core/utils/string";
-import { Avatar } from "@components/UI/Avatar";
+import { formatQuantity } from "../../../core/utils/string.ts";
+import { Avatar } from "../../UI/Avatar.tsx";
 import { Mono } from "@components/generic/Mono.tsx";
 import { TimeAgo } from "@components/generic/TimeAgo.tsx";
 import { Protobuf } from "@meshtastic/core";
@@ -37,21 +37,23 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
           <Avatar text={node.user?.shortName} />
 
           <div>
-            {node.user?.publicKey && node.user?.publicKey.length > 0 ? (
-              <LockIcon
-                className="text-green-600"
-                size={12}
-                strokeWidth={3}
-                aria-label="Public Key Enabled"
-              />
-            ) : (
-              <LockOpenIcon
-                className="text-yellow-500"
-                size={12}
-                strokeWidth={3}
-                aria-label="No Public Key"
-              />
-            )}
+            {node.user?.publicKey && node.user?.publicKey.length > 0
+              ? (
+                <LockIcon
+                  className="text-green-600"
+                  size={12}
+                  strokeWidth={3}
+                  aria-label="Public Key Enabled"
+                />
+              )
+              : (
+                <LockOpenIcon
+                  className="text-yellow-500"
+                  size={12}
+                  strokeWidth={3}
+                  aria-label="No Public Key"
+                />
+              )}
           </div>
 
           <Star
@@ -73,15 +75,13 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
                 node.deviceMetrics?.voltage?.toPrecision(3) ?? "Unknown"
               } volts`}
             >
-              {node.deviceMetrics?.batteryLevel > 100 ? (
-                <BatteryChargingIcon size={22} />
-              ) : node.deviceMetrics?.batteryLevel > 80 ? (
-                <BatteryFullIcon size={22} />
-              ) : node.deviceMetrics?.batteryLevel > 20 ? (
-                <BatteryMediumIcon size={22} />
-              ) : (
-                <BatteryLowIcon size={22} />
-              )}
+              {node.deviceMetrics?.batteryLevel > 100
+                ? <BatteryChargingIcon size={22} />
+                : node.deviceMetrics?.batteryLevel > 80
+                ? <BatteryFullIcon size={22} />
+                : node.deviceMetrics?.batteryLevel > 20
+                ? <BatteryMediumIcon size={22} />
+                : <BatteryLowIcon size={22} />}
               <Subtle aria-label="Battery">
                 {node.deviceMetrics?.batteryLevel > 100
                   ? "Charging"

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -7,7 +7,6 @@ import { MessageInput } from "@components/PageComponents/Messages/MessageInput.t
 import type { Types } from "@meshtastic/core";
 import { InboxIcon } from "lucide-react";
 import { useCallback, useEffect, useRef } from "react";
-import type { JSX } from "react";
 
 export interface ChannelChatProps {
   messages?: MessageWithState[];
@@ -26,7 +25,7 @@ export const ChannelChat = ({
   messages,
   channel,
   to,
-}: ChannelChatProps): JSX.Element => {
+}: ChannelChatProps) => {
   const { nodes } = useDevice();
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -34,8 +33,7 @@ export const ChannelChat = ({
   const scrollToBottom = useCallback(() => {
     const scrollContainer = scrollContainerRef.current;
     if (scrollContainer) {
-      const isNearBottom =
-        scrollContainer.scrollHeight -
+      const isNearBottom = scrollContainer.scrollHeight -
           scrollContainer.scrollTop -
           scrollContainer.clientHeight <
         100;
@@ -72,9 +70,8 @@ export const ChannelChat = ({
                 key={message.id}
                 message={message}
                 sender={nodes.get(message.from)}
-                lastMsgSameUser={
-                  index > 0 && messages[index - 1].from === message.from
-                }
+                lastMsgSameUser={index > 0 &&
+                  messages[index - 1].from === message.from}
               />
             );
           })}

src/components/PageComponents/Messages/Message.tsx

@@ -4,14 +4,13 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@app/components/UI/Tooltip";
-import { useAppStore } from "@app/core/stores/appStore";
+} from "@components/UI/Tooltip.tsx";
 import {
   type MessageWithState,
   useDeviceStore,
 } from "@app/core/stores/deviceStore.ts";
-import { cn } from "@app/core/utils/cn";
-import { Avatar } from "@components/UI/Avatar";
+import { cn } from "@core/utils/cn.ts";
+import { Avatar } from "@components/UI/Avatar.tsx";
 import type { Protobuf } from "@meshtastic/core";
 import { AlertCircle, CheckCircle2, CircleEllipsis } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
@@ -94,7 +93,6 @@ const StatusIcon = ({ state, className, ...otherProps }: StatusIconProps) => {
 const getMessageTextStyles = (state: MessageState) => {
   const isAcknowledged = state === MESSAGE_STATES.ACK;
   const isFailed = state === MESSAGE_STATES.FAILED;
-  const isWaiting = state === MESSAGE_STATES.WAITING;
 
   return cn(
     "break-words overflow-hidden",
@@ -145,16 +143,18 @@ export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => {
         )}
       >
         <div className="flex items-center gap-2 mb-2">
-          {!lastMsgSameUser ? (
-            <div className="flex place-items-center gap-2 mb-1">
-              <Avatar text={messageUser?.shortName} />
-              <div className="flex flex-col">
-                <span className="font-medium text-slate-900 dark:text-white truncate">
-                  {messageUser?.longName}
-                </span>
+          {!lastMsgSameUser
+            ? (
+              <div className="flex place-items-center gap-2 mb-1">
+                <Avatar text={messageUser?.shortName} />
+                <div className="flex flex-col">
+                  <span className="font-medium text-slate-900 dark:text-white truncate">
+                    {messageUser?.longName}
+                  </span>
+                </div>
               </div>
-            </div>
-          ) : null}
+            )
+            : null}
         </div>
         <TimeDisplay date={message.rxTime} />
         <div className="flex place-items-center gap-2 pb-2">

src/components/PageComponents/Messages/MessageInput.tsx

@@ -1,16 +1,10 @@
-import { debounce } from "@app/core/utils/debounce";
+import { debounce } from "../../../core/utils/debounce.ts";
 import { Button } from "@components/UI/Button.tsx";
 import { Input } from "@components/UI/Input.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import type { Types } from "@meshtastic/core";
 import { SendIcon } from "lucide-react";
-import {
-  type JSX,
-  startTransition,
-  useCallback,
-  useMemo,
-  useState,
-} from "react";
+import { startTransition, useCallback, useMemo, useState } from "react";
 
 export interface MessageInputProps {
   to: Types.Destination;
@@ -22,7 +16,7 @@ export const MessageInput = ({
   to,
   channel,
   maxBytes,
-}: MessageInputProps): JSX.Element => {
+}: MessageInputProps) => {
   const {
     connection,
     setMessageState,
@@ -43,7 +37,7 @@ export const MessageInput = ({
     async (message: string) => {
       await connection
         ?.sendText(message, to, true, channel)
-        .then((id) =>
+        .then((id: number) =>
           setMessageState(
             to === "broadcast" ? "broadcast" : "direct",
             channel,
@@ -51,7 +45,7 @@ export const MessageInput = ({
             myNodeNum,
             id,
             "ack",
-          ),
+          )
         )
         .catch((e: Types.PacketError) =>
           setMessageState(
@@ -61,7 +55,7 @@ export const MessageInput = ({
             myNodeNum,
             e.id,
             e.error,
-          ),
+          )
         );
     },
     [channel, connection, myNodeNum, setMessageState, to],
@@ -82,7 +76,7 @@ export const MessageInput = ({
     <div className="flex gap-2">
       <form
         className="w-full"
-        action={async (formData: FormData) => {
+        action={(formData: FormData) => {
           // prevent user from sending blank/empty message
           if (localDraft === "") return;
           const message = formData.get("messageInput") as string;
@@ -97,7 +91,7 @@ export const MessageInput = ({
         <div className="flex grow gap-2">
           <span className="w-full">
             <Input
-              autoFocus={true}
+              autoFocus
               minLength={1}
               name="messageInput"
               placeholder="Enter Message"

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -1,7 +1,6 @@
 import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { Protobuf } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
-import type { JSX } from "react";
 
 export interface TraceRouteProps {
   from?: Protobuf.Mesh.NodeInfo;
@@ -19,7 +18,7 @@ export const TraceRoute = ({
   routeBack,
   snrTowards,
   snrBack,
-}: TraceRouteProps): JSX.Element => {
+}: TraceRouteProps) => {
   const { nodes } = useDevice();
 
   return (
@@ -38,23 +37,25 @@ export const TraceRoute = ({
         ))}
         {from?.user?.longName}
       </span>
-      {routeBack ? (
-        <span className="ml-4 border-l-2 border-l-background-primary pl-2 text-text-primary">
-          <p className="font-semibold">Route back:</p>
-          <p>{from?.user?.longName}</p>
-          <p>↓ {snrBack?.[0] ? snrBack[0] : "??"}dB</p>
-          {routeBack.map((hop, i) => (
-            <span key={nodes.get(hop)?.num}>
-              <p>
-                {nodes.get(hop)?.user?.longName ??
-                  `!${numberToHexUnpadded(hop)}`}
-              </p>
-              <p>↓ {snrBack?.[i + 1] ? snrBack[i + 1] : "??"}dB</p>
-            </span>
-          ))}
-          {to?.user?.longName}
-        </span>
-      ) : null}
+      {routeBack
+        ? (
+          <span className="ml-4 border-l-2 border-l-background-primary pl-2 text-text-primary">
+            <p className="font-semibold">Route back:</p>
+            <p>{from?.user?.longName}</p>
+            <p>↓ {snrBack?.[0] ? snrBack[0] : "??"}dB</p>
+            {routeBack.map((hop, i) => (
+              <span key={nodes.get(hop)?.num}>
+                <p>
+                  {nodes.get(hop)?.user?.longName ??
+                    `!${numberToHexUnpadded(hop)}`}
+                </p>
+                <p>↓ {snrBack?.[i + 1] ? snrBack[i + 1] : "??"}dB</p>
+              </span>
+            ))}
+            {to?.user?.longName}
+          </span>
+        )
+        : null}
     </div>
   );
 };

src/components/PageComponents/ModuleConfig/AmbientLighting.tsx

@@ -4,7 +4,7 @@ import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { Protobuf } from "@meshtastic/core";
 
-export const AmbientLighting = (): JSX.Element => {
+export const AmbientLighting = () => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: AmbientLightingValidation) => {

src/components/PageComponents/ModuleConfig/Audio.tsx

@@ -4,7 +4,7 @@ import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
 
-export const Audio = (): JSX.Element => {
+export const Audio = () => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: AudioValidation) => {

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -4,7 +4,7 @@ import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
 
-export const CannedMessage = (): JSX.Element => {
+export const CannedMessage = () => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: CannedMessageValidation) => {
@@ -63,9 +63,8 @@ export const CannedMessage = (): JSX.Element => {
               label: "Clockwise event",
               description: "Select input event.",
               properties: {
-                enumValue:
-                  Protobuf.ModuleConfig
-                    .ModuleConfig_CannedMessageConfig_InputEventChar,
+                enumValue: Protobuf.ModuleConfig
+                  .ModuleConfig_CannedMessageConfig_InputEventChar,
               },
             },
             {
@@ -74,9 +73,8 @@ export const CannedMessage = (): JSX.Element => {
               label: "Counter Clockwise event",
               description: "Select input event.",
               properties: {
-                enumValue:
-                  Protobuf.ModuleConfig
-                    .ModuleConfig_CannedMessageConfig_InputEventChar,
+                enumValue: Protobuf.ModuleConfig
+                  .ModuleConfig_CannedMessageConfig_InputEventChar,
               },
             },
             {
@@ -85,9 +83,8 @@ export const CannedMessage = (): JSX.Element => {
               label: "Press event",
               description: "Select input event",
               properties: {
-                enumValue:
-                  Protobuf.ModuleConfig
-                    .ModuleConfig_CannedMessageConfig_InputEventChar,
+                enumValue: Protobuf.ModuleConfig
+                  .ModuleConfig_CannedMessageConfig_InputEventChar,
               },
             },
             {

src/components/PageComponents/ModuleConfig/DetectionSensor.tsx

@@ -4,7 +4,7 @@ import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { Protobuf } from "@meshtastic/core";
 
-export const DetectionSensor = (): JSX.Element => {
+export const DetectionSensor = () => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: DetectionSensorValidation) => {

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -4,7 +4,7 @@ import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
 
-export const ExternalNotification = (): JSX.Element => {
+export const ExternalNotification = () => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: ExternalNotificationValidation) => {

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -4,7 +4,7 @@ import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { Protobuf } from "@meshtastic/core";
 
-export const MQTT = (): JSX.Element => {
+export const MQTT = () => {
   const { config, moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: MqttValidation) => {
@@ -165,32 +165,31 @@ export const MQTT = (): JSX.Element => {
               description:
                 "Position shared will be accurate within this distance",
               properties: {
-                enumValue:
-                  config.display?.units === 0
-                    ? {
-                        "Within 23 km": 10,
-                        "Within 12 km": 11,
-                        "Within 5.8 km": 12,
-                        "Within 2.9 km": 13,
-                        "Within 1.5 km": 14,
-                        "Within 700 m": 15,
-                        "Within 350 m": 16,
-                        "Within 200 m": 17,
-                        "Within 90 m": 18,
-                        "Within 50 m": 19,
-                      }
-                    : {
-                        "Within 15 miles": 10,
-                        "Within 7.3 miles": 11,
-                        "Within 3.6 miles": 12,
-                        "Within 1.8 miles": 13,
-                        "Within 0.9 miles": 14,
-                        "Within 0.5 miles": 15,
-                        "Within 0.2 miles": 16,
-                        "Within 600 feet": 17,
-                        "Within 300 feet": 18,
-                        "Within 150 feet": 19,
-                      },
+                enumValue: config.display?.units === 0
+                  ? {
+                    "Within 23 km": 10,
+                    "Within 12 km": 11,
+                    "Within 5.8 km": 12,
+                    "Within 2.9 km": 13,
+                    "Within 1.5 km": 14,
+                    "Within 700 m": 15,
+                    "Within 350 m": 16,
+                    "Within 200 m": 17,
+                    "Within 90 m": 18,
+                    "Within 50 m": 19,
+                  }
+                  : {
+                    "Within 15 miles": 10,
+                    "Within 7.3 miles": 11,
+                    "Within 3.6 miles": 12,
+                    "Within 1.8 miles": 13,
+                    "Within 0.9 miles": 14,
+                    "Within 0.5 miles": 15,
+                    "Within 0.2 miles": 16,
+                    "Within 600 feet": 17,
+                    "Within 300 feet": 18,
+                    "Within 150 feet": 19,
+                  },
               },
               disabledBy: [
                 {

src/components/PageComponents/ModuleConfig/NeighborInfo.tsx

@@ -4,7 +4,7 @@ import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { Protobuf } from "@meshtastic/core";
 
-export const NeighborInfo = (): JSX.Element => {
+export const NeighborInfo = () => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: NeighborInfoValidation) => {

src/components/PageComponents/ModuleConfig/Paxcounter.tsx

@@ -4,7 +4,7 @@ import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
 
-export const Paxcounter = (): JSX.Element => {
+export const Paxcounter = () => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: PaxcounterValidation) => {

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -4,7 +4,7 @@ import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
 
-export const RangeTest = (): JSX.Element => {
+export const RangeTest = () => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: RangeTestValidation) => {

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -4,7 +4,7 @@ import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
 
-export const Serial = (): JSX.Element => {
+export const Serial = () => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: SerialValidation) => {

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -4,7 +4,7 @@ import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
 
-export const StoreForward = (): JSX.Element => {
+export const StoreForward = () => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: StoreForwardValidation) => {

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -4,7 +4,7 @@ import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
 
-export const Telemetry = (): JSX.Element => {
+export const Telemetry = () => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: TelemetryValidation) => {