fix: list separators depending on sort by date

src/components/Mailbox.vue

@@ -16,7 +16,7 @@
 		<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">
+			<div v-for="[label, group] in groupEnvelopes" :key="label">
 				<SectionTitle class="section-title" :name="getLabelForGroup(label)" />
 				<EnvelopeList :account="account"
 					:mailbox="mailbox"
@@ -78,9 +78,9 @@ export default {
 
 	props: {
 		groupEnvelopes: {
-			type: Object,
+			type: Array,
 			required: false,
-			default: null,
+			default: () => [],
 		},
 		loadMoreLabel: {
 			type: String,
@@ -146,11 +146,11 @@ export default {
 			return this.envelopes
 		},
 		hasGroupedEnvelopes() {
-			return this.groupEnvelopes && Object.keys(this.groupEnvelopes).length > 0
+			return this.groupEnvelopes && this.groupEnvelopes.length > 0
 		},
 		hasMessages() {
 			if (this.hasGroupedEnvelopes) {
-				return Object.values(this.groupEnvelopes).some(group => group.length > 0)
+				return this.groupEnvelopes.some(([, group]) => group.length > 0)
 			}
 			return this.envelopesToShow?.length > 0
 		},
@@ -579,8 +579,9 @@ export default {
 				return t('mail', 'Last week')
 			case 'lastMonth':
 				return t('mail', 'Last month')
+			default:
+				return group
 			}
-			return t('mail', 'Older')
 		},
 	},
 }

src/components/MailboxThread.vue

@@ -119,6 +119,7 @@ import { NcAppContent as AppContent, NcAppContentList as AppContentList, NcButto
 import addressParser from 'address-rfc2822'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
+
 import IconInfo from 'vue-material-design-icons/InformationOutline.vue'
 
 import infiniteScroll from '../directives/infinite-scroll.js'
@@ -135,6 +136,7 @@ import {
 	UNIFIED_INBOX_ID,
 } from '../store/constants.js'
 import useMainStore from '../store/mainStore.js'
+import { groupEnvelopesByDate } from '../util/groupedEnvelopes.js'
 import {
 	priorityImportantQuery,
 	priorityOtherQuery,
@@ -295,7 +297,10 @@ export default {
 		},
 		groupEnvelopes() {
 			const allEnvelopes = this.mainStore.getEnvelopes(this.mailbox.databaseId, this.searchQuery)
-			return this.groupEnvelopesByDate(allEnvelopes, this.mainStore.syncTimestamp)
+			return this.getGroupedEnvelopes(allEnvelopes, this.mainStore.syncTimestamp, this.sortOrder)
+		},
+		sortOrder() {
+			return this.mainStore.getPreference('sort-order', 'newest')
 		},
 	},
 	watch: {
@@ -333,46 +338,8 @@ 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),
-			)
+		getGroupedEnvelopes(envelopes, syncTimestamp) {
+			return groupEnvelopesByDate(envelopes, syncTimestamp, this.sortOrder)
 		},
 		async fetchEnvelopes() {
 			const existingEnvelopes = this.mainStore.getEnvelopes(this.mailbox.databaseId, this.searchQuery || '')

src/tests/unit/util/groupedEnvelopes.spec.js

@@ -0,0 +1,48 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { groupEnvelopesByDate } from '../../../util/groupedEnvelopes.js'
+
+describe('groupEnvelopesByDate', () => {
+	const now = new Date('2025-10-07T12:00:00Z').getTime()
+	const makeEnvelope = (date) => ({ dateInt: Math.floor(date.getTime() / 1000) })
+
+	it('groups envelopes into lastHour, yesterday, lastMonth, July, and 2024', () => {
+		const envelopes = [
+			makeEnvelope(new Date('2025-10-07T11:30:00Z')),
+			makeEnvelope(new Date('2025-10-06T18:00:00Z')),
+			makeEnvelope(new Date('2025-09-10T12:00:00Z')),
+			makeEnvelope(new Date('2025-07-01T12:00:00Z')),
+			makeEnvelope(new Date('2024-12-25T12:00:00Z')),
+		]
+
+		const result = groupEnvelopesByDate(envelopes, now, 'newest')
+
+		expect(Array.isArray(result)).toBe(true)
+		expect(result).toHaveLength(5)
+
+		const labels = result.map(([label]) => label)
+		expect(labels).toEqual(
+			expect.arrayContaining(['lastHour', 'yesterday', 'lastMonth', 'July', '2024']),
+		)
+
+		result.forEach(([label, group]) => {
+			expect(Array.isArray(group)).toBe(true)
+			expect(group).toHaveLength(1)
+		})
+	})
+
+	it('respects sortOrder = "oldest" for the lastHour group', () => {
+		const newer = makeEnvelope(new Date('2025-10-07T11:50:00Z'))
+		const older = makeEnvelope(new Date('2025-10-07T11:10:00Z'))
+
+		const result = groupEnvelopesByDate([newer, older], now, 'oldest')
+
+		expect(result[0][0]).toBe('lastHour')
+		const lastHourGroup = result[0][1]
+		expect(lastHourGroup[0]).toEqual(older)
+		expect(lastHourGroup[1]).toEqual(newer)
+	})
+})

src/util/groupedEnvelopes.js

@@ -0,0 +1,84 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export function groupEnvelopesByDate(envelopes, syncTimestamp, sortOrder = 'newest') {
+	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: [],
+	}
+
+	const monthsMap = {}
+	const yearsMap = {}
+
+	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 if (date.getFullYear() === now.getFullYear()) {
+			const m = date.getMonth()
+			monthsMap[m] ??= []
+			monthsMap[m].push(envelope)
+		} else {
+			const y = date.getFullYear()
+			yearsMap[y] ??= []
+			yearsMap[y].push(envelope)
+		}
+	}
+
+	const orderByDate = (a, b) =>
+		sortOrder === 'newest' ? b.dateInt - a.dateInt : a.dateInt - b.dateInt
+
+	Object.values(groups).forEach(list => list.sort(orderByDate))
+	Object.values(monthsMap).forEach(list => list.sort(orderByDate))
+	Object.values(yearsMap).forEach(list => list.sort(orderByDate))
+
+	const groupOrder = []
+
+	const fixedGroups = ['lastHour', 'today', 'yesterday', 'lastWeek', 'lastMonth']
+	groupOrder.push(...(sortOrder === 'newest' ? fixedGroups : fixedGroups.toReversed()))
+
+	const monthOrder = Object.keys(monthsMap).map(Number)
+	monthOrder.sort((a, b) => (sortOrder === 'newest' ? b - a : a - b))
+	for (const m of monthOrder) {
+		const monthName = new Date(now.getFullYear(), m, 1)
+			.toLocaleString('default', { month: 'long' })
+		groups[monthName] = monthsMap[m]
+		sortOrder === 'newest' ? groupOrder.push(monthName) : groupOrder.unshift(monthName)
+	}
+
+	const yearKeys = Object.keys(yearsMap).map(Number)
+	yearKeys.sort((a, b) => (sortOrder === 'newest' ? b - a : a - b))
+	for (const y of yearKeys) {
+		groups[String(y)] = yearsMap[y]
+		sortOrder === 'newest' ? groupOrder.push(String(y)) : groupOrder.unshift(String(y))
+	}
+
+	return groupOrder
+		.filter(label => groups[label] && groups[label].length > 0)
+		.map(label => [label, groups[label]])
+}