Make Tag icon an add tag icon

ts/editor/BUILD.bazel

@@ -132,6 +132,7 @@ copy_mdi_icons(
 
         # tag editor
         "tag-outline.svg",
+        "tag-plus.svg",
     ],
     visibility = ["//visibility:public"],
 )

ts/editor/Tag.svelte

@@ -14,6 +14,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let active = false;
 
+    function checkForActivation(): void {
+        const selection = window.getSelection()!;
+        if (selection.isCollapsed) {
+            active = true;
+        }
+    }
+
     function tagDelete(event: Event): void {
         dispatch("tagdelete", { name });
         event.stopPropagation();
@@ -25,10 +32,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 {:else}
     <span
         class="d-inline-flex align-items-center tag text-nowrap bg-secondary rounded ps-2 pe-1 me-1"
-        on:click|stopPropagation={() => (active = true)}
+        on:click|stopPropagation={checkForActivation}
     >
         <span>{name}</span>
-        <Badge class="rounded delete-icon ms-1 mt-1" on:click={tagDelete}
+        <Badge class="delete-icon rounded ms-1 mt-1" on:click={tagDelete}
             >{@html deleteIcon}</Badge
         >
     </span>

ts/editor/TagEditor.svelte

@@ -7,14 +7,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Badge from "components/Badge.svelte";
     import Tag from "./Tag.svelte";
     import TagInputNew from "./TagInputNew.svelte";
-    import { tagIcon } from "./icons";
+    import { addTagIcon } from "./icons";
 
     export let tags = ["en::foobar", "zh::あっちこっち"];
 
     let tagInputNew: HTMLInputElement;
     let inputNew = false;
 
-    function focusTagInputNew(): void {
+    function focusInputNew(): void {
         inputNew = true;
         tagInputNew.focus();
     }
@@ -26,26 +26,33 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <StickyBottom>
-    <div class="d-flex flex-wrap" on:click={focusTagInputNew}>
+    <div class="d-flex flex-wrap">
-        <Badge class="me-1">{@html tagIcon}</Badge>
+        <Badge class="add-icon d-flex me-1" on:click={focusInputNew}
+            >{@html addTagIcon}</Badge
+        >
 
         {#each tags as tag}
             <Tag name={tag} on:tagdelete={deleteTag} />
         {/each}
 
-        {#if inputNew}
+        <div d-none={!inputNew}>
             <TagInputNew bind:input={tagInputNew} on:blur={() => (inputNew = false)} />
-        {/if}
+        </div>
     </div>
 </StickyBottom>
 
 <style lang="scss">
     div {
         font-size: 13px;
-    }
-
-    :global(#mdi-tag-outline) {
         fill: currentColor;
-        height: 100%;
+
+        :global(.add-icon > svg) {
+            cursor: pointer;
+            opacity: 0.5;
+        }
+
+        :global(.add-icon > svg:hover) {
+            opacity: 1;
+        }
     }
 </style>

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 id={triggerId} class={`p-1 ${triggerClass}`} data-value={name}>
+    <label id={triggerId} class={`ps-2 pe-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;
+        height: 100%;
 
         &::after,
         input {

ts/editor/icons.ts

@@ -31,7 +31,7 @@ export { default as ellipseIcon } from "./contain.svg";
 export { default as functionIcon } from "./function-variant.svg";
 export { default as xmlIcon } from "./xml.svg";
 
-export { default as tagIcon } from "./tag-outline.svg";
+export { default as addTagIcon } from "./tag-plus.svg";
 export { default as deleteIcon } from "./x.svg";
 
 export const arrowIcon =