Start moduleConfig & general import cleanup

.trunk/trunk.yaml

@@ -10,8 +10,6 @@ lint:
   enabled:
     - [email protected]
     - [email protected]
-    - [email protected]
-    - [email protected]
     - git-diff-check
     - [email protected]
     - [email protected]

src/App.tsx

@@ -1,8 +1,5 @@
-import type React from "react";
-
 import { MapProvider } from "react-map-gl";
-
+import { useAppStore } from "@core/stores/appStore.js";
-import { useAppStore } from "@app/core/stores/appStore.js";
 import { DeviceWrapper } from "@app/DeviceWrapper.js";
 import { PageRouter } from "@app/PageRouter.js";
 import { CommandPalette } from "@components/CommandPalette/Index.js";
@@ -12,9 +9,9 @@ import { NewDevice } from "@components/NewDevice.js";
 import { Sidebar } from "@components/Sidebar.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 
-import { Drawer } from "./components/Drawer/index.js";
+import { Drawer } from "@components/Drawer/index.js";
-import { ThemeController } from "./components/generic/ThemeController.js";
+import { ThemeController } from "@components/generic/ThemeController.js";
-import { BottomNav } from "./Nav/BottomNav.js";
+import { BottomNav } from "@app/Nav/BottomNav.js";
 
 export const App = (): JSX.Element => {
   const { getDevice } = useDeviceStore();

src/DeviceWrapper.tsx

@@ -1,10 +1,9 @@
-import type React from "react";
-
 import { DeviceContext } from "@core/providers/useDevice.js";
 import type { Device } from "@core/stores/deviceStore.js";
+import type { ReactNode } from "react";
 
 export interface DeviceWrapperProps {
-  children: React.ReactNode;
+  children: ReactNode;
   device?: Device;
 }
 

src/Nav/BottomNav.tsx

@@ -1,9 +1,8 @@
-import type React from "react";
-
 import { GitBranchIcon } from "@primer/octicons-react";
+import type { ReactNode } from "react";
 
 export interface BottomNavProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const BottomNav = ({ children }: BottomNavProps): JSX.Element => {

src/Nav/NavSpacer.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 export const NavSpacer = (): JSX.Element => {
   return <div className="h-1 w-10 rounded-full bg-accentMuted" />;
 };

src/Nav/PageNav.tsx

@@ -1,8 +1,6 @@
-import type React from "react";
+import type { ComponentType, SVGProps } from "react";
-import type { SVGProps } from "react";
+import { useDevice } from "@core/providers/useDevice.js";
-
+import type { Page } from "@core/stores/deviceStore.js";
-import { useDevice } from "@app/core/providers/useDevice.js";
-import type { Page } from "@app/core/stores/deviceStore.js";
 import {
   BeakerIcon,
   ChatBubbleBottomCenterTextIcon,
@@ -17,7 +15,7 @@ export const PageNav = (): JSX.Element => {
 
   interface NavLink {
     name: string;
-    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
     page: Page;
   }
 

src/PageRouter.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 import { useDevice } from "@core/providers/useDevice.js";
 import { ChannelsPage } from "@pages/Channels.js";
 import { ConfigPage } from "@pages/Config/index.js";

src/components/CommandPalette/GroupView.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 import type { Group } from "@components/CommandPalette/Index.js";
 import { Combobox } from "@headlessui/react";
 import { ChevronRightIcon } from "@heroicons/react/24/outline";

src/components/CommandPalette/Index.tsx

@@ -1,11 +1,8 @@
-import type React from "react";
+import { ComponentType, Fragment, SVGProps, useEffect, useState } from "react";
-import { Fragment, useEffect, useState } from "react";
-
 import { toast } from "react-hot-toast";
-
+import { useDevice } from "@core/providers/useDevice.js";
-import { useDevice } from "@app/core/providers/useDevice.js";
+import { useAppStore } from "@core/stores/appStore.js";
-import { useAppStore } from "@app/core/stores/appStore.js";
+import { useDeviceStore } from "@core/stores/deviceStore.js";
-import { useDeviceStore } from "@app/core/stores/deviceStore.js";
 import { GroupView } from "@components/CommandPalette/GroupView.js";
 import { NoResults } from "@components/CommandPalette/NoResults.js";
 import { PaletteTransition } from "@components/CommandPalette/PaletteTransition.js";
@@ -39,18 +36,17 @@ import {
   WindowIcon,
   XCircleIcon
 } from "@heroicons/react/24/outline";
-
+import { Blur } from "@components/generic/Blur.js";
-import { Blur } from "../generic/Blur.js";
+import { ThemeController } from "@components/generic/ThemeController.js";
-import { ThemeController } from "../generic/ThemeController.js";
 
 export interface Group {
   name: string;
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
   commands: Command[];
 }
 export interface Command {
   name: string;
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
   action?: () => void;
   subItems?: SubItem[];
   tags?: string[];

src/components/CommandPalette/NoResults.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 import { Mono } from "@components/generic/Mono.js";
 import { CommandLineIcon } from "@heroicons/react/24/outline";
 

src/components/CommandPalette/PaletteTransition.tsx

@@ -1,10 +1,8 @@
-import type React from "react";
+import { Fragment, ReactNode } from "react";
-import { Fragment } from "react";
-
 import { Transition } from "@headlessui/react";
 
 export interface PaletteTransitionProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const PaletteTransition = ({

src/components/CommandPalette/SearchBox.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 import { Combobox } from "@headlessui/react";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 

src/components/CommandPalette/SearchResult.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 import type { Group } from "@components/CommandPalette/Index.js";
 import { Combobox } from "@headlessui/react";
 import { ChevronRightIcon } from "@heroicons/react/24/outline";

src/components/DeviceSelector.tsx

@@ -1,17 +1,15 @@
-import type React from "react";
+import { useAppStore } from "@core/stores/appStore.js";
-
+import { useDeviceStore } from "@core/stores/deviceStore.js";
-import { useAppStore } from "@app/core/stores/appStore.js";
-import { useDeviceStore } from "@app/core/stores/deviceStore.js";
 import { NavSpacer } from "@app/Nav/NavSpacer.js";
 import { PageNav } from "@app/Nav/PageNav.js";
-import { Mono } from "@components/generic/Mono.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { MoonIcon, SunIcon } from "@primer/octicons-react";
 
 export const DeviceSelector = (): JSX.Element => {
   const { getDevices } = useDeviceStore();
-  const { selectedDevice, setSelectedDevice, darkMode, setDarkMode } = useAppStore();
+  const { selectedDevice, setSelectedDevice, darkMode, setDarkMode } =
+    useAppStore();
 
   return (
     <div className="flex h-full w-14 items-center gap-3 bg-backgroundPrimary pt-3 [writing-mode:vertical-rl]">
@@ -55,12 +53,12 @@ export const DeviceSelector = (): JSX.Element => {
 
       <NavSpacer />
 
-      <div onClick={() => setDarkMode(!darkMode)} className="bg-backgroundPrimary py-5 px-4 hover:brightness-hover active:brightness-press text-textSecondary hover:text-textPrimary">{
+      <div
-        darkMode ? (
+        onClick={() => setDarkMode(!darkMode)}
-          <SunIcon className="w-4" />
+        className="bg-backgroundPrimary py-5 px-4 text-textSecondary hover:text-textPrimary hover:brightness-hover active:brightness-press"
-        ) : (
+      >
-          <MoonIcon className="w-4" />
+        {darkMode ? <SunIcon className="w-4" /> : <MoonIcon className="w-4" />}
-        )}</div>
+      </div>
 
       <img
         src={darkMode ? "Logo_White.svg" : "Logo_Black.svg"}

src/components/Dialog/DialogManager.tsx

@@ -1,11 +1,8 @@
-import type React from "react";
+import { useDevice } from "@core/providers/useDevice.js";
-
-import { useDevice } from "@app/core/providers/useDevice.js";
 import { QRDialog } from "@components/Dialog/QRDialog.js";
-
+import { RebootDialog } from "@components/Dialog/RebootDialog.js";
-import { RebootDialog } from "./RebootDialog.js";
+import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.js";
-import { ShutdownDialog } from "./ShutdownDialog.js";
+import { ImportDialog } from "@components/Dialog/ImportDialog.js";
-import { ImportDialog } from "./ImportDialog.js";
 
 export const DialogManager = (): JSX.Element => {
   const { channels, config, dialog, setDialogOpen } = useDevice();

src/components/Dialog/ImportDialog.tsx

@@ -1,20 +1,14 @@
-import type React from "react";
 import { useEffect, useState } from "react";
-
+import { toByteArray } from "base64-js";
-import { fromByteArray, toByteArray } from "base64-js";
-import { toast } from "react-hot-toast";
-import { QRCode } from "react-qrcode-logo";
-
 import { Checkbox } from "@components/form/Checkbox.js";
 import { Input } from "@components/form/Input.js";
 import { Dialog } from "@components/generic/Dialog.js";
-import { ClipboardIcon } from "@heroicons/react/24/outline";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { Select } from "../form/Select.js";
+import { Select } from "@components/form/Select.js";
-import { renderOptions } from "@app/core/utils/selectEnumOptions.js";
+import { renderOptions } from "@core/utils/selectEnumOptions.js";
-import { Toggle } from "../form/Toggle.js";
+import { Toggle } from "@components/form/Toggle.js";
-import { Button } from "../form/Button.js";
+import { Button } from "@components/form/Button.js";
-import { useDevice } from "@app/core/providers/useDevice.js";
+import { useDevice } from "@core/providers/useDevice.js";
 
 export interface ImportDialogProps {
   isOpen: boolean;

src/components/Dialog/QRDialog.tsx

@@ -1,10 +1,7 @@
-import type React from "react";
 import { useEffect, useState } from "react";
-
 import { fromByteArray } from "base64-js";
 import { toast } from "react-hot-toast";
 import { QRCode } from "react-qrcode-logo";
-
 import { Checkbox } from "@components/form/Checkbox.js";
 import { Input } from "@components/form/Input.js";
 import { Dialog } from "@components/generic/Dialog.js";

src/components/Dialog/RebootDialog.tsx

@@ -1,12 +1,9 @@
-import type React from "react";
 import { useState } from "react";
-
+import { useDevice } from "@core/providers/useDevice.js";
-import { useDevice } from "@app/core/providers/useDevice.js";
 import { Dialog } from "@components/generic/Dialog.js";
 import { ArrowPathIcon, ClockIcon } from "@heroicons/react/24/outline";
-
+import { Button } from "@components/form/Button.js";
-import { Button } from "../form/Button.js";
+import { Input } from "@components/form/Input.js";
-import { Input } from "../form/Input.js";
 
 export interface RebootDialogProps {
   isOpen: boolean;

src/components/Dialog/ShutdownDialog.tsx

@@ -1,12 +1,9 @@
-import type React from "react";
 import { useState } from "react";
-
+import { useDevice } from "@core/providers/useDevice.js";
-import { useDevice } from "@app/core/providers/useDevice.js";
 import { Dialog } from "@components/generic/Dialog.js";
 import { ClockIcon, PowerIcon } from "@heroicons/react/24/outline";
-
+import { Button } from "@components/form/Button.js";
-import { Button } from "../form/Button.js";
+import { Input } from "@components/form/Input.js";
-import { Input } from "../form/Input.js";
 
 export interface ShutdownDialogProps {
   isOpen: boolean;

src/components/Drawer/Metrics.tsx

@@ -1,7 +1,4 @@
 import "chartjs-adapter-date-fns";
-
-import type React from "react";
-
 import {
   Chart as ChartJS,
   Filler,
@@ -13,8 +10,7 @@ import {
   Tooltip
 } from "chart.js";
 import { Line } from "react-chartjs-2";
-
+import { useDevice } from "@core/providers/useDevice.js";
-import { useDevice } from "@app/core/providers/useDevice.js";
 
 export const Metrics = (): JSX.Element => {
   const { nodes, hardware } = useDevice();

src/components/Drawer/Sensor.tsx

@@ -1,7 +1,5 @@
 import "chartjs-adapter-date-fns";
 
-import type React from "react";
-
 import {
   Chart as ChartJS,
   Filler,
@@ -14,7 +12,7 @@ import {
 } from "chart.js";
 import { Line } from "react-chartjs-2";
 
-import { useDevice } from "@app/core/providers/useDevice.js";
+import { useDevice } from "@core/providers/useDevice.js";
 
 export const Sensor = (): JSX.Element => {
   const { nodes, hardware } = useDevice();

src/components/Drawer/index.tsx

@@ -1,6 +1,4 @@
-import type React from "react";
 import { useState } from "react";
-
 import { Metrics } from "@components/Drawer/Metrics.js";
 import { Notifications } from "@components/Drawer/Notifications.js";
 import { Sensor } from "@components/Drawer/Sensor.js";

src/components/NewDevice.tsx

@@ -4,7 +4,7 @@ import { TabbedContent, TabType } from "@components/generic/TabbedContent.js";
 import { BLE } from "@components/PageComponents/Connect/BLE.js";
 import { HTTP } from "@components/PageComponents/Connect/HTTP.js";
 import { Serial } from "@components/PageComponents/Connect/Serial.js";
-import { useAppStore } from "@app/core/stores/appStore.js";
+import { useAppStore } from "@core/stores/appStore.js";
 import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
 
 export const NewDevice = () => {
@@ -37,9 +37,7 @@ export const NewDevice = () => {
 
   return (
     <div className="m-auto h-96 w-96">
-      <TabbedContent
+      <TabbedContent tabs={tabs} />
-        tabs={tabs}
-      />
     </div>
   );
 };

src/components/PageComponents/AppConfig/Map.tsx

@@ -1,13 +1,10 @@
-import type React from "react";
-
 import { Controller, useFieldArray, useForm } from "react-hook-form";
-
+import { Button } from "@components/form/Button.js";
-import { Button } from "@app/components/form/Button.js";
+import { IconButton } from "@components/form/IconButton.js";
-import { IconButton } from "@app/components/form/IconButton.js";
+import { InfoWrapper } from "@components/form/InfoWrapper.js";
-import { InfoWrapper } from "@app/components/form/InfoWrapper.js";
+import { Input } from "@components/form/Input.js";
-import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@components/form/Toggle.js";
-import { Toggle } from "@app/components/form/Toggle.js";
+import { useAppStore } from "@core/stores/appStore.js";
-import { useAppStore } from "@app/core/stores/appStore.js";
 import { MapValidation } from "@app/validation/appConfig/map.js";
 import { Form } from "@components/form/Form";
 import { TrashIcon } from "@heroicons/react/24/outline";

src/components/PageComponents/Channel.tsx

@@ -1,10 +1,7 @@
-import type React from "react";
 import { useEffect, useState } from "react";
-
 import { fromByteArray, toByteArray } from "base64-js";
 import { Controller, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
-
 import { ChannelSettingsValidation } from "@app/validation/channelSettings.js";
 import { Form } from "@components/form/Form";
 import { Input } from "@components/form/Input.js";

src/components/PageComponents/Config/Bluetooth.tsx

@@ -1,12 +1,8 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm, useWatch } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { Input } from "@components/form/Input.js";
-
+import { Select } from "@components/form/Select.js";
-import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@components/form/Toggle.js";
-import { Select } from "@app/components/form/Select.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { BluetoothValidation } from "@app/validation/config/bluetooth.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -17,17 +13,12 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 export const Bluetooth = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
 
-  const {
+  const { register, handleSubmit, control, reset } =
-    register,
+    useForm<BluetoothValidation>({
-    handleSubmit,
+      mode: "onChange",
-    formState: { errors, isDirty },
+      defaultValues: config.bluetooth,
-    control,
+      resolver: classValidatorResolver(BluetoothValidation)
-    reset
+    });
-  } = useForm<BluetoothValidation>({
-    mode: "onChange",
-    defaultValues: config.bluetooth,
-    resolver: classValidatorResolver(BluetoothValidation)
-  });
 
   useEffect(() => {
     reset(config.bluetooth);

src/components/PageComponents/Config/Device.tsx

@@ -1,12 +1,8 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { Input } from "@components/form/Input.js";
-
+import { Select } from "@components/form/Select.js";
-import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@components/form/Toggle.js";
-import { Select } from "@app/components/form/Select.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { DeviceValidation } from "@app/validation/config/device.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -16,13 +12,7 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const Device = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
-  const {
+  const { register, handleSubmit, control, reset } = useForm<DeviceValidation>({
-    register,
-    handleSubmit,
-    formState: { errors, isDirty },
-    control,
-    reset
-  } = useForm<DeviceValidation>({
     mode: "onChange",
     defaultValues: config.device,
     resolver: classValidatorResolver(DeviceValidation)
@@ -80,14 +70,12 @@ export const Device = (): JSX.Element => {
         label="Button Pin"
         description="Button pin override"
         type="number"
-        error={errors.buttonGpio?.message}
         {...register("buttonGpio", { valueAsNumber: true })}
       />
       <Input
         label="Buzzer Pin"
         description="Buzzer pin override"
         type="number"
-        error={errors.buzzerGpio?.message}
         {...register("buzzerGpio", { valueAsNumber: true })}
       />
     </Form>

src/components/PageComponents/Config/Display.tsx

@@ -1,12 +1,8 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { Input } from "@components/form/Input.js";
-
+import { Select } from "@components/form/Select.js";
-import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@components/form/Toggle.js";
-import { Select } from "@app/components/form/Select.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { DisplayValidation } from "@app/validation/config/display.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -16,17 +12,13 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const Display = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
-  const {
+  const { register, handleSubmit, reset, control } = useForm<DisplayValidation>(
-    register,
+    {
-    handleSubmit,
+      mode: "onChange",
-    formState: { errors, isDirty },
+      defaultValues: config.display,
-    reset,
+      resolver: classValidatorResolver(DisplayValidation)
-    control
+    }
-  } = useForm<DisplayValidation>({
+  );
-    mode: "onChange",
-    defaultValues: config.display,
-    resolver: classValidatorResolver(DisplayValidation)
-  });
 
   useEffect(() => {
     reset(config.display);

src/components/PageComponents/Config/LoRa.tsx

@@ -1,13 +1,9 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm, useWatch } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { FormSection } from "@components/form/FormSection.js";
-
+import { Input } from "@components/form/Input.js";
-import { FormSection } from "@app/components/form/FormSection.js";
+import { Select } from "@components/form/Select.js";
-import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@components/form/Toggle.js";
-import { Select } from "@app/components/form/Select.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { LoRaValidation } from "@app/validation/config/lora.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -18,13 +14,7 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 export const LoRa = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
 
-  const {
+  const { register, handleSubmit, control, reset } = useForm<LoRaValidation>({
-    register,
-    handleSubmit,
-    formState: { errors, isDirty },
-    control,
-    reset
-  } = useForm<LoRaValidation>({
     mode: "onChange",
     defaultValues: config.lora,
     resolver: classValidatorResolver(LoRaValidation)
@@ -81,7 +71,6 @@ export const LoRa = (): JSX.Element => {
               description="Channel bandwidth in MHz"
               type="number"
               suffix="MHz"
-              error={errors.bandwidth?.message}
               {...register("bandwidth", {
                 valueAsNumber: true
               })}
@@ -91,7 +80,6 @@ export const LoRa = (): JSX.Element => {
               description="Indicates the number of chirps per symbol"
               type="number"
               suffix="CPS"
-              error={errors.spreadFactor?.message}
               {...register("spreadFactor", {
                 valueAsNumber: true
               })}
@@ -100,7 +88,6 @@ export const LoRa = (): JSX.Element => {
               label="Coding Rate"
               description="The denominator of the coding rate"
               type="number"
-              error={errors.codingRate?.message}
               {...register("codingRate", {
                 valueAsNumber: true
               })}
@@ -132,14 +119,12 @@ export const LoRa = (): JSX.Element => {
           label="Transmit Power"
           description="Max transmit power in dBm"
           type="number"
-          error={errors.txPower?.message}
           {...register("txPower", { valueAsNumber: true })}
         />
         <Input
           label="Channel Number"
           description="LoRa channel number"
           type="number"
-          error={errors.channelNum?.message}
           {...register("channelNum", { valueAsNumber: true })}
         />
         <Input
@@ -147,7 +132,6 @@ export const LoRa = (): JSX.Element => {
           description="Frequency offset to correct for crystal calibration errors"
           suffix="Hz"
           type="number"
-          error={errors.frequencyOffset?.message}
           {...register("frequencyOffset", { valueAsNumber: true })}
         />
         <Controller
@@ -168,7 +152,6 @@ export const LoRa = (): JSX.Element => {
         description="Maximum number of hops"
         suffix="Hops"
         type="number"
-        error={errors.hopLimit?.message}
         {...register("hopLimit", { valueAsNumber: true })}
       />
     </Form>

src/components/PageComponents/Config/Network.tsx

@@ -1,15 +1,11 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm, useWatch } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { FormSection } from "@components/form/FormSection.js";
-
+import { Input } from "@components/form/Input.js";
-import { FormSection } from "@app/components/form/FormSection.js";
+import { IPInput } from "@components/form/IPInput.js";
-import { Input } from "@app/components/form/Input.js";
+import { Select } from "@components/form/Select.js";
-import { IPInput } from "@app/components/form/IPInput.js";
+import { Toggle } from "@components/form/Toggle.js";
-import { Select } from "@app/components/form/Select.js";
+import { renderOptions } from "@core/utils/selectEnumOptions.js";
-import { Toggle } from "@app/components/form/Toggle.js";
-import { renderOptions } from "@app/core/utils/selectEnumOptions.js";
 import { NetworkValidation } from "@app/validation/config/network.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -19,17 +15,13 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const Network = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
-  const {
+  const { register, handleSubmit, control, reset } = useForm<NetworkValidation>(
-    register,
+    {
-    handleSubmit,
+      mode: "onChange",
-    formState: { errors, isDirty },
+      defaultValues: config.network,
-    control,
+      resolver: classValidatorResolver(NetworkValidation)
-    reset
+    }
-  } = useForm<NetworkValidation>({
+  );
-    mode: "onChange",
-    defaultValues: config.network,
-    resolver: classValidatorResolver(NetworkValidation)
-  });
 
   const wifiEnabled = useWatch({
     control,
@@ -66,19 +58,6 @@ export const Network = (): JSX.Element => {
 
   return (
     <Form onSubmit={onSubmit}>
-      <ErrorMessage errors={errors} name="wifiEnabled" />
-      <ErrorMessage errors={errors} name="wifiMode" />
-      <ErrorMessage errors={errors} name="wifiSsid" />
-      <ErrorMessage errors={errors} name="wifiPsk" />
-      <ErrorMessage errors={errors} name="ntpServer" />
-      <ErrorMessage errors={errors} name="ethEnabled" />
-      <ErrorMessage errors={errors} name="addressMode" />
-      <ErrorMessage errors={errors} name="ethConfig" />
-      <ErrorMessage errors={errors} name="ip" />
-      <ErrorMessage errors={errors} name="gateway" />
-      <ErrorMessage errors={errors} name="subnet" />
-      <ErrorMessage errors={errors} name="dns" />
-
       <FormSection title="WiFi Config">
         <Controller
           name="wifiEnabled"
@@ -95,7 +74,6 @@ export const Network = (): JSX.Element => {
         <Input
           label="SSID"
           description="Network name"
-          error={errors.wifiSsid?.message}
           disabled={!wifiEnabled}
           {...register("wifiSsid", { disabled: !wifiEnabled })}
         />
@@ -103,7 +81,6 @@ export const Network = (): JSX.Element => {
           label="PSK"
           type="password"
           description="Network password"
-          error={errors.wifiPsk?.message}
           disabled={!wifiEnabled}
           {...register("wifiPsk", { disabled: !wifiEnabled })}
         />
@@ -138,26 +115,21 @@ export const Network = (): JSX.Element => {
             <IPInput
               label="IP"
               description="IP Address"
-              error={errors.ipv4Config?.ip?.message}
               {...register("ipv4Config.ip", { valueAsNumber: true })}
             />
             <IPInput
               label="Gateway"
               description="Default Gateway"
-              error={errors.ipv4Config?.gateway?.message}
               {...register("ipv4Config.gateway", { valueAsNumber: true })}
             />
             <IPInput
               label="Subnet"
               description="Subnet Mask"
-              error={errors.ipv4Config?.subnet?.message}
               {...register("ipv4Config.subnet", { valueAsNumber: true })}
             />
             <IPInput
               label="DNS"
-              // type="number" //prevent
               description="DNS Server"
-              error={errors.ipv4Config?.dns?.message}
               {...register("ipv4Config.dns", { valueAsNumber: true })}
             />
           </>
@@ -166,13 +138,11 @@ export const Network = (): JSX.Element => {
       <Input
         label="NTP Server"
         description="NTP server for time synchronization"
-        error={errors.ntpServer?.message}
         {...register("ntpServer")}
       />
       <Input
         label="Rsyslog Server"
         description="Rsyslog server for external logging"
-        error={errors.rsyslogServer?.message}
         {...register("rsyslogServer")}
       />
     </Form>

src/components/PageComponents/Config/Position.tsx

@@ -1,13 +1,9 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm, useWatch } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { BitwiseSelect } from "@components/form/BitwiseSelect.js";
-
+import { FormSection } from "@components/form/FormSection.js";
-import { BitwiseSelect } from "@app/components/form/BitwiseSelect.js";
+import { Input } from "@components/form/Input.js";
-import { FormSection } from "@app/components/form/FormSection.js";
+import { Toggle } from "@components/form/Toggle.js";
-import { Input } from "@app/components/form/Input.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { PositionValidation } from "@app/validation/config/position.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -19,22 +15,17 @@ export const Position = (): JSX.Element => {
 
   const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
 
-  const {
+  const { register, handleSubmit, reset, control } =
-    register,
+    useForm<PositionValidation>({
-    handleSubmit,
+      mode: "onChange",
-    formState: { errors, isDirty },
+      defaultValues: {
-    reset,
+        fixedAlt: myNode?.data.position?.altitude,
-    control
+        fixedLat: (myNode?.data.position?.latitudeI ?? 0) / 1e7,
-  } = useForm<PositionValidation>({
+        fixedLng: (myNode?.data.position?.longitudeI ?? 0) / 1e7,
-    mode: "onChange",
+        ...config.position
-    defaultValues: {
+      },
-      fixedAlt: myNode?.data.position?.altitude,
+      resolver: classValidatorResolver(PositionValidation)
-      fixedLat: (myNode?.data.position?.latitudeI ?? 0) / 1e7,
+    });
-      fixedLng: (myNode?.data.position?.longitudeI ?? 0) / 1e7,
-      ...config.position
-    },
-    resolver: classValidatorResolver(PositionValidation)
-  });
 
   const fixedPositionEnabled = useWatch({
     control,
@@ -153,7 +144,6 @@ export const Position = (): JSX.Element => {
             <BitwiseSelect
               label="Position Flags"
               description="Configuration options for POSITION messages"
-              error={error?.message}
               selected={value}
               decodeEnun={Protobuf.Config_PositionConfig_PositionFlags}
               onChange={onChange}
@@ -180,7 +170,6 @@ export const Position = (): JSX.Element => {
               suffix="m"
               label="Altitude"
               type="number"
-              error={errors.fixedAlt?.message}
               disabled={!fixedPositionEnabled}
               {...register("fixedAlt", { valueAsNumber: true })}
             />
@@ -188,7 +177,6 @@ export const Position = (): JSX.Element => {
               suffix="°"
               label="Latitude"
               type="number"
-              error={errors.fixedLat?.message}
               disabled={!fixedPositionEnabled}
               {...register("fixedLat", { valueAsNumber: true })}
             />
@@ -196,7 +184,6 @@ export const Position = (): JSX.Element => {
               suffix="°"
               label="Longitude"
               type="number"
-              error={errors.fixedLng?.message}
               disabled={!fixedPositionEnabled}
               {...register("fixedLng", { valueAsNumber: true })}
             />
@@ -209,7 +196,6 @@ export const Position = (): JSX.Element => {
           label="Broadcast Interval"
           description="How often your position is sent out over the mesh"
           type="number"
-          error={errors.positionBroadcastSecs?.message}
           {...register("positionBroadcastSecs", { valueAsNumber: true })}
         />
         <Input
@@ -217,7 +203,6 @@ export const Position = (): JSX.Element => {
           label="GPS Update Interval"
           description="How often a GPS fix should be acquired"
           type="number"
-          error={errors.gpsUpdateInterval?.message}
           {...register("gpsUpdateInterval", { valueAsNumber: true })}
         />
         <Input
@@ -225,7 +210,6 @@ export const Position = (): JSX.Element => {
           label="Fix Attempt Duration"
           description="How long the device will try to get a fix for"
           type="number"
-          error={errors.gpsAttemptTime?.message}
           {...register("gpsAttemptTime", { valueAsNumber: true })}
         />
       </FormSection>
@@ -233,14 +217,12 @@ export const Position = (): JSX.Element => {
         label="RX Pin"
         description="GPS Module RX pin override"
         type="number"
-        error={errors.rxGpio?.message}
         {...register("rxGpio", { valueAsNumber: true })}
       />
       <Input
         label="TX Pin"
         description="GPS Module TX pin override"
         type="number"
-        error={errors.txGpio?.message}
         {...register("txGpio", { valueAsNumber: true })}
       />
     </Form>

src/components/PageComponents/Config/Power.tsx

@@ -1,12 +1,8 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { FormSection } from "@components/form/FormSection.js";
-
+import { Input } from "@components/form/Input.js";
-import { FormSection } from "@app/components/form/FormSection.js";
+import { Toggle } from "@components/form/Toggle.js";
-import { Input } from "@app/components/form/Input.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { PowerValidation } from "@app/validation/config/power.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -15,13 +11,7 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const Power = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
-  const {
+  const { register, handleSubmit, reset, control } = useForm<PowerValidation>({
-    register,
-    handleSubmit,
-    formState: { errors, isDirty },
-    reset,
-    control
-  } = useForm<PowerValidation>({
     mode: "onChange",
     defaultValues: config.power,
     resolver: classValidatorResolver(PowerValidation)
@@ -49,7 +39,6 @@ export const Power = (): JSX.Element => {
         description="Automatically shutdown node after this long when on battery, 0 for indefinite"
         suffix="Seconds"
         type="number"
-        error={errors.onBatteryShutdownAfterSecs?.message}
         {...register("onBatteryShutdownAfterSecs", { valueAsNumber: true })}
       />
       <Controller
@@ -68,7 +57,6 @@ export const Power = (): JSX.Element => {
         label="ADC Multiplier Override ratio"
         description="Used for tweaking battery voltage reading"
         type="number"
-        error={errors.adcMultiplierOverride?.message}
         {...register("adcMultiplierOverride", { valueAsNumber: true })}
       />
       <FormSection title="Sleep Settings">
@@ -77,7 +65,6 @@ export const Power = (): JSX.Element => {
           description="Minimum amount of time the device will stay awake for after receiving a packet"
           suffix="Seconds"
           type="number"
-          error={errors.minWakeSecs?.message}
           {...register("minWakeSecs", { valueAsNumber: true })}
         />
         <Input
@@ -85,7 +72,6 @@ export const Power = (): JSX.Element => {
           description="The device will enter super deep sleep after this time"
           suffix="Seconds"
           type="number"
-          error={errors.meshSdsTimeoutSecs?.message}
           {...register("meshSdsTimeoutSecs", { valueAsNumber: true })}
         />
         <Input
@@ -93,7 +79,6 @@ export const Power = (): JSX.Element => {
           description="How long the device will be in super deep sleep for"
           suffix="Seconds"
           type="number"
-          error={errors.sdsSecs?.message}
           {...register("sdsSecs", { valueAsNumber: true })}
         />
         <Input
@@ -101,7 +86,6 @@ export const Power = (): JSX.Element => {
           description="How long the device will be in light sleep for"
           suffix="Seconds"
           type="number"
-          error={errors.lsSecs?.message}
           {...register("lsSecs", { valueAsNumber: true })}
         />
       </FormSection>
@@ -110,7 +94,6 @@ export const Power = (): JSX.Element => {
         description="If the device does not receive a Bluetooth connection, the BLE radio will be disabled after this long"
         suffix="Seconds"
         type="number"
-        error={errors.waitBluetoothSecs?.message}
         {...register("waitBluetoothSecs", { valueAsNumber: true })}
       />
     </Form>

src/components/PageComponents/Config/User.tsx

@@ -1,18 +1,14 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { base16 } from "rfc4648";
-
+import { Input } from "@components/form/Input.js";
-import { Input } from "@app/components/form/Input.js";
+import { Select } from "@components/form/Select.js";
-import { Select } from "@app/components/form/Select.js";
+import { Toggle } from "@components/form/Toggle.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { UserValidation } from "@app/validation/config/user.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
 import { renderOptions } from "@core/utils/selectEnumOptions.js";
-import { ErrorMessage } from "@hookform/error-message";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
@@ -21,13 +17,7 @@ export const User = (): JSX.Element => {
 
   const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
 
-  const {
+  const { register, handleSubmit, reset, control } = useForm<UserValidation>({
-    register,
-    handleSubmit,
-    formState: { errors, isDirty },
-    reset,
-    control
-  } = useForm<UserValidation>({
     defaultValues: myNode?.data.user,
     resolver: classValidatorResolver(UserValidation)
   });
@@ -61,12 +51,7 @@ export const User = (): JSX.Element => {
   });
 
   return (
-    <Form
+    <Form onSubmit={onSubmit}>
-      onSubmit={onSubmit}
-    >
-      <ErrorMessage errors={errors} name="longName" />
-      <ErrorMessage errors={errors} name="shortName" />
-      <ErrorMessage errors={errors} name="isLicensed" />
       <Input
         label="Device Name"
         description="Personalised name for this device."
@@ -105,7 +90,6 @@ export const User = (): JSX.Element => {
         label="Device ID"
         disabled
         description="Preset unique identifier for this device."
-        error={errors.id?.message}
         value={myNode?.data.user?.id}
       />
       <Select

src/components/PageComponents/Connect/BLE.tsx

@@ -1,7 +1,5 @@
-import type React from "react";
 import { useCallback, useEffect, useState } from "react";
-
+import { Mono } from "@components/generic/Mono.js";
-import { Mono } from "@app/components/generic/Mono.js";
 import { Button } from "@components/form/Button.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";

src/components/PageComponents/Connect/HTTP.tsx

@@ -1,9 +1,6 @@
-import type React from "react";
-
 import { Controller, useForm, useWatch } from "react-hook-form";
-
+import { Input } from "@components/form/Input.js";
-import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@components/form/Toggle.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { Button } from "@components/form/Button.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";

src/components/PageComponents/Connect/Serial.tsx

@@ -1,7 +1,5 @@
-import type React from "react";
 import { useCallback, useEffect, useState } from "react";
-
+import { Mono } from "@components/generic/Mono.js";
-import { Mono } from "@app/components/generic/Mono.js";
 import { Button } from "@components/form/Button.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";

src/components/PageComponents/Map/MapControlls.tsx

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 
 import { useMap } from "react-map-gl";
 
-import { useDevice } from "@app/core/providers/useDevice.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import {
   MagnifyingGlassMinusIcon,
   MagnifyingGlassPlusIcon,

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 import { Message } from "@components/PageComponents/Messages/Message.js";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
 import { useDevice } from "@core/providers/useDevice.js";

src/components/PageComponents/Messages/Message.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 import { WaypointMessage } from "@components/PageComponents/Messages/WaypointMessage.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import type { AllMessageTypes } from "@core/stores/deviceStore.js";

src/components/PageComponents/Messages/MessageInput.tsx

@@ -1,7 +1,5 @@
-import type React from "react";
+import { IconButton } from "@components/form/IconButton.js";
-
+import { Input } from "@components/form/Input.js";
-import { IconButton } from "@app/components/form/IconButton.js";
-import { Input } from "@app/components/form/Input.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import type { Channel } from "@core/stores/deviceStore.js";
 import { MapPinIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";

src/components/PageComponents/Messages/NewLocationMessage.tsx

@@ -1,7 +1,5 @@
-import type React from "react";
+import { Input } from "@components/form/Input.js";
-
+import { Select } from "@components/form/Select.js";
-import { Input } from "@app/components/form/Input.js";
-import { Select } from "@app/components/form/Select.js";
 import { Button } from "@components/form/Button.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import { renderOptions } from "@core/utils/selectEnumOptions.js";

src/components/PageComponents/Messages/WaypointMessage.tsx

@@ -1,6 +1,4 @@
-import type React from "react";
+import { useDevice } from "@core/providers/useDevice.js";
-
-import { useDevice } from "@app/core/providers/useDevice.js";
 import { toMGRS } from "@core/utils/toMGRS.js";
 import { MapPinIcon } from "@heroicons/react/24/outline";
 

src/components/PageComponents/ModuleConfig/Audio.tsx

@@ -1,12 +1,8 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { Input } from "@components/form/Input.js";
-
+import { Select } from "@components/form/Select.js";
-import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@components/form/Toggle.js";
-import { Select } from "@app/components/form/Select.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { AudioValidation } from "@app/validation/moduleConfig/audio.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -15,14 +11,9 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const Audio = (): JSX.Element => {
-  const { moduleConfig, connection, setModuleConfig } = useDevice();
+  const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const {
+  const { register, handleSubmit, reset, control } = useForm<AudioValidation>({
-    register,
+    mode: "onChange",
-    handleSubmit,
-    formState: { isDirty },
-    reset,
-    control
-  } = useForm<AudioValidation>({
     defaultValues: moduleConfig.audio,
     resolver: classValidatorResolver(AudioValidation)
   });
@@ -32,34 +23,14 @@ export const Audio = (): JSX.Element => {
   }, [reset, moduleConfig.audio]);
 
   const onSubmit = handleSubmit((data) => {
-    if (connection) {
+    setWorkingModuleConfig(
-      void toast.promise(
+      new Protobuf.ModuleConfig({
-        connection
+        payloadVariant: {
-          .setModuleConfig(
+          case: "audio",
-            new Protobuf.ModuleConfig({
+          value: data
-              payloadVariant: {
-                case: "audio",
-                value: data
-              }
-            })
-          )
-          .then(() =>
-            setModuleConfig(
-              new Protobuf.ModuleConfig({
-                payloadVariant: {
-                  case: "audio",
-                  value: data
-                }
-              })
-            )
-          ),
-        {
-          loading: "Saving...",
-          success: "Saved Audio Config, Restarting Node",
-          error: "No response received"
         }
-      );
+      })
-    }
+    );
   });
 
   return (

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -1,12 +1,8 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm, useWatch } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { Input } from "@components/form/Input.js";
-
+import { Select } from "@components/form/Select.js";
-import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@components/form/Toggle.js";
-import { Select } from "@app/components/form/Select.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -15,7 +11,7 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const CannedMessage = (): JSX.Element => {
-  const { moduleConfig, connection, setModuleConfig } = useDevice();
+  const { moduleConfig, setWorkingModuleConfig } = useDevice();
   const {
     register,
     handleSubmit,
@@ -23,6 +19,7 @@ export const CannedMessage = (): JSX.Element => {
     reset,
     control
   } = useForm<CannedMessageValidation>({
+    mode: "onChange",
     defaultValues: moduleConfig.cannedMessage,
     resolver: classValidatorResolver(CannedMessageValidation)
   });
@@ -38,34 +35,14 @@ export const CannedMessage = (): JSX.Element => {
   }, [reset, moduleConfig.cannedMessage]);
 
   const onSubmit = handleSubmit((data) => {
-    if (connection) {
+    setWorkingModuleConfig(
-      void toast.promise(
+      new Protobuf.ModuleConfig({
-        connection
+        payloadVariant: {
-          .setModuleConfig(
+          case: "cannedMessage",
-            new Protobuf.ModuleConfig({
+          value: data
-              payloadVariant: {
-                case: "cannedMessage",
-                value: data
-              }
-            })
-          )
-          .then(() =>
-            setModuleConfig(
-              new Protobuf.ModuleConfig({
-                payloadVariant: {
-                  case: "cannedMessage",
-                  value: data
-                }
-              })
-            )
-          ),
-        {
-          loading: "Saving...",
-          success: "Saved Canned Message Config, Restarting Node",
-          error: "No response received"
         }
-      );
+      })
-    }
+    );
   });
 
   return (

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -1,11 +1,7 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm, useWatch } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { Input } from "@components/form/Input.js";
-
+import { Toggle } from "@components/form/Toggle.js";
-import { Input } from "@app/components/form/Input.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -13,50 +9,26 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const ExternalNotification = (): JSX.Element => {
-  const { moduleConfig, connection, setModuleConfig } = useDevice();
+  const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const {
+  const { register, handleSubmit, reset, control } =
-    register,
+    useForm<ExternalNotificationValidation>({
-    handleSubmit,
+      mode: "onChange",
-    formState: { errors, isDirty },
+      defaultValues: moduleConfig.externalNotification,
-    reset,
+      resolver: classValidatorResolver(ExternalNotificationValidation)
-    control
+    });
-  } = useForm<ExternalNotificationValidation>({
-    defaultValues: moduleConfig.externalNotification,
-    resolver: classValidatorResolver(ExternalNotificationValidation)
-  });
   useEffect(() => {
     reset(moduleConfig.externalNotification);
   }, [reset, moduleConfig.externalNotification]);
 
   const onSubmit = handleSubmit((data) => {
-    if (connection) {
+    setWorkingModuleConfig(
-      void toast.promise(
+      new Protobuf.ModuleConfig({
-        connection
+        payloadVariant: {
-          .setModuleConfig(
+          case: "externalNotification",
-            new Protobuf.ModuleConfig({
+          value: data
-              payloadVariant: {
-                case: "externalNotification",
-                value: data
-              }
-            })
-          )
-          .then(() =>
-            setModuleConfig(
-              new Protobuf.ModuleConfig({
-                payloadVariant: {
-                  case: "externalNotification",
-                  value: data
-                }
-              })
-            )
-          ),
-        {
-          loading: "Saving...",
-          success: "Saved External Notification Config, Restarting Node",
-          error: "No response received"
         }
-      );
+      })
-    }
+    );
   });
 
   const moduleEnabled = useWatch({

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -1,11 +1,7 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm, useWatch } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { Input } from "@components/form/Input.js";
-
+import { Toggle } from "@components/form/Toggle.js";
-import { Input } from "@app/components/form/Input.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -13,7 +9,7 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const MQTT = (): JSX.Element => {
-  const { moduleConfig, connection, setModuleConfig } = useDevice();
+  const { moduleConfig, setWorkingModuleConfig } = useDevice();
   const {
     register,
     handleSubmit,
@@ -21,6 +17,7 @@ export const MQTT = (): JSX.Element => {
     reset,
     control
   } = useForm<MQTTValidation>({
+    mode: "onChange",
     defaultValues: moduleConfig.mqtt,
     resolver: classValidatorResolver(MQTTValidation)
   });
@@ -36,34 +33,14 @@ export const MQTT = (): JSX.Element => {
   }, [reset, moduleConfig.mqtt]);
 
   const onSubmit = handleSubmit((data) => {
-    if (connection) {
+    setWorkingModuleConfig(
-      void toast.promise(
+      new Protobuf.ModuleConfig({
-        connection
+        payloadVariant: {
-          .setModuleConfig(
+          case: "mqtt",
-            new Protobuf.ModuleConfig({
+          value: data
-              payloadVariant: {
-                case: "mqtt",
-                value: data
-              }
-            })
-          )
-          .then(() =>
-            setModuleConfig(
-              new Protobuf.ModuleConfig({
-                payloadVariant: {
-                  case: "mqtt",
-                  value: data
-                }
-              })
-            )
-          ),
-        {
-          loading: "Saving...",
-          success: "Saved MQTT Config, Restarting Node",
-          error: "No response received"
         }
-      );
+      })
-    }
+    );
   });
 
   return (
@@ -82,7 +59,7 @@ export const MQTT = (): JSX.Element => {
       />
       <Input
         label="MQTT Server Address"
-        //description="Description"
+        description="Description"
         disabled={!moduleEnabled}
         {...register("address")}
       />

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -1,11 +1,7 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm, useWatch } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { Input } from "@components/form/Input.js";
-
+import { Toggle } from "@components/form/Toggle.js";
-import { Input } from "@app/components/form/Input.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -13,51 +9,27 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const RangeTest = (): JSX.Element => {
-  const { moduleConfig, connection, setModuleConfig } = useDevice();
+  const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const {
+  const { register, handleSubmit, reset, control } =
-    register,
+    useForm<RangeTestValidation>({
-    handleSubmit,
+      mode: "onChange",
-    formState: { errors, isDirty },
+      defaultValues: moduleConfig.rangeTest,
-    reset,
+      resolver: classValidatorResolver(RangeTestValidation)
-    control
+    });
-  } = useForm<RangeTestValidation>({
-    defaultValues: moduleConfig.rangeTest,
-    resolver: classValidatorResolver(RangeTestValidation)
-  });
 
   useEffect(() => {
     reset(moduleConfig.rangeTest);
   }, [reset, moduleConfig.rangeTest]);
 
   const onSubmit = handleSubmit((data) => {
-    if (connection) {
+    setWorkingModuleConfig(
-      void toast.promise(
+      new Protobuf.ModuleConfig({
-        connection
+        payloadVariant: {
-          .setModuleConfig(
+          case: "rangeTest",
-            new Protobuf.ModuleConfig({
+          value: data
-              payloadVariant: {
-                case: "rangeTest",
-                value: data
-              }
-            })
-          )
-          .then(() =>
-            setModuleConfig(
-              new Protobuf.ModuleConfig({
-                payloadVariant: {
-                  case: "rangeTest",
-                  value: data
-                }
-              })
-            )
-          ),
-        {
-          loading: "Saving...",
-          success: "Saved Range Test Config, Restarting Node",
-          error: "No response received"
         }
-      );
+      })
-    }
+    );
   });
 
   const moduleEnabled = useWatch({
@@ -67,9 +39,7 @@ export const RangeTest = (): JSX.Element => {
   });
 
   return (
-    <Form
+    <Form onSubmit={onSubmit}>
-      onSubmit={onSubmit}
-    >
       <Controller
         name="enabled"
         control={control}

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -1,28 +1,19 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm, useWatch } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { Input } from "@components/form/Input.js";
-
+import { Toggle } from "@components/form/Toggle.js";
-import { Input } from "@app/components/form/Input.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { SerialValidation } from "@app/validation/moduleConfig/serial.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { renderOptions } from "@app/core/utils/selectEnumOptions";
+import { renderOptions } from "@core/utils/selectEnumOptions";
-import { Select } from "@app/components/form/Select";
+import { Select } from "@components/form/Select";
 
 export const Serial = (): JSX.Element => {
-  const { moduleConfig, connection, setModuleConfig } = useDevice();
+  const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const {
+  const { register, handleSubmit, reset, control } = useForm<SerialValidation>({
-    register,
+    mode: "onChange",
-    handleSubmit,
-    formState: { errors, isDirty },
-    reset,
-    control
-  } = useForm<SerialValidation>({
     defaultValues: moduleConfig.serial,
     resolver: classValidatorResolver(SerialValidation)
   });
@@ -32,34 +23,14 @@ export const Serial = (): JSX.Element => {
   }, [reset, moduleConfig.serial]);
 
   const onSubmit = handleSubmit((data) => {
-    if (connection) {
+    setWorkingModuleConfig(
-      void toast.promise(
+      new Protobuf.ModuleConfig({
-        connection
+        payloadVariant: {
-          .setModuleConfig(
+          case: "serial",
-            new Protobuf.ModuleConfig({
+          value: data
-              payloadVariant: {
-                case: "serial",
-                value: data
-              }
-            })
-          )
-          .then(() =>
-            setModuleConfig(
-              new Protobuf.ModuleConfig({
-                payloadVariant: {
-                  case: "serial",
-                  value: data
-                }
-              })
-            )
-          ),
-        {
-          loading: "Saving...",
-          success: "Saved Serial Config, Restarting Node",
-          error: "No response received"
         }
-      );
+      })
-    }
+    );
   });
 
   const moduleEnabled = useWatch({

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -1,11 +1,7 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm, useWatch } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { Input } from "@components/form/Input.js";
-
+import { Toggle } from "@components/form/Toggle.js";
-import { Input } from "@app/components/form/Input.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -13,51 +9,27 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const StoreForward = (): JSX.Element => {
-  const { moduleConfig, connection, setModuleConfig } = useDevice();
+  const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const {
+  const { register, handleSubmit, reset, control } =
-    register,
+    useForm<StoreForwardValidation>({
-    handleSubmit,
+      mode: "onChange",
-    formState: { errors, isDirty },
+      defaultValues: moduleConfig.storeForward,
-    reset,
+      resolver: classValidatorResolver(StoreForwardValidation)
-    control
+    });
-  } = useForm<StoreForwardValidation>({
-    defaultValues: moduleConfig.storeForward,
-    resolver: classValidatorResolver(StoreForwardValidation)
-  });
 
   useEffect(() => {
     reset(moduleConfig.storeForward);
   }, [reset, moduleConfig.storeForward]);
 
   const onSubmit = handleSubmit((data) => {
-    if (connection) {
+    setWorkingModuleConfig(
-      void toast.promise(
+      new Protobuf.ModuleConfig({
-        connection
+        payloadVariant: {
-          .setModuleConfig(
+          case: "storeForward",
-            new Protobuf.ModuleConfig({
+          value: data
-              payloadVariant: {
-                case: "storeForward",
-                value: data
-              }
-            })
-          )
-          .then(() =>
-            setModuleConfig(
-              new Protobuf.ModuleConfig({
-                payloadVariant: {
-                  case: "storeForward",
-                  value: data
-                }
-              })
-            )
-          ),
-        {
-          loading: "Saving...",
-          success: "Saved Store & Forward Config, Restarting Node",
-          error: "No response received"
         }
-      );
+      })
-    }
+    );
   });
 
   const moduleEnabled = useWatch({

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -1,11 +1,7 @@
-import type React from "react";
 import { useEffect } from "react";
-
 import { Controller, useForm } from "react-hook-form";
-import { toast } from "react-hot-toast";
+import { Input } from "@components/form/Input.js";
-
+import { Toggle } from "@components/form/Toggle.js";
-import { Input } from "@app/components/form/Input.js";
-import { Toggle } from "@app/components/form/Toggle.js";
 import { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -13,51 +9,27 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const Telemetry = (): JSX.Element => {
-  const { moduleConfig, connection, setModuleConfig } = useDevice();
+  const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const {
+  const { register, handleSubmit, reset, control } =
-    register,
+    useForm<TelemetryValidation>({
-    handleSubmit,
+      mode: "onChange",
-    formState: { errors, isDirty },
+      defaultValues: moduleConfig.telemetry,
-    reset,
+      resolver: classValidatorResolver(TelemetryValidation)
-    control
+    });
-  } = useForm<TelemetryValidation>({
-    defaultValues: moduleConfig.telemetry,
-    resolver: classValidatorResolver(TelemetryValidation)
-  });
 
   useEffect(() => {
     reset(moduleConfig.telemetry);
   }, [reset, moduleConfig.telemetry]);
 
   const onSubmit = handleSubmit((data) => {
-    if (connection) {
+    setWorkingModuleConfig(
-      void toast.promise(
+      new Protobuf.ModuleConfig({
-        connection
+        payloadVariant: {
-          .setModuleConfig(
+          case: "telemetry",
-            new Protobuf.ModuleConfig({
+          value: data
-              payloadVariant: {
-                case: "telemetry",
-                value: data
-              }
-            })
-          )
-          .then(() =>
-            setModuleConfig(
-              new Protobuf.ModuleConfig({
-                payloadVariant: {
-                  case: "telemetry",
-                  value: data
-                }
-              })
-            )
-          ),
-        {
-          loading: "Saving...",
-          success: "Saved Telemetry Config, Restarting Node",
-          error: "No response received"
         }
-      );
+      })
-    }
+    );
   });
 
   return (

src/components/Sidebar.tsx

@@ -1,7 +1,5 @@
-import type React from "react";
+import { useDevice } from "@core/providers/useDevice.js";
-
+import { toMGRS } from "@core/utils/toMGRS.js";
-import { useDevice } from "@app/core/providers/useDevice.js";
-import { toMGRS } from "@app/core/utils/toMGRS.js";
 import { BatteryWidget } from "@components/Widgets/BatteryWidget.js";
 import { DeviceWidget } from "@components/Widgets/DeviceWidget.js";
 import { PeersWidget } from "@components/Widgets/PeersWidget.js";
@@ -10,9 +8,7 @@ import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 import { CommandLineIcon } from "@heroicons/react/24/outline";
 import { Types } from "@meshtastic/meshtasticjs";
-
+import { Input } from "@components/form/Input.js";
-import { Input } from "./form/Input.js";
-import { Button } from "./form/Button.js";
 
 export const Sidebar = (): JSX.Element => {
   const { removeDevice } = useDeviceStore();

src/components/Widgets/BatteryWidget.tsx

@@ -1,9 +1,6 @@
-import type React from "react";
 import { useEffect, useState } from "react";
-
 import prettyMilliseconds from "pretty-ms";
-
+import { useDevice } from "@core/providers/useDevice.js";
-import { useDevice } from "@app/core/providers/useDevice.js";
 import { Battery100Icon, ClockIcon } from "@heroicons/react/24/outline";
 
 export interface BatteryWidgetProps {

src/components/Widgets/DeviceWidget.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 import { Button } from "@components/form/Button.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { XCircleIcon } from "@heroicons/react/24/outline";
@@ -21,7 +19,7 @@ export const DeviceWidget = ({
 }: DeviceWidgetProps): JSX.Element => {
   return (
     <div className="relative flex shrink-0 flex-col overflow-hidden rounded-md text-sm text-textPrimary">
-      <div className="bg-backgroundPrimary flex p-3">
+      <div className="flex bg-backgroundPrimary p-3">
         <div>
           <Hashicon size={96} value={nodeNum} />
         </div>

src/components/Widgets/PeersWidget.tsx

@@ -1,6 +1,4 @@
-import type React from "react";
+import { useDevice } from "@core/providers/useDevice.js";
-
-import { useDevice } from "@app/core/providers/useDevice.js";
 import { IconButton } from "@components/form/IconButton.js";
 import { Mono } from "@components/generic/Mono.js";
 import {

src/components/Widgets/PositionWidget.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 import { MapPinIcon } from "@heroicons/react/24/outline";
 
 export interface PositionWidgetProps {

src/components/form/BitwiseSelect.tsx

@@ -1,10 +1,6 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
-import {
+import { bitwiseDecode, bitwiseEncode, enumLike } from "@core/utils/bitwise.js";
-  bitwiseDecode,
-  bitwiseEncode,
-  enumLike
-} from "@app/core/utils/bitwise.js";
 import { InfoWrapper } from "@components/form/InfoWrapper.js";
 import { Listbox } from "@headlessui/react";
 import { Protobuf } from "@meshtastic/meshtasticjs";
@@ -41,7 +37,7 @@ export const BitwiseSelect = ({
       };
     });
 
-  React.useEffect(() => {
+  useEffect(() => {
     setDecodedSelected(
       bitwiseDecode(selected, Protobuf.Config_PositionConfig_PositionFlags).map(
         (flag) =>

src/components/form/Button.tsx

@@ -1,4 +1,3 @@
-import type React from "react";
 import type { ButtonHTMLAttributes } from "react";
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

src/components/form/Checkbox.tsx

@@ -1,4 +1,3 @@
-import type React from "react";
 import { forwardRef, InputHTMLAttributes } from "react";
 
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {

src/components/form/Form.tsx

@@ -1,8 +1,7 @@
-import type React from "react";
+import type { FormEvent, HTMLProps } from "react";
-import type { HTMLProps } from "react";
 
 export interface FormProps extends HTMLProps<HTMLFormElement> {
-  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
+  onSubmit?: (event: FormEvent<HTMLFormElement>) => Promise<void>;
 }
 
 export const Form = ({

src/components/form/FormSection.tsx

@@ -1,8 +1,8 @@
-import type React from "react";
+import type { ReactNode } from "react";
 
 export interface FormSectionProps {
   title: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const FormSection = ({

src/components/form/IPInput.tsx

@@ -1,10 +1,7 @@
-import type React from "react";
+import { forwardRef, useEffect } from "react";
-import { forwardRef, InputHTMLAttributes, useEffect } from "react";
+import { InfoWrapper } from "@components/form/InfoWrapper.js";
-
-import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js";
-import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
-import type { InputProps } from "./Input.js";
+import type { InputProps } from "@components/form/Input.js";
 
 export const IPInput = forwardRef<HTMLInputElement, InputProps>(function Input(
   {

src/components/form/IconButton.tsx

@@ -1,4 +1,3 @@
-import type React from "react";
 import type { ButtonHTMLAttributes } from "react";
 
 export interface IconButtonProps

src/components/form/InfoWrapper.tsx

@@ -1,12 +1,11 @@
-import type React from "react";
-
 import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
+import type { ReactNode } from "react";
 
 export interface InfoWrapperProps {
   label?: string;
   description?: string;
   error?: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const InfoWrapper = ({

src/components/form/Input.tsx

@@ -1,6 +1,4 @@
-import type React from "react";
 import { forwardRef, InputHTMLAttributes } from "react";
-
 import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js";
 import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
 

src/components/form/Select.tsx

@@ -1,4 +1,3 @@
-import type React from "react";
 import { forwardRef, SelectHTMLAttributes } from "react";
 
 import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js";

src/components/form/Toggle.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 import { Switch } from "@headlessui/react";
 
 export interface ToggleProps {

src/components/generic/Dialog.tsx

@@ -1,17 +1,16 @@
-import type React from "react";
-
 import { IconButton } from "@components/form/IconButton.js";
 import { Dialog as DialogUI } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
-import { ThemeController } from "./ThemeController.js";
+import { ThemeController } from "@components/generic/ThemeController.js";
-import { Blur } from "./Blur.js";
+import { Blur } from "@components/generic/Blur.js";
+import type { ReactNode } from "react";
 
 export interface DialogProps {
   title: string;
   description: string;
   isOpen: boolean;
   close: () => void;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const Dialog = ({

src/components/generic/Mono.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 export const Mono = ({
   children,
   className,

src/components/generic/TabbedContent.tsx

@@ -1,6 +1,4 @@
-import type React from "react";
 import { Fragment } from "react";
-
 import { Mono } from "@components/generic/Mono";
 import { Tab } from "@headlessui/react";
 

src/components/generic/ThemeController.tsx

@@ -1,8 +1,8 @@
-import { useAppStore } from "@app/core/stores/appStore.js";
+import { useAppStore } from "@core/stores/appStore.js";
-import type React from "react";
+import type { ReactNode } from "react";
 
 export interface ThemeControllerProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const ThemeController = ({

src/core/utils/selectEnumOptions.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 export const renderOptions = (enumValue: {
   [s: string]: string | number;
 }): JSX.Element[] => {

src/index.tsx

@@ -1,9 +1,6 @@
 import "@app/index.css";
 import "maplibre-gl/dist/maplibre-gl.css";
-
-import type React from "react";
 import { StrictMode } from "react";
-
 import { enableMapSet } from "immer";
 import { createRoot } from "react-dom/client";
 

src/pages/Channels.tsx

@@ -1,8 +1,5 @@
-import type React from "react";
+import { TabbedContent, TabType } from "@components/generic/TabbedContent";
-
+import { Channel } from "@components/PageComponents/Channel.js";
-import { TabbedContent, TabType } from "@app/components/generic/TabbedContent";
-import { Channel } from "@app/components/PageComponents/Channel.js";
-import { Button } from "@components/form/Button.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import {
   ArrowDownOnSquareStackIcon,

src/pages/Config/AppConfig.tsx

@@ -1,6 +1,4 @@
-import type React from "react";
 import { Fragment } from "react";
-
 import { Map } from "@components/PageComponents/AppConfig/Map.js";
 import { Tab } from "@headlessui/react";
 

src/pages/Config/DeviceConfig.tsx

@@ -1,7 +1,5 @@
-import type React from "react";
 import { Fragment } from "react";
-
+import { Network } from "@components/PageComponents/Config/Network.js";
-import { Network } from "@app/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";
@@ -12,7 +10,7 @@ import { User } from "@components/PageComponents/Config/User.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import { Tab } from "@headlessui/react";
 import { ChevronRightIcon, HomeIcon } from "@heroicons/react/24/outline";
-import { Button } from "@app/components/form/Button.js";
+import { Button } from "@components/form/Button.js";
 import { CheckIcon } from "@primer/octicons-react";
 
 export const DeviceConfig = (): JSX.Element => {

src/pages/Config/ModuleConfig.tsx

@@ -1,7 +1,5 @@
-import type React from "react";
 import { Fragment } from "react";
-
+import { Audio } from "@components/PageComponents/ModuleConfig/Audio.js";
-import { Audio } from "@app/components/PageComponents/ModuleConfig/Audio.js";
 import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage";
 import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
 import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js";

src/pages/Config/index.tsx

@@ -1,8 +1,5 @@
-import type React from "react";
+import { TabbedContent, TabType } from "@components/generic/TabbedContent";
-
+import { useDevice } from "@core/providers/useDevice.js";
-import { Button } from "@app/components/form/Button.js";
-import { TabbedContent, TabType } from "@app/components/generic/TabbedContent";
-import { useDevice } from "@app/core/providers/useDevice.js";
 import {
   Cog8ToothIcon,
   CubeTransparentIcon,

src/pages/Extensions/Environment.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 import { useDevice } from "@core/providers/useDevice.js";
 
 export const Environment = (): JSX.Element => {

src/pages/Extensions/FileBrowser.tsx

@@ -1,4 +1,3 @@
-import type React from "react";
 import { useEffect, useState } from "react";
 
 export interface File {

src/pages/Extensions/Index.tsx

@@ -1,6 +1,4 @@
-import type React from "react";
+import { TabbedContent, TabType } from "@components/generic/TabbedContent";
-
-import { TabbedContent, TabType } from "@app/components/generic/TabbedContent";
 import { useDevice } from "@core/providers/useDevice.js";
 import {
   CloudIcon,

src/pages/Map.tsx

@@ -1,10 +1,7 @@
-import type React from "react";
-
 import maplibregl from "maplibre-gl";
 import { Layer, Map, Marker, Source } from "react-map-gl";
-
+import { MapControlls } from "@components/PageComponents/Map/MapControlls.js";
-import { MapControlls } from "@app/components/PageComponents/Map/MapControlls.js";
+import { useAppStore } from "@core/stores/appStore.js";
-import { useAppStore } from "@app/core/stores/appStore.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { MapPinIcon } from "@heroicons/react/24/outline";

src/pages/Messages.tsx

@@ -1,10 +1,4 @@
-import type React from "react";
+import { TabbedContent, TabType } from "@components/generic/TabbedContent.js";
-
-import { IconButton } from "@app/components/form/IconButton.js";
-import {
-  TabbedContent,
-  TabType
-} from "@app/components/generic/TabbedContent.js";
 import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import { PencilIcon } from "@heroicons/react/24/outline";

src/pages/Peers.tsx

@@ -1,7 +1,4 @@
-import type React from "react";
-
 import { base16 } from "rfc4648";
-
 import { Mono } from "@components/generic/Mono.js";
 import { Table } from "@components/generic/Table";
 import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js";

src/validation/appConfig/map.ts

@@ -1,6 +1,6 @@
 import { IsArray, IsBoolean, IsNumber, IsString } from "class-validator";
 
-import type { RasterSource } from "@app/core/stores/appStore.js";
+import type { RasterSource } from "@core/stores/appStore.js";
 
 export class MapValidation {
   @IsArray()