Function createCoAuthorsUI

github-co-authors/github-co-authors.user.js:399–453

* Create the UI for adding co-authors. * @param {HTMLElement} root * @param {Element | null} newMergeExperienceContainer

(root, newMergeExperienceContainer)

 * @param {Element | null} newMergeExperienceContainer
 */
function createCoAuthorsUI(root, newMergeExperienceContainer) {
    const banner = document.createElement('div')
    banner.setAttribute('aria-live', 'polite')
    banner.classList.add('color-fg-subtle')

    let bannerTimeout
    /**
     * Display a temporary status update about the progress adding co-authors.
     * @param {string} msg The message to display
     * @param {'subtle' | 'success' | 'danger'} color The status color to use.
     */
    const displayStatus = (msg, color = 'subtle') => {
        clearTimeout(bannerTimeout)
        banner.textContent = msg
        banner.className = `color-fg-${color}`
        bannerTimeout = setTimeout(() => (banner.textContent = ''), 5000)
    }

    const button = document.createElement('button')
    button.textContent = 'Add co-authors'
    button.classList.add('Button', 'Button--secondary', 'Button--small')
    button.type = 'button'
    button.addEventListener('click', async () => {
        displayStatus('Loading co-authors…')
        try {
            const { message, count } = await getCoAuthors()
            /** @type {HTMLTextAreaElement | null} */
            const textArea = newMergeExperienceContainer?.querySelector('textarea') ??
                root.querySelector('textarea#merge_message_field')
            if (!textArea) {
                throw new Error('Couldn’t find commit message <textarea>')
            }
            // Append co-authors to textarea content.
            textArea.value = (textArea.value + '\n\n' + message).trim()
            // Notify event listeners that the <textarea> content changed.
            textArea.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }))

            if (count === 0) {
                displayStatus('Found no co-authors to add')
            } else {
                displayStatus(`Added ${count} co-author${count === 1 ? '' : 's'}`, 'success')
            }
        } catch (error) {
            console.error('Error adding co-authors:', error)
            displayStatus('Something went wrong.', 'danger')
        }
    })
    // Build container
    const container = document.createElement('div')
    container.classList.add('d-flex', 'flex-items-center', 'gap-2')
    if (newMergeExperienceContainer) container.classList.add('mt-3')
    container.append(button)
    container.append(banner)
    return container
}

/** Get participants for the current PR and generate `Co-authored-by` messages for them. */
async function getCoAuthors() {