☰

OzBargain User Tags & Votes

Add customisable tags and track votes against users on OzBargain

// ==UserScript==
// @name		OzBargain User Tags & Votes
// @namespace	nategasm
// @version		1.12
// @description	Add customisable tags and track votes against users on OzBargain
// @author		nategasm
// @license		MIT
// @include		https://www.ozbargain.com.au/*
// @icon		https://www.ozbargain.com.au/favicon.ico
// @run-at		document-end
// @grant		GM_setValue
// @grant		GM_getValue
// @grant		GM_addStyle
// ==/UserScript==

GM_addStyle(`
	.user-tag {
		margin-left: 3px;
	}
	.user-tag-name {
		padding: 1px 3px;
		margin-right: 3px;
		border-radius: 4px;
		font-weight: normal;
	}
	.user-tag .fa-tag {
		cursor: pointer;
	}
	.user-tag .fa-tag:hover {
		color: color-mix(in srgb, var(--shade2-bg) 90%, black) !important;
	}
	.user-tag .user-tag-votes {
		margin-right: 3px;
	}
	#tooltip.user-tag-modal {
		display: block;
		position: absolute;
		z-index: 10000;
		transition: opacity 0.3s ease;
		opacity: 1;
	}
	#tooltip.user-tag-modal.fade-out {
		opacity: 0;
	}
	.submitted strong:has(.user-tag),
	.submitted strong:has(.user-tag) a,
	.submitted strong:has(.user-tag-name) a,
	.submitted strong:has(.user-tag) .fa-tag {
		margin-right: 0px !important
	}
	.node .submitted strong:not(:has(.user-tag-name)) a {
		margin-right: 3px !important
	}
	.user-tag-modal input[type="color"] {
		width: 40px;
		height: 20px;
		padding: 2px;
		cursor: pointer;
	}
	#tooltip.user-tag-modal.left-offset::before {
		left: var(--arrow-offset, 50%);
	}
	#tooltip.user-tag-modal.above-icon::before {
		border-bottom: none;
		border-top-color: var(--tooltip-clr);
		top: 100%;
	}
`);

const DEFAULT_BG_COLOR = '#FFA500';
const DEFAULT_TEXT_COLOR = '#000000';
const TAG_STORAGE_KEY = 'userTagsById';
const VOTE_TRACKING_KEY = 'userTagsVoteTracking';
const VOTE_RULES_KEY = 'userTagsVoteRules';
const voteCooldown = new Set();

async function getTags() {
	return (await GM_getValue(TAG_STORAGE_KEY)) || {};
}
async function saveTags(tags) {
	await GM_setValue(TAG_STORAGE_KEY, tags);
}

async function isVoteTrackingEnabled() {
	return (await GM_getValue(VOTE_TRACKING_KEY)) !== false; //Default to true
}
async function setVoteTrackingEnabled(enabled) {
	await GM_setValue(VOTE_TRACKING_KEY, enabled);
}

async function isVoteRulesEnabled() {
	return (await GM_getValue(VOTE_RULES_KEY)) !== false; //Default to true
}
async function setVoteRulesEnabled(enabled) {
	await GM_setValue(VOTE_RULES_KEY, enabled);
}

async function setTag(userId, tag, bgColor, textColor, src) {
	const tags = await getTags();
	tags[userId] = {
		...(tags[userId] || {}),
		tag: tag?.trim() || undefined,
		bg: bgColor || undefined,
		txt: textColor || undefined,
		src: src || undefined
	};
	if (!tags[userId].tag && (!tags[userId].pV || tags[userId].pV === 0)
		&& (!tags[userId].nV || tags[userId].nV === 0)) {
		delete tags[userId];
	}
	await saveTags(tags);
}

async function clearAllTags() {
	if (confirm('Are you sure you want to delete tags for all users? \nThis cannot be reversed unless you have exported a backup')) {
	  await saveTags({});
	  alert('All tags deleted. Refresh to see changes');
	}
}

