Nodarx/mail
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Projects Releases Activity

refactor: use mail object #14

Merged
Sebastian merged 1 commits from refactor/use-mail-object into main 2026-04-24 01:53:47 +00:00
Conversation 0 Commits 1 Files Changed 6 +82 -89
6 changed files with 82 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/MessageReader.vue
View File

@@ -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 { MessageObject } from '@MailManager/models/message'
import type { EntityObject, MessageObject } from '@MailManager/models'
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 {
message?: EntityObject | null
}
const props = defineProps<{
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
const emit = defineEmits<{
reply: [message: EntityObject]
forward: [message: EntityObject]
move: [message: EntityObject]
delete: [message: EntityObject]
flag: [message: EntityObject]
compose: []
}>()
// Per-message overrides
const allowImages = ref(false)
const overrideSecurityLevel = ref<SecurityLevel | null>(null)
// Computed
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 message = computed<MessageObject | null>(() => {
return props.entity?.properties ?? null
})
const isHtml = computed(() => {
if (!messageInstance.value) return false
return messageInstance.value.hasHtmlContent()
return message.value?.hasHtmlContent() ?? false
})
// 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) {
emit('reply', props.message)
if (props.entity) {
emit('reply', props.entity)
}
}
const handleForward = () => {
if (props.message) {
emit('forward', props.message)
if (props.entity) {
emit('forward', props.entity)
}
}
const handleDelete = () => {
if (props.message) {
emit('delete', props.message)
if (props.entity) {
emit('delete', props.entity)
}
}
const handleMove = () => {
if (props.message) {
emit('move', props.message)
if (props.entity) {
emit('move', props.entity)
}
}
const handleFlag = () => {
if (props.message) {
emit('flag', props.message)
if (props.entity) {
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"
:is-html="isHtml"
:message="message!"
:security-level="effectiveSecurityLevel"
:allow-images="allowImages"
/>

51
src/components/reader/ReaderBody.vue
View File

@@ -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"

24
src/components/reader/ReaderHeader.vue
View File

@@ -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"

2
src/components/reader/ReaderToolbar.vue
View File

@@ -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

5
src/pages/MailPage.vue
View File

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

4
src/stores/mailStore.ts
View File

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