Show HN: Display a bell emoji on HN comments you haven't read yet

  a:link{
    color: orange !important;
  }
  
  /* visited link */
  a:visited {
    color: green !important;
  }

If you sign up to the alpha-testing HN[0], you get access to the thread feature, which is... (quoted from my forwarded mail)

> New feature: when you visit a thread, the software now highlights

> comments that are new since you last viewed the page. These are

> displayed with an orange (or whatever your topcolor is) bar to the

> left of the new comment. Refreshing the page will reset these.

Very useful, I can't imagine having HN without these indicators any more.

[0]: https://news.ycombinator.com/item?id=22788678

- Using the JavaScript Intersection Observer may be an interesting addition, as this would explicitly differentiate comments on the thread which you may not have scrolled down to.

The read comments have striped background and orange bar on the right, so identifying unread is easy.

That way the script only has to store the timestamps on which you visit a comment section, not the comment ids.

Additionally, that way you can select "highlight all comments since visit [...]" with a dropdown from which you can choose out of all recent visits you did.

Sadly, Hacker News does not provide any such metadata in the markup. (Just like the comment formatting is shit, and the markup structure is as well. HN should just copy the nesting markup and formatting 1:1 from reddit, and it'd be massively improved already).

Surprisingly it doesn't annoy me, because I'm often clicking on the comments I read anyway. (Old habit.)

EDIT: I changed it to onmousemove. Feels pretty nice!

I only wish that we didn't have to use third party extensions for loading scripts like this. I can never quite bring myself to trust them with full access to all of my pages. This really should be a part of the browser functionality already.

ps im a mechanical engineer

That said, I'd really like a way to find, distraction free(so in some submenu), reply comments.

The current way seems narcissistic, as I have to go through my whole history to see why may have replied. And even then I have to do math to figure out if I'd seen it or not.

    span.style.cssText = `
      font-size: 5px;
      color: transparent;
      text-shadow: 0 0 0 gray;
      margin-bottom: 2px;
      vertical-align: middle;
      display: inline-block;
    `

I also think it would make sense to store the page load time, and compare to a comment's post time to determine if it's new instead of storing all comment ids.

  const div = document.createElement("div");
  div.innerHTML = `<div style="position:fixed;top:20px;right:20px;width:40px;background:#ff05;">
     <input type="range" orient="vertical" id="interval" min="0" max="95" value="30" style="width:100%">
     <label for="interval" style="display:block"></label>
  </div>`;
  const input = div.firstElementChild.firstElementChild;
  const label = input.nextElementSibling;
  document.body.appendChild(div);
  const formatTime = (mins) => {
    if (mins > 60) {
      return `${Math.floor(mins / 60)}h ${mins % 60}m`;
    }
    return `${mins}m`;
  };
  const extrapolate = (val) => {
    val = val * 2;
    for (let t = 30; t <= 150; t += 30) {
      val += Math.max(0, val - t);
    }
    return val;
  };
  input.oninput = () => colorStuff(extrapolate(input.value));
  const colorStuff = (interval_minutes) => {
    label.innerText = `${formatTime(interval_minutes)}`;
    const comments = Array.from(document.getElementsByClassName("athing comtr"));
    dates = Array.from(document.getElementsByClassName('age'));
    dates.sort((c1, c2) => Date.parse((c2).title) - Date.parse((c1).title));
    const now = new Date();
    const timestamp = now.getTime() + now.getTimezoneOffset() * 60E3;
    comments.forEach((c) => {
      const commentDateString = c.getElementsByClassName("age")[0].title;
      const diff=(timestamp-Date.parse(c.getElementsByClassName('age')[0].title))/60E3;
      const diff2=(Date.parse(dates[0].title)-Date.parse(c.getElementsByClassName('age')[0].title))/60E3;
      if (diff < interval_minutes) {
        const alpha = (1 - diff2 / interval_minutes)**6;
        c.style.backgroundColor = `rgba(100, 255, 100, ${alpha})`;
      } else {
         c.style.backgroundColor = "rgba(255, 255, 255,0)";
      }
    });
  };
  colorStuff(extrapolate(input.value));

Here's a similar userscript I use: https://greasyfork.org/en/scripts/18066-hn-comment-trees/

It adds a small bell icon with a dropdown to the navbar that shows new replies to your posts and comments. 10/10, would recommend.

[0]: https://chrome.google.com/webstore/detail/hacker-news-notifi...

    function checkquota(){
      // localStorage limit is ~5MB, should probably do something about exceeding quota ;)
      // lets trigger around 3MB
      // deleting half of the oldest empty(seen, never interacted with) entries first
      // popping a warning when we finally reach over 2MB non empty
      //
      // total entries: localStorage.length
      // storage bytes left: 1024 * 1024 * 5 - escape(encodeURIComponent(JSON.stringify(localStorage))).length
      // non empty entries: Object.entries(localStorage).filter(value => value[1] != "1")
      // non empty entries size: escape(encodeURIComponent(JSON.stringify(Object.entries(localStorage).filter(value => value[1] != "1")))).length
      // empty entries sorted, oldest first Object.entries(localStorage).filter(value => value[1] == "1").sort(function (a, b) {return parseInt(a[0]) - parseInt(b[0]);});
    
      //size check is expensive, can be as long as 500ms for full localstorage, limit size checks to ~once per 24h
      if (GM_getValue("lastquotacheck") > Date.now()) return;
      GM_setValue("lastquotacheck", Date.now()+86400000);
    
      let size = encodeURIComponent(JSON.stringify(localStorage)).length;
      console.log("Current size: "+size+" bytes");
      if (size > 1024 * 1024 * 3)
      {
        alert("Current hackahackernews consumed localStorage size: "+size+" bytes, cleaning older entries to make more room.");
        let sortedStorage = Object.entries(localStorage).filter(value => value[1] == "1").sort(function (a, b) {return parseInt(a[0]) - parseInt(b[0]);});
        let cutout = parseInt(sortedStorage.length/2);
        for (let [index, value] of sortedStorage.entries())
        {
          if (index < cutout)
          {
            localStorage.removeItem(value[0]);
          }
        }
        size = encodeURIComponent(JSON.stringify(localStorage)).length;
        console.log("Size after culling empty entries: "+size+" bytes");
        let nonempty = Object.entries(localStorage).filter(value => value[1] != "1");
        if (encodeURIComponent(JSON.stringify(nonempty)).length > 1024 * 1024 * 2)
        {
          console.log("Non empty entries size is over 2MB! currently at: "+encodeURIComponent(JSON.stringify(nonempty)).length+" bytes.");
          if (confirm("Saved visited links are consuming "+encodeURIComponent(JSON.stringify(nonempty)).length+" bytes, delete half of the oldest entries?"))
          {
            let sortedNonempty = nonempty.sort(function (a, b) {return parseInt(a[0]) - parseInt(b[0]);});
            let cutout = parseInt(sortedNonempty.length/2);
            for (let [index, value] of sortedNonempty.entries())
            {
              if (index < cutout)
              {
                localStorage.removeItem(value[0]);
              }
            }
    
          }
        }
        size = encodeURIComponent(JSON.stringify(localStorage)).length;
        console.log("Final size after culling: "+size+" bytes");
      }
    }