From 831f3a5f983998aaa6813a84b34ce903632d6c8f Mon Sep 17 00:00:00 2001
From: OleSTEEP <krinkinoleg@gmail.com>
Date: Fri, 10 Oct 2025 00:02:18 +0300
Subject: [PATCH] frontend: image file picker

---
 frontend/src/lib/components/add_button.svelte | 13 +++++++++++--
 frontend/src/lib/components/image.svelte      | 13 +++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/add_button.svelte b/frontend/src/lib/components/add_button.svelte
index b95464b..9de39b1 100644
--- a/frontend/src/lib/components/add_button.svelte
+++ b/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) {
diff --git a/frontend/src/lib/components/image.svelte b/frontend/src/lib/components/image.svelte
index 9902909..df1a0c2 100644
--- a/frontend/src/lib/components/image.svelte
+++ b/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>