[ui] separate browse & column

webui/src/components/BrowseColumn.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import { normUrl } from "../util/history";
+
+  import Inspect from "./Inspect.svelte";
+  import IconButton from "./utils/IconButton.svelte";
+  const dispatch = createEventDispatcher();
+
+  export let address: string;
+  export let index: number;
+  export let only: boolean;
+
+  let editable = false;
+
+  function visit() {
+    window.open(normUrl(`/browse/${address}`), "_blank");
+  }
+</script>
+
+<div class="view">
+  <header>
+    <IconButton name="pencil" on:click={() => (editable = !editable)} />
+    <IconButton name="bookmark" on:click={() => visit()} disabled={only} />
+    <IconButton
+      name="x-circle"
+      on:click={() => dispatch("close")}
+      disabled={only}
+    />
+  </header>
+  <Inspect {address} editable={editable || false} {index} on:resolved />
+</div>
+
+<style lang="scss">
+  .view {
+    min-width: 30em;
+    max-width: 30em;
+
+    display: flex;
+    flex-direction: column;
+
+    background: var(--background-lighter);
+    color: var(--foreground-lighter);
+    border: 1px solid var(--foreground-lightest);
+    border-radius: 0.5em;
+    padding: 1rem;
+
+    header {
+      font-size: 20px;
+      position: relative;
+      min-height: 1em;
+
+      display: flex;
+      justify-content: space-between;
+
+      flex: none;
+    }
+  }
+</style>

webui/src/views/Browse.svelte

@@ -1,21 +1,14 @@
 <script lang="ts">
   import { useNavigate, useParams } from "svelte-navigator";
-  import Inspect from "../components/Inspect.svelte";
-  import IconButton from "../components/utils/IconButton.svelte";
-  import { normUrl as normURL } from "../util/history";
+  import BrowseColumn from "../components/BrowseColumn.svelte";
   import { updateTitle } from "../util/title";
   const navigate = useNavigate();
   const params = useParams();
 
   let root: HTMLDivElement;
-  let editable: boolean[] = [];
   let identities: string[] = [];
   $: addresses = $params.addresses.split(",");
 
-  function visit(idx: number) {
-    window.open(normURL(`/browse/${addresses[idx]}`), "_blank");
-  }
-
   function close(idx: number) {
     let _addresses = addresses.concat();
     _addresses.splice(idx, 1);
@@ -46,30 +39,13 @@
 
 <div class="browser" bind:this={root}>
   {#each addresses as address, index}
-    <div class="view" data-address={address}>
-      <header>
-        <IconButton
-          name="pencil"
-          on:click={() => (editable[index] = !editable[index])}
-        />
-        <IconButton
-          name="bookmark"
-          on:click={() => visit(index)}
-          disabled={addresses.length === 1}
-        />
-        <IconButton
-          name="x-circle"
-          on:click={() => close(index)}
-          disabled={addresses.length === 1}
-        />
-      </header>
-      <Inspect
-        {address}
-        editable={editable[index] || false}
-        {index}
-        on:resolved={(ev) => onIdentified(index, ev)}
-      />
-    </div>
+    <BrowseColumn
+      {address}
+      {index}
+      only={addresses.length === 1}
+      on:close={() => close(index)}
+      on:resolved={(ev) => onIdentified(index, ev)}
+    />
   {/each}
 </div>
 
@@ -85,29 +61,4 @@
     margin-top: 1rem;
     margin-bottom: var(--footer-height);
   }
-
-  .view {
-    min-width: 30em;
-    max-width: 30em;
-
-    display: flex;
-    flex-direction: column;
-
-    background: var(--background-lighter);
-    color: var(--foreground-lighter);
-    border: 1px solid var(--foreground-lightest);
-    border-radius: 0.5em;
-    padding: 1rem;
-
-    header {
-      font-size: 20px;
-      position: relative;
-      min-height: 1em;
-
-      display: flex;
-      justify-content: space-between;
-
-      flex: none;
-    }
-  }
 </style>