From 50aa34ef610a0299f3cb4badeeb1795cad0e0fee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sun, 20 Mar 2022 16:43:50 +0100
Subject: [PATCH] [ui] scroll detail-mode columns into view

---
 webui/src/components/BrowseColumn.svelte |  3 +-
 webui/src/views/Browse.svelte            | 42 ++++++++++++++++--------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/webui/src/components/BrowseColumn.svelte b/webui/src/components/BrowseColumn.svelte
index 39fc662..87ee9e6 100644
--- a/webui/src/components/BrowseColumn.svelte
+++ b/webui/src/components/BrowseColumn.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, tick } from "svelte";
   import { normUrl } from "../util/history";
 
   import Inspect from "./Inspect.svelte";
@@ -14,6 +14,7 @@
   let detail = only;
   let detailChanged = false;
   $: if (!detailChanged) detail = only;
+  $: if (detailChanged) tick().then(() => dispatch("detail", detail));
 
   function visit() {
     window.open(normUrl(`/browse/${address}`), "_blank");
diff --git a/webui/src/views/Browse.svelte b/webui/src/views/Browse.svelte
index 4784d61..0f9faab 100644
--- a/webui/src/views/Browse.svelte
+++ b/webui/src/views/Browse.svelte
@@ -19,13 +19,20 @@
     }
   }
 
-  $: {
-    addresses;
+  $: scrollToVisible(addresses.length - 1);
 
-    root?.scrollTo({
-      left: root.scrollWidth,
-      behavior: "smooth",
-    });
+  function scrollToVisible(idx: number) {
+    console.log(`Scrolling to ${idx}`);
+    const target = root?.querySelector(
+      `[data-index='${idx}']`
+    )?.firstElementChild as HTMLElement;
+
+    if (target) {
+      root?.scrollTo({
+        left: target.offsetLeft,
+        behavior: "smooth",
+      });
+    }
   }
 
   function onIdentified(index: number, ev: CustomEvent<string[]>) {
@@ -43,17 +50,20 @@
 
 <div class="browser" bind:this={root}>
   {#each addresses as address, index}
-    <BrowseColumn
-      {address}
-      {index}
-      only={addresses.length === 1}
-      on:close={() => close(index)}
-      on:resolved={(ev) => onIdentified(index, ev)}
-    />
+    <div class="column" data-index={index}>
+      <BrowseColumn
+        {address}
+        {index}
+        only={addresses.length === 1}
+        on:close={() => close(index)}
+        on:resolved={(ev) => onIdentified(index, ev)}
+        on:detail={(ev) => ev.detail && scrollToVisible(index)}
+      />
+    </div>
   {/each}
 </div>
 
-<style scoped lang="scss">
+<style lang="scss">
   .browser {
     display: flex;
     overflow-x: auto;
@@ -65,4 +75,8 @@
     margin-top: 1rem;
     margin-bottom: var(--footer-height);
   }
+
+  .column {
+    display: contents;
+  }
 </style>