Add some visual for TagAutocomplete

ts/components/DropdownItem.svelte

@@ -30,6 +30,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:btn-night={nightMode}
     title={tooltip}
     on:click
+    on:mouseenter
     on:focus
     on:keydown
     on:mousedown|preventDefault

ts/editor/TagAutocomplete.svelte

@@ -15,7 +15,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export { className as class };
 
     let autocomplete: Dropdown | undefined;
+    let original: string | undefined;
+
     let displayed: string[] = [];
+    let selected: number | null = null;
+    let active: boolean = false;
+
+    function select(index: number) {
+        selected = index;
+    }
+
+    function choose() {}
 
     function switchUpDown(event: KeyboardEvent): void {
         const target = event.currentTarget as HTMLButtonElement;
@@ -37,10 +47,40 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const updateAutocomplete =
         (createDropdown: (element: HTMLElement) => Dropdown) =>
         (event: KeyboardEvent): Dropdown => {
-            const target = event.target as HTMLElement;
+            const target = event.target as HTMLInputElement;
             autocomplete = createDropdown(target);
             autocomplete.show();
 
+            displayed = suggestions;
+
+            if (
+                event.code === "ArrowDown" ||
+                (event.code === "Tab" && event.shiftKey)
+            ) {
+                event.preventDefault();
+                if (selected === null) {
+                    selected = displayed.length - 1;
+                } else if (selected === 0) {
+                    selected = null;
+                } else {
+                    selected--;
+                }
+            } else if (event.code === "ArrowUp" || event.code === "Tab") {
+                event.preventDefault();
+                if (selected === null) {
+                    selected = 0;
+                } else if (selected >= displayed.length - 1) {
+                    selected = null;
+                } else {
+                    selected++;
+                }
+            } else if (event.code === "Enter") {
+                event.preventDefault();
+                active = true;
+            } else {
+                original = target.value;
+            }
+
             return autocomplete;
         };
 
@@ -50,6 +90,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
 
         autocomplete.hide();
+        selected = null;
+        active = false;
     }
 </script>
 
@@ -57,11 +99,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <slot
         updateAutocomplete={updateAutocomplete(createDropdown)}
         {destroyAutocomplete}
+        selected={displayed[selected ?? -1]}
     />
 
     <DropdownMenu id={menuId} class={className}>
-        {#each suggestions as tag}
+        {#each displayed as tag, i}
-            <DropdownItem>{tag}</DropdownItem>
+            <DropdownItem
+                class={i === selected ? (active ? "active" : "focus") : ""}
+                on:mouseenter={() => select(i)}
+                on:click>{tag}</DropdownItem
+            >
         {/each}
     </DropdownMenu>
 </WithDropdownMenu>

ts/editor/TagEditor.svelte

@@ -156,8 +156,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <TagInput
                     bind:input={newInput}
                     bind:name={newName}
-                    on:keydown={() => {}}
+                    on:keydown={updateAutocomplete}
-                    on:blur={() => {}}
+                    on:blur={destroyAutocomplete}
                     on:tagupdate={appendTag}
                     on:tagadd={appendTag}
                     on:tagjoinprevious={joinWithLastTag}