function extractUserId(anchor) {
	const match = anchor.getAttribute('href').match(/\/user\/(\d+)/);
	return match ? match[1] : null;
}

function closeExistingModal() {
	const existing = document.querySelector('.user-tag-modal');
	if (existing) existing.remove();
	//Close site tooltips
	const tooltip = document.querySelector('#tooltip');
	if (tooltip && getComputedStyle(tooltip).display !== 'none') {
		tooltip.querySelector('#tooltip-close')?.click();
	}
}

async function createTagElement(userId, tagData = {}, username = '', source, voteTracking, nodeGrid) {
	const wrapper = document.createElement('span');
	wrapper.classList.add('user-tag');
	let userTag;
	let userVotes;
	//Get votes
	if (voteTracking && (tagData.pV || tagData.nV)) {
		const voteCount = (tagData.pV || 0) - (tagData.nV || 0);
		userVotes = document.createElement('span');
		userVotes.classList.add('user-tag-votes');
		userVotes.textContent = `${nodeGrid ? ' ' : ''}[${voteCount >= 0 ? '+' : ''}${voteCount}]`;
		userVotes.title = `${tagData.pV || 0} upvotes, ${tagData.nV || 0} downvotes`;
	}
	//Get tag
	if (tagData.tag) {
		userTag = document.createElement('span');
		userTag.classList.add('user-tag-name');
		userTag.textContent = tagData.tag;
		userTag.style.backgroundColor = tagData.bg || DEFAULT_BG_COLOR;
		userTag.style.color = tagData.txt || DEFAULT_TEXT_COLOR;
		if (nodeGrid && !userVotes) userTag.style.marginLeft = '3px';
	}

	const icon = document.createElement('span');
	icon.classList.add('fa','fa-tag');
	icon.title = 'Edit tag';
	icon.addEventListener('click', async (e) => {
		e.stopPropagation();
		closeExistingModal();

		const modal = document.createElement('div');
		modal.setAttribute('id', 'tooltip');
		modal.classList.add('user-tag-modal');

		const head = document.createElement('div');
		head.setAttribute('id', 'tooltip-head');
		const headClose = document.createElement('i');
		headClose.setAttribute('id', 'tooltip-close');
		headClose.classList.add('fa','fa-times');
		headClose.onclick = () => fadeOutAndRemove(modal);
		const headTitle = document.createElement('div');
		headTitle.setAttribute('id', 'tooltip-title');
		headTitle.textContent = 'User Tag Editor';
		head.appendChild(headClose);
		head.appendChild(headTitle);

		const label = document.createElement('label');
		label.innerHTML = `<b>${username}</b>`;
		let sourceLink;
		if (tagData.tag && source) {
			sourceLink = document.createElement('a');
			sourceLink.classList.add('internal');
			sourceLink.href = '/' + source;
			sourceLink.textContent = '[Src]';
			sourceLink.title = 'Source where tag was created';
			sourceLink.style.marginLeft = '3px';
		}
		label.innerHTML = `<b>${username}</b>`;
		const input = document.createElement('input');
		input.type = 'text';
		input.value = tagData.tag || '';
		input.style.marginTop = '5px';
		input.style.marginBottom = '7px';
		input.style.width = '100%';
		input.style.boxSizing = 'border-box';
		input.style.textAlign = 'center';
		input.placeholder = 'Enter user tag';

		const bgColorInput = document.createElement('input');
		bgColorInput.type = 'color';
		bgColorInput.value = /^#[0-9A-Fa-f]{6}$/.test(tagData.bg) ? tagData.bg : DEFAULT_BG_COLOR;
		bgColorInput.style.marginTop = '8px';
		bgColorInput.style.marginBottom = '8px';

		const textColorInput = document.createElement('input');
		textColorInput.type = 'color';
		textColorInput.value = /^#[0-9A-Fa-f]{6}$/.test(tagData.txt) ? tagData.txt : DEFAULT_TEXT_COLOR;
		textColorInput.style.marginBottom = '8px';

		const preview = document.createElement('span');
		preview.textContent = input.value;
		preview.style.padding = '2px 4px';
		preview.style.borderRadius = '4px';
		preview.style.backgroundColor = bgColorInput.value;
		preview.style.color = textColorInput.value;
		preview.style.fontSize = 'smaller';

		function updatePreview() {
			preview.textContent = input.value;
			preview.style.backgroundColor = bgColorInput.value;
			preview.style.color = textColorInput.value;
		}

		input.addEventListener('input', updatePreview);
		bgColorInput.addEventListener('input', updatePreview);
		textColorInput.addEventListener('input', updatePreview);

		const resetBtn = document.createElement('button');
		resetBtn.textContent = 'Reset Colour';
		resetBtn.classList.add('btn');
		resetBtn.style.marginRight = '5px';
		resetBtn.style.padding = '0px 8px';
		resetBtn.onclick = () => {
			bgColorInput.value = DEFAULT_BG_COLOR;
			textColorInput.value = DEFAULT_TEXT_COLOR;
			updatePreview();
		};

		const saveBtn = document.createElement('button');
		saveBtn.textContent = 'Save Tag';
		saveBtn.classList.add('btn','btn-primary');
		saveBtn.style.padding = '0px 8px';
		saveBtn.onclick = async () => {
			let bg = bgColorInput.value;
			let txt = textColorInput.value;
			if (!input.value) {
				source = undefined;
				bg = undefined;
				txt = undefined;
			}
			await setTag(userId, input.value, bg, txt, source);
			refreshUser(userId, voteTracking);
			fadeOutAndRemove(modal);
		};

		input.addEventListener('keydown', async (e) => {
			if (e.key === 'Enter') {
				e.preventDefault();
				await saveBtn.onclick();
			}
		});

		const toggleVotesCheckbox = document.createElement('input');
		toggleVotesCheckbox.type = 'checkbox';
		toggleVotesCheckbox.id = 'toggleVotes';
		toggleVotesCheckbox.style.marginBottom = '6px';
		toggleVotesCheckbox.checked = await isVoteTrackingEnabled();
		toggleVotesCheckbox.style.cursor = 'pointer';
		toggleVotesCheckbox.addEventListener('change', async () => {
			await setVoteTrackingEnabled(toggleVotesCheckbox.checked);
			alert('Vote tracking setting saved. Refresh page to apply');
		});
		toggleVotesCheckbox.title = 'Disabling will stop local vote tracking per user and remove them from display';

		const toggleVotesLabel = document.createElement('label');
		toggleVotesLabel.htmlFor = 'toggleVotes';
		toggleVotesLabel.textContent = 'Vote tracking';
		toggleVotesLabel.title = toggleVotesCheckbox.title;

		const toggleVoteRulesCheckbox = document.createElement('input');
		toggleVoteRulesCheckbox.type = 'checkbox';
		toggleVoteRulesCheckbox.id = 'toggleVoteRules';
		toggleVoteRulesCheckbox.style.marginBottom = '6px';
		toggleVoteRulesCheckbox.checked = await isVoteRulesEnabled();
		toggleVoteRulesCheckbox.style.cursor = 'pointer';
		toggleVoteRulesCheckbox.addEventListener('change', async () => {
			await setVoteRulesEnabled(toggleVoteRulesCheckbox.checked);
		});
		toggleVoteRulesCheckbox.title = `Disabling will allow local vote tracking where Ozbargain does not normally allow voting. This happens when a deal or comment is too old, for revoked votes, and when a comment hasn't been posted for negative deal votes`;

		const toggleRulesLabel = document.createElement('label');
		toggleRulesLabel.htmlFor = 'toggleVoteRules';
		toggleRulesLabel.textContent = '\u00A0\u00A0Voting rules';
		toggleRulesLabel.title = toggleVoteRulesCheckbox.title;

		const voteInfo = document.createElement('div');
		const net = (tagData.pV || 0) - (tagData.nV || 0);
		voteInfo.innerHTML = `<b>Votes:</b> +${tagData.pV || 0} / -${tagData.nV || 0} [<b>${net > 0 ? '+' : ''}${net}</b>]`;

		const resetVotesBtn = document.createElement('button');
		resetVotesBtn.textContent = 'Reset Votes';
		resetVotesBtn.classList.add('btn');
		resetVotesBtn.style.fontSize = '13px';
		resetVotesBtn.style.padding = '0px 4px';
		resetVotesBtn.style.marginLeft = '10px';
		resetVotesBtn.onclick = async () => {
			if (!tagData.pV && !tagData.nV) return;
			if (confirm(`Are you sure you want to reset votes for ${username}?`)) {
				tagData.pV = 0;
				tagData.nV = 0;
				const tags = await getTags();
				tags[userId] = tagData;
				if (!tags[userId].tag && (!tags[userId].pV || tags[userId].pV === 0)
					&& (!tags[userId].nV || tags[userId].nV === 0)) {
					delete tags[userId];
				}
				await saveTags(tags);
				refreshUser(userId, voteTracking);
				fadeOutAndRemove(modal);
			}
		};
		voteInfo.appendChild(resetVotesBtn);

		const exportBtn = document.createElement('button');
		exportBtn.textContent = 'Export Data';
		exportBtn.classList.add('btn');
		exportBtn.style.fontSize = '13px';
		exportBtn.style.padding = '0px 4px';
		exportBtn.style.marginRight = '5px';
		exportBtn.onclick = async () => {
			const tags = await getTags();
			const blob = new Blob([JSON.stringify(tags, null, 2)], { type: 'application/json' });
			const url = URL.createObjectURL(blob);
			const a = document.createElement('a');
			const currentDate = new Date();
			let month;
			if (currentDate.getMonth() < 9) {
				month = '0' + (currentDate.getMonth() + 1);
			} else {
				month = currentDate.getMonth() + 1;
			}
			let day;
			if (currentDate.getDate() < 10) {
				day = '0' + currentDate.getDate();
			} else {
				day = currentDate.getDate();
			}
			a.href = url;
			a.download = 'OzB_Usertags_Backup_' + currentDate.getFullYear() + month + day + '.json';
			a.click();
		};

		const importBtn = document.createElement('button');
		importBtn.textContent = 'Import Data';
		importBtn.classList.add('btn');
		importBtn.style.fontSize = '13px';
		importBtn.style.padding = '0px 4px';
		importBtn.style.marginRight = '5px';
		importBtn.onclick = () => {
			if (confirm(`Are you sure you want to import data? \nThis will overwrite existing user tags if they are also in the import but votes will be merged/added together \nNew users from Import will be added. Existing users not in import will be kept`)) {
				const input = document.createElement('input');
				input.type = 'file';
				input.accept = 'application/json';
				input.onchange = async (e) => {
					const file = e.target.files[0];
					if (file) {
						const text = await file.text();
						try {
							const importedTags = JSON.parse(text);
							const existingTags = await getTags();
							//Overwrite tag,bg,txt,src. Add pV,nV
							for (const userId in importedTags) {
								const imported = importedTags[userId];
								const existing = existingTags[userId] || {};
								existingTags[userId] = {
									tag: imported.tag !== undefined ? imported.tag : existing.tag,
									bg: imported.bg !== undefined ? imported.bg : existing.bg,
									txt: imported.txt !== undefined ? imported.txt : existing.txt,
									src: imported.src !== undefined ? imported.src : existing.src,
									pV: (existing.pV || 0) + (imported.pV || 0),
									nV: (existing.nV || 0) + (imported.nV || 0),
								};
							}
							await saveTags(existingTags);
							alert('Tags imported and merged! \nRefresh the page to see changes');
							addTags(); //Refresh tags on the page
						} catch (err) {
							alert('Error importing: Invalid JSON');
						}
					}
				};
				input.click();
			}
		};
		const deleteAllBtn = document.createElement('button');
		deleteAllBtn.textContent = 'Delete All';
		deleteAllBtn.classList.add('btn');
		deleteAllBtn.style.fontSize = '13px';
		deleteAllBtn.style.padding = '0px 4px';
		deleteAllBtn.onclick = clearAllTags;

		modal.appendChild(head);
		const tooltip = document.createElement('div');
		tooltip.classList.add('tooltip','tooltipuser');
		tooltip.style.textAlign = 'center';
		tooltip.appendChild(label);
		if (tagData.tag && source) tooltip.appendChild(sourceLink);
		tooltip.appendChild(document.createElement('br'));
		tooltip.appendChild(input);
		tooltip.appendChild(document.createElement('br'));
		tooltip.appendChild(preview);
		tooltip.appendChild(document.createElement('br'));
		tooltip.appendChild(document.createTextNode('BG: '));
		tooltip.appendChild(bgColorInput);
		tooltip.appendChild(document.createTextNode('\u00A0\u00A0Text: '));
		tooltip.appendChild(textColorInput);
		tooltip.appendChild(document.createElement('br'));
		tooltip.appendChild(resetBtn);
		tooltip.appendChild(saveBtn);
		tooltip.appendChild(document.createElement('hr'));
		tooltip.appendChild(toggleVotesLabel);
		tooltip.appendChild(toggleVotesCheckbox);
		tooltip.appendChild(toggleRulesLabel);
		tooltip.appendChild(toggleVoteRulesCheckbox);
		tooltip.appendChild(voteInfo);
		tooltip.appendChild(document.createElement('hr'));
		tooltip.appendChild(exportBtn);
		tooltip.appendChild(importBtn);
		tooltip.appendChild(deleteAllBtn);
		modal.appendChild(tooltip);
		document.body.appendChild(modal);
		positionModalUnderIcon(modal, e.currentTarget);
	});
	if (nodeGrid) {
		wrapper.appendChild(icon);
		if (userVotes) wrapper.appendChild(userVotes);
		if (userTag) wrapper.appendChild(userTag);
	} else {
		if (userTag) wrapper.appendChild(userTag);
		if (userVotes) wrapper.appendChild(userVotes);
		wrapper.appendChild(icon);
	}
	return wrapper;
}

