Second round of formatting

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 { useDevice } from "@app/core/stores/deviceStore.js";
-import { useForm } from "react-hook-form";
-import { Protobuf } from "@meshtastic/meshtasticjs";
+import { Input } from "@components/UI/Input.js";
 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 { DeviceNameDialog } from "./DeviceNameDialog.js";
+import { useDevice } from "@core/stores/deviceStore.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 { toByteArray } from "base64-js";
+import { Button } from "@components/UI/Button.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 { Switch } from "@components/UI/Switch.js";
-import { Button } from "@components/UI/Button.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { Input } from "@components/UI/Input.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) => (
-                  <div className="flex justify-between" key={index}>
+                {channelSet?.settings.map((channel) => (
+                  <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 { BLE } from "../PageComponents/Connect/BLE.js";
-import { Serial } from "../PageComponents/Connect/Serial.js";
+import { Subtle } from "@components/UI/Typography/Subtle.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 { Protobuf, Types } from "@meshtastic/meshtasticjs";
+import { Input } from "@components/UI/Input.js";
 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 { useDevice } from "@core/stores/deviceStore.js";
+import { Button } from "@components/UI/Button.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 { useDevice } from "@core/stores/deviceStore.js";
+import { Button } from "@components/UI/Button.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;