2.2.0

src/App.tsx

@@ -1,7 +1,6 @@
 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 { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.js";
@@ -9,6 +8,7 @@ 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 { Dashboard } from "@pages/Dashboard/index.js";
 import { MapProvider } from "react-map-gl";
 
 export const App = (): JSX.Element => {

src/components/DeviceSelector.tsx

@@ -1,4 +1,4 @@
-import { DeviceSelectorButton } from "./DeviceSelectorButton.js";
+import { DeviceSelectorButton } from "@components/DeviceSelectorButton.js";
 import { Separator } from "@components/UI/Seperator.js";
 import { Code } from "@components/UI/Typography/Code.js";
 import { useAppStore } from "@core/stores/appStore.js";

src/components/Dialog/DialogManager.tsx

@@ -1,4 +1,4 @@
-import { DeviceNameDialog } from "./DeviceNameDialog.js";
+import { DeviceNameDialog } from "@components/Dialog/DeviceNameDialog.js";
 import { ImportDialog } from "@components/Dialog/ImportDialog.js";
 import { QRDialog } from "@components/Dialog/QRDialog.js";
 import { RebootDialog } from "@components/Dialog/RebootDialog.js";

src/components/Dialog/NewDeviceDialog.tsx

@@ -1,6 +1,6 @@
-import { BLE } from "../PageComponents/Connect/BLE.js";
-import { HTTP } from "../PageComponents/Connect/HTTP.js";
-import { Serial } from "../PageComponents/Connect/Serial.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 {
   Dialog,
   DialogContent,
@@ -68,8 +68,8 @@ export const NewDeviceDialog = ({
               </TabsTrigger>
             ))}
           </TabsList>
-          {tabs.map((tab, index) => (
-            <TabsContent key={index} value={tab.label}>
+          {tabs.map((tab) => (
+            <TabsContent key={tab.label} value={tab.label}>
               {tab.disabled ? (
                 <p className="text-sm text-slate-500 dark:text-slate-400">
                   {tab.disabledMessage}

src/components/Form/DynamicForm.tsx

@@ -1,6 +1,9 @@
-import { Button } from "../UI/Button.js";
-import { DynamicFormField, FieldProps } from "./DynamicFormField.js";
-import { FieldWrapper } from "./FormWrapper.js";
+import {
+  DynamicFormField,
+  FieldProps,
+} from "@components/Form/DynamicFormField.js";
+import { FieldWrapper } from "@components/Form/FormWrapper.js";
+import { Button } from "@components/UI/Button.js";
 import { H4 } from "@components/UI/Typography/H4.js";
 import { Subtle } from "@components/UI/Typography/Subtle.js";
 import {

src/components/Form/DynamicFormField.tsx

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

src/components/Form/FormInput.tsx

@@ -1,8 +1,8 @@
-import { Input } from "../UI/Input.js";
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
-} from "./DynamicForm.js";
+} from "@components/Form/DynamicForm.js";
+import { Input } from "@components/UI/Input.js";
 import type { LucideIcon } from "lucide-react";
 import { Controller, FieldValues } from "react-hook-form";
 

src/components/Form/FormSelect.tsx

@@ -1,14 +1,14 @@
+import type {
+  BaseFormBuilderProps,
+  GenericFormElementProps,
+} from "@components/Form/DynamicForm.js";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../UI/Select.js";
-import type {
-  BaseFormBuilderProps,
-  GenericFormElementProps,
-} from "./DynamicForm.js";
+} from "@components/UI/Select.js";
 import { Controller, FieldValues } from "react-hook-form";
 
 export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {

src/components/Form/FormToggle.tsx

@@ -1,8 +1,8 @@
-import { Switch } from "../UI/Switch.js";
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
-} from "./DynamicForm.js";
+} from "@components/Form/DynamicForm.js";
+import { Switch } from "@components/UI/Switch.js";
 import { ChangeEvent } from "react";
 import { Controller, FieldPathValue, FieldValues } from "react-hook-form";
 

src/components/Form/FormWrapper.tsx

@@ -1,4 +1,4 @@
-import { Label } from "../UI/Label.js";
+import { Label } from "@components/UI/Label.js";
 import { ErrorMessage } from "@hookform/error-message";
 
 export interface FieldWrapperProps {

src/components/UI/Sidebar/SidebarSection.tsx

@@ -1,4 +1,4 @@
-import { H4 } from "../Typography/H4.js";
+import { H4 } from "@components/UI/Typography/H4.js";
 
 export interface SidebarSectionProps {
   label: string;

src/components/UI/Sidebar/sidebarButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from "../Button.js";
+import { Button } from "@components/UI/Button.js";
 import type { LucideIcon } from "lucide-react";
 
 export interface SidebarButtonProps {

src/pages/Config/DeviceConfig.tsx

@@ -15,7 +15,7 @@ import { useDevice } from "@core/stores/deviceStore.js";
 import { Fragment } from "react";
 
 export const DeviceConfig = (): JSX.Element => {
-  const { hardware } = useDevice();
+  const { metadata } = useDevice();
 
   const tabs = [
     {
@@ -34,7 +34,7 @@ export const DeviceConfig = (): JSX.Element => {
     {
       label: "Network",
       element: Network,
-      disabled: !hardware.hasWifi,
+      disabled: !metadata.get(0)?.hasWifi,
     },
     {
       label: "Display",

src/pages/Messages.tsx

@@ -1,4 +1,3 @@
-import { getChannelName } from "./Channels.js";
 import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js";
 import { PageLayout } from "@components/PageLayout.js";
 import { Sidebar } from "@components/Sidebar.js";
@@ -7,6 +6,7 @@ import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf, Types } from "@meshtastic/meshtasticjs";
+import { getChannelName } from "@pages/Channels.js";
 import { HashIcon } from "lucide-react";
 import { useMemo, useState } from "react";