Add highest-rated-comment feature

.github/CODEOWNERS

@@ -5,3 +5,4 @@ source/features/link-to-file-in-file-history.tsx @HardikModha
 source/features/default-to-rich-diff.tsx @idasbiste
 source/features/indented-code-wrapping.tsx @notlmn
 source/features/open-issue-to-latest-comment.tsx @dotconnor
+source/features/highest-rated-comment.tsx @lubien

source/content.ts

@@ -102,6 +102,7 @@ import './features/tag-changelog-link';
 import './features/link-to-file-in-file-history';
 import './features/clean-sidebar';
 import './features/open-issue-to-latest-comment';
+import './features/highest-rated-comment';
 
 import './features/scrollable-code-and-blockquote.css';
 import './features/center-reactions-popup.css';

source/features/highest-rated-comment.css

@@ -0,0 +1,12 @@
+.rgh-highest-rated-comment {
+	border-width: 1px;
+	border-style: solid;
+	border-color: #ffa500 !important;
+}
+
+.rgh-highest-rated-comment .rgh-highest-rated-comment-text {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	flex-grow: 1;
+}

source/features/highest-rated-comment.tsx

@@ -0,0 +1,75 @@
+import './highest-rated-comment.css';
+import React from 'dom-chef';
+import select from 'select-dom';
+import features from '../libs/features';
+import * as icons from '../libs/icons';
+
+type Props = {
+	hash: string;
+	text: string;
+	avatar: HTMLImageElement;
+}
+
+const element = ({hash, text, avatar}: Props): Node => (
+	<div className="timeline-comment-wrapper">
+		{avatar}
+
+		<a href={hash} className="no-underline rounded-1 rgh-highest-rated-comment d-block">
+			<div className="bg-gray px-2 d-flex flex-items-center">
+				<span className="btn btn-sm mr-2 pr-1">
+					{icons.arrowDown()}
+				</span>
+
+				<div className="text-gray timeline-comment-header-text rgh-highest-rated-comment-text">
+					Highest-rated comment: <em>{text}</em>
+				</div>
+			</div>
+		</a>
+	</div>
+);
+
+function getCount(reaction: HTMLElement): number {
+	return Number(reaction.textContent!.match(/\d+/)![0]);
+}
+
+function init(): false | void {
+	let highest;
+	const likes = select.all('.js-discussion .js-timeline-item:nth-child(n+6) [aria-label*="reacted with thumbs up"]');
+	for (const like of likes) {
+		const count = getCount(like);
+		const dislike = select('[aria-label*="reacted with thumbs down"]', like.parentElement!);
+
+		if (dislike && getCount(dislike) >= count / 2) {
+			continue; // Controversial comment
+		}
+
+		if (!highest || count > highest.count) {
+			highest = {like, count};
+		}
+	}
+
+	if (!highest || highest.count < 10) {
+		return false;
+	}
+
+	const parent = highest.like.closest('.js-timeline-item')!;
+	const {hash} = select<HTMLAnchorElement>('.timestamp', parent)!;
+	const text = select('.comment-body', parent)!.textContent!.substring(0, 100);
+	const avatar = select('.avatar-parent-child.timeline-comment-avatar', parent)!
+		.cloneNode(true) as HTMLImageElement;
+	const props: Props = {hash, text, avatar};
+
+	select('.js-discussion')!.prepend(element(props));
+	select('.comment', parent)!.classList.add('rgh-highest-rated-comment');
+}
+
+features.add({
+	id: 'highest-rated-comment',
+	description: 'Highlight and make a shortcut to most useful comments in issues.',
+	screenshot: 'https://i.imgur.com/vXmv0R6.png',
+	include: [
+		features.isIssue
+	],
+	load: features.onAjaxedPages,
+	init
+});

source/libs/icons.tsx

@@ -67,3 +67,5 @@ export const privateLockFilled = (): SVGElement => (
 		<path d="M5.05 9.46h-1v-1h1zm0 2.93h-1v1h1zm0-2h-1v1h1z" />
 	</svg>
 );
+
+export const arrowDown = (): SVGElement => <svg aria-hidden="true" className="octicon octicon-arrow-down" width="16" height="16"><path d="M7 7V3H3v4H0l5 6 5-6H7z" /></svg>;