Persistent nodedb

packages/web/src/App.tsx

@@ -15,10 +15,10 @@ import { MapProvider } from "react-map-gl/maplibre";
 
 export function App() {
   const { getDevice } = useDeviceStore();
-  const { selectedDevice, setConnectDialogOpen, connectDialogOpen } =
+  const { selectedDeviceId, setConnectDialogOpen, connectDialogOpen } =
     useAppStore();
 
-  const device = getDevice(selectedDevice);
+  const device = getDevice(selectedDeviceId);
 
   // Sets up light/dark mode based on user preferences or system settings
   useTheme();
@@ -33,7 +33,7 @@ export function App() {
       />
       {/* <Toaster /> */}
       <TanStackRouterDevtools position="bottom-right" />
-      <DeviceWrapper device={device}>
+      <DeviceWrapper deviceId={selectedDeviceId}>
         <div
           className="flex h-screen flex-col bg-background-primary text-text-primary"
           style={{ scrollbarWidth: "thin" }}

packages/web/src/DeviceWrapper.tsx

@@ -1,13 +1,15 @@
-import { type Device, DeviceContext } from "@core/stores";
+import { CurrentDeviceContext } from "@core/stores";
 import type { ReactNode } from "react";
 
 export interface DeviceWrapperProps {
   children: ReactNode;
-  device?: Device;
+  deviceId: number;
 }
 
-export const DeviceWrapper = ({ children, device }: DeviceWrapperProps) => {
+export const DeviceWrapper = ({ children, deviceId }: DeviceWrapperProps) => {
   return (
-    <DeviceContext.Provider value={device}>{children}</DeviceContext.Provider>
+    <CurrentDeviceContext.Provider value={{ deviceId }}>
+      {children}
+    </CurrentDeviceContext.Provider>
   );
 };

packages/web/src/components/CommandPalette/index.tsx

@@ -8,7 +8,12 @@ import {
   CommandList,
 } from "@components/UI/Command.tsx";
 import { usePinnedItems } from "@core/hooks/usePinnedItems.ts";
-import { useAppStore, useDevice, useDeviceStore } from "@core/stores";
+import {
+  useAppStore,
+  useDevice,
+  useDeviceStore,
+  useNodeDB,
+} from "@core/stores";
 import { cn } from "@core/utils/cn.ts";
 import { useNavigate } from "@tanstack/react-router";
 import { useCommandState } from "cmdk";
@@ -64,7 +69,8 @@ export const CommandPalette = () => {
     setSelectedDevice,
   } = useAppStore();
   const { getDevices } = useDeviceStore();
-  const { setDialogOpen, getNode, connection } = useDevice();
+  const { setDialogOpen, connection } = useDevice();
+  const { getNode } = useNodeDB();
   const { pinnedItems, togglePinnedItem } = usePinnedItems({
     storageName: "pinnedCommandMenuGroups",
   });

packages/web/src/components/Dialog/DeviceNameDialog.tsx

@@ -10,7 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@components/UI/Dialog.tsx";
-import { useDevice } from "@core/stores";
+import { useDevice, useNodeDB } from "@core/stores";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Protobuf } from "@meshtastic/core";
 import { useForm } from "react-hook-form";
@@ -33,7 +33,8 @@ export const DeviceNameDialog = ({
   onOpenChange,
 }: DeviceNameDialogProps) => {
   const { t } = useTranslation("dialog");
-  const { hardware, getNode, connection } = useDevice();
+  const { hardware, connection } = useDevice();
+  const { getNode } = useNodeDB();
   const myNode = getNode(hardware.myNodeNum);
 
   const defaultValues = {

packages/web/src/components/Dialog/LocationResponseDialog.tsx

@@ -1,4 +1,4 @@
-import { useDevice } from "@core/stores";
+import { useNodeDB } from "@core/stores";
 import type { Protobuf, Types } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { useTranslation } from "react-i18next";
@@ -23,7 +23,7 @@ export const LocationResponseDialog = ({
   onOpenChange,
 }: LocationResponseDialogProps) => {
   const { t } = useTranslation("dialog");
-  const { getNode } = useDevice();
+  const { getNode } = useNodeDB();
 
   const from = getNode(location?.from ?? 0);
   const longName =

packages/web/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx

@@ -27,7 +27,7 @@ import {
 import { useFavoriteNode } from "@core/hooks/useFavoriteNode.ts";
 import { useIgnoreNode } from "@core/hooks/useIgnoreNode.ts";
 import { toast } from "@core/hooks/useToast.ts";
-import { useAppStore, useDevice } from "@core/stores";
+import { useAppStore, useDevice, useNodeDB } from "@core/stores";
 import { cn } from "@core/utils/cn.ts";
 import { Protobuf } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
@@ -55,7 +55,8 @@ export const NodeDetailsDialog = ({
   onOpenChange,
 }: NodeDetailsDialogProps) => {
   const { t } = useTranslation("dialog");
-  const { setDialogOpen, connection, getNode } = useDevice();
+  const { setDialogOpen, connection } = useDevice();
+  const { getNode } = useNodeDB();
   const navigate = useNavigate();
   const { setNodeNumToBeRemoved, nodeNumDetails } = useAppStore();
   const { updateFavorite } = useFavoriteNode();

packages/web/src/components/Dialog/PKIBackupDialog.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@components/UI/Button.tsx";
 import {
   Dialog,
   DialogClose,
@@ -7,12 +8,11 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@components/UI/Dialog.tsx";
+import { useDevice, useNodeDB } from "@core/stores";
 import { fromByteArray } from "base64-js";
 import { DownloadIcon, PrinterIcon } from "lucide-react";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useDevice } from "../../core/stores";
-import { Button } from "../UI/Button.tsx";
 
 export interface PkiBackupDialogProps {
   open: boolean;
@@ -24,7 +24,8 @@ export const PkiBackupDialog = ({
   onOpenChange,
 }: PkiBackupDialogProps) => {
   const { t } = useTranslation("dialog");
-  const { config, setDialogOpen, getMyNode } = useDevice();
+  const { config, setDialogOpen } = useDevice();
+  const { getMyNode } = useNodeDB();
   const privateKey = config.security?.privateKey;
   const publicKey = config.security?.publicKey;
 

packages/web/src/components/Dialog/RebootDialog.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, act } from "@testing-library/react";
 import type {
   ButtonHTMLAttributes,
   ClassAttributes,
@@ -89,24 +89,32 @@ describe("RebootDialog", () => {
       render(<RebootDialog open onOpenChange={() => {}} />);
 
       // Schedule non-OTA reboot
-      fireEvent.click(screen.getByTestId("scheduleRebootBtn"));
+      act(() => {
+        fireEvent.click(screen.getByTestId("scheduleRebootBtn"));
+      });
       expect(rebootMock).toHaveBeenCalledWith(5);
       expect(rebootOtaMock).not.toHaveBeenCalled();
 
       rebootMock.mockClear();
       rebootOtaMock.mockClear();
 
       // Cancel scheduled
-      fireEvent.click(screen.getByTestId("cancelRebootBtn"));
+      act(() => {
+        fireEvent.click(screen.getByTestId("cancelRebootBtn"));
+      });
       expect(rebootMock).toHaveBeenCalledWith(-1);
       expect(rebootOtaMock).not.toHaveBeenCalled();
 
       rebootMock.mockClear();
       rebootOtaMock.mockClear();
 
       // Schedule OTA reboot
-      fireEvent.click(screen.getByText(/reboot into ota mode/i));
-      fireEvent.click(screen.getByTestId("scheduleRebootBtn"));
+      act(() => {
+        fireEvent.click(screen.getByText(/reboot into ota mode/i));
+      });
+      act(() => {
+        fireEvent.click(screen.getByTestId("scheduleRebootBtn"));
+      });
       expect(rebootOtaMock).toHaveBeenCalledWith(5);
       expect(rebootMock).not.toHaveBeenCalled();
     });
@@ -115,17 +123,23 @@ describe("RebootDialog", () => {
     const onOpenChangeMock = vi.fn();
     render(<RebootDialog open onOpenChange={onOpenChangeMock} />);
 
-    fireEvent.change(screen.getByPlaceholderText(/enter delay/i), {
-      target: { value: "3" },
+    act(() => {
+      fireEvent.change(screen.getByPlaceholderText(/enter delay/i), {
+        target: { value: "3" },
+      });
     });
 
-    fireEvent.click(screen.getByTestId("scheduleRebootBtn"));
+    act(() => {
+      fireEvent.click(screen.getByTestId("scheduleRebootBtn"));
+    });
 
     expect(rebootMock).toHaveBeenCalledWith(3);
 
     expect(screen.getByText(/reboot has been scheduled/i)).toBeInTheDocument();
 
-    vi.advanceTimersByTime(3000);
+    act(() => {
+      vi.advanceTimersByTime(3000);
+    });
 
     expect(onOpenChangeMock).toHaveBeenCalledWith(false);
 
@@ -135,7 +149,9 @@ describe("RebootDialog", () => {
     const onOpenChangeMock = vi.fn();
     render(<RebootDialog open onOpenChange={onOpenChangeMock} />);
 
-    fireEvent.click(screen.getByRole("button", { name: /reboot now/i }));
+    act(() => {
+      fireEvent.click(screen.getByRole("button", { name: /reboot now/i }));
+    });
 
     expect(rebootMock).toHaveBeenCalledWith(0);
     expect(onOpenChangeMock).toHaveBeenCalledWith(false);
@@ -148,9 +164,13 @@ describe("RebootDialog", () => {
 
     render(<RebootDialog open onOpenChange={onOpenChangeMock} />);
 
-    fireEvent.click(screen.getByTestId("scheduleRebootBtn"));
+    act(() => {
+      fireEvent.click(screen.getByTestId("scheduleRebootBtn"));
+    });
 
-    vi.advanceTimersByTime(5000);
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
 
     expect(rebootMock).not.toHaveBeenCalled();
     expect(rebootOtaMock).not.toHaveBeenCalled();
@@ -162,13 +182,19 @@ describe("RebootDialog", () => {
     const onOpenChangeMock = vi.fn();
     render(<RebootDialog open onOpenChange={onOpenChangeMock} />);
 
-    fireEvent.change(screen.getByPlaceholderText(/enter delay/i), {
-      target: { value: "4" },
+    act(() => {
+      fireEvent.change(screen.getByPlaceholderText(/enter delay/i), {
+        target: { value: "4" },
+      });
+    });
+    act(() => {
+      fireEvent.click(screen.getByTestId("scheduleRebootBtn"));
     });
-    fireEvent.click(screen.getByTestId("scheduleRebootBtn"));
     expect(rebootMock).toHaveBeenCalledWith(4);
 
-    fireEvent.click(screen.getByRole("button", { name: /cancel/i }));
+    act(() => {
+      fireEvent.click(screen.getByRole("button", { name: /cancel/i }));
+    });
     expect(rebootMock).toHaveBeenCalledWith(-1);
     expect(screen.queryByText(/reboot has been scheduled/i)).not.toBeInTheDocument();
   });

packages/web/src/components/Dialog/RefreshKeysDialog/RefreshKeysDialog.test.tsx

@@ -1,4 +1,4 @@
-import { DeviceContext, useDeviceStore, useMessageStore } from "@core/stores";
+import { CurrentDeviceContext, useDeviceStore, useMessageStore } from "@core/stores";
 import { render } from "@testing-library/react";
 import { afterEach, beforeEach, expect, test, vi } from "vitest";
 import { RefreshKeysDialog } from "./RefreshKeysDialog.tsx";
@@ -37,21 +37,16 @@ test("does not render dialog if no error exists for active chat", () => {
 
   useDeviceStore.getState().addDevice(deviceId);
 
-  const currentDeviceState = useDeviceStore.getState().getDevice(deviceId);
-  if (!currentDeviceState) {
-    throw new Error("Device not found");
-  }
-
   mockUseMessageStore.mockReturnValue({ activeChat: activeChatNum });
   mockUseRefreshKeysDialog.mockReturnValue({
     handleCloseDialog: vi.fn(),
     handleNodeRemove: vi.fn(),
   });
 
   const { container } = render(
-    <DeviceContext.Provider value={currentDeviceState}>
+    <CurrentDeviceContext.Provider value={{ deviceId }}>
       <RefreshKeysDialog open onOpenChange={vi.fn()} />
-    </DeviceContext.Provider>,
+    </CurrentDeviceContext.Provider>,
   );
 
   expect(container.firstChild).toBeNull();

packages/web/src/components/Dialog/RefreshKeysDialog/RefreshKeysDialog.tsx

@@ -6,7 +6,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@components/UI/Dialog.tsx";
-import { useDevice, useMessageStore } from "@core/stores";
+import { useMessageStore, useNodeDB } from "@core/stores";
 import { LockKeyholeOpenIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { useRefreshKeysDialog } from "./useRefreshKeysDialog.ts";
@@ -22,7 +22,8 @@ export const RefreshKeysDialog = ({
 }: RefreshKeysDialogProps) => {
   const { t } = useTranslation("dialog");
   const { activeChat } = useMessageStore();
-  const { nodeErrors, getNode } = useDevice();
+  const { nodeErrors, getNode } = useNodeDB();
+
   const { handleCloseDialog, handleNodeRemove } = useRefreshKeysDialog();
 
   const nodeErrorNum = nodeErrors.get(activeChat);

packages/web/src/components/Dialog/RefreshKeysDialog/useRefreshKeysDialog.ts

@@ -1,9 +1,9 @@
-import { useDevice, useMessageStore } from "@core/stores";
+import { useDevice, useMessageStore, useNodeDB } from "@core/stores";
 import { useCallback } from "react";
 
 export function useRefreshKeysDialog() {
-  const { removeNode, setDialogOpen, clearNodeError, getNodeError } =
-    useDevice();
+  const { setDialogOpen } = useDevice();
+  const { removeNode, clearNodeError, getNodeError } = useNodeDB();
   const { activeChat } = useMessageStore();
 
   const handleCloseDialog = useCallback(() => {

packages/web/src/components/Dialog/RemoveNodeDialog.tsx

@@ -9,7 +9,7 @@ import {
   DialogTitle,
 } from "@components/UI/Dialog.tsx";
 import { Label } from "@components/UI/Label.tsx";
-import { useAppStore, useDevice } from "@core/stores";
+import { useAppStore, useDevice, useNodeDB } from "@core/stores";
 import { useTranslation } from "react-i18next";
 
 export interface RemoveNodeDialogProps {
@@ -22,7 +22,8 @@ export const RemoveNodeDialog = ({
   onOpenChange,
 }: RemoveNodeDialogProps) => {
   const { t } = useTranslation("dialog");
-  const { connection, getNode, removeNode } = useDevice();
+  const { connection } = useDevice();
+  const { getNode, removeNode } = useNodeDB();
   const { nodeNumToBeRemoved } = useAppStore();
 
   const onSubmit = () => {

packages/web/src/components/Dialog/TracerouteResponseDialog.tsx

@@ -1,4 +1,4 @@
-import { useDevice } from "@core/stores";
+import { useNodeDB } from "@core/stores";
 import type { Protobuf, Types } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { useTranslation } from "react-i18next";
@@ -25,7 +25,7 @@ export const TracerouteResponseDialog = ({
   onOpenChange,
 }: TracerouteResponseDialogProps) => {
   const { t } = useTranslation("dialog");
-  const { getNode } = useDevice();
+  const { getNode } = useNodeDB();
   const route: number[] = traceroute?.data.route ?? [];
   const routeBack: number[] = traceroute?.data.routeBack ?? [];
   const snrTowards = (traceroute?.data.snrTowards ?? []).map((snr) => snr / 4);