Add Tag.svelte

ts/editor/BUILD.bazel

@@ -103,6 +103,9 @@ copy_bootstrap_icons(
         "text-center.svg",
         "text-indent-left.svg",
         "text-indent-right.svg",
+
+        # tag editor
+        "x.svg",
     ],
     visibility = ["//visibility:public"],
 )

ts/editor/Tag.svelte

@@ -0,0 +1,30 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import { deleteIcon } from "./icons";
+
+    let active = false;
+
+    function activate(): void {
+        active = true;
+    }
+</script>
+
+{#if active}
+    <span>active!</span>
+{:else}
+    <span class="tag text-nowrap bg-secondary rounded p-1 me-2" on:click={activate}>
+        <slot />
+        {@html deleteIcon}
+    </span>
+{/if}
+
+<style lang="scss">
+    .tag {
+        /* important for tags with non-latin characters */
+        line-height: 2ch;
+        vertical-align: -webkit-baseline-middle;
+    }
+</style>

ts/editor/TagEditor.svelte

@@ -4,8 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import StickyBottom from "components/StickyBottom.svelte";
+    import Tag from "./Tag.svelte";
 </script>
 
 <StickyBottom>
-    <span>Tags</span>
+    <span>Tags:</span>
+    <Tag>en::foobar</Tag>
+    <Tag>zh::あちこ</Tag>
 </StickyBottom>

ts/editor/icons.ts

@@ -31,6 +31,8 @@ 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 deleteIcon } from "./x.svg";
+
 export const arrowIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="transparent" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>';