From 55d6c1cabe095b286f8c04a95284d88cb4027849 Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Sun, 15 Sep 2024 10:06:51 -0700
Subject: [PATCH] persist selected folder

---
 .../src/content-modules/ComparePal.svelte     | 18 +++++++-------
 .../src/content-modules/Manage.svelte         | 24 ++++++-------------
 .../src/controls/FolderConfig.svelte          |  6 ++---
 apps/color-buddy/src/stores/config-store.ts   |  4 ++++
 4 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/apps/color-buddy/src/content-modules/ComparePal.svelte b/apps/color-buddy/src/content-modules/ComparePal.svelte
index 39a6ec1..cd10c3c 100644
--- a/apps/color-buddy/src/content-modules/ComparePal.svelte
+++ b/apps/color-buddy/src/content-modules/ComparePal.svelte
@@ -37,10 +37,7 @@
   let showDiff = false;
 
   let colorSpace = ComparisonPal?.colorSpace || "lab";
-  let selectedFolder: { isPreMade: boolean; name: string } = {
-    isPreMade: false,
-    name: "",
-  };
+  $: selectedFolder = $configStore.selectedFolder;
   $: familiarPals = $examplePalStore.palettes
     .map((x) => x.palette)
     .filter((x) => selectedFolder.isPreMade && x.type === selectedFolder.name);
@@ -80,7 +77,10 @@
               <button
                 class={buttonStyle}
                 on:click={() => {
-                  selectedFolder = { isPreMade: true, name: folder };
+                  configStore.setSelectedFolder({
+                    isPreMade: true,
+                    name: folder,
+                  });
                 }}
                 class:underline={selectedFolder?.isPreMade &&
                   selectedFolder?.name === folder}
@@ -94,9 +94,11 @@
             {#each folders as folder}
               <button
                 class={buttonStyle}
-                on:click={() => {
-                  selectedFolder = { isPreMade: false, name: folder };
-                }}
+                on:click={() =>
+                  configStore.setSelectedFolder({
+                    isPreMade: false,
+                    name: folder,
+                  })}
                 class:underline={selectedFolder?.isPreMade === false &&
                   selectedFolder?.name === folder}
               >
diff --git a/apps/color-buddy/src/content-modules/Manage.svelte b/apps/color-buddy/src/content-modules/Manage.svelte
index 5a7d1ad..f44bb50 100644
--- a/apps/color-buddy/src/content-modules/Manage.svelte
+++ b/apps/color-buddy/src/content-modules/Manage.svelte
@@ -26,11 +26,12 @@
   $: familiarPals = $examplePalStore.palettes.map((x) => x.palette);
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colorSpace = currentPal.colorSpace;
+  $: selectedFolder = $configStore.selectedFolder;
 
   function usePal(palette: Palette) {
     colorStore.createNewPal(convertPalToSpace(palette, colorSpace));
     focusStore.clearColors();
-    selectedFolder = { isPreMade: false, name: "" };
+    configStore.setSelectedFolder({ isPreMade: false, name: "" });
   }
 
   function makeOperations(
@@ -151,10 +152,6 @@
   $: folders = Array.from(
     new Set($colorStore.palettes.map((pal) => pal.folder.toLowerCase()))
   ).sort((a, b) => a.length - b.length);
-  let selectedFolder: { isPreMade: boolean; name: string } = {
-    isPreMade: false,
-    name: "",
-  };
 </script>
 
 <div class="bg-stone-300 py-2 px-6 flex-col">
@@ -180,7 +177,8 @@
         .split(" ")
         .filter((x) => x !== "font-bold")
         .join(" ")}
-      on:click={() => (selectedFolder = { isPreMade: true, name: folder })}
+      on:click={() =>
+        configStore.setSelectedFolder({ isPreMade: true, name: folder })}
       class:underline={selectedFolder?.isPreMade &&
         selectedFolder?.name === folder}
     >
@@ -196,7 +194,8 @@
         .split(" ")
         .filter((x) => x !== "font-bold")
         .join(" ")}
-      on:click={() => (selectedFolder = { isPreMade: false, name: folder })}
+      on:click={() =>
+        configStore.setSelectedFolder({ isPreMade: false, name: folder })}
       class:underline={selectedFolder?.name === folder}
     >
       {folder.length ? `${folder}/` : "root/"}
@@ -205,16 +204,7 @@
 </div>
 {#if selectedFolder?.isPreMade === false && selectedFolder?.name !== ""}
   <div class="bg-stone-200 px-4">
-    <FolderConfig
-      folder={selectedFolder.name}
-      setFolder={(newFolder) => {
-        if (newFolder) {
-          selectedFolder = { isPreMade: false, name: newFolder };
-        } else {
-          selectedFolder = { isPreMade: false, name: "" };
-        }
-      }}
-    />
+    <FolderConfig folder={selectedFolder.name} />
   </div>
 {/if}
 
diff --git a/apps/color-buddy/src/controls/FolderConfig.svelte b/apps/color-buddy/src/controls/FolderConfig.svelte
index 0866e47..b97cf3b 100644
--- a/apps/color-buddy/src/controls/FolderConfig.svelte
+++ b/apps/color-buddy/src/controls/FolderConfig.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import colorStore from "../stores/color-store";
+  import configStore from "../stores/config-store";
   import Tooltip from "../components/Tooltip.svelte";
   import { buttonStyle } from "../lib/styles";
-  export let setFolder: (folder?: string) => void;
   export let folder: string;
   let renaming = false;
   function doRename(newFolder: string) {
@@ -15,7 +15,7 @@
       return hit ? { ...pal, folder: newFolder } : pal;
     });
     colorStore.setPalettes(pals);
-    setFolder(newFolder);
+    configStore.setSelectedFolder({ isPreMade: false, name: newFolder });
     renaming = false;
   }
 </script>
@@ -29,7 +29,7 @@
           pal.folder === folder ? { ...pal, folder: "" } : pal
         );
         colorStore.setPalettes(pals);
-        setFolder("");
+        configStore.setSelectedFolder({ isPreMade: false, name: "" });
       }}
     >
       Delete
diff --git a/apps/color-buddy/src/stores/config-store.ts b/apps/color-buddy/src/stores/config-store.ts
index e294bee..464f507 100644
--- a/apps/color-buddy/src/stores/config-store.ts
+++ b/apps/color-buddy/src/stores/config-store.ts
@@ -20,6 +20,7 @@ interface StoreData {
   manageBrowsePreviewIdx: number;
   route: "examples" | "compare" | "eval" | "manage";
   scatterplotMode: "moving" | "putting";
+  selectedFolder: { isPreMade: boolean; name: string };
   showColorBackground: "always show" | "show on drag" | "never show";
   showGamutMarkers: boolean;
   tempPal: Palette | undefined;
@@ -52,6 +53,7 @@ const InitialStore: StoreData = {
   mainColumnSelectedExample: -1,
   manageBrowsePreviewIdx: -1,
   route: "examples",
+  selectedFolder: { isPreMade: false, name: "" },
   scatterplotMode: "moving",
   showColorBackground: "show on drag",
   showGamutMarkers: true,
@@ -159,6 +161,8 @@ function createStore() {
     setTour: (n: StoreData["tour"]) => persist((old) => ({ ...old, tour: n })),
     setManageBrowsePreviewIdx: (n: StoreData["manageBrowsePreviewIdx"]) =>
       persist((old) => ({ ...old, manageBrowsePreviewIdx: n })),
+    setSelectedFolder: (n: StoreData["selectedFolder"]) =>
+      persist((old) => ({ ...old, selectedFolder: n })),
   };
 }