Persists device and app stores across sessions (#860)

* Persistence for device and app data

* esphemeral -> ephemeral

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* devices -> app

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Additional waypoint methods, update mock, update tests

---------

Co-authored-by: philon- <philon-@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

packages/web/src/pages/Dashboard/index.tsx

@@ -3,18 +3,21 @@ import { Button } from "@components/UI/Button.tsx";
 import { Separator } from "@components/UI/Separator.tsx";
 import { Heading } from "@components/UI/Typography/Heading.tsx";
 import { Subtle } from "@components/UI/Typography/Subtle.tsx";
-import { useAppStore, useDeviceStore, useNodeDBStore } from "@core/stores";
-import { ListPlusIcon, PlusIcon, UsersIcon } from "lucide-react";
-import { useMemo } from "react";
+import {
+  useAppStore /*, useDeviceStore, useNodeDBStore */,
+} from "@core/stores";
+import { ListPlusIcon, PlusIcon /*, UsersIcon */ } from "lucide-react";
+/* import { useMemo } from "react"; */
 import { useTranslation } from "react-i18next";
 
 export const Dashboard = () => {
   const { t } = useTranslation("dashboard");
-  const { setConnectDialogOpen, setSelectedDevice } = useAppStore();
+  const { setConnectDialogOpen /*, setSelectedDevice*/ } = useAppStore();
+  /*
   const { getDevices } = useDeviceStore();
   const { getNodeDB } = useNodeDBStore();
-
   const devices = useMemo(() => getDevices(), [getDevices]);
+  */
 
   return (
     <div className="flex flex-col gap-3 p-3 px-8">
@@ -29,7 +32,8 @@ export const Dashboard = () => {
       <Separator />
 
       <div className="flex h-[450px] rounded-md border border-dashed border-slate-200 p-3 dark:border-slate-700">
-        {devices.length ? (
+        {
+          /*devices.length ? (
           <ul className="grow divide-y divide-slate-200">
             {devices.map((device) => {
               const nodeDB = getNodeDB(device.id);
@@ -69,8 +73,7 @@ export const Dashboard = () => {
               );
             })}
           </ul>
-        ) : (
-          <div className="m-auto flex flex-col gap-3 text-center">
+        ) : */ <div className="m-auto flex flex-col gap-3 text-center">
             <ListPlusIcon size={48} className="mx-auto text-text-secondary" />
             <Heading as="h3">{t("dashboard.noDevicesTitle")}</Heading>
             <Subtle>{t("dashboard.noDevicesDescription")}</Subtle>
@@ -83,7 +86,7 @@ export const Dashboard = () => {
               {t("dashboard.button_newConnection")}
             </Button>
           </div>
-        )}
+        }
       </div>
     </div>
   );