Merge pull request 'refactor: use mail object' (#14) from refactor/use-mail-object into main

Reviewed-on: #14

src/components/MessageReader.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { useUser } from '@KTXC'
-import type { EntityObject } from '@MailManager/models'
+import type { EntityObject, MessageObject } from '@MailManager/models'
-import { MessageObject } from '@MailManager/models/message'
 import { SecurityLevel } from '@/utile/emailSanitizer'
 import ReaderEmpty from './reader/ReaderEmpty.vue'
 import ReaderToolbar from './reader/ReaderToolbar.vue'
@@ -10,46 +9,34 @@ import ReaderHeader from './reader/ReaderHeader.vue'
 import ReaderBody from './reader/ReaderBody.vue'
 
 // Props
-interface Props {
+const props = defineProps<{
-  message?: EntityObject | null
+  entity: EntityObject | null
-}
+}>()
 
-const props = defineProps<Props>()
+// Emits
+const emit = defineEmits<{
+  reply: [entity: EntityObject]
+  forward: [entity: EntityObject]
+  move: [entity: EntityObject]
+  delete: [entity: EntityObject]
+  flag: [entity: EntityObject]
+  compose: []
+}>()
 
 // User settings
 const { getSetting } = useUser()
 
-// Emits
+// Per-message overrides
-const emit = defineEmits<{
+const allowImages = ref(false)
-  reply: [message: EntityObject]
+const overrideSecurityLevel = ref<SecurityLevel | null>(null)
-  forward: [message: EntityObject]
-  move: [message: EntityObject]
-  delete: [message: EntityObject]
-  flag: [message: EntityObject]
-  compose: []
-}>()
 
 // Computed
-const hasMessage = computed(() => !!props.message)
+const message = computed<MessageObject | null>(() => {
-
+  return props.entity?.properties ?? null
-const messageInstance = computed(() => {
-  if (!props.message) return null
-  return new MessageObject(props.message.properties)
-})
-
-const messageBody = computed(() => {
-  if (!messageInstance.value) return ''
-  
-  const htmlContent = messageInstance.value.getHtmlContent()
-  if (htmlContent) return htmlContent
-  
-  const textContent = messageInstance.value.getTextContent()
-  return textContent || ''
 })
 
 const isHtml = computed(() => {
-  if (!messageInstance.value) return false
+  return message.value?.hasHtmlContent() ?? false
-  return messageInstance.value.hasHtmlContent()
 })
 
 // Security preferences from user settings
@@ -61,17 +48,13 @@ const allowImagesDefault = computed(() => {
   return getSetting('mail.security.allowImagesDefault') as boolean || false
 })
 
-// Per-message overrides
-const allowImages = ref(false)
-const overrideSecurityLevel = ref<SecurityLevel | null>(null)
-
 // Computed effective security level (use override if set, otherwise default)
 const effectiveSecurityLevel = computed(() => {
   return overrideSecurityLevel.value ?? securityLevel.value
 })
 
 // Reset overrides when message changes
-watch(() => props.message, () => {
+watch(() => props.entity, () => {
   allowImages.value = allowImagesDefault.value
   overrideSecurityLevel.value = null
 })
@@ -88,32 +71,32 @@ const setSecurityLevel = (level: SecurityLevel) => {
 
 // Handlers
 const handleReply = () => {
-  if (props.message) {
+  if (props.entity) {
-    emit('reply', props.message)
+    emit('reply', props.entity)
   }
 }
 
 const handleForward = () => {
-  if (props.message) {
+  if (props.entity) {
-    emit('forward', props.message)
+    emit('forward', props.entity)
   }
 }
 
 const handleDelete = () => {
-  if (props.message) {
+  if (props.entity) {
-    emit('delete', props.message)
+    emit('delete', props.entity)
   }
 }
 
 const handleMove = () => {
-  if (props.message) {
+  if (props.entity) {
-    emit('move', props.message)
+    emit('move', props.entity)
   }
 }
 
 const handleFlag = () => {
-  if (props.message) {
+  if (props.entity) {
-    emit('flag', props.message)
+    emit('flag', props.entity)
   }
 }
 
@@ -126,14 +109,13 @@ const handleCompose = () => {
   <div class="message-reader">
     <!-- Empty state -->
     <ReaderEmpty 
-      v-if="!hasMessage" 
+      v-if="!message" 
       @compose="handleCompose"
     />
 
     <!-- Message viewer -->
     <template v-else>
       <ReaderToolbar
-        :message="message!"
         :is-html="isHtml"
         :allow-images="allowImages"
         :security-level="effectiveSecurityLevel"
@@ -149,13 +131,12 @@ const handleCompose = () => {
 
       <!-- Message content -->
       <div class="message-content">
-        <ReaderHeader :message-instance="messageInstance!" />
+        <ReaderHeader :message="message!" />
         
         <v-divider />
         
         <ReaderBody
-          :message-body="messageBody"
+          :message="message!"
-          :is-html="isHtml"
           :security-level="effectiveSecurityLevel"
           :allow-images="allowImages"
         />

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
+  message: MessageObject
-  isHtml: boolean
   securityLevel: SecurityLevel
   allowImages: boolean
 }
 
 const props = defineProps<Props>()
 
-// Sanitize HTML content for security
+// Computed
-const sanitizedMessageBody = computed(() => {
+const displayFrame = ref<HTMLIFrameElement | null>(null)
-  if (!props.messageBody || !props.isHtml) return props.messageBody
 
-  return EmailSanitizer.sanitize(props.messageBody, {
+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 (!messageBody.value || !isHtml.value) return messageBody.value
+  
+  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
+// Watchers
-const emailFrame = ref<HTMLIFrameElement | null>(null)
+watch(messageBody, () => {
-
-// 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, () => {
   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

src/pages/MailPage.vue

@@ -230,8 +230,9 @@ const handleFolderCreated = (folder: CollectionObject) => mailStore.notify(`Fold
             
             <MessageReader
               v-else
-              :message="selectedMessage"
+              :entity="selectedMessage"
-              @reply="handleReply"
+              @compose="handleCompose"
+              @reply="handleCompose"
               @move="handleMove"
               @delete="handleDelete"
               @compose="handleCompose()"

src/stores/mailStore.ts

@@ -333,8 +333,8 @@ export const useMailStore = defineStore('mailStore', () => {
     _updateSyncSources()
   }
 
-  function selectMessage(message: EntityObject, closeSidebar = false) {
+  function selectMessage(entity: EntityObject, closeSidebar = false) {
-    selectedMessage.value = message
+    selectedMessage.value = entity
     composeMode.value = false
 
     if (closeSidebar) {