veryroundbird / newcomments.user.js

// ==UserScript== // @name Highlight New Replies // @namespace http://veryroundbird.house // @version 2026-06-03 // @description highlights your threads where you're not the most recent reply. // @author Carly Smallbird // @match https://*.dreamwidth.org/* // @icon https://www.google.com/s2/favicons?sz=64&domain=dreamwidth.org // @require https://openuserjs.org/src/libs/sizzle/GM_config.js // @grant GM_getValue // @grant GM_setValue // @grant GM.getValue // @grant GM.setValue // ==/UserScript== // make the settings let gmc = new GM_config( { 'id': 'veryroundbirdhouse_newreplies', 'title': 'Settings', 'fields': { 'newReplyText': { 'label': 'New Reply Text', 'type': 'text', 'default': '✨ NEW REPLIES ✨' }, 'markDoneText': { 'label': 'Mark Thread Done Text', 'type': 'text', 'default': '✅ Mark Thread Done' }, 'highlightColor': { 'label': 'Highlight Color', 'type': 'text', 'default': 'yellow' } }, 'init': () => { gmc.css.basic = ` label { display: block; } `; } }); (function() { if (window.location.href.match(/https:\/\/[a-z\-]+\.dreamwidth.org\/(?:[0-9]+|(?:[0-9]{4}\/[0-9]{2}\/[0-9]{2}\/[a-z\-]+))\.html/)) { // checks that this is like, an actual entry 'use strict'; // set up globals let readReplies = []; let linkList = []; // get username from account links const username = document.querySelector('#account-links-text .ljuser').getAttribute('lj:user'); // initialize user settings const newReplyText = "✨ NEW REPLIES ✨"; const markDoneText = "✅ Mark Thread Done"; const highlightColor = "yellow"; // create elements for jump links menu const jumpLinks = document.createElement('div'); const jumpDetails = document.createElement('details'); const jumpSummary = document.createElement('summary'); const jumpLinksOl = document.createElement('ol'); const settingsLink = document.createElement('a'); jumpSummary.textContent = "🧵 New Comments"; jumpDetails.append(jumpSummary); jumpDetails.append(jumpLinksOl); jumpLinks.append(jumpDetails); settingsLink.textContent = "⚙️ Settings"; settingsLink.href = "#"; settingsLink.addEventListener('click', (e) => { e.preventDefault(); gmc.open(); }); jumpLinks.append(settingsLink); jumpLinks.id = 'jump-links'; document.body.append(jumpLinks); // add an item to the list of threads we're ignoring const addReadReply = (id) => { if (readReplies.indexOf(parseInt(id)) === -1) { readReplies.push(parseInt(id)); localStorage.setItem("readComments", JSON.stringify(readReplies)); } }; // adds UI elements to highlighted comments const highlightCmt = (cmt, top) => { const depth = parseInt(Array.from(cmt.classList).filter(cl => cl.match(/comment\-depth\-[0-9]+/))[0].replace("comment-depth-", "")); const id = parseInt(top.querySelector('.comment').id.replace("comment-cmt", "")); const info = top.querySelector('.comment-info'); const markReadBtn = document.createElement('button'); const newCmtMarker = document.createElement('span'); let expandListener = null; markReadBtn.setAttribute('type', 'button'); markReadBtn.classList.add("markRead"); markReadBtn.textContent = markDoneText; newCmtMarker.textContent = newReplyText; newCmtMarker.classList.add('newComment'); top.classList.add('highlight'); const readListener = (e) => { e.preventDefault(); addReadReply(id); top.classList.remove("highlight"); newCmtMarker.remove(); markReadBtn.remove(); jumpLinks.querySelector(`a[href="#cmt${id}"]`).parentNode.remove(); if (expandListener) { removeEventListener('click', expandListener); } }; markReadBtn.addEventListener('click', readListener); if (top.querySelector('.partial')) { top.querySelector('.comment .inner').append(markReadBtn); expandListener = top.querySelector('a[onclick]').addEventListener('click', (_e) => { newCmtMarker.remove(); markReadBtn.remove(); const waitForExpansion = setTimeout(() => { if (top.querySelector('.comment-info h4')) { top.querySelector('.comment-info h4').append(newCmtMarker); top.querySelector('.comment-info h4').append(markReadBtn); markReadBtn.addEventListener('click', readListener); clearInterval(waitForExpansion); } }, 1000); }); } else { top.querySelector('.comment-info h4').append(markReadBtn); } }; const main = () => { // create styles for stuff we're adding to the UI const newStyles = document.createElement('style'); newStyles.setAttribute('type', 'text/css'); newStyles.textContent = ` .highlight .partial > .comment, .highlight .visible .comment-info { background-color: ${highlightColor} !important; } button.markRead { padding: 2px; margin-bottom: 0; font-size: .8em; } .comment .inner > button.markRead { margin-left: 5px; } #jump-links { position: fixed; bottom: 10px; left: 10px; padding: 5px; border: 1px gray solid; background-color: #FFFFFF66; max-height: 150px; max-width: 200px; overflow: auto; opacity: .5; } #jump-links summary { cursor: pointer; list-style: none; } #jump-links > a { text-decoration: none; color: inherit; } #jump-links ol { font-size: .8em; margin-bottom: 0; } #jump-links:hover, #jump-links:focus-within { opacity: 1; } `; document.head.append(newStyles); readReplies = localStorage.getItem("readComments") ? JSON.parse(localStorage.getItem("readComments")) : []; let prevDepth = 1; let topOfThread = null; let prevComment = null; // loop over all comments document.querySelectorAll('.comment-thread').forEach((cmt) => { // get the depth from the comment classes const depth = parseInt(Array.from(cmt.classList).filter(cl => cl.match(/comment\-depth\-[0-9]+/))[0].replace("comment-depth-", "")); // if we're not currently in a thread, check if this is the top of a thread (either belongs to us or is a toplevel) if (!topOfThread || depth === 1) { if (!cmt.querySelector('.comment-wrapper').classList.contains(`poster-${username}`)) { prevComment = null; return; } topOfThread = cmt; prevComment = cmt; } // if it's just a reply in the same thread but not the end keep going if (depth >= prevDepth) { prevComment = cmt; prevDepth = depth; return; } // if the depth is lower than it was in the last comment, the thread has ended if (depth < prevDepth) { const id = parseInt(topOfThread.querySelector('.comment').id.replace("comment-cmt", "")); console.log(`depth: ${depth}; prevDepth: ${prevDepth}`); console.log('comment'); console.log(cmt); console.log('top of thread'); console.log(topOfThread); console.log('prev comment'); console.log(prevComment); // if this comment isn't ours and it's not in our ignored threads, highlight it if (prevComment && !prevComment.querySelector('.comment-wrapper').classList.contains(`poster-${username}`) && readReplies.indexOf(id) === -1 && cmt !== topOfThread) { highlightCmt(cmt, topOfThread); linkList.push(id); } // regardless, unset the thread variables topOfThread = null; prevComment = null; prevDepth = 1; return; } // set variables for next loop prevComment = cmt; prevDepth = depth; }); // add comments to the floating bottom left menu linkList.forEach((id) => { const newLi = document.createElement('li'); const newA = document.createElement('a'); newA.href = `#cmt${id}`; newA.textContent = `#${id}`; newLi.append(newA); jumpLinksOl.append(newLi); }); }; main(); } })();