[ui] rudimentary frecency display on Home

webui/src/views/Home.svelte

@@ -19,11 +19,43 @@
       .sort(([_, i1], [__, i2]) => i1.localeCompare(i2));
   })();
 
-  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))
-    .slice(0, 25);
+  const { result: frecencyQuery } = query(
+    `(matches ? (in "LAST_VISITED" "NUM_VISITED") ? )`
+  );
+  let frecent = [];
+  $: {
+    const entries = ($frecencyQuery?.entries || []).filter(
+      (e) => e.value.t == "Number"
+    );
+
+    const recentEntities = entries
+      .filter((e) => e.attribute == "LAST_VISITED")
+      .sort((a, b) => (b.value.c as number) - (a.value.c as number))
+      .map((e) => e.entity);
+
+    const frequentEntities = entries
+      .filter((e) => e.attribute == "NUM_VISITED")
+      .sort((a, b) => (b.value.c as number) - (a.value.c as number))
+      .map((e) => e.entity);
+
+    function indexOfDefault<T>(arr: T[], el: T, _default: number): number {
+      const index = arr.indexOf(el);
+      return index === -1 ? _default : index;
+    }
+
+    const result = entries.filter((e) => e.attribute == "LAST_VISITED");
+    result.sort((a, b) => {
+      const aRank =
+        indexOfDefault(recentEntities, a.entity, 9999) +
+        indexOfDefault(frequentEntities, a.entity, 9999);
+      const bRank =
+        indexOfDefault(recentEntities, b.entity, 9999) +
+        indexOfDefault(frequentEntities, b.entity, 9999);
+      return aRank - bRank;
+    });
+
+    frecent = result.slice(0, 25);
+  }
 
   const { result: latestQuery } = query(`(matches ? "ADDED" ?)`);
   $: latest = ($latestQuery?.entries || [])
@@ -59,15 +91,15 @@
     {/await}
   </section>
 
-  {#if lastVisited.length || $lastVisitedQuery === undefined}
-    <section class="lastVisited">
-      <h2>Last visited</h2>
-      {#if $lastVisitedQuery == undefined}
+  {#if frecent.length || $frecencyQuery === undefined}
+    <section class="frecent">
+      <h2>Frequently or recently visited</h2>
+      {#if $frecencyQuery == undefined}
         <Spinner centered />
       {:else}
         <AttributeView
           --current-background="var(--background)"
-          entries={lastVisited}
+          entries={frecent}
           type={HomeViewType}
         />
       {/if}
@@ -111,14 +143,14 @@
     display: flex;
     flex-direction: column;
   }
-  
+
   h1,
   h2 {
     text-align: center;
   }
 
   .latest,
-  .lastVisited {
+  .frecent {
     margin: 2rem;
   }