2.2.0

.vscode/launch.json

@@ -1,16 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "chrome",
-      "request": "launch",
-      "name": "Launch Chrome against localhost",
-      "url": "http://localhost:5173",
-      "webRoot": "${workspaceFolder}"
-    }
-  ],
-  "runtimeArgs": ["--preserve-symlinks"]
-}

package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "dev": "vite --host",
     "build": "tsc && vite build",
+    "check": "rome check .",
     "preview": "vite preview",
     "package": "gzipper c -i html,js,css,png,ico,svg,webmanifest,txt dist dist/output && tar -cvf dist/build.tar -C ./dist/output/ $(ls ./dist/output/)"
   },
@@ -21,9 +22,9 @@
   "dependencies": {
     "@emeraldpay/hashicon-react": "^0.5.2",
     "@hookform/error-message": "^2.0.1",
-    "@hookform/resolvers": "^3.1.1",
+    "@hookform/resolvers": "^3.2.0",
-    "@meshtastic/meshtasticjs": "2.1.20-0",
+    "@meshtastic/meshtasticjs": "2.2.0-0",
-    "@preact/signals-react": "^1.3.4",
+    "@preact/signals-react": "^1.3.5",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
@@ -50,30 +51,30 @@
     "geodesy": "^2.4.0",
     "immer": "^10.0.2",
     "jszip": "^3.10.1",
-    "lucide-react": "^0.263.1",
+    "lucide-react": "^0.265.0",
     "mapbox-gl": "npm:empty-npm-package@^1.0.0",
-    "maplibre-gl": "3.2.1",
+    "maplibre-gl": "3.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.45.2",
+    "react-hook-form": "^7.45.4",
     "react-map-gl": "^7.1.3",
     "react-qrcode-logo": "^2.9.0",
     "rfc4648": "^1.5.2",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.6",
     "timeago-react": "^3.0.6",
-    "zustand": "4.3.9"
+    "zustand": "4.4.1"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.4",
-    "@types/chrome": "^0.0.242",
+    "@types/chrome": "^0.0.243",
     "@types/geodesy": "^2.2.3",
-    "@types/node": "^20.4.5",
+    "@types/node": "^20.4.8",
-    "@types/react": "^18.2.17",
+    "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
     "@types/w3c-web-serial": "^1.0.3",
     "@types/web-bluetooth": "^0.0.17",
-    "@vitejs/plugin-react": "^4.0.3",
+    "@vitejs/plugin-react": "^4.0.4",
     "autoprefixer": "^10.4.14",
     "gzipper": "^7.2.0",
     "postcss": "^8.4.27",
@@ -83,7 +84,7 @@
     "tar": "^6.1.15",
     "tslib": "^2.6.1",
     "typescript": "^5.1.6",
-    "vite": "^4.4.7",
+    "vite": "^4.4.9",
     "vite-plugin-environment": "^1.1.3",
     "vite-plugin-pwa": "^0.16.4"
   }

rome.json

@@ -13,5 +13,11 @@
   },
   "organizeImports": {
     "enabled": true
+  },
+  "files": {
+    "ignore": [
+      "node_modules",
+      "dist"
+    ]
   }
 }

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 { BLE } from "@components/PageComponents/Connect/BLE.js";
-import { HTTP } from "../PageComponents/Connect/HTTP.js";
+import { HTTP } from "@components/PageComponents/Connect/HTTP.js";
-import { Serial } from "../PageComponents/Connect/Serial.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) => (
+          {tabs.map((tab) => (
-            <TabsContent key={index} value={tab.label}>
+            <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 {
-import { DynamicFormField, FieldProps } from "./DynamicFormField.js";
+  DynamicFormField,
-import { FieldWrapper } from "./FormWrapper.js";
+  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 { GenericInput, InputFieldProps } from "@components/Form/FormInput.js";
-import { SelectFieldProps, SelectInput } from "./FormSelect.js";
+import { SelectFieldProps, SelectInput } from "@components/Form/FormSelect.js";
-import { ToggleFieldProps, ToggleInput } from "./FormToggle.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";
+} from "@components/UI/Select.js";
-import type {
-  BaseFormBuilderProps,
-  GenericFormElementProps,
-} from "./DynamicForm.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";
 

tsconfig.json

@@ -1,9 +1,15 @@
 {
-  "include": ["src", "types"],
+  "include": [
+    "src"
+  ],
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -18,16 +24,29 @@
     "jsx": "react-jsx",
     "baseUrl": "./",
     "paths": {
-      "@app/*": ["./src/*"],
+      "@app/*": [
-      "@pages/*": ["./src/pages/*"],
+        "./src/*"
-      "@components/*": ["./src/components/*"],
+      ],
-      "@core/*": ["./src/core/*"],
+      "@pages/*": [
-      "@layouts/*": ["./src/layouts/*"]
+        "./src/pages/*"
+      ],
+      "@components/*": [
+        "./src/components/*"
+      ],
+      "@core/*": [
+        "./src/core/*"
+      ],
+      "@layouts/*": [
+        "./src/layouts/*"
+      ]
     },
     "importHelpers": true,
     "removeComments": true,
     "strictNullChecks": true,
-    "types": ["vite/client", "node"],
+    "types": [
+      "vite/client",
+      "node"
+    ],
     "strictPropertyInitialization": false,
     "experimentalDecorators": true
   }

types/static.d.ts

@@ -1,61 +0,0 @@
-/* Use this file to declare any custom file extensions for importing */
-/* Use this folder to also add/extend a package d.ts file, if needed. */
-
-///<reference types="chrome"/>
-
-/* CSS MODULES */
-declare module "*.module.css" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-declare module "*.module.scss" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-declare module "*.module.sass" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-declare module "*.module.less" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-declare module "*.module.styl" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-/* CSS */
-declare module "*.css";
-declare module "*.scss";
-declare module "*.sass";
-declare module "*.less";
-declare module "*.styl";
-
-/* IMAGES */
-declare module "*.svg" {
-  const ref: string;
-  export default ref;
-}
-declare module "*.bmp" {
-  const ref: string;
-  export default ref;
-}
-declare module "*.gif" {
-  const ref: string;
-  export default ref;
-}
-declare module "*.jpg" {
-  const ref: string;
-  export default ref;
-}
-declare module "*.jpeg" {
-  const ref: string;
-  export default ref;
-}
-declare module "*.png" {
-  const ref: string;
-  export default ref;
-}
-
-/* CUSTOM: ADD YOUR OWN HERE */