feat: recipient details

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

src/components/MessageComposer.vue

@@ -10,14 +10,16 @@ import Placeholder from '@tiptap/extension-placeholder'
 import { EntityObject } from '@MailManager/models/entity'
 import type { CollectionObject } from '@MailManager/models'
 import { useMailStore } from '@/stores/mailStore'
+import type { MessageAddressInterface } from '@MailManager/types/message'
+import { ComposerMode } from '@/types/composer'
 import ComposerToolbar from '@/components/composer/ComposerToolbar.vue'
 import ComposerRecipients from '@/components/composer/ComposerRecipients.vue'
 import ComposerEditor from '@/components/composer/ComposerEditor.vue'
 
 // Props
 interface Props {
-  mode: 'new' | 'reply' | 'forward'
-  source?: EntityObject | null
+  mode: ComposerMode
+  source?: EntityObject | MessageAddressInterface | null
   folder?: CollectionObject | null
 }
 
@@ -83,7 +85,15 @@ function initializeComposerFromProps() {
   mailStore.resetComposerState()
   resetComposerFields()
 
-  if (!props.source) {
+  if (props.mode === ComposerMode.Fresh) {
+    if (props.source && 'address' in props.source) {
+      // If source is an email address, pre-fill the "To" field
+      to.value = [props.source.address]
+    }
+    return
+  }
+
+  if (props.source instanceof EntityObject == false) {
     return
   }
 
@@ -94,19 +104,19 @@ function initializeComposerFromProps() {
   const sentAt = sourceMessage.sent || props.source.created || ''
   const sentLabel = sentAt ? new Date(sentAt).toLocaleString() : 'an unknown time'
 
-  if (props.mode === 'reply') {
+  if (props.mode === ComposerMode.Reply) {
     const fromEmail = sourceMessage.replyTo?.[0]?.address || sourceMessage.from?.address
     to.value = fromEmail ? [fromEmail] : []
     subject.value = /^Re:/i.test(originalSubject)
       ? originalSubject
       : `Re: ${originalSubject}`
     editor.value?.commands.setContent(
-      `<p><br></p><p>On ${sentLabel}, ${senderName} wrote:</p><blockquote>${originalBody}</blockquote>`,
+      `<p><br></p><p>---------- Original message ---------</p><p>From: ${senderName}</p><p>Date: ${sentLabel}</p><p>Subject: ${originalSubject}</p><blockquote>${originalBody}</blockquote>`,
     )
     return
   }
 
-  if (props.mode === 'forward') {
+  if (props.mode === ComposerMode.Forward) {
     subject.value = /^Fwd:/i.test(originalSubject)
       ? originalSubject
       : `Fwd: ${originalSubject}`

src/components/MessageList.vue

@@ -3,6 +3,7 @@ import { computed, onBeforeUnmount, ref } from 'vue'
 import type { EntityIdentifier } from '@MailManager/types/common'
 import type { EntityObject } from '@MailManager/models'
 import type { CollectionObject } from '@MailManager/models/collection'
+import RecipientDetails from '@/components/common/RecipientDetails.vue'
 
 // Props
 interface Props {
@@ -363,7 +364,11 @@ onBeforeUnmount(() => {
 
           <v-list-item-title class="d-flex align-center">
             <span class="flex-grow-1 text-truncate">
-              {{ message.properties.from?.label || message.properties.from?.address || 'Unknown Sender' }}
+              <RecipientDetails :address="message.properties.from">
+                <template #default="{ label }">
+                  <span class="message-person-link text-truncate">{{ label }}</span>
+                </template>
+              </RecipientDetails>
             </span>
             <span class="text-caption text-medium-emphasis ml-2">
               {{ formatDate(timeStamp(message)) }}
@@ -519,6 +524,19 @@ onBeforeUnmount(() => {
   background-color: rgba(var(--v-theme-primary), 0.14);
 }
 
+.message-person-link {
+  display: inline-block;
+  max-width: 100%;
+  border-radius: 4px;
+  padding: 1px 4px;
+  margin: -1px -4px;
+  transition: background-color 0.2s ease;
+}
+
+.message-person-link:hover {
+  background-color: rgba(var(--v-theme-primary), 0.08);
+}
+
 @media (max-width: 960px) {
   .selection-summary {
     flex-direction: column;

src/components/common/RecipientDetails.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSnackbar } from '@KTXC'
+import type { MessageAddressInterface } from '@MailManager/types/message'
+import { useMailUiStore } from '@/stores/mailUiStore'
+import { ComposerMode } from '@/types/composer'
+
+interface Props {
+  address?: MessageAddressInterface | null
+}
+
+const props = defineProps<Props>()
+
+const mailUiStore = useMailUiStore()
+const { showSnackbar } = useSnackbar()
+
+const recipientLabel = computed(() => props.address?.label?.trim() || '')
+const recipientAddress = computed(() => props.address?.address?.trim() || '')
+const displayLabel = computed(() => recipientLabel.value || recipientAddress.value || 'Unknown Sender')
+const formattedAddress = computed(() => {
+  if (recipientLabel.value && recipientAddress.value && recipientLabel.value !== recipientAddress.value) {
+    return `${recipientLabel.value} <${recipientAddress.value}>`
+  }
+
+  return recipientAddress.value || recipientLabel.value
+})
+const hasEmail = computed(() => recipientAddress.value.length > 0)
+
+const showCopyResult = (message: string, color: 'success' | 'error') => {
+  showSnackbar({ message, color })
+}
+
+const copy = async (value: string, label: string) => {
+  if (!value) {
+    return
+  }
+
+  try {
+    await navigator.clipboard.writeText(value)
+    showCopyResult(`${label} copied`, 'success')
+  } catch (error) {
+    console.error('[Mail][RecipientDetails] Failed to copy text:', error)
+    showCopyResult(`Unable to copy ${label.toLowerCase()}`, 'error')
+  }
+}
+
+const handleCompose = () => {
+  if (!props.address) {
+    return
+  }
+
+  mailUiStore.openComposer(props.address, ComposerMode.Fresh)
+}
+</script>
+
+<template>
+  <v-menu
+    :open-on-hover="true"
+    :open-on-click="false"
+    :open-delay="1000"
+    location="bottom start"
+    transition="slide-y-transition"
+  >
+    <template #activator="{ props: activatorProps }">
+      <span
+        v-bind="activatorProps"
+        class="address-activator"
+        @click.stop
+      >
+        <slot
+          :label="displayLabel"
+          :name="recipientLabel"
+          :email="recipientAddress"
+        >
+          {{ displayLabel }}
+        </slot>
+      </span>
+    </template>
+
+    <v-card class="address-card" elevation="8" rounded="lg">
+      <div class="address-card-header">
+        <v-avatar size="40" color="primary">
+          <span class="text-white text-subtitle-2">
+            {{ displayLabel[0]?.toUpperCase() || 'U' }}
+          </span>
+        </v-avatar>
+
+        <div class="address-card-meta">
+          <div class="text-subtitle-2 font-weight-medium">{{ displayLabel }}</div>
+          <div v-if="recipientAddress" class="text-body-2 text-medium-emphasis">{{ recipientAddress }}</div>
+        </div>
+      </div>
+
+      <v-divider class="my-3" />
+
+      <div class="address-card-actions">
+        <v-btn
+          class="address-action-button"
+          size="small"
+          variant="tonal"
+          prepend-icon="mdi-pencil"
+          :disabled="!hasEmail"
+          @click="handleCompose"
+        >
+          Send Email
+        </v-btn>
+        <v-btn
+          class="address-action-button"
+          size="small"
+          variant="text"
+          :disabled="!hasEmail"
+          @click="copy(recipientAddress, 'Email address')"
+        >
+          <v-icon>mdi-content-copy</v-icon>
+          <v-tooltip activator="parent" location="bottom">Copy Email</v-tooltip>
+        </v-btn>
+        <v-btn
+          class="address-action-button"
+          size="small"
+          variant="text"
+          :disabled="!formattedAddress"
+          @click="copy(formattedAddress, 'Address')"
+        >
+          <v-icon>mdi-card-account-details-outline</v-icon>
+          <v-tooltip activator="parent" location="bottom">Copy Address</v-tooltip>
+        </v-btn>
+        <v-btn
+          v-if="recipientLabel"
+          class="address-action-button"
+          size="small"
+          variant="text"
+          @click="copy(recipientLabel, 'Name')"
+        >
+          <v-icon>mdi-account-outline</v-icon>
+          <v-tooltip activator="parent" location="bottom">Copy Name</v-tooltip>
+        </v-btn>
+      </div>
+    </v-card>
+  </v-menu>
+</template>
+
+<style scoped lang="scss">
+.address-activator {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+}
+
+.address-card {
+  width: min(320px, calc(100vw - 32px));
+  padding: 16px;
+}
+
+.address-card-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.address-card-meta {
+  min-width: 0;
+}
+
+.address-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.address-card-actions :deep(.address-action-button) {
+  height: 36px;
+  min-height: 36px;
+  width: 36px;
+  min-width: 36px;
+  padding: 0;
+}
+
+.address-card-actions :deep(.address-action-button:first-child) {
+  width: auto;
+  min-width: 0;
+  padding-inline: 12px;
+}
+</style>

src/components/composer/ComposerToolbar.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { ComposerMode } from '@/types/composer'
+
 interface Props {
-  mode: 'new' | 'reply' | 'forward'
+  mode: ComposerMode
   saveStatus: string
   canSend: boolean
   sending: boolean
@@ -26,7 +28,7 @@ defineEmits<{
     </v-btn>
 
     <v-toolbar-title>
-      {{ mode === 'reply' ? 'Reply' : mode === 'forward' ? 'Forward' : 'New Message' }}
+      {{ mode === ComposerMode.Reply ? 'Reply' : mode === ComposerMode.Forward ? 'Forward' : 'New Message' }}
     </v-toolbar-title>
 
     <v-spacer />

src/components/reader/ReaderHeader.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { MessageObject } from '@MailManager/models/message'
+import RecipientDetails from '@/components/common/RecipientDetails.vue'
 
 interface Props {
   message: MessageObject
@@ -7,6 +8,10 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const addressKey = (address: { address?: string | null; label?: string | null } | null | undefined, index: number): string => {
+  return `${address?.address || address?.label || 'address'}-${index}`
+}
+
 // Format date for display
 const formatDate = (date: Date | string | null | undefined): string => {
   if (!date) return ''
@@ -46,10 +51,14 @@ const formatFileSize = (bytes: number | undefined): string => {
       
       <div class="flex-grow-1">
         <div class="text-body-1 font-weight-medium">
-          {{ message?.from?.label || message?.from?.address || 'Unknown Sender' }}
+          <RecipientDetails :address="message?.from">
+            <template #default="{ label }">
+              <span class="contact-link">{{ label }}</span>
+            </template>
+          </RecipientDetails>
         </div>
         <div class="text-caption text-medium-emphasis">
-          {{ formatDate(message?.date) }}
+          {{ formatDate(message?.received || message?.sent) }}
         </div>
       </div>
     </div>
@@ -57,12 +66,26 @@ const formatFileSize = (bytes: number | undefined): string => {
     <!-- Recipients -->
     <div v-if="message?.to && message?.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(', ') }}
+      <template v-for="(recipient, index) in message.to" :key="addressKey(recipient, index)">
+        <RecipientDetails :address="recipient">
+          <template #default="{ label }">
+            <span class="contact-link">{{ label }}</span>
+          </template>
+        </RecipientDetails>
+        <span v-if="index < message.to.length - 1">, </span>
+      </template>
     </div>
 
     <div v-if="message?.cc && message?.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(', ') }}
+      <template v-for="(recipient, index) in message.cc" :key="addressKey(recipient, index)">
+        <RecipientDetails :address="recipient">
+          <template #default="{ label }">
+            <span class="contact-link">{{ label }}</span>
+          </template>
+        </RecipientDetails>
+        <span v-if="index < message.cc.length - 1">, </span>
+      </template>
     </div>
 
     <!-- Attachments -->
@@ -107,4 +130,16 @@ const formatFileSize = (bytes: number | undefined): string => {
     white-space: nowrap;
   }
 }
+
+.contact-link {
+  display: inline-block;
+  border-radius: 4px;
+  padding: 1px 4px;
+  margin: -1px -4px;
+  transition: background-color 0.2s ease;
+}
+
+.contact-link:hover {
+  background-color: rgba(var(--v-theme-primary), 0.08);
+}
 </style>