Decouple Autocomplete from TagInput:

Allows to only have one autocompletion for all tags, rather than every
tag having its own

ts/editor/AddTagBadge.svelte

@@ -16,23 +16,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <WithShortcut shortcut="Control+Shift+T" let:createShortcut let:shortcutLabel>
+    <div class="add-icon">
         <Badge
-        class="add-icon d-flex me-1"
+            class="me-1"
             tooltip={appendInParentheses(tooltip, shortcutLabel)}
             on:click
             on:mouseenter={() => (theTagIcon = addTagIcon)}
             on:mouseleave={() => (theTagIcon = tagIcon)}
             on:mount={withSpan(createShortcut)}>{@html theTagIcon}</Badge
         >
+    </div>
 </WithShortcut>
 
 <style lang="scss">
-    :global(.add-icon > svg) {
+    .add-icon {
+        line-height: 1;
+
+        :global(svg) {
             cursor: pointer;
+            fill: currentColor;
             opacity: 0.6;
         }
 
-    :global(.add-icon > svg:hover) {
+        :global(svg:hover) {
             opacity: 1;
         }
+    }
 </style>

ts/editor/TagAutocomplete.svelte

@@ -8,8 +8,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export const suggestions = ["en::idioms", "anki::functionality", "math"];
 
-    const triggerId = "tagLabel" + String(Math.random()).slice(2);
+    let className: string = "";
-    const triggerClass = "dropdown-toggle";
+    export { className as class };
 
     let menu: HTMLDivElement;
 
@@ -33,10 +33,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function updateActiveItem(even: FocusEvent): void {}
 </script>
 
-<div bind:this={menu} class="dropup dropdown-reverse">
+<div bind:this={menu} class={`dropup dropdown-reverse ${className}`}>
-    <slot {triggerId} {triggerClass} />
+    <slot />
 
-    <DropdownMenu labelledby={triggerId}>
+    <DropdownMenu>
         {#each suggestions as tag}
             <DropdownItem on:focus={updateActiveItem} on:keydown={switchUpDown}
                 >{tag}</DropdownItem

ts/editor/TagEditor.svelte

@@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import StickyBottom from "components/StickyBottom.svelte";
     import AddTagBadge from "./AddTagBadge.svelte";
     import Tag from "./Tag.svelte";
+    import TagAutocomplete from "./TagAutocomplete.svelte";
     import TagInput from "./TagInput.svelte";
     import { attachId, getName } from "./tags";
 
@@ -86,7 +87,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <StickyBottom>
-    <div class="d-flex flex-wrap">
+    <div class="font-size-13 row-gap">
+        <TagAutocomplete class="d-flex flex-wrap align-items-center row-gap">
             <AddTagBadge on:click={focusNewInput} />
 
             {#each tags as tag, index (tag.id)}
@@ -107,12 +109,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 on:tagadd={appendTag}
                 on:tagjoinprevious={joinWithLastTag}
             />
+        </TagAutocomplete>
     </div>
 </StickyBottom>
 
 <style lang="scss">
-    div {
+    .font-size-13 {
         font-size: 13px;
-        fill: currentColor;
+    }
+
+    .row-gap > :global(.d-flex > *) {
+        margin-bottom: 2px;
     }
 </style>

ts/editor/TagInput.svelte

@@ -96,28 +96,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
-    function setTagname({ detail }: CustomEvent): void {
-        name = detail.name;
-    }
-
     onMount(() => dispatch("mount", { input }));
 </script>
 
-<TagAutocomplete
+<label
-    bind:name
+    class="ps-2 pe-1"
-    let:triggerId
-    let:triggerClass
-    on:nameChosen={setTagname}
-    on:accept={onAccept}
->
-    <label
-        id={triggerId}
-        class={`ps-2 pe-1 ${triggerClass}`}
     data-value={name}
     data-bs-toggle="dropdown"
     aria-expanded="false"
-        data-bs-reference="parent"
+>
-    >
     <input
         bind:this={input}
         type="text"
@@ -131,8 +118,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:paste={onPaste}
         on:click
     />
-    </label>
+</label>
-</TagAutocomplete>
 
 <style lang="scss">
     label {