upend/webui/src/components/BrowseColumn.svelte

<script lang="ts">
  import { createEventDispatcher, onMount, tick } 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;
  let detail = only;
  let detailChanged = false;
  $: 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");
  }

  let width = 460;
  if (window.innerWidth < 600) {
    width = window.innerWidth - 6;
  }
  function drag(ev: MouseEvent) {
    const startWidth = width;
    const startX = ev.screenX;

    function onMouseMove(ev: MouseEvent) {
      width = startWidth + (ev.screenX - startX);
      width = width < 300 ? 300 : width;
    }
    function onMouseUp(_: MouseEvent) {
      window.removeEventListener("mousemove", onMouseMove);
      window.removeEventListener("mouseup", onMouseUp);
    }
    window.addEventListener("mousemove", onMouseMove);
    window.addEventListener("mouseup", onMouseUp);
  }
</script>

<div class="browse-column" class:detail>
  <div class="view" class:editable style="--width: {width}px">
    <header>
      <IconButton
        name="pencil"
        on:click={() => (editable = !editable)}
        active={editable}
      >
        Edit
      </IconButton>
      <IconButton
        name={detail ? "zoom-out" : "zoom-in"}
        on:click={() => {
          detail = !detail;
          detailChanged = true;
        }}
        active={detail}
      >
        Detail
      </IconButton>
      <IconButton name="link" on:click={() => visit()} disabled={only}>
        Detach
      </IconButton>
      <IconButton
        name="x-circle"
        on:click={() => dispatch("close")}
        disabled={only}
      >
        Close
      </IconButton>
    </header>
    <Inspect
      {address}
      editable={editable || false}
      {index}
      {detail}
      on:resolved
      on:close
    />
  </div>
  <div class="resizeHandle" on:mousedown|preventDefault={drag} />
</div>

<style lang="scss">
  .browse-column {
    display: flex;
  }

  .browse-column.detail {
    width: 100%;

    .view {
      @media screen and (min-width: 600px) {
        min-width: 75vw;
        max-width: min(75vw, 1920px);
        margin-left: auto;
        margin-right: auto;
      }
    }
  }

  .view {
    min-width: var(--width);
    max-width: var(--width);

    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;

    // transition: min-width 0.2s, max-width 0.2s;
    // TODO - container has nowhere to scroll, breaking `detail` scroll

    &.editable {
      border-style: dashed;
    }

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

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

      flex: none;
    }
  }

  .resizeHandle {
    cursor: ew-resize;
    height: 100%;
    width: 0.5rem;

    @media screen and (max-width: 600px) {
      display: none;
    }
  }
</style>