live comments: auto show new comments

[Soxasora]

Description

Closes #2358
Auto-shows new comments as they arrive, with a neat CSS fade-in animation, preserving the scroll position on injection by making use of MutationObserver to detect DOM mutations and requestAnimationFrame to update the scroll position before the next repaint.

Also introduces a slightly tweaked outlining system, that de-outlines the comment only if it actually has an outline/hasn't been already de-outlined.

Legacy live comments code has been deleted.

Screenshots

Auto-show animation

autoshow-base.mp4

Scroll position is preserved to avoid layout shifts

autoshow-preservescroll.mp4

Additional Context

Preserve scroll pipeline

1. Record the scroll position (window.scrollY)
2. Pick an anchor element (ref) at the center of the viewport

  const ref = document.elementFromPoint(window.innerWidth / 2, window.innerHeight / 2)
  const refTop = ref ? ref.getBoundingClientRect().top + scrollTop : scrollTop

3. MutationObserver watches the page for DOM changes

When a DOM mutation fires:

1. Wait for the next animation frame, ensuring DOM full update
2. Measure the anchor element new position

      // get the new position of the reference element along with the new scroll position
      const newRefTop = ref ? ref.getBoundingClientRect().top + window.scrollY : window.scrollY
      // has the reference element moved?
      const refMoved = newRefTop - refTop

3. If refMoved > 0 then something was inserted above the anchor, pushing it downwards.
4. To compensante, scroll down by the refMoved amount

      // if the reference element moved, we need to scroll to the new position
      if (refMoved > 0) {
        window.scrollTo({
          top: scrollTop + Math.ceil(refMoved),
          behavior: 'instant'
        })
      }

The MutationObserver is disconnected at the end of the scroll changes or after a 1 second fallback timeout in the case of no DOM mutations (although almost impossible)

List of changes

Live Comments:
+ 5 seconds polling
+ live comments are directly injected as they are received
  + auto-sort via server-side ASC query
  + depth via rootId <-> item.path relationship
+ preserve scroll position on live comment injection
  + `MutationObserver` to detect DOM changes
  + tracks a `ref` at viewport center to detect if a change is happening at the top, triggering scroll preservation
  + preserve scroll position only for true injections (dedupe OK)
+ injection will set commentsViewedAt to Date.now
+ read the query/fragment then inject, allowing manual flow control
- removed `ShowNewComments`
- removed live comments counts
- removed new comments dot from `ViewAllReplies`
- removed `newComments` client field
- removed update query/fragment cache functions

Comments:
+ live comments `fadeIn` animation
+ safer outlining (use rootLastCommentAt on commentsViewedAt absence), de-outline (only if it has an outline)
+ [fix] `rootLastCommentAt` will fallback to `parentCreatedAt`

Quirks

• scroll is preserved regardless of whether we inject a comment or not after deduplication
• safari animations can be choppy on macOS

Checklist

Are your changes backward compatible? Please answer below:

For example, a change is not backward compatible if you removed a GraphQL field or dropped a database column.
Yes

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
7

• scroll preservation: OK
• depth-based injection: OK
• comments on different depths: OK
• animation and cleanup: OK
• comment deduplication: OK
• comment edits: OK

For frontend changes: Tested on mobile, light and dark mode? Please answer below:
n/a

Did you introduce any new environment variables? If so, call them out explicitly here:
n/a

[Soxasora]

Scroll is preserved even for comments that ultimately gets deduplicated (e.g. your own comments on the same tab). It may be an inconvenience, not really expensive but it is something to think about.

The most straightforward solution is to:

• Read the existing comments from cache, dedupe, and then maybe write the fragment

But I realized that writeFragment always returns the Item reference ID in the cache, even when it fails. This messes up things for comments that require different fragments because of the comments field absence.

Therefore a truly effective solution would be to:

• Read, dedupe, call updateFragment which runs another read and ultimately a write.

updateFragment will explicitly fail if the provided object doesn't match the fragment, which enables us to retry with other fragments until it fits. But this would mean doing read -> read/write

In addition, since dedupe happens by comparing the new comment with the parent's existing comments, both solutions would preserve scroll for each comment in the newComments array, spawning several MutationObserver and requestAnimationFrame

---

At the actual state, scroll is instead preserved for batches of new comments, but preserveScroll will run even if no comments are being effectively injected.

[Soxasora]

Outlining is addressed by #2401 with a separate hook, as it's becoming too big to stay here

[Soxasora]

This is in place to avoid injecting comments that are not visible by the user.
We did this to show accurate counts and avoid misleading the user, but since we automatically inject now this is not required anymore.

Removing depth protection will update comments that are not visible but present in cache, useful to show that new comments are present down the tree, especially with #2401 that will outline the MoreReplies button.
But, there might be comments that are not present in cache, like when we fully reload an Item and it loads them until the depth limit has been reached. In this case new comments to these absent comments are dropped.