function positionModalUnderIcon(modal, iconElement, modalWidth = 253, modalHeight = 310, verticalOffset = 10) {
	const iconRect = iconElement.getBoundingClientRect();
	let top = iconRect.bottom + window.scrollY + verticalOffset;
	let left = iconRect.left + window.scrollX + (iconRect.width / 2) - (modalWidth / 2);
	const viewportWidth = document.documentElement.clientWidth;
	const viewportHeight = document.documentElement.clientHeight;
	// Adjust right overflow
	if (left + modalWidth > window.scrollX + viewportWidth) {
		left = window.scrollX + viewportWidth - modalWidth - 10;
		modal.classList.add('left-offset');
		const arrowOffset = iconRect.left + iconRect.width / 2 - left;
		modal.style.setProperty('--arrow-offset', `${arrowOffset}px`);
	}
	// Adjust left overflow
	if (left < window.scrollX) {
		left = window.scrollX + 10;
		modal.classList.add('left-offset');
		const arrowOffset = iconRect.left + iconRect.width / 2 - left;
		modal.style.setProperty('--arrow-offset', `${arrowOffset}px`);
	}
	// Adjust bottom overflow (show above icon)
	if (top + modalHeight > window.scrollY + viewportHeight) {
		top = iconRect.top + window.scrollY - modalHeight - verticalOffset;
		modal.classList.add('above-icon');
	}
	modal.style.top = `${top}px`;
	modal.style.left = `${left}px`;
}

