[O] Split color picker into separate component

src/App.svelte

@@ -8,6 +8,7 @@
   import CompletedOverlay from './lib/CompletedOverlay.svelte';
   import UploadOverlay from './lib/UploadOverlay.svelte';
   import Heading from './lib/Heading.svelte';
+  import ColorPicker from './lib/ColorPicker.svelte';
 
   const params = new URLSearchParams(location.search)
   const hasTouch = Misc.hasTouch()
@@ -361,16 +362,7 @@
     {#if mode === 'color'}
       <div class="btn-div">
         <button on:click={() => colors = [...colors, "#90A4AE"]}>+</button>
-        {#each colors as color, idx}
-        <div class="color-picker-div">
-          <button class="color-picker" on:click={() => ci = idx} aria-label="color" class:selected={ci === idx}>
-            <div class="color" style={`background-color: ${color}`} role="none"
-              on:click={() => document.getElementById(`color-picker-${idx}`)!.click()}></div>
-          </button>
-          <input type="color" value={color} id={`color-picker-${idx}`}
-            on:input={e => { colors[idx] = e.target.value; updateColors() }}/>
-        </div>
-        {/each}
+        {#each colors as color, idx}<ColorPicker bind:ci={ci} {idx} {colors} {updateColors}/>{/each}
       </div>
     {/if}
     <div class="btn-div">

src/lib/ColorPicker.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    export let ci: number
+    export let idx: number
+    export let colors: string[]
+    export let updateColors: () => void
+    
+    let input: HTMLInputElement
+    $: color = colors[idx]
+</script>
+
+<div class="color-picker-div">
+    <button class="color-picker" on:click={() => ci = idx} aria-label="color" class:selected={ci === idx}>
+      <div class="color" style={`background-color: ${color}`} role="none"
+        on:click={() => input!.click()}></div>
+    </button>
+    <input type="color" value={color} bind:this={input}
+      on:input={e => { colors[idx] = e.target.value; updateColors() }}/>
+  </div>