fixup! feat: split envelopes by time of arrival

Signed-off-by: greta <[email protected]>

Author: GretaD

src/components/EnvelopeList.vue

@@ -573,8 +573,6 @@ div {
 #load-more-mail-messages {
 	margin: 10px auto;
 	padding: 10px;
-	margin-top: 50px;
-	margin-bottom: 50px;
 }
 
 /* TODO: put this in core icons.css as general rule for buttons with icons */

src/components/Mailbox.vue

@@ -15,6 +15,20 @@
 			:slow-hint="t('mail', 'Indexing your messages. This can take a bit longer for larger mailboxes.')" />
 		<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="label" />
+				<EnvelopeList :account="account"
+					:mailbox="mailbox"
+					:search-query="searchQuery"
+					:envelopes="group"
+					:loading-more="loadingMore"
+					:load-more-button="showLoadMore"
+					:skip-transition="skipListTransition"
+					@delete="onDelete"
+					@load-more="loadMore" />
+			</div>
+		</template>
 		<EnvelopeList v-else
 			:account="account"
 			:mailbox="mailbox"
@@ -30,6 +44,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 +73,15 @@ export default {
 		Error,
 		Loading,
 		LoadingSkeleton,
+		SectionTitle,
 	},
 	mixins: [isMobile],
 	props: {
+		groupEnvelopes: {
+			type: Object,
+			required: false,
+			default: null,
+		},
 		account: {
 			type: Object,
 			required: true,
@@ -124,8 +145,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'

src/components/MailboxThread.vue

@@ -26,20 +26,16 @@
 					role="heading"
 					:aria-level="2"
 					@shortkey.native="onShortcut">
-					<template v-if="!mailbox.isPriorityInbox">
-						<div v-for="[label, group] in Object.entries(groupEnvelopes)" :key="label">
-							<SectionTitle class="section-title" :name="label" />
-							<Mailbox :account="account"
-								:mailbox="mailbox"
-								:search-query="query"
-								:bus="bus"
-								:open-first="mailbox.specialRole !== 'drafts'"
-								:custom-envelopes="group"
-								:paginate="'manual'"
-								:initial-page-size="messagesOrderBydate"
-								:collapsible="true" />
-						</div>
-					</template>
+					<Mailbox v-if="!mailbox.isPriorityInbox"
+						:account="account"
+						:mailbox="mailbox"
+						:search-query="query"
+						:bus="bus"
+						:open-first="mailbox.specialRole !== 'drafts'"
+						:group-envelopes="groupEnvelopes"
+						:paginate="'manual'"
+						:initial-page-size="messagesOrderBydate"
+						:collapsible="true" />
 					<template v-else>
 						<div v-show="hasFollowUpEnvelopes"
 							class="app-content-list-item">