Chore: Live load up to 100 new messages in sidebar (#336)

server/ui-src/components/Notifications.vue

@@ -56,6 +56,8 @@ export default {
 
 				// new messages
 				if (response.Type == "new" && response.Data) {
+					this.eventBus.emit("new", response.Data)
+
 					if (!mailbox.searching) {
 						if (pagination.start < 1) {
 							// push results directly into first page
@@ -106,10 +108,10 @@ export default {
 					}
 				} else if (response.Type == "delete" && response.Data) {
 					// broadcast for components
-					this.eventBus.emit("delete", response.Data);
+					this.eventBus.emit("delete", response.Data)
 				} else if (response.Type == "update" && response.Data) {
 					// broadcast for components
-					this.eventBus.emit("update", response.Data);
+					this.eventBus.emit("update", response.Data)
 				} else if (response.Type == "truncate") {
 					// broadcast for components
 					this.eventBus.emit("truncate")

server/ui-src/mixins/CommonMixins.js

@@ -275,11 +275,6 @@ export default {
 			return 'bi-file-arrow-down-fill'
 		},
 
-		// wrapper to update one or more messages with 
-		updateMessages(messages, updates) {
-
-		},
-
 		// Returns a hex color based on a string.
 		// Values are stored in an array for faster lookup / processing.
 		colorHash(s) {

server/ui-src/views/MessageView.vue

@@ -33,6 +33,7 @@ export default {
 			apiSideNavParams: URLSearchParams,
 			apiIsMore: true,
 			messagesList: [],
+			liveLoaded: 0, // the number new messages prepended tp messageList
 			scrollLoading: false,
 			canLoadMore: true,
 		}
@@ -62,13 +63,15 @@ export default {
 		this.refreshUI()
 
 		// subscribe to events
+		this.eventBus.on("new", this.handleWSNew)
 		this.eventBus.on("update", this.handleWSUpdate)
 		this.eventBus.on("delete", this.handleWSDelete)
 		this.eventBus.on("truncate", this.handleWSTruncate)
 	},
 
 	unmounted() {
 		// unsubscribe from events
+		this.eventBus.off("new", this.handleWSNew)
 		this.eventBus.off("update", this.handleWSUpdate)
 		this.eventBus.off("delete", this.handleWSDelete)
 		this.eventBus.off("truncate", this.handleWSTruncate)
@@ -212,6 +215,18 @@ export default {
 			}, 30000)
 		},
 
+		// handler for websocket new messages
+		handleWSNew(data) {
+			// do not add when searching or >= 100 new messages have been received
+			if (this.mailbox.searching || this.liveLoaded >= 100) {
+				return
+			}
+
+			this.liveLoaded++
+			this.messagesList.unshift(data)
+			this.scrollSidebarToCurrent()
+		},
+
 		// handler for websocket message updates
 		handleWSUpdate(data) {
 			for (let x = 0; x < this.messagesList.length; x++) {
@@ -419,6 +434,10 @@ export default {
 			}
 		},
 
+		reloadWindow() {
+			location.reload()
+		},
+
 		initReleaseModal() {
 			this.modal('ReleaseModal').show()
 			window.setTimeout(() => {
@@ -537,7 +556,7 @@ export default {
 					<span class="ms-1">
 						Return to
 						<template v-if="mailbox.searching">search</template>
-						<template v-else>mailbox</template>
+						<template v-else>inbox</template>
 					</span>
 					<span class="badge rounded-pill ms-1 float-end text-bg-secondary" title="Unread messages"
 						v-if="mailbox.unread && !errorMessage">
@@ -548,6 +567,9 @@ export default {
 
 			<div class="flex-grow-1 overflow-y-auto px-1 me-n1" id="MessageList" ref="MessageList"
 				@scroll="scrollHandler">
+				<button v-if="liveLoaded >= 100" class="w-100 alert alert-warning small" @click="reloadWindow()">
+					Reload to see newer messages
+				</button>
 				<template v-if="messagesList && messagesList.length">
 					<div class="list-group">
 						<RouterLink v-for="message in messagesList" :to="'/view/' + message.ID" :key="message.ID"