feat: move and delete

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

src/components/MessageReader.vue

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

src/components/reader/ReaderBody.vue

@@ -1,37 +1,21 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import type { MessageObject } from '@MailManager/models'
 import { EmailSanitizer, SecurityLevel } from '@/utile/emailSanitizer'
 
 interface Props {
-  message: MessageObject
+  messageBody: string
+  isHtml: boolean
   securityLevel: SecurityLevel
   allowImages: boolean
 }
 
 const props = defineProps<Props>()
 
-// 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() ?? ''
-})
-
+// Sanitize HTML content for security
 const sanitizedMessageBody = computed(() => {
-  if (!messageBody.value || !isHtml.value) return messageBody.value
+  if (!props.messageBody || !props.isHtml) return props.messageBody
   
-  return EmailSanitizer.sanitize(messageBody.value, {
+  return EmailSanitizer.sanitize(props.messageBody, {
     securityLevel: props.securityLevel,
     allowImages: props.allowImages,
     allowExternalLinks: true,
@@ -39,22 +23,25 @@ const sanitizedMessageBody = computed(() => {
   })
 })
 
-// Watchers
-watch(messageBody, () => {
+// 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, () => {
   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>
@@ -62,7 +49,7 @@ const resizeIframe = () => {
     <!-- HTML body (sandboxed iframe) -->
     <iframe
       v-if="isHtml"
-      ref="displayFrame"
+      ref="emailFrame"
       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 {
-  message: MessageObject
+  messageInstance: 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">{{ message?.subject || '(No subject)' }}</div>
+    <div class="text-h5 mb-4">{{ messageInstance?.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">
-          {{ (message?.from?.label || message?.from?.address || 'U')[0].toUpperCase() }}
+          {{ (messageInstance?.from?.label || messageInstance?.from?.address || 'U')[0].toUpperCase() }}
         </span>
       </v-avatar>
       
       <div class="flex-grow-1">
         <div class="text-body-1 font-weight-medium">
-          {{ message?.from?.label || message?.from?.address || 'Unknown Sender' }}
+          {{ messageInstance?.from?.label || messageInstance?.from?.address || 'Unknown Sender' }}
         </div>
         <div class="text-caption text-medium-emphasis">
-          {{ formatDate(message?.date) }}
+          {{ formatDate(messageInstance?.date) }}
         </div>
       </div>
     </div>
 
     <!-- Recipients -->
-    <div v-if="message?.to && message?.to.length > 0" class="text-body-2 mb-1">
+    <div v-if="messageInstance?.to && messageInstance?.to.length > 0" class="text-body-2 mb-1">
       <span class="text-medium-emphasis">To:</span>
-      {{ message?.to.map(t => t.label || t.address).join(', ') }}
+      {{ messageInstance?.to.map(t => t.label || t.address).join(', ') }}
     </div>
 
-    <div v-if="message?.cc && message?.cc.length > 0" class="text-body-2 mb-1">
+    <div v-if="messageInstance?.cc && messageInstance?.cc.length > 0" class="text-body-2 mb-1">
       <span class="text-medium-emphasis">Cc:</span>
-      {{ message?.cc.map(c => c.label || c.address).join(', ') }}
+      {{ messageInstance?.cc.map(c => c.label || c.address).join(', ') }}
     </div>
 
     <!-- Attachments -->
-    <div v-if="message?.attachments && message?.attachments.length > 0" class="mt-4">
+    <div v-if="messageInstance?.attachments && messageInstance?.attachments.length > 0" class="mt-4">
       <div class="text-body-2 text-medium-emphasis mb-2">
-        Attachments ({{ message?.attachments.length }})
+        Attachments ({{ messageInstance?.attachments.length }})
       </div>
       <div class="d-flex flex-wrap gap-2">
         <v-chip
-          v-for="(attachment, index) in message?.attachments"
+          v-for="(attachment, index) in messageInstance?.attachments"
           :key="index"
           prepend-icon="mdi-paperclip"
           size="small"

src/components/reader/ReaderToolbar.vue

@@ -1,8 +1,10 @@
 <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

@@ -234,7 +234,7 @@ const handleFolderCreated = (folder: CollectionObject) => mailStore.notify(`Fold
             
             <MessageReader
               v-else
-              :entity="selectedMessage"
+              :message="selectedMessage"
               @compose="handleCompose"
               @reply="handleCompose"
               @move="handleMove"

src/stores/mailStore.ts

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