@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.04044ed9e96d

package/src/ui/comment-composer.tsx

@@ -1,17 +1,29 @@
-import { Extension, JSONContent } from '@tiptap/core'
+import { JSONContent } from '@tiptap/core'
 import { EditorContent, useEditor } from '@tiptap/react'
-import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import {
+	Avatar,
+	type CommentAuthor,
+	createMentionExtension,
+	createMentionSuggestion,
+	isMentionPickerOpen,
+	MentionMember,
+} from '@tldraw/mentions'
+import {
+	type MouseEvent as ReactMouseEvent,
+	ReactNode,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react'
 import { isEqual, TLRichText, useMaybeEditor } from 'tldraw'
-import { Avatar } from './avatar'
 import { commentTipTapExtensions, EMPTY_COMMENT, isCommentEmpty } from './comment-extensions'
-import { commentMention } from './comment-mention'
-import { MentionMember } from './mention-list'
-import { createMentionSuggestion, isMentionPickerOpen } from './mention-suggestion'
 import { SendButton } from './send-button'
 
 /** @public */
 export interface CommentComposerProps {
-	author: string
+	author: CommentAuthor
 	placeholder: string
 	/** Controlled rich-text value. Omit for the presentational (display-only) composer. */
 	value?: TLRichText
@@ -19,6 +31,9 @@ export interface CommentComposerProps {
 	/** Called on Send click or Enter. When set, the composer is interactive. */
 	onSubmit?(): void
 	sendLabel?: string
+	/** Called when Up is pressed in an empty composer — e.g. to start editing the comment above,
+	 *  the way chat apps edit your last message. With content in the field, Up moves the cursor. */
+	onArrowUpWhenEmpty?(): void
 	disabled?: boolean
 	autoFocus?: boolean
 	/** The leading element before the field. Defaults to the author's avatar. */
@@ -43,6 +58,7 @@ export function CommentComposer({
 	onChange,
 	onSubmit,
 	sendLabel = 'Send',
+	onArrowUpWhenEmpty,
 	disabled,
 	autoFocus,
 	leading,
@@ -50,16 +66,16 @@ export function CommentComposer({
 	renderMentionSuggestion,
 }: CommentComposerProps) {
 	const interactive = !!onChange || !!onSubmit
-	// The canvas editor the composer lives in, if any — lets the mention popup track the camera. Null
-	// when the composer is used outside a tldraw editor (e.g. an isolated demo).
+	// Lets the mention popup track the camera. Null outside a tldraw editor.
 	const tlEditor = useMaybeEditor()
 
-	// Callbacks are read through refs so the editor instance doesn't need to be recreated when they
-	// change identity between renders.
+	// Read through refs so the editor isn't recreated when callback identity changes.
 	const onChangeRef = useRef(onChange)
 	onChangeRef.current = onChange
 	const onSubmitRef = useRef(onSubmit)
 	onSubmitRef.current = onSubmit
+	const onArrowUpWhenEmptyRef = useRef(onArrowUpWhenEmpty)
+	onArrowUpWhenEmptyRef.current = onArrowUpWhenEmpty
 	const disabledRef = useRef(disabled)
 	disabledRef.current = disabled
 	const getMentionSuggestionsRef = useRef(getMentionSuggestions)
@@ -68,50 +84,80 @@ export function CommentComposer({
 	renderMentionSuggestionRef.current = renderMentionSuggestion
 
 	const [isEmpty, setIsEmpty] = useState(() => !value || isCommentEmpty(value))
+	// Whether the field has grown to two rows: input across the full width, send button below.
+	// Flips when the (single-line) content width reaches the space left beside the send button.
+	const [expanded, setExpanded] = useState(false)
+	const expandedRef = useRef(expanded)
+	expandedRef.current = expanded
+	const inputWrapRef = useRef<HTMLDivElement>(null)
+	const mirrorRef = useRef<HTMLDivElement>(null)
 
-	// Enter submits the comment. Shift+Enter (and Cmd/Ctrl+Enter) keep their default behavior — a
-	// new line — for the occasional multi-line comment.
-	const submitExtension = useMemo(
-		() =>
-			Extension.create({
-				name: 'commentComposerSubmit',
-				priority: 1000,
-				addKeyboardShortcuts() {
-					return {
-						Enter: () => {
-							// While the @-mention picker is open, Enter selects the highlighted member.
-							// This extension outranks the mention plugin (priority 1000), so defer to the
-							// picker here or Enter would submit before the member could be inserted.
-							if (isMentionPickerOpen()) return false
-							if (!disabledRef.current) onSubmitRef.current?.()
-							return true
-						},
-					}
-				},
-			}),
-		[]
-	)
+	// Measure whether the content still fits on one line beside the send button, against a hidden
+	// nowrap clone so marks and mention chips measure at their true width. The gap between the
+	// expand and collapse thresholds is a dead zone, so the layout can't flap at the boundary.
+	const remeasure = () => {
+		const wrap = inputWrapRef.current
+		const mirror = mirrorRef.current
+		const editor = editorRef.current
+		if (!wrap || !mirror || !editor) return
+		// Empty always fits — and measuring before TipTap has laid out reads zero widths, flashing
+		// the expanded layout for a frame on mount.
+		if (editor.isEmpty) {
+			if (expandedRef.current) setExpanded(false)
+			return
+		}
+		if (wrap.clientWidth === 0) return
+		const doc = editor.state.doc
+		const multiBlock =
+			doc.childCount > 1 || (doc.firstChild !== null && doc.firstChild.type.name !== 'paragraph')
+		if (multiBlock) {
+			if (!expandedRef.current) setExpanded(true)
+			return
+		}
+		const field = wrap.parentElement
+		const send = field ? field.querySelector<HTMLElement>('.tlui-cmt-send') : null
+		const input = wrap.querySelector('.tlui-cmt-input')
+		if (!send || !input) return
+		mirror.innerHTML = input.innerHTML
+		const textWidth = mirror.offsetWidth
+		// Measured against the wrap's *content* box: text wraps at clientWidth minus padding, so
+		// without subtracting it the input grows a line before expansion fires and then snaps.
+		const wrapStyle = getComputedStyle(wrap)
+		const wrapPadX = parseFloat(wrapStyle.paddingLeft) + parseFloat(wrapStyle.paddingRight)
+		const collapsedAvailable =
+			wrap.clientWidth - wrapPadX - (expandedRef.current ? send.offsetWidth + 6 : 0)
+		if (!expandedRef.current && textWidth > collapsedAvailable - 8) {
+			setExpanded(true)
+		} else if (expandedRef.current && textWidth < collapsedAvailable - 24) {
+			setExpanded(false)
+		}
+	}
+	const remeasureRef = useRef(remeasure)
+	remeasureRef.current = remeasure
+
+	// Reachable from `handleKeyDown`, which is created before `useEditor` returns.
+	const editorRef = useRef<ReturnType<typeof useEditor>>(null)
+
+	// `commands.enter()` re-dispatches through `handleKeyDown`; without this guard our own handler
+	// would catch the synthetic Enter and submit.
+	const replayingEnter = useRef(false)
 
-	// The suggestion plugin is built once (the editor is recreated only on `interactive`) and runs
-	// outside React, so it must read the mention callbacks through refs — like onChange/onSubmit —
-	// or it queries the roster present at mount forever, never seeing a member who loads or joins
-	// later. Whether mentions (and a custom picker row) are wired at all is fixed at mount; only the
-	// callbacks themselves are live.
+	// The suggestion plugin is built once and runs outside React, so it reads the mention callbacks
+	// through refs — otherwise it queries the roster present at mount forever, never seeing a member
+	// who joins later. Whether mentions are wired at all is fixed at mount; the callbacks are live.
 	const mentionsEnabled = !!getMentionSuggestions
 	const hasCustomRow = !!renderMentionSuggestion
 	const extensions = useMemo(() => {
-		const list = [...commentTipTapExtensions, submitExtension]
-		// Always register the mention node so an existing body that contains a mention keeps it on
-		// edit (an unregistered node would be stripped by ProseMirror when the content loads). The `@`
-		// picker itself only turns on when the host provides a resolver; otherwise the node is present
-		// but its trigger is disabled.
+		const list = [...commentTipTapExtensions]
+		// The mention node is always registered, or ProseMirror strips existing mentions when an
+		// edited body loads. Only the `@` trigger is gated on the host providing a resolver.
 		if (mentionsEnabled) {
 			const resolveSuggestions = (query: string) => getMentionSuggestionsRef.current?.(query) ?? []
 			const renderRow = hasCustomRow
 				? (member: MentionMember) => renderMentionSuggestionRef.current?.(member)
 				: undefined
 			list.push(
-				commentMention({
+				createMentionExtension({
 					suggestion: createMentionSuggestion(resolveSuggestions, {
 						renderMember: renderRow,
 						editor: tlEditor,
@@ -119,29 +165,76 @@ export function CommentComposer({
 				})
 			)
 		} else {
-			list.push(commentMention({ suggestion: { char: '@', allow: () => false } }))
+			list.push(createMentionExtension({ suggestion: { char: '@', allow: () => false } }))
 		}
 		return list
-	}, [submitExtension, mentionsEnabled, hasCustomRow, tlEditor])
+	}, [mentionsEnabled, hasCustomRow, tlEditor])
 
 	const editor = useEditor(
 		{
 			extensions,
 			content: (value ?? EMPTY_COMMENT) as JSONContent,
 			editable: interactive,
-			// tldraw's default extensions add their own TextDirection extension (so it can be
-			// overridden), so disable TipTap's core one to avoid a duplicate-extension warning —
-			// mirrors RichTextArea's setup.
+			// tldraw ships its own TextDirection extension, so TipTap's core one would warn about a
+			// duplicate. Mirrors RichTextArea's setup.
 			enableCoreExtensions: { textDirection: false },
 			textDirection: 'auto',
-			editorProps: { attributes: { class: 'cmt-input' } },
+			editorProps: {
+				attributes: {
+					class: 'tlui-cmt-input',
+					'aria-label': placeholder,
+					role: 'textbox',
+					'aria-multiline': 'true',
+				},
+				// Runs before every keymap plugin, so it can distinguish Shift+Enter from Enter — an
+				// `Enter` keymap binding also fires on Shift+Enter and would otherwise swallow it.
+				handleKeyDown: (_view, event) => {
+					// Let the keymaps handle the synthetic Enter we replay for a Shift+Enter newline.
+					if (replayingEnter.current) return false
+					// Up in an empty composer hands off to the host. With content it stays cursor
+					// movement, and with the picker open it navigates the roster.
+					if (event.key === 'ArrowUp' && !event.isComposing) {
+						if (
+							onArrowUpWhenEmptyRef.current &&
+							editorRef.current?.isEmpty &&
+							!isMentionPickerOpen()
+						) {
+							onArrowUpWhenEmptyRef.current()
+							return true
+						}
+						return false
+					}
+					if (event.key !== 'Enter' || event.isComposing) return false
+					// While the @-mention picker is open, Enter selects the highlighted member — defer.
+					if (isMentionPickerOpen()) return false
+					// Shift+Enter inserts a new line by replaying a plain Enter through the keymaps, reusing
+					// the editor's list-aware handling. tldraw doesn't do soft breaks.
+					if (event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey) {
+						// An empty field would open the comment with a stray leading blank line.
+						if (editorRef.current?.isEmpty) return true
+						replayingEnter.current = true
+						try {
+							editorRef.current?.commands.enter()
+						} finally {
+							replayingEnter.current = false
+						}
+						return true
+					}
+					// Enter, Cmd+Enter, and Ctrl+Enter submit.
+					if (!disabledRef.current) onSubmitRef.current?.()
+					return true
+				},
+			},
 			onUpdate: ({ editor }) => {
 				setIsEmpty(editor.isEmpty)
+				// Same-value state sets don't re-render, and the DOM is already updated here.
+				remeasureRef.current()
 				onChangeRef.current?.(editor.getJSON() as TLRichText)
 			},
 		},
-		[interactive]
+		[interactive, placeholder]
 	)
+	editorRef.current = editor
 
 	// Sync controlled resets (e.g. the parent clearing to EMPTY_COMMENT after posting) into the
 	// editor without echoing back the value the editor itself just emitted.
@@ -152,6 +245,12 @@ export function CommentComposer({
 		setIsEmpty(editor.isEmpty)
 	}, [editor, value])
 
+	// Measure once the editor's content is in the DOM, so a composer that mounts pre-filled (the
+	// edit-in-place composer) starts in the right layout.
+	useLayoutEffect(() => {
+		remeasureRef.current()
+	}, [editor, value])
+
 	// Focus on the next frame rather than via TipTap's autofocus: the composer often mounts from a
 	// canvas pointer event whose default focus handling would otherwise steal it back.
 	useEffect(() => {
@@ -160,17 +259,40 @@ export function CommentComposer({
 		return () => cancelAnimationFrame(raf)
 	}, [autoFocus, editor])
 
+	// The whole field behaves like the text input: clicking its empty area (the padding, or the
+	// space beside/below a short line) focuses the editor rather than only the text glyphs being
+	// clickable. The input (caret placement) and the send button keep their own click handling.
+	const focusEditorFromField = (e: ReactMouseEvent<HTMLDivElement>) => {
+		const target = e.target as HTMLElement
+		if (target.closest('.tlui-cmt-input') || target.closest('.tlui-cmt-send')) return
+		e.preventDefault()
+		editor?.commands.focus('end')
+	}
+
 	return (
-		<div className="cmt-composer">
-			{leading ?? <Avatar name={author} />}
-			<div className="cmt-composer__field">
-				<div className="cmt-composer__input-wrap">
+		<div className="tlui-cmt-composer">
+			{leading ?? <Avatar author={author} />}
+			<div
+				className={[
+					'tlui-cmt-composer__field',
+					interactive && expanded && 'tlui-cmt-composer__field--expanded',
+				]
+					.filter(Boolean)
+					.join(' ')}
+				onMouseDown={interactive ? focusEditorFromField : undefined}
+			>
+				<div className="tlui-cmt-composer__input-wrap" ref={inputWrapRef}>
 					<EditorContent editor={editor} />
 					{isEmpty && (
-						<div className="cmt-input__placeholder" aria-hidden="true">
+						<div className="tlui-cmt-input__placeholder" aria-hidden="true">
 							{placeholder}
 						</div>
 					)}
+					<div
+						className="tlui-cmt-composer__mirror tlui-cmt-input"
+						ref={mirrorRef}
+						aria-hidden="true"
+					/>
 				</div>
 				{interactive && <SendButton label={sendLabel} onClick={onSubmit} disabled={disabled} />}
 			</div>

package/src/ui/comment-pin.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import { PinCheckIcon } from './icons'
 
 /** @public */
 export interface CommentPinProps {
@@ -10,12 +11,22 @@ export interface CommentPinProps {
 	open?: boolean
 }
 
+/* Decorative — the pin's accessible name lives on whatever wraps it. */
+const resolvedCheck = <PinCheckIcon />
+
 /** A canvas comment marker: shows its `children` (or a check when resolved). Purely
  * presentational — it reflects open/resolved state via CSS; wrap it to make it clickable.
  * @public @react */
 export function CommentPin({ children, resolved, open }: CommentPinProps) {
-	const className = ['cmt-pin', resolved && 'cmt-pin--resolved', open && 'cmt-pin--open']
+	const className = [
+		// `tlui-cmt-marker` carries the resting shadow and the hover lift — the same treatment a
+		// count badge wears, so the two markers behave alike.
+		'tlui-cmt-marker',
+		'tlui-cmt-pin',
+		resolved && 'tlui-cmt-pin--resolved',
+		open && 'tlui-cmt-marker--open',
+	]
 		.filter(Boolean)
 		.join(' ')
-	return <div className={className}>{resolved ? '✓' : children}</div>
+	return <div className={className}>{resolved ? resolvedCheck : children}</div>
 }

package/src/ui/comment-thread.tsx

@@ -14,6 +14,9 @@ export interface CommentThreadProps {
 	resolvedBanner?: ReactNode
 	/** Reply composer props. Omit for a read-only thread (no composer). */
 	composer?: CommentComposerProps
+	/** Shown at the bottom of the thread (e.g. a sign-in prompt when there's no composer). When
+	 *  both are set, the footer renders after the composer. */
+	footer?: ReactNode
 	/** Override how each comment renders. Defaults to `<CommentCard>`. */
 	renderComment?(comment: CommentCardProps, index: number): ReactNode
 }
@@ -30,20 +33,23 @@ export function CommentThread({
 	headerActions,
 	resolvedBanner,
 	composer,
+	footer,
 	renderComment,
 }: CommentThreadProps) {
 	return (
-		<div className="cmt-thread">
+		<div className="tlui-cmt-thread">
 			{(header !== undefined || headerActions !== undefined) && (
-				<div className="cmt-thread__header">
-					<span className="cmt-thread__title">{header}</span>
+				<div className="tlui-cmt-thread__header">
+					{header !== undefined && <span className="tlui-cmt-thread__title">{header}</span>}
 					{headerActions !== undefined && (
-						<div className="cmt-thread__actions">{headerActions}</div>
+						<div className="tlui-cmt-thread__actions">{headerActions}</div>
 					)}
 				</div>
 			)}
-			{resolvedBanner !== undefined && <div className="cmt-thread__resolved">{resolvedBanner}</div>}
-			<div className="cmt-thread__list">
+			{resolvedBanner !== undefined && (
+				<div className="tlui-cmt-thread__resolved">{resolvedBanner}</div>
+			)}
+			<div className="tlui-cmt-thread__list">
 				{comments.map((comment, i) => (
 					<div key={i}>
 						{renderComment ? renderComment(comment, i) : <CommentCard {...comment} />}
@@ -51,6 +57,7 @@ export function CommentThread({
 				))}
 			</div>
 			{composer !== undefined && <CommentComposer {...composer} />}
+			{footer !== undefined && <div className="tlui-cmt-thread__footer">{footer}</div>}
 		</div>
 	)
 }

package/src/ui/comments-list.test.ts

@@ -0,0 +1,31 @@
+import { MouseEvent } from 'react'
+import { describe, expect, it } from 'vitest'
+import { isOpenInNewTabClick } from './comments-list'
+
+function click(overrides: Partial<MouseEvent> = {}): MouseEvent {
+	return {
+		metaKey: false,
+		ctrlKey: false,
+		shiftKey: false,
+		altKey: false,
+		button: 0,
+		...overrides,
+	} as MouseEvent
+}
+
+describe('isOpenInNewTabClick', () => {
+	it('treats a plain left click as an in-place select', () => {
+		expect(isOpenInNewTabClick(click())).toBe(false)
+	})
+
+	it.each(['metaKey', 'ctrlKey', 'shiftKey', 'altKey'] as const)(
+		'leaves a %s click to the browser',
+		(modifier) => {
+			expect(isOpenInNewTabClick(click({ [modifier]: true }))).toBe(true)
+		}
+	)
+
+	it('leaves non-primary-button clicks to the browser', () => {
+		expect(isOpenInNewTabClick(click({ button: 1 }))).toBe(true)
+	})
+})

package/src/ui/comments-list.tsx

@@ -1,11 +1,15 @@
-import { ReactNode } from 'react'
-import { Avatar } from './avatar'
+import { Avatar, type CommentAuthor } from '@tldraw/mentions'
+import { Fragment, MouseEvent, ReactNode } from 'react'
+import { useTranslation } from 'tldraw'
 import { Byline } from './byline'
+import { CheckIcon } from './icons'
+import { Reactions, type ReactionSummary } from './reactions'
+import { replyCountLabel } from './reply-count'
 
 /** @public */
 export interface CommentListItemProps {
 	id: string
-	author: string
+	author: CommentAuthor
 	/** A short preview of the thread — e.g. the first comment's body. */
 	preview: ReactNode
 	/** ISO datetime of the thread's first comment. */
@@ -17,6 +21,28 @@ export interface CommentListItemProps {
 	count?: number
 	/** Whether this thread is the open one. */
 	selected?: boolean
+	/** Tallied reactions for the row (a thread's, or a single comment's when the row is one
+	 *  comment), shown as inert pills under the preview. Omit to hide. */
+	reactions?: ReactionSummary[]
+	/**
+	 * Link target for the item. When set, the row renders as an anchor so browser affordances
+	 * (ctrl/cmd-click, middle-click) open it in a new tab; a plain click still calls `onSelect`.
+	 */
+	href?: string
+}
+
+/**
+ * What a row is rendered with: the item, plus the list-level wiring it needs to be interactive.
+ * A custom row gets the same props the default `<CommentListItem>` does, so it can wrap the
+ * default rather than reimplement it.
+ *
+ * @public
+ */
+export interface CommentListItemRenderProps extends CommentListItemProps {
+	/** Label for a resolved thread's marker on its row. */
+	resolvedLabel?: string
+	/** Called with the thread id when the row is chosen. */
+	onSelect?(id: string): void
 }
 
 /** @public */
@@ -32,8 +58,12 @@ export interface CommentsListProps {
 	empty?: ReactNode
 	/** Label for a resolved thread's marker on its row. Defaults to "Resolved". */
 	resolvedLabel?: string
-	/** Override how each item renders. Defaults to `<CommentListItem>`. */
-	renderItem?(item: CommentListItemProps): ReactNode
+	/**
+	 * Override how each item renders. Defaults to `<CommentListItem>`, which is exported — so a
+	 * row that only adds something can spread these props into it rather than start over. The list
+	 * supplies the key, so a custom row doesn't need one.
+	 */
+	renderItem?(props: CommentListItemRenderProps): ReactNode
 }
 
 /**
@@ -52,36 +82,36 @@ export function CommentsList({
 	renderItem,
 }: CommentsListProps) {
 	return (
-		<div className="cmt-list">
+		<div className="tlui-cmt-list">
 			{(header !== undefined || headerAction) && (
-				<div className="cmt-list__header">
-					{header !== undefined && <span className="cmt-list__header-title">{header}</span>}
+				<div className="tlui-cmt-list__header">
+					{header !== undefined && <span className="tlui-cmt-list__header-title">{header}</span>}
 					{headerAction}
 				</div>
 			)}
 			{items.length === 0 ? (
-				<div className="cmt-list__empty">{empty}</div>
+				<div className="tlui-cmt-list__empty">{empty}</div>
 			) : (
-				<div className="cmt-list__items">
-					{items.map((item) =>
-						renderItem ? (
-							renderItem(item)
+				<div className="tlui-cmt-list__items">
+					{items.map((item) => {
+						const props: CommentListItemRenderProps = { ...item, resolvedLabel, onSelect }
+						// A custom row is wrapped rather than keyed directly: it's the consumer's element,
+						// and requiring them to remember a key is the kind of thing that only shows up as a
+						// console warning in someone else's app.
+						return renderItem ? (
+							<Fragment key={item.id}>{renderItem(props)}</Fragment>
 						) : (
-							<CommentListItem
-								key={item.id}
-								{...item}
-								resolvedLabel={resolvedLabel}
-								onSelect={onSelect}
-							/>
+							<CommentListItem key={item.id} {...props} />
 						)
-					)}
+					})}
 				</div>
 			)}
 		</div>
 	)
 }
 
-function CommentListItem({
+/** One thread's row in a {@link CommentsList}. @public @react */
+export function CommentListItem({
 	id,
 	author,
 	preview,
@@ -90,50 +120,55 @@ function CommentListItem({
 	page,
 	count,
 	selected,
+	reactions,
+	href,
 	resolvedLabel = 'Resolved',
 	onSelect,
-}: CommentListItemProps & { resolvedLabel?: string; onSelect?(id: string): void }) {
-	const handleClick = () => {
+}: CommentListItemRenderProps) {
+	const msg = useTranslation()
+	const handleClick = (e: MouseEvent) => {
+		if (href && isOpenInNewTabClick(e)) return
+		e.preventDefault()
 		if (onSelect) onSelect(id)
 	}
+	const Tag = href ? 'a' : 'button'
+	// `count` is the thread's total comments; a reply is every comment after the opening one.
+	const replies = count !== undefined ? replyCountLabel(msg, count - 1) : null
 	return (
-		<button
-			type="button"
-			className={selected ? 'cmt-list__item cmt-list__item--selected' : 'cmt-list__item'}
+		<Tag
+			{...(href ? { href } : { type: 'button' })}
+			className={
+				selected ? 'tlui-cmt-list__item tlui-cmt-list__item--selected' : 'tlui-cmt-list__item'
+			}
 			data-resolved={resolved || undefined}
 			onClick={handleClick}
 		>
-			<Avatar name={author} />
-			<div className="cmt-list__item-body">
+			<Avatar author={author} />
+			<div className="tlui-cmt-list__item-body">
 				<Byline author={author} date={date} />
-				<div className="cmt-list__item-preview">{preview}</div>
-				{(resolved || page !== undefined) && (
-					<div className="cmt-list__item-meta">
+				<div className="tlui-cmt-list__item-preview">{preview}</div>
+				{reactions && <Reactions reactions={reactions} canReact={false} enableHoverList={false} />}
+				{(resolved || page !== undefined || replies) && (
+					<div className="tlui-cmt-list__item-meta">
 						{resolved && (
-							<span className="cmt-list__item-resolved">
+							<span className="tlui-cmt-list__item-resolved">
 								<CheckIcon />
 								{resolvedLabel}
 							</span>
 						)}
-						{page !== undefined && <span className="cmt-list__item-page">{page}</span>}
+						{page !== undefined && <span className="tlui-cmt-list__item-page">{page}</span>}
+						{replies && <span className="tlui-cmt-list__item-replies">{replies}</span>}
 					</div>
 				)}
 			</div>
-			{count !== undefined && count > 1 && <span className="cmt-list__item-count">{count}</span>}
-		</button>
+		</Tag>
 	)
 }
 
-function CheckIcon() {
-	return (
-		<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
-			<path
-				d="M2.5 6.2 4.7 8.4 9.5 3.6"
-				stroke="currentColor"
-				strokeWidth="1.5"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-			/>
-		</svg>
-	)
+/**
+ * Whether a click should be left to the browser's link handling (new tab, new window, or download).
+ * @public
+ */
+export function isOpenInNewTabClick(e: MouseEvent) {
+	return e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0
 }