From 8ae16bae761d0b39c3483771106379c9a6a9ae97 Mon Sep 17 00:00:00 2001
From: sturlan <darko.sturlan@gmail.com>
Date: Fri, 27 Mar 2026 12:54:00 +0100
Subject: [PATCH 1/6] feat(thread): show per-message To/Cc/Bcc recipients in
 thread view

Closes #11305, #9311, #4258. Recipients (To, Cc, Bcc) are already
returned by the API for every message in a thread but were never
displayed in ThreadEnvelope. Add RecipientBubble components in the
expanded message header for each recipient list, following the same
pattern used for per-message subject-change display.

AI-assisted: Claude Code (claude-sonnet-4-6)
Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
---
 src/components/ThreadEnvelope.vue | 43 +++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 3078e2e0be..5dd83c8bff 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -68,6 +68,32 @@
 							{{ envelope.from && envelope.from[0] ? envelope.from[0].email : '' }}
 						</p>
 					</div>
+					<template v-if="expanded">
+						<div v-if="envelope.to && envelope.to.length" class="recipients">
+							<span class="recipients__label">{{ t('mail', 'To:') }}</span>
+							<RecipientBubble
+								v-for="recipient in envelope.to"
+								:key="recipient.email"
+								:email="recipient.email"
+								:label="recipient.label" />
+						</div>
+						<div v-if="envelope.cc && envelope.cc.length" class="recipients">
+							<span class="recipients__label">{{ t('mail', 'Cc:') }}</span>
+							<RecipientBubble
+								v-for="recipient in envelope.cc"
+								:key="recipient.email"
+								:email="recipient.email"
+								:label="recipient.label" />
+						</div>
+						<div v-if="envelope.bcc && envelope.bcc.length" class="recipients">
+							<span class="recipients__label">{{ t('mail', 'Bcc:') }}</span>
+							<RecipientBubble
+								v-for="recipient in envelope.bcc"
+								:key="recipient.email"
+								:email="recipient.email"
+								:label="recipient.label" />
+						</div>
+					</template>
 					<div v-if="hasChangedSubject" class="subline">
 						{{ cleanSubject }}
 					</div>
@@ -341,6 +367,7 @@ import IconFavorite from 'vue-material-design-icons/Star.vue'
 import StarOutline from 'vue-material-design-icons/StarOutline.vue'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import Avatar from './Avatar.vue'
+import RecipientBubble from './RecipientBubble.vue'
 import ConfirmModal from './ConfirmationModal.vue'
 import Error from './Error.vue'
 import EventModal from './EventModal.vue'
@@ -389,6 +416,7 @@ export default {
 		TranslationModal,
 		ConfirmModal,
 		Avatar,
+		RecipientBubble,
 		NcActionButton,
 		NcButton,
 		Error,
@@ -1314,6 +1342,21 @@ export default {
 			white-space: nowrap;
 		}
 
+		.recipients {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			gap: 4px;
+			margin-block: 2px;
+			margin-inline-start: 8px;
+
+			&__label {
+				color: var(--color-text-maxcontrast);
+				font-weight: bold;
+				white-space: nowrap;
+			}
+		}
+
 		&--expanded {
 			min-height: 350px;
 		}

From 240e40d1f814fbdff3be64d35b817e61b06a399c Mon Sep 17 00:00:00 2001
From: sturlan <darko.sturlan@gmail.com>
Date: Fri, 27 Mar 2026 13:02:41 +0100
Subject: [PATCH 2/6] fix(thread): move recipient bubbles outside router-link
 to fix click handling

RecipientBubble uses NcUserBubble which renders as an anchor tag.
Placing it inside the router-link's click handler caused navigation on
click instead of opening the contact popover. Move the recipients
section outside the router-link into its own envelope__recipients div.

AI-assisted: Claude Code (claude-sonnet-4-6)
Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
---
 src/components/ThreadEnvelope.vue | 92 +++++++++++++++++--------------
 1 file changed, 50 insertions(+), 42 deletions(-)

diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 5dd83c8bff..2dfcd74354 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -68,33 +68,7 @@
 							{{ envelope.from && envelope.from[0] ? envelope.from[0].email : '' }}
 						</p>
 					</div>
-					<template v-if="expanded">
-						<div v-if="envelope.to && envelope.to.length" class="recipients">
-							<span class="recipients__label">{{ t('mail', 'To:') }}</span>
-							<RecipientBubble
-								v-for="recipient in envelope.to"
-								:key="recipient.email"
-								:email="recipient.email"
-								:label="recipient.label" />
-						</div>
-						<div v-if="envelope.cc && envelope.cc.length" class="recipients">
-							<span class="recipients__label">{{ t('mail', 'Cc:') }}</span>
-							<RecipientBubble
-								v-for="recipient in envelope.cc"
-								:key="recipient.email"
-								:email="recipient.email"
-								:label="recipient.label" />
-						</div>
-						<div v-if="envelope.bcc && envelope.bcc.length" class="recipients">
-							<span class="recipients__label">{{ t('mail', 'Bcc:') }}</span>
-							<RecipientBubble
-								v-for="recipient in envelope.bcc"
-								:key="recipient.email"
-								:email="recipient.email"
-								:label="recipient.label" />
-						</div>
-					</template>
-					<div v-if="hasChangedSubject" class="subline">
+						<div v-if="hasChangedSubject" class="subline">
 						{{ cleanSubject }}
 					</div>
 					<div v-if="showSubline" class="subline">
@@ -297,7 +271,33 @@
 				</template>
 			</div>
 		</div>
-		<MessageLoadingSkeleton v-if="loading === Loading.Skeleton" />
+		<div v-if="expanded" class="envelope__recipients">
+		<div v-if="envelope.to && envelope.to.length" class="recipients">
+			<span class="recipients__label">{{ t('mail', 'To:') }}</span>
+			<RecipientBubble
+				v-for="recipient in envelope.to"
+				:key="recipient.email"
+				:email="recipient.email"
+				:label="recipient.label" />
+		</div>
+		<div v-if="envelope.cc && envelope.cc.length" class="recipients">
+			<span class="recipients__label">{{ t('mail', 'Cc:') }}</span>
+			<RecipientBubble
+				v-for="recipient in envelope.cc"
+				:key="recipient.email"
+				:email="recipient.email"
+				:label="recipient.label" />
+		</div>
+		<div v-if="envelope.bcc && envelope.bcc.length" class="recipients">
+			<span class="recipients__label">{{ t('mail', 'Bcc:') }}</span>
+			<RecipientBubble
+				v-for="recipient in envelope.bcc"
+				:key="recipient.email"
+				:email="recipient.email"
+				:label="recipient.label" />
+		</div>
+	</div>
+	<MessageLoadingSkeleton v-if="loading === Loading.Skeleton" />
 		<Message
 			v-if="message"
 			v-show="loading === Loading.Done"
@@ -1342,20 +1342,6 @@ export default {
 			white-space: nowrap;
 		}
 
-		.recipients {
-			display: flex;
-			align-items: center;
-			flex-wrap: wrap;
-			gap: 4px;
-			margin-block: 2px;
-			margin-inline-start: 8px;
-
-			&__label {
-				color: var(--color-text-maxcontrast);
-				font-weight: bold;
-				white-space: nowrap;
-			}
-		}
 
 		&--expanded {
 			min-height: 350px;
@@ -1409,6 +1395,28 @@ export default {
 		inset-inline-start: var(--default-grid-baseline);
 	}
 
+	.envelope__recipients {
+		padding-inline: 60px 38px;
+		padding-block: 4px;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.recipients {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 4px;
+
+		&__label {
+			color: var(--color-text-maxcontrast);
+			font-weight: bold;
+			white-space: nowrap;
+			min-width: 32px;
+		}
+	}
+
 	.smime-text {
 		// same as padding-right on action-text styling
 		padding-inline-start: calc(var(--default-grid-baseline) * 3);

From 4bdf0043888d60cfe24bac90144ea17e2c7fb125 Mon Sep 17 00:00:00 2001
From: sturlan <darko.sturlan@gmail.com>
Date: Fri, 27 Mar 2026 13:05:49 +0100
Subject: [PATCH 3/6] feat(thread): match design spec from #4258

Per ChristophWurst's Sept 2023 design spec:
- Hide sender email address in collapsed message state
- Apply --color-text-maxcontrast to sender name when expanded
- Remove thread-level participant bubble header from Thread.vue
  along with all associated dead code (participantsToDisplay,
  moreParticipantsString, updateParticipantsToDisplay, resize
  listener, RecipientBubble/NcPopover imports)

AI-assisted: Claude Code (claude-sonnet-4-6)
Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
---
 src/components/Thread.vue         | 95 +------------------------------
 src/components/ThreadEnvelope.vue | 12 ++--
 2 files changed, 10 insertions(+), 97 deletions(-)

diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 2a7aa1d160..3d7d72cf55 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -16,39 +16,7 @@
 					<h2 dir="auto" :title="threadSubject">
 						{{ threadSubject }}
 					</h2>
-					<div v-if="thread.length" ref="avatarHeader" class="avatar-header">
-						<!-- Participants that can fit in the parent div -->
-						<RecipientBubble
-							v-for="participant in threadParticipants.slice(0, participantsToDisplay)"
-							:key="participant.email"
-							:email="participant.email"
-							:label="participant.label" />
-						<!-- Indicator to show that there are more participants than displayed -->
-						<NcPopover
-							v-if="threadParticipants.length > participantsToDisplay"
-							class="avatar-more">
-							<template #trigger="{ attrs }">
-								<span
-									class="avatar-more"
-									v-bind="attrs">
-									{{ moreParticipantsString }}
-								</span>
-							</template>
-							<RecipientBubble
-								v-for="participant in threadParticipants.slice(participantsToDisplay)"
-								:key="participant.email"
-								:title="participant.email"
-								:email="participant.email"
-								:label="participant.label" />
-						</NcPopover>
-						<!-- Remaining participants, if any (Needed to have avatarHeader reactive) -->
-						<RecipientBubble
-							v-for="participant in threadParticipants.slice(participantsToDisplay)"
-							:key="participant.email"
-							class="avatar-hidden"
-							:email="participant.email"
-							:label="participant.label" />
-					</div>
+
 				</div>
 			</div>
 			<ThreadSummary v-if="showSummaryBox" :loading="summaryLoading" :summary="summaryText" />
@@ -73,13 +41,10 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
-import { NcAppContentDetails as AppContentDetails, NcPopover } from '@nextcloud/vue'
-import debounce from 'lodash/fp/debounce.js'
+import { NcAppContentDetails as AppContentDetails } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
-import { prop, uniqBy } from 'ramda'
 import Error from './Error.vue'
 import Loading from './Loading.vue'
-import RecipientBubble from './RecipientBubble.vue'
 import ThreadEnvelope from './ThreadEnvelope.vue'
 import ThreadSummary from './ThreadSummary.vue'
 import logger from '../logger.js'
@@ -91,13 +56,11 @@ import { formatDateTimeFromUnix } from '../util/formatDateTime.js'
 export default {
 	name: 'Thread',
 	components: {
-		RecipientBubble,
 		ThreadSummary,
 		AppContentDetails,
 		Error,
 		Loading,
 		ThreadEnvelope,
-		NcPopover,
 	},
 
 	props: {
@@ -115,8 +78,6 @@ export default {
 			errorMessage: '',
 			errorTitle: '',
 			expandedThreads: [],
-			participantsToDisplay: 999,
-			resizeDebounced: debounce(500, this.updateParticipantsToDisplay),
 			enabledThreadSummary: loadState('mail', 'llm_summaries_available', false),
 			summaryText: '',
 			summaryError: false,
@@ -126,11 +87,6 @@ export default {
 
 	computed: {
 		...mapStores(useMainStore),
-		moreParticipantsString() {
-			// Returns a number showing the number of thread participants that are not shown in the avatar-header
-			return `+${this.threadParticipants.length - this.participantsToDisplay}`
-		},
-
 		threadId() {
 			return parseInt(this.$route.params.threadId, 10)
 		},
@@ -178,13 +134,6 @@ export default {
 			}
 		},
 
-		threadParticipants() {
-			const recipients = this.thread.flatMap((envelope) => {
-				return envelope.from.concat(envelope.to).concat(envelope.cc)
-			}).filter((participant) => participant.email !== this.currentAccountEmail)
-			return uniqBy(prop('email'), recipients)
-		},
-
 		threadSubject() {
 			const thread = this.thread
 			if (thread.length === 0) {
@@ -217,12 +166,10 @@ export default {
 
 	created() {
 		this.resetThread()
-		window.addEventListener('resize', this.resizeDebounced)
 		window.addEventListener('keydown', this.handleKeyDown)
 	},
 
 	beforeUnmount() {
-		window.removeEventListener('resize', this.resizeDebounced)
 		window.removeEventListener('keydown', this.handleKeyDown)
 	},
 
@@ -244,44 +191,6 @@ export default {
 			}
 		},
 
-		updateParticipantsToDisplay() {
-			// Wait until everything is in place
-			if (!this.$refs.avatarHeader || !this.threadParticipants) {
-				return
-			}
-
-			// Compute the number of participants to display depending on the width available
-			const avatarHeader = this.$refs.avatarHeader
-			const maxWidth = (avatarHeader.clientWidth - 100) // Reserve 100px for the avatar-more span
-			let childrenWidth = 0
-			let fits = 0
-			let idx = 0
-			while (childrenWidth < maxWidth && fits < this.threadParticipants.length) {
-				// Skipping the 'avatar-more' span
-				if (avatarHeader.childNodes[idx].clientWidth === undefined) {
-					idx += 3
-					continue
-				}
-				childrenWidth += avatarHeader.childNodes[idx].clientWidth
-				fits++
-				idx++
-			}
-
-			if (childrenWidth > maxWidth) {
-				// There's not enough space to show all thread participants
-				if (fits > 1) {
-					this.participantsToDisplay = fits - 1
-				} else if (fits === 0) {
-					this.participantsToDisplay = 1
-				} else {
-					this.participantsToDisplay = fits
-				}
-			} else {
-				// There's enough space to show all thread participants
-				this.participantsToDisplay = this.threadParticipants.length
-			}
-		},
-
 		toggleExpand(threadId) {
 			if (this.thread.length === 1) {
 				return
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 2dfcd74354..8147fd6690 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -62,9 +62,9 @@
 				:class="{ seen: envelope.flags.seen }"
 				@click.native.prevent="$emit('toggle-expand', $event)">
 				<div class="envelope__header__left__sender-subject-tags">
-					<div class="sender">
+					<div class="sender" :class="{ 'sender--expanded': expanded }">
 						{{ envelope.from && envelope.from[0] ? envelope.from[0].label : '' }}
-						<p class="sender__email" :style="{ color: senderEmailColor }">
+						<p v-if="expanded" class="sender__email" :style="{ color: senderEmailColor }">
 							{{ envelope.from && envelope.from[0] ? envelope.from[0].email : '' }}
 						</p>
 					</div>
@@ -1151,11 +1151,15 @@ export default {
 <style lang="scss" scoped>
 	.sender {
 		margin-inline-start: calc(var(--default-grid-baseline) * 2);
-		&__email{
+
+		&--expanded {
+			color: var(--color-text-maxcontrast);
+		}
+
+		&__email {
 			text-overflow: ellipsis;
 			overflow: hidden;
 		}
-
 	}
 
 	.right {

From 98f2f8809d67a5b95207d55944f6155de8b194d9 Mon Sep 17 00:00:00 2001
From: sturlan <darko.sturlan@gmail.com>
Date: Fri, 27 Mar 2026 13:15:18 +0100
Subject: [PATCH 4/6] fix(lint): fix all lint errors introduced by recipient
 display changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix import order in ThreadEnvelope.vue (alphabetical: ConfirmationModal,
  Error, EventModal, RecipientBubble)
- Fix MessageLoadingSkeleton indentation (1 tab → 2 tabs)
- Remove extra blank lines in ThreadEnvelope.vue and Thread.vue CSS
- Fix SCSS unmatched brace in Thread.vue (leftover from avatar-header removal)
- Remove unused currentAccountEmail prop from Thread.vue and its
  corresponding binding in MailboxThread.vue

All 220 unit tests pass; webpack builds cleanly.

Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
---
 src/components/MailboxThread.vue  |  2 +-
 src/components/Thread.vue         | 37 ---------------------
 src/components/ThreadEnvelope.vue | 55 +++++++++++++++----------------
 3 files changed, 28 insertions(+), 66 deletions(-)

diff --git a/src/components/MailboxThread.vue b/src/components/MailboxThread.vue
index ec4a27368e..bb3e10d1a2 100644
--- a/src/components/MailboxThread.vue
+++ b/src/components/MailboxThread.vue
@@ -190,7 +190,7 @@
 			</div>
 		</template>
 
-		<Thread v-if="showThread" :current-account-email="account.emailAddress" @delete="deleteMessage" />
+		<Thread v-if="showThread" @delete="deleteMessage" />
 		<NoMessageSelected v-else-if="hasEnvelopes" />
 	</AppContent>
 </template>
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 3d7d72cf55..526e939f64 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -16,7 +16,6 @@
 					<h2 dir="auto" :title="threadSubject">
 						{{ threadSubject }}
 					</h2>
-
 				</div>
 			</div>
 			<ThreadSummary v-if="showSummaryBox" :loading="summaryLoading" :summary="summaryText" />
@@ -63,13 +62,6 @@ export default {
 		ThreadEnvelope,
 	},
 
-	props: {
-		currentAccountEmail: {
-			type: String,
-			required: true,
-		},
-	},
-
 	data() {
 		return {
 			summaryLoading: false,
@@ -644,35 +636,6 @@ export default {
 	}
 }
 
-.avatar-header {
-	height: var(--default-clickable-area);
-	overflow: hidden;
-	display: flex;
-	align-items: stretch;
-
-	:deep(.v-popper--theme-dropdown.v-popper__popper .v-popper__inner) {
-		height: 300px;
-		width: 250px;
-		overflow: auto;
-	}
-}
-
-.avatar-more {
-	display: flex;
-	background-color: var(--color-background-dark);
-	border-radius: var(--border-radius-large);
-	align-items: center;
-	cursor: pointer;
-}
-
-.v-popper.avatar-more {
-	padding: calc(var(--default-grid-baseline) * 2);
-}
-
-.avatar-hidden {
-	visibility: hidden;
-}
-
 .app-content-list-item-star.icon-starred {
 	display: none;
 }
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 8147fd6690..1a25fff7eb 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -68,7 +68,7 @@
 							{{ envelope.from && envelope.from[0] ? envelope.from[0].email : '' }}
 						</p>
 					</div>
-						<div v-if="hasChangedSubject" class="subline">
+					<div v-if="hasChangedSubject" class="subline">
 						{{ cleanSubject }}
 					</div>
 					<div v-if="showSubline" class="subline">
@@ -272,32 +272,32 @@
 			</div>
 		</div>
 		<div v-if="expanded" class="envelope__recipients">
-		<div v-if="envelope.to && envelope.to.length" class="recipients">
-			<span class="recipients__label">{{ t('mail', 'To:') }}</span>
-			<RecipientBubble
-				v-for="recipient in envelope.to"
-				:key="recipient.email"
-				:email="recipient.email"
-				:label="recipient.label" />
-		</div>
-		<div v-if="envelope.cc && envelope.cc.length" class="recipients">
-			<span class="recipients__label">{{ t('mail', 'Cc:') }}</span>
-			<RecipientBubble
-				v-for="recipient in envelope.cc"
-				:key="recipient.email"
-				:email="recipient.email"
-				:label="recipient.label" />
-		</div>
-		<div v-if="envelope.bcc && envelope.bcc.length" class="recipients">
-			<span class="recipients__label">{{ t('mail', 'Bcc:') }}</span>
-			<RecipientBubble
-				v-for="recipient in envelope.bcc"
-				:key="recipient.email"
-				:email="recipient.email"
-				:label="recipient.label" />
+			<div v-if="envelope.to && envelope.to.length" class="recipients">
+				<span class="recipients__label">{{ t('mail', 'To:') }}</span>
+				<RecipientBubble
+					v-for="recipient in envelope.to"
+					:key="recipient.email"
+					:email="recipient.email"
+					:label="recipient.label" />
+			</div>
+			<div v-if="envelope.cc && envelope.cc.length" class="recipients">
+				<span class="recipients__label">{{ t('mail', 'Cc:') }}</span>
+				<RecipientBubble
+					v-for="recipient in envelope.cc"
+					:key="recipient.email"
+					:email="recipient.email"
+					:label="recipient.label" />
+			</div>
+			<div v-if="envelope.bcc && envelope.bcc.length" class="recipients">
+				<span class="recipients__label">{{ t('mail', 'Bcc:') }}</span>
+				<RecipientBubble
+					v-for="recipient in envelope.bcc"
+					:key="recipient.email"
+					:email="recipient.email"
+					:label="recipient.label" />
+			</div>
 		</div>
-	</div>
-	<MessageLoadingSkeleton v-if="loading === Loading.Skeleton" />
+		<MessageLoadingSkeleton v-if="loading === Loading.Skeleton" />
 		<Message
 			v-if="message"
 			v-show="loading === Loading.Done"
@@ -367,7 +367,6 @@ import IconFavorite from 'vue-material-design-icons/Star.vue'
 import StarOutline from 'vue-material-design-icons/StarOutline.vue'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import Avatar from './Avatar.vue'
-import RecipientBubble from './RecipientBubble.vue'
 import ConfirmModal from './ConfirmationModal.vue'
 import Error from './Error.vue'
 import EventModal from './EventModal.vue'
@@ -378,6 +377,7 @@ import Message from './Message.vue'
 import MessageLoadingSkeleton from './MessageLoadingSkeleton.vue'
 import Moment from './Moment.vue'
 import MoveModal from './MoveModal.vue'
+import RecipientBubble from './RecipientBubble.vue'
 import SourceModal from './SourceModal.vue'
 import TagModal from './TagModal.vue'
 import TaskModal from './TaskModal.vue'
@@ -1346,7 +1346,6 @@ export default {
 			white-space: nowrap;
 		}
 
-
 		&--expanded {
 			min-height: 350px;
 		}

From 7ba9c0734e23f8b4d0164b11359b9439eb6f654c Mon Sep 17 00:00:00 2001
From: Darko Sturlan <darko.sturlan@gmail.com>
Date: Fri, 27 Mar 2026 14:47:06 +0100
Subject: [PATCH 5/6] fix(thread): address review feedback on recipient CSS

- Nest .recipients inside .envelope__recipients (nested SCSS)
- Replace magic numbers (60px, 38px, 4px) with CSS variable expressions:
  padding-inline-start aligns with sender name via border-radius-container
  + avatar width (10 * grid-baseline) + gap (2 * grid-baseline);
  padding-inline-end mirrors the container border-radius;
  gaps and padding-block use --default-grid-baseline

Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
---
 src/components/ThreadEnvelope.vue | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 1a25fff7eb..ccba7b56bb 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -1399,24 +1399,26 @@ export default {
 	}
 
 	.envelope__recipients {
-		padding-inline: 60px 38px;
-		padding-block: 4px;
+		// align with sender name: header padding + avatar (40px) + gap (2 * grid-baseline)
+		padding-inline-start: calc(var(--border-radius-container) + var(--default-grid-baseline) * 12);
+		padding-inline-end: var(--border-radius-container);
+		padding-block: var(--default-grid-baseline);
 		display: flex;
 		flex-direction: column;
-		gap: 4px;
-	}
+		gap: var(--default-grid-baseline);
 
-	.recipients {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		gap: 4px;
+		.recipients {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			gap: var(--default-grid-baseline);
 
-		&__label {
-			color: var(--color-text-maxcontrast);
-			font-weight: bold;
-			white-space: nowrap;
-			min-width: 32px;
+			&__label {
+				color: var(--color-text-maxcontrast);
+				font-weight: bold;
+				white-space: nowrap;
+				min-width: 32px;
+			}
 		}
 	}
 

From 33aba9908f4f971ab5634098c0a96c51aab66a95 Mon Sep 17 00:00:00 2001
From: Darko Sturlan <darko.sturlan@gmail.com>
Date: Tue, 7 Apr 2026 14:48:25 +0200
Subject: [PATCH 6/6] fix(thread): collapse recipients by default behind toggle
 chevron

Per reviewer feedback: hide To/Cc/Bcc by default; a chevron next to
the sender email toggles their visibility. Bubbles use 24px pill size.

- Extract senderEmail computed to avoid repeating envelope.from expression
- Simplify hasRecipients with optional chaining
- Add type="button" to toggle button

AI-assisted: Claude Code (claude-sonnet-4-6)
Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
---
 src/components/RecipientBubble.vue |  7 +++-
 src/components/ThreadEnvelope.vue  | 56 ++++++++++++++++++++++++++----
 2 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/src/components/RecipientBubble.vue b/src/components/RecipientBubble.vue
index 50dcdfc1d8..5496805511 100644
--- a/src/components/RecipientBubble.vue
+++ b/src/components/RecipientBubble.vue
@@ -9,7 +9,7 @@
 			<UserBubble
 				v-bind="attrs"
 				:display-name="label"
-				:size="26"
+				:size="size"
 				:avatar-image="avatarUrlAbsolute"
 				@click="onClickOpenContactDialog" />
 		</template>
@@ -158,6 +158,11 @@ export default {
 			type: String,
 			required: true,
 		},
+
+		size: {
+			type: Number,
+			default: 26,
+		},
 	},
 
 	data() {
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index ccba7b56bb..d73c9bd3c2 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -64,8 +64,21 @@
 				<div class="envelope__header__left__sender-subject-tags">
 					<div class="sender" :class="{ 'sender--expanded': expanded }">
 						{{ envelope.from && envelope.from[0] ? envelope.from[0].label : '' }}
-						<p v-if="expanded" class="sender__email" :style="{ color: senderEmailColor }">
-							{{ envelope.from && envelope.from[0] ? envelope.from[0].email : '' }}
+						<button
+							v-if="expanded && hasRecipients"
+							type="button"
+							class="sender__email sender__email--toggle"
+							:style="{ color: senderEmailColor }"
+							@click.stop.prevent="showRecipients = !showRecipients">
+							{{ senderEmail }}
+							<ChevronUpIcon v-if="showRecipients" :size="16" />
+							<ChevronDownIcon v-else :size="16" />
+						</button>
+						<p
+							v-else-if="expanded"
+							class="sender__email"
+							:style="{ color: senderEmailColor }">
+							{{ senderEmail }}
 						</p>
 					</div>
 					<div v-if="hasChangedSubject" class="subline">
@@ -271,14 +284,15 @@
 				</template>
 			</div>
 		</div>
-		<div v-if="expanded" class="envelope__recipients">
+		<div v-if="expanded && showRecipients" class="envelope__recipients">
 			<div v-if="envelope.to && envelope.to.length" class="recipients">
 				<span class="recipients__label">{{ t('mail', 'To:') }}</span>
 				<RecipientBubble
 					v-for="recipient in envelope.to"
 					:key="recipient.email"
 					:email="recipient.email"
-					:label="recipient.label" />
+					:label="recipient.label"
+					:size="24" />
 			</div>
 			<div v-if="envelope.cc && envelope.cc.length" class="recipients">
 				<span class="recipients__label">{{ t('mail', 'Cc:') }}</span>
@@ -286,7 +300,8 @@
 					v-for="recipient in envelope.cc"
 					:key="recipient.email"
 					:email="recipient.email"
-					:label="recipient.label" />
+					:label="recipient.label"
+					:size="24" />
 			</div>
 			<div v-if="envelope.bcc && envelope.bcc.length" class="recipients">
 				<span class="recipients__label">{{ t('mail', 'Bcc:') }}</span>
@@ -294,7 +309,8 @@
 					v-for="recipient in envelope.bcc"
 					:key="recipient.email"
 					:email="recipient.email"
-					:label="recipient.label" />
+					:label="recipient.label"
+					:size="24" />
 			</div>
 		</div>
 		<MessageLoadingSkeleton v-if="loading === Loading.Skeleton" />
@@ -356,6 +372,8 @@ import { mapStores } from 'pinia'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionText from '@nextcloud/vue/components/NcActionText'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveArrowDownOutline.vue'
+import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronUpIcon from 'vue-material-design-icons/ChevronUp.vue'
 import EmailRead from 'vue-material-design-icons/EmailOpenOutline.vue'
 import EmailUnread from 'vue-material-design-icons/EmailOutline.vue'
 import LockOffIcon from 'vue-material-design-icons/LockOffOutline.vue'
@@ -431,6 +449,8 @@ export default {
 		EmailUnread,
 		DeleteIcon,
 		ArchiveIcon,
+		ChevronDownIcon,
+		ChevronUpIcon,
 		LockIcon,
 		LockOffIcon,
 		LockPlusIcon,
@@ -489,6 +509,7 @@ export default {
 	data() {
 		return {
 			loading: Loading.Done,
+			showRecipients: false,
 			showListUnsubscribeConfirmation: false,
 			error: undefined,
 			message: undefined,
@@ -516,6 +537,14 @@ export default {
 
 	computed: {
 		...mapStores(useOutboxStore, useMainStore),
+		senderEmail() {
+			return this.envelope.from?.[0]?.email ?? ''
+		},
+
+		hasRecipients() {
+			return !!(this.envelope.to?.length || this.envelope.cc?.length || this.envelope.bcc?.length)
+		},
+
 		inlineMenuSize() {
 			const { envelope } = this.$refs
 			const envelopeWidth = (envelope && envelope.clientWidth) || 250
@@ -730,6 +759,7 @@ export default {
 			} else {
 				this.message = undefined
 				this.loading = Loading.Done
+				this.showRecipients = false
 			}
 		},
 
@@ -1159,6 +1189,20 @@ export default {
 		&__email {
 			text-overflow: ellipsis;
 			overflow: hidden;
+
+			&--toggle {
+				display: inline-flex;
+				align-items: center;
+				gap: calc(var(--default-grid-baseline) / 2);
+				background: none;
+				border: none;
+				padding: 0;
+				cursor: pointer;
+				font-size: inherit;
+				font-family: inherit;
+				line-height: inherit;
+				color: inherit;
+			}
 		}
 	}