Initial commit

src/components/MessageReader.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useUser } from '@KTXC/composables/useUser'
+import type { EntityInterface } from '@MailManager/types/entity'
+import type { MessageInterface } from '@MailManager/types/message'
+import { MessageObject } from '@MailManager/models/message'
+import { SecurityLevel } from '@/utile/emailSanitizer'
+import ReaderEmpty from './reader/ReaderEmpty.vue'
+import ReaderToolbar from './reader/ReaderToolbar.vue'
+import ReaderHeader from './reader/ReaderHeader.vue'
+import ReaderBody from './reader/ReaderBody.vue'
+
+// Props
+interface Props {
+  message?: EntityInterface<MessageInterface> | null
+}
+
+const props = defineProps<Props>()
+
+// User settings
+const { getSetting } = useUser()
+
+// Emits
+const emit = defineEmits<{
+  reply: [message: EntityInterface<MessageInterface>]
+  forward: [message: EntityInterface<MessageInterface>]
+  delete: [message: EntityInterface<MessageInterface>]
+  flag: [message: EntityInterface<MessageInterface>]
+  compose: []
+}>()
+
+// 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 isHtml = computed(() => {
+  if (!messageInstance.value) return false
+  return messageInstance.value.hasHtmlContent()
+})
+
+// Security preferences from user settings
+const securityLevel = computed(() => {
+  return (getSetting('mail.security.level') as SecurityLevel) || SecurityLevel.MODERATE
+})
+
+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, () => {
+  allowImages.value = allowImagesDefault.value
+  overrideSecurityLevel.value = null
+})
+
+// Toggle images for current message only
+const toggleImages = () => {
+  allowImages.value = !allowImages.value
+}
+
+// Set security level override for current message only
+const setSecurityLevel = (level: SecurityLevel) => {
+  overrideSecurityLevel.value = level
+}
+
+// Handlers
+const handleReply = () => {
+  if (props.message) {
+    emit('reply', props.message)
+  }
+}
+
+const handleForward = () => {
+  if (props.message) {
+    emit('forward', props.message)
+  }
+}
+
+const handleDelete = () => {
+  if (props.message) {
+    emit('delete', props.message)
+  }
+}
+
+const handleFlag = () => {
+  if (props.message) {
+    emit('flag', props.message)
+  }
+}
+
+const handleCompose = () => {
+  emit('compose')
+}
+</script>
+
+<template>
+  <div class="message-reader">
+    <!-- Empty state -->
+    <ReaderEmpty 
+      v-if="!hasMessage" 
+      @compose="handleCompose"
+    />
+
+    <!-- Message viewer -->
+    <template v-else>
+      <ReaderToolbar
+        :message="message!"
+        :is-html="isHtml"
+        :allow-images="allowImages"
+        :security-level="effectiveSecurityLevel"
+        :is-security-overridden="overrideSecurityLevel !== null"
+        @reply="handleReply"
+        @forward="handleForward"
+        @delete="handleDelete"
+        @flag="handleFlag"
+        @toggle-images="toggleImages"
+        @set-security-level="setSecurityLevel"
+      />
+
+      <!-- Message content -->
+      <div class="message-content">
+        <ReaderHeader :message-instance="messageInstance!" />
+        
+        <v-divider />
+        
+        <ReaderBody
+          :message-body="messageBody"
+          :is-html="isHtml"
+          :security-level="effectiveSecurityLevel"
+          :allow-images="allowImages"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.message-reader {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.message-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+</style>