Tree structure for presets

src/components/Dashboard.tsx

@@ -127,21 +127,23 @@ const DeviceList = ({devices, rootConfig}: {devices: Device[], rootConfig: Confi
 
 const ConfigList = ({rootConfig}: {rootConfig: ConfigPreset}) => {
   
-  const { setConfigPresetRoot, configPresetSelected, setConfigPresetSelected } = useAppStore();
+  const { configPresetRoot, setConfigPresetRoot, configPresetSelected, setConfigPresetSelected } = useAppStore();  
-  const [dummyState, setDummyState] = useState(0);
 
   return (
     <div className="flex flex-col rounded-md border border-dashed border-slate-200 h-1/2 p-3 mb-2 dark:border-slate-700">
       <button        
         className="transition-all hover:text-accent mb-4"
         onClick={() => {          
-          rootConfig?.children.push(new ConfigPreset(`Preset ${rootConfig.children.length}`, rootConfig.children[0]));
+          const newPreset = new ConfigPreset(`Preset ${rootConfig.children.length}`, rootConfig.children[0].config);
-          setDummyState(dummyState + 1);
+          configPresetSelected?.children.push(newPreset);          
+          setConfigPresetRoot(Object.create(configPresetRoot));
+          setConfigPresetSelected(newPreset);
         }}
       >
         <PlusIcon/>
       </button>
-      {rootConfig ? rootConfig.children.map((config, index) => {
+      {rootConfig && <ConfigEntry config={rootConfig} configPresetSelected={configPresetSelected} setConfigPresetSelected={setConfigPresetSelected}/>}
+      {/* {rootConfig ? rootConfig.children.map((config, index) => {
         return (<ConfigSelectButton
           label={config.name}
           active={index == configPresetSelected}
@@ -149,12 +151,31 @@ const ConfigList = ({rootConfig}: {rootConfig: ConfigPreset}) => {
           value={config.count}
           onClick={() => setConfigPresetSelected(index)}
           />)
-      }) : <div/>}
+      }) : <div/>} */}
     </div>
   )
 
 };
 
+const ConfigEntry = ({config, configPresetSelected, setConfigPresetSelected}: {config: ConfigPreset, configPresetSelected: ConfigPreset, setConfigPresetSelected: (selection: ConfigPreset) => void}) => {
+  const [configCount, setConfigCount] = useState(config.count);
+  return (
+    <div>
+      <ConfigSelectButton
+      label={config.name}
+      active={config == configPresetSelected}
+      setValue={(value) => {setConfigCount(value);}}
+      value={configCount}
+      onClick={() => setConfigPresetSelected(config)}
+      />
+      <div className="ml-[20px]">
+        {config.children.map(c =>
+            (<ConfigEntry config={c} configPresetSelected={configPresetSelected} setConfigPresetSelected={setConfigPresetSelected}/>)
+        )}
+      </div>
+    </div>
+  );
+}
 
 
 const DeviceSetupEntry = ({device, selectedToFlash, toggleSelectedToFlash, progressText}

src/components/UI/ConfigSelectButton.tsx

@@ -22,7 +22,7 @@ export const ConfigSelectButton = ({
     onClick={onClick}
     variant={active ? "subtle" : "ghost"}
     size="sm"
-    className="w-full justify-between gap-2"
+    className="w-full justify-between gap-2 my-[2px]"
   >
     {element && element}
     {label}

src/core/stores/appStore.ts

@@ -31,7 +31,7 @@ interface AppState {
   accent: accentColor;
   connectDialogOpen: boolean;
   configPresetRoot: ConfigPreset;
-  configPresetSelected: number;
+  configPresetSelected: ConfigPreset;
   flasher: Flasher;
 
   setRasterSources: (sources: RasterSource[]) => void;
@@ -46,7 +46,7 @@ interface AppState {
   setAccent: (color: accentColor) => void;
   setConnectDialogOpen: (open: boolean) => void;
   setConfigPresetRoot: (root: ConfigPreset) => void;
-  setConfigPresetSelected: (selection: number) => void;
+  setConfigPresetSelected: (selection: ConfigPreset) => void;
 }
 
 export const useAppStore = create<AppState>()((set) => ({
@@ -59,7 +59,7 @@ export const useAppStore = create<AppState>()((set) => ({
   accent: "orange",
   connectDialogOpen: false,
   configPresetRoot: undefined,
-  configPresetSelected: 0,
+  configPresetSelected: undefined,
   flasher: new Flasher(),
 
   setRasterSources: (sources: RasterSource[]) => {
@@ -130,7 +130,7 @@ export const useAppStore = create<AppState>()((set) => ({
       })
     )
   },
-  setConfigPresetSelected: (selection: number) => {
+  setConfigPresetSelected: (selection: ConfigPreset) => {
     set(
       produce<AppState>((draft) => {
         draft.configPresetSelected = selection;

src/core/stores/deviceStore.ts

@@ -600,7 +600,7 @@ export const useConfig = (): Protobuf.LocalConfig => {
   const context = useContext(DeviceContext);
   if(context == undefined) {
     const {configPresetRoot, configPresetSelected } = useAppStore();
-    return configPresetRoot.children[configPresetSelected].config;
+    return configPresetRoot.config;     // TEMP
   }
   return context.config;
 };