From 96b7f3abc36c150925cf50ece994b9b0c2099967 Mon Sep 17 00:00:00 2001
From: Blake Gearin <hello@blakeg.me>
Date: Sun, 17 Nov 2024 01:24:32 -0700
Subject: [PATCH] Add Copilot button support to Old School and Happy Medium

---
 src/github-custom-global-navigation.user.js | 221 +++++++++++++++++++-
 1 file changed, 219 insertions(+), 2 deletions(-)

diff --git a/src/github-custom-global-navigation.user.js b/src/github-custom-global-navigation.user.js
index 7236104..f185700 100644
--- a/src/github-custom-global-navigation.user.js
+++ b/src/github-custom-global-navigation.user.js
@@ -62,6 +62,7 @@
 
     updatePageTitle();
     updateSearch();
+    updateCopilot();
 
     if (CONFIG.divider.remove) removeDivider();
 
@@ -464,6 +465,134 @@
 
       placeholderDiv.appendChild(slashImg);
     }
+
+    log(DEBUG, `Updates applied to ${configKey}`);
+  }
+
+  function updateCopilot() {
+    log(DEBUG, 'updateCopilot()');
+
+    const configKey = 'copilot';
+
+    const elementConfig = CONFIG[configKey];
+    const elementSelector = SELECTORS[configKey];
+
+    let topDivSelector = elementSelector.id;
+    const topDiv = HEADER.querySelector(createId(elementSelector.id)) ||
+      HEADER.querySelector(elementSelector.topDiv);
+
+    if (!topDiv) {
+      logError(`Selectors '${createId(elementSelector.id)}' and '${elementSelector.topDiv}' not found`);
+      return;
+    }
+
+    topDiv.setAttribute('id', elementSelector.id);
+
+    if (elementConfig.remove) {
+      HEADER_STYLE.textContent += cssHideElement(createId(elementSelector.id));
+      return;
+    }
+
+    if (!elementConfig.tooltip && SELECTORS.toolTips[configKey]?.id) {
+      HEADER_STYLE.textContent += cssHideElement(createId(SELECTORS.toolTips[configKey].id));
+    }
+
+    const button = HEADER.querySelector(elementSelector.button);
+
+    let textContent = elementConfig.text.content;
+
+    if (elementConfig.icon.remove) {
+      const svgId = `${configKey}-svg`;
+      const svg = button.querySelector('svg');
+
+      if (!svg) {
+        logError(`Selector '${configKey} svg' not found`);
+
+        return;
+      }
+
+      svg.setAttribute('id', svgId);
+
+      HEADER_STYLE.textContent += cssHideElement(createId(svgId));
+    } else {
+      button.querySelector('svg').style.setProperty('fill', elementConfig.icon.color);
+      textContent = UNICODE_NON_BREAKING_SPACE + textContent;
+    }
+
+    modifyThenObserve(() => {
+      HEADER.querySelector(createId(elementSelector.textContent))?.remove();
+    });
+
+    if (elementConfig.text.content !== '') {
+      const spanElement = document.createElement('span');
+      const spanId = `${configKey}-text-content-span`;
+      spanElement.setAttribute('id', spanId);
+
+      const padding = '9px';
+
+      HEADER_STYLE.textContent += `
+        ${elementSelector.button}
+        {
+          padding-left: ${padding} !important;
+          padding-right: ${padding} !important;
+          width: auto !important;
+          text-decoration: none !important;
+          display: flex !important;
+        }
+      `;
+
+      if (elementConfig.text.color) {
+        HEADER_STYLE.textContent += `
+          ${createId(spanId)}
+          {
+            color: ${elementConfig.text.color} !important;
+          }
+        `;
+      }
+
+      const textNode = document.createTextNode(textContent);
+      spanElement.appendChild(textNode);
+
+      button.appendChild(spanElement);
+    }
+
+    if (!elementConfig.border) {
+      HEADER_STYLE.textContent += `
+        ${createId(topDivSelector)}
+        {
+          border: none !important;
+        }
+      `;
+    }
+
+    if (elementConfig.boxShadow !== '') {
+      HEADER_STYLE.textContent += `
+        ${createId(topDivSelector)}
+        {
+          box-shadow: ${elementConfig.boxShadow} !important;
+        }
+      `;
+    }
+
+    if (elementConfig.hover.backgroundColor !== '') {
+      HEADER_STYLE.textContent += `
+        ${createId(topDivSelector)}:hover
+        {
+          background-color: ${elementConfig.hover.backgroundColor} !important;
+        }
+      `;
+    }
+
+    if (elementConfig.hover.color !== '') {
+      HEADER_STYLE.textContent += `
+        ${createId(topDivSelector)} span:hover
+        {
+          color: ${elementConfig.hover.color} !important;
+        }
+      `;
+    }
+
+    log(DEBUG, `Updates applied to ${configKey}`);
   }
 
   function removeDivider() {
@@ -504,7 +633,6 @@
     let linkSelector = elementSelector.id;
     link.setAttribute('id', linkSelector);
 
-
     if (elementConfig.remove) {
       HEADER_STYLE.textContent += cssHideElement(createId(configKey));
 
@@ -680,6 +808,8 @@
       firstElement.parentNode.insertBefore(secondElementClone, firstElement.nextElementSibling);
     }
 
+    // debugger;
+
     if (firstElementSelector.includes('clone')) {
       firstElement.remove();
     }
@@ -1258,6 +1388,8 @@
   function flipCreateInbox() {
     log(DEBUG, 'flipCreateInbox()');
 
+    // debugger;
+
     cloneAndFlipElements(
       createId(SELECTORS.create.id),
       createId(SELECTORS.notifications.id),
@@ -1972,6 +2104,9 @@
 
     const toolTips = Array.from(HEADER.querySelectorAll('tool-tip'));
     SELECTORS.toolTips = {
+      copilot: toolTips.find(
+        tooltip => tooltip.getAttribute('for') === 'copilot-chat-header-button',
+      ),
       create: toolTips.find(
         tooltip => tooltip.textContent.includes('Create new'),
       ),
@@ -3304,9 +3439,15 @@
       placeholderDiv: '.AppHeader-search-control .overflow-hidden',
       modal: '[data-target="qbsearch-input.queryBuilderContainer"]',
     },
+    copilot: {
+      id: 'copilot-div',
+      topDiv: '.AppHeader-CopilotChat',
+      button: '#copilot-chat-header-button',
+      textContent: 'copilot-text-content-span',
+    },
     create: {
       id: 'create-div',
-      topDiv: 'react-partial-anchor',
+      topDiv: '.AppHeader-actions react-partial-anchor',
       button: '#global-create-menu-anchor',
       overlay: '#global-create-menu-overlay',
       plusIcon: '#global-create-menu-anchor .Button-visual.Button-leadingVisual',
@@ -3417,6 +3558,25 @@
             width: '',
           },
         },
+        copilot: {
+          remove: false,
+          border: true,
+          tooltip: false,
+          alignLeft: false,
+          boxShadow: '',
+          icon: {
+            remove: false,
+            color: '',
+          },
+          text: {
+            content: 'Copilot',
+            color: '',
+          },
+          hover: {
+            backgroundColor: '',
+            color: '',
+          },
+        },
         divider: {
           remove: true,
         },
@@ -3645,6 +3805,25 @@
             width: '',
           },
         },
