From d19f9a8acbdab4e8465c995efc1d6a5e3a81ea02 Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Thu, 19 Sep 2024 09:31:43 -0600
Subject: [PATCH] close modal on click

---
 .../src/content-modules/Manage.svelte         | 274 +++++++++---------
 .../src/controls/FolderConfig.svelte          |   3 +-
 2 files changed, 144 insertions(+), 133 deletions(-)

diff --git a/apps/color-buddy/src/content-modules/Manage.svelte b/apps/color-buddy/src/content-modules/Manage.svelte
index e14e443..20aae9c 100644
--- a/apps/color-buddy/src/content-modules/Manage.svelte
+++ b/apps/color-buddy/src/content-modules/Manage.svelte
@@ -164,142 +164,152 @@
   Palettes...
 </button>
 
-<Modal
-  showModal={modalState === "open"}
-  closeModal={() => {
-    modalState = "closed";
-    onClose();
-  }}
->
-  <div class="bg-stone-300 p-4 text-xl font-bold">Palettes</div>
-  <div class="bg-stone-200 flex h-full py-2 px-4">
-    <div class="flex flex-col">
-      <div class="text-sm uppercase font-bold">My Folders</div>
-      <div class="flex">
-        {#each folders as folder}
-          <div
-            class="flex duration-150 px-1 items-center"
-            class:border-stone-400={selectedFolder?.name !== folder}
-            class:border-b={selectedFolder?.name !== folder}
-            class:border-black={selectedFolder?.name === folder}
-            class:border-b-2={selectedFolder?.name === folder}
-          >
-            <button
-              class={"whitespace-nowrap "}
-              on:click={() =>
-                configStore.setSelectedFolder({
-                  isPreMade: false,
-                  name: folder,
-                })}
+{#if modalState === "open"}
+  <Modal
+    showModal={modalState === "open"}
+    closeModal={() => {
+      modalState = "closed";
+      onClose();
+    }}
+  >
+    <div class="bg-stone-300 p-4 text-xl font-bold">Palettes</div>
+    <div class="bg-stone-200 flex h-full py-2 px-4">
+      <div class="flex flex-col">
+        <div class="text-sm uppercase font-bold">My Folders</div>
+        <div class="flex">
+          {#each folders as folder}
+            <div
+              class="flex duration-150 px-1 items-center"
+              class:border-stone-400={selectedFolder?.name !== folder}
+              class:border-b={selectedFolder?.name !== folder}
+              class:border-black={selectedFolder?.name === folder}
+              class:border-b-2={selectedFolder?.name === folder}
             >
-              {folder.length ? `${folder}` : "Home"}
-            </button>
-            {#if folder !== ""}
-              <div class="px-1">
-                <FolderConfig {folder} />
-              </div>
-            {/if}
-          </div>
-        {/each}
-        <button
-          class="px-1"
-          on:click={() => {
-            let folderName = "new folder";
-            let i = 1;
-            while ($colorStore.palettes.some((x) => x.folder === folderName)) {
-              folderName = `new folder ${i}`;
-              i++;
-            }
+              <button
+                class={"whitespace-nowrap "}
+                on:click={() =>
+                  configStore.setSelectedFolder({
+                    isPreMade: false,
+                    name: folder,
+                  })}
+              >
+                {folder.length ? `${folder}` : "Home"}
+              </button>
+              {#if folder !== ""}
+                <div class="px-1">
+                  <FolderConfig {folder} />
+                </div>
+              {/if}
+            </div>
+          {/each}
+          <button
+            class="px-1"
+            on:click={() => {
+              let folderName = "new folder";
+              let i = 1;
+              while (
+                $colorStore.palettes.some((x) => x.folder === folderName)
+              ) {
+                folderName = `new folder ${i}`;
+                i++;
+              }
 
-            // colorStore.setPalettes(newPals);
-            folders = [...folders, folderName];
-            // selectedFolder = { isPreMade: false, name: folderName };
-          }}
-        >
-          <Plus />
-        </button>
-      </div>
-    </div>
-    <div class="flex flex-col mx-2">
-      <div class="text-sm uppercase font-bold">Samples</div>
-      <div class="flex">
-        {#each ["sequential", "categorical", "diverging"] as folder}
-          <div
-            class="flex duration-150 px-1 items-center"
-            class:border-stone-400={selectedFolder?.name !== folder}
-            class:border-b={selectedFolder?.name !== folder}
-            class:border-black={selectedFolder?.name === folder}
-            class:border-b-2={selectedFolder?.name === folder}
+              // colorStore.setPalettes(newPals);
+              folders = [...folders, folderName];
+              // selectedFolder = { isPreMade: false, name: folderName };
+            }}
           >
-            <button
-              class={"whitespace-nowrap "}
-              on:click={() =>
-                configStore.setSelectedFolder({
-                  isPreMade: true,
-                  name: folder,
-                })}
+            <Plus />
+          </button>
+        </div>
+      </div>
+      <div class="flex flex-col mx-2">
+        <div class="text-sm uppercase font-bold">Samples</div>
+        <div class="flex">
+          {#each ["sequential", "categorical", "diverging"] as folder}
+            <div
+              class="flex duration-150 px-1 items-center"
+              class:border-stone-400={selectedFolder?.name !== folder}
+              class:border-b={selectedFolder?.name !== folder}
+              class:border-black={selectedFolder?.name === folder}
+              class:border-b-2={selectedFolder?.name === folder}
             >
-              {folder}
-            </button>
-          </div>
-        {/each}
+              <button
+                class={"whitespace-nowrap "}
+                on:click={() =>
+                  configStore.setSelectedFolder({
+                    isPreMade: true,
+                    name: folder,
+                  })}
+              >
+                {folder}
+              </button>
+            </div>
+          {/each}
+        </div>
+      </div>
+      <GenerateNewNames />
+      <div class="flex justify-between items-center">
+        <span class="whitespace-nowrap mr-2 ml-4">Thumbnail Style:</span>
+        <PreviewSelector exampleName={example?.name || "Discs"} />
       </div>
     </div>
-    <GenerateNewNames />
-    <div class="flex justify-between items-center">
-      <span class="whitespace-nowrap mr-2 ml-4">Thumbnail Style:</span>
-      <PreviewSelector exampleName={example?.name || "Discs"} />
-    </div>
-  </div>
 
-  <div
-    class="flex flex-wrap h-full overflow-auto p-4 content-baseline min-h-96"
-  >
-    {#if selectedFolder.isPreMade}
-      {#each familiarPals as palette}
-        {#if palette.type === selectedFolder.name}
-          <BrowseCard
-            {palette}
-            targetBody={false}
-            markAsCurrent={false}
-            allowInteraction={false}
-            allowResize={false}
-            previewIndex={$configStore.manageBrowsePreviewIdx}
-            titleClick={() => usePal(palette)}
-            title={palette.name}
-            operations={[
-              {
-                name: "Use the palette",
-                action: () => usePal(palette),
-                closeOnClick: true,
-              },
-            ]}
-          />
-        {/if}
-      {/each}
-    {:else}
-      {#each $colorStore.palettes as pal, paletteIdx}
-        {#if pal.folder.toLowerCase() === selectedFolder?.name.toLowerCase()}
-          <BrowseCard
-            targetBody={false}
-            markAsCurrent={$colorStore.currentPal === paletteIdx}
-            onRename={(name) => {
-              const newPals = [...$colorStore.palettes];
-              newPals[paletteIdx] = { ...pal, name };
-              colorStore.setPalettes(newPals);
-            }}
-            allowInteraction={false}
-            allowResize={false}
-            palette={pal}
-            titleClick={() => {
-              colorStore.startUsingPal(paletteIdx);
-            }}
-            title={pal.name}
-            previewIndex={$configStore.manageBrowsePreviewIdx}
-            operations={makeOperations(paletteIdx, pal)}
-          />
-        {/if}
-      {/each}
-    {/if}
-  </div>
-</Modal>
+    <div
+      class="flex flex-wrap h-full overflow-auto p-4 content-baseline min-h-96"
+    >
+      {#if selectedFolder.isPreMade}
+        {#each familiarPals as palette}
+          {#if palette.type === selectedFolder.name}
+            <BrowseCard
+              {palette}
+              targetBody={false}
+              markAsCurrent={false}
+              allowInteraction={false}
+              allowResize={false}
+              previewIndex={$configStore.manageBrowsePreviewIdx}
+              titleClick={() => {
+                usePal(palette);
+                onClose();
+              }}
+              title={palette.name}
+              operations={[
+                {
+                  name: "Use the palette",
+                  action: () => usePal(palette),
+                  closeOnClick: true,
+                },
+              ]}
+            />
+          {/if}
+        {/each}
+      {:else}
+        {#each $colorStore.palettes as pal, paletteIdx}
+          {#if pal.folder.toLowerCase() === selectedFolder?.name.toLowerCase()}
+            <BrowseCard
+              targetBody={false}
+              markAsCurrent={$colorStore.currentPal === paletteIdx}
+              onRename={(name) => {
+                const newPals = [...$colorStore.palettes];
+                newPals[paletteIdx] = { ...pal, name };
+                colorStore.setPalettes(newPals);
+              }}
+              allowInteraction={false}
+              allowResize={false}
+              palette={pal}
+              titleClick={() => {
+                colorStore.startUsingPal(paletteIdx);
+                if (pal.folder === selectedFolder?.name) {
+                  onClose();
+                }
+              }}
+              title={pal.name}
+              previewIndex={$configStore.manageBrowsePreviewIdx}
+              operations={makeOperations(paletteIdx, pal)}
+            />
+          {/if}
+        {/each}
+      {/if}
+    </div>
+  </Modal>
+{/if}
diff --git a/apps/color-buddy/src/controls/FolderConfig.svelte b/apps/color-buddy/src/controls/FolderConfig.svelte
index e3955ae..dd26c3a 100644
--- a/apps/color-buddy/src/controls/FolderConfig.svelte
+++ b/apps/color-buddy/src/controls/FolderConfig.svelte
@@ -3,7 +3,7 @@
   import configStore from "../stores/config-store";
   import Tooltip from "../components/Tooltip.svelte";
   import DownChev from "virtual:icons/fa6-solid/angle-down";
-  import { simpleTooltipRowStyle } from "../lib/styles";
+  import { simpleTooltipRowStyle, buttonStyle } from "../lib/styles";
   export let folder: string;
   let renaming = false;
   function doRename(newFolder: string) {
@@ -51,6 +51,7 @@
     {#if renaming}
       <input
         type="text"
+        class={buttonStyle}
         value={folder}
         on:keydown={(e) => {
           if (e.key === "Enter") {