From a0925f9ba5f924364703d6555a2fe3d28bf5b1da Mon Sep 17 00:00:00 2001
From: OleSTEEP <krinkinoleg@gmail.com>
Date: Thu, 16 Oct 2025 17:27:13 +0300
Subject: [PATCH] frontend: properly bind marks values

---
 .../src/lib/components/containers/marks.svelte     | 10 +++++-----
 frontend/src/lib/components/mark.svelte            | 14 +++++++++++---
 frontend/src/routes/+layout.svelte                 |  2 +-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/containers/marks.svelte b/frontend/src/lib/components/containers/marks.svelte
index 16c27bb..5375923 100644
--- a/frontend/src/lib/components/containers/marks.svelte
+++ b/frontend/src/lib/components/containers/marks.svelte
@@ -4,19 +4,19 @@
 
     let { value = $bindable([]), label = "" } = $props();
     let items: string[] = $state([]);
+
+    $effect(() => {value = items});
 </script>
 
 <div class="marks-container input rounded">
     <p>{label}</p>
 
-    {#each items as item}
-        <Mark text={item}/>
+    {#each items as item, index}
+        <Mark bind:text={items[index]}/>
     {/each}
     <AddButton handler={() => {
-        items.push("");
-        value = items;
+        items.push(null);
     }} />
-    
 </div>
 
 <style>
diff --git a/frontend/src/lib/components/mark.svelte b/frontend/src/lib/components/mark.svelte
index 164e881..6a8c94e 100644
--- a/frontend/src/lib/components/mark.svelte
+++ b/frontend/src/lib/components/mark.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
-    let { text } = $props();
+
+    let { text = $bindable() } = $props();
 
     let compl_data = $state([]);
+
+    const placeholder = "Текст";
     
     function autocomplete() {
         if (text !== "") {
@@ -18,14 +21,19 @@
             compl_data = [];
         }
     }
+
+    $effect(() => {
+        if (text == "") text = null;
+    })
 </script>
 
 <div>
     <input type="text" 
        class="dyn-input rounded" 
-       style="width: {text.length}ch;margin:0;" 
+       style="width: {(text ?? placeholder).length}ch;margin:0;" 
        bind:value={text}
-       oninput={autocomplete}>
+       oninput={autocomplete}
+       {placeholder}>
     {#if compl_data}
         <div class="popup rounded" tabindex="0" role="button" onmousedown={(e) => {e.preventDefault();}}>
             {#each compl_data as item}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index f9608c2..4a1092b 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -20,7 +20,7 @@
 		genres: [],
 		tags: [],
 		badges: []
-	})
+	});
 </script>
 
 <svelte:head>