Second round of formatting

src/components/PageComponents/Channel.tsx

@@ -1,9 +1,9 @@
-import { fromByteArray, toByteArray } from "base64-js";
 import type { ChannelValidation } from "@app/validation/channel.js";
-import { Protobuf } from "@meshtastic/meshtasticjs";
 import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
 import { useToast } from "@core/hooks/useToast.js";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+import { fromByteArray, toByteArray } from "base64-js";
 
 export interface SettingsPanelProps {
   channel: Protobuf.Channel;

src/components/PageComponents/Config/Bluetooth.tsx

@@ -1,7 +1,7 @@
 import type { BluetoothValidation } from "@app/validation/config/bluetooth.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const Bluetooth = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();

src/components/PageComponents/Config/LoRa.tsx

@@ -1,7 +1,7 @@
 import type { LoRaValidation } from "@app/validation/config/lora.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const LoRa = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();

src/components/PageComponents/Config/Network.tsx

@@ -1,7 +1,7 @@
 import type { NetworkValidation } from "@app/validation/config/network.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const Network = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();

src/components/PageComponents/Connect/BLE.tsx

@@ -1,11 +1,11 @@
-import { useCallback, useEffect, useState } from "react";
-import { Mono } from "@components/generic/Mono.js";
 import { Button } from "@components/UI/Button.js";
+import { Mono } from "@components/generic/Mono.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 import { subscribeAll } from "@core/subscriptions.js";
 import { randId } from "@core/utils/randId.js";
 import { Constants, IBLEConnection } from "@meshtastic/meshtasticjs";
+import { useCallback, useEffect, useState } from "react";
 
 export const BLE = (): JSX.Element => {
   const [bleDevices, setBleDevices] = useState<BluetoothDevice[]>([]);
@@ -35,9 +35,9 @@ export const BLE = (): JSX.Element => {
   return (
     <div className="flex w-full flex-col gap-2 p-4">
       <div className="flex h-48 flex-col gap-2 overflow-y-auto">
-        {bleDevices.map((device, index) => (
+        {bleDevices.map((device) => (
           <Button
-            key={index}
+            key={device.id}
             onClick={() => {
               void onConnect(device);
             }}

src/components/PageComponents/Connect/HTTP.tsx

@@ -1,14 +1,14 @@
-import { Controller, useForm, useWatch } from "react-hook-form";
-import { Input } from "@components/UI/Input.js";
-import { Switch } from "@components/UI/Switch.js";
 import { Button } from "@components/UI/Button.js";
+import { Input } from "@components/UI/Input.js";
+import { Label } from "@components/UI/Label.js";
+import { SelectLabel } from "@components/UI/Select.js";
+import { Switch } from "@components/UI/Switch.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 import { subscribeAll } from "@core/subscriptions.js";
 import { randId } from "@core/utils/randId.js";
 import { IHTTPConnection } from "@meshtastic/meshtasticjs";
-import { Label } from "@components/UI/Label.js";
-import { SelectLabel } from "@components/UI/Select.js";
+import { Controller, useForm, useWatch } from "react-hook-form";
 
 export const HTTP = (): JSX.Element => {
   const { addDevice } = useDeviceStore();

src/components/PageComponents/Connect/Serial.tsx

@@ -1,11 +1,11 @@
-import { useCallback, useEffect, useState } from "react";
-import { Mono } from "@components/generic/Mono.js";
 import { Button } from "@components/UI/Button.js";
+import { Mono } from "@components/generic/Mono.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 import { subscribeAll } from "@core/subscriptions.js";
 import { randId } from "@core/utils/randId.js";
 import { ISerialConnection } from "@meshtastic/meshtasticjs";
+import { useCallback, useEffect, useState } from "react";
 
 export const Serial = (): JSX.Element => {
   const [serialPorts, setSerialPorts] = useState<SerialPort[]>([]);

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -24,7 +24,7 @@ export const ChannelChat = ({
         {messages ? (
           messages.map((message, index) => (
             <Message
-              key={index}
+              key={message.id}
               message={message}
               lastMsgSameUser={
                 index === 0 ? false : messages[index - 1].from === message.from

src/components/PageComponents/Messages/Message.tsx

@@ -1,11 +1,11 @@
+import type { MessageWithState } from "@app/core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
+import type { Protobuf } from "@meshtastic/meshtasticjs";
 import {
-  CircleEllipsisIcon,
   AlertCircleIcon,
   CheckCircle2Icon,
+  CircleEllipsisIcon,
 } from "lucide-react";
-import type { Protobuf } from "@meshtastic/meshtasticjs";
-import type { MessageWithState } from "@app/core/stores/deviceStore.js";
 
 export interface MessageProps {
   lastMsgSameUser: boolean;

src/components/PageComponents/Messages/MessageInput.tsx

@@ -1,8 +1,8 @@
+import { Button } from "@components/UI/Button.js";
 import { Input } from "@components/UI/Input.js";
 import { useDevice } from "@core/stores/deviceStore.js";
-import { SendIcon } from "lucide-react";
 import type { Types } from "@meshtastic/meshtasticjs";
-import { Button } from "@components/UI/Button.js";
+import { SendIcon } from "lucide-react";
 
 export interface MessageInputProps {
   to: Types.Destination;

src/components/PageComponents/ModuleConfig/Audio.tsx

@@ -1,7 +1,7 @@
 import type { AudioValidation } from "@app/validation/moduleConfig/audio.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const Audio = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -1,7 +1,7 @@
 import type { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const CannedMessage = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -1,7 +1,7 @@
 import type { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const ExternalNotification = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -1,7 +1,7 @@
 import type { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const RangeTest = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -1,7 +1,7 @@
 import type { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const StoreForward = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();