feat: split envelopes by time of arrival

src/components/EnvelopeList.vue

@@ -574,9 +574,6 @@ div {
 #load-more-mail-messages {
 	margin: 10px auto;
 	padding: 10px;
-	margin-top: 50px;
-	margin-bottom: 50px;
-	padding-inline-start: 32px;
 	background-position: 9px center;
 }
 

src/components/Mailbox.vue

@@ -15,6 +15,19 @@
 			:slow-hint="t('mail', 'Indexing your messages. This can take a bit longer for larger folders.')" />
 		<EmptyMailboxSection v-else-if="isPriorityInbox && !hasMessages" key="empty" />
 		<EmptyMailbox v-else-if="!hasMessages" key="empty" />
+		<template v-else-if="hasGroupedEnvelopes && !isPriorityInbox">
+			<div v-for="[label, group] in Object.entries(groupEnvelopes)" :key="label">
+				<SectionTitle class="section-title" :name="getLabelForGroup(label)" />
+				<EnvelopeList :account="account"
+					:mailbox="mailbox"
+					:search-query="searchQuery"
+					:envelopes="group"
+					:loading-more="false"
+					:load-more-button="false"
+					:skip-transition="skipListTransition"
+					@delete="onDelete" />
+			</div>
+		</template>
 		<EnvelopeList v-else
 			:account="account"
 			:mailbox="mailbox"
@@ -30,6 +43,7 @@
 
 <script>
 import EmptyMailbox from './EmptyMailbox.vue'
+import SectionTitle from './SectionTitle.vue'
 import EnvelopeList from './EnvelopeList.vue'
 import LoadingSkeleton from './LoadingSkeleton.vue'
 import Error from './Error.vue'
@@ -58,9 +72,15 @@ export default {
 		Error,
 		Loading,
 		LoadingSkeleton,
+		SectionTitle,
 	},
 	mixins: [isMobile],
 	props: {
+		groupEnvelopes: {
+			type: Object,
+			required: false,
+			default: null,
+		},
 		account: {
 			type: Object,
 			required: true,
@@ -120,8 +140,14 @@ export default {
 			}
 			return this.envelopes
 		},
+		hasGroupedEnvelopes() {
+			return this.groupEnvelopes && Object.keys(this.groupEnvelopes).length > 0
+		},
 		hasMessages() {
-			return this.envelopes.length > 0
+			if (this.hasGroupedEnvelopes) {
+				return Object.values(this.groupEnvelopes).some(group => group.length > 0)
+			}
+			return this.envelopesToShow?.length > 0
 		},
 		showLoadMore() {
 			return !this.endReached && this.paginate === 'manual'
@@ -466,6 +492,8 @@ export default {
 			} finally {
 				this.refreshing = false
 				logger.debug(`finished sync'ing folder ${this.mailbox.databaseId} (${this.searchQuery})`, { init })
+
+				this.mainStore.updateSyncTimestamp()
 			}
 		},
 		// onDelete(id): Load more message and navigate to other message if needed
@@ -528,6 +556,21 @@ export default {
 			clearInterval(this.loadMailboxInterval)
 			this.loadMailboxInterval = undefined
 		},
+		getLabelForGroup(group) {
+			switch (group) {
+			case 'lastHour':
+				return t('mail', 'Last hour')
+			case 'today':
+				return t('mail', 'Today')
+			case 'yesterday':
+				return t('mail', 'Yesterday')
+			case 'lastWeek':
+				return t('mail', 'Last week')
+			case 'lastMonth':
+				return t('mail', 'Last month')
+			}
+			return t('mail', 'Older')
+		},
 	},
 }
 </script>

src/components/MailboxThread.vue

@@ -31,7 +31,10 @@
 						:mailbox="mailbox"
 						:search-query="query"
 						:bus="bus"
-						:open-first="mailbox.specialRole !== 'drafts'" />
+						:open-first="mailbox.specialRole !== 'drafts'"
+						:group-envelopes="groupEnvelopes"
+						:initial-page-size="messagesOrderBydate"
+						:collapsible="true" />
 					<template v-else>
 						<div v-show="hasFollowUpEnvelopes"
 							class="app-content-list-item">