function fadeOutAndRemove(el) {
	if (!el) return;
	el.classList.add('fade-out');
	setTimeout(() => el.remove(), 300); //300ms matches the CSS transition
}

async function handleVoteClick(voteBtn, delta) {
	const container = voteBtn.closest('.c-vote, .n-vote');
	if (!container) return;
	const meta = voteBtn.closest('.meta, .node');
	if (!meta) return;
	const voteRules = await isVoteRulesEnabled();
	if (voteRules && meta.classList.contains('meta')) { //Check aged comments
		const commentDateStr = meta?.querySelector('.c-link')?.textContent?.trim();
		if (isPostOlderThan(commentDateStr,30)) return;
	}
	const hasPending = container.classList.contains('pending');
	//Stop repeat votes when already voted
	if (hasPending && container.classList.contains('voteup') && delta > 0) return;
	if (hasPending && container.classList.contains('votedown') && delta < 0) return;
	const hasInact = container.classList.contains('inact');
	let anchor;
	if (meta.classList.contains('node-page')) { //Detect grid nodes
		anchor = meta.querySelector('.submitted a[href^="/user/"]');
	} else {
		anchor = meta.querySelector('.submitted strong a[href^="/user/"]');
	}
	const userId = extractUserId(anchor);
	if (!userId || voteCooldown.has(userId)) return;
	//Wait and see if deal votes get accepted due to negative comment requirements, revoked votes and aged deals
	if (voteRules && meta.classList.contains('node')) {
		setTimeout(() => {
			const newContainer = voteBtn.closest('.n-vote');
			if (newContainer.classList.contains('inact')) return;
			processVoteResult(userId, delta, hasPending, hasInact);
		}, 300); //Update time is inconsistent
	} else {
		processVoteResult(userId, delta, hasPending, hasInact);
	}
}

