From f76269530065cf1e9cf5090992a9dd5ee612e5ea Mon Sep 17 00:00:00 2001
From: Aevann <randomname42029@gmail.com>
Date: Sun, 22 Jan 2023 07:30:57 +0200
Subject: [PATCH] highlight ur quoted msgs

---
 files/assets/js/chat.js   | 21 ++++++++++++---------
 files/templates/chat.html |  4 ++--
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/files/assets/js/chat.js b/files/assets/js/chat.js
index dac2e544f..1c152c191 100644
--- a/files/assets/js/chat.js
+++ b/files/assets/js/chat.js
@@ -29,7 +29,6 @@ const textbox = document.getElementById('input-text')
 const icon = document.querySelector("link[rel~='icon']")
 
 const vid = document.getElementById('vid').value
-const vusername = document.getElementById('vusername').value
 const site_name = document.getElementById('site_name').value
 const slurreplacer = document.getElementById('slurreplacer').value
 
@@ -72,23 +71,21 @@ socket.on('speak', function(json) {
 	if (slurreplacer != '0') text_html = json['text_censored']
 	else text_html = json['text_html']
 
+	chatline.classList.remove('chat-mention');
 	if (text_html.includes(`<a href="/id/${vid}">`)){
 		chatline.classList.add('chat-mention');
 	}
-	else {
-		chatline.classList.remove('chat-mention');
-	};
 
 	notifs = notifs + 1;
 	if (notifs == 1) {
 		setTimeout(flash, 500);
 	}
 
-	const users = document.getElementsByClassName('userlink');
-	const last_user = users[users.length-1].innerHTML;
+	const users = document.getElementsByClassName('user_id');
+	const last_user = users[users.length-1].value;
 	const scrolled_down = (box.scrollHeight - box.scrollTop <= window.innerHeight)
 
-	if (last_user != json['username']) {
+	if (last_user != json['user_id']) {
 		document.getElementsByClassName('avatar-pic')[0].src = '/pp/' + json["user_id"]
 
 		if (json['hat'])
@@ -100,6 +97,8 @@ socket.on('speak', function(json) {
 		document.getElementsByClassName('userlink')[0].style.color = '#' + json['namecolor']
 		document.getElementsByClassName('userlink')[0].innerHTML = json['username']
 
+		document.getElementsByClassName('user_id')[0].value = json['user_id']
+
 		if (Date.now() - json['time']*1000 > 5000)
 			document.getElementsByClassName('time')[0].innerHTML = timeSince(json['time']*1000) + ' ago'
 		else
@@ -114,6 +113,10 @@ socket.on('speak', function(json) {
 	if (json['quotes']) {
 		const quoted = document.getElementById(json['quotes'])
 		if (quoted) {
+			const quoted_user = quoted.parentElement.querySelector('.user_id').value
+			if (quoted_user == vid){
+				chatline.classList.add('chat-mention');
+			}
 			document.getElementsByClassName('quotes')[0].classList.remove("d-none")
 			document.getElementsByClassName('QuotedMessageLink')[0].href = '#' + json['quotes']
 			document.getElementsByClassName('QuotedUser')[0].innerHTML = quoted.parentElement.querySelector('.userlink').innerHTML
@@ -124,7 +127,7 @@ socket.on('speak', function(json) {
 	let line = document.getElementsByClassName('chat-line')[0].cloneNode(true)
 	register_new_elements(line);
 	bs_trigger(line)
-	if (last_user == json['username']) {
+	if (last_user == json['user_id']) {
 		box.querySelector('.chat-group:last-child').append(line)
 	}
 	else {
@@ -133,7 +136,7 @@ socket.on('speak', function(json) {
 		box.append(chatgroup)
 	}
 
-	if (scrolled_down || json['username'] == vusername)
+	if (scrolled_down || json['user_id'] == vid)
 		box.scrollTo(0, box.scrollHeight)
 })
 
diff --git a/files/templates/chat.html b/files/templates/chat.html
index 5daca1a1e..5bb605cd5 100644
--- a/files/templates/chat.html
+++ b/files/templates/chat.html
@@ -33,10 +33,11 @@
 						{% if m %}{{m['username']}}{% endif %}
 					</a>
 					<span class="text-black time ml-1 mb-3 text-center">{% if m %}{{m['time'] | timestamp}}{% else %}just now{% endif %}</span>
+					<input hidden class="user_id" {% if m %}value="{{m['user_id']}}"{% endif %}>
 			{% endmacro %}
 
 			{% macro chat_line_template(id, m) %}
-				<div class="chat-line {% if m and vlink in m['text_html'] %}chat-mention{% endif %}" {% if m %}id="{{id}}"{% endif %}>
+				<div class="chat-line {% if m and (vlink in m['text_html'] or (m['quotes'] and messages[m['quotes']]['user_id'] == v.id)) %}chat-mention{% endif %}" {% if m %}id="{{id}}"{% endif %}>
 					<div class="d-flex align-items-center">
 						<div class="text-muted chat-line-content">
 							<div class="{% if not (m and m['quotes']) %}d-none{% endif %} quotes" style="font-size:12px">
@@ -134,7 +135,6 @@
 	</div>
 
 	<input id="vid" type="hidden" value="{{v.id}}">
-	<input id="vusername" type="hidden" value="{{v.username}}">
 	<input id="site_name" type="hidden" value="{{SITE_NAME}}">
 	<input id="slurreplacer" type="hidden" value="{{v.slurreplacer}}">
 	<script defer src="{{'js/vendor/socketio.js' | asset}}"></script>