Initial commit

2026-02-10 19:39:08 -05:00
commit 2a251f9b3f
32 changed files with 6135 additions and 0 deletions
--- a/src/components/reader/ReaderHeader.vue
+++ b/src/components/reader/ReaderHeader.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { MessageObject } from '@MailManager/models/message'
+
+interface Props {
+  messageInstance: MessageObject
+}
+
+const props = defineProps<Props>()
+
+// Format date for display
+const formatDate = (date: Date | string | null | undefined): string => {
+  if (!date) return ''
+  
+  const messageDate = new Date(date)
+  return messageDate.toLocaleString('en-US', {
+    weekday: 'short',
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true
+  })
+}
+
+// Format file size for display
+const formatFileSize = (bytes: number | undefined): string => {
+  if (!bytes) return ''
+  
+  if (bytes < 1024) return bytes + ' B'
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+}
+</script>
+
+<template>
+  <div class="message-header pa-6">
+    <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">
+          {{ (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">
+          {{ messageInstance?.from?.label || messageInstance?.from?.address || 'Unknown Sender' }}
+        </div>
+        <div class="text-caption text-medium-emphasis">
+          {{ formatDate(messageInstance?.date) }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Recipients -->
+    <div v-if="messageInstance?.to && messageInstance?.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(', ') }}
+    </div>
+
+    <div v-if="messageInstance?.cc && messageInstance?.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(', ') }}
+    </div>
+
+    <!-- Attachments -->
+    <div v-if="messageInstance?.attachments && messageInstance?.attachments.length > 0" class="mt-4">
+      <div class="text-body-2 text-medium-emphasis mb-2">
+        Attachments ({{ messageInstance?.attachments.length }})
+      </div>
+      <div class="d-flex flex-wrap gap-2">
+        <v-chip
+          v-for="(attachment, index) in messageInstance?.attachments"
+          :key="index"
+          prepend-icon="mdi-paperclip"
+          size="small"
+          variant="outlined"
+          class="attachment-chip"
+        >
+          <span class="attachment-name">{{ attachment.name || 'Untitled' }}</span>
+          <span v-if="attachment.size" class="text-caption text-medium-emphasis ml-1">
+            ({{ formatFileSize(attachment.size) }})
+          </span>
+        </v-chip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.message-header {
+  background-color: rgba(var(--v-theme-surface));
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.attachment-chip {
+  max-width: 300px;
+  
+  .attachment-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>