async function processVoteResult(userId, delta, hasPending, hasInact) {
	const tags = await getTags();
	tags[userId] = tags[userId] || {};
	// Vote change logic
	if (hasPending) {
		// User is changing their vote
		if (delta > 0) {
			// Changing from negative to positive
			tags[userId].nV = Math.max((tags[userId].nV || 1) - 1, 0);
			tags[userId].pV = (tags[userId].pV || 0) + 1;
		} else if (delta < 0) {
			// Changing from positive to negative
			tags[userId].pV = Math.max((tags[userId].pV || 1) - 1, 0);
			tags[userId].nV = (tags[userId].nV || 0) + 1;
		} else {
			// Same vote clicked again, no changes
			return;
		}
	} else if (hasInact) {
		// First time voting
		if (delta > 0) tags[userId].pV = (tags[userId].pV || 0) + 1;
		else tags[userId].nV = (tags[userId].nV || 0) + 1;
	} else {
		// Already voted and no change allowed (or multiple clicks)
		return;
	}
	await saveTags(tags);
	refreshUser(userId, true, tags);
	voteCooldown.add(userId);
	setTimeout(() => voteCooldown.delete(userId), 100); //debounce
}

async function observeMobileVoteTooltip() {
	if (!document.body.classList.contains('m')) return;
	if (!await isVoteTrackingEnabled()) return;
	const processTooltip = (node) => {
		const aTags = node.querySelectorAll('a[onclick*="voteComment"]');
		const upLi = node.querySelector('a[onclick*="voteComment"] span.cvb.voteup')?.closest('li');
		const downLi = node.querySelector('a[onclick*="voteComment"] span.cvb.votedown')?.closest('li');
		const canChangeVote = upLi && downLi;
		if (!canChangeVote) return;
		const alreadyVoted = [...node.querySelectorAll('.tooltip-menu li a')]
		.find(link => link.textContent.toLowerCase().includes('already voted'));
		//Track what was already voted to prevent it being voted again
		let alreadyVotedDelta;
		if (alreadyVoted) {
			const span = alreadyVoted.querySelector('span');
			if (span?.classList.contains('voteup')) {
				alreadyVotedDelta = 1;
			} else if (span?.classList.contains('votedown')) {
				alreadyVotedDelta = -1;
			}
		}
		aTags.forEach((aTag) => {
			const voteMatch = aTag.getAttribute('onclick')?.match(/\bvoteComment\((\d+),\s*(-?1)\)/);
			if (!voteMatch) return;
			const [, commentId, vote] = voteMatch;
			const delta = parseInt(vote, 10);
			if (!commentId || !delta) return;
			if (alreadyVotedDelta === delta) return;
			if (aTag.dataset.listenerAdded) return;
			aTag.dataset.listenerAdded = 'true';
			aTag.addEventListener('click', async () => {
				const meta = document.querySelector(`.meta .c-link[data-cid="${commentId}"]`)?.closest('.meta');
				const voteRules = await isVoteRulesEnabled();
				if (voteRules) {
					const commentDateStr = meta?.querySelector('.c-link')?.textContent?.trim();
					if (isPostOlderThan(commentDateStr,30)) return;
				}
				const container = meta?.querySelector('.c-vote, .n-vote');
				if (!container && !container.classList.contains('inact') && !container.classList.contains('pending')) return;
				const anchor = meta.querySelector('.submitted strong a[href^="/user/"]');
				const userId = extractUserId(anchor);
				if (!userId || voteCooldown.has(userId)) return;
				processVoteResult(userId, delta, alreadyVoted, !alreadyVoted);
			}, true)
		});
	};

	let debounceTimeout = null;
	const tooltipStyleObserver = new MutationObserver((mutations) => {
		if (debounceTimeout) return;
		debounceTimeout = setTimeout(() => {
			debounceTimeout = null; //Reset debounce
			for (const mutation of mutations) {
				if (mutation.attributeName === 'style') {
					const tooltip = mutation.target;
					if (tooltip.style.display !== 'none') {
						processTooltip(tooltip);
					}
				}
			}
		}, 100); //Run after 100ms pause to account for burst style changes
	});

	const mainObserver = new MutationObserver((mutations) => {
		for (const mutation of mutations) {
			mutation.addedNodes.forEach((node) => {
				if (node.nodeType === 1 && node.id === 'tooltip') {
					//First-time tooltip insertion
					tooltipStyleObserver.observe(node, {
						attributes: true,
						attributeFilter: ['style']
					});
					if (node.style.display !== 'none') {
						processTooltip(node);
					}
				}
			});
		}
	});
	mainObserver.observe(document.body, { childList: true, subtree: false });
}

