refactor: use mail object

Signed-off-by: Sebastian <krupinski01@gmail.com>

src/components/reader/ReaderBody.vue

@@ -1,21 +1,37 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
+import type { MessageObject } from '@MailManager/models'
 import { EmailSanitizer, SecurityLevel } from '@/utile/emailSanitizer'
 
 interface Props {
-  messageBody: string
-  isHtml: boolean
+  message: MessageObject
   securityLevel: SecurityLevel
   allowImages: boolean
 }
 
 const props = defineProps<Props>()
 
-// Sanitize HTML content for security
+// Computed
+const displayFrame = ref<HTMLIFrameElement | null>(null)
+
+const isHtml = computed(() => {
+  return props.message.hasHtmlContent()
+})
+
+const messageBody = computed(() => {
+  if (!props.message.hasContent()) return ''
+
+  if (props.message.hasHtmlContent()) {
+    return props.message.getHtmlContent() ?? ''
+  }
+
+  return props.message.getTextContent() ?? ''
+})
+
 const sanitizedMessageBody = computed(() => {
-  if (!props.messageBody || !props.isHtml) return props.messageBody
+  if (!messageBody.value || !isHtml.value) return messageBody.value
   
-  return EmailSanitizer.sanitize(props.messageBody, {
+  return EmailSanitizer.sanitize(messageBody.value, {
     securityLevel: props.securityLevel,
     allowImages: props.allowImages,
     allowExternalLinks: true,
@@ -23,25 +39,22 @@ const sanitizedMessageBody = computed(() => {
   })
 })
 
-// Iframe reference for sandboxed HTML rendering
-const emailFrame = ref<HTMLIFrameElement | null>(null)
-
-// Resize iframe to fit content
-const resizeIframe = () => {
-  if (emailFrame.value?.contentWindow?.document?.body) {
-    const height = emailFrame.value.contentWindow.document.body.scrollHeight
-    emailFrame.value.style.height = `${height + 20}px`
-  }
-}
-
-// Watch for changes to trigger resize
-watch(() => props.messageBody, () => {
+// Watchers
+watch(messageBody, () => {
   setTimeout(resizeIframe, 100)
 })
 
 watch(() => props.allowImages, () => {
   setTimeout(resizeIframe, 100)
 })
+
+// Functions
+const resizeIframe = () => {
+  if (displayFrame.value?.contentWindow?.document?.body) {
+    const height = displayFrame.value.contentWindow.document.body.scrollHeight
+    displayFrame.value.style.height = `${height + 20}px`
+  }
+}
 </script>
 
 <template>
@@ -49,7 +62,7 @@ watch(() => props.allowImages, () => {
     <!-- HTML body (sandboxed iframe) -->
     <iframe
       v-if="isHtml"
-      ref="emailFrame"
+      ref="displayFrame"
       sandbox="allow-same-origin"
       class="html-content-frame"
       :srcdoc="sanitizedMessageBody"

src/components/reader/ReaderHeader.vue

@@ -2,7 +2,7 @@
 import { MessageObject } from '@MailManager/models/message'
 
 interface Props {
-  messageInstance: MessageObject
+  message: MessageObject
 }
 
 const props = defineProps<Props>()
@@ -35,44 +35,44 @@ const formatFileSize = (bytes: number | undefined): string => {
 
 <template>
   <div class="message-header pa-6">
-    <div class="text-h5 mb-4">{{ messageInstance?.subject || '(No subject)' }}</div>
+    <div class="text-h5 mb-4">{{ message?.subject || '(No subject)' }}</div>
     
     <div class="d-flex align-center mb-3">
       <v-avatar size="48" color="primary" class="mr-3">
         <span class="text-white text-h6">
-          {{ (messageInstance?.from?.label || messageInstance?.from?.address || 'U')[0].toUpperCase() }}
+          {{ (message?.from?.label || message?.from?.address || 'U')[0].toUpperCase() }}
         </span>
       </v-avatar>
       
       <div class="flex-grow-1">
         <div class="text-body-1 font-weight-medium">
-          {{ messageInstance?.from?.label || messageInstance?.from?.address || 'Unknown Sender' }}
+          {{ message?.from?.label || message?.from?.address || 'Unknown Sender' }}
         </div>
         <div class="text-caption text-medium-emphasis">
-          {{ formatDate(messageInstance?.date) }}
+          {{ formatDate(message?.date) }}
         </div>
       </div>
     </div>
 
     <!-- Recipients -->
-    <div v-if="messageInstance?.to && messageInstance?.to.length > 0" class="text-body-2 mb-1">
+    <div v-if="message?.to && message?.to.length > 0" class="text-body-2 mb-1">
       <span class="text-medium-emphasis">To:</span>
-      {{ messageInstance?.to.map(t => t.label || t.address).join(', ') }}
+      {{ message?.to.map(t => t.label || t.address).join(', ') }}
     </div>
 
-    <div v-if="messageInstance?.cc && messageInstance?.cc.length > 0" class="text-body-2 mb-1">
+    <div v-if="message?.cc && message?.cc.length > 0" class="text-body-2 mb-1">
       <span class="text-medium-emphasis">Cc:</span>
-      {{ messageInstance?.cc.map(c => c.label || c.address).join(', ') }}
+      {{ message?.cc.map(c => c.label || c.address).join(', ') }}
     </div>
 
     <!-- Attachments -->
-    <div v-if="messageInstance?.attachments && messageInstance?.attachments.length > 0" class="mt-4">
+    <div v-if="message?.attachments && message?.attachments.length > 0" class="mt-4">
       <div class="text-body-2 text-medium-emphasis mb-2">
-        Attachments ({{ messageInstance?.attachments.length }})
+        Attachments ({{ message?.attachments.length }})
       </div>
       <div class="d-flex flex-wrap gap-2">
         <v-chip
-          v-for="(attachment, index) in messageInstance?.attachments"
+          v-for="(attachment, index) in message?.attachments"
           :key="index"
           prepend-icon="mdi-paperclip"
           size="small"

src/components/reader/ReaderToolbar.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { EntityObject } from '@MailManager/models'
 import { SecurityLevel } from '@/utile/emailSanitizer'
 
 interface Props {
-  message: EntityObject
   isHtml: boolean
   allowImages: boolean
   securityLevel: SecurityLevel