[ui] show latest ADDED

webui/src/views/Home.svelte

@@ -26,16 +26,12 @@
     .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");
-    const files = (await response.json()) as IFile[];
-    return files.slice(0, 25);
-  })();
-
-  function fmtDate(dateString: string) {
-    const date = parseISO(dateString);
-    return formatRelative(date, new Date());
-  }
+  const { result: latestQuery } = query(`(matches ? "ADDED" ?)`);
+  $: latest = ($latestQuery?.entries || [])
+    .filter((e) => e.value.t == "Number")
+    .sort((a, b) => (b.value.c as number) - (a.value.c as number))
+    .map((e) => [e.entity, e.value.c as number])
+    .slice(0, 25) as [string, number][];
 
   updateTitle("Home");
 </script>
@@ -79,23 +75,15 @@
   {/if}
 
   <section class="latest">
-    <h2>Most recently added files</h2>
-    {#await latestFiles}
-      <Spinner centered />
-    {:then data}
-      <table>
-        {#each data as file}
-          <tr>
-            <td class="timestamp">{fmtDate(file.added)}</td>
-            <td>
-              <Link to="/browse/{file.hash}">
-                <div class="file-path">{file.path}</div>
-              </Link>
-            </td>
-          </tr>
-        {/each}
-      </table>
-    {/await}
+    <h2>Most recently added</h2>
+    <table>
+      {#each latest as [address, added]}
+        <tr>
+          <td class="timestamp">{formatRelative(added * 1000, new Date())}</td>
+          <td class="object"><UpObject link {address} /></td>
+        </tr>
+      {/each}
+    </table>
   </section>
 
   <footer>