enh: thread attachement list front end

lib/Db/Message.php

@@ -142,6 +142,8 @@ class Message extends Entity implements JsonSerializable {
 
 	/** @var bool */
 	private $fetchAvatarFromClient = false;
+	/** @var array */
+	private $attachments = [];
 
 	public function __construct() {
 		$this->from = new AddressList([]);
@@ -312,6 +314,14 @@ public function getAvatar(): ?Avatar {
 		return $this->avatar;
 	}
 
+	public function setAttachments(array $attachments): void {
+		$this->attachments = $attachments;
+	}
+
+	public function getAttachments(): array {
+		return $this->attachments;
+	}
+
 	#[\Override]
 	#[ReturnTypeWillChange]
 	public function jsonSerialize() {
@@ -357,6 +367,7 @@ public function jsonSerialize() {
 			'mentionsMe' => $this->getMentionsMe(),
 			'avatar' => $this->avatar?->jsonSerialize(),
 			'fetchAvatarFromClient' => $this->fetchAvatarFromClient,
+			'attachments' => $this->getAttachments(),
 		];
 	}
 }

lib/IMAP/PreviewEnhancer.php

@@ -15,6 +15,7 @@
 use OCA\Mail\Db\Message;
 use OCA\Mail\Db\MessageMapper as DbMapper;
 use OCA\Mail\IMAP\MessageMapper as ImapMapper;
+use OCA\Mail\Service\Attachment\AttachmentService;
 use OCA\Mail\Service\Avatar\Avatar;
 use OCA\Mail\Service\AvatarService;
 use Psr\Log\LoggerInterface;
@@ -39,11 +40,14 @@ class PreviewEnhancer {
 	/** @var AvatarService */
 	private $avatarService;
 
-	public function __construct(IMAPClientFactory $clientFactory,
+	public function __construct(
+		IMAPClientFactory $clientFactory,
 		ImapMapper $imapMapper,
 		DbMapper $dbMapper,
 		LoggerInterface $logger,
-		AvatarService $avatarService) {
+		AvatarService $avatarService,
+		private AttachmentService $attachmentService,
+	) {
 		$this->clientFactory = $clientFactory;
 		$this->imapMapper = $imapMapper;
 		$this->mapper = $dbMapper;
@@ -65,6 +69,12 @@ public function process(Account $account, Mailbox $mailbox, array $messages, boo
 
 			return array_merge($carry, [$message->getUid()]);
 		}, []);
+		$client = $this->clientFactory->getClient($account);
+
+		foreach ($messages as $message) {
+			$attachments = $this->attachmentService->getAttachmentNames($account, $mailbox, $message, $client);
+			$message->setAttachments($attachments);
+		}
 
 		if ($preLoadAvatars) {
 			foreach ($messages as $message) {
@@ -87,7 +97,7 @@ public function process(Account $account, Mailbox $mailbox, array $messages, boo
 			return $messages;
 		}
 
-		$client = $this->clientFactory->getClient($account);
+
 		try {
 			$data = $this->imapMapper->getBodyStructureData(
 				$client,

lib/Model/IMAPMessage.php

@@ -287,6 +287,7 @@ public function getSentDate(): Horde_Imap_Client_DateTime {
 		return $this->imapDate;
 	}
 
+
 	/**
 	 * @param int $id
 	 *
@@ -386,7 +387,7 @@ public function setContent(string $content) {
 	 */
 	#[\Override]
 	public function getAttachments(): array {
-		throw new Exception('not implemented');
+		return $this->attachments;
 	}
 
 	/**

lib/Service/Attachment/AttachmentService.php

@@ -18,14 +18,18 @@
 use OCA\Mail\Db\LocalAttachment;
 use OCA\Mail\Db\LocalAttachmentMapper;
 use OCA\Mail\Db\LocalMessage;
+use OCA\Mail\Db\Mailbox;
+use OCA\Mail\Db\Message;
 use OCA\Mail\Exception\AttachmentNotFoundException;
+use OCA\Mail\Exception\ServiceException;
 use OCA\Mail\Exception\UploadException;
 use OCA\Mail\IMAP\MessageMapper;
 use OCP\AppFramework\Db\DoesNotExistException;
 use OCP\Files\File;
 use OCP\Files\Folder;
 use OCP\Files\NotFoundException;
 use OCP\Files\NotPermittedException;
+use OCP\ICacheFactory;
 use Psr\Log\LoggerInterface;
 
 class AttachmentService implements IAttachmentService {
@@ -51,6 +55,10 @@ class AttachmentService implements IAttachmentService {
 	 * @var LoggerInterface
 	 */
 	private $logger;
+	/**
+	 * @var ICache
+	 */
+	private $cache;
 
 	/**
 	 * @param Folder $userFolder
@@ -60,13 +68,15 @@ public function __construct($userFolder,
 		AttachmentStorage $storage,
 		IMailManager $mailManager,
 		MessageMapper $imapMessageMapper,
+		ICacheFactory $cacheFactory,
 		LoggerInterface $logger) {
 		$this->mapper = $mapper;
 		$this->storage = $storage;
 		$this->mailManager = $mailManager;
 		$this->messageMapper = $imapMessageMapper;
 		$this->userFolder = $userFolder;
 		$this->logger = $logger;
+		$this->cache = $cacheFactory->createLocal('mail.attachment_names');
 	}
 
 	/**
@@ -247,6 +257,32 @@ public function handleAttachments(Account $account, array $attachments, \Horde_I
 		return array_values(array_filter($attachmentIds));
 	}
 
+	public function getAttachmentNames(Account $account, Mailbox $mailbox, Message $message, \Horde_Imap_Client_Socket $client): array {
+		$attachments = [];
+		$uniqueCacheId = $account->getUserId() . $account->getId() . $mailbox->getId() . $message->getUid();
+		$cached = $this->cache->get($uniqueCacheId);
+		if ($cached) {
+			return $cached;
+		}
+		try {
+			$imapMessage = $this->mailManager->getImapMessage(
+				$client,
+				$account,
+				$mailbox,
+				$message->getUid(),
+				true
+			);
+			$attachments = $imapMessage->getAttachments();
+		} catch (ServiceException $e) {
+			$this->logger->error('Could not get attachment names', ['exception' => $e, 'messageId' => $message->getUid()]);
+		}
+		$result = array_map(static function (array $attachment) {
+			return ['name' => $attachment['fileName'],'mime' => $attachment['mime']];
+		}, $attachments);
+		$this->cache->set($uniqueCacheId, $result);
+		return $result;
+	}
+
 	/**
 	 * Add a message as attachment
 	 *

src/components/AttachmentTag.vue

@@ -0,0 +1,43 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="attachment-tag">
+		<FileIcon :file-name="fileName" :mime-type="mimeType" />
+		<p class="attachment-tag__filename">
+			{{ fileName }}
+		</p>
+	</div>
+</template>
+
+<script>
+import FileIcon from './icons/FileIcon.vue'
+export default {
+	name: 'AttachmentTag',
+	components: { FileIcon },
+	props: {
+		fileName: {
+			type: String,
+			required: true,
+		},
+		mimeType: {
+			type: String,
+			required: true,
+		},
+	},
+}
+</script>
+<style scoped>
+.attachment-tag {
+    height: 24px;
+    border: 1px solid var(--color-border-dark);
+    border-radius: var(--border-radius-element);
+	gap: 4px;
+	display: flex;
+	align-items: center;
+    width: max-content;
+	margin-inline-end: 4px;
+	padding: 0 4px;
+}
+</style>

src/components/Envelope.vue

@@ -399,8 +399,10 @@
 					{{ translateTagDisplayName(tag) }}
 				</span>
 			</div>
-			<MoveModal
-				v-if="showMoveModal"
+			<div v-for="(attachment,id) in attachments" :key="id">
+				<AttachmentTag :file-name="attachment.name" :mime-type="attachment.mime" />
+			</div>
+			<MoveModal v-if="showMoveModal"
 				:account="account"
 				:envelopes="[data]"
 				:move-thread="listViewThreaded"
@@ -485,10 +487,12 @@ import { mailboxHasRights } from '../util/acl.js'
 import { messageDateTime, shortRelativeDatetime } from '../util/shortRelativeDatetime.js'
 import { translateTagDisplayName } from '../util/tag.js'
 import { hiddenTags } from './tags.js'
+import AttachmentTag from './AttachmentTag.vue'
 
 export default {
 	name: 'Envelope',
 	components: {
+		AttachmentTag,
 		AlertOctagonIcon,
 		Avatar,
 		IconCreateEvent,
@@ -718,7 +722,9 @@ export default {
 
 			return tags
 		},
-
+		attachments() {
+			return Object.values(this.threadList).map((envelope) => (envelope?.attachments)).flat()
+		},
 		draggableLabel() {
 			let label = this.data.subject
 			const sender = this.data.from[0]?.label ?? this.data.from[0]?.email

src/components/icons/FileIcon.vue

@@ -0,0 +1,90 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<span class="file-icon" :style="{ color: `var(${color})` }">
+		<component :is="iconComponent" class="file-icon__svg" :size="16" />
+	</span>
+</template>
+
+<script>
+import { FILE_EXTENSIONS_WORD_PROCESSING, FILE_EXTENSIONS_SPREADSHEET, FILE_EXTENSIONS_PRESENTATION } from '../../store/constants.js'
+import FileOutlineIcon from 'vue-material-design-icons/FileOutline.vue'
+import ImageOutlineIcon from 'vue-material-design-icons/ImageOutline.vue'
+import VideoOutlineIcon from 'vue-material-design-icons/FileVideoOutline.vue'
+import MusicOutlineIcon from 'vue-material-design-icons/FileMusicOutline.vue'
+import DocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline.vue'
+import FilePdfBox from 'vue-material-design-icons/FilePdfBox.vue'
+
+export default {
+	name: 'FileIcon',
+	props: {
+		fileName: {
+			type: String,
+			required: true,
+		},
+		mimeType: {
+			type: String,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			extension: '',
+			icon: null,
+			color: '--color-text-maxcontrast',
+		}
+	},
+	computed: {
+		iconName() {
+			const type = this.mimeType.split('/')[0].toLowerCase()
+			if (this.extension === 'pdf') return 'pdf'
+			if ([...FILE_EXTENSIONS_WORD_PROCESSING, 'txt', 'md'].includes(this.extension)) return 'document'
+			if (type === 'image') return 'image'
+			if (type === 'video') return 'video'
+			if (type === 'audio') return 'music'
+			return 'file'
+		},
+		iconComponent() {
+			const map = {
+				file: FileOutlineIcon,
+				image: ImageOutlineIcon,
+				video: VideoOutlineIcon,
+				music: MusicOutlineIcon,
+				document: DocumentOutlineIcon,
+				pdf: FilePdfBox,
+			}
+			return map[this.iconName] || FileOutlineIcon
+		},
+	},
+	mounted() {
+		this.extension = this.fileName.split('.').pop().toLowerCase()
+		this.setColor()
+	},
+	methods: {
+		setColor() {
+			if (FILE_EXTENSIONS_WORD_PROCESSING.includes(this.extension)) {
+				this.color = '--color-info-text'
+			} else if (FILE_EXTENSIONS_SPREADSHEET.includes(this.extension)) {
+				this.color = '--color-border-success'
+			} else if (FILE_EXTENSIONS_PRESENTATION.includes(this.extension)) {
+				this.color = '--color-favorite'
+			} else if (this.extension === 'pdf') {
+				this.color = '--color-text-error'
+			}
+		},
+	},
+}
+</script>
+<style scoped>
+.file-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+	border-radius: 4px;
+	padding: 0 4px;
+}
+</style>

src/store/constants.js

@@ -18,3 +18,6 @@ export const STATUS_IMAP_SENT_MAILBOX_FAIL = 11
 export const STATUS_SMTP_ERROR = 13
 
 export const FOLLOW_UP_TAG_LABEL = '$follow_up'
+export const FILE_EXTENSIONS_WORD_PROCESSING = ['doc', 'docx', 'dot', 'odt', 'dotx', 'odt', 'ott']
+export const FILE_EXTENSIONS_SPREADSHEET = ['xls', 'xlsx', 'ods']
+export const FILE_EXTENSIONS_PRESENTATION = ['ppt', 'pptx', 'odp', 'otp', 'pps', 'ppsx', 'pot', 'potx']