Show HN: Display a bell emoji on HN comments you haven't read yet (gist.github.com)

ps im a mechanical engineer

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

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.

- 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.

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).

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.

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

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

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.

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

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!

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

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...

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