From 0808e4543f51f485f0c6acb4fca49c9d7d9ca6ef Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Sun, 17 Dec 2023 08:24:23 +1300
Subject: [PATCH] UI: Allow multiple tags  to be searched using Ctrl-click
 (#216)

---
 server/ui-src/components/NavTags.vue | 31 ++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/server/ui-src/components/NavTags.vue b/server/ui-src/components/NavTags.vue
index 5632d72..4609bf8 100644
--- a/server/ui-src/components/NavTags.vue
+++ b/server/ui-src/components/NavTags.vue
@@ -12,6 +12,7 @@ export default {
 	},
 
 	methods: {
+		// test whether a tag is currently being searched for (in the URL)
 		inSearch: function (tag) {
 			const urlParams = new URLSearchParams(window.location.search)
 			const query = urlParams.get('q')
@@ -21,6 +22,35 @@ export default {
 
 			let re = new RegExp(`(^|\\s)tag:"?${tag}"?($|\\s)`, 'i')
 			return query.match(re)
+		},
+
+		// toggle a tag search in the search URL, add or remove it accordingly
+		toggleTag: function (e, tag) {
+			e.preventDefault()
+
+			const urlParams = new URLSearchParams(window.location.search)
+			let query = urlParams.get('q') ? urlParams.get('q') : ''
+
+			let re = new RegExp(`(^|\\s)((-|\\!)?tag:"?${tag}"?)($|\\s)`, 'i')
+
+			if (query.match(re)) {
+				// remove is exists
+				query = query.replace(re, '$1$4')
+			} else {
+				// add to query
+				if (tag.match(/ /)) {
+					tag = `"${tag}"`
+				}
+				query = query + " tag:" + tag
+			}
+
+			query = query.trim()
+
+			if (query == '') {
+				this.$router.push('/')
+			} else {
+				this.$router.push('/search?q=' + encodeURIComponent(query))
+			}
 		}
 	}
 }
@@ -44,6 +74,7 @@ export default {
 		</div>
 		<div class="list-group mt-1 mb-5 pb-3">
 			<RouterLink v-for="tag in mailbox.tags" :to="'/search?q=' + tagEncodeURI(tag)" @click="hideNav"
+				v-on:click.ctrl="toggleTag($event, tag)"
 				:style="mailbox.showTagColors ? { borderLeftColor: colorHash(tag), borderLeftWidth: '4px' } : ''"
 				class="list-group-item list-group-item-action small px-2" :class="inSearch(tag) ? 'active' : ''">
 				<i class="bi bi-tag-fill" v-if="inSearch(tag)"></i>