feat: color modal

view/src/App.svelte

@@ -1,11 +1,25 @@
 <script lang="ts">
+	import { fade } from "svelte/transition";
 	import Editor from "./routes/editor.svelte";
 	import * as routes from "./routes";
 	import ToastWrapper from "./components/Toast/ToastWrapper.svelte";
-	import { route as currentRoute } from "./stores";
+	import ModalWrapper from "./components/Modals/ModalWrapper.svelte";
+	import { route as currentRoute, images } from "./stores";
+	const imageStore = images.store;
 	import Changelog from "components/Changelog";
+	import { onMount } from "svelte";
+
+	onMount(() => {
+		setTimeout(() => {
+			if ($imageStore.length > 0 && $currentRoute === "main") {
+				$currentRoute = "list";
+			}
+		}, 100);
+	});
 </script>
 
+<ModalWrapper />
+
 {#if $currentRoute.startsWith("editor")}
 	<Editor />
 {:else if $currentRoute in routes}

view/src/components/Analyzer.svelte

@@ -22,8 +22,6 @@
 
   const prom = countPixels(img, correctDistortion);
 
-  console.log($colorStore);
-
   const getName = (color) => {
     const [r, g, b] = color.id.split("-").map((num) => parseInt(num) * 255);
 

view/src/components/Modals/Colors.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import Toast from "components/Toast";
+
+  import { colorStore, modalStore } from "stores";
+
+  function handleKeyDown(ev) {
+    if (ev.key === "Escape") {
+      $modalStore = "";
+    }
+  }
+
+  Toast.info("Click on the names to rename");
+
+  function handleElKeyDown(ev) {
+    if (ev.key === "Enter" || ev.key === "Escape") this.blur();
+  }
+</script>
+
+<svelte:window on:keydown={handleKeyDown} />
+
+<div class="wrapper">
+  <div class="color-wrapper">
+    {#each $colorStore as color}
+      <div class="color" style={`background-color: #${color.val}`} />
+      <p
+        contenteditable="true"
+        bind:innerHTML={color.name}
+        on:keydown={handleElKeyDown}
+      />
+    {/each}
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    display: grid;
+    place-items: center;
+    height: 100%;
+  }
+
+  .color-wrapper {
+    display: grid;
+    max-width: 500px;
+    grid-template-rows: auto;
+    grid-template-columns: 70px auto;
+    row-gap: 10px;
+  }
+
+  .color {
+    display: inline;
+    box-sizing: border-box;
+    width: 70px;
+    height: 70px;
+  }
+
+  p {
+    height: fit-content;
+    margin: 0;
+    margin-left: 10px;
+    cursor: pointer;
+    font-weight: bold;
+  }
+</style>

view/src/components/Modals/ModalWrapper.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { Cross } from "../../icons";
+
+  import { modalStore } from "stores";
+  import { fade } from "svelte/transition";
+  import modals from ".";
+</script>
+
+{#if $modalStore.length && $modalStore in modals}
+  <div class="modal-wrapper" transition:fade>
+    <div id="cross-wrapper" on:click={() => ($modalStore = "")}>
+      <Cross w={50} color="black" weight={2} />
+    </div>
+
+    <svelte:component this={modals[$modalStore]} />
+  </div>
+{/if}
+
+<style>
+  #cross-wrapper {
+    position: absolute;
+    transform: rotate(45deg);
+    display: inline;
+    top: 20px;
+    right: 40px;
+    cursor: pointer;
+  }
+  .modal-wrapper {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+    background-color: rgba(255, 255, 255, 0.8);
+  }
+</style>

view/src/components/Modals/index.ts

@@ -0,0 +1,5 @@
+import Colors from "./Colors.svelte";
+
+export default {
+  colors: Colors
+}

view/src/routes/list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Cross } from "../icons";
   import { fly, fade, slide } from "svelte/transition";
-  import { images as imageData, route } from "stores";
+  import { images as imageData, modalStore, route } from "stores";
   import { bufToImageUrl, AI, downloadImage } from "../helpers";
   import type { Writable } from "svelte/store";
 
@@ -98,6 +98,11 @@
     <Cross w={20} color="white" weight={2} />
     <p>Add more images</p>
   </div>
+
+  <div id="color-wrapper" on:click={() => ($modalStore = "colors")}>
+    <Cross w={20} color="white" weight={2} />
+    <p>Add more images</p>
+  </div>
 </main>
 
 <style>

view/src/stores/index.ts

@@ -2,4 +2,5 @@ import * as images from "./images";
 export { images }
 export { default as route } from "./route";
 export { default as commitStore } from "./commits";
-export { default as colorStore } from "./colors";
+export { default as colorStore } from "./colors";
+export { default as modalStore } from "./modal";

view/src/stores/modal.ts

@@ -0,0 +1,9 @@
+import { writable } from "svelte/store";
+
+const store = writable<string>("");
+
+store.subscribe(v => {
+  document.body.classList[v.length ? "add" : "remove"]("modal-visible")
+})
+
+export default store;