From 0e858d87d41b3b43fd79d5137b27dcbb000e66a8 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 23 Jun 2021 17:35:50 +0200
Subject: [PATCH] Add Tag.svelte

---
 ts/editor/BUILD.bazel      |  3 +++
 ts/editor/Tag.svelte       | 30 ++++++++++++++++++++++++++++++
 ts/editor/TagEditor.svelte |  5 ++++-
 ts/editor/icons.ts         |  2 ++
 4 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 ts/editor/Tag.svelte

diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index 470777076..206c7bdd9 100644
--- a/ts/editor/BUILD.bazel
+++ b/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"],
 )
diff --git a/ts/editor/Tag.svelte b/ts/editor/Tag.svelte
new file mode 100644
index 000000000..698eca901
--- /dev/null
+++ b/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>
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index 6c97a51e3..f44b65f61 100644
--- a/ts/editor/TagEditor.svelte
+++ b/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>
diff --git a/ts/editor/icons.ts b/ts/editor/icons.ts
index 00ae6776c..bce7f0f67 100644
--- a/ts/editor/icons.ts
+++ b/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>';