Function UserDetailTitle

packages/react/src/pages/admin-users.tsx:325–361

* The sheet header: the same title treatment as the row, plus the copy * affordances the row can't carry. * * Two separate buttons rather than one, because they yield different things and * an operator wants a specific one: the email is what they paste into a mail * client or a support ticket,

(props: { readonly user: AdminUserRow })

 * identifies them to logs and to the API.
 */
function UserDetailTitle(props: { readonly user: AdminUserRow }) {
  const title = adminUserTitle(props.user);
  const email = adminUserCopyableEmail(props.user);

  return (
    <div className="flex min-w-0 flex-col gap-1">
      <div className="flex min-w-0 items-center gap-1">
        <SheetTitle
          data-slot="admin-user-detail-title"
          className={
            title.primaryIsId ? "truncate font-mono text-sm" : "truncate text-sm font-semibold"
          }
          title={title.primary}
        >
          {title.primary}
        </SheetTitle>
        {email ? (
          <CopyButton value={email} label="Copy email" />
        ) : (
          title.primaryIsId && <CopyButton value={props.user.externalId} label="Copy ID" />
        )}
      </div>
      {title.secondary !== null && (
        <div className="flex min-w-0 items-center gap-1">
          <span
            data-slot="admin-user-detail-id"
            className="truncate font-mono text-[11px] text-muted-foreground"
            title={props.user.externalId}
          >
            {props.user.externalId}
          </span>
          <CopyButton value={props.user.externalId} label="Copy ID" />
        </div>
      )}
    </div>
  );
}

// ── Detail sheet ────────────────────────────────────────────────────────────