@@ -191,6 +194,7 @@ export default {
 	},
 	computed: {
 		...mapStores(useMainStore),
+
 		layoutMode() {
 			return this.mainStore.getPreference('layout-mode', 'vertical-split')
 		},
@@ -232,7 +236,12 @@ export default {
 			return this.mainStore.getEnvelopes(this.mailbox.databaseId, this.searchQuery).length > 0
 		},
 		hasImportantEnvelopes() {
-			return this.mainStore.getEnvelopes(this.unifiedInbox.databaseId, this.appendToSearch(priorityImportantQuery)).length > 0
+			const map = this.mainStore.getEnvelopes(
+				this.unifiedInbox.databaseId,
+				this.appendToSearch(this.priorityImportantQuery),
+			)
+			const envelopes = Array.isArray(map) ? map : Array.from(map?.values() || [])
+			return envelopes.length > 0
 		},
 		/**
 		 * @return {boolean}
@@ -242,9 +251,9 @@ export default {
 				return false
 			}
 
-			return this.mainStore
-				.getEnvelopes(FOLLOW_UP_MAILBOX_ID, this.followUpQuery)
-				.length > 0
+			const map = this.mainStore.getEnvelopes(FOLLOW_UP_MAILBOX_ID, this.followUpQuery)
+			const envelopes = Array.isArray(map) ? map : Array.from(map?.values() || [])
+			return envelopes.length > 0
 		},
 		importantMessagesInitialPageSize() {
 			if (window.innerHeight > 1024) {
@@ -255,6 +264,12 @@ export default {
 			}
 			return 3
 		},
+		/**
+		 * @return {number}
+		 */
+		messagesOrderBydate() {
+			return 10
+		},
 		/**
 		 * @return {number}
 		 */
@@ -277,6 +292,10 @@ export default {
 		isThreadShown() {
 			return !!this.$route.params.threadId
 		},
+		groupEnvelopes() {
+			const allEnvelopes = this.mainStore.getEnvelopes(this.mailbox.databaseId, this.searchQuery)
+			return this.groupEnvelopesByDate(allEnvelopes, this.mainStore.syncTimestamp)
+		},
 	},
 	watch: {
 		async $route(to) {
@@ -313,6 +332,47 @@ export default {
 		clearTimeout(this.startMailboxTimer)
 	},
 	methods: {
+		groupEnvelopesByDate(envelopes, syncTimestamp) {
+			const now = new Date(syncTimestamp)
+			const oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000)
+			const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+			const startOfYesterday = new Date(startOfToday)
+			startOfYesterday.setDate(startOfYesterday.getDate() - 1)
+			const startOfLastWeek = new Date(now)
+			startOfLastWeek.setDate(startOfLastWeek.getDate() - 7)
+			const startOfLastMonth = new Date(now)
+			startOfLastMonth.setMonth(startOfLastMonth.getMonth() - 1)
+
+			const groups = {
+				lastHour: [],
+				today: [],
+				yesterday: [],
+				lastWeek: [],
+				lastMonth: [],
+				older: [],
+			}
+
+			for (const envelope of envelopes) {
+				const date = new Date(envelope.dateInt * 1000)
+				if (date >= oneHourAgo) {
+					groups.lastHour.push(envelope)
+				} else if (date >= startOfToday) {
+					groups.today.push(envelope)
+				} else if (date >= startOfYesterday && date < startOfToday) {
+					groups.yesterday.push(envelope)
+				} else if (date >= startOfLastWeek) {
+					groups.lastWeek.push(envelope)
+				} else if (date >= startOfLastMonth) {
+					groups.lastMonth.push(envelope)
+				} else {
+					groups.older.push(envelope)
+				}
+			}
+
+			return Object.fromEntries(
+				Object.entries(groups).filter(([_, list]) => list.length > 0),
+			)
+		},
 		async fetchEnvelopes() {
 			const existingEnvelopes = this.mainStore.getEnvelopes(this.mailbox.databaseId, this.searchQuery || '')
 			if (!existingEnvelopes.length) {

src/store/mainStore.js

@@ -16,6 +16,7 @@ import {
 export default defineStore('main', {
 	state: () => {
 		return {
+			syncTimestamp: Date.now(),
 			isExpiredSession: false,
 			preferences: {},
 			accountsUnmapped: {

src/store/mainStore/actions.js

@@ -189,6 +189,9 @@ function transformMailboxName(account, mailbox) {
 
 export default function mainStoreActions() {
 	return {
+		updateSyncTimestamp() {
+			this.syncTimestamp = Date.now()
+		},
 		savePreference({
 			key,
 			value,