+        copilot: {
+          remove: false,
+          border: true,
+          tooltip: false,
+          alignLeft: false,
+          boxShadow: '',
+          icon: {
+            remove: false,
+            color: '',
+          },
+          text: {
+            content: 'Copilot',
+            color: '',
+          },
+          hover: {
+            backgroundColor: '',
+            color: '',
+          },
+        },
         divider: {
           remove: true,
         },
@@ -3875,6 +4054,25 @@
             width: '450px',
           },
         },
+        copilot: {
+          remove: true,
+          border: false,
+          tooltip: false,
+          alignLeft: true,
+          boxShadow: 'none',
+          icon: {
+            remove: false,
+            color: '',
+          },
+          text: {
+            content: 'Copilot',
+            color: oldSchoolColor,
+          },
+          hover: {
+            backgroundColor: oldSchoolHoverBackgroundColor,
+            color: oldSchoolHoverColor,
+          },
+        },
         divider: {
           remove: true,
         },
@@ -4105,6 +4303,25 @@
             width: '450px',
           },
         },
+        copilot: {
+          remove: true,
+          border: false,
+          tooltip: false,
+          alignLeft: true,
+          boxShadow: 'none',
+          icon: {
+            remove: false,
+            color: '',
+          },
+          text: {
+            content: 'Copilot',
+            color: oldSchoolColor,
+          },
+          hover: {
+            backgroundColor: oldSchoolHoverBackgroundColor,
+            color: oldSchoolHoverColor,
+          },
+        },
         divider: {
           remove: true,
         },