frontend: image file picker

frontend/src/lib/components/add_button.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
-    const { handler, size = 32 } = $props();
+    let { handler = () => {}, type = "button", files = $bindable() } = $props();
 </script>
 
-<button class="plus round" style="height: {size}px;" onclick={handler}>+</button>
+{#if type == "button"}
+    <button class="plus round" style="height: 32px;" onclick={handler}>+</button>
+{:else if type == "image"}
+    <label for="img-upload" class="plus round" style="height: 48px; display: inline-block;">+</label>
+    <input id="img-upload" accept="image/png, image/jpeg" style="display: none" bind:files type="file"/>
+{:else}
+    TODO
+{/if}
 
 <style>
     /* Кнопка "плюс" */
@@ -11,6 +18,8 @@
         aspect-ratio: 1 / 1;
         font-size: x-large;
         cursor: pointer;
+        text-align: center;
+        align-content: center;
     }
 
     @media (prefers-color-scheme: light) {

frontend/src/lib/components/image.svelte

@@ -1,13 +1,14 @@
 <script>
     import AddButton from "./add_button.svelte";
-    let { direction = "horisontal", input = true } = $props();
+    let { direction = "horisontal", image = $bindable() } = $props();
+
+    $effect(() => {
+		console.log(image);
+	});
 </script>
 
-<div class="{direction} {input ? "input" : ""} image rounded">
-    <AddButton size=48 handler={() => {
-        // addImage(plus.id, this.id);
-        // document.getElementById("screenshots").appendChild(new HorisontalImage().html);
-    }}/>
+<div class="{direction} input image rounded">
+    <AddButton type="image" bind:files={image}/>
 </div>
 
 <style>