feat: mailbox icon in thread view

Signed-off-by: Roberto Guido <info@madbob.org>

Author: madbob

src/components/Thread.vue

@@ -24,7 +24,6 @@
 				ref="envelopeRefs"
 				:key="env.databaseId"
 				:envelope="env"
-				:mailbox-id="$route.params.mailboxId"
 				:thread-subject="threadSubject"
 				:expanded="expandedThreads.includes(env.databaseId)"
 				:full-height="thread.length === 1"

src/components/ThreadEnvelope.vue

@@ -65,6 +65,15 @@
 				@keydown.space.prevent="$emit('toggle-expand', $event)">
 				<div class="envelope__header__left__sender-subject-tags">
 					<div class="sender" :class="{ 'sender--expanded': expanded }">
+						<NcChip
+							:title="mailboxName(mailbox)"
+							variant="tertiary"
+							no-close="true">
+							<MailboxIcon
+								:account="account"
+								:mailbox="mailbox" />
+						</NcChip>
+
 						{{ envelope.from && envelope.from[0] ? envelope.from[0].label : '' }}
 					</div>
 					<NcButton
@@ -390,6 +399,7 @@ import { loadState } from '@nextcloud/initial-state'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
 import { NcActionButton, NcButton } from '@nextcloud/vue'
+import NcChip from '@nextcloud/vue/components/NcChip'
 import { mapStores } from 'pinia'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionText from '@nextcloud/vue/components/NcActionText'
@@ -411,6 +421,7 @@ import ConfirmModal from './ConfirmationModal.vue'
 import Error from './Error.vue'
 import EventModal from './EventModal.vue'
 import JunkIcon from './icons/JunkIcon.vue'
+import MailboxIcon from './icons/MailboxIcon.vue'
 import MailFilterFromEnvelope from './mailFilter/MailFilterFromEnvelope.vue'
 import MenuEnvelope from './MenuEnvelope.vue'
 import Message from './Message.vue'
@@ -426,6 +437,7 @@ import importantSvg from '../../img/important.svg'
 import { isPgpText } from '../crypto/pgp.js'
 import { matchError } from '../errors/match.js'
 import NoTrashMailboxConfiguredError from '../errors/NoTrashMailboxConfiguredError.js'
+import { translate as translateMailboxName } from '../i18n/MailboxTranslator.js'
 import logger from '../logger.js'
 import { buildRecipients as buildReplyRecipients } from '../ReplyBuilder.js'
 import { smartReply } from '../service/AiIntergrationsService.js'
@@ -459,8 +471,10 @@ export default {
 		RecipientBubble,
 		NcActionButton,
 		NcButton,
+		NcChip,
 		Error,
 		IconFavorite,
+		MailboxIcon,
 		JunkIcon,
 		MessageLoadingSkeleton,
 		MenuEnvelope,
@@ -489,16 +503,6 @@ export default {
 			type: Object,
 		},
 
-		mailboxId: {
-			required: false,
-			type: [
-				String,
-				Number,
-			],
-
-			default: undefined,
-		},
-
 		expanded: {
 			required: false,
 			type: Boolean,
@@ -702,7 +706,7 @@ export default {
 		},
 
 		mailbox() {
-			return this.mainStore.getMailbox(this.mailboxId)
+			return this.mainStore.getMailbox(this.envelope.mailboxId)
 		},
 
 		archiveMailbox() {
@@ -1071,6 +1075,10 @@ export default {
 			})
 		},
 
+		mailboxName() {
+			return translateMailboxName(this.mailbox)
+		},
+
 		async unsubscribeViaOneClick() {
 			try {
 				this.unsubscribing = true
@@ -1213,7 +1221,9 @@ export default {
 
 <style lang="scss" scoped>
 	.sender {
+		display: flex;
 		margin-inline-start: calc(var(--default-grid-baseline) * 3);
+		gap: var(--default-grid-baseline);
 
 		&--expanded {
 			color: var(--color-text-maxcontrast);
@@ -1410,7 +1420,7 @@ export default {
 		}
 
 		.subline {
-			margin-inline-start: 8px;
+			margin-inline-start: calc(var(--default-grid-baseline) * 3);
 			color: var(--color-text-maxcontrast);
 			cursor: default;
 			overflow: hidden;