Create AddTagBadge component

ts/components/Badge.svelte

@@ -27,6 +27,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:dropdown-toggle={dropdownProps.dropdown}
     {...dropdownProps}
     on:click
+    on:mouseenter
+    on:mouseleave
 >
     <slot />
 </span>

ts/editor/AddTagBadge.svelte

@@ -0,0 +1,28 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import Badge from "components/Badge.svelte";
+    import { tagIcon, addTagIcon } from "./icons";
+
+    let theTagIcon = tagIcon;
+</script>
+
+<Badge
+    class="add-icon d-flex me-1"
+    on:click
+    on:mouseenter={() => (theTagIcon = addTagIcon)}
+    on:mouseleave={() => (theTagIcon = tagIcon)}>{@html theTagIcon}</Badge
+>
+
+<style lang="scss">
+    :global(.add-icon > svg) {
+        cursor: pointer;
+        opacity: 0.6;
+    }
+
+    :global(.add-icon > svg:hover) {
+        opacity: 1;
+    }
+</style>

ts/editor/BUILD.bazel

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

ts/editor/TagEditor.svelte

@@ -4,10 +4,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import StickyBottom from "components/StickyBottom.svelte";
-    import Badge from "components/Badge.svelte";
+    import AddTagBadge from "./AddTagBadge.svelte";
     import Tag from "./Tag.svelte";
     import TagInputNew from "./TagInputNew.svelte";
-    import { addTagIcon } from "./icons";
 
     export let tags = ["en::foobar", "zh::あっちこっち"];
 
@@ -27,9 +26,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <StickyBottom>
     <div class="d-flex flex-wrap">
-        <Badge class="add-icon d-flex me-1" on:click={focusInputNew}
-            >{@html addTagIcon}</Badge
-        >
+        <AddTagBadge on:click={focusInputNew} />
 
         {#each tags as tag}
             <Tag name={tag} on:tagdelete={deleteTag} />
@@ -45,14 +42,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     div {
         font-size: 13px;
         fill: currentColor;
-
-        :global(.add-icon > svg) {
-            cursor: pointer;
-            opacity: 0.5;
-        }
-
-        :global(.add-icon > svg:hover) {
-            opacity: 1;
-        }
     }
 </style>

ts/editor/icons.ts

@@ -31,6 +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.svg";
 export { default as addTagIcon } from "./tag-plus.svg";
 export { default as deleteIcon } from "./x.svg";