frontend: implement marks input

frontend/src/lib/components/horisontal_bar.svelte

@@ -14,7 +14,7 @@
             <HorisontalItem text={item}/>
         {/each}
         <AddButton handler={() => {
-            items.push("test");
+            items.push("");
             value = items;
         }} />
     {:else if type == "image"}

frontend/src/lib/components/horisontal_item.svelte

@@ -1,35 +1,93 @@
-<script>
+<script lang="ts">
     let { text } = $props();
+
+    let compl_data = $state([]);
+    
+    function autocomplete() {
+        if (text !== "") {
+            fetch('http://127.0.0.1:8000/api/marks', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Access-Control-Allow-Origin': "<origin>"
+                },
+                body: JSON.stringify({type: "tag", value: text})
+            }).then((response) => response.json())
+              .then((json) => compl_data = json);
+        } else {
+            compl_data = [];
+        }
+    }
 </script>
 
-<div class="horisontal-item rounded">
-    {text}
+<div>
+    <input type="text" 
+       class="dyn-input rounded" 
+       style="width: {text.length}ch;" 
+       bind:value={text}
+       oninput={autocomplete}>
+    {#if compl_data}
+        <div class="popup rounded" tabindex="0" role="button" onmousedown={(e) => {e.preventDefault();}}>
+            {#each compl_data as item}
+                <button onclick={text = this.textContent}>{item[2]}</button>
+            {/each}
+        </div>
+    {/if}
 </div>
 
 <style>
+
     /* Элемент вертикального списка (тег, бадж, жанр) */
-    .horisontal-item {
+    .dyn-input {
         padding: 0.25rem;
+        background: none;
+        border: none;
+        text-align: center;
+    }
+
+    .popup {
+        text-align: center;
+        display: none;
+        position: absolute;
+        margin-top: 0.5rem;
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    }
+
+    .popup * {
+        background: none;
+        margin: 0.5rem;
+    }
+
+    .dyn-input:focus + .popup {
+        display: grid;
     }
 
     @media (prefers-color-scheme: light) {
-        .horisontal-item {
+        .popup {
+            background-color: #F4F4F4;
+        }
+
+        .dyn-input {
             background-color: #5C8DC0;
             color: white;
         }
 
-        .horisontal-item:hover {
+        .dyn-input:hover {
             background-color: #567aa1;
         }
     }
 
     @media (prefers-color-scheme: dark) {
-        .horisontal-item {
+        .popup {
+            background-color: #192431;
+        }
+        
+        .dyn-input {
             background-color: #2791FF;
             color: white;
         }
 
-        .horisontal-item:hover {
+        .dyn-input:hover {
             background-color: #2c7dd4;
         }
     }