fix: use Gallery in Search, order by match order

webui/src/components/widgets/Gallery.svelte

@@ -11,13 +11,15 @@
   export let thumbnails = true;
   export let sort = true;
 
+  const deduplicatedEntities = Array.from(new Set(entities));
+
   let style: "list" | "grid" | "flex" = "grid";
 
   let clientWidth: number;
-  $: style = clientWidth < 600 ? "list" : "grid";
+  $: style = !thumbnails || clientWidth < 600 ? "list" : "grid";
 
   // Sorting
-  let sortedEntities = entities;
+  let sortedEntities = deduplicatedEntities || [];
 
   let sortKeys: { [key: string]: string[] } = {};
   function addSortKeys(key: string, vals: string[], resort = true) {
@@ -39,7 +41,7 @@
   let labelListing: Readable<UpListing> = readable(undefined);
   $: {
     const addresses = [];
-    entities.forEach((addr) => {
+    deduplicatedEntities.forEach((addr) => {
       if (!addresses.includes(addr)) {
         addresses.push(addr);
       }
@@ -53,7 +55,7 @@
   function sortAttributes() {
     if (!sort) return;
 
-    sortedEntities = entities.concat();
+    sortedEntities = deduplicatedEntities.concat();
 
     sortedEntities.sort((a, b) => {
       if (!sortKeys[a]?.length || !sortKeys[b]?.length) {
@@ -74,7 +76,7 @@
 
   $: {
     if ($labelListing) {
-      entities.forEach((address) => {
+      deduplicatedEntities.forEach((address) => {
         addSortKeys(address, $labelListing.getObject(address).identify());
       });
       sortAttributes();

webui/src/views/Search.svelte

@@ -14,6 +14,7 @@
   import EntryList from "../components/widgets/EntryList.svelte";
   import Gallery from "../components/widgets/Gallery.svelte";
   import type { Widget } from "src/lib/types";
+  import { matchSorter } from "match-sorter";
   const navigate = useNavigate();
 
   export let query: string;
@@ -37,6 +38,9 @@
   }
 
   $: objects = ($result?.entries || []).filter((e) => e.attribute === "LBL");
+  $: sortedObjects = matchSorter(objects, debouncedQuery, {
+    keys: ["value.c"],
+  });
 
   let exactHits: string[] = [];
   $: {
@@ -67,11 +71,13 @@
       icon: "list-ul",
       components: [
         {
-          component: EntryList,
-          props: {
-            columns: "entity",
-            orderByValue: true,
-            header: false,
+          component: Gallery,
+          props: (entries) => {
+            return {
+              entities: entries.map((e) => e.entity),
+              sort: false,
+              thumbnails: false,
+            };
           },
         },
       ],
@@ -85,6 +91,8 @@
           props: (entries) => {
             return {
               entities: entries.map((e) => e.entity),
+              sort: false,
+              thumbnails: true,
             };
           },
         },
@@ -115,19 +123,14 @@
     {/if}
     {#if $result}
       <section class="objects">
-        {#await objects}
+        {#if sortedObjects.length}
           <h2>Objects</h2>
-          <Spinner centered />
-        {:then objects}
-          {#if objects.length}
-            <h2>Objects</h2>
-            <AttributeView
-              --current-background="var(--background)"
-              entries={objects}
-              widgets={searchWidgets}
-            />
-          {/if}
-        {/await}
+          <AttributeView
+            --current-background="var(--background)"
+            entries={sortedObjects}
+            widgets={searchWidgets}
+          />
+        {/if}
       </section>
 
       <section class="raw">