From c15052656a0e188921aaaf3ae1dfa4f17d9dedbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sun, 22 Oct 2023 21:03:51 +0200
Subject: [PATCH] fix(webui): make non-inspect columns play nice with index
 context

---
 webui/src/components/BrowseColumn.svelte | 19 ++++++++++--
 webui/src/components/Inspect.svelte      | 24 ++++-----------
 webui/src/views/Browse.svelte            | 38 ++++++++++++++----------
 3 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/webui/src/components/BrowseColumn.svelte b/webui/src/components/BrowseColumn.svelte
index d22fa4f..6b55d49 100644
--- a/webui/src/components/BrowseColumn.svelte
+++ b/webui/src/components/BrowseColumn.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount, tick } from "svelte";
+  import { createEventDispatcher, onMount, setContext, tick } from "svelte";
   import { normUrl } from "../util/history";
-
   import IconButton from "./utils/IconButton.svelte";
   import { selected } from "./EntitySelect.svelte";
+  import type { BrowseContext } from "../util/browse";
+  import { writable } from "svelte/store";
+  import { useParams } from "svelte-navigator";
   const dispatch = createEventDispatcher();
+  const params = useParams();
 
   export let address: string | undefined = undefined;
+  export let index: number;
   export let only: boolean;
 
   let detail = only;
@@ -14,6 +18,17 @@
   $: if (!detailChanged) detail = only;
   $: if (detailChanged) tick().then(() => dispatch("detail", detail));
 
+  let indexStore = writable(index);
+  $: $indexStore = index;
+
+  let addressesStore = writable([]);
+  $: $addressesStore = $params.addresses?.split(",") || [];
+
+  setContext("browse", {
+    index: indexStore,
+    addresses: addressesStore,
+  } as BrowseContext);
+
   onMount(() => {
     // Required to make detail mode detection work in Browse
     dispatch("detail", detail);
diff --git a/webui/src/components/Inspect.svelte b/webui/src/components/Inspect.svelte
index 5a22589..f27663f 100644
--- a/webui/src/components/Inspect.svelte
+++ b/webui/src/components/Inspect.svelte
@@ -2,16 +2,15 @@
   import EntryView, { type Widget } from "./EntryView.svelte";
   import { useEntity } from "../lib/entity";
   import UpObject from "./display/UpObject.svelte";
-  import { createEventDispatcher, setContext } from "svelte";
-  import { derived, writable, type Readable } from "svelte/store";
+  import { createEventDispatcher } from "svelte";
+  import { derived, type Readable } from "svelte/store";
   import type { UpEntry } from "@upnd/upend";
   import Spinner from "./utils/Spinner.svelte";
   import NotesEditor from "./utils/NotesEditor.svelte";
   import type { WidgetChange } from "../types/base";
   import type { EntityInfo } from "@upnd/upend/types";
   import IconButton from "./utils/IconButton.svelte";
-  import type { BrowseContext } from "../util/browse";
-  import { Link, useParams } from "svelte-navigator";
+  import { Link } from "svelte-navigator";
   import BlobViewer from "./display/BlobViewer.svelte";
   import { i18n } from "../i18n";
   import EntryList from "./widgets/EntryList.svelte";
@@ -30,27 +29,14 @@
   const dbg = debug("kestrel:Inspect");
 
   const dispatch = createEventDispatcher();
-  const params = useParams();
 
   export let address: string;
-  export let index: number | undefined;
   export let detail: boolean;
   let showAsEntries = false;
   let highlightedType: string | undefined;
 
   let blobHandled = false;
 
-  let indexStore = writable(index);
-  $: $indexStore = index;
-
-  let addressesStore = writable([]);
-  $: $addressesStore = $params.addresses?.split(",") || [];
-
-  setContext("browse", {
-    index: indexStore,
-    addresses: addressesStore,
-  } as BrowseContext);
-
   $: ({ entity, entityInfo, error, revalidate } = useEntity(address));
 
   $: allTypes = derived(
@@ -364,7 +350,9 @@
   class="inspect"
   class:detail
   class:blob={blobHandled}
-  data-address-multi={($entity?.attr["~IN"]?.map((e) => e.entity) || []).join(",")}
+  data-address-multi={($entity?.attr["~IN"]?.map((e) => e.entity) || []).join(
+    ",",
+  )}
 >
   <header>
     <h2>
diff --git a/webui/src/views/Browse.svelte b/webui/src/views/Browse.svelte
index 9696f05..cbb0252 100644
--- a/webui/src/views/Browse.svelte
+++ b/webui/src/views/Browse.svelte
@@ -55,10 +55,7 @@
   }
 
   let detailMode = false;
-  function onDetailChanged(
-    index: number | "selected",
-    ev: CustomEvent<boolean>,
-  ) {
+  function onDetailChanged(index: number, ev: CustomEvent<boolean>) {
     if (ev.detail) {
       scrollToVisible(index);
     }
@@ -66,6 +63,12 @@
   }
   $: only = addresses.length === 1 && !$selected.length;
 
+  $: if ($selected.length && !addresses.includes("selected")) {
+    let _addresses = addresses.concat();
+    _addresses.push("selected");
+    navigate(`/browse/${_addresses.join(",")}`);
+  }
+
   function addCombine(address: string) {
     let _addresses = addresses.concat();
     _addresses.push(`+${address}`);
@@ -84,15 +87,29 @@
     <div class="column" data-index={index}>
       {#if ["+", "-"].some((c) => address.includes(c))}
         <BrowseColumn
+          {index}
           {only}
           on:close={() => close(index)}
           on:detail={(ev) => onDetailChanged(index, ev)}
         >
           <CombineColumn spec={address} on:close={() => close(index)} />
         </BrowseColumn>
+      {:else if address === "selected"}
+        <BrowseColumn
+          {index}
+          {only}
+          on:close={() => {
+            selected.set([]);
+            close(index);
+          }}
+          on:detail={(ev) => onDetailChanged(index, ev)}
+        >
+          <SelectedColumn />
+        </BrowseColumn>
       {:else}
         <BrowseColumn
           {address}
+          {index}
           {only}
           on:close={() => close(index)}
           on:resolved={(ev) => onIdentified(index, ev)}
@@ -100,22 +117,11 @@
           on:combine={() => addCombine(address)}
           let:detail
         >
-          <Inspect {address} {index} {detail} on:resolved on:close />
+          <Inspect {address} {detail} on:resolved on:close />
         </BrowseColumn>
       {/if}
     </div>
   {/each}
-  {#if $selected.length}
-    <div class="column" data-index="selected">
-      <BrowseColumn
-        {only}
-        on:close={() => selected.set([])}
-        on:detail={(ev) => onDetailChanged("selected", ev)}
-      >
-        <SelectedColumn />
-      </BrowseColumn>
-    </div>
-  {/if}
   {#if !detailMode}
     {#key addresses}
       <div class="column" data-index="add">