@tldraw/commenting 5.3.0-internal.c5c7f1d817d0 → 5.3.0-next.2fa9c61a8de6

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,13 +33,14 @@ export function CommentThread({
 	headerActions,
 	resolvedBanner,
 	composer,
+	footer,
 	renderComment,
 }: CommentThreadProps) {
 	return (
 		<div className="tlui-cmt-thread">
 			{(header !== undefined || headerActions !== undefined) && (
 				<div className="tlui-cmt-thread__header">
-					<span className="tlui-cmt-thread__title">{header}</span>
+					{header !== undefined && <span className="tlui-cmt-thread__title">{header}</span>}
 					{headerActions !== undefined && (
 						<div className="tlui-cmt-thread__actions">{headerActions}</div>
 					)}
@@ -53,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,13 @@
-import { ReactNode } from 'react'
-import { Avatar } from './avatar'
+import { Avatar, type CommentAuthor } from '@tldraw/mentions'
+import { MouseEvent, ReactNode } from 'react'
+import { useTranslation } from 'tldraw'
 import { Byline } from './byline'
+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 +19,11 @@ export interface CommentListItemProps {
 	count?: number
 	/** Whether this thread is the open one. */
 	selected?: boolean
+	/**
+	 * 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
 }
 
 /** @public */
@@ -90,26 +97,33 @@ function CommentListItem({
 	page,
 	count,
 	selected,
+	href,
 	resolvedLabel = 'Resolved',
 	onSelect,
 }: CommentListItemProps & { resolvedLabel?: string; onSelect?(id: string): void }) {
-	const handleClick = () => {
+	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"
+		<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} />
+			<Avatar author={author} />
 			<div className="tlui-cmt-list__item-body">
 				<Byline author={author} date={date} />
 				<div className="tlui-cmt-list__item-preview">{preview}</div>
-				{(resolved || page !== undefined) && (
+				{(resolved || page !== undefined || replies) && (
 					<div className="tlui-cmt-list__item-meta">
 						{resolved && (
 							<span className="tlui-cmt-list__item-resolved">
@@ -118,16 +132,22 @@ function CommentListItem({
 							</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="tlui-cmt-list__item-count">{count}</span>
-			)}
-		</button>
+		</Tag>
 	)
 }
 
+/**
+ * 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
+}
+
 function CheckIcon() {
 	return (
 		<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">