upend/webui/src/components/BrowseColumn.svelte

<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" class:editable>
  <header>
    <IconButton
      name="pencil"
      on:click={() => (editable = !editable)}
      active={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;

    &.editable {
      border-style: dashed;
    }

    header {
      font-size: 20px;
      position: relative;
      min-height: 1em;

      display: flex;
      justify-content: space-between;

      flex: none;
    }
  }
</style>