[ui] use Table on Home view

webui/src/components/widgets/Table.svelte

@@ -12,11 +12,12 @@
   import Editable from "../utils/Editable.svelte";
   import { query } from "../../lib/entity";
   import { Readable, readable } from "svelte/store";
-  import { defaultEntitySort } from "../../util/sort";
+  import { defaultEntitySort, entityValueSort } from "../../util/sort";
   const dispatch = createEventDispatcher();
 
   export let columns: string;
   export let header = true;
+  export let orderByValue = false;
 
   export let entries: UpEntry[];
   export let editable = false;
@@ -100,7 +101,9 @@
   }
 
   function sortAttributes() {
-    sortedAttributes = defaultEntitySort(entries, sortKeys);
+    sortedAttributes = orderByValue
+      ? entityValueSort(entries, sortKeys)
+      : defaultEntitySort(entries, sortKeys);
   }
 
   $: {

webui/src/views/Home.svelte

@@ -5,6 +5,7 @@
   import UpObject from "../components/display/UpObject.svelte";
   import UpObjectCard from "../components/display/UpObjectCard.svelte";
   import Spinner from "../components/utils/Spinner.svelte";
+  import Table from "../components/widgets/Table.svelte";
   import { query } from "../lib/entity";
   import { vaultInfo } from "../util/info";
   import { updateTitle } from "../util/title";
@@ -19,18 +20,10 @@
   })();
 
   const { result: lastVisitedQuery } = query(`(matches ? "LAST_VISITED" ? )`);
-  $: lastVisited = ($lastVisitedQuery?.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][];
+  $: lastVisited = ($lastVisitedQuery?.entries || []).slice(0, 25);
 
   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][];
+  $: latest = ($latestQuery?.entries || []).slice(0, 25);
 
   updateTitle("Home");
 </script>
@@ -63,16 +56,7 @@
       {#if $lastVisitedQuery == undefined}
         <Spinner centered />
       {:else}
-        <table>
-          {#each lastVisited as [address, visited]}
-            <tr>
-              <td class="timestamp"
-                >{formatRelative(visited * 1000, new Date())}</td
-              >
-              <td class="object"><UpObject link {address} /></td>
-            </tr>
-          {/each}
-        </table>
+        <Table columns="value, entity" entries={lastVisited} orderByValue />
       {/if}
     </section>
   {/if}
@@ -83,16 +67,7 @@
       {#if $latestQuery == undefined}
         <Spinner centered />
       {:else}
-        <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>
+        <Table columns="value, entity" entries={latest} orderByValue />
       {/if}
     </section>
   {/if}
@@ -118,15 +93,7 @@
 
   .latest,
   .lastVisited {
-    table {
-      border-spacing: 1em 0.25em;
-    }
-
-    .timestamp {
-      opacity: 0.77;
-      white-space: nowrap;
-      text-align: center;
-    }
+    margin: 1rem;
   }
 
   .roots {