Enable tag delete icon

ts/components/Badge.svelte

@@ -41,6 +41,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     span :global(svg) {
+        border-radius: inherit;
         vertical-align: -0.125rem;
     }
 </style>

ts/editor/Tag.svelte

@@ -3,35 +3,46 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import { createEventDispatcher } from "svelte";
     import Badge from "components/Badge.svelte";
     import TagInputEdit from "./TagInputEdit.svelte";
     import { deleteIcon } from "./icons";
 
     export let name: string;
 
+    const dispatch = createEventDispatcher();
+
     let active = false;
+
+    function tagDelete(event: Event): void {
+        dispatch("tagdelete", { name });
+        event.stopPropagation();
+    }
 </script>
 
 {#if active}
     <TagInputEdit bind:name on:focusout={() => (active = false)} />
 {:else}
     <span
-        class="tag text-nowrap bg-secondary rounded p-1 me-2"
+        class="tag text-nowrap bg-secondary rounded p-1 ps-2 me-2"
         on:click|stopPropagation={() => (active = true)}
     >
         <span>{name}</span>
-        <Badge class="delete-icon">{@html deleteIcon}</Badge>
+        <Badge class="rounded delete-icon" on:click={tagDelete}
+            >{@html deleteIcon}</Badge
+        >
     </span>
 {/if}
 
 <style lang="scss">
-    .tag {
-        /* important for tags with non-latin characters */
-        line-height: 2ch;
-        vertical-align: -webkit-baseline-middle;
-
-        :global(.delete-icon):hover {
     $white-translucent: rgba(255, 255, 255, 0.5);
+
+    .tag :global(.delete-icon) {
+        & > :global(svg) {
+            vertical-align: text-bottom;
+        }
+
+        & > :global(svg:hover) {
             background-color: $white-translucent;
         }
     }

ts/editor/TagEditor.svelte

@@ -18,6 +18,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         inputNew = true;
         tagInputNew.focus();
     }
+
+    function deleteTag({ detail }: CustomEvent) {
+        tags.splice(tags.indexOf(detail.name), 1);
+        tags = tags;
+    }
 </script>
 
 <StickyBottom>
@@ -25,7 +30,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <Badge class="me-1">{@html tagIcon}</Badge>
 
         {#each tags as tag}
-            <Tag name={tag} />
+            <Tag name={tag} on:tagdelete={deleteTag} />
         {/each}
 
         {#if inputNew}

ts/editor/TagInput.svelte

@@ -63,7 +63,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     on:nameChosen={setTagname}
     on:accept={onAccept}
 >
-    <label data-value={name} id={triggerId} class={triggerClass}>
+    <label id={triggerId} class={`p-1 ${triggerClass}`} data-value={name}>
         <input
             type="text"
             size="1"
@@ -82,6 +82,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     label {
         display: inline-grid;
+
         &::after,
         input {
             color: var(--text-fg);
@@ -96,6 +97,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             margin: 0;
             padding: 0;
         }
+
         &::after {
             /* 8 spaces to minimize reflow on clicking tag */
             content: attr(data-value) "        ";