frontend: properly bind marks values

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>

frontend/src/lib/components/mark.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
-    let { text } = $props();
+
+    let { text = $bindable() } = $props();
 
     let compl_data = $state([]);
 
+    const placeholder = "Текст";
+    
     function autocomplete() {
         if (text !== "") {
             fetch('http://127.0.0.1:8000/api/marks', {
@@ -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}

frontend/src/routes/+layout.svelte

@@ -20,7 +20,7 @@
 		genres: [],
 		tags: [],
 		badges: []
-	})
+	});
 </script>
 
 <svelte:head>