From f260495495bf90c93dd0d958b19d925b57b62e3e Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Sun, 7 Aug 2022 08:38:52 +1200
Subject: [PATCH 1/4] UI: Update pagination values when new mail arrives when
 not on first page

---
 server/ui-src/App.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/server/ui-src/App.vue b/server/ui-src/App.vue
index 82a1f4d..781c78c 100644
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
@@ -210,12 +210,14 @@ export default {
 				}
 				// new messages
 				if (response.Type == "new" && response.Data) {
-                	if (self.start < 1) {
-						if (!self.searching) {
+					if (!self.searching) {
+                		if (self.start < 1) {
 							self.items.unshift(response.Data);
 							if (self.items.length > self.limit) {
 								self.items.pop();
 							}
+						} else {
+							self.start++;
 						}
 					}
 	                self.total++;

From d4cf95363f00b56453bd9ae58a20e4c9a39dd715 Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Sun, 7 Aug 2022 09:34:06 +1200
Subject: [PATCH 2/4] Feature: Mark all messages as read

---
 server/api.go         | 16 ++++++++++++++
 server/server.go      |  1 +
 server/ui-src/App.vue | 51 ++++++++++++++++++++++++++++++++++++-------
 storage/database.go   | 35 +++++++++++++++++++++++++++++
 4 files changed, 95 insertions(+), 8 deletions(-)

diff --git a/server/api.go b/server/api.go
index e5f5662..468d3e2 100644
--- a/server/api.go
+++ b/server/api.go
@@ -218,6 +218,22 @@ func apiUnreadOne(w http.ResponseWriter, r *http.Request) {
 	_, _ = w.Write([]byte("ok"))
 }
 
+// Mark single message as unread
+func apiMarkAllRead(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+
+	mailbox := vars["mailbox"]
+
+	err := storage.MarkAllRead(mailbox)
+	if err != nil {
+		httpError(w, err.Error())
+		return
+	}
+
+	w.Header().Add("Content-Type", "text/plain")
+	_, _ = w.Write([]byte("ok"))
+}
+
 // Websocket to broadcast changes
 func apiWebsocket(w http.ResponseWriter, r *http.Request) {
 	websockets.ServeWs(websockets.MessageHub, w, r)
diff --git a/server/server.go b/server/server.go
index 8c202a9..ada8462 100644
--- a/server/server.go
+++ b/server/server.go
@@ -39,6 +39,7 @@ func Listen() {
 	r.HandleFunc("/api/{mailbox}/search", middleWareFunc(apiSearchMailbox))
 	r.HandleFunc("/api/{mailbox}/delete", middleWareFunc(apiDeleteAll))
 	r.HandleFunc("/api/{mailbox}/events", apiWebsocket)
+	r.HandleFunc("/api/{mailbox}/read", apiMarkAllRead)
 	r.HandleFunc("/api/{mailbox}/{id}/source", middleWareFunc(apiDownloadSource))
 	r.HandleFunc("/api/{mailbox}/{id}/part/{partID}", middleWareFunc(apiDownloadAttachment))
 	r.HandleFunc("/api/{mailbox}/{id}/delete", middleWareFunc(apiDeleteOne))
diff --git a/server/ui-src/App.vue b/server/ui-src/App.vue
index 781c78c..71e2a3c 100644
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
@@ -198,6 +198,16 @@ export default {
 			});
 		},
 
+		markAllRead: function() {
+			let self = this;
+			let uri = 'api/' +  self.mailbox + '/read'
+			self.get(uri, false, function(response) {
+				window.location.hash = "";
+				self.scrollInPlace = true;
+				self.loadMessages();
+			});
+		},
+
 		// websocket connect
         connect: function () {
             let wsproto = location.protocol == 'https:' ? 'wss' : 'ws';
@@ -360,15 +370,15 @@ export default {
 	<div class="row flex-fill" style="min-height:0">
 		<div class="d-none d-md-block col-lg-2 col-md-3 mh-100 position-relative" style="overflow-y: auto;">
 			<ul class="list-unstyled mt-3 mb-5">
-				<li v-if="isConnected" title="Messages will auto-load">
+				<li v-if="isConnected" title="Messages will auto-load" class="mb-2">
 					<i class="bi bi-power text-success"></i>
 					Connected
 				</li>
-				<li v-else title="You need to manually refresh your mailbox">
+				<li v-else title="You need to manually refresh your mailbox" class="mb-3">
 					<i class="bi bi-power text-danger"></i>
 					Disconnected
 				</li>
-				<li class="mt-3">
+				<li class="mb-5">
 					<a class="position-relative ps-0" href="#" v-on:click="reloadMessages">
 						<i class="bi bi-envelope me-1" v-if="isConnected"></i>
 						<i class="bi bi-arrow-clockwise me-1" v-else></i>
@@ -378,20 +388,26 @@ export default {
 						</span>
 					</a>
 				</li>
-				<li class="mt-3">
-					<a v-if="total" href="#" data-bs-toggle="modal" data-bs-target="#DeleteAllModal">
+				<li class="my-3" v-if="unread">
+					<a href="#" data-bs-toggle="modal" data-bs-target="#MarkAllReadModal">
+						<i class="bi bi-check2-square"></i>
+						Mark all read
+					</a>
+				</li>
+				<li class="my-3" v-if="total">
+					<a href="#" data-bs-toggle="modal" data-bs-target="#DeleteAllModal">
 						<i class="bi bi-trash-fill me-1 text-danger"></i>
 						Delete all
 					</a>
 				</li>
-				<li class="mt-3" v-if="notificationsSupported && !notificationsEnabled">
+				<li class="my-3" v-if="notificationsSupported && !notificationsEnabled">
 					<a href="#" data-bs-toggle="modal" data-bs-target="#EnableNotificationsModal" title="Enable browser notifications">
 						<i class="bi bi-bell"></i>
 						Enable alerts
 					</a>
 				</li>
 				<li class="mt-5 position-fixed bottom-0">
-					<a href="https://github.com/axllent/mailpit" target="_blank" class="text-muted w-100 d-block bg-white py-2">
+					<a href="https://github.com/axllent/mailpit" target="_blank" class="text-muted w-100 d-block bg-white my-3">
 						<i class="bi bi-github"></i>
 						GitHub
 					</a>
@@ -435,7 +451,7 @@ export default {
 						</div>
 					</a>
 				</div>
-				<div v-else class="text-muted py-3">No messages</div>
+				<div v-else class="text-muted my-3">No messages</div>
 			</div>
 
 			<Message v-if="message" :message="message" :mailbox="mailbox"></Message>
@@ -468,6 +484,25 @@ export default {
 		</div>
 	</div>
 
+	<!-- Modal -->
+	<div class="modal fade" id="MarkAllReadModal" tabindex="-1" aria-labelledby="MarkAllReadModalLabel" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title" id="MarkAllReadModalLabel">Mark all messages as read?</h5>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+			</div>
+			<div class="modal-body">
+				This will mark {{ formatNumber(unread) }} message<span v-if="unread > 1">s</span> as read.
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+				<button type="button" class="btn btn-primary" data-bs-dismiss="modal" v-on:click="markAllRead">Confirm</button>
+			</div>
+			</div>
+		</div>
+	</div>
+
 	<!-- Modal -->
 	<div class="modal fade" id="EnableNotificationsModal" tabindex="-1" aria-labelledby="EnableNotificationsModalLabel" aria-hidden="true">
 		<div class="modal-dialog modal-lg">
diff --git a/storage/database.go b/storage/database.go
index b2aa8f1..7b2c31b 100644
--- a/storage/database.go
+++ b/storage/database.go
@@ -574,3 +574,38 @@ func DeleteAllMessages(mailbox string) error {
 
 	return nil
 }
+
+// MarkAllRead will mark every unread message in a mailbox as read
+func MarkAllRead(mailbox string) error {
+	mailbox = sanitizeMailboxName(mailbox)
+
+	totalStart := time.Now()
+
+	q, err := db.FindAll(clover.NewQuery(mailbox).
+		Where(clover.Field("Read").IsFalse()))
+	if err != nil {
+		return err
+	}
+
+	total := len(q)
+
+	updates := make(map[string]interface{})
+	updates["Read"] = true
+
+	for _, m := range q {
+		if err := db.UpdateById(mailbox, m.ObjectId(), updates); err != nil {
+			logger.Log().Error(err)
+			return err
+		}
+	}
+
+	if err := statsRefresh(mailbox); err != nil {
+		return err
+	}
+
+	elapsed := time.Since(totalStart)
+
+	logger.Log().Debugf("[db] marked %d messages in %s as read in %s", total, mailbox, elapsed)
+
+	return nil
+}

From e03618570d2da623a0a4e8823e4a8fe9a4bbca38 Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Sun, 7 Aug 2022 10:11:21 +1200
Subject: [PATCH 3/4] UI: Minor UI tweaks

---
 server/ui-src/App.vue            |  2 +-
 server/ui-src/assets/styles.scss | 19 ++++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/server/ui-src/App.vue b/server/ui-src/App.vue
index 71e2a3c..e7672ec 100644
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
@@ -311,7 +311,7 @@ export default {
 </script>
 
 <template>
-	<div class="navbar navbar-expand-lg navbar-light row flex-shrink-0 bg-light">
+	<div class="navbar navbar-expand-lg navbar-light row flex-shrink-0 bg-light shadow-sm">
 		<div class="col-lg-2 col-md-3 col-auto">
 			<a class="navbar-brand" href="#" v-on:click="reloadMessages">
 				<img src="mailpit.svg" alt="Mailpit">
diff --git a/server/ui-src/assets/styles.scss b/server/ui-src/assets/styles.scss
index 5628896..15c78b0 100644
--- a/server/ui-src/assets/styles.scss
+++ b/server/ui-src/assets/styles.scss
@@ -1,16 +1,18 @@
-// @import "../../../node_modules/bootstrap-icons"; ///scss/root";
-
 @import "bootstrap";
 
 [v-cloak] {
     display: none !important;
 }
 
-.navbar-brand {
-    color: #2d4a5d;
+.navbar {
+    z-index: 99;
 
-    img {
-        width: 40px;
+    .navbar-brand {
+        color: #2d4a5d;
+
+        img {
+            width: 40px;
+        }
     }
 }
 
@@ -25,7 +27,6 @@
 }
 
 .message.read:not(.active) {
-    // background: $gray-100;
     color: $gray-500;
 }
 
@@ -52,3 +53,7 @@
         vertical-align: top;
     }
 }
+
+.list-group-item:first-child {
+    border-top: 0;
+}

From 61e15e415519f6cae4cc94b3c3558d310b087f7b Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Sun, 7 Aug 2022 10:11:48 +1200
Subject: [PATCH 4/4] UI: Add reset search button

---
 server/ui-src/App.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/server/ui-src/App.vue b/server/ui-src/App.vue
index e7672ec..9750c24 100644
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
@@ -99,6 +99,13 @@ export default {
 			this.loadMessages();
 		},
 
+		resetSearch: function(e) {
+			e.preventDefault();
+			this.search = '';
+			this.scrollInPlace = true;
+			this.loadMessages();
+		},
+
 		reloadMessages: function() {
 			this.search = "";
             this.start = 0;
@@ -337,7 +344,10 @@ export default {
 		<div class="col col-md-9 col-lg-5" v-if="!message && total">
 			<form v-on:submit="doSearch">
 				<div class="input-group">
-					<input type="text" class="form-control" v-model.trim="search" placeholder="Search mailbox">
+					<div class="d-flex bg-white border rounded-start flex-fill position-relative">
+						<input type="text" class="form-control border-0" v-model.trim="search" placeholder="Search mailbox">
+						<span class="btn btn-link position-absolute end-0 text-muted" v-if="search" v-on:click="resetSearch"><i class="bi bi-x-circle"></i></span>
+					</div>
 					<button class="btn btn-outline-secondary" type="submit"><i class="bi bi-search"></i></button>
 				</div>
 			</form>