function isPostOlderThan(dateStr, days) {
	if (!dateStr) return false;
	//If there is 'ago' then the comment is always less than 30 days old
	if (/ago$/i.test(dateStr)) {
		return false;
	}
	const match = dateStr.match(/(\d{2})\/(\d{2})\/(\d{4})/);
	if (!match) return false;
	const [ , day, month, year ] = match;
	const commentDate = new Date(`${year}-${month}-${day}T00:00:00`);
	const now = new Date();
	const diffInDays = (now - commentDate) / (1000 * 60 * 60 * 24);
	return diffInDays > days;
}

async function addTags() {
	const tags = await getTags();
	const voteTracking = await isVoteTrackingEnabled();
	if (location.href.indexOf('/user/') > 0) {
		const userId = location.pathname.split("/")[2];
		if (!userId) return;
		if (!document.querySelector('.user-tag')) {
			const title = document.querySelector('h1#title');
			const username = title?.textContent?.match(/^(.+?)\s*»/)?.[1];
			const source = tags[userId]?.src || 'user/' + userId;
			const tagEl = await createTagElement(userId, tags[userId], username, source, voteTracking);
			tagEl.style.position = 'relative';
			tagEl.style.top = '-3px';
			title.style.display = 'inline-block';
			title.style.marginRight = '5px';
			title.insertAdjacentElement('afterend', tagEl);
		}
	} else {
		const anchors = document.querySelectorAll('.submitted a[href^="/user/"]');
		for (const a of anchors) {
			const userId = extractUserId(a);
			if (!userId) continue;
			if (!a.parentElement.querySelector('.user-tag')) {
				const username = a.textContent.trim();
				const node = a.closest('.meta, .node');
				const nodeGrid = node?.parentElement.classList.contains('nodegrid');
				const source = tags[userId]?.src || getTagSource(node);
				const tagEl = await createTagElement(userId, tags[userId], username, source, voteTracking, nodeGrid);
				if (nodeGrid) a.parentElement.appendChild(document.createElement('br'));
				a.parentElement.appendChild(tagEl);
			}
		}
	}
	//Add click listeners to all clickable votes if enabled
	if (voteTracking) {
		document.querySelectorAll('.c-vote.inact .cvb.voteup, .n-vote.inact .nvb.voteup').forEach(btn => {
			if (!btn.dataset.listenerAdded) {
				btn.dataset.listenerAdded = 'true';
				btn.addEventListener('click', () => handleVoteClick(btn, 1));
			}
		});
		document.querySelectorAll('.c-vote.inact .cvb.votedown, .n-vote.inact .nvb.votedown').forEach(btn => {
			if (!btn.dataset.listenerAdded) {
				btn.dataset.listenerAdded = 'true';
				btn.addEventListener('click', () => handleVoteClick(btn, -1));
			}
		});
	}
}

