Save and restore presets to/from local storage

src/components/Dashboard.tsx

@@ -26,11 +26,9 @@ import { ConfigSelectButton } from "./UI/ConfigSelectButton";
 import { Flasher, FlashOperation, FlashState } from "@app/core/flashing/Flasher";
 
 export const Dashboard = () => {
-  const { setConfigPresetRoot } = useAppStore();
   let { configPresetRoot, configPresetSelected } : {configPresetRoot: ConfigPreset, configPresetSelected?: ConfigPreset} = useAppStore();
-  const { getDevices } = useDeviceStore();  
-
-  const devices: Device[] = useMemo(() => getDevices(), [getDevices]);  
+  const { getDevices } = useDeviceStore();
+  const devices: Device[] = useMemo(() => getDevices(), [getDevices]);
   
   return (
     <div className="flex flex-col h-full gap-3 p-3">
@@ -134,6 +132,7 @@ const ConfigList = ({rootConfig}: {rootConfig: ConfigPreset}) => {
             setConfigPresetRoot(Object.create(configPresetRoot));
             setConfigPresetSelected(newPreset);
             setEditSelected(true);
+            newPreset.saveConfigTree();
           }}
         >
           <PlusIcon/>
@@ -157,7 +156,8 @@ const ConfigList = ({rootConfig}: {rootConfig: ConfigPreset}) => {
             if(!confirm(`Are you sure you want to remove "${configPresetSelected.name}"?`))
               return;
             configPresetSelected.parent.children = configPresetSelected.parent.children.filter(c => c != configPresetSelected);
-            setConfigPresetSelected(configPresetSelected.parent);            
+            setConfigPresetSelected(configPresetSelected.parent);
+            configPresetSelected.saveConfigTree();            
           }}
         >
           <Trash2Icon/>
@@ -173,6 +173,7 @@ const ConfigList = ({rootConfig}: {rootConfig: ConfigPreset}) => {
           onEditDone={(val) => {
             configPresetSelected.name = val;
             setEditSelected(false);
+            configPresetSelected.saveConfigTree();
           }
           }
         />

src/components/PageComponents/Config/Device.tsx

@@ -2,11 +2,11 @@ import type { DeviceValidation } from "@app/validation/config/device.js";
 import { useConfig, useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 import { DynamicForm, EnableSwitchData } from "@components/Form/DynamicForm.js";
+import type { ConfigPreset } from "@app/core/stores/appStore";
 
 export const Device = (): JSX.Element => {
   //const { config, setWorkingConfig } = useDevice();
   const config = useConfig();
-  debugger;
   const enableSwitch: EnableSwitchData | undefined = config.overrideValues ? {
     getEnabled(name) {
       return config.overrideValues![name] ?? false;
@@ -15,9 +15,12 @@ export const Device = (): JSX.Element => {
       config.overrideValues![name] = value;      
     },
   } : undefined;
-  
+  const isPresetConfig = !("id" in config);   // Kinda hacky...
 
   const onSubmit = (data: DeviceValidation) => {
+    if(isPresetConfig) {
+      (config as ConfigPreset).saveConfigTree();
+    }
     // setWorkingConfig(
     //   new Protobuf.Config({
     //     payloadVariant: {
@@ -31,6 +34,7 @@ export const Device = (): JSX.Element => {
   return (
     <DynamicForm<DeviceValidation>
       onSubmit={onSubmit}
+      submitType={isPresetConfig ? "onChange" : "onSubmit"}
       defaultValues={config.config.device}
       enableSwitch={enableSwitch}
       fieldGroups={[

src/core/stores/appStore.ts

@@ -33,6 +33,45 @@ export class ConfigPreset {
       config.device = new Protobuf.Config_DeviceConfig();
     // TODO: Add remaining
   }
+
+  public saveConfigTree() {
+    if(this.parent) {
+      this.parent.saveConfigTree();
+      return;
+    }
+    const replacer = (key: string, value: any) => {
+      if(key == "parent" || key == "count")
+        return undefined;
+      return value;
+    }
+    localStorage.setItem("PresetConfigs", JSON.stringify(this, replacer));
+  }
+
+  public static loadOrCreate(): ConfigPreset {
+    const storedConfigs = localStorage.getItem("PresetConfigs");
+    if(storedConfigs !== null) {
+      const rootPreset = JSON.parse(storedConfigs, (key: string, value:  any) => {            
+        if(key == '' || !isNaN(Number(key))) {
+          // Create new ConfigPreset object to ensure that the member functions are not undefined.
+          const preset = new ConfigPreset(value.name, undefined, value.config);
+          preset.children = value.children;
+          preset.children.forEach(c => c.parent = preset);
+          return preset;
+        }
+        return value;
+      });
+      return rootPreset;
+    }
+    return new ConfigPreset("Root");
+  }
+
+  public restoreChildConnections() {
+    this.children.forEach((c) => {
+      c.parent = this;  
+      c.restoreChildConnections();
+    });
+  }
+
 }
 
 interface AppState {
@@ -74,7 +113,7 @@ export const useAppStore = create<AppState>()((set) => ({
   darkMode: true,     // TEMP: Default to dark mode
   accent: "orange",
   connectDialogOpen: false,
-  configPresetRoot: new ConfigPreset("Root"),
+  configPresetRoot: ConfigPreset.loadOrCreate(),
   configPresetSelected: undefined,
   flasher: new Flasher(),