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;
  let detail = only;
  let detailChanged = false;
  $: if (!detailChanged) detail = only;

  function visit() {
    window.open(normUrl(`/browse/${address}`), "_blank");
  }

  $: fetch(`api/obj/${address}/LAST_VISITED`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ t: "Number", c: new Date().getTime() / 1000 }),
  });
</script>

<div class="view" class:editable class:detail>
  <header>
    <IconButton
      name="pencil"
      on:click={() => (editable = !editable)}
      active={editable}
    />
    <IconButton
      name="fullscreen"
      on:click={() => {
        detail = !detail;
        detailChanged = true;
      }}
      active={detail}
    />
    <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}
    --preview-height={detail ? "50vh" : "20em"}
    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;
    }

    &.detail {
      max-width: 100%;
      min-width: 75%;
    }

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

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

      flex: none;
    }
  }
</style>