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"