Lint (#5654)

Co-authored-by: cheap-glitch <cheap.glitch@gmail.com>

21 files changed, 221 insertions, 203 deletions

diff --git a/.github/ISSUE_TEMPLATE/2_feature_request.yml b/.github/ISSUE_TEMPLATE/2_feature_request.yml
index 50901a70..1297213f 100644
--- a/.github/ISSUE_TEMPLATE/2_feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/2_feature_request.yml
@@ -15,9 +15,9 @@ body:
     attributes:
       label: Screenshot
       description: You can provide screenshots/mockups to better visualize your idea. Files can be dropped in this field
-  - type: input
+  - type: textarea
     attributes:
-      label: Example URL
+      label: Example URLs
       description: Include a REAL URL where the feature should appear. e.g. Do you want a feature to appear on the main page of a repo? Paste a link to a repo
       placeholder: https://github.com/refined-github/refined-github
     validations:
diff --git a/source/background.ts b/source/background.ts
index 9180f514..1ec3f0ca 100644
--- a/source/background.ts
+++ b/source/background.ts
@@ -44,10 +44,10 @@ browser.runtime.onMessage.addListener((message: typeof messageHandlers, sender)
 	}
 });
 
-// Give the browserAction a reason to exist other than "Enable RGH on this domain"
-browser.browserAction.onClicked.addListener(async () => {
+browser.browserAction.onClicked.addListener(async tab => {
 	const {actionUrl} = await optionsStorage.getAll();
 	void browser.tabs.create({
+		openerTabId: tab.id,
 		url: actionUrl || 'https://github.com',
 	});
 });
diff --git a/source/features/clean-repo-filelist-actions.tsx b/source/features/clean-repo-filelist-actions.tsx
index 9105826f..4c3f7b06 100644
--- a/source/features/clean-repo-filelist-actions.tsx
+++ b/source/features/clean-repo-filelist-actions.tsx
@@ -15,42 +15,44 @@ function addTooltipToSummary(childElement: Element, tooltip: string): void {
 	);
 }
 
-function init(): Deinit {
-	// `.btn` selects the desktop version
-	return observe('.btn[data-hotkey="t"]:not(.rgh-repo-filelist-actions)', {
-		add(searchButton) {
-			searchButton.classList.add('tooltipped', 'tooltipped-ne', 'rgh-repo-filelist-actions');
-			searchButton.setAttribute('aria-label', 'Go to file');
+function cleanFilelistActions(searchButton: Element): void {
+	searchButton.classList.add('tooltipped', 'tooltipped-ne', 'rgh-repo-filelist-actions');
+	searchButton.setAttribute('aria-label', 'Go to file');
+
+	// Replace "Go to file" with  icon
+	searchButton.firstChild!.replaceWith(<SearchIcon/>);
 
-			// Replace "Go to file" with  icon
-			searchButton.firstChild!.replaceWith(<SearchIcon/>);
+	// This button doesn't appear on `isSingleFile`
+	const addFileDropdown = searchButton.nextElementSibling!.querySelector('.dropdown-caret');
+	if (addFileDropdown) {
+		addFileDropdown.parentElement!.classList.replace('d-md-flex', 'd-md-block');
 
-			// This button doesn't appear on `isSingleFile`
-			const addFileDropdown = searchButton.nextElementSibling!.querySelector('.dropdown-caret');
-			if (addFileDropdown) {
-				addFileDropdown.parentElement!.classList.replace('d-md-flex', 'd-md-block');
+		// Replace "Add file" with icon
+		addFileDropdown.previousSibling!.replaceWith(<PlusIcon/>);
 
-				// Replace "Add file" with icon
-				addFileDropdown.previousSibling!.replaceWith(<PlusIcon/>);
+		addTooltipToSummary(addFileDropdown, 'Add file');
+	}
 
-				addTooltipToSummary(addFileDropdown, 'Add file');
-			}
+	const codeDropdownButton = select('get-repo summary');
+	if (codeDropdownButton) { // This dropdown doesn't appear on `isSingleFile`
+		addTooltipToSummary(codeDropdownButton, 'Clone, open or download');
 
-			const codeDropdownButton = select('get-repo summary');
-			if (codeDropdownButton) { // This dropdown doesn't appear on `isSingleFile`
-				addTooltipToSummary(codeDropdownButton, 'Clone, open or download');
+		// Users with Codespaces enabled already have an icon in the button https://github.com/refined-github/refined-github/pull/5074#issuecomment-983251719
+		const codeIcon = select('.octicon-code', codeDropdownButton);
+		if (codeIcon) {
+			// Remove "Code" text
+			codeIcon.nextSibling!.remove();
+		} else {
+			// Replace "Code" text with icon
+			codeDropdownButton.firstChild!.replaceWith(<CodeIcon/>);
+		}
+	}
+}
 
-				// Users with Codespaces enabled already have an icon in the button https://github.com/refined-github/refined-github/pull/5074#issuecomment-983251719
-				const codeIcon = select('.octicon-code', codeDropdownButton);
-				if (codeIcon) {
-					// Remove "Code" text
-					codeIcon.nextSibling!.remove();
-				} else {
-					// Replace "Code" text with icon
-					codeDropdownButton.firstChild!.replaceWith(<CodeIcon/>);
-				}
-			}
-		},
+function init(): Deinit {
+	// `.btn` selects the desktop version
+	return observe('.btn[data-hotkey="t"]:not(.rgh-repo-filelist-actions)', {
+		add: cleanFilelistActions,
 	});
 }
 
diff --git a/source/features/comment-on-draft-pr-indicator.tsx b/source/features/comment-on-draft-pr-indicator.tsx
index ae7d0239..66e3aa2b 100644
--- a/source/features/comment-on-draft-pr-indicator.tsx
+++ b/source/features/comment-on-draft-pr-indicator.tsx
@@ -2,7 +2,7 @@ import select from 'select-dom';
 import * as pageDetect from 'github-url-detection';
 
 import features from '.';
-import onReplacedElement from '../helpers/on-replaced-element';
+import onElementReplacement from '../helpers/on-element-replacement';
 
 function addIndicator(button: HTMLElement): void {
 	button.classList.add('rgh-draft-pr-indicator');
@@ -22,7 +22,7 @@ function init(signal: AbortSignal): void {
 
 	if (pageDetect.isPRConversation()) {
 		// The button is part of a .js-updatable-content partial
-		void onReplacedElement('#partial-new-comment-form-actions .btn-primary:not(.rgh-draft-pr-indicator)', addIndicator, {runCallbackOnStart: true, signal});
+		void onElementReplacement('#partial-new-comment-form-actions .btn-primary:not(.rgh-draft-pr-indicator)', addIndicator, {runCallbackOnStart: true, signal});
 	}
 }
 
diff --git a/source/features/conversation-links-on-repo-lists.tsx b/source/features/conversation-links-on-repo-lists.tsx
index 793aee39..e0d53238 100644
--- a/source/features/conversation-links-on-repo-lists.tsx
+++ b/source/features/conversation-links-on-repo-lists.tsx
@@ -6,35 +6,37 @@ import {GitPullRequestIcon, IssueOpenedIcon} from '@primer/octicons-react';
 
 import features from '.';
 
+function addConversationLinks(repositoryLink: HTMLAnchorElement): void {
+	repositoryLink.classList.add('rgh-discussion-links');
+	const repository = repositoryLink.closest('li')!;
+
+	// Remove the "X issues need help" link
+	select('[href*="issues?q=label%3A%22help+wanted"]', repository)?.remove();
+
+	// Place before the "Updated on" element
+	select('relative-time', repository)!.previousSibling!.before(
+		<a
+			className="Link--muted mr-3"
+			href={repositoryLink.href + '/issues?q=is%3Aissue+is%3Aopen'}
+		>
+			<IssueOpenedIcon/>
+		</a>,
+		<a
+			className="Link--muted mr-3"
+			href={repositoryLink.href + '/pulls?q=is%3Apr+is%3Aopen'}
+		>
+			<GitPullRequestIcon/>
+		</a>,
+	);
+}
+
 function init(): Deinit {
 	return observe([
 		'[itemprop="name codeRepository"]:not(.rgh-discussion-links)', // `isUserProfileRepoTab`
 		'[data-hydro-click*=\'"model_name":"Repository"\']:not(.rgh-discussion-links)', // `isGlobalSearchResults`
 	].join(','), {
 		constructor: HTMLAnchorElement,
-		add(repositoryLink) {
-			repositoryLink.classList.add('rgh-discussion-links');
-			const repository = repositoryLink.closest('li')!;
-
-			// Remove the "X issues need help" link
-			select('[href*="issues?q=label%3A%22help+wanted"]', repository)?.remove();
-
-			// Place before the "Updated on" element
-			select('relative-time', repository)!.previousSibling!.before(
-				<a
-					className="Link--muted mr-3"
-					href={repositoryLink.href + '/issues?q=is%3Aissue+is%3Aopen'}
-				>
-					<IssueOpenedIcon/>
-				</a>,
-				<a
-					className="Link--muted mr-3"
-					href={repositoryLink.href + '/pulls?q=is%3Apr+is%3Aopen'}
-				>
-					<GitPullRequestIcon/>
-				</a>,
-			);
-		},
+		add: addConversationLinks,
 	});
 }
 
diff --git a/source/features/convert-pr-to-draft-improvements.tsx b/source/features/convert-pr-to-draft-improvements.tsx
index 22d3ca7c..2cef203c 100644
--- a/source/features/convert-pr-to-draft-improvements.tsx
+++ b/source/features/convert-pr-to-draft-improvements.tsx
@@ -12,6 +12,19 @@ function closeModal({delegateTarget: button}: delegate.Event<MouseEvent, HTMLBut
 	button.disabled = true;
 }
 
+function addConvertToDraftButton(alternativeActions: Element): void {
+	const existingButton = select('[data-url$="/convert_to_draft"]');
+	// Needs to check the existence of both to guarantee the non-draft state
+	if (!existingButton || select.exists('[action$="/ready_for_review"]')) {
+		return;
+	}
+
+	alternativeActions.classList.add('rgh-convert-pr-draft-position');
+	const convertToDraft = existingButton.closest('details')!.cloneNode(true);
+	select('.Link--muted', convertToDraft)!.classList.remove('Link--muted');
+	alternativeActions.prepend(convertToDraft);
+}
+
 function init(): Deinit[] {
 	return [
 		// Immediately close lightbox after click instead of waiting for the ajaxed widget to refresh
@@ -19,18 +32,7 @@ function init(): Deinit[] {
 
 		// Copy button to mergeability box
 		observe('.alt-merge-options:not(.rgh-convert-pr-draft-position)', {
-			add(alternativeActions) {
-				const existingButton = select('[data-url$="/convert_to_draft"]');
-				// Needs to check the existence of both to guarantee the non-draft state
-				if (!existingButton || select.exists('[action$="/ready_for_review"]')) {
-					return;
-				}
-
-				alternativeActions.classList.add('rgh-convert-pr-draft-position');
-				const convertToDraft = existingButton.closest('details')!.cloneNode(true);
-				select('.Link--muted', convertToDraft)!.classList.remove('Link--muted');
-				alternativeActions.prepend(convertToDraft);
-			},
+			add: addConvertToDraftButton,
 		}),
 	];
 }
diff --git a/source/features/highlight-deleted-and-added-files-in-diffs.tsx b/source/features/highlight-deleted-and-added-files-in-diffs.tsx
index 7184b2dc..082714f2 100644
--- a/source/features/highlight-deleted-and-added-files-in-diffs.tsx
+++ b/source/features/highlight-deleted-and-added-files-in-diffs.tsx
@@ -17,6 +17,27 @@ async function loadDeferred(jumpList: Element): Promise<void> {
 	clearInterval(retrier);
 }
 
+function highlightFilename(filename: HTMLAnchorElement, sourceIcon: SVGSVGElement): void {
+	filename.classList.add('rgh-pr-file-state');
+
+	const icon = sourceIcon.cloneNode(true);
+	const action = icon.getAttribute('title')!;
+	if (action === 'added') {
+		icon.classList.add('color-text-success', 'color-fg-success');
+	} else if (action === 'removed') {
+		icon.classList.add('color-text-danger', 'color-fg-danger');
+	} else {
+		return;
+	}
+
+	icon.classList.remove('select-menu-item-icon');
+	filename.parentElement!.append(
+		<span className="tooltipped tooltipped-s ml-1" aria-label={'File ' + action}>
+			{icon}
+		</span>,
+	);
+}
+
 async function init(): Promise<Deinit> {
 	const fileList = await elementReady([
 		'.toc-select details-menu[src*="/show_toc?"]', // `isPR`
@@ -31,26 +52,11 @@ async function init(): Promise<Deinit> {
 	return observe('.file-info .Link--primary:not(.rgh-pr-file-state)', {
 		constructor: HTMLAnchorElement,
 		add(filename) {
-			filename.classList.add('rgh-pr-file-state');
 			const sourceIcon = pageDetect.isPR()
 				? select(`[href="${filename.hash}"] svg`, fileList)!
 				: select(`svg + [href="${filename.hash}"]`, fileList)?.previousElementSibling as SVGSVGElement;
-			const icon = sourceIcon.cloneNode(true);
-			const action = icon.getAttribute('title')!;
-			if (action === 'added') {
-				icon.classList.add('color-text-success', 'color-fg-success');
-			} else if (action === 'removed') {
-				icon.classList.add('color-text-danger', 'color-fg-danger');
-			} else {
-				return;
-			}
 
-			icon.classList.remove('select-menu-item-icon');
-			filename.parentElement!.append(
-				<span className="tooltipped tooltipped-s ml-1" aria-label={'File ' + action}>
-					{icon}
-				</span>,
-			);
+			highlightFilename(filename, sourceIcon);
 		},
 	});
 }
diff --git a/source/features/link-to-github-io.tsx b/source/features/link-to-github-io.tsx
index 8686033b..b8cd93c6 100644
--- a/source/features/link-to-github-io.tsx
+++ b/source/features/link-to-github-io.tsx
@@ -7,34 +7,34 @@ import {LinkExternalIcon} from '@primer/octicons-react';
 import features from '.';
 import {getRepo} from '../github-helpers';
 
-async function initRepo(): Promise<void> {
-	const repoTitle = await elementReady('[itemprop="name"]');
-	repoTitle!.after(
+function getLinkToGitHubIo(repoTitle: HTMLElement): JSX.Element {
+	return (
 		<a
-			className="mr-2"
-			href={`https://${repoTitle!.textContent!.trim()}`}
+			href={`https://${repoTitle.textContent!.trim()}`}
 			target="_blank"
 			rel="noopener noreferrer"
 		>
 			<LinkExternalIcon className="v-align-middle"/>
-		</a>,
+		</a>
 	);
 }
 
+async function initRepo(): Promise<void> {
+	const repoTitle = (await elementReady('[itemprop="name"]'))!;
+	const link = getLinkToGitHubIo(repoTitle);
+
+	link.classList.add('mr-2');
+	repoTitle.after(link);
+}
+
 function initRepoList(): Deinit {
 	return observe('a[href$=".github.io"][itemprop="name codeRepository"]:not(.rgh-github-io)', {
 		constructor: HTMLAnchorElement,
-		add(repository) {
-			repository.classList.add('rgh-github-io');
-			repository.after(
+		add(repoTitle) {
+			repoTitle.classList.add('rgh-github-io');
+			repoTitle.after(
 				' ',
-				<a
-					href={`https://${repository.textContent!.trim()}`}
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<LinkExternalIcon className="v-align-middle"/>
-				</a>,
+				getLinkToGitHubIo(repoTitle),
 			);
 		},
 	});
diff --git a/source/features/linkify-code.tsx b/source/features/linkify-code.tsx
index a4049dd3..2abd2c84 100644
--- a/source/features/linkify-code.tsx
+++ b/source/features/linkify-code.tsx
@@ -19,20 +19,22 @@ function initTitle(): void {
 	}
 }
 
-function init(): Deinit {
-	return observe(`:is(${codeElementsSelector}):not(.${linkifiedURLClass})`, {
-		add(wrappers) {
-			linkifyURLs(wrappers);
+function linkifyContent(wrapper: Element): void {
+	linkifyURLs(wrapper);
+
+	// Linkify issue refs in comments
+	const currentRepo = getRepo() ?? {};
+	for (const element of select.all('.pl-c', wrapper)) {
+		linkifyIssues(currentRepo, element);
+	}
 
-			// Linkify issue refs in comments
-			const currentRepo = getRepo() ?? {};
-			for (const element of select.all('.pl-c', wrappers)) {
-				linkifyIssues(currentRepo, element);
-			}
+	// Mark code block as touched to avoid linkifying twice https://github.com/refined-github/refined-github/pull/4710#discussion_r694896008
+	wrapper.classList.add(linkifiedURLClass);
+}
 
-			// Mark code block as touched to avoid linkifying twice https://github.com/refined-github/refined-github/pull/4710#discussion_r694896008
-			wrappers.classList.add(linkifiedURLClass);
-		},
+function init(): Deinit {
+	return observe(`:is(${codeElementsSelector}):not(.${linkifiedURLClass})`, {
+		add: linkifyContent,
 	});
 }
 
diff --git a/source/features/linkify-labels-on-dashboard.tsx b/source/features/linkify-labels-on-dashboard.tsx
index 0d3d72d0..35f7ecfe 100644
--- a/source/features/linkify-labels-on-dashboard.tsx
+++ b/source/features/linkify-labels-on-dashboard.tsx
@@ -6,18 +6,21 @@ import * as pageDetect from 'github-url-detection';
 import {wrap} from '../helpers/dom-utils';
 import features from '.';
 
+function linkifyLabel(label: Element): void {
+	const activity = label.closest('div:not([class])')!;
+	const isPR = select.exists('.octicon-git-pull-request', activity);
+	const repository = select('a[data-hovercard-type="repository"]', activity)!;
+	const url = new URL(`${repository.href}/${isPR ? 'pulls' : 'issues'}`);
+	const labelName = label.textContent!.trim();
+
+	url.searchParams.set('q', `is:${isPR ? 'pr' : 'issue'} is:open sort:updated-desc label:"${labelName}"`);
+	wrap(label, <a href={url.href}/>);
+}
+
 function init(): Deinit {
 	// A `:not(.rgh)` selector is not needed since we already check for `not(a)` #3625
 	return observe('.news :not(a) > .IssueLabel', {
-		add(label) {
-			const activity = label.closest('div:not([class])')!;
-			const isPR = select.exists('.octicon-git-pull-request', activity);
-			const repository = select('a[data-hovercard-type="repository"]', activity)!;
-			const url = new URL(`${repository.href}/${isPR ? 'pulls' : 'issues'}`);
-			const labelName = label.textContent!.trim();
-			url.searchParams.set('q', `is:${isPR ? 'pr' : 'issue'} is:open sort:updated-desc label:"${labelName}"`);
-			wrap(label, <a href={url.href}/>);
-		},
+		add: linkifyLabel,
 	});
 }
 
diff --git a/source/features/more-dropdown-links.tsx b/source/features/more-dropdown-links.tsx
index a3d51dc2..9434f729 100644
--- a/source/features/more-dropdown-links.tsx
+++ b/source/features/more-dropdown-links.tsx
@@ -5,18 +5,10 @@ import * as pageDetect from 'github-url-detection';
 
 import features from '.';
 import getDefaultBranch from '../github-helpers/get-default-branch';
+import createDropdownItem from '../github-helpers/create-dropdown-item';
 import {buildRepoURL, getCurrentCommittish} from '../github-helpers';
 
-export function createDropdownItem(label: string, url: string, attributes?: Record<string, string>): Element {
-	return (
-		<li {...attributes}>
-			<a role="menuitem" className="dropdown-item" href={url}>
-				{label}
-			</a>
-		</li>
-	);
-}
-
+// eslint-disable-next-line import/prefer-default-export
 export async function unhideOverflowDropdown(): Promise<void> {
 	// Wait for the tab bar to be loaded
 	const repoNavigationBar = await elementReady('.UnderlineNav-body');
diff --git a/source/features/profile-gists-link.tsx b/source/features/profile-gists-link.tsx
index e51ed7f2..afa744d9 100644
--- a/source/features/profile-gists-link.tsx
+++ b/source/features/profile-gists-link.tsx
@@ -8,7 +8,7 @@ import {CodeSquareIcon} from '@primer/octicons-react';
 import features from '.';
 import * as api from '../github-helpers/api';
 import {getCleanPathname} from '../github-helpers';
-import {createDropdownItem} from './more-dropdown-links';
+import createDropdownItem from '../github-helpers/create-dropdown-item';
 
 const getGistCount = cache.function(async (username: string): Promise<number> => {
 	const {user} = await api.v4(`
diff --git a/source/features/quick-label-removal.tsx b/source/features/quick-label-removal.tsx
index e2568868..52eb4dd7 100644
--- a/source/features/quick-label-removal.tsx
+++ b/source/features/quick-label-removal.tsx
@@ -36,25 +36,27 @@ async function removeLabelButtonClickHandler(event: delegate.Event<MouseEvent, H
 	label.remove();
 }
 
+function addRemoveLabelButton(label: HTMLElement): void {
+	label.classList.add('rgh-quick-label-removal-already-added', 'd-inline-flex');
+	label.append(
+		<button
+			type="button"
+			aria-label="Remove this label"
+			className="btn-link tooltipped tooltipped-nw rgh-quick-label-removal"
+			data-name={label.dataset.name}
+		>
+			<XIcon/>
+		</button>,
+	);
+}
+
 async function init(): Promise<Deinit[]> {
 	await api.expectToken();
 
 	return [
 		observe('.js-issue-labels .IssueLabel:not(.rgh-quick-label-removal-already-added)', {
 			constructor: HTMLElement,
-			add(label) {
-				label.classList.add('rgh-quick-label-removal-already-added', 'd-inline-flex');
-				label.append(
-					<button
-						type="button"
-						aria-label="Remove this label"
-						className="btn-link tooltipped tooltipped-nw rgh-quick-label-removal"
-						data-name={label.dataset.name}
-					>
-						<XIcon/>
-					</button>,
-				);
-			},
+			add: addRemoveLabelButton,
 		}),
 
 		delegate(document, '.rgh-quick-label-removal:not([disabled])', 'click', removeLabelButtonClickHandler),
diff --git a/source/features/releases-tab.tsx b/source/features/releases-tab.tsx
index 39e975be..22a9b0b0 100644
--- a/source/features/releases-tab.tsx
+++ b/source/features/releases-tab.tsx
@@ -10,7 +10,7 @@ import features from '.';
 import * as api from '../github-helpers/api';
 import looseParseInt from '../helpers/loose-parse-int';
 import abbreviateNumber from '../helpers/abbreviate-number';
-import {createDropdownItem} from './more-dropdown-links';
+import createDropdownItem from '../github-helpers/create-dropdown-item';
 import {buildRepoURL, getRepo} from '../github-helpers';
 import {appendBefore, highlightTab, unhighlightTab} from '../helpers/dom-utils';
 
diff --git a/source/features/rgh-linkify-features.tsx b/source/features/rgh-linkify-features.tsx
index 614097c5..dc6def5b 100644
--- a/source/features/rgh-linkify-features.tsx
+++ b/source/features/rgh-linkify-features.tsx
@@ -64,7 +64,6 @@ void features.add(import.meta.url, {
 		pageDetect.isReleasesOrTags,
 		pageDetect.isCommitList,
 		pageDetect.isSingleCommit,
-		pageDetect.isRepoTree,
 	],
 	deduplicate: 'has-rgh-inner',
 	init,
diff --git a/source/features/show-associated-branch-prs-on-fork.tsx b/source/features/show-associated-branch-prs-on-fork.tsx
index c824f399..5d4c647f 100644
--- a/source/features/show-associated-branch-prs-on-fork.tsx
+++ b/source/features/show-associated-branch-prs-on-fork.tsx
@@ -67,6 +67,30 @@ export const stateIcon = {
 	DRAFT: GitPullRequestDraftIcon,
 };
 
+function addAssociatedPRLabel(branchCompareLink: Element, prInfo: PullRequest): void {
+	const StateIcon = stateIcon[prInfo.state];
+	const state = upperCaseFirst(prInfo.state);
+
+	branchCompareLink.replaceWith(
+		<div className="d-inline-block text-right ml-3">
+			<a
+				data-issue-and-pr-hovercards-enabled
+				href={prInfo.url}
+				data-hovercard-type="pull_request"
+				data-hovercard-url={prInfo.url + '/hovercard'}
+			>
+				#{prInfo.number}
+			</a>
+			{' '}
+			<span
+				className={`State State--${prInfo.state.toLowerCase()} State--small ml-1`}
+			>
+				<StateIcon width={14} height={14}/> {state}
+			</span>
+		</div>,
+	);
+}
+
 async function init(): Promise<Deinit> {
 	const associatedPullRequests = await getPullRequestsAssociatedWithBranch();
 
@@ -75,27 +99,7 @@ async function init(): Promise<Deinit> {
 			const branchName = branchCompareLink.closest('[branch]')!.getAttribute('branch')!;
 			const prInfo = associatedPullRequests[branchName];
 			if (prInfo) {
-				const StateIcon = stateIcon[prInfo.state];
-				const state = upperCaseFirst(prInfo.state);
-
-				branchCompareLink.replaceWith(
-					<div className="d-inline-block text-right ml-3">
-						<a
-							data-issue-and-pr-hovercards-enabled
-							href={prInfo.url}
-							data-hovercard-type="pull_request"
-							data-hovercard-url={prInfo.url + '/hovercard'}
-						>
-							#{prInfo.number}
-						</a>
-						{' '}
-						<span
-							className={`State State--${prInfo.state.toLowerCase()} State--small ml-1`}
-						>
-							<StateIcon width={14} height={14}/> {state}
-						</span>
-					</div>,
-				);
+				addAssociatedPRLabel(branchCompareLink, prInfo);
 			}
 		},
 	});
diff --git a/source/features/show-names.tsx b/source/features/show-names.tsx
index e9504826..8df35984 100644
--- a/source/features/show-names.tsx
+++ b/source/features/show-names.tsx
@@ -47,26 +47,26 @@ async function init(): Promise<false | void> {
 
 		// For the currently logged in user, `names[userKey]` would not be present.
 		const {name} = names[userKey] ?? {};
+		if (!name) {
+			continue;
+		}
 
-		if (name) {
-			// If it's a regular comment author, add it outside <strong>
-			// otherwise it's something like "User added some commits"
-			if (compareNames(username, name)) {
-				usernameElement.textContent = name;
-			} else {
-				const {parentElement} = usernameElement;
-				const insertionPoint = parentElement!.tagName === 'STRONG'
-					? parentElement!
-					: usernameElement;
-				insertionPoint.after(
-					' ',
-					<span className="color-text-secondary color-fg-muted css-truncate d-inline-block">
-						(<bdo className="css-truncate-target" style={{maxWidth: '200px'}}>{name}</bdo>)
-					</span>,
-					' ',
-				);
-			}
+		// If it's a regular comment author, add it outside <strong>
+		// otherwise it's something like "User added some commits"
+		if (compareNames(username, name)) {
+			usernameElement.textContent = name;
+			continue;
 		}
+
+		const {parentElement} = usernameElement;
+		const insertionPoint = parentElement!.tagName === 'STRONG' ? parentElement! : usernameElement;
+		insertionPoint.after(
+			' ',
+			<span className="color-text-secondary color-fg-muted css-truncate d-inline-block">
+				(<bdo className="css-truncate-target" style={{maxWidth: '200px'}}>{name}</bdo>)
+			</span>,
+			' ',
+		);
 	}
 }
 
diff --git a/source/github-events/on-discussion-sidebar-update.ts b/source/github-events/on-discussion-sidebar-update.ts
index 1abd58d9..7a643f4d 100644
--- a/source/github-events/on-discussion-sidebar-update.ts
+++ b/source/github-events/on-discussion-sidebar-update.ts
@@ -1,8 +1,8 @@
-import onReplacedElement from '../helpers/on-replaced-element';
+import onElementReplacement from '../helpers/on-element-replacement';
 import type {CallerFunction} from '../features';
 
 const onDiscussionSidebarUpdate: CallerFunction = (runFeature, signal) => {
-	void onReplacedElement('#partial-discussion-sidebar', runFeature, {signal});
+	void onElementReplacement('#partial-discussion-sidebar', runFeature, {signal});
 };
 
 export default onDiscussionSidebarUpdate;
diff --git a/source/github-helpers/create-dropdown-item.tsx b/source/github-helpers/create-dropdown-item.tsx
new file mode 100644
index 00000000..1341607a
--- /dev/null
+++ b/source/github-helpers/create-dropdown-item.tsx
@@ -0,0 +1,11 @@
+import React from 'dom-chef';
+
+export default function createDropdownItem(label: string, url: string, attributes?: Record<string, string>): Element {
+	return (
+		<li {...attributes}>
+			<a role="menuitem" className="dropdown-item" href={url}>
+				{label}
+			</a>
+		</li>
+	);
+}
diff --git a/source/helpers/on-replaced-element.ts b/source/helpers/on-element-replacement.ts
index 70269e76..a4ec40ae 100644
--- a/source/helpers/on-replaced-element.ts
+++ b/source/helpers/on-element-replacement.ts
@@ -9,7 +9,7 @@ Tracks the replacement of an element, identified via selector.
 @param callback The function to call after it's replaced
 */
 
-export default async function onReplacedElement(
+export default async function onElementReplacement(
 	selector: string,
 	callback: (element: HTMLElement) => void,
 	{runCallbackOnStart = false, signal}: {runCallbackOnStart?: boolean; signal?: AbortSignal} = {},
diff --git a/source/refined-github.css b/source/refined-github.css
index adbcc461..9d150fd6 100644
--- a/source/refined-github.css
+++ b/source/refined-github.css
@@ -34,22 +34,15 @@
 	display: none !important;
 }
 
-/* Hide `New pull request button` near file list */
-.file-navigation .new-pull-request-btn {
-	display: none;
-}
-
-@keyframes fade-in {
-	from {
-		opacity: 0%;
-	}
-}
-
 /* Smoothen mouse animation on 404 pages */
 .js-plaxify {
 	transition: transform 0.1s;
 }
 
+[alt='404 “This is not the web page you are looking for”'] {
+	animation: fade-in 2s ease-out;
+}
+
 /* Remove "Seeing something unexpected?" from user profiles */
 #js-contribution-activity .js-show-more-timeline-form > p {
 	display: none;