phonograph/svelte/src/field-header.svelte

<script lang="ts">
  import { type FieldInfo } from "./field.svelte";
  import FieldDetails from "./field-details.svelte";

  type Props = {
    field: FieldInfo;
    index: number;
  };

  let { field = $bindable(), index }: Props = $props();

  const original_label_value = field.field.table_label;

  let type_indicator_element = $state<HTMLButtonElement | undefined>();
  let popover_element = $state<HTMLDivElement | undefined>();
  let name_value = $state(field.field.name);
  let label_value = $state(field.field.table_label ?? "");
  // Hacky workaround because as of September 2025 implicit anchor association
  // is still pretty broken, at least in Firefox.
  let anchor_name = $state(`--anchor-${Math.floor(Math.random() * 1000000)}`);

  $effect(() => {
    field.field.table_label = label_value === "" ? undefined : label_value;
  });

  $effect(() => {
    popover_element?.addEventListener("toggle", handle_popover_toggle);
    return () => {
      popover_element?.removeEventListener("toggle", handle_popover_toggle);
    };
  });

  function handle_type_indicator_element_click() {
    popover_element?.togglePopover();
  }

  function handle_popover_toggle(ev: ToggleEvent) {
    if (ev.newState === "closed") {
      type_indicator_element?.focus();
      field.field.table_label = original_label_value;
      label_value = original_label_value ?? "";
    }
  }
</script>

<div
  aria-colindex={index}
  class="field-header__container"
  role="columnheader"
  style:width={`${field.field.table_width_px}px`}
>
  <div class="field-header__label">
    {field.field.table_label ?? field.field.name}
  </div>
  <div class="field-header__menu-container">
    <button
      bind:this={type_indicator_element}
      class="field-header__type-indicator"
      onclick={handle_type_indicator_element_click}
      style:anchor-name={anchor_name}
    >
      {#if field.field.presentation.t === "Dropdown"}
        <i class="ti ti-pointer"></i>
      {:else if field.field.presentation.t === "Text"}
        <i class="ti ti-file-text"></i>
      {:else if field.field.presentation.t === "Timestamp"}
        <i class="ti ti-calendar"></i>
      {:else if field.field.presentation.t === "Uuid"}
        <i class="ti ti-id"></i>
      {/if}
    </button>
    <div
      bind:this={popover_element}
      class="field-header__popover"
      popover="auto"
      style:position-anchor={anchor_name}
    >
      <form method="post" action="update-field">
        <FieldDetails
          bind:name_value
          bind:label_value
          name_input_disabled
          presentation={field.field.presentation}
        />
        <input type="hidden" name="field_id" value={field.field.id} />
        <button class="button--primary" type="submit">Save</button>
      </form>
    </div>
  </div>
</div>