KQ-867 · REPLY/COUNT

Reply Count

A thread badge that carries the count and the last replier's face. An arrival bumps the badge from 1.06 back to rest on recoil — two keyframes, driven imperatively, because a spring drops anything in between — while the disc and the number swap on snap, each pair stacked in one grid cell so the outgoing face cross-fades under the incoming one instead of being shoved sideways. Replies past the ones you have read open a chip out of the badge's edge on snap; Enter or Space opens the thread and collapses it.

KQ-867 · REPLY/COUNT

Ines Moreau
Who is covering the Basinworks run on Friday? Dock three needs a name by noon.
14:38

2 replies · last Rui 14:46 · all read

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/reply-count

Props

replies: ReplyEntry[]; default —; The thread's replies, oldest first; append to it as they land.
seenCount / defaultSeenCount: number; default 0; Controlled or initial count of replies you have already read; the gap becomes the new chip.
onSeenCountChange: (count: number) => void; default —; Fires when opening the thread marks everything read.
onOpen: (count: number) => void; default —; Fires from a press or Enter with the reply count.
text: string; default —; The parent message's body.
author: string; default —; Printed above the bubble.
time: string; default —; The parent's sent time, already formatted.
emptyLabel: string; default "Reply"; What the badge reads with no replies yet, beside a drawn reply arrow.
label: string; default "Thread"; Names the thread list for assistive technology.

Prop	Type	Default	Description
replies	ReplyEntry[]	—	The thread's replies, oldest first; append to it as they land.
seenCount / defaultSeenCount	number	0	Controlled or initial count of replies you have already read; the gap becomes the new chip.
onSeenCountChange	(count: number) => void	—	Fires when opening the thread marks everything read.
onOpen	(count: number) => void	—	Fires from a press or Enter with the reply count.
text	string	—	The parent message's body.
author	string	—	Printed above the bubble.
time	string	—	The parent's sent time, already formatted.
emptyLabel	string	"Reply"	What the badge reads with no replies yet, beside a drawn reply arrow.
label	string	"Thread"	Names the thread list for assistive technology.