Add column and field editor

import { useState } from 'react';
import { AddColumnButton, FieldEditor } from '@/ui/add-column-and-field-editor';
import { Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger } from '@/ui/popover';
import { Table, type TableColumn } from '@/ui/table';
import { toast } from '@/ui/toast';

type Candidate = { id: string; name: string; company: string };

const base: TableColumn<Candidate>[] = [
  { key: 'name', label: 'Candidate', cell: (row) => row.name },
  { key: 'company', label: 'Company', width: 180, cell: (row) => row.company },
];

// Press + at the end of the header row, name the field and create it: it joins this table.
export default function AddColumnInTheHeader() {
  const [columns, setColumns] = useState(base);
  const [open, setOpen] = useState(false);
  const [pending, setPending] = useState(false);
  return (
    <Table
      label="Candidates"
      columns={columns}
      rows={[{ id: 'c1', name: 'Maya Chen', company: 'Halcyon Bank' }]}
      headerEnd={
        <Popover open={open} onOpenChange={setOpen}>
          <PopoverTrigger render={<AddColumnButton />} />
          <PopoverContent align="end">
            <PopoverHeader>
              <PopoverTitle>New field on Candidates</PopoverTitle>
            </PopoverHeader>
            <FieldEditor
              noun="candidate"
              autoFocus
              pending={pending}
              onCancel={() => setOpen(false)}
              onSubmit={(field) => {
                setPending(true);
                setTimeout(() => {
                  setPending(false);
                  setOpen(false);
                  setColumns((all) => [...all, { key: field.name, label: field.name, cell: () => null }]);
                  toast.add({ type: 'success', title: `${field.name} added` });
                }, 700);
              }}
            />
          </PopoverContent>
        </Popover>
      }
    />
  );
}

import { AddColumnButton } from '@/ui/add-column-and-field-editor';

// A member who can't add fields sees a lock; its tooltip names who can.
export default function AddColumnLocked() {
  return (
    <div className="flex items-center gap-200">
      <AddColumnButton />
      <AddColumnButton locked="Only Owners and Admins can add fields. Ask Joseph." />
    </div>
  );
}

import { FieldEditor } from '@/ui/add-column-and-field-editor';

// The same form inline in Settings › Fields: the field joins no View. Press Create field with no name to see the message.
// Pick Single select or Number to see the form grow.
export default function AddColumnSettingsForm() {
  return (
    <div className="w-80 rounded-large bg-surface p-150 shadow-raised">
      <FieldEditor noun="candidate" attach="none" onCancel={() => {}} onSubmit={() => {}} />
    </div>
  );
}

import { FieldEditor } from '@/ui/add-column-and-field-editor';

// A create that fails keeps what was typed and says what to do.
export default function AddColumnCreateFails() {
  return (
    <div className="w-80 rounded-large bg-surface p-150 shadow-raised">
      <FieldEditor noun="company" onCancel={() => {}} onSubmit={() => {}} error="Couldn't create the field. Check your connection and try again." />
    </div>
  );
}