From 41f929d35207d16e3264e14795b8a10416db903b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Wed, 2 Feb 2022 18:30:07 +0100
Subject: [PATCH] [ui] add a last visited view

---
 webui/src/views/Home.svelte | 41 +++++++++++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/webui/src/views/Home.svelte b/webui/src/views/Home.svelte
index aa7b2e6..1515d34 100644
--- a/webui/src/views/Home.svelte
+++ b/webui/src/views/Home.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
   import { formatRelative, parseISO } from "date-fns";
+  import { last } from "lodash";
 
   import { Link } from "svelte-navigator";
   import { UpListing } from "upend";
   import type { IFile, ListingResult, VaultInfo } from "upend/types";
-import UpObjectCard from "../components/display/UpObjectCard.svelte";
-import Spinner from "../components/utils/Spinner.svelte";
+  import UpObject from "../components/display/UpObject.svelte";
+  import UpObjectCard from "../components/display/UpObjectCard.svelte";
+  import Spinner from "../components/utils/Spinner.svelte";
+  import { query } from "../lib/entity";
 
   let infoData: VaultInfo | undefined;
 
@@ -22,9 +25,19 @@ import Spinner from "../components/utils/Spinner.svelte";
     );
   })();
 
+  const { result: lastVisitedQuery } = query(
+    () => `(matches ? "LAST_VISITED" ? )`
+  );
+  $: lastVisited = ($lastVisitedQuery?.entries || [])
+    .filter((e) => e.value.t == "Number")
+    .sort((a, b) => (a.value.c as number) - (b.value.c as number))
+    .map((e) => [e.entity, e.value.c as number])
+    .slice(0, 25) as [string, number][];
+
   const latestFiles = (async () => {
     const response = await fetch("/api/files/latest");
-    return (await response.json()) as IFile[];
+    const files = (await response.json()) as IFile[];
+    return files.slice(0, 25);
   })();
 
   function fmtDate(dateString: string) {
@@ -55,6 +68,20 @@ import Spinner from "../components/utils/Spinner.svelte";
     {/await}
   </section>
 
+  {#if lastVisited.length > 0}
+    <section class="lastVisited">
+      <h2>Last visited</h2>
+      <table>
+        {#each lastVisited as [address, visited]}
+          <tr>
+            <td class="timestamp">{formatRelative(visited, new Date())}</td>
+            <td class="object"><UpObject link {address} /></td>
+          </tr>
+        {/each}
+      </table>
+    </section>
+  {/if}
+
   <section class="latest">
     <h2>Most recently added files</h2>
     {#await latestFiles}
@@ -63,7 +90,7 @@ import Spinner from "../components/utils/Spinner.svelte";
       <table>
         {#each data as file}
           <tr>
-            <td class="file-added">{fmtDate(file.added)}</td>
+            <td class="timestamp">{fmtDate(file.added)}</td>
             <td>
               <Link to="/browse/{file.hash}">
                 <div class="file-path">{file.path}</div>
@@ -82,18 +109,20 @@ import Spinner from "../components/utils/Spinner.svelte";
     text-align: center;
   }
 
-  .latest {
+  .latest,
+  .lastVisited {
     table {
       border-spacing: 1em 0.25em;
     }
 
-    .file-added {
+    .timestamp {
       opacity: 0.77;
       white-space: nowrap;
       text-align: center;
     }
   }
 
+
   .roots {
     ul {
       list-style: none;