[ui] home page styling

ui/src/views/Home.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import { formatRelative, parseISO } from "date-fns";
+
   import { Link } from "svelte-navigator";
   import type { IFile, VaultInfo } from "upend/types";
-  
+
   let infoData: VaultInfo | undefined;
   let latestFiles: IFile[] = [];
 
@@ -12,51 +14,51 @@
   fetch("/api/files/latest").then(async (response) => {
     latestFiles = await response.json();
   });
+
+  function fmtDate(dateString: string) {
+    const date = parseISO(dateString);
+    return formatRelative(date, new Date());
+  }
 </script>
 
 <div class="home">
   <h1>
-    Welcome to <em> "{infoData?.name || "UpEnd"}" </em>
+    {infoData?.name || "UpEnd"}
   </h1>
+  
   {#if latestFiles}
     <section class="latest">
       <h2>Most recently added files</h2>
-      <ul>
+      <table>
         {#each latestFiles as file}
-          <li>
-            <div class="file-added">{file.added}</div>
-            <Link to="/browse/{file.hash}">
-              <div class="file-path">{file.path}</div>
-            </Link>
-          </li>
+          <tr>
+            <td class="file-added">{fmtDate(file.added)}</td>
+            <td>
+              <Link to="/browse/{file.hash}">
+                <div class="file-path">{file.path}</div>
+              </Link>
+            </td>
+          </tr>
         {/each}
-      </ul>
+      </table>
     </section>
   {/if}
 </div>
 
 <style lang="scss">
-  h1 {
+  h1,
+  h2 {
     text-align: center;
-    font-weight: normal;
   }
 
-    .latest {
-      ul {
-        list-style: none;
-        padding: 0;
-      }
-
-      li {
-        display: flex;
-
-        & > * {
-          margin: 0.1em 0.25em;
-        }
-      }
-
-      .file-added {
-        opacity: 0.77;
-      }
+  .latest {
+    table {
+      border-spacing: 1em .25em;
     }
+
+    .file-added {
+      opacity: 0.77;
+      white-space: nowrap;
+    }
+  }
 </style>