docmost/apps/client/src/ee/base/components/row-detail-modal/row-detail-title.tsx

import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { IBaseProperty, IBaseRow } from "@/ee/base/types/base.types";
import { timeAgo } from "@/lib/time.ts";
import classes from "@/ee/base/styles/row-detail-modal.module.css";

type RowDetailTitleProps = {
  row: IBaseRow;
  primaryProperty: IBaseProperty | undefined;
  canEdit: boolean;
  onCommit: (value: string) => void;
};

export function RowDetailTitle({
  row,
  primaryProperty,
  canEdit,
  onCommit,
}: RowDetailTitleProps) {
  const { t } = useTranslation();
  const initial = primaryProperty
    ? (((row.cells ?? {})[primaryProperty.id] as string) ?? "")
    : "";
  const [value, setValue] = useState(initial);
  const inputRef = useRef<HTMLInputElement>(null);
  const didAutofocusRef = useRef(false);

  // Re-sync when the row changes underneath us (navigation or remote edit).
  useEffect(() => {
    setValue(initial);
  }, [initial]);

  useEffect(() => {
    if (didAutofocusRef.current || !canEdit || initial) return;
    didAutofocusRef.current = true;
    inputRef.current?.focus();
  }, [canEdit, initial]);

  const updatedAgo = row.updatedAt ? timeAgo(new Date(row.updatedAt)) : "";

  return (
    <header className={classes.header}>
      {canEdit ? (
        <input
          ref={inputRef}
          type="text"
          className={classes.titleInput}
          placeholder={t("Untitled")}
          aria-label={primaryProperty?.name ?? t("Untitled")}
          value={value}
          maxLength={1000}
          onChange={(e) => setValue(e.currentTarget.value)}
          onBlur={() => {
            if (value !== initial) onCommit(value);
          }}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              e.preventDefault();
              (e.currentTarget as HTMLInputElement).blur();
            }
          }}
        />
      ) : (
        <h1 className={classes.titleStatic}>{value || t("Untitled")}</h1>
      )}
      {updatedAgo && (
        <div className={classes.metaRow}>
          <span>{t("Updated {{when}}", { when: updatedAgo })}</span>
        </div>
      )}
    </header>
  );
}