Repository: strapi/strapi
File: packages/core/content-manager/admin/src/pages/EditView/components/Header.tsx (TypeScript)

Code before:

/* -------------------------------------------------------------------------------------------------
 * HeaderToolbar
 * -----------------------------------------------------------------------------------------------*/

interface DialogOptions {
  type: 'dialog';
  title: string;
  content?: React.ReactNode;
  footer?: React.ReactNode;
}

interface HeaderActionDescription {
  disabled?: boolean;
  label: string;
  icon?: React.ReactNode;
  type?: 'icon' | 'default';
  onClick?: (event: React.SyntheticEvent) => Promise<boolean | void> | boolean | void;
  dialog?: DialogOptions;
  options?: Array<{
    disabled?: boolean;
    label: string;
    startIcon?: React.ReactNode;
    textValue?: string;
    value: string;
    render?: React.ReactNode;
  }>;
  status?: {
    message: React.ReactNode;
    tooltip?: React.ReactNode;
  };
  onSelect?: (value: string) => void;
  value?: string;
  customizeContent?: (value: string) => React.ReactNode;
}

/**
 * @description Contains the document actions that have `position: header`, if there are
 * none we still render the menu because we render the information about the document there.
 */
const HeaderToolbar = () => {
  const { formatMessage } = useIntl();
  const isCloning = useMatch(CLONE_PATH) !== null;
  const [
    {
      query: { status = 'draft' },
    },
  ] = useQueryParams<{ status: 'draft' | 'published' }>();
  const { model, id, document, meta, collectionType } = useDoc();
  const plugins = useStrapiApp('HeaderToolbar', (state) => state.plugins);


Review comment (suggestion):
Again, not sure about the best API here. I have to do this only because we have the separator 

<img width="333" height="104" alt="Image" src="https://github.com/user-attachments/assets/3d3aad09-dabc-4ab1-853f-6c3aed69942d" />

Code after:

/* -------------------------------------------------------------------------------------------------
 * HeaderToolbar
 * -----------------------------------------------------------------------------------------------*/

interface DialogOptions {
  type: 'dialog';
  title: string;
  content?: React.ReactNode;
  footer?: React.ReactNode;
}

interface HeaderActionDescription {
  disabled?: boolean;
  label: string;
  icon?: React.ReactNode;
  type?: 'icon' | 'default';
  onClick?: (event: React.SyntheticEvent) => Promise<boolean | void> | boolean | void;
  dialog?: DialogOptions;
  options?: Array<{
    disabled?: boolean;
    label: string;
    startIcon?: React.ReactNode;
    textValue?: string;
    value: string;
    /**
     * @internal
     * @description
     * Internal SelectOption renderer used to display the status of AI translation background jobs
     */
    _render?: () => React.ReactNode;
  }>;
  /**
   * @internal
   * @description
   * Internal document header action to display the status of AI translation background jobs
   */
  _status?: {
    message: React.ReactNode;
    tooltip?: React.ReactNode;
  };
  onSelect?: (value: string) => void;
  value?: string;
  customizeContent?: (value: string) => React.ReactNode;
}

/**
 * @description Contains the document actions that have `position: header`, if there are
 * none we still render the menu because we render the information about the document there.
 */
const HeaderToolbar = () => {