feat: recipient details

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

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>