Correctly handle browser back/forward navigation with pagination

server/ui-src/components/NavMailbox.vue

@@ -31,9 +31,14 @@ export default {
 
 	methods: {
 		reloadInbox: function () {
-			pagination.start = 0
+			const paginationParams = this.getPaginationParams()
+			const reload = paginationParams?.start ? false : true
+
 			this.$router.push('/')
-			this.loadMessages()
+			if (reload) {
+				// already on first page, reload messages
+				this.loadMessages()
+			}
 		},
 
 
@@ -115,7 +120,8 @@ export default {
 			</div>
 		</div>
 
-		<div class="modal fade" id="DeleteAllModal" tabindex="-1" aria-labelledby="DeleteAllModalLabel" aria-hidden="true">
+		<div class="modal fade" id="DeleteAllModal" tabindex="-1" aria-labelledby="DeleteAllModalLabel"
+			aria-hidden="true">
 			<div class="modal-dialog">
 				<div class="modal-content">
 					<div class="modal-header">

server/ui-src/components/Notifications.vue

@@ -149,8 +149,9 @@ export default {
 					delete p.limit
 				}
 
+				mailbox.autoPaginating = false // prevent reload of messages when URL changes
 				const params = new URLSearchParams(p)
-				this.$router.push(path + '?' + params.toString())
+				this.$router.replace(path + '?' + params.toString())
 
 				this.paginationDelayed = false
 			}, 500)

server/ui-src/components/Pagination.vue

@@ -11,8 +11,6 @@ export default {
 		total: Number,
 	},
 
-	emits: ['loadMessages'],
-
 	data() {
 		return {
 			pagination,
@@ -44,13 +42,11 @@ export default {
 	methods: {
 		changeLimit: function () {
 			pagination.start = 0
-			this.$emit('loadMessages')
 			this.updateQueryParams()
 		},
 
 		viewNext: function () {
 			pagination.start = parseInt(pagination.start, 10) + parseInt(pagination.limit, 10)
-			this.$emit('loadMessages')
 			this.updateQueryParams()
 		},
 
@@ -60,7 +56,6 @@ export default {
 				s = 0
 			}
 			pagination.start = s
-			this.$emit('loadMessages')
 			this.updateQueryParams()
 		},
 

server/ui-src/mixins/MessagesMixins.js

@@ -36,6 +36,13 @@ export default {
 				return
 			}
 
+			// auto-pagination changes the URL but should not fetch new messages
+			// when viewing page > 0 and new messages are received (inbox only)
+			if (!mailbox.autoPaginating) {
+				mailbox.autoPaginating = true // reset
+				return
+			}
+
 			let self = this
 			let params = {}
 			mailbox.selected = []

server/ui-src/stores/mailbox.js

@@ -4,20 +4,21 @@ import { reactive, watch } from 'vue'
 
 // global mailbox info
 export const mailbox = reactive({
-	total: 0, 				// total number of messages in database
-	unread: 0, 				// total unread messages in database
-	count: 0, 				// total in mailbox or search
-	messages: [],			// current messages
-	tags: [], 				// all tags
-	selected: [], 			// currently selected
-	connected: false, 		// websocket connection
-	searching: false,		// current search, false for none
-	refresh: false, 		// to listen from MessagesMixin
+	total: 0,						// total number of messages in database
+	unread: 0,						// total unread messages in database
+	count: 0,						// total in mailbox or search
+	messages: [],					// current messages
+	tags: [], 						// all tags
+	selected: [], 					// currently selected
+	connected: false, 				// websocket connection
+	searching: false,				// current search, false for none
+	refresh: false, 				// to listen from MessagesMixin
+	autoPaginating: true, 			// allows temporary bypass of loadMessages() via auto-pagination
 	notificationsSupported: false,
 	notificationsEnabled: false,
-	appInfo: {},			// application information
-	uiConfig: {},			// configuration for UI
-	lastMessage: false,		// return scrolling
+	appInfo: {},					// application information
+	uiConfig: {},					// configuration for UI
+	lastMessage: false,				// return scrolling
 
 	// settings
 	showTagColors: !localStorage.getItem('hideTagColors') == '1',

server/ui-src/views/MailboxView.vue

@@ -9,7 +9,7 @@ import NavTags from '../components/NavTags.vue'
 import Pagination from '../components/Pagination.vue'
 import SearchForm from '../components/SearchForm.vue'
 import { mailbox } from '../stores/mailbox'
-import {pagination} from "../stores/pagination";
+import { pagination } from "../stores/pagination";
 
 export default {
 	mixins: [CommonMixins, MessagesMixins],
@@ -30,19 +30,33 @@ export default {
 		}
 	},
 
-	mounted() {
-		const paginationParams = this.getPaginationParams()
-		if (paginationParams?.start) {
-			pagination.start = paginationParams.start
-		}
-		if (paginationParams?.limit) {
-			pagination.limit = paginationParams.limit
+	watch: {
+		$route(to, from) {
+			this.loadMailbox()
 		}
+	},
 
+	mounted() {
 		mailbox.searching = false
 		this.apiURI = this.resolve(`/api/v1/messages`)
-		this.loadMessages()
+		this.loadMailbox()
 	},
+
+	methods: {
+		loadMailbox: function () {
+			const paginationParams = this.getPaginationParams()
+			if (paginationParams?.start) {
+				pagination.start = paginationParams.start
+			} else {
+				pagination.start = 0
+			}
+			if (paginationParams?.limit) {
+				pagination.limit = paginationParams.limit
+			}
+
+			this.loadMessages()
+		}
+	}
 }
 </script>
 
@@ -64,7 +78,7 @@ export default {
 					<i class="bi bi-list"></i>
 				</button>
 			</div>
-			<Pagination @loadMessages="loadMessages" :total="mailbox.total" />
+			<Pagination :total="mailbox.total" />
 		</div>
 	</div>
 

server/ui-src/views/SearchView.vue

@@ -38,14 +38,6 @@ export default {
 	},
 
 	mounted() {
-		const paginationParams = this.getPaginationParams()
-		if (paginationParams?.start) {
-			pagination.start = paginationParams.start
-		}
-		if (paginationParams?.limit) {
-			pagination.limit = paginationParams.limit
-		}
-
 		mailbox.searching = this.getSearch()
 		this.doSearch()
 	},
@@ -90,7 +82,7 @@ export default {
 					<i class="bi bi-list"></i>
 				</button>
 			</div>
-			<Pagination @loadMessages="loadMessages" :total="mailbox.count" />
+			<Pagination :total="mailbox.count" />
 		</div>
 	</div>