Second round of formatting

src/App.tsx

@@ -1,15 +1,15 @@
-import { MapProvider } from "react-map-gl";
-import { useAppStore } from "@core/stores/appStore.js";
 import { DeviceWrapper } from "@app/DeviceWrapper.js";
 import { PageRouter } from "@app/PageRouter.js";
 import { CommandPalette } from "@components/CommandPalette.js";
+import { Dashboard } from "@components/Dashboard.js";
 import { DeviceSelector } from "@components/DeviceSelector.js";
 import { DialogManager } from "@components/Dialog/DialogManager.js";
-import { Dashboard } from "@components/Dashboard.js";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
-import { ThemeController } from "@components/generic/ThemeController.js";
 import { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.js";
 import { Toaster } from "@components/Toaster.js";
+import { ThemeController } from "@components/generic/ThemeController.js";
+import { useAppStore } from "@core/stores/appStore.js";
+import { useDeviceStore } from "@core/stores/deviceStore.js";
+import { MapProvider } from "react-map-gl";
 
 export const App = (): JSX.Element => {
   const { getDevice } = useDeviceStore();

src/components/CommandPalette.tsx

@@ -360,28 +360,27 @@ export const CommandPalette = (): JSX.Element => {
       <CommandInput placeholder="Type a command or search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
-        {groups.map((group, index) => (
+        {groups.map((group) => (
-          <CommandGroup key={index} heading={group.label}>
+          <CommandGroup key={group.label} heading={group.label}>
-            {group.commands.map((command, index) => (
+            {group.commands.map((command) => (
-              <div key={index}>
+              <div key={command.label}>
                 <CommandItem
                   onSelect={() => {
-                    command.action && command.action();
+                    command.action?.();
                     setCommandPaletteOpen(false);
                   }}
                 >
                   <command.icon size={16} className="mr-2" />
                   {command.label}
                 </CommandItem>
-                {command.subItems &&
+                {command.subItems?.map((subItem) => (
-                  command.subItems.map((subItem, index) => (
+                  <SubItem
-                    <SubItem
+                    key={subItem.label}
-                      key={index}
+                    label={subItem.label}
-                      label={subItem.label}
+                    icon={subItem.icon}
-                      icon={subItem.icon}
+                    action={subItem.action}
-                      action={subItem.action}
+                  />
-                    />
+                ))}
-                  ))}
               </div>
             ))}
           </CommandGroup>

src/components/Dashboard.tsx

@@ -1,20 +1,20 @@
 import { useAppStore } from "@app/core/stores/appStore.js";
-import { Button } from "@components/UI/Button.js";
-import {
-  PlusIcon,
-  ListPlusIcon,
-  UsersIcon,
-  MapPinIcon,
-  CalendarIcon,
-  BluetoothIcon,
-  UsbIcon,
-  NetworkIcon,
-} from "lucide-react";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
-import { H3 } from "@components/UI/Typography/H3.js";
 import { useDeviceStore } from "@app/core/stores/deviceStore.js";
-import { useMemo } from "react";
+import { Button } from "@components/UI/Button.js";
 import { Separator } from "@components/UI/Seperator.js";
+import { H3 } from "@components/UI/Typography/H3.js";
+import { Subtle } from "@components/UI/Typography/Subtle.js";
+import {
+  BluetoothIcon,
+  CalendarIcon,
+  ListPlusIcon,
+  MapPinIcon,
+  NetworkIcon,
+  PlusIcon,
+  UsbIcon,
+  UsersIcon,
+} from "lucide-react";
+import { useMemo } from "react";
 
 export const Dashboard = () => {
   const { setConnectDialogOpen } = useAppStore();

src/components/DeviceSelector.tsx

@@ -1,18 +1,18 @@
+import { DeviceSelectorButton } from "./DeviceSelectorButton.js";
+import { Separator } from "@components/UI/Seperator.js";
+import { Code } from "@components/UI/Typography/Code.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import {
-  PlusIcon,
+  GithubIcon,
   HomeIcon,
   LanguagesIcon,
-  SunIcon,
   MoonIcon,
-  GithubIcon,
+  PlusIcon,
+  SunIcon,
   TerminalIcon,
 } from "lucide-react";
-import { Separator } from "@components/UI/Seperator.js";
-import { Code } from "@components/UI/Typography/Code.js";
-import { DeviceSelectorButton } from "./DeviceSelectorButton.js";
 
 export const DeviceSelector = (): JSX.Element => {
   const { getDevices } = useDeviceStore();
@@ -53,6 +53,7 @@ export const DeviceSelector = (): JSX.Element => {
           ))}
           <Separator />
           <button
+            type="button"
             onClick={() => setConnectDialogOpen(true)}
             className="transition-all duration-300 hover:text-accent"
           >
@@ -62,18 +63,20 @@ export const DeviceSelector = (): JSX.Element => {
       </div>
       <div className="flex w-20 flex-col items-center space-y-5 bg-transparent px-5 pb-5">
         <button
+          type="button"
           className="transition-all hover:text-accent"
           onClick={() => setDarkMode(!darkMode)}
         >
           {darkMode ? <SunIcon /> : <MoonIcon />}
         </button>
         <button
+          type="button"
           className="transition-all hover:text-accent"
           onClick={() => setCommandPaletteOpen(true)}
         >
           <TerminalIcon />
         </button>
-        <button className="transition-all hover:text-accent">
+        <button type="button" className="transition-all hover:text-accent">
           <LanguagesIcon />
         </button>
         <Separator />

src/components/Dialog/DeviceNameDialog.tsx

@@ -1,4 +1,5 @@
-import { Input } from "@components/UI/Input.js";
+import { useDevice } from "@app/core/stores/deviceStore.js";
+import { Button } from "@components/UI/Button.js";
 import {
   Dialog,
   DialogContent,
@@ -7,11 +8,10 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@components/UI/Dialog.js";
-import { Button } from "@components/UI/Button.js";
+import { Input } from "@components/UI/Input.js";
-import { useDevice } from "@app/core/stores/deviceStore.js";
-import { useForm } from "react-hook-form";
-import { Protobuf } from "@meshtastic/meshtasticjs";
 import { Label } from "@components/UI/Label.js";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+import { useForm } from "react-hook-form";
 
 export interface User {
   longName: string;

src/components/Dialog/DialogManager.tsx

@@ -1,9 +1,9 @@
-import { useDevice } from "@core/stores/deviceStore.js";
+import { DeviceNameDialog } from "./DeviceNameDialog.js";
+import { ImportDialog } from "@components/Dialog/ImportDialog.js";
 import { QRDialog } from "@components/Dialog/QRDialog.js";
 import { RebootDialog } from "@components/Dialog/RebootDialog.js";
 import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.js";
-import { ImportDialog } from "@components/Dialog/ImportDialog.js";
+import { useDevice } from "@core/stores/deviceStore.js";
-import { DeviceNameDialog } from "./DeviceNameDialog.js";
 
 export const DialogManager = (): JSX.Element => {
   const { channels, config, dialog, setDialogOpen } = useDevice();

src/components/Dialog/ImportDialog.tsx

@@ -1,7 +1,5 @@
-import { useEffect, useState } from "react";
+import { Button } from "@components/UI/Button.js";
-import { toByteArray } from "base64-js";
 import { Checkbox } from "@components/UI/Checkbox.js";
-import { Input } from "@components/UI/Input.js";
 import {
   Dialog,
   DialogContent,
@@ -10,11 +8,13 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@components/UI/Dialog.js";
-import { Protobuf } from "@meshtastic/meshtasticjs";
+import { Input } from "@components/UI/Input.js";
-import { Switch } from "@components/UI/Switch.js";
-import { Button } from "@components/UI/Button.js";
-import { useDevice } from "@core/stores/deviceStore.js";
 import { Label } from "@components/UI/Label.js";
+import { Switch } from "@components/UI/Switch.js";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+import { toByteArray } from "base64-js";
+import { useEffect, useState } from "react";
 
 export interface ImportDialogProps {
   open: boolean;
@@ -120,14 +120,14 @@ export const ImportDialog = ({
                 Channels:
               </span>
               <div className="flex w-40 flex-col gap-1">
-                {channelSet?.settings.map((channel, index) => (
+                {channelSet?.settings.map((channel) => (
-                  <div className="flex justify-between" key={index}>
+                  <div className="flex justify-between" key={channel.id}>
                     <Label>
                       {channel.name.length
                         ? channel.name
                         : `Channel: ${channel.id}`}
                     </Label>
-                    <Checkbox key={index} />
+                    <Checkbox key={channel.id} />
                   </div>
                 ))}
               </div>

src/components/Dialog/NewDeviceDialog.tsx

@@ -1,3 +1,6 @@
+import { BLE } from "../PageComponents/Connect/BLE.js";
+import { HTTP } from "../PageComponents/Connect/HTTP.js";
+import { Serial } from "../PageComponents/Connect/Serial.js";
 import {
   Dialog,
   DialogContent,
@@ -11,11 +14,8 @@ import {
   TabsList,
   TabsTrigger,
 } from "@components/UI/Tabs.js";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
 import { Link } from "@components/UI/Typography/Link.js";
-import { HTTP } from "../PageComponents/Connect/HTTP.js";
+import { Subtle } from "@components/UI/Typography/Subtle.js";
-import { BLE } from "../PageComponents/Connect/BLE.js";
-import { Serial } from "../PageComponents/Connect/Serial.js";
 
 const tabs = [
   {

src/components/Dialog/QRDialog.tsx

@@ -1,8 +1,4 @@
-import { useEffect, useState } from "react";
-import { fromByteArray } from "base64-js";
-import { QRCode } from "react-qrcode-logo";
 import { Checkbox } from "@components/UI/Checkbox.js";
-import { Input } from "@components/UI/Input.js";
 import {
   Dialog,
   DialogContent,
@@ -11,9 +7,13 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@components/UI/Dialog.js";
-import { ClipboardIcon } from "lucide-react";
+import { Input } from "@components/UI/Input.js";
-import { Protobuf, Types } from "@meshtastic/meshtasticjs";
 import { Label } from "@components/UI/Label.js";
+import { Protobuf, Types } from "@meshtastic/meshtasticjs";
+import { fromByteArray } from "base64-js";
+import { ClipboardIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { QRCode } from "react-qrcode-logo";
 
 export interface QRDialogProps {
   open: boolean;

src/components/Dialog/RebootDialog.tsx

@@ -1,5 +1,4 @@
-import { useState } from "react";
+import { Button } from "@components/UI/Button.js";
-import { useDevice } from "@core/stores/deviceStore.js";
 import {
   Dialog,
   DialogContent,
@@ -8,9 +7,10 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@components/UI/Dialog.js";
-import { ClockIcon, RefreshCwIcon } from "lucide-react";
-import { Button } from "@components/UI/Button.js";
 import { Input } from "@components/UI/Input.js";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { ClockIcon, RefreshCwIcon } from "lucide-react";
+import { useState } from "react";
 
 export interface RebootDialogProps {
   open: boolean;

src/components/Dialog/ShutdownDialog.tsx

@@ -1,5 +1,4 @@
-import { useState } from "react";
+import { Button } from "@components/UI/Button.js";
-import { useDevice } from "@core/stores/deviceStore.js";
 import {
   Dialog,
   DialogContent,
@@ -7,9 +6,10 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@components/UI/Dialog.js";
-import { ClockIcon, PowerIcon } from "lucide-react";
-import { Button } from "@components/UI/Button.js";
 import { Input } from "@components/UI/Input.js";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { ClockIcon, PowerIcon } from "lucide-react";
+import { useState } from "react";
 
 export interface ShutdownDialogProps {
   open: boolean;

src/components/Form/DynamicForm.tsx

@@ -1,3 +1,8 @@
+import { Button } from "../UI/Button.js";
+import { DynamicFormField, FieldProps } from "./DynamicFormField.js";
+import { FieldWrapper } from "./FormWrapper.js";
+import { H4 } from "@components/UI/Typography/H4.js";
+import { Subtle } from "@components/UI/Typography/Subtle.js";
 import {
   Control,
   DeepPartial,
@@ -6,11 +11,6 @@ import {
   SubmitHandler,
   useForm,
 } from "react-hook-form";
-import { H4 } from "@components/UI/Typography/H4.js";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
-import { DynamicFormField, FieldProps } from "./DynamicFormField.js";
-import { FieldWrapper } from "./FormWrapper.js";
-import { Button } from "../UI/Button.js";
 
 interface DisabledBy<T> {
   fieldName: Path<T>;
@@ -79,9 +79,9 @@ export function DynamicForm<T extends FieldValues>({
             onChange: handleSubmit(onSubmit),
           })}
     >
-      {fieldGroups.map((fieldGroup, index) => (
+      {fieldGroups.map((fieldGroup) => (
         <div
-          key={index}
+          key={fieldGroup.label}
           className="space-y-8 divide-y divide-gray-200 sm:space-y-5"
         >
           <div>
@@ -89,10 +89,10 @@ export function DynamicForm<T extends FieldValues>({
             <Subtle>{fieldGroup.description}</Subtle>
           </div>
 
-          {fieldGroup.fields.map((field, index) => (
+          {fieldGroup.fields.map((field) => (
             <FieldWrapper label={field.label} description={field.description}>
               <DynamicFormField
-                key={index}
+                key={field.label}
                 field={field}
                 control={control}
                 disabled={isDisabled(field.disabledBy)}

src/components/Form/DynamicFormField.tsx

@@ -1,7 +1,7 @@
-import type { Control, FieldValues } from "react-hook-form";
 import { GenericInput, InputFieldProps } from "./FormInput.js";
-import { ToggleFieldProps, ToggleInput } from "./FormToggle.js";
 import { SelectFieldProps, SelectInput } from "./FormSelect.js";
+import { ToggleFieldProps, ToggleInput } from "./FormToggle.js";
+import type { Control, FieldValues } from "react-hook-form";
 
 export type FieldProps<T> =
   | InputFieldProps<T>

src/components/Form/FormInput.tsx

@@ -1,9 +1,9 @@
-import type { LucideIcon } from "lucide-react";
+import { Input } from "../UI/Input.js";
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
 } from "./DynamicForm.js";
-import { Input } from "../UI/Input.js";
+import type { LucideIcon } from "lucide-react";
 import { Controller, FieldValues } from "react-hook-form";
 
 export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {

src/components/Form/FormSelect.tsx

@@ -1,8 +1,3 @@
-import type {
-  BaseFormBuilderProps,
-  GenericFormElementProps,
-} from "./DynamicForm.js";
-import { Controller, FieldValues } from "react-hook-form";
 import {
   Select,
   SelectContent,
@@ -10,6 +5,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../UI/Select.js";
+import type {
+  BaseFormBuilderProps,
+  GenericFormElementProps,
+} from "./DynamicForm.js";
+import { Controller, FieldValues } from "react-hook-form";
 
 export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "select" | "multiSelect";
@@ -50,8 +50,8 @@ export function SelectInput<T extends FieldValues>({
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              {optionsEnumValues.map(([name, value], index) => (
+              {optionsEnumValues.map(([name, value]) => (
-                <SelectItem key={index} value={value.toString()}>
+                <SelectItem key={name} value={value.toString()}>
                   {formatEnumName
                     ? name
                         .replace(/_/g, " ")

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 { Controller, useForm, useWatch } from "react-hook-form";
-import { SelectLabel } from "@components/UI/Select.js";
 
 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();

src/components/PageLayout.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@app/core/utils/cn.js";
-import { LucideIcon, AlignLeftIcon } from "lucide-react";
+import { AlignLeftIcon, LucideIcon } from "lucide-react";
 
 export interface PageLayoutProps {
   label: string;
@@ -20,7 +20,10 @@ export const PageLayout = ({
   return (
     <div className="relative flex h-full w-full flex-col">
       <div className="flex h-14 shrink-0 border-b-[0.5px] border-slate-300 dark:border-slate-700 md:h-16 md:px-4">
-        <button className="pl-4 transition-all hover:text-accent md:hidden">
+        <button
+          type="button"
+          className="pl-4 transition-all hover:text-accent md:hidden"
+        >
           <AlignLeftIcon />
         </button>
         <div className="flex flex-1 items-center justify-between px-4 md:px-0">
@@ -30,6 +33,7 @@ export const PageLayout = ({
               {actions?.map((action, index) => (
                 <button
                   key={index}
+                  type="button"
                   className="transition-all hover:text-accent"
                   onClick={action.onClick}
                 >

src/components/Sidebar.tsx

@@ -1,18 +1,18 @@
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
+import { Subtle } from "@components/UI/Typography/Subtle.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import type { Page } from "@core/stores/deviceStore.js";
 import {
+  EditIcon,
+  LayersIcon,
+  LayoutGrid,
   LucideIcon,
   MapIcon,
   MessageSquareIcon,
   SettingsIcon,
-  LayersIcon,
   UsersIcon,
-  EditIcon,
-  LayoutGrid,
 } from "lucide-react";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
 
 export interface SidebarProps {
   children?: React.ReactNode;
@@ -67,6 +67,7 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
           <Subtle>{myNode?.user?.longName ?? "UNK"}</Subtle>
         </div>
         <button
+          type="button"
           className="transition-all hover:text-accent"
           onClick={() => setDialogOpen("deviceName", true)}
         >
@@ -75,9 +76,9 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
       </div>
 
       <SidebarSection label="Navigation">
-        {pages.map((link, index) => (
+        {pages.map((link) => (
           <SidebarButton
-            key={index}
+            key={link.name}
             label={link.name}
             icon={link.icon}
             onClick={() => {

src/components/UI/Button.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 
@@ -41,6 +41,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, ...props }, ref) => {
     return (
       <button
+        type="button"
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}

src/components/UI/Checkbox.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 

src/components/UI/Command.tsx

@@ -1,10 +1,10 @@
-import * as React from "react";
 import type { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
 import { Dialog, DialogContent } from "@components/UI/Dialog.js";
+import { cn } from "@core/utils/cn.js";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -21,9 +21,7 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-interface CommandDialogProps extends DialogProps {}
+const CommandDialog = ({ children, ...props }: DialogProps) => {
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-2xl [&_[dialog-overlay]]:bg-red-100">

src/components/UI/Dialog.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 

src/components/UI/DropdownMenu.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 

src/components/UI/Input.tsx

@@ -38,6 +38,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         )}
         {action && (
           <button
+            type="button"
             className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-400 focus:outline-none "
             onClick={action.onClick}
           >

src/components/UI/Label.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 

src/components/UI/Menubar.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 

src/components/UI/Popover.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 

src/components/UI/ScrollArea.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 

src/components/UI/Select.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 

src/components/UI/Seperator.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 

src/components/UI/Sidebar/sidebarButton.tsx

@@ -1,5 +1,5 @@
-import type { LucideIcon } from "lucide-react";
 import { Button } from "../Button.js";
+import type { LucideIcon } from "lucide-react";
 
 export interface SidebarButtonProps {
   label: string;

src/components/UI/Switch.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 

src/components/UI/Tabs.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 

src/components/UI/Toast.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { VariantProps, cva } from "class-variance-authority";
 import { X } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 

src/components/UI/Tooltip.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
 

src/components/generic/Table/index.tsx

@@ -16,9 +16,9 @@ export const Table = ({ headings, rows }: TableProps): JSX.Element => {
     <table className="min-w-full">
       <thead className="bg-backgroundPrimary text-sm font-semibold text-textPrimary">
         <tr>
-          {headings.map((heading, index) => (
+          {headings.map((heading) => (
             <th
-              key={index}
+              key={heading.title}
               scope="col"
               className={`py-2 pr-3 pl-6 text-left ${
                 heading.sortable

src/core/hooks/useToast.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import type { ToastActionElement, ToastProps } from "@components/UI/Toast.js";
+import { DialogProps } from "@radix-ui/react-dialog";
 
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000;
@@ -84,7 +85,7 @@ export const reducer = (state: State, action: Action): State => {
         ),
       };
 
-    case "DISMISS_TOAST":
+    case "DISMISS_TOAST": {
       const { toastId } = action;
 
       // ! Side effects ! - This could be extracted into a dismissToast() action,
@@ -108,7 +109,9 @@ export const reducer = (state: State, action: Action): State => {
             : t,
         ),
       };
-    case "REMOVE_TOAST":
+    }
+
+    case "REMOVE_TOAST": {
       if (action.toastId === undefined) {
         return {
           ...state,
@@ -119,6 +122,7 @@ export const reducer = (state: State, action: Action): State => {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
       };
+    }
   }
 };
 
@@ -133,9 +137,7 @@ function dispatch(action: Action) {
   });
 }
 
-interface Toast extends Omit<ToasterToast, "id"> {}
+function toast({ ...props }: DialogProps) {
-
-function toast({ ...props }: Toast) {
   const id = genId();
 
   const update = (props: ToasterToast) =>

src/index.tsx

@@ -1,7 +1,7 @@
 import "@app/index.css";
+import { enableMapSet } from "immer";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { StrictMode } from "react";
-import { enableMapSet } from "immer";
 import { createRoot } from "react-dom/client";
 
 import { App } from "@app/App.js";

src/pages/Channels.tsx

@@ -1,17 +1,17 @@
-import { Sidebar } from "@components/Sidebar.js";
-import { PageLayout } from "@components/PageLayout.js";
-import { cn } from "@app/core/utils/cn.js";
-import { Channel } from "@components/PageComponents/Channel.js";
-import { useDevice } from "@core/stores/deviceStore.js";
-import { QrCodeIcon, ImportIcon } from "lucide-react";
-import { Protobuf, Types } from "@meshtastic/meshtasticjs";
-import { useState } from "react";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from "@app/components/UI/Tabs.js";
+import { cn } from "@app/core/utils/cn.js";
+import { Channel } from "@components/PageComponents/Channel.js";
+import { PageLayout } from "@components/PageLayout.js";
+import { Sidebar } from "@components/Sidebar.js";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { Protobuf, Types } from "@meshtastic/meshtasticjs";
+import { ImportIcon, QrCodeIcon } from "lucide-react";
+import { useState } from "react";
 
 export const getChannelName = (channel: Protobuf.Channel) =>
   channel.settings?.name.length
@@ -31,7 +31,7 @@ export const ChannelsPage = (): JSX.Element => {
 
   return (
     <>
-      <Sidebar></Sidebar>
+      <Sidebar />
       <PageLayout
         label={`Channel: ${
           currentChannel ? getChannelName(currentChannel) : "Loading..."

src/pages/Config/DeviceConfig.tsx

@@ -1,18 +1,18 @@
-import { Fragment } from "react";
-import { Network } from "@components/PageComponents/Config/Network.js";
 import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.js";
 import { Device } from "@components/PageComponents/Config/Device.js";
 import { Display } from "@components/PageComponents/Config/Display.js";
 import { LoRa } from "@components/PageComponents/Config/LoRa.js";
+import { Network } from "@components/PageComponents/Config/Network.js";
 import { Position } from "@components/PageComponents/Config/Position.js";
 import { Power } from "@components/PageComponents/Config/Power.js";
-import { useDevice } from "@core/stores/deviceStore.js";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from "@components/UI/Tabs.js";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { Fragment } from "react";
 
 export const DeviceConfig = (): JSX.Element => {
   const { hardware } = useDevice();

src/pages/Config/ModuleConfig.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { useDevice } from "@app/core/stores/deviceStore.js";
 import { Audio } from "@components/PageComponents/ModuleConfig/Audio.js";
 import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage";
 import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
@@ -7,13 +7,13 @@ import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.js"
 import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
 import { StoreForward } from "@components/PageComponents/ModuleConfig/StoreForward.js";
 import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.js";
-import { useDevice } from "@app/core/stores/deviceStore.js";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from "@components/UI/Tabs.js";
+import { Fragment } from "react";
 
 export const ModuleConfig = (): JSX.Element => {
   const { workingModuleConfig, connection } = useDevice();

src/pages/Config/index.tsx

@@ -1,13 +1,13 @@
-import { Sidebar } from "@components/Sidebar.js";
-import { SettingsIcon, BoxesIcon, SaveIcon } from "lucide-react";
-import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
-import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
-import { PageLayout } from "@components/PageLayout.js";
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
-import { useState } from "react";
 import { useDevice } from "@app/core/stores/deviceStore.js";
+import { PageLayout } from "@components/PageLayout.js";
+import { Sidebar } from "@components/Sidebar.js";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
 import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
 import { useToast } from "@core/hooks/useToast.js";
+import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
+import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
+import { BoxesIcon, SaveIcon, SettingsIcon } from "lucide-react";
+import { useState } from "react";
 
 export const ConfigPage = (): JSX.Element => {
   const { workingConfig, workingModuleConfig, connection } = useDevice();

src/pages/Map.tsx

@@ -1,22 +1,22 @@
-import maplibregl from "maplibre-gl";
+import { Subtle } from "@app/components/UI/Typography/Subtle.js";
-import { Layer, Map, Marker, Source, useMap } from "react-map-gl";
+import { cn } from "@app/core/utils/cn.js";
+import { PageLayout } from "@components/PageLayout.js";
+import { Sidebar } from "@components/Sidebar.js";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
-import { Sidebar } from "@components/Sidebar.js";
+import { bbox, lineString } from "@turf/turf";
-import { PageLayout } from "@components/PageLayout.js";
 import {
-  ZoomInIcon,
-  ZoomOutIcon,
   BoxSelectIcon,
   MapPinIcon,
+  ZoomInIcon,
+  ZoomOutIcon,
 } from "lucide-react";
-import { bbox, lineString } from "@turf/turf";
+import maplibregl from "maplibre-gl";
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
-import { Subtle } from "@app/components/UI/Typography/Subtle.js";
-import { cn } from "@app/core/utils/cn.js";
 import { useCallback, useEffect, useState } from "react";
+import { Layer, Map as MapGL, Marker, Source, useMap } from "react-map-gl";
 
 export const MapPage = (): JSX.Element => {
   const { nodes, waypoints } = useDevice();
@@ -76,8 +76,8 @@ export const MapPage = (): JSX.Element => {
     <>
       <Sidebar>
         <SidebarSection label="Sources">
-          {rasterSources.map((source, index) => (
+          {rasterSources.map((source) => (
-            <SidebarButton key={index} label={source.title} />
+            <SidebarButton key={source.title} label={source.title} />
           ))}
         </SidebarSection>
       </Sidebar>
@@ -105,7 +105,7 @@ export const MapPage = (): JSX.Element => {
           },
         ]}
       >
-        <Map
+        <MapGL
           mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"
           // onClick={(e) => {
           //   const waypoint = new Protobuf.Waypoint({
@@ -176,7 +176,7 @@ export const MapPage = (): JSX.Element => {
               );
             }
           })}
-        </Map>
+        </MapGL>
       </PageLayout>
     </>
   );

src/pages/Messages.tsx

@@ -1,14 +1,14 @@
-import { Sidebar } from "@components/Sidebar.js";
+import { getChannelName } from "./Channels.js";
-import { PageLayout } from "@components/PageLayout.js";
 import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js";
+import { PageLayout } from "@components/PageLayout.js";
+import { Sidebar } from "@components/Sidebar.js";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
-import { HashIcon } from "lucide-react";
 import { Protobuf, Types } from "@meshtastic/meshtasticjs";
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
+import { HashIcon } from "lucide-react";
 import { useMemo, useState } from "react";
-import { getChannelName } from "./Channels.js";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
 
 export const MessagesPage = (): JSX.Element => {
   const { channels, nodes, hardware, messages } = useDevice();

src/pages/Peers.tsx

@@ -1,11 +1,11 @@
-import { base16 } from "rfc4648";
+import { Sidebar } from "@components/Sidebar.js";
 import { Mono } from "@components/generic/Mono.js";
 import { Table } from "@components/generic/Table";
 import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { Sidebar } from "@components/Sidebar.js";
+import { base16 } from "rfc4648";
 
 export const PeersPage = (): JSX.Element => {
   const { nodes, hardware } = useDevice();
@@ -16,7 +16,7 @@ export const PeersPage = (): JSX.Element => {
 
   return (
     <>
-      <Sidebar></Sidebar>
+      <Sidebar />
       <div className="w-full overflow-y-auto">
         <Table
           headings={[