Feature(UI): List messages in side nav when viewing message for easy navigation (#336)

server/ui-src/components/AboutMailpit.vue

@@ -54,14 +54,13 @@ export default {
 
 <template>
 	<template v-if="!modals">
-		<div
-			class="position-fixed bg-body bottom-0 ms-n1 py-2 text-muted small col-xl-2 col-md-3 pe-3 z-3 about-mailpit">
-			<button class="text-muted btn btn-sm" v-on:click="loadInfo">
+		<div class="bg-body ms-sm-n1 me-sm-n1 py-2 text-muted small about-mailpit">
+			<button class="text-muted btn btn-sm ps-0" v-on:click="loadInfo()">
 				<i class="bi bi-info-circle-fill me-1"></i>
 				About
 			</button>
 
-			<button class="btn btn-sm btn-outline-secondary float-end me-2" data-bs-toggle="modal"
+			<button class="btn btn-sm btn-outline-secondary float-end" data-bs-toggle="modal"
 				data-bs-target="#SettingsModal" title="Mailpit UI settings">
 				<i class="bi bi-gear-fill"></i>
 			</button>
@@ -152,7 +151,7 @@ export default {
 									<div class="card-header h4">
 										Runtime statistics
 										<button class="btn btn-sm btn-outline-secondary float-end"
-											v-on:click="loadInfo">
+											v-on:click="loadInfo()">
 											Refresh
 										</button>
 									</div>
@@ -183,8 +182,8 @@ export default {
 														{{ formatNumber(mailbox.appInfo.RuntimeStats.SMTPAccepted) }}
 														<small class="text-secondary">
 															({{
-		getFileSize(mailbox.appInfo.RuntimeStats.SMTPAcceptedSize)
-	}})
+																getFileSize(mailbox.appInfo.RuntimeStats.SMTPAcceptedSize)
+															}})
 														</small>
 													</td>
 												</tr>

server/ui-src/components/ListMessages.vue

@@ -142,7 +142,7 @@ export default {
 						</b>
 					</div>
 					<div class="d-none d-lg-block text-truncate text-muted small privacy">
-						{{ getPrimaryEmailTo(message) }}
+						To: {{ getPrimaryEmailTo(message) }}
 						<span v-if="message.To && message.To.length > 1">
 							[+{{ message.To.length - 1 }}]
 						</span>

server/ui-src/components/NavTags.vue

@@ -100,7 +100,7 @@ export default {
 				</li>
 			</ul>
 		</div>
-		<div class="list-group mt-1 mb-5 pb-3">
+		<div class="list-group mt-1 mb-2">
 			<RouterLink v-for="tag in mailbox.tags" :to="toTagUrl(tag)" @click="hideNav"
 				v-on:click="pagination.start = 0" v-on:click.ctrl="toggleTag($event, tag)"
 				:style="mailbox.showTagColors ? { borderLeftColor: colorHash(tag), borderLeftWidth: '4px' } : ''"

server/ui-src/components/Notifications.vue

@@ -7,6 +7,9 @@ import { pagination } from '../stores/pagination'
 export default {
 	mixins: [CommonMixins],
 
+	// global event bus to handle message status changes
+	inject: ["eventBus"],
+
 	data() {
 		return {
 			pagination,
@@ -63,7 +66,7 @@ export default {
 						} else {
 							// update pagination offset
 							pagination.start++
-							// prevent "Too many calls to Location or History APIs within a short timeframe"
+							// prevent "Too many calls to Location or History APIs within a short time frame"
 							this.delayedPaginationUpdate()
 						}
 					}
@@ -91,6 +94,7 @@ export default {
 					window.scrollInPlace = true
 					mailbox.refresh = true // trigger refresh
 					window.setTimeout(() => { mailbox.refresh = false }, 500)
+					this.eventBus.emit("prune");
 				} else if (response.Type == "stats" && response.Data) {
 					// refresh mailbox stats
 					mailbox.total = response.Data.Total
@@ -100,6 +104,15 @@ export default {
 					if (this.version != response.Data.Version) {
 						location.reload()
 					}
+				} else if (response.Type == "delete" && response.Data) {
+					// broadcast for components
+					this.eventBus.emit("delete", response.Data);
+				} else if (response.Type == "update" && response.Data) {
+					// broadcast for components
+					this.eventBus.emit("update", response.Data);
+				} else if (response.Type == "truncate") {
+					// broadcast for components
+					this.eventBus.emit("truncate")
 				}
 			}
 
@@ -151,6 +164,11 @@ export default {
 			}
 		},
 
+		handleMessageEvents(message) {
+			console.log("generic")
+			console.log(message)
+		},
+
 		socketBreakReset() {
 			window.setTimeout(() => {
 				this.socketBreaks = 0

server/ui-src/components/message/Message.vue

@@ -403,11 +403,13 @@ export default {
 								<small class="text-body-secondary" v-else>[ no subject ]</small>
 							</td>
 						</tr>
-						<tr class="d-md-none small">
+						<tr class="small">
 							<th class="small">Date</th>
-							<td>{{ messageDate(message.Date) }}</td>
+							<td>
+								{{ messageDate(message.Date) }}
+								<small class="ms-2">({{ getFileSize(message.Size) }})</small>
+							</td>
 						</tr>
-
 						<tr class="small">
 							<th>Tags</th>
 							<td>