[ui] dynamic page title

webui/src/components/Inspect.svelte

@@ -4,7 +4,7 @@
   import UpObject from "./display/UpObject.svelte";
   import { UpType } from "../lib/types";
   import BlobPreview from "./display/BlobPreview.svelte";
-  import { onMount, setContext } from "svelte";
+  import { createEventDispatcher, onMount, setContext } from "svelte";
   import { writable } from "svelte/store";
   import type { UpEntry } from "upend";
   import Spinner from "./utils/Spinner.svelte";
@@ -175,7 +175,7 @@
   <header>
     <h2>
       {#if $entity}
-        <UpObject banner {address} />
+        <UpObject banner {address} on:resolved />
       {:else}
         <Spinner />
       {/if}

webui/src/util/title.ts

@@ -0,0 +1,10 @@
+export function updateTitle(route?: string, title?: string) {
+  let newTitle = "UpEnd";
+  if (route?.length) {
+    newTitle += ` | ${route}`;
+  }
+  if (title?.length) {
+    newTitle += ` - ${title}`;
+  }
+  document.title = newTitle;
+}

webui/src/views/Browse.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import { useNavigate, useParams } from "svelte-navigator";
   import Inspect from "../components/Inspect.svelte";
-import IconButton from "../components/utils/IconButton.svelte";
+  import IconButton from "../components/utils/IconButton.svelte";
   import { normUrl as normURL } from "../util/history";
+  import { updateTitle } from "../util/title";
   const navigate = useNavigate();
   const params = useParams();
 
   let root: HTMLDivElement;
   let editable: boolean[] = [];
+  let identities: string[] = [];
   $: addresses = $params.addresses.split(",");
 
   function visit(idx: number) {
@@ -28,6 +30,18 @@ import IconButton from "../components/utils/IconButton.svelte";
       behavior: "smooth",
     });
   }
+
+  function onIdentified(index: number, ev: CustomEvent<string[]>) {
+    for (let i = 0; i < addresses.length; i++) {
+      if (!identities[i]) {
+        identities[i] = "?";
+      }
+      identities[index] = ev.detail.join("/");
+    }
+    identities = identities;
+  }
+
+  $: updateTitle("Browse", identities.join(" / "));
 </script>
 
 <div class="browser" bind:this={root}>
@@ -49,7 +63,12 @@ import IconButton from "../components/utils/IconButton.svelte";
           disabled={addresses.length === 1}
         />
       </header>
-      <Inspect {address} editable={editable[index] || false} {index} />
+      <Inspect
+        {address}
+        editable={editable[index] || false}
+        {index}
+        on:resolved={(ev) => onIdentified(index, ev)}
+      />
     </div>
   {/each}
 </div>
@@ -77,7 +96,7 @@ import IconButton from "../components/utils/IconButton.svelte";
     background: var(--background-lighter);
     color: var(--foreground-lighter);
     border: 1px solid var(--foreground-lightest);
-    border-radius: .5em;
+    border-radius: 0.5em;
     padding: 1rem;
 
     header {

webui/src/views/Home.svelte

@@ -8,6 +8,7 @@
   import Spinner from "../components/utils/Spinner.svelte";
   import { query } from "../lib/entity";
   import { vaultInfo } from "../util/info";
+  import { updateTitle } from "../util/title";
 
   const roots = (async () => {
     const response = await fetch("/api/hier_roots");
@@ -37,6 +38,8 @@
     const date = parseISO(dateString);
     return formatRelative(date, new Date());
   }
+
+  updateTitle("Home");
 </script>
 
 <div class="home">

webui/src/views/Search.svelte

@@ -8,6 +8,7 @@
   import UpObjectCard from "../components/display/UpObjectCard.svelte";
   import { useNavigate } from "svelte-navigator";
   import { baseSearch, createLabelled, getObjects } from "../util/search";
+  import { updateTitle } from "../util/title";
   const navigate = useNavigate();
 
   export let query: string;
@@ -41,6 +42,8 @@
     const createdAddress = await createLabelled(query);
     navigate(`/browse/${createdAddress}`);
   }
+
+  $: updateTitle("Search", query);
 </script>
 
 <div>