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

214 lines
3.3 KiB
JavaScript

import { gql } from '@apollo/client'
import { COMMENTS } from './comments'
// we can't import from users because of circular dependency
const STREAK_FIELDS = gql`
fragment StreakFields on User {
optional {
streak
hasSendWallet
hasRecvWallet
}
}
`
export const ITEM_FIELDS = gql`
${STREAK_FIELDS}
fragment ItemFields on Item {
id
parentId
createdAt
invoicePaidAt
deletedAt
title
url
user {
id
name
meMute
...StreakFields
}
sub {
name
userId
moderated
meMuteSub
meSubscription
nsfw
replyCost
}
otsHash
position
sats
credits
meAnonSats @client
boost
bounty
bountyPaidTo
noteId
path
upvotes
meSats
meCredits
meDontLikeSats
meBookmark
meSubscription
meForward
outlawed
freebie
bio
ncomments
nDirectComments
commentSats
commentCredits
lastCommentAt
isJob
status
company
location
remote
subName
pollCost
pollExpiresAt
uploadId
mine
imgproxyUrls
rel
apiKey
invoice {
id
actionState
confirmedAt
}
cost
}`
export const ITEM_FULL_FIELDS = gql`
${ITEM_FIELDS}
${STREAK_FIELDS}
fragment ItemFullFields on Item {
...ItemFields
text
root {
id
title
bounty
bountyPaidTo
subName
mine
ncomments
user {
id
name
...StreakFields
}
sub {
name
userId
moderated
meMuteSub
meSubscription
replyCost
}
}
forwards {
userId
pct
user {
name
}
}
}`
export const ITEM_OTS_FIELDS = gql`
fragment ItemOtsFields on Item {
id
title
text
url
parentOtsHash
otsHash
deletedAt
}`
export const ITEM_OTS = gql`
${ITEM_OTS_FIELDS}
query Item($id: ID!) {
item(id: $id) {
...ItemOtsFields
}
}`
export const POLL_FIELDS = gql`
fragment PollFields on Item {
poll {
meVoted
meInvoiceId
meInvoiceActionState
count
options {
id
option
count
}
randPollOptions
}
}`
export const ITEM = gql`
${ITEM_FULL_FIELDS}
${POLL_FIELDS}
query Item($id: ID!) {
item(id: $id) {
...ItemFullFields
...PollFields
}
}`
export const ITEM_FULL = gql`
${ITEM_FULL_FIELDS}
${POLL_FIELDS}
${COMMENTS}
query Item($id: ID!, $sort: String, $cursor: String) {
item(id: $id) {
...ItemFullFields
prior
...PollFields
comments(sort: $sort, cursor: $cursor) {
cursor
comments {
...CommentsRecursive
}
}
}
}`
export const RELATED_ITEMS = gql`
${ITEM_FIELDS}
query Related($title: String, $id: ID, $cursor: String, $limit: Limit) {
related(title: $title, id: $id, cursor: $cursor, limit: $limit) {
cursor
items {
...ItemFields
}
}
}
`
export const RELATED_ITEMS_WITH_ITEM = gql`
${ITEM_FIELDS}
query Related($title: String, $id: ID!, $cursor: String, $limit: Limit) {
item(id: $id) {
...ItemFields
}
related(title: $title, id: $id, cursor: $cursor, limit: $limit) {
cursor
items {
...ItemFields
}
}
}
`