hover user ID for post count in thread and dbl click to highlight all posts

gulp/res/css/style.css

@@ -536,6 +536,11 @@ details.actions div {
 	padding: 0px 2px;
 	border: 1px solid rgba(0, 0, 0, 0.4);
 	border-radius: 1px;
+	cursor: pointer;
+}
+
+.user-id:hover::after {
+	content: attr(data-count);
 }
 
 .post-check {

gulp/res/js/threadstat.js

@@ -1,12 +1,42 @@
 window.addEventListener('DOMContentLoaded', (event) => {
 
 	const statsElem = document.getElementById('threadstats');
-	if (statsElem) {
-		const uidElems = document.getElementsByClassName('user-id');
-		const uidSet = new Set();
-		for(let i = 0; i < uidElems.length; i++) {
-			uidSet.add(uidElems[i].innerText);
+	const idElems = [];
+	const idMap = new Map();
+
+	const incrementMap = (id) => {
+		idMap.set(id, idMap.get(id)+1 || 1);
+	}
+
+	const updateCounts = () => {
+		for(let i = 0; i < idElems.length; i++) {
+			idElems[i].setAttribute('data-count', ` (${idMap.get(idElems[i].innerText)})`);
+		}
+	}
+
+	const toggleHighlightPosts = (e) => {
+		const id = e.target.innerText;
+		const idPosts = document.querySelectorAll(`.post-container[data-user-id="${id}"]`);
+		for(let i = 0; i < idPosts.length; i++) {
+			idPosts[i].classList.toggle('highlighted');
 		}
+	}
+
+	//fetch starting ids
+	const startElems = document.getElementsByClassName('user-id');
+	for(let i = 0; i < startElems.length; i++) {
+		idElems.push(startElems[i]);
+		startElems[i].addEventListener('dblclick', toggleHighlightPosts);
+	}
+	//set counts
+	for(let i = 0; i < idElems.length; i++) {
+		incrementMap(idElems[i].innerText);
+	}
+
+	if (isThread) {
+		//set the attr for css hover count
+		updateCounts();
+
 		window.addEventListener('addPost', function(e) {
 			if (e.detail.hover) {
 				return; //dont need to handle hovered posts for this
@@ -19,7 +49,10 @@ window.addEventListener('DOMContentLoaded', (event) => {
 			statsElem.children[0].innerText = `${postTotal} repl${postTotal === 1 ? 'y' : 'ies'}`;
 			statsElem.children[1].innerText = `${filesTotal} file${filesTotal === 1 ? '' : 's'}`;
 			if (e.detail.json.userId) {
-				uidSet.add(e.detail.json.userId);
+				const userId = e.detail.post.querySelector('.user-id');
+				idElems.push(userId);
+				incrementMap(e.detail.json.userId);
+				updateCounts();
 				if (!statsElem.children[2]) {
 					//UIDs enabled after thread generated
 					const spacer = document.createTextNode(' |  ');
@@ -27,7 +60,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
 					statsElem.appendChild(spacer);
 					statsElem.appendChild(uidSpan);
 				}
-				statsElem.children[2].innerText = `${uidSet.size} UID${uidSet.size === 1 ? '' : 's'}`;
+				statsElem.children[2].innerText = `${idMap.size} UID${idMap.size === 1 ? '' : 's'}`;
 			}
 		});
 	}