From 46f8f38ac8681ff011df70f549cbba29a467f415 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Tue, 22 Mar 2022 21:54:46 +0100
Subject: [PATCH] [ui] add a button for adding column to current selection

also add `focus()` method to Selector/Input
---
 webui/src/components/BrowseAdd.svelte      | 78 ++++++++++++++++++++++
 webui/src/components/BrowseColumn.svelte   |  7 +-
 webui/src/components/utils/Input.svelte    |  6 ++
 webui/src/components/utils/Selector.svelte |  8 ++-
 webui/src/views/Browse.svelte              | 35 ++++++++--
 5 files changed, 126 insertions(+), 8 deletions(-)
 create mode 100644 webui/src/components/BrowseAdd.svelte

diff --git a/webui/src/components/BrowseAdd.svelte b/webui/src/components/BrowseAdd.svelte
new file mode 100644
index 0000000..d6145c6
--- /dev/null
+++ b/webui/src/components/BrowseAdd.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { createEventDispatcher, tick } from "svelte";
+
+  import Icon from "./utils/Icon.svelte";
+  import Selector from "./utils/Selector.svelte";
+  const dispatch = createEventDispatcher();
+  let selector: Selector;
+
+  let editable = false;
+  $: {
+    if (editable) {
+      dispatch("editable");
+      setTimeout(() => dispatch("editable"), 500); // once animation has finished
+    }
+  }
+  $: editable && selector && selector.focus();
+</script>
+
+<div class="view" class:editable on:click={() => (editable = true)}>
+  <div class="icon">
+    <Icon name="plus-circle" />
+  </div>
+  {#if editable}
+    <div class="controls">
+      <Selector
+        bind:this={selector}
+        type="value"
+        valueTypes={["Address"]}
+        on:input={(ev) => {
+          dispatch("input", ev.detail);
+          editable = false;
+        }}
+      />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .view {
+    position: relative;
+
+    background: var(--background-lighter);
+    color: var(--foreground-lighter);
+    border: 1px solid var(--foreground-lightest);
+    border-radius: 0.5em;
+    padding: 1rem;
+
+    cursor: pointer;
+
+    transition: opacity 0.3s, width 0.5s, min-width 0.5s;
+
+    opacity: 0.4;
+    width: 48px;
+    min-width: 48px;
+
+    &:hover,
+    &.editable {
+      opacity: 1;
+    }
+
+    &.editable {
+      width: 18em;
+      min-width: 18em;
+      .icon {
+        opacity: 0.4;
+      }
+    }
+  }
+
+  .icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 48px;
+    transition: opacity 0.3s;
+  }
+</style>
diff --git a/webui/src/components/BrowseColumn.svelte b/webui/src/components/BrowseColumn.svelte
index 87ee9e6..509dca9 100644
--- a/webui/src/components/BrowseColumn.svelte
+++ b/webui/src/components/BrowseColumn.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, tick } from "svelte";
+  import { createEventDispatcher, onMount, tick } from "svelte";
   import { normUrl } from "../util/history";
 
   import Inspect from "./Inspect.svelte";
@@ -16,6 +16,11 @@
   $: if (!detailChanged) detail = only;
   $: if (detailChanged) tick().then(() => dispatch("detail", detail));
 
+  onMount(() => {
+    // Required to make detail mode detection work in Browse
+    dispatch("detail", detail);
+  });
+
   function visit() {
     window.open(normUrl(`/browse/${address}`), "_blank");
   }
diff --git a/webui/src/components/utils/Input.svelte b/webui/src/components/utils/Input.svelte
index d206ca9..33fb4a9 100644
--- a/webui/src/components/utils/Input.svelte
+++ b/webui/src/components/utils/Input.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
+  let input: HTMLInputElement;
 
   const dispatch = createEventDispatcher();
 
@@ -13,11 +14,16 @@
   function onInput() {
     dispatch("input", value);
   }
