Start for Dev Branch

components/InboxMail.vue

@@ -17,11 +17,11 @@ defineProps({
   <UDashboardPanelContent>
     <div class="flex justify-between">
       <div class="flex items-center gap-4">
-        <UAvatar v-bind="mail.from.avatar" :alt="mail.from.name" size="lg" />
+        <UAvatar v-bind="mail.from.avatar" :alt="mail.from.name||mail.from.address" size="lg" />
 
         <div class="min-w-0">
           <p class="text-gray-900 dark:text-white font-semibold">
-            {{ mail.from.name }}
+            {{ mail.from.name ||mail.from.address}}
           </p>
           <p class="text-gray-500 dark:text-gray-400 font-medium">
             {{ mail.subject }}
@@ -36,18 +36,33 @@ defineProps({
 
     <UDivider class="my-5" />
 
-    <div class="flex-1">
-      <p class="text-lg">
-        {{ mail.body }}
-      </p>
+    <InputGroup class="mb-3">
+      <UButton
+          v-for="attachment in mail.attachments"
+          icon="i-heroicons-arrow-down-tray"
+          disabled
+      >
+        {{attachment.filename}}
+      </UButton>
+    </InputGroup>
+
+    <div class="contentscroll overflow-scroll">
+      <iframe class="flex-1 h-full w-full" :srcdoc="mail.html" v-if="mail.html"/>
+
+<!--      <div class="flex-1" v-html="mail.html" v-if="mail.html">
+
+      </div>-->
+      <div class="flex-1" v-else>
+        <p>{{mail.text}}</p>
+      </div>
     </div>
 
-    <UDivider class="my-5" />
 
-    <form @submit.prevent>
-      <UTextarea color="gray" required size="xl" :rows="5" :placeholder="`Reply to ${mail.from.name}`">
-        <UButton type="submit" color="black" label="Send" icon="i-heroicons-paper-airplane" class="absolute bottom-2.5 right-3.5" />
-      </UTextarea>
-    </form>
   </UDashboardPanelContent>
-</template>
+</template>
+
+<style>
+.contentscroll{
+  height: 80vh;
+}
+</style>