feat: recipient details

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

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;