Merge pull request 'feat: message and attachment download' (#48) from feat/download into main

Reviewed-on: #48

src/components/MessageReader.vue

@@ -3,6 +3,7 @@ import { computed, ref, watch } from 'vue'
 import { useUser } from '@KTXC'
 import type { EntityObject, MessageObject } from '@MailManager/models'
 import { SecurityLevel } from '@/utile/emailSanitizer'
+import { useMailStore } from '@/stores/mailStore'
 import ReaderEmpty from './reader/ReaderEmpty.vue'
 import ReaderToolbar from './reader/ReaderToolbar.vue'
 import ReaderHeader from './reader/ReaderHeader.vue'
@@ -25,6 +26,7 @@ const emit = defineEmits<{
 
 // User settings
 const { getSetting } = useUser()
+const mailStore = useMailStore()
 
 // Per-message overrides
 const allowImages = ref(false)
@@ -94,6 +96,14 @@ const handleMove = () => {
   }
 }
 
+const handleDownload = async (partIndex?: number) => {
+  if (!props.entity) {
+    return
+  }
+
+  await mailStore.downloadMessage(props.entity, partIndex)
+}
+
 const handleFlag = () => {
   if (props.entity) {
     emit('flag', props.entity)
@@ -125,13 +135,17 @@ const handleCompose = () => {
         @move="handleMove"
         @delete="handleDelete"
         @flag="handleFlag"
+        @download="handleDownload()"
         @toggle-images="toggleImages"
         @set-security-level="setSecurityLevel"
       />
 
       <!-- Message content -->
       <div class="message-content">
-        <ReaderHeader :message="message!" />
+        <ReaderHeader
+          :entity="props.entity"
+          @download-attachment="handleDownload"
+        />
         
         <v-divider />
         

src/components/reader/ReaderHeader.vue

@@ -1,16 +1,25 @@
 <script setup lang="ts">
-import { MessageObject } from '@MailManager/models/message'
+import { computed } from 'vue'
 import RecipientDetails from '@/components/common/RecipientDetails.vue'
+import type { EntityObject } from '@MailManager/models';
 
 interface Props {
-  message: MessageObject
+  entity: EntityObject | null
 }
 
 const props = defineProps<Props>()
 
-const addressKey = (address: { address?: string | null; label?: string | null } | null | undefined, index: number): string => {
-  return `${address?.address || address?.label || 'address'}-${index}`
-}
+const emit = defineEmits<{
+  downloadAttachment: [index: number]
+}>()
+
+const message = computed(() => {
+  return props.entity?.properties ?? null
+})
+
+const randomKey = computed(() => {
+  return Math.random().toString(36).substring(2, 15)
+})
 
 // Format date for display
 const formatDate = (date: Date | string | null | undefined): string => {
@@ -36,6 +45,10 @@ const formatFileSize = (bytes: number | undefined): string => {
   if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
   return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
 }
+
+const download = async (index: number): Promise<void> => {
+  emit('downloadAttachment', index)
+}
 </script>
 
 <template>
@@ -66,7 +79,7 @@ const formatFileSize = (bytes: number | undefined): string => {
     <!-- Recipients -->
     <div v-if="message?.to && message?.to.length > 0" class="text-body-2 mb-1">
       <span class="text-medium-emphasis">To:</span>
-      <template v-for="(recipient, index) in message.to" :key="addressKey(recipient, index)">
+      <template v-for="(recipient, index) in message.to" :key="randomKey">
         <RecipientDetails :address="recipient">
           <template #default="{ label }">
             <span class="contact-link">{{ label }}</span>
@@ -78,7 +91,7 @@ const formatFileSize = (bytes: number | undefined): string => {
 
     <div v-if="message?.cc && message?.cc.length > 0" class="text-body-2 mb-1">
       <span class="text-medium-emphasis">Cc:</span>
-      <template v-for="(recipient, index) in message.cc" :key="addressKey(recipient, index)">
+      <template v-for="(recipient, index) in message.cc" :key="randomKey">
         <RecipientDetails :address="recipient">
           <template #default="{ label }">
             <span class="contact-link">{{ label }}</span>
@@ -94,22 +107,27 @@ const formatFileSize = (bytes: number | undefined): string => {
         Attachments ({{ message?.attachments.length }})
       </div>
       <div class="d-flex flex-wrap gap-2">
-        <v-chip
+        <div
           v-for="(attachment, index) in message?.attachments"
-          :key="index"
+          :key="randomKey"
+          class="attachment-item"
+        >
+          <v-chip
             prepend-icon="mdi-paperclip"
             size="small"
             variant="outlined"
             class="attachment-chip"
+            @click="download(index)"
           >
             <span class="attachment-name">{{ attachment.name || 'Untitled' }}</span>
             <span v-if="attachment.size" class="text-caption text-medium-emphasis ml-1">
-            ({{ formatFileSize(attachment.size) }})
+              ({{ formatFileSize(attachment.size ?? undefined) }})
             </span>
           </v-chip>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -121,8 +139,15 @@ const formatFileSize = (bytes: number | undefined): string => {
   gap: 0.5rem;
 }
 
+.attachment-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
 .attachment-chip {
   max-width: 300px;
+  cursor: pointer;
   
   .attachment-name {
     overflow: hidden;
@@ -131,6 +156,11 @@ const formatFileSize = (bytes: number | undefined): string => {
   }
 }
 
+.attachment-error {
+  color: rgb(var(--v-theme-error));
+  margin-top: 0.25rem;
+}
+
 .contact-link {
   display: inline-block;
   border-radius: 4px;

src/components/reader/ReaderToolbar.vue

@@ -17,6 +17,7 @@ const emit = defineEmits<{
   move: []
   delete: []
   flag: []
+  download: []
   toggleImages: []
   setSecurityLevel: [level: SecurityLevel]
 }>()
@@ -161,6 +162,28 @@ const currentSecurityLevel = computed(() => {
       <v-icon>mdi-delete-outline</v-icon>
       <v-tooltip activator="parent" location="bottom">Delete</v-tooltip>
     </v-btn>
+
+    <v-menu>
+      <template #activator="{ props: menuProps }">
+        <v-btn
+          v-bind="menuProps"
+          icon="mdi-dots-vertical"
+          variant="text"
+        >
+          <v-icon>mdi-dots-vertical</v-icon>
+          <v-tooltip activator="parent" location="bottom">More Actions</v-tooltip>
+        </v-btn>
+      </template>
+
+      <v-list density="compact">
+        <v-list-item
+          prepend-icon="mdi-download"
+          @click="emit('download')"
+        >
+          <v-list-item-title>Download</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
   </v-toolbar>
 </template>
 

src/stores/mailStore.ts

@@ -633,6 +633,33 @@ export const useMailStore = defineStore('mailStore', () => {
     }
   }
 
+  async function downloadMessage(entity: EntityObject, index?: number) {
+    const target = entity.identifier
+    let part = null
+
+    if (index !== undefined) {
+      part = entity.properties.attachments?.[Number(index)] ?? null
+    }
+
+    try {
+      await entitiesStore.download(target, part)
+    } catch (error) {
+      const messageText = error instanceof Error
+        ? error.message
+        : index === undefined
+          ? 'Failed to download message'
+          : 'Failed to download attachment'
+      console.error(
+        index === undefined
+          ? '[Mail][Operations] Failed to download message:'
+          : '[Mail][Operations] Failed to download attachment:',
+        error,
+      )
+      notify(messageText, 'error')
+      throw error
+    }
+  }
+
   function notify(message: string, color: 'success' | 'error' | 'info' | 'warning' = 'success') {
     showSnackbar({ message, color })
   }
@@ -672,6 +699,7 @@ export const useMailStore = defineStore('mailStore', () => {
     deleteMessages,
     deleteFolder,
     moveMessages,
+    downloadMessage,
     moveFolder,
     renameFolder,
     notify,