Flasher and hierarchical config manager

.npmrc

@@ -0,0 +1 @@
+@buf:registry=https://buf.build/gen/npm/v1

README.md

@@ -41,7 +41,7 @@ Install the dependencies.
 pnpm i
 ```
 
-Start the developtment server:
+Start the development server:
 
 ```bash
 pnpm dev

package.json

@@ -21,77 +21,80 @@
   "dependencies": {
     "@emeraldpay/hashicon-react": "^0.5.2",
     "@hookform/error-message": "^2.0.1",
-    "@hookform/resolvers": "^2.9.11",
-    "@meshtastic/meshtasticjs": "2.0.20-5",
-    "@preact/signals-react": "^1.2.2",
-    "@radix-ui/react-accordion": "^1.1.0",
-    "@radix-ui/react-checkbox": "^1.0.2",
-    "@radix-ui/react-dialog": "^1.0.2",
-    "@radix-ui/react-dropdown-menu": "^2.0.3",
-    "@radix-ui/react-label": "^2.0.0",
-    "@radix-ui/react-menubar": "^1.0.1",
-    "@radix-ui/react-popover": "^1.0.4",
-    "@radix-ui/react-scroll-area": "^1.0.2",
-    "@radix-ui/react-select": "^1.2.0",
-    "@radix-ui/react-separator": "^1.0.1",
-    "@radix-ui/react-switch": "^1.0.1",
-    "@radix-ui/react-tabs": "^1.0.2",
-    "@radix-ui/react-toast": "^1.1.2",
-    "@radix-ui/react-tooltip": "^1.0.4",
+    "@hookform/resolvers": "^3.1.0",
+    "@meshtastic/meshtasticjs": "2.1.12-0",
+    "@preact/signals-react": "^1.3.2",
+    "@radix-ui/react-accordion": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.3",
+    "@radix-ui/react-dropdown-menu": "^2.0.4",
+    "@radix-ui/react-label": "^2.0.1",
+    "@radix-ui/react-menubar": "^1.0.2",
+    "@radix-ui/react-popover": "^1.0.5",
+    "@radix-ui/react-scroll-area": "^1.0.3",
+    "@radix-ui/react-select": "^1.2.1",
+    "@radix-ui/react-separator": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.3",
+    "@radix-ui/react-toast": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.0.5",
     "@tailwindcss/typography": "^0.5.9",
+    "@toit/esptool.js": "^0.12.3",
     "@turf/turf": "^6.5.0",
     "base64-js": "^1.5.1",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
-    "class-variance-authority": "^0.4.0",
+    "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
-    "cmdk": "^0.1.22",
+    "cmdk": "^0.2.0",
+    "esptool-js": "^0.2.1",
     "geodesy": "^2.4.0",
-    "immer": "^9.0.19",
-    "lucide-react": "^0.115.0",
+    "immer": "^10.0.2",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.220.0",
     "mapbox-gl": "npm:empty-npm-package@^1.0.0",
-    "maplibre-gl": "2.4.0",
+    "maplibre-gl": "3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.2",
-    "react-map-gl": "^7.0.21",
-    "react-qrcode-logo": "^2.8.0",
+    "react-hook-form": "^7.43.9",
+    "react-map-gl": "^7.0.23",
+    "react-qrcode-logo": "^2.9.0",
     "rfc4648": "^1.5.2",
-    "tailwind-merge": "^1.10.0",
+    "tailwind-merge": "^1.12.0",
     "tailwindcss-animate": "^1.0.5",
-    "timeago-react": "^3.0.5",
-    "zustand": "4.3.3"
+    "timeago-react": "^3.0.6",
+    "zustand": "4.3.8"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
-    "@types/chrome": "^0.0.217",
+    "@types/chrome": "^0.0.236",
     "@types/geodesy": "^2.2.3",
-    "@types/node": "^18.14.1",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/node": "^20.2.3",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
     "@types/w3c-web-serial": "^1.0.3",
-    "@types/web-bluetooth": "^0.0.16",
-    "@typescript-eslint/eslint-plugin": "^5.53.0",
-    "@typescript-eslint/parser": "^5.53.0",
-    "@vitejs/plugin-react": "^3.1.0",
-    "autoprefixer": "^10.4.13",
-    "eslint": "^8.34.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-import-resolver-typescript": "^3.5.3",
+    "@types/web-bluetooth": "^0.0.17",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.41.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "gzipper": "^7.2.0",
-    "postcss": "^8.4.21",
-    "prettier": "^2.8.4",
-    "prettier-plugin-tailwindcss": "^0.2.3",
+    "postcss": "^8.4.23",
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.3.0",
     "rollup-plugin-visualizer": "^5.9.0",
-    "tailwindcss": "^3.2.7",
-    "tar": "^6.1.13",
-    "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.4",
+    "tailwindcss": "^3.3.2",
+    "tar": "^6.1.15",
+    "tslib": "^2.5.2",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.8",
     "vite-plugin-environment": "^1.1.3",
-    "vite-plugin-pwa": "^0.14.4"
+    "vite-plugin-pwa": "^0.15.0"
   }
 }

src/App.tsx

@@ -1,23 +1,81 @@
+import { useState } from "react";
+
 import { MapProvider } from "react-map-gl";