async function refreshUser(userId, voteTracking, tags) {
	if (!tags) {
		tags = await getTags();
	}
	if (location.href.indexOf('/user/') > 0) {
		const title = document.querySelector('h1#title');
		const existingTag = title.parentElement.querySelector('.user-tag');
		if (existingTag) existingTag.remove();
		const username = title?.getAttribute('data-title')?.match(/^(.+?)\s+\(#\d+\)/)?.[1];
		const source = tags[userId]?.src || 'user/' + userId;
		const tagEl = await createTagElement(userId, tags[userId], username, source, voteTracking);
		tagEl.style.position = 'relative';
		tagEl.style.top = '-3px';
		title.style.display = 'inline-block';
		title.style.marginRight = '5px';
		title.insertAdjacentElement('afterend', tagEl);
	} else {
		const anchors = document.querySelectorAll(`.submitted a[href="/user/${userId}"]`);
		for (const a of anchors) {
			const existingTag = a.parentElement.querySelector('.user-tag');
			if (existingTag) existingTag.remove();
			const username = a.textContent.trim();
			const node = a.closest('.meta, .node');
			const nodeGrid = node?.parentElement.classList.contains('nodegrid');
			const source = tags[userId]?.src || getTagSource(node);
			const tagEl = await createTagElement(userId, tags[userId], username, source, voteTracking, nodeGrid);
			a.parentElement.appendChild(tagEl);
		}
	}
}

function getTagSource(node) {
	if (node?.classList.contains('node-forum')) {
		return 'node/' + location.href.match(/\/node\/(\d+)/)?.[1];
	} else if (node?.classList.contains('node')) {
		return 'node/' + node.id.match(/^node(\d+)$/)?.[1];
	} else if (node?.classList.contains('meta')) {
		return 'comment/' + node.querySelector('.c-link')?.dataset.cid + '/redir';
	} else if (!node) { // Private messages
		return 'privatemsg/view/' + document.querySelector('.horizontal-participants')?.id.match(/\d+$/)?.[0];
	}
}

function observePages() { //Observe pages that can dynamically load nodes/comments
	const infScroll = document.querySelector(".infscrollbtn"); //Pages with infinite scroll
	const hiddenNode = document.querySelector(".comment.hidden"); //Pages with hidden commments
	if (infScroll || hiddenNode) {
		const callback = (mutationList, observer) => {
			for (const mutation of mutationList) {
				if (mutation.addedNodes.length > 0 && mutation.addedNodes[0].className && (mutation.addedNodes[0].classList.contains("comment") || mutation.addedNodes[0].classList.contains("node")) ) {
					addTags();
				}
			}
		};
		const observer = new MutationObserver(callback);
		observer.observe(document.body, { childList: true, subtree: true });
	}
}

addTags();
observePages();
observeMobileVoteTooltip();