// ==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
// @grant        none
// ==/UserScript==

(function() {
  'use strict';
  let readReplies = [];
  let linkList = [];
  const username = document.querySelector('#account-links-text .ljuser').getAttribute('lj:user');
  const newReplyText = "✨ NEW REPLIES ✨";
  const markDoneText = "Mark Thread Done";
  const highlightColor = "yellow";
  const jumpLinks = document.createElement('div');
  const jumpLinksOl = document.createElement('ol');
  jumpLinks.append(jumpLinksOl);
  jumpLinks.id = 'jump-links';
  document.body.append(jumpLinks);

  const addReadReply = (id) => {
    if (readReplies.indexOf(parseInt(id)) === -1) {
      readReplies.push(parseInt(id));
      localStorage.setItem("readComments", JSON.stringify(readReplies));
    }
  };

  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');
    let readListener = null;
    markReadBtn.setAttribute('type', 'button');
    markReadBtn.classList.add("markRead");
    markReadBtn.textContent = newReplyText;
    top.classList.add('highlight');

    if (cmt.querySelector('.partial')) {
      top.querySelector('.comment .inner').append(markReadBtn);
      readListener = top.querySelector('a[onclick]').addEventListener('click', (_e) => {
        markReadBtn.remove();
        setTimeout(() => {
          top.querySelector('.comment-info h4').append(markReadBtn);
        }, 1000);
      });
    } else {
      top.querySelector('.comment-info h4').append(markReadBtn);
    }

    markReadBtn.addEventListener('click', (e) => {
      e.preventDefault();
      addReadReply(id);
      top.classList.remove("highlight");
      markReadBtn.remove();
      jumpLinks.querySelector(`a[href="#cmt${id}"]`).remove();
      if (readListener) {
        removeEventListener('click', readListener);
      }
    });
  };

  const main = () => {
    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 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;
    document.querySelectorAll('.comment-thread').forEach((cmt) => {
      const depth = parseInt(Array.from(cmt.classList).filter(cl => cl.match(/comment\-depth\-[0-9]+/))[0].replace("comment-depth-", ""));
      if (!topOfThread || depth === 1) {
        if (!cmt.querySelector('.comment-wrapper').classList.contains(`poster-${username}`)) {
          prevComment = null;
          return;
        }
        topOfThread = cmt;
        prevComment = cmt;
        return;
      }
      if (depth >= prevDepth) {
        prevComment = cmt;
        prevDepth = depth;
        return;
      }
      if (depth < prevDepth) {
        const id = parseInt(topOfThread.querySelector('.comment').id.replace("comment-cmt", ""));
        if (prevComment && !prevComment.querySelector('.comment-wrapper').classList.contains(`poster-${username}`) && readReplies.indexOf(id) === -1) {
          highlightCmt(cmt, topOfThread);
          linkList.push(id);
        }
        topOfThread = null;
        prevComment = null;
        prevDepth = 1;
        return;
      }
      prevComment = cmt;
      prevDepth = depth;
    });

    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();
})();