-import { useAppStore } from "@core/stores/appStore.js";
+
 import { DeviceWrapper } from "@app/DeviceWrapper.js";
 import { PageRouter } from "@app/PageRouter.js";
 import { CommandPalette } from "@components/CommandPalette.js";
+import { Dashboard } from "@components/Dashboard.js";
 import { DeviceSelector } from "@components/DeviceSelector.js";
 import { DialogManager } from "@components/Dialog/DialogManager.js";
-import { Dashboard } from "@components/Dashboard.js";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
-import { ThemeController } from "@components/generic/ThemeController.js";
 import { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.js";
+import { ThemeController } from "@components/generic/ThemeController.js";
 import { Toaster } from "@components/Toaster.js";
+import { useAppStore } from "@core/stores/appStore.js";
+import { useDeviceStore } from "@core/stores/deviceStore.js";
+import { ISerialConnection } from "@meshtastic/meshtasticjs";
+
+import { subscribeAll } from "./core/subscriptions";
+import { randId } from "./core/utils/randId";
+
+let ensureOnce = false;
 
 export const App = (): JSX.Element => {
-  const { getDevice } = useDeviceStore();
-  const { selectedDevice, setConnectDialogOpen, connectDialogOpen } =
-    useAppStore();
+  const { getDevice, getDevices, removeDevice } = useDeviceStore();
+  const { addDevice } = useDeviceStore();
+  const {
+    selectedDevice,
+    setConnectDialogOpen,
+    connectDialogOpen,
+    setSelectedDevice
+  } = useAppStore();
+  const [initialized, setInitialized] = useState(false);
 
   const device = getDevice(selectedDevice);
 
+  const onConnect = async (port: SerialPort) => {
+    const id = randId();
+    const device = addDevice(id);
+    const connection = new ISerialConnection(id);
+    console.log("conn");
+    await connection
+      .connect({
+        port,
+        baudRate: undefined,
+        concurrentLogOutput: true
+      })
+      .catch((e: Error) => console.log(`Unable to Connect: ${e.message}`));
+    device.addConnection(connection);
+    subscribeAll(device, connection);
+  };
+  const connectToAll = async () => {
+    const dev = await navigator.serial.getPorts();
+
+    navigator.serial.onconnect = (ev) => {
+      const port = ev.target as SerialPort;
+      if (port.readable === null) onConnect(port);
+    };
+    navigator.serial.ondisconnect = (ev) => {
+      const port = ev.target as SerialPort;
+      const device = getDevices().filter(
+        (d) => d.connection?.connType == "serial"
+      );
+      const d = device.find(
+        (d) => (d.connection! as ISerialConnection).getCurrentPort() == port
+      );
+      if (!d) return;
+      d.connection!.disconnect();
+      removeDevice(d.id ?? 0);
+      if (selectedDevice == d.id) setSelectedDevice(0);
+    };
+    dev.filter((d) => d.readable === null).forEach((d) => onConnect(d));
+  };
+  if (!initialized && !ensureOnce) {
+    connectToAll();
+    setInitialized(true);
+    ensureOnce = true;
+  }
+
   return (
     <ThemeController>
       <NewDeviceDialog
@@ -32,7 +90,7 @@ export const App = (): JSX.Element => {
           <div className="flex h-screen flex-col overflow-hidden bg-backgroundPrimary text-textPrimary">
             <div className="flex flex-grow">
               <DeviceSelector />
-              <div className="flex flex-grow flex-col">
+              <div className="flex h-screen w-full flex-col">
                 {device ? (
                   <div className="flex h-screen">
                     <DialogManager />

src/components/CommandPalette.tsx

@@ -1,32 +1,31 @@
 import { useEffect } from "react";
-import { useAppStore } from "@core/stores/appStore.js";
-import { useDevice, useDeviceStore } from "@core/stores/deviceStore.js";
+
 import { useCommandState } from "cmdk";
-import { Hashicon } from "@emeraldpay/hashicon-react";
 import {
-  LucideIcon,
+  ArrowLeftRightIcon,
+  BoxSelectIcon,
+  BugIcon,
+  EraserIcon,
+  FactoryIcon,
+  LayersIcon,
+  LayoutIcon,
   LinkIcon,
-  TrashIcon,
+  LucideIcon,
   MapIcon,
+  MessageSquareIcon,
   MoonIcon,
+  PaletteIcon,
   PlusIcon,
   PowerIcon,
-  EraserIcon,
+  QrCodeIcon,
   RefreshCwIcon,
-  FactoryIcon,
-  ArrowLeftRightIcon,
-  BugIcon,
   SettingsIcon,
   SmartphoneIcon,
-  MessageSquareIcon,
-  QrCodeIcon,
-  LayersIcon,
-  PaletteIcon,
+  TrashIcon,
   UsersIcon,
-  LayoutIcon,
-  XCircleIcon,
-  BoxSelectIcon
+  XCircleIcon
 } from "lucide-react";
+
 import {
   CommandDialog,
   CommandEmpty,
@@ -35,6 +34,9 @@ import {
   CommandItem,
   CommandList
 } from "@components/UI/Command.js";
+import { useAppStore } from "@core/stores/appStore.js";
+import { useDevice, useDeviceStore } from "@core/stores/deviceStore.js";
+import { Hashicon } from "@emeraldpay/hashicon-react";
 
 export interface Group {
   label: string;