Adds an "Issues" tab before "Pull requests" on the Granite-Code/continue-for-granite repo page

granitecode-issues-tab.user.js

// ==UserScript==
// @name         GitHub Issues Tab for Granite-Code/continue-for-granite
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Adds an "Issues" tab before "Pull requests" on the Granite-Code/continue-for-granite repo page, with an icon and external link indicator
// @author       Fred Bricon
// @match        https://github.com/Granite-Code/continue-for-granite*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function addIssuesTab() {
        // Find the nav bar
        const nav = document.querySelector('ul.UnderlineNav-body');
        if (!nav) return;

        // Find the "Pull requests" tab <a>
        const prTab = nav.querySelector('a#pull-requests-tab');
        if (!prTab) return;

        // Check if Issues tab already exists
        if (nav.querySelector('a#issues-external-tab')) return;

        // Create the <li> and <a> for the new tab
        const li = document.createElement('li');
        li.setAttribute('data-view-component', 'true');
        li.className = 'd-inline-flex';

        const a = document.createElement('a');
        a.id = 'issues-external-tab';
        a.title = 'Open Granite-Code issues';
        a.href = 'https://github.com/Granite-Code/granite-code/issues?q=sort%3Aupdated-desc+is%3Aissue+is%3Aopen';
        a.setAttribute('data-view-component', 'true');
        a.className = 'UnderlineNav-item no-wrap js-responsive-underlinenav-item';
        a.target = '_blank';
        a.rel = 'noopener noreferrer';
        a.innerHTML = `
            <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline">
                <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>
            </svg>
            <span data-content="Issues">Issues</span>
            <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" style="margin-left:4px;vertical-align:middle;" class="octicon octicon-link-external">
                <path d="M10.5 2a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0V3.56l-5.22 5.22a.75.75 0 1 1-1.06-1.06L12.44 2.5H10.5A.75.75 0 0 1 10.5 2ZM3.25 3A2.25 2.25 0 0 0 1 5.25v7.5A2.25 2.25 0 0 0 3.25 15h7.5A2.25 2.25 0 0 0 13 12.75V9a.75.75 0 0 0-1.5 0v3.75c0 .414-.336.75-.75.75h-7.5a.75.75 0 0 1-.75-.75v-7.5c0-.414.336-.75.75-.75H7a.75.75 0 0 0 0-1.5H3.25Z"></path>
            </svg>
        `;

        li.appendChild(a);

        // Insert BEFORE the "Pull requests" tab's <li>
        const prLi = prTab.closest('li');
        if (prLi) {
            nav.insertBefore(li, prLi);
        } else {
            nav.appendChild(li);
        }
    }

    // Run on DOM ready and on navigation (for SPA)
    function onReady(fn) {
        if (document.readyState !== 'loading') {
            fn();
        } else {
            document.addEventListener('DOMContentLoaded', fn);
        }
    }

    onReady(() => {
        addIssuesTab();
        // Observe for SPA navigation (GitHub uses PJAX)
        const observer = new MutationObserver(() => {
            addIssuesTab();
        });
        observer.observe(document.body, { childList: true, subtree: true });
    });
})();