Add tags to the web UI

public/js/title.js

@@ -252,3 +252,33 @@ const bulkProgress = (action, el) => {
 			deselectAll();
 		});
 };
+
+const tagsComponent = () => {
+	return {
+		tags: tags,
+		newTag: '',
+		inputShown: false,
+		add() {
+			this.tags.push(this.newTag);
+			this.newTag = '';
+		},
+		keydown(event) {
+			if (event.key === 'Enter')
+				this.add()
+		},
+		rm(event) {
+			const tag = event.currentTarget.id.split('-')[0];
+			const idx = this.tags.indexOf(tag);
+			if (idx < 0) return;
+			this.tags.splice(idx, 1);
+		},
+		toggleInput(nextTick) {
+			this.inputShown = !this.inputShown;
+			if (this.inputShown) {
+				nextTick(() => {
+					$('#tag-input').get(0).focus();
+				});
+			}
+		}
+	};
+};

src/views/components/tags.html.ecr

@@ -0,0 +1,15 @@
+<script>
+  const tags = JSON.parse('<%= tags.to_json %>');
+</script>
+<div class="uk-margin" x-data="tagsComponent()" x-cloak>
+  <p class="uk-text-meta" @selectstart.prevent>
+  <span style="position:relative; bottom:3px; margin-right:5px;">Tags: </span>
+  <template x-for="tag in tags" :key="tag">
+    <span class="uk-label uk-label-primary" style="padding:2px 5px; margin:0 5px 5px 5px; text-transform:none;">
+      <a class="uk-link-reset" @click="rm($event)" :id="`${tag}-rm`"><span uk-icon="close" style="margin-right: 5px; position: relative; bottom: 1.5px;"></span></a><a class="uk-link-reset" x-text="tag" :href="`<%= base_url %>tag/${tag}`"></a>
+    </span>
+  </template>
+  <a class="uk-link-reset" style="position:relative; bottom:3px;" :uk-icon="inputShown ? 'close' : 'plus'" @click="toggleInput($nextTick)"></a>
+  </p>
+  <input id="tag-input" class="uk-input" type="text" placeholder="Type in a new tag and hit enter" x-model="newTag" @keydown="keydown($event)" x-show="inputShown">
+</div>

src/views/title.html.ecr

@@ -33,6 +33,8 @@
   <li class="uk-disabled"><a><%= title.display_name %></a></li>
 </ul>
 <p class="uk-text-meta"><%= title.content_label %> found</p>
+<% tags = title.tags %>
+<%= render_component "tags" %>
 <div class="uk-grid-small" uk-grid>
   <div class="uk-margin-bottom uk-width-3-4@s">
     <form class="uk-search uk-search-default">