Add personal notes/labels to the PRs list

Description

[I apologize if the feature is already added, I tested the extension and couldn't find it] [I apologize if there is an issue with the same idea]

Hi! I'm a member/contributor of the pygame-community organization, and every x days I check the pull request list to see if I can do anything. I find this a bit time-wasting tho, because there are some PRs which are not of my competence (no point in checking it twice), some that have an on-going conversation on hold (if I want to approve I have to wait), some that require the review of some other member, so I have to wait too, some that require the opinion of the steering council, and the list of possible causes of why I should not check a PR twice can go on. For that, I'd love a reminder, a note that tells me "you don't need to check this PR because..." but the note can actually contain any information "the failing tests are not related to the PR" and so on. The main thing is that: the notes are personal, only seen by you. Ideally they should be saved locally to your browser.

Possible approaches:

note input field, that don't get much in the way (by making the bg of the same color) beside the title
some personal label system

But I'm not just asking and that's it, yesterday I threw up some javascript and implemented a demo of that working myself! Well, kind of. Here is a screenshot:

The code that achieved that is very bad, but I don't like JS and I've never made an extension. Also, my code has issues:

only works on Opera GX (not chrome which has different CSS and storage system)
if github edits the html layout I'm cooked

I'm still going to send the code if it might help. Tell me what you think of the proposal. The notes could be toggled by the user.

console.log("DAMUS GITHHUB PR NOTES IS RUNNING HERE");

const mainParentList = document.getElementsByClassName("Box mt-3 Box--responsive hx_Box--firstRowRounded0");
var addedNodes = [];

async function elaboratePRDiv(div, parent) {
    var title = div.children[2];
    var totalW = title.getBoundingClientRect().width;
    var children = title.children;
    var hasLabels = children[2].localName == "span";
    if (hasLabels) {
        var combW = children[0].getBoundingClientRect().width+children[1].getBoundingClientRect().width+children[2].getBoundingClientRect().width;
    } else {
        var combW = children[0].getBoundingClientRect().width+children[1].getBoundingClientRect().width;
    }
    var prID = children[0].id;

    var site = document.location.pathname;
    var data = await chrome.storage.local.get(site);
    var siteData = data[site];
    var note = "";
    if (siteData != undefined) {
        if (siteData[prID] != undefined) {
            note = siteData[prID];
        }
    } 

    var preferred = (totalW)/2;
    var s = (totalW-combW)/8;
    var available = (totalW-combW)-s;
    var actualW = preferred;
    if (preferred > available) {
        actualW = available;
    }

    var nodeObj = document.createElement("input");
    nodeObj.className = "form-control form-control input-contrast";
    nodeObj.type = "text";
    nodeObj.innerHTML = "";
    nodeObj.placeholder = "";
    nodeObj.value = note;
    nodeObj.onchange = async (event) => {
        var val = event.target.value;
        var url = document.location.pathname;
        var currentData = await chrome.storage.local.get(site);
        var postData = {};
        if (currentData[url] != undefined) {
            postData = currentData[url];
        }
        postData[prID] = val;
        var finalData = {};
        finalData[url] = postData;
        await chrome.storage.local.set(finalData, (ev) => {
            console.log(`Succesfully updated note ${prID} of ${url}`);
        })
    };
    var parW = parent.getBoundingClientRect().width;
    nodeObj.style = "position:absolute;right: "+((parW-totalW-64)).toString()+"px;width: "+actualW.toString()+"px !important;background-color: rgb(13, 17, 23);border-color: rgb(23, 27, 33);height: 25px;color: rgb(0, 134, 91);";

    if (hasLabels) {
        title.insertBefore(nodeObj, children[3]);
    } else {
        title.insertBefore(nodeObj, children[2]);
    }
    addedNodes.push(nodeObj);
}

function main() {
    for (var i = 0; i < addedNodes.length; i++) {
        addedNodes[i].remove();
    }
    addedNodes = [];
    if (mainParentList) {
        const container = mainParentList[0].children[2].children[0].children;
        for (var i = 0; i < container.length; i++) {
            elaboratePRDiv(container[i].children[0], container[i]);
        }
    }
}

main();
addEventListener("resize", (e) => {main()});

Example URLs

PRs list of https://github.com/pygame-community/pygame-ce/pulls for example

refined-github / refined-github

Add personal notes/labels to the PRs list #7529

Description

Example URLs