From fb0954828cb38fa5b76c2858ced4ce1624c1e54f Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Mon, 23 Mar 2020 22:58:46 -0700
Subject: [PATCH] From/sentAt byline

---
 src/App.vue                 | 4 ++++
 src/components/MailView.vue | 8 +++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c7cd0c9..687c2ff 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -87,6 +87,10 @@ input[type='checkbox']:checked {
   background: #679;
 }
 
+.mb-0 {
+  margin-bottom: 0;
+}
+
 /* Modal */
 
 .modal, .overlay {
diff --git a/src/components/MailView.vue b/src/components/MailView.vue
index 19490a2..fa13859 100644
--- a/src/components/MailView.vue
+++ b/src/components/MailView.vue
@@ -7,8 +7,8 @@
       <button @click="toggleRead(email)">Mark {{email.read ? 'Unread' : 'Read'}}</button>
     </div>
 
-    <div>From: {{email.from}}</div>
-    <h2>Subject: <strong>{{email.subject}}</strong></h2>
+    <h2 class="mb-0">Subject: <strong>{{email.subject}}</strong></h2>
+    <div><em>From {{email.from}} on {{format(new Date(email.sentAt), 'MMM do yyyy')}}</em></div>
     <div v-html="emailMarkdown" />
   </div>
 </template>
@@ -16,6 +16,7 @@
 <script>
   import marked from 'marked';
   import { useKeydown } from '../composition/useKeydown';
+  import { format } from 'date-fns';
 
   export default {
     setup({email}, {emit}) {
@@ -40,7 +41,8 @@
         toggleArchive,
         goNewer,
         goOlder,
-        toggleRead
+        toggleRead,
+        format
       }
     },
     props: {