JS to add Github buttons to Graphite (especially great with Arc Browser Boosts)

add-github-buttons-to-graphite

function isGraphitePr() {
  return window.location.hostname === 'app.graphite.dev' && window.location.pathname.includes('/github/pr/')
}

function makeGithubPrUrl() {
  const pieces = window.location.pathname.replace('/github/pr/', '').split('/');
  return `https://github.com/${pieces[0]}/${pieces[1]}/pull/${pieces[2].split('/')[0]}/?from=graphite`;
}

// fn determines whether the element should hide itself
function renderButton(text, onclick, container, fn) {
  const existingElem = document.getElementById(`Button-${text}`);
  if (existingElem) {
    existingElem.style.display = fn() ? 'block' : 'none';
    return;
  }

  

  // If we're here, we need to make a new element
  const elem = document.createElement('a');
  elem.onclick = onclick;
  elem.textContent = text;
  elem.style.display = fn() ? 'block' : 'none';
  elem.style.padding = '0px 8px';
  elem.style.fontWeight = 'normal';
  elem.style.fontSize = '12px';
  elem.style.opacity = 0.75
  elem.id = `Button-${text}`;
  container.appendChild(elem);
}

function rewriteGitHubURLs() {
  // Extract the PR number from the current URL
  const prNumberMatch = /\/pr\/additiveai\/plus\/(\d+)\//.exec(window.location.href);
  if (!prNumberMatch) {
    console.error('PR number not found in the current URL');
    return;
  }
  const prNumber = prNumberMatch[1];
  // Find all links on the page

  // document.querySelector("#\\:r9r\\: > span.utilities_flexPushSelfRight__baFiM.utilities_flexAlignCenter__RkuG8.gds-utilities_gap__m__KrPDp > a")
  const links = document.querySelectorAll('a[href*="github.com/additiveai/plus/commit/"]');
  links.forEach(link => {
    // Rewrite the URL if it's a GitHub commit URL
    const commitHashMatch = /github\.com\/additiveai\/plus\/commit\/([a-f0-9]+)/.exec(link.href);
    if (commitHashMatch) {
      const commitHash = commitHashMatch[1];
      link.href = `https://github.com/additiveai/plus/pull/${prNumber}/commits/${commitHash}`;
    }
  });
}

function toggleAnnotations() {
    const elements = document.querySelectorAll('div[class^="Annotation_annotation"]');
    elements.forEach(element => {
        const parentDiv = element.closest('div');
        if (parentDiv) {
            if (parentDiv.style.display === 'none') {
                parentDiv.style.display = '';
            } else {
                parentDiv.style.display = 'none';
            }
        }

    });
}



function renderUI() {
  // const outerWrapper = document.querySelector('.PullRequestTitleBar_container__xumlb');
  const outerWrapper = document.querySelectorAll("[class^='PullRequestTitleBar_container__']")[0];

  if (!outerWrapper) {
    setTimeout(renderUI, 500);
    return;
  }

  let wrapper = document.getElementById('extra-ui-wrapper')
  if (!wrapper) {
    wrapper = document.createElement('div');
    wrapper.id = 'extra-ui-wrapper';
    wrapper.style.display = 'flex';
  }
  if (!outerWrapper.querySelector('#extra-ui-wrapper')) {
    outerWrapper.prepend(wrapper);
  }
  renderButton("Copy Github Link", () => navigator.clipboard.writeText(makeGithubPrUrl()), wrapper, isGraphitePr);
  renderButton("Open in Github", () => window.open(makeGithubPrUrl()), wrapper, isGraphitePr);
  renderButton("Toggle annotations", () => toggleAnnotations(), wrapper, isGraphitePr)
  
  rewriteGitHubURLs()

  setTimeout(renderUI, 5000); // rerender every second
}
renderUI();