refactor the palete top

mcnuttandrew · Sep 19, 2024 · a6421b8 · a6421b8
1 parent ece20b0
commit a6421b8
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 90 deletions.
diff --git a/apps/color-buddy/src/components/Nav.svelte b/apps/color-buddy/src/components/Nav.svelte
@@ -20,6 +20,7 @@
           on:click={() => selectTab(tab)}
         >
           {formatter(tab)}
+          <slot name="menu" {tab} />
         </button>
       </li>
     {/each}

diff --git a/apps/color-buddy/src/content-modules/Manage.svelte b/apps/color-buddy/src/content-modules/Manage.svelte
@@ -173,65 +173,50 @@
     }}
   >
     <div class="bg-stone-200 p-4 text-xl font-bold">Palettes</div>
-    <div class="bg-stone-100 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,
-                  })}
-              >
-                {folder.length ? `${folder}` : "Home"}
-              </button>
-              {#if folder !== ""}
+    <div class="bg-stone-100 flex flex-col h-full py-2 px-4">
+      <div class="flex w-full">
+        <div class="flex flex-col">
+          <div class="text-sm uppercase font-bold">My Folders</div>
+          <Nav
+            tabs={folders}
+            isTabSelected={(tab) => selectedFolder?.name === tab}
+            formatter={(x) => x || "Home"}
+            selectTab={(tab) => {
+              configStore.setSelectedFolder({
+                isPreMade: false,
+                name: tab,
+              });
+            }}
+          >
+            <div slot="menu" let:tab>
+              {#if tab !== ""}
                 <div class="px-1">
-                  <FolderConfig {folder} />
+                  <FolderConfig folder={tab} />
                 </div>
               {/if}
             </div>
-          {/each}
-          <button
-            class="px-1"
-            on:click={() => {
-              folders = [...folders, newVersionName("new folder", folders)];
+          </Nav>
+        </div>
+        <div class="flex flex-col mx-2">
+          <div class="text-sm uppercase font-bold">Samples</div>
+          <Nav
+            tabs={["sequential", "categorical", "diverging"]}
+            isTabSelected={(tab) => selectedFolder?.name === tab}
+            selectTab={(tab) => {
+              configStore.setSelectedFolder({
+                isPreMade: true,
+                name: tab,
+              });
             }}
-          >
-            <Plus />
-          </button>
+          />
+        </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-col mx-2">
-        <div class="text-sm uppercase font-bold">Samples</div>
-        <Nav
-          tabs={["sequential", "categorical", "diverging"]}
-          isTabSelected={(tab) => selectedFolder?.name === tab}
-          selectTab={(tab) => {
-            configStore.setSelectedFolder({
-              isPreMade: true,
-              name: tab,
-            });
-          }}
-        />
-      </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"
     >

diff --git a/apps/color-buddy/src/controls/Config.svelte b/apps/color-buddy/src/controls/Config.svelte
@@ -87,48 +87,9 @@
   </button>
   <div slot="content">
     <div class="flex mb-4">
-      <button
-        class={buttonStyle}
-        on:click={() => {
-          const pals = $colorStore.palettes.map((x) => {
-            const { colors, background, name, colorSpace, type } = x;
-            return {
-              background: background.toHex(),
-              colorSpace,
-              colors: colors.map((c) => c.toHex()),
-              name,
-              type,
-            };
-          });
-          const blob = new Blob([JSON.stringify(pals)], {
-            type: "application/json",
-          });
-
-          const url = window.URL.createObjectURL(blob);
-          const a = document.createElement("a");
-          a.style.display = "none";
-          a.href = url;
-
-          // the filename you want
-          a.download = "palettes-export.json";
-          document.body.appendChild(a);
-          a.click();
-          window.URL.revokeObjectURL(url);
-        }}
-      >
-        Export Palettes
-      </button>
       <button class={buttonStyle} on:click={() => importPals()}>
         Import Palettes
       </button>
-      <button
-        class={buttonStyle}
-        on:click={() => {
-          colorStore.clearPalettes();
-        }}
-      >
-        Clear Palettes
-      </button>
     </div>
     <div class="font-bold">Configurations</div>
     <div>Pick AI Provider</div>

diff --git a/apps/color-buddy/src/controls/FolderConfig.svelte b/apps/color-buddy/src/controls/FolderConfig.svelte
@@ -35,6 +35,39 @@
   }}
 >
   <div slot="content" class="flex flex-col">
+    <button
+      class={simpleTooltipRowStyle}
+      on:click={() => {
+        const pals = $colorStore.palettes
+          .filter((x) => x.folder === folder)
+          .map((x) => {
+            const { colors, background, name, colorSpace, type } = x;
+            return {
+              background: background.toHex(),
+              colorSpace,
+              colors: colors.map((c) => c.toHex()),
+              name,
+              type,
+            };
+          });
+        const blob = new Blob([JSON.stringify(pals)], {
+          type: "application/json",
+        });
+
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.style.display = "none";
+        a.href = url;
+
+        // the filename you want
+        a.download = "palettes-export.json";
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+      }}
+    >
+      Export Palettes
+    </button>
     <button
       class={simpleTooltipRowStyle}
       on:click={() => {