+
+  export function focus() {
+    input.focus();
+  }
 </script>
 
 <div class="input" class:focused>
   <slot name="prefix" />
   <input
+    bind:this={input}
     {placeholder}
     bind:value
     on:input={onInput}
diff --git a/webui/src/components/utils/Selector.svelte b/webui/src/components/utils/Selector.svelte
index f7421ba..d5dfbd7 100644
--- a/webui/src/components/utils/Selector.svelte
+++ b/webui/src/components/utils/Selector.svelte
@@ -10,9 +10,9 @@
   import Input from "./Input.svelte";
   const dispatch = createEventDispatcher();
 
+  export let type: "attribute" | "value";
   export let attribute: string | undefined = undefined;
   export let value: IValue | undefined = undefined;
-  export let type: "attribute" | "value";
   export let valueTypes: VALUE_TYPE[] | undefined = undefined;
   export let placeholder = "";
   export let disabled = false;
@@ -177,6 +177,11 @@
   let inputFocused = false;
   let hover = false;
   $: visible = (inputFocused || hover) && Boolean(options.length);
+
+  let input: Input;
+  export function focus() {
+    input.focus();
+  }
 </script>
 
 <div class="selector">
@@ -189,6 +194,7 @@
     </div>
   {:else}
     <Input
+      bind:this={input}
       bind:value={inputValue}
       on:input={onInput}
       on:focusChange={(ev) => (inputFocused = ev.detail)}
diff --git a/webui/src/views/Browse.svelte b/webui/src/views/Browse.svelte
index 0f9faab..e5b72e9 100644
--- a/webui/src/views/Browse.svelte
+++ b/webui/src/views/Browse.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { useNavigate, useParams } from "svelte-navigator";
+  import BrowseAdd from "../components/BrowseAdd.svelte";
   import BrowseColumn from "../components/BrowseColumn.svelte";
   import { updateTitle } from "../util/title";
   const navigate = useNavigate();
@@ -9,6 +10,12 @@
   let identities: string[] = [];
   $: addresses = $params.addresses.split(",");
 
+  function add(address: string) {
+    let _addresses = addresses.concat();
+    _addresses.push(address);
+    navigate(`/browse/${_addresses.join(",")}`);
+  }
+
   function close(idx: number) {
     let _addresses = addresses.concat();
     _addresses.splice(idx, 1);
@@ -21,11 +28,9 @@
 
   $: scrollToVisible(addresses.length - 1);
 
-  function scrollToVisible(idx: number) {
-    console.log(`Scrolling to ${idx}`);
-    const target = root?.querySelector(
-      `[data-index='${idx}']`
-    )?.firstElementChild as HTMLElement;
+  function scrollToVisible(idx: string | number) {
+    const target = root?.querySelector(`[data-index='${idx}']`)
+      ?.firstElementChild as HTMLElement;
 
     if (target) {
       root?.scrollTo({
@@ -45,6 +50,14 @@
     identities = identities;
   }
 
+  let detailMode = false;
+  function onDetailChanged(index: number, ev: CustomEvent<boolean>) {
+    if (ev.detail) {
+      scrollToVisible(index);
+    }
+    detailMode = addresses.length === 1 && ev.detail;
+  }
+
   $: updateTitle("Browse", identities.join(" / "));
 </script>
 
@@ -57,10 +70,20 @@
         only={addresses.length === 1}
         on:close={() => close(index)}
         on:resolved={(ev) => onIdentified(index, ev)}
-        on:detail={(ev) => ev.detail && scrollToVisible(index)}
+        on:detail={(ev) => onDetailChanged(index, ev)}
       />
     </div>
   {/each}
+  {#if !detailMode}
+    {#key addresses}
+      <div class="column" data-index="add">
+        <BrowseAdd
+          on:input={(ev) => add(ev.detail.c)}
+          on:editable={() => scrollToVisible("add")}
+        />
+      </div>
+    {/key}
+  {/if}
 </div>
 
 <style lang="scss">