[ui] split frequent/recent visited display on Home

webui/src/components/widgets/Table.svelte

@@ -160,6 +160,8 @@
           fromUnixTime(parseInt(String(value), 10)),
           new Date()
         );
+      case "NUM_VISITED":
+        return `${value} times`;
       default:
         return String(value);
     }

webui/src/lib/types.ts

@@ -91,7 +91,36 @@ const TYPE_WIDGETS: { [key: string]: Widget[] } = {
       ],
     },
   ],
-  HOME_VIEW: [
+  HOME_VIEW_SHORT: [
+    {
+      name: "list-table",
+      icon: "list-ul",
+      components: [
+        {
+          component: Table,
+          props: {
+            columns: "value, entity",
+            columnWidths: ["6em"],
+            orderByValue: true,
+            header: false,
+          },
+        },
+      ],
+    },
+    {
+      name: "gallery-view",
+      icon: "image",
+      components: [
+        {
+          component: Gallery,
+          props: {
+            showEntities: true,
+          },
+        },
+      ],
+    },
+  ],
+  HOME_VIEW_LONG: [
     {
       name: "list-table",
       icon: "list-ul",

webui/src/views/Home.svelte

@@ -19,43 +19,17 @@
       .sort(([_, i1], [__, i2]) => i1.localeCompare(i2));
   })();
 
-  const { result: frecencyQuery } = query(
-    `(matches ? (in "LAST_VISITED" "NUM_VISITED") ? )`
-  );
-  let frecent = [];
-  $: {
-    const entries = ($frecencyQuery?.entries || []).filter(
-      (e) => e.value.t == "Number"
-    );
+  const { result: recentQuery } = query(`(matches ? "LAST_VISITED" ?)`);
+  $: recent = ($recentQuery?.entries || [])
+    .filter((e) => e.value.t == "Number")
+    .sort((a, b) => (b.value.c as number) - (a.value.c as number))
+    .slice(0, 25);
 
-    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: frequentQuery } = query(`(matches ? "NUM_VISITED" ?)`);
+  $: frequent = ($frequentQuery?.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: latestQuery } = query(`(matches ? "ADDED" ?)`);
   $: latest = ($latestQuery?.entries || [])
@@ -63,8 +37,11 @@
     .sort((a, b) => (b.value.c as number) - (a.value.c as number))
     .slice(0, 25);
 
-  const HomeViewType = new UpType();
-  HomeViewType.name = "HOME_VIEW";
+  const HomeViewShortType = new UpType();
+  HomeViewShortType.name = "HOME_VIEW_SHORT";
+
+  const HomeViewLongType = new UpType();
+  HomeViewLongType.name = "HOME_VIEW_LONG";
 
   updateTitle("Home");
 </script>
@@ -91,20 +68,36 @@
     {/await}
   </section>
 
-  {#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={frecent}
-          type={HomeViewType}
-        />
-      {/if}
-    </section>
-  {/if}
+  <div class="frecent">
+    {#if frequent.length || $frequentQuery === undefined}
+      <section class="frequent">
+        <h2>Frequently visited</h2>
+        {#if $frequentQuery == undefined}
+          <Spinner centered />
+        {:else}
+          <AttributeView
+            --current-background="var(--background)"
+            entries={frequent}
+            type={HomeViewShortType}
+          />
+        {/if}
+      </section>
+    {/if}
+    {#if recent.length || $recentQuery === undefined}
+      <section class="recent">
+        <h2>Recently visited</h2>
+        {#if $recentQuery == undefined}
+          <Spinner centered />
+        {:else}
+          <AttributeView
+            --current-background="var(--background)"
+            entries={recent}
+            type={HomeViewLongType}
+          />
+        {/if}
+      </section>
+    {/if}
+  </div>
 
   {#if latest.length || $latestQuery === undefined}
     <section class="latest">
@@ -115,7 +108,7 @@
         <AttributeView
           --current-background="var(--background)"
           entries={latest}
-          type={HomeViewType}
+          type={HomeViewLongType}
         />
       {/if}
     </section>
@@ -154,6 +147,11 @@
     margin: 2rem;
   }
 
+  .frecent {
+    display: flex;
+    gap: 2rem;
+  }
+
   .roots {
     ul {
       list-style: none;