feat(ui): show addresses in search recipients

src/components/SearchMessages.vue

@@ -113,7 +113,14 @@
 								:max="1"
 								@option:selecting="addTag($event, 'from')"
 								@option:deselecting="removeTag($event, 'from')"
-								@search="searchRecipients($event)" />
+								@search="searchRecipients($event)">
+								<template #option="option">
+									{{ formatRecipient(option) }}
+								</template>
+								<template #selected-option="option">
+									{{ formatRecipient(option) }}
+								</template>
+							</NcSelect>
 						</div>
 					</div>
 
@@ -137,7 +144,14 @@
 								:preserve-search="true"
 								@option:selecting="addTag($event, 'to')"
 								@option:deselecting="removeTag($event, 'to')"
-								@search="searchRecipients($event)" />
+								@search="searchRecipients($event)">
+								<template #option="option">
+									{{ formatRecipient(option) }}
+								</template>
+								<template #selected-option="option">
+									{{ formatRecipient(option) }}
+								</template>
+							</NcSelect>
 						</div>
 					</div>
 
@@ -315,6 +329,7 @@ import Close from 'vue-material-design-icons/Close.vue'
 import FilterVariantIcon from 'vue-material-design-icons/FilterVariant.vue'
 import { findRecipient } from '../service/AutocompleteService.js'
 import useMainStore from '../store/mainStore.js'
+import { formatRecipient } from '../util/emailAddress.js'
 import { hiddenTags } from './tags.js'
 
 const debouncedSearch = debouncePromise(findRecipient, 500)
@@ -492,6 +507,8 @@ export default {
 	},
 
 	methods: {
+		formatRecipient,
+
 		hideButtonsWithDelay(delay = false) {
 			if (delay) {
 				setTimeout(() => {

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

@@ -3,7 +3,39 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { getLabelAndAddress, parseEmailList } from '../../../util/emailAddress.js'
+import { formatRecipient, getLabelAndAddress, parseEmailList } from '../../../util/emailAddress.js'
+
+describe('formatRecipient', () => {
+	it('shows the email next to a distinct display name', () => {
+		expect(formatRecipient({
+			label: 'Alice Smith',
+			email: 'alice@example.com',
+			source: 'contacts',
+		})).toBe('Alice Smith (alice@example.com)')
+	})
+
+	it('does not repeat the email when it is also the label', () => {
+		expect(formatRecipient({
+			label: 'alice@example.com',
+			email: 'alice@example.com',
+			source: 'contacts',
+		})).toBe('alice@example.com')
+	})
+
+	it('does not format group identifiers as email addresses', () => {
+		expect(formatRecipient({
+			label: 'Journalists',
+			email: 'group-id',
+			source: 'groups',
+		})).toBe('Journalists')
+	})
+
+	it('falls back to the available recipient value', () => {
+		expect(formatRecipient({ email: 'alice@example.com' })).toBe('alice@example.com')
+		expect(formatRecipient({ label: 'Alice Smith' })).toBe('Alice Smith')
+		expect(formatRecipient(undefined)).toBe('')
+	})
+})
 
 describe('getLabelAndAddress', () => {
 	it('parses a plain email address', () => {

src/util/emailAddress.js

@@ -80,6 +80,25 @@ export function getLabelAndAddress(str) {
 	return results.length > 0 ? results[0] : null
 }
 
+/**
+ * Format a recipient for display without hiding their email address.
+ *
+ * @param {{ label?: string, email?: string, source?: string } | null | undefined} recipient The recipient
+ * @return {string} The display value
+ */
+export function formatRecipient(recipient) {
+	if (!recipient) {
+		return ''
+	}
+
+	const label = recipient.label || recipient.email || ''
+	if (recipient.source !== 'contacts' || !recipient.email || recipient.email === label) {
+		return label
+	}
+
+	return `${label} (${recipient.email})`
+}
+
 /**
  * Parse a string containing one or more email addresses separated by
  * commas or semicolons, with limited support for spaces between bare