home latest files tweaks

ui/src/views/Home.vue

@@ -4,15 +4,20 @@
       Welcome to
       <em v-if="infoData?.name"> "{{ infoData.name }}" </em>
       <template v-else> UpEnd </template>
-      !
     </h1>
-    <ul v-if="latestFiles">
-      <li v-for="file in latestFiles" :key="file.hash">
-        <router-link :to="{ name: 'inspect', params: { address: file.hash } }">
-          <span class="file-path">{{ file.path }}</span>
-        </router-link>
-      </li>
-    </ul>
+    <section class="latest" v-if="latestFiles">
+      <h2>Most recently added files</h2>
+      <ul>
+        <li v-for="file in latestFiles" :key="file.hash">
+          <div class="file-added">{{ file.added }}</div>
+          <router-link
+            :to="{ name: 'inspect', params: { address: file.hash } }"
+          >
+            <div class="file-path">{{ file.path }}</div>
+          </router-link>
+        </li>
+      </ul>
+    </section>
   </div>
 </template>
 
@@ -21,7 +26,7 @@ import { IFile, VaultInfo } from "@/types/base";
 import useSWRV from "swrv";
 import { computed, defineComponent } from "vue";
 import { fetcher } from "../utils";
-import { parseISO } from "date-fns";
+import { formatRelative, parseISO } from "date-fns";
 
 export default defineComponent({
   name: "Home",
@@ -42,7 +47,7 @@ export default defineComponent({
         return latestFilesRaw.value.map((file) => {
           return {
             ...file,
-            added: parseISO(file.added),
+            added: formatRelative(parseISO(file.added), new Date()),
             mtime: parseISO(file.added),
           };
         });
@@ -62,4 +67,23 @@ h1 {
   text-align: center;
   font-weight: normal;
 }
+
+.latest {
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    display: flex;
+
+    & > * {
+      margin: .1em .25em;
+    }
+  }
+
+  .file-added {
+    opacity: .77;
+  }
+}
 </style>