[ui] navigating from the middle replaces browsing on the right

ui/src/components/Inspect.svelte

@@ -5,10 +5,18 @@
   import { UpType } from "../lib/types";
   import type { IEntry } from "upend/types";
   import BlobPreview from "./BlobPreview.svelte";
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
 
   export let address: string;
+  export let index: number | undefined;
   export let editable = false;
 
+  let indexStore = writable(index);
+  $: $indexStore = index;
+
+  setContext("browse", { index: indexStore });
+
   const { error, revalidate, attributes, backlinks } = useEntity(address);
 
   $: allTypeAddresses = $attributes

ui/src/components/UpLink.svelte

@@ -1,20 +1,31 @@
 <script lang="ts">
-  import { Link, useLocation } from "svelte-navigator";
-  import type { Address, VALUE_TYPE } from "upend/types";
-  export let to: IPointer;
+  import { getContext } from "svelte";
 
-  interface IPointer {
+  import { Link, useLocation, useParams } from "svelte-navigator";
+  import type { Writable } from "svelte/store";
+  import type { Address, VALUE_TYPE } from "upend/types";
+  const params = useParams();
+  const location = useLocation();
+
+  export let to: {
     entity?: Address;
     attribute?: string;
     value?: { t: VALUE_TYPE; c: string };
-  }
+  };
 
-  const location = useLocation();
+  const { index } = getContext("browse") as { index: Writable<number> };
 
   let routerTo = "#";
   $: {
     if ($location.pathname.startsWith("/browse") && to.entity) {
-      routerTo = `${$location.pathname},${to.entity}`;
+      let addresses = $params.addresses.split(",");
+
+      routerTo =
+        "/browse/" +
+        addresses
+          .slice(0, $index + 1)
+          .concat([to.entity])
+          .join(",");
     }
   }
 </script>

ui/src/views/Browse.svelte

@@ -29,28 +29,28 @@
 </script>
 
 <div class="browser" bind:this={root}>
-  {#each addresses as address, idx (address)}
+  {#each addresses as address, index (address)}
     <div class="view" data-address={address}>
       <header>
         <sl-icon-button
           class="edit-button"
           name="pencil"
-          on:click={() => (editable[idx] = !editable[idx])}
+          on:click={() => (editable[index] = !editable[index])}
         />
         <sl-icon-button
           class="this-button"
           name="bookmark"
-          on:click={visit(idx)}
+          on:click={visit(index)}
           :disabled="addresses.length === 1"
         />
         <sl-icon-button
           class="close-button"
           name="x-circle"
-          on:click={close(idx)}
+          on:click={close(index)}
           disabled={addresses.length === 1}
         />
       </header>
-      <Inspect {address} editable={editable[idx] || false} />
+      <Inspect {address} editable={editable[index] || false} {index} />
     </div>
   {/each}
 </div>