[ui] exact hits in search

webui/src/views/Search.svelte

@@ -6,7 +6,6 @@
   import Spinner from "../components/utils/Spinner.svelte";
   import UpEntryDisplay from "../components/display/UpEntry.svelte";
   import UpObjectDisplay from "../components/display/UpObject.svelte";
-  import { useResolve } from "svelte-navigator";
   import UpObjectCard from "../components/display/UpObjectCard.svelte";
   export let query: string;
 
@@ -29,6 +28,7 @@
   );
 
   async function getObjects(entries: UpEntry[]): Promise<string[]> {
+    exactHits.length = 0;
     const labelled = entries
       .filter((e) => e.attribute == "LBL")
       .map((e) => e.entity);
@@ -40,9 +40,20 @@
       });
     return labelled.concat(await Promise.all(aliased));
   }
-  $: objects = getObjects($result?.entries || []);
 
-  $: exact = [];
+  $: objects = getObjects($result?.entries || []);
+  let exactHits = [];
+
+  function onResolved(address: string, ids: string[]) {
+    console.log({ address, ids });
+
+    if (ids.some((id) => id.toLowerCase() === query.toLowerCase())) {
+      if (!exactHits.includes(address)) {
+        exactHits.push(address);
+        exactHits = exactHits;
+      }
+    }
+  }
 </script>
 
 <div>
@@ -50,10 +61,17 @@
     {#if $result}
       <section class="exact">
         <h2>Exact</h2>
-        {#if exact.length}
-          exakt
+        {#if exactHits.length}
+          <ul>
+            {#each exactHits as address}
+              <li>
+                <UpObjectCard {address} --width="100%" --height="100%" />
+              </li>
+            {/each}
+          </ul>
         {:else}
-          Create?
+          <div class="create">Create?</div>
+          <div class="create" />
         {/if}
       </section>
 
@@ -65,7 +83,10 @@
           <ul>
             {#each objects as address}
               <li>
-                <UpObjectCard {address} --width="100%" --height="100%" />
+                <UpObjectDisplay
+                  {address}
+                  on:resolved={(ids) => onResolved(address, ids.detail)}
+                />
               </li>
             {/each}
           </ul>
@@ -107,12 +128,12 @@
     padding: 0;
   }
 
-  .objects {
+  .exact {
     ul {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
+      display: flex;
       gap: 1rem;
-      justify-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
 
       margin: 0 1rem;
     }
@@ -121,6 +142,17 @@
       width: 14rem;
       height: 8rem;
     }
+
+    .create {
+      text-align: center;
+    }
+  }
+
+  .objects {
+    li {
+      margin: 0.5em auto;
+      max-width: 66em;
+    }
   }
 
   .raw {