stacker.news/fragments/comments.js
soxa 0e842e9915
live comments: auto show new comments (#2355)
* enhance: FaviconProvider, keep track of new comment IDs to change favicon, remove new comment IDs per outline removal

* don't track oneself comments

* enhance: auto-show new comments, idempotency by ignoring already injected comments, preserveScroll utility

* fadeIn animation on comment injection; cleanup: remove unused counts and thread handling; non-critical fix: always give rootLastCommentAt a value

* reliably preserve scroll position by tracking a reference found at the center of the viewport; cleanup: add more comments, add cleanup function

* mitigate fractional scrolling subtle layout shifts by rounding the new reference element position

* enhanced outlining system, favicon context keeps track of new comments presence

- de-outlining now happens only for outlined comments
- enhanced outlining: add outline only if isNewComment
- de-outlining will remove the new comments favicon
- on unmount remove the new comments favicon

* remove the new comments favicon on new comments injection

* track only deduplicated new comments

* fix typo

* clearer unsetOutline conditions, fix typo in live comments hook

* backport: remove the injectedComment class from injected comments after animation ends

* set the new comments favicon on any new outlined comment

* enhance: directly inject new comments; cleanup: dismantle ShowNewComments, remove newComments field

* tweaks: slower injection animation, clear favicon on Comment section unmount

* change nDirectComments bug strategy to avoiding updates on comment edit

* cleanup: better naming, re-instate injected comments outline

* injection: major cache utilities refactor, don't preserve scroll if no comments have been injected

- don't preserve scroll if after deduplication we don't inject any comments

- use manual read/write cache updates to control the flow
-- allows to check if we are really injecting or not

- reduce polling to 5 seconds instead of 10

- light cleanup
-- removed update cache functions
-- added 'injected' to typeDefs (gql consistency)

* cleanup: detailed comments, refactor, remove clutter

Refactor:
+ clearer variables
+ depth calculation utility function
+ use destructured Apollo cache
+ extract item object from item query
+ skip ignored comment instead of ending the loop

CSS:
+ from-to fadeIn animation keyframes
- floatingComments unused class

Favicon:
+ provider exported by default

* fix wrong merge

* split: remove favicon context

* split: remove favicon pngs

* regression: revert to updateQuery for multiple comment fragments handling

* reverse multiple reads for deduplication on comment injection

* fix regression on apollo manipulations via fn; cleanup: remove wrong deps from outlining
2025-08-08 10:04:54 -05:00

213 lines
3.4 KiB
JavaScript

import { gql } from '@apollo/client'
// we can't import from users because of circular dependency
const STREAK_FIELDS = gql`
fragment StreakFields on User {
optional {
streak
hasSendWallet
hasRecvWallet
}
}
`
export const COMMENT_FIELDS = gql`
${STREAK_FIELDS}
fragment CommentFields on Item {
id
position
parentId
createdAt
invoicePaidAt
deletedAt
text
user {
id
name
meMute
...StreakFields
}
sats
credits
meAnonSats @client
upvotes
freedFreebie
boost
meSats
meCredits
meDontLikeSats
meBookmark
meSubscription
outlawed
freebie
path
commentSats
commentCredits
mine
otsHash
ncomments
nDirectComments
injected @client
imgproxyUrls
rel
apiKey
invoice {
id
actionState
confirmedAt
}
cost
}
`
export const COMMENT_FIELDS_NO_CHILD_COMMENTS = gql`
${STREAK_FIELDS}
fragment CommentFieldsNoChildComments on Item {
id
position
parentId
createdAt
invoicePaidAt
deletedAt
text
user {
id
name
meMute
...StreakFields
}
sats
credits
meAnonSats @client
upvotes
freedFreebie
boost
meSats
meCredits
meDontLikeSats
meBookmark
meSubscription
outlawed
freebie
path
commentSats
commentCredits
mine
otsHash
imgproxyUrls
rel
apiKey
invoice {
id
actionState
confirmedAt
}
cost
}
`
export const COMMENTS_ITEM_EXT_FIELDS = gql`
${STREAK_FIELDS}
fragment CommentItemExtFields on Item {
text
root {
id
title
bounty
ncomments
bountyPaidTo
subName
sub {
name
userId
moderated
meMuteSub
}
user {
name
id
...StreakFields
}
}
}`
// we only get the first COMMENT_DEPTH_LIMIT comments
export const COMMENTS = gql`
${COMMENT_FIELDS}
fragment CommentsRecursive on Item {
...CommentFields
comments {
comments {
...CommentFields
comments {
comments {
...CommentFields
comments {
comments {
...CommentFields
comments {
comments {
...CommentFields
comments {
comments {
...CommentFields
}
}
}
}
}
}
}
}
}
}
}`
export const COMMENT_WITH_NEW_RECURSIVE = gql`
${COMMENT_FIELDS}
${COMMENTS}
fragment CommentWithNewRecursive on Item {
...CommentFields
comments {
comments {
...CommentsRecursive
}
}
}
`
export const COMMENT_WITH_NEW_LIMITED = gql`
${COMMENT_FIELDS}
fragment CommentWithNewLimited on Item {
...CommentFields
comments {
comments {
...CommentFields
}
}
}
`
export const COMMENT_WITH_NEW_MINIMAL = gql`
${COMMENT_FIELDS}
fragment CommentWithNewMinimal on Item {
...CommentFields
}
`
export const GET_NEW_COMMENTS = gql`
${COMMENTS}
query GetNewComments($rootId: ID, $after: Date) {
newComments(rootId: $rootId, after: $after) {
comments {
...CommentsRecursive
}
}
}
`