[ui] add creation from Search

webui/src/views/Search.svelte

@@ -7,6 +7,10 @@
   import UpEntryDisplay from "../components/display/UpEntry.svelte";
   import UpObjectDisplay from "../components/display/UpObject.svelte";
   import UpObjectCard from "../components/display/UpObjectCard.svelte";
+  import { useNavigate } from "svelte-navigator";
+  import type { ListingResult } from "upend/types";
+  const navigate = useNavigate();
+
   export let query: string;
 
   let debouncedQuery = "";
@@ -54,6 +58,26 @@
       }
     }
   }
+
+  async function create() {
+    const response = await fetch(`/api/obj`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        attribute: "LBL",
+        value: {
+          t: "Value",
+          c: query,
+        },
+      }),
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to create object: ${await response.text()}`);
+    }
+    const result = (await response.json()) as ListingResult;
+    const address = Object.values(result)[0].entity;
+    navigate(`/browse/${address}`);
+  }
 </script>
 
 <div>
@@ -70,48 +94,53 @@
             {/each}
           </ul>
         {:else}
-          <div class="create">Create?</div>
+          <div class="create">
-          <div class="create" />
+            <p>Create new object?</p>
+            <button class="create-object" on:click={create}>"{query}"</button>
+          </div>
         {/if}
       </section>
 
       <section class="objects">
-        <h2>Objects</h2>
         {#await objects}
+          <h2>Objects</h2>
           <Spinner />
         {:then objects}
-          <ul>
+          {#if objects.length}
-            {#each objects as address}
+            <h2>Objects</h2>
-              <li>
+            <ul>
-                <UpObjectDisplay
+              {#each objects as address}
-                  {address}
+                <li>
-                  on:resolved={(ids) => onResolved(address, ids.detail)}
+                  <UpObjectDisplay
-                />
+                    {address}
-              </li>
+                    on:resolved={(ids) => onResolved(address, ids.detail)}
-            {/each}
+                  />
-          </ul>
+                </li>
+              {/each}
+            </ul>
+          {/if}
         {/await}
       </section>
 
-      {#if entries.length}
+      <section class="raw">
-        <section class="raw">
+        {#if entries.length}
           <h2>Raw results</h2>
           <ul>
             {#each entries as entry}
               <li><UpEntryDisplay {entry} /></li>
             {/each}
           </ul>
-        </section>
+        {:else}
-      {:else}
+          <div class="global">No results found.</div>
-        <div class="global">No results found.</div>
+        {/if}
-      {/if}
+      </section>
     {:else}
       <div class="global">
         <Spinner />
       </div>
     {/if}
   {:else}
-    <div class="error">
+    <div class="error global">
       {$error}
     </div>
   {/if}
@@ -146,6 +175,17 @@
     .create {
       text-align: center;
     }
+
+    .create-object {
+      display: inline-block;
+      color: var(--foreground);
+      background: var(--background-lighter);
+      border: 1px solid var(--foreground);
+      border-radius: 4px;
+      padding: 0.2em;
+      font-size: 1.25em;
+      cursor: pointer;
+    }
   }
 
   .objects {