From adce75ab8f93d52a4e15ec3a279a6261741b8c98 Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Tue, 13 Jun 2023 15:53:18 +1200
Subject: [PATCH 1/3] UI: Display message tags below subject in message
 overview

---
 server/ui-src/App.vue | 41 ++++++++++++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/server/ui-src/App.vue b/server/ui-src/App.vue
index 16e9b2f..dd1ec39 100644
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
@@ -100,6 +100,27 @@ export default {
 			fallback: false
 		});
 
+		moment.updateLocale('en', {
+			relativeTime: {
+				future: "in %s",
+				past: "%s ago",
+				s: 'seconds',
+				ss: '%d secs',
+				m: "a minute",
+				mm: "%d mins",
+				h: "an hour",
+				hh: "%d hours",
+				d: "a day",
+				dd: "%d days",
+				w: "a week",
+				ww: "%d weeks",
+				M: "a month",
+				MM: "%d months",
+				y: "a year",
+				yy: "%d years"
+			}
+		});
+
 		this.connect();
 		this.getUISettings();
 		this.loadMessages();
@@ -906,13 +927,13 @@ export default {
 			</div>
 		</div>
 
-		<div class="col-lg-10 col-md-9 mh-100 pe-0">
+		<div class="col-lg-10 col-md-9 mh-100 ps-0 pe-0">
 			<div class="mh-100" style="overflow-y: auto;" :class="message ? 'd-none' : ''" id="message-page">
 				<div class="list-group my-2" v-if="items.length">
 					<a v-for="message in items" :href="'#' + message.ID"
 						v-on:click.ctrl="toggleSelected($event, message.ID)"
 						v-on:click.shift="selectRange($event, message.ID)"
-						class="row message d-flex small list-group-item list-group-item-action border-start-0 border-end-0"
+						class="row gx-1 message d-flex small list-group-item list-group-item-action border-start-0 border-end-0"
 						:class="message.Read ? 'read' : '', isSelected(message.ID) ? 'selected' : ''">
 						<div class="col-lg-3">
 							<div class="d-lg-none float-end text-muted text-nowrap small">
@@ -938,18 +959,20 @@ export default {
 								</span>
 							</div>
 						</div>
-						<div class="col-lg-6 mt-2 mt-lg-0">
-							<span class="badge text-bg-secondary me-1" v-for="t in message.Tags"
-								:title="'Filter messages tagged with ' + t" v-on:click="tagSearch($event, t)">
-								{{ t }}
-							</span>
-							<b>{{ message.Subject != "" ? message.Subject : "[ no subject ]" }}</b>
+						<div class="col-lg-6 col-xxl-7 mt-2 mt-lg-0">
+							<div><b>{{ message.Subject != "" ? message.Subject : "[ no subject ]" }}</b></div>
+							<div>
+								<span class="badge text-bg-secondary me-1" v-for="t in message.Tags"
+									:title="'Filter messages tagged with ' + t" v-on:click="tagSearch($event, t)">
+									{{ t }}
+								</span>
+							</div>
 						</div>
 						<div class="d-none d-lg-block col-1 small text-end text-muted">
 							<i class="bi bi-paperclip float-start h6" v-if="message.Attachments"></i>
 							{{ getFileSize(message.Size) }}
 						</div>
-						<div class="d-none d-lg-block col-2 small text-end text-muted">
+						<div class="d-none d-lg-block col-2 col-xxl-1 small text-end text-muted">
 							{{ getRelativeCreated(message) }}
 						</div>
 					</a>

From ff9a6ff49159e0f6c26498aff4665e31739fa546 Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Tue, 13 Jun 2023 16:57:42 +1200
Subject: [PATCH 2/3] API: Sort tags before saving

Tags should be alphabetically sorted before saving. Whilst this was the behavior with automated tagging, it did not apply to manually set tags via the API.
---
 storage/tags.go | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/storage/tags.go b/storage/tags.go
index 4c47506..7b06407 100644
--- a/storage/tags.go
+++ b/storage/tags.go
@@ -22,6 +22,8 @@ func SetTags(id string, tags []string) error {
 		}
 	}
 
+	sort.Strings(applyTags)
+
 	tagJSON, err := json.Marshal(applyTags)
 	if err != nil {
 		logger.Log().Errorf("[db] setting tags for message %s", id)

From fc89655b7fe073d8991d68455826ca7c801d663f Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Wed, 14 Jun 2023 22:18:51 +1200
Subject: [PATCH 3/3] UI: Add option to enable tag colors based on tag name
 hash

An experimental option to add tag colors (see #127). This will generate a random color for each unique tag
---
 package-lock.json                             |  6 +++
 package.json                                  |  1 +
 server/ui-src/App.vue                         | 41 +++++++++++------
 .../ui-src/assets/_bootstrap_variables.scss   |  1 +
 server/ui-src/mixins.js                       | 45 ++++++++++++++++---
 5 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5549f6f..f01e66e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "bootstrap": "^5.2.0",
         "bootstrap-icons": "^1.9.1",
         "bootstrap5-tags": "^1.4.41",
+        "color-hash": "^2.0.2",
         "moment": "^2.29.4",
         "prismjs": "^1.29.0",
         "rapidoc": "^9.3.4",
@@ -1163,6 +1164,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/color-hash": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/color-hash/-/color-hash-2.0.2.tgz",
+      "integrity": "sha512-6exeENAqBTuIR1wIo36mR8xVVBv6l1hSLd7Qmvf6158Ld1L15/dbahR9VUOiX7GmGJBCnQyS0EY+I8x+wa7egg=="
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
diff --git a/package.json b/package.json
index d213a45..869b943 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "bootstrap": "^5.2.0",
     "bootstrap-icons": "^1.9.1",
     "bootstrap5-tags": "^1.4.41",
+    "color-hash": "^2.0.2",
     "moment": "^2.29.4",
     "prismjs": "^1.29.0",
     "rapidoc": "^9.3.4",
diff --git a/server/ui-src/App.vue b/server/ui-src/App.vue
index dd1ec39..1695c32 100644
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
@@ -1,11 +1,11 @@
 <script>
-import commonMixins from './mixins.js';
-import Message from './templates/Message.vue';
-import MessageSummary from './templates/MessageSummary.vue';
-import MessageRelease from './templates/MessageRelease.vue';
-import MessageToast from './templates/MessageToast.vue';
-import moment from 'moment';
-import Tinycon from 'tinycon';
+import commonMixins from './mixins.js'
+import Message from './templates/Message.vue'
+import MessageSummary from './templates/MessageSummary.vue'
+import MessageRelease from './templates/MessageRelease.vue'
+import MessageToast from './templates/MessageToast.vue'
+import moment from 'moment'
+import Tinycon from 'tinycon'
 
 export default {
 	mixins: [commonMixins],
@@ -906,9 +906,23 @@ export default {
 			</div>
 
 			<template v-if="!selected.length && tags.length && !message">
-				<h6 class="mt-4 text-muted"><small>Tags</small></h6>
-				<div class="list-group mt-2 mb-5">
-					<button class="list-group-item list-group-item-action small" v-for="tag in tags"
+				<div class="mt-4 text-muted">
+					<button class="btn btn-sm dropdown-toggle ms-n1" data-bs-toggle="dropdown" aria-expanded="false">
+						Tags
+					</button>
+					<ul class="dropdown-menu dropdown-menu-end">
+						<li>
+							<button class="dropdown-item" @click="toggleTagColors()">
+								<template v-if="showTagColors">Hide</template>
+								<template v-else>Show</template>
+								tag colors
+							</button>
+						</li>
+					</ul>
+				</div>
+				<div class="list-group mt-1 mb-5">
+					<button class="list-group-item list-group-item-action small px-2" v-for="tag in tags"
+						:style="showTagColors ? { borderLeftColor: colorHash(tag), borderLeftWidth: '4px' } : ''"
 						v-on:click="tagSearch($event, tag)" :class="inSearch(tag) ? 'active' : ''">
 						<i class="bi bi-tag-fill" v-if="inSearch(tag)"></i>
 						<i class="bi bi-tag" v-else></i>
@@ -919,7 +933,7 @@ export default {
 
 			<MessageSummary v-if="message" :message="message"></MessageSummary>
 
-			<div class="position-fixed bottom-0 bg-white py-2 text-muted w-100">
+			<div class="position-fixed bottom-0 bg-white py-2 text-muted small w-100">
 				<a href="#" class="text-muted" v-on:click="loadInfo">
 					<i class="bi bi-info-circle-fill"></i>
 					About
@@ -927,7 +941,7 @@ export default {
 			</div>
 		</div>
 
-		<div class="col-lg-10 col-md-9 mh-100 ps-0 pe-0">
+		<div class="col-lg-10 col-md-9 mh-100 ps-0 ps-md-2 pe-0">
 			<div class="mh-100" style="overflow-y: auto;" :class="message ? 'd-none' : ''" id="message-page">
 				<div class="list-group my-2" v-if="items.length">
 					<a v-for="message in items" :href="'#' + message.ID"
@@ -962,7 +976,8 @@ export default {
 						<div class="col-lg-6 col-xxl-7 mt-2 mt-lg-0">
 							<div><b>{{ message.Subject != "" ? message.Subject : "[ no subject ]" }}</b></div>
 							<div>
-								<span class="badge text-bg-secondary me-1" v-for="t in message.Tags"
+								<span class="badge me-1" v-for="t in message.Tags"
+									:style="showTagColors ? { backgroundColor: colorHash(t) } : { backgroundColor: '#6c757d' }"
 									:title="'Filter messages tagged with ' + t" v-on:click="tagSearch($event, t)">
 									{{ t }}
 								</span>
diff --git a/server/ui-src/assets/_bootstrap_variables.scss b/server/ui-src/assets/_bootstrap_variables.scss
index c6e6cd8..9f0ec33 100644
--- a/server/ui-src/assets/_bootstrap_variables.scss
+++ b/server/ui-src/assets/_bootstrap_variables.scss
@@ -5,3 +5,4 @@ $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetic
 $link-decoration: none;
 $primary: #2c3e50;
 $list-group-disabled-color: #adb5bd;
+$enable-negative-margins: true;
diff --git a/server/ui-src/mixins.js b/server/ui-src/mixins.js
index dd86b3d..07c6fb1 100644
--- a/server/ui-src/mixins.js
+++ b/server/ui-src/mixins.js
@@ -1,22 +1,32 @@
-import axios from 'axios';
-import { Modal } from 'bootstrap';
-import moment from 'moment';
+import axios from 'axios'
+import { Modal } from 'bootstrap'
+import moment from 'moment'
+import ColorHash from 'color-hash'
 
 
 // FakeModal is used to return a fake Bootstrap modal
-// if the ID returns nothing
+// if the ID returns nothing to prevent errors.
 function FakeModal() { }
-FakeModal.prototype.hide = function () { alert('close fake modal') }
-FakeModal.prototype.show = function () { alert('open fake modal') }
+FakeModal.prototype.hide = function () { }
+FakeModal.prototype.show = function () { }
+
+// Set up the color hash generator lightness and hue to ensure darker colors
+const colorHash = new ColorHash({ lightness: 0.3, saturation: [0.35, 0.5, 0.65] });
 
 /* Common mixin functions used in apps */
 const commonMixins = {
 	data() {
 		return {
-			loading: 0
+			loading: 0,
+			tagColorCache: {},
+			showTagColors: true
 		}
 	},
 
+	mounted() {
+		this.showTagColors = localStorage.getItem('showTagsColors')
+	},
+
 	methods: {
 		getFileSize: function (bytes) {
 			var i = Math.floor(Math.log(bytes) / Math.log(1024));
@@ -201,6 +211,27 @@ const commonMixins = {
 			}
 
 			return 'bi-file-arrow-down-fill';
+		},
+
+		// Returns a hex color based on a string.
+		// Values are stored in an array for faster lookup / processing.
+		colorHash: function (s) {
+			if (this.tagColorCache[s] != undefined) {
+				return this.tagColorCache[s]
+			}
+			this.tagColorCache[s] = colorHash.hex(s)
+
+			return this.tagColorCache[s]
+		},
+
+		toggleTagColors: function () {
+			if (this.showTagColors) {
+				localStorage.removeItem('showTagsColors')
+				this.showTagColors = false
+			} else {
+				localStorage.setItem('showTagsColors', '1')
+				this.showTagColors = true
+			}
 		}
 	}
 }