[ui] refactor components to use addresses from context, not params

webui/src/components/Inspect.svelte

@@ -13,6 +13,9 @@
   import Selector from "./utils/Selector.svelte";
   import type { IValue } from "upend/types";
   import IconButton from "./utils/IconButton.svelte";
+  import type { BrowseContext } from "../util/browse";
+  import { useParams } from "svelte-navigator";
+  const params = useParams();
 
   export let address: string;
   export let index: number | undefined;
@@ -22,7 +25,13 @@
   let indexStore = writable(index);
   $: $indexStore = index;
 
-  setContext("browse", { index: indexStore });
+  let addressesStore = writable([]);
+  $: $addressesStore = $params.addresses?.split(",") || [];
+
+  setContext("browse", {
+    index: indexStore,
+    addresses: addressesStore,
+  } as BrowseContext);
 
   $: ({ entity, error, revalidate } = useEntity(address));
 

webui/src/components/display/UpLink.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { getContext } from "svelte";
 
-  import { useNavigate, useLocation, useParams } from "svelte-navigator";
-  import { readable, Writable } from "svelte/store";
+  import { useNavigate, useLocation } from "svelte-navigator";
+  import { readable } from "svelte/store";
   import type { Address, VALUE_TYPE } from "upend/types";
-  const params = useParams();
+  import type { BrowseContext } from "../../util/browse";
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -14,20 +14,18 @@
     value?: { t: VALUE_TYPE; c: string };
   };
 
-  const context = getContext("browse") as
-    | { index: Writable<number> }
-    | undefined;
-
+  const context = getContext("browse") as BrowseContext | undefined;
   const index = context ? context.index : readable(0);
+  const addresses = context ? context.addresses : readable([]);
 
   function onClick() {
     if (to.entity) {
       if ($location.pathname.startsWith("/browse")) {
-        let addresses = $params.addresses.split(",");
+        let newAddresses = $addresses.concat();
 
         const routerTo =
           "/browse/" +
-          addresses
+          newAddresses
             .slice(0, $index + 1)
             .concat([to.entity])
             .join(",");

webui/src/components/display/UpObject.svelte

@@ -5,13 +5,12 @@
   import Ellipsis from "../utils/Ellipsis.svelte";
   import UpLink from "./UpLink.svelte";
   import { useEntity } from "../../lib/entity";
-  import { Readable, readable } from "svelte/store";
+  import { readable } from "svelte/store";
   import { notify, UpNotification } from "../../notifications";
   import IconButton from "../utils/IconButton.svelte";
-  import { useParams } from "svelte-navigator";
   import { vaultInfo } from "../../util/info";
+  import type { BrowseContext } from "../../util/browse";
   const dispatch = createEventDispatcher();
-  const params = useParams();
 
   export let address: string;
   export let labels: string[] | undefined = undefined;
@@ -36,9 +35,9 @@
   $: dispatch("resolved", inferredIds);
 
   // Navigation highlights
-  const index =
-    (getContext("browse") as { index: Readable<number> })?.index || undefined;
-  $: addresses = $params.addresses?.split(",") || [];
+  const context = getContext("browse") as BrowseContext | undefined;
+  const index = context?.index || undefined;
+  const addresses = context?.addresses || readable([]);
 
   // Native open
   function nativeOpen() {
@@ -81,8 +80,8 @@
 
 <div
   class="upobject"
-  class:left-active={address == addresses[$index - 1]}
-  class:right-active={address == addresses[$index + 1]}
+  class:left-active={address == $addresses[$index - 1]}
+  class:right-active={address == $addresses[$index + 1]}
 >
   <div class="address" class:identified={Boolean(inferredIds)} class:banner>
     <HashBadge {address} />

webui/src/util/browse.ts

@@ -0,0 +1,6 @@
+import type { Readable } from "svelte/store";
+
+export interface BrowseContext {
+  index: Readable<number>;
+  addresses: Readable<string[]>;
+}