@tldraw/commenting 5.5.0-next.c25ed1f4cf7f → 5.5.0-next.c91b2de0a423

package/src/canvas/thread-stack.tsx

@@ -15,7 +15,7 @@ import { useCommentingOptions } from './options'
 import { pinStackKey } from './pin-stacking'
 import { openStackId, openThreadId } from './state'
 import { ThreadPreview, useMarkerPreview } from './thread-preview'
-import { anchorPagePoint, impreciseShapePinInset } from './thread-state'
+import { anchorPagePoint, anchorViewportPoint } from './thread-state'
 import {
 	POPOVER_OFFSET,
 	ThreadPopover,
@@ -73,11 +73,7 @@ export const ThreadStackPin = memo(function ThreadStackPin({
 			// The badge hangs off its anchor point bottom-left like a pin, and applies the same imprecise-shape
 			// inset the pins it stands in for would (see ThreadPin) — otherwise the marker would snap from tucked
 			// inside the shape to the raw corner the moment a second comment turns a pin into a stack.
-			const pagePoint = anchorPagePoint(editor, first.anchor)
-			if (!pagePoint) return null
-			const viewportPoint = editor.pageToViewport(pagePoint)
-			const inset = impreciseShapePinInset(editor, first.anchor)
-			return inset ? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y } : viewportPoint
+			return anchorViewportPoint(editor, first.anchor)
 		},
 		[editor, threads]
 	)
@@ -132,7 +128,7 @@ export const ThreadStackPin = memo(function ThreadStackPin({
 	// The expanded thread gains a header that pushes its first comment down from where the hover preview
 	// showed it. When that thread is the list's first, lift the whole list so its "You" holds position
 	// across hover -> open. Only the first entry — lifting can't also hold a lower thread's neighbours.
-	const liftForHeader = threads[0]?.id === openId ? 42 : 0
+	const liftForHeader = threads[0].id === openId ? 42 : 0
 
 	return (
 		<>

package/src/canvas/thread-state.ts

@@ -101,6 +101,16 @@ export function regionPinPoint(region: BoxModel, corner: VecLike = REGION_PIN_CO
 	}
 }
 
+/** The inverse of {@link regionPinPoint}: a region translated so its pin corner lands on `pinPage`;
+ *  size unchanged. */
+export function regionWithPinAt(
+	region: Extract<TLCommentAnchor, { type: 'region' }>,
+	pinCorner: VecLike,
+	pinPage: VecLike
+): Extract<TLCommentAnchor, { type: 'region' }> {
+	return { ...region, x: pinPage.x - pinCorner.x * region.w, y: pinPage.y - pinCorner.y * region.h }
+}
+
 /**
  * Where a thread's pin sits on the page, for each anchor kind. Null hides the pin. Imprecise shape
  * anchors use {@link CommentingOptions.impreciseShapeAnchor} rather than the stored `x`/`y`.
@@ -133,6 +143,22 @@ export function anchorPagePoint(
 	}
 }
 
+/**
+ * Where a thread's marker is drawn, in viewport space: {@link anchorPagePoint} projected through
+ * the camera, plus the imprecise-shape inset. Null when the anchor resolves to no point.
+ * @internal
+ */
+export function anchorViewportPoint(
+	editor: Editor,
+	anchor: TLCommentAnchor
+): { x: number; y: number } | null {
+	const pagePoint = anchorPagePoint(editor, anchor)
+	if (!pagePoint) return null
+	const viewportPoint = editor.pageToViewport(pagePoint)
+	const inset = impreciseShapePinInset(editor, anchor)
+	return inset ? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y } : viewportPoint
+}
+
 /**
  * The shape a comment placed at a page point should anchor to, or undefined for empty canvas.
  *

package/src/canvas/thread-view.tsx

@@ -53,6 +53,68 @@ import { openThreadId } from './state'
 
 const stop = (e: { stopPropagation(): void }) => e.stopPropagation()
 
+/** The "⋯" dropdown used for both a comment's and the thread's actions. */
+function MoreOptionsMenu({
+	id,
+	moreFor,
+	children,
+}: {
+	id: string
+	/** The comment whose ⋯ button this is, so `startEdit` can find it again to return focus. */
+	moreFor?: string
+	children: ReactNode
+}) {
+	const msg = useTranslation()
+	return (
+		<TldrawUiDropdownMenuRoot id={id}>
+			<TldrawUiDropdownMenuTrigger>
+				<TldrawUiButton
+					type="icon"
+					tooltip={msg('comments.more-options')}
+					title={msg('comments.more-options')}
+					className="tlui-cmt-thread__action"
+					data-cmt-more-for={moreFor}
+				>
+					<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
+				</TldrawUiButton>
+			</TldrawUiDropdownMenuTrigger>
+			<TldrawUiDropdownMenuContent
+				className="tlui-cmt-menu"
+				side="bottom"
+				align="start"
+				alignOffset={0}
+				sideOffset={4}
+			>
+				<TldrawUiDropdownMenuGroup>{children}</TldrawUiDropdownMenuGroup>
+			</TldrawUiDropdownMenuContent>
+		</TldrawUiDropdownMenuRoot>
+	)
+}
+
+function MenuItem({
+	label,
+	danger,
+	noClose,
+	onClick,
+}: {
+	label: string
+	danger?: boolean
+	noClose?: boolean
+	onClick(): void
+}) {
+	return (
+		<TldrawUiDropdownMenuItem noClose={noClose}>
+			<button
+				type="button"
+				className={danger ? 'tlui-cmt-menu-item tlui-cmt-menu-item--danger' : 'tlui-cmt-menu-item'}
+				onClick={onClick}
+			>
+				<span>{label}</span>
+			</button>
+		</TldrawUiDropdownMenuItem>
+	)
+}
+
 /**
  * A name-only view of an author resolver, for the mention/rich-text paths. Stable identity, so
  * `CommentBody`'s memoized render doesn't recompute on every render of its host.
@@ -352,9 +414,7 @@ export const ThreadView = memo(function ThreadView({
 	// No `currentUserId` check: unlike a resolve, a delete stamps nothing on the record, so who may
 	// make it is `canModifyComment`'s call alone (which withholds it from an unidentified viewer by
 	// default).
-	const removeThread = () => {
-		deleteThread(editor, thread)
-	}
+	const removeThread = () => deleteThread(editor, thread)
 
 	const ThreadActions = options.components.ThreadActions
 	// The host's URL for this thread. Its presence is what puts "copy link" in the header menu.
@@ -428,55 +488,21 @@ export const ThreadView = memo(function ThreadView({
 					canComment && (
 						<>
 							{(permissions?.edit || permissions?.delete) && (
-								<TldrawUiDropdownMenuRoot id={`comment-actions-${comment.id}`}>
-									<TldrawUiDropdownMenuTrigger>
-										<TldrawUiButton
-											type="icon"
-											tooltip={msg('comments.more-options')}
-											title={msg('comments.more-options')}
-											className="tlui-cmt-thread__action"
-											data-cmt-more-for={comment.id}
-										>
-											<TldrawUiIcon
-												icon="dots-vertical"
-												label={msg('comments.more-options')}
-												small
-											/>
-										</TldrawUiButton>
-									</TldrawUiDropdownMenuTrigger>
-									<TldrawUiDropdownMenuContent
-										className="tlui-cmt-menu"
-										side="bottom"
-										align="start"
-										alignOffset={0}
-										sideOffset={4}
-									>
-										<TldrawUiDropdownMenuGroup>
-											{permissions?.edit && (
-												<TldrawUiDropdownMenuItem>
-													<button
-														type="button"
-														className="tlui-cmt-menu-item"
-														onClick={() => startEdit(comment, { fromMoreMenu: true })}
-													>
-														<span>{msg('comments.edit')}</span>
-													</button>
-												</TldrawUiDropdownMenuItem>
-											)}
-											{permissions?.delete && (
-												<TldrawUiDropdownMenuItem>
-													<button
-														type="button"
-														className="tlui-cmt-menu-item tlui-cmt-menu-item--danger"
-														onClick={() => deleteComment(editor, comment)}
-													>
-														<span>{msg('action.delete')}</span>
-													</button>
-												</TldrawUiDropdownMenuItem>
-											)}
-										</TldrawUiDropdownMenuGroup>
-									</TldrawUiDropdownMenuContent>
-								</TldrawUiDropdownMenuRoot>
+								<MoreOptionsMenu id={`comment-actions-${comment.id}`} moreFor={comment.id}>
+									{permissions?.edit && (
+										<MenuItem
+											label={msg('comments.edit')}
+											onClick={() => startEdit(comment, { fromMoreMenu: true })}
+										/>
+									)}
+									{permissions?.delete && (
+										<MenuItem
+											label={msg('action.delete')}
+											danger
+											onClick={() => deleteComment(editor, comment)}
+										/>
+									)}
+								</MoreOptionsMenu>
 							)}
 							{/* Last so react is always the rightmost pill. */}
 							<CommentReactionPicker comment={comment} currentUserId={currentUserId} />
@@ -495,49 +521,21 @@ export const ThreadView = memo(function ThreadView({
 			{/* Host verbs — assign, link a ticket — sit ahead of the built-in actions. */}
 			{ThreadActions && <ThreadActions thread={thread} comments={comments} />}
 			{(threadHref !== undefined || canDeleteThread) && (
-				<TldrawUiDropdownMenuRoot id={`comment-thread-actions-${thread.id}`}>
-					<TldrawUiDropdownMenuTrigger>
-						<TldrawUiButton
-							type="icon"
-							tooltip={msg('comments.more-options')}
-							title={msg('comments.more-options')}
-							className="tlui-cmt-thread__action"
-						>
-							<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
-						</TldrawUiButton>
-					</TldrawUiDropdownMenuTrigger>
-					<TldrawUiDropdownMenuContent
-						className="tlui-cmt-menu"
-						side="bottom"
-						align="start"
-						alignOffset={0}
-						sideOffset={4}
-					>
-						<TldrawUiDropdownMenuGroup>
-							{/* A link is a read affordance: offered to anyone who can see the thread,
-							    including a viewer who can't comment. `noClose` keeps the menu up so the
-							    item can confirm the copy in place. */}
-							{threadHref !== undefined && (
-								<TldrawUiDropdownMenuItem noClose>
-									<button type="button" className="tlui-cmt-menu-item" onClick={copyThreadLink}>
-										<span>{msg(linkCopied ? 'comments.link-copied' : 'comments.copy-link')}</span>
-									</button>
-								</TldrawUiDropdownMenuItem>
-							)}
-							{canDeleteThread && (
-								<TldrawUiDropdownMenuItem>
-									<button
-										type="button"
-										className="tlui-cmt-menu-item tlui-cmt-menu-item--danger"
-										onClick={removeThread}
-									>
-										<span>{msg('comments.delete')}</span>
-									</button>
-								</TldrawUiDropdownMenuItem>
-							)}
-						</TldrawUiDropdownMenuGroup>
-					</TldrawUiDropdownMenuContent>
-				</TldrawUiDropdownMenuRoot>
+				<MoreOptionsMenu id={`comment-thread-actions-${thread.id}`}>
+					{/* A link is a read affordance: offered to anyone who can see the thread,
+					    including a viewer who can't comment. `noClose` keeps the menu up so the
+					    item can confirm the copy in place. */}
+					{threadHref !== undefined && (
+						<MenuItem
+							label={msg(linkCopied ? 'comments.link-copied' : 'comments.copy-link')}
+							noClose
+							onClick={copyThreadLink}
+						/>
+					)}
+					{canDeleteThread && (
+						<MenuItem label={msg('comments.delete')} danger onClick={removeThread} />
+					)}
+				</MoreOptionsMenu>
 			)}
 			{canComment && currentUserId && (
 				<TldrawUiButton

package/src/clustering/computeClusterTable.ts

@@ -9,16 +9,6 @@ import type {
 	LeafScreenOffsets,
 } from './types'
 
-interface ResolvedClusterOptions {
-	Tc: number
-	Tu: number
-	eps: number
-	Dmax: number
-	minZoom: number
-	maxZoom: number
-	maxSplitZoom: number
-}
-
 /** @internal */
 export function computeClusterTable(
 	leaves: readonly LeafInput[],
@@ -35,20 +25,13 @@ export function computeClusterTable(
 		return { events: [], leaves: leafNodes }
 	}
 
-	const raw = cappedReplay(leaves, edges, { Tc: opts.Tc, Dmax: opts.Dmax }, screenOffsets)
-	const contracted = contract(raw, opts.eps)
-	const events = finalize(contracted, {
-		Tc: opts.Tc,
-		Tu: opts.Tu,
-		minZoom: opts.minZoom,
-		maxZoom: opts.maxZoom,
-		maxSplitZoom: opts.maxSplitZoom,
-	})
+	const raw = cappedReplay(leaves, edges, opts, screenOffsets)
+	const events = finalize(contract(raw, opts.eps), opts)
 
 	return { events, leaves: leafNodes }
 }
 
-function resolveOptions(options: ClusterOptions): ResolvedClusterOptions {
+function resolveOptions(options: ClusterOptions): Required<ClusterOptions> {
 	const Tc = options.Tc ?? 22
 	const Tu = options.Tu ?? 1.2 * Tc
 	const eps = options.eps ?? 0.7

package/src/clustering/replay.ts

@@ -166,8 +166,6 @@ class ClusterState {
 	private readonly centroidY: Float64Array
 	private readonly counts: Int32Array
 	private readonly nodes: ClusterNode[]
-	private readonly memberLists: string[][]
-	private readonly minMemberIds: string[]
 	// Per-cluster sums of member render offsets (screen px), maintained like the centroid sums.
 	// Null when no offsets were passed — offsetDelta() then answers null unconditionally, which
 	// routes every pricing call down the offset-unaware path.
@@ -185,8 +183,6 @@ class ClusterState {
 		this.centroidY = new Float64Array(n)
 		this.counts = new Int32Array(n)
 		this.nodes = new Array(n)
-		this.memberLists = new Array(n)
-		this.minMemberIds = new Array(n)
 
 		if (screenOffsets !== undefined && screenOffsets.size > 0) {
 			this.offsetX = new Float64Array(n)
@@ -213,8 +209,6 @@ class ClusterState {
 			this.centroidX[i] = leaf.point.x
 			this.centroidY[i] = leaf.point.y
 			this.counts[i] = 1
-			this.memberLists[i] = [leaf.id]
-			this.minMemberIds[i] = leaf.id
 			this.nodes[i] = {
 				id: leaf.id,
 				centroid: { x: leaf.point.x, y: leaf.point.y },
@@ -237,6 +231,7 @@ class ClusterState {
 		return root
 	}
 
+	/** Allocation-free: this is the hot path when no offsets are passed. */
 	centroidDistance(aRoot: number, bRoot: number): number {
 		return Math.hypot(
 			this.centroidX[aRoot] - this.centroidX[bRoot],
@@ -271,12 +266,12 @@ class ClusterState {
 	}
 
 	merge(aRoot: number, bRoot: number, z: number): RawMergeEvent {
-		const leftRoot = this.minMemberIds[aRoot] < this.minMemberIds[bRoot] ? aRoot : bRoot
+		const leftRoot = this.nodes[aRoot].members[0] < this.nodes[bRoot].members[0] ? aRoot : bRoot
 		const rightRoot = leftRoot === aRoot ? bRoot : aRoot
 		const left = this.nodes[leftRoot]
 		const right = this.nodes[rightRoot]
 		const count = this.counts[leftRoot] + this.counts[rightRoot]
-		const members = mergeSortedMembers(this.memberLists[leftRoot], this.memberLists[rightRoot])
+		const members = mergeSortedMembers(left.members, right.members)
 
 		const minX = Math.min(this.minX[leftRoot], this.minX[rightRoot])
 		const minY = Math.min(this.minY[leftRoot], this.minY[rightRoot])
@@ -308,8 +303,6 @@ class ClusterState {
 		this.centroidY[leftRoot] = centroidY
 		this.counts[leftRoot] = count
 		this.nodes[leftRoot] = result
-		this.memberLists[leftRoot] = members
-		this.minMemberIds[leftRoot] = members[0]
 		if (this.offsetX !== null && this.offsetY !== null) {
 			this.offsetX[leftRoot] += this.offsetX[rightRoot]
 			this.offsetY[leftRoot] += this.offsetY[rightRoot]
@@ -343,10 +336,11 @@ interface HeapEntry {
 
 class EdgeMaxHeap {
 	private readonly items: HeapEntry[] = []
-	// Per-edge normalized (lo, hi) id pair for the z tie-break, precomputed once so comparisons
-	// allocate nothing. With coincident anchors every edge prices to the same z (+Infinity), so
-	// the tie-break runs on nearly every comparison of a rebuild — allocating the pair there
-	// churned millions of short-lived tuples.
+	// Per-edge (lo, hi) id pair for the z tie-break, precomputed once so comparisons allocate
+	// nothing. Relies on MstEdge's invariant that leaves[a].id < leaves[b].id; the heap does not
+	// re-normalize. With coincident anchors every edge prices to the same z (+Infinity), so the
+	// tie-break runs on nearly every comparison of a rebuild: allocating the pair there churned
+	// millions of short-lived tuples.
 	private readonly loIds: string[]
 	private readonly hiIds: string[]
 
@@ -355,15 +349,8 @@ class EdgeMaxHeap {
 		this.loIds = new Array(n)
 		this.hiIds = new Array(n)
 		for (let i = 0; i < n; i++) {
-			const aId = leaves[edges[i].a].id
-			const bId = leaves[edges[i].b].id
-			if (aId < bId) {
-				this.loIds[i] = aId
-				this.hiIds[i] = bId
-			} else {
-				this.loIds[i] = bId
-				this.hiIds[i] = aId
-			}
+			this.loIds[i] = leaves[edges[i].a].id
+			this.hiIds[i] = leaves[edges[i].b].id
 		}
 	}
 

package/src/clustering/runtime.ts

@@ -70,7 +70,7 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 	private resolvedCache: { version: number; map: Map<string, ClusterNode> } | null = null
 
 	constructor(private readonly table: ClusterTable) {
-		this.resetVisible()
+		this.reset()
 	}
 
 	getSuppressedCount(): number {
@@ -84,10 +84,7 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 	seed(zoom: number): void {
 		validateZoom(zoom)
 		this.k = seedCount(this.table.events, zoom)
-		this.suppressed.clear()
-		this.detached.clear()
-		this.patched.clear()
-		this.resetVisible()
+		this.reset()
 		for (let i = 0; i < this.k; i++) {
 			applyEvent(this.visible, this.table.events[i])
 		}
@@ -114,10 +111,7 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 		}
 
 		this.k = k
-		this.suppressed.clear()
-		this.detached.clear()
-		this.patched.clear()
-		this.resetVisible()
+		this.reset()
 		for (let i = 0; i < k; i++) {
 			const event = events[i]
 			if (zoom > event.zMerge && !wasMergedTogether(event.result.members, ownerByMember)) {
@@ -222,8 +216,8 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 			this.patched.set(id, null)
 		}
 		const patch = (node: ClusterNode) => {
-			if (node.members.length === 1 || !node.members.some((m) => this.detached.has(m))) return
 			const members = node.members.filter((m) => !this.detached.has(m))
+			if (members.length === node.members.length) return
 			if (members.length === 0) {
 				this.patched.set(node.id, null)
 			} else if (members.length === 1) {
@@ -250,11 +244,11 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 		}
 	}
 
-	private resetVisible() {
-		this.visible = new Map()
-		for (const leaf of this.table.leaves) {
-			this.visible.set(leaf.id, leaf)
-		}
+	private reset() {
+		this.suppressed.clear()
+		this.detached.clear()
+		this.patched.clear()
+		this.visible = new Map(this.table.leaves.map((leaf) => [leaf.id, leaf]))
 	}
 }
 

package/src/ui/comment-composer.tsx

@@ -114,8 +114,7 @@ export function CommentComposer({
 			if (!expandedRef.current) setExpanded(true)
 			return
 		}
-		const field = wrap.parentElement
-		const send = field ? field.querySelector<HTMLElement>('.tlui-cmt-send') : null
+		const send = wrap.parentElement?.querySelector<HTMLElement>('.tlui-cmt-send')
 		const input = wrap.querySelector('.tlui-cmt-input')
 		if (!send || !input) return
 		mirror.innerHTML = input.innerHTML
@@ -263,8 +262,7 @@ export function CommentComposer({
 	// 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
+		if ((e.target as HTMLElement).closest('.tlui-cmt-input, .tlui-cmt-send')) return
 		e.preventDefault()
 		editor?.commands.focus('end')
 	}

package/src/ui/comments.css

@@ -383,35 +383,6 @@
 	user-select: none;
 }
 
-/* thread */
-.tlui-cmt-thread {
-	display: flex;
-	flex-direction: column;
-	width: 300px;
-}
-
-.tlui-cmt-thread__head {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	font-size: 12px;
-	font-weight: 600;
-	color: var(--tl-color-text-3);
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-}
-
-.tlui-cmt-badge {
-	font-size: 10px;
-	font-weight: 600;
-	text-transform: none;
-	letter-spacing: 0;
-	color: #fff;
-	background: var(--tl-color-muted-1);
-	padding: 1px 6px;
-	border-radius: 999px;
-}
-
 /* reactions */
 .tlui-cmt-reactions {
 	display: flex;
@@ -648,9 +619,6 @@ button.tlui-cmt-reaction--active:hover {
 .tlui-button.tlui-cmt-thread__action:hover {
 	color: var(--tl-color-text-1);
 }
-.tlui-button.tlui-cmt-thread__action--danger:hover {
-	color: var(--tl-color-danger);
-}
 .tlui-cmt-thread__resolved {
 	margin: 4px 12px;
 	padding: 6px 10px;

package/src/ui/format-time.ts

@@ -8,6 +8,20 @@ const DIVISIONS = [
 	{ amount: Number.POSITIVE_INFINITY, unit: 'year' },
 ] as const
 
+// Both formatters are cached per locale — comment cards re-render on every reply keystroke, and
+// constructing an Intl formatter is far more expensive than formatting with one.
+const relativeTimeFormatters = new Map<string, Intl.RelativeTimeFormat>()
+const fullDateTimeFormatters = new Map<string, Intl.DateTimeFormat>()
+
+function getCached<T>(cache: Map<string, T>, locale: string, create: () => T): T {
+	let formatter = cache.get(locale)
+	if (!formatter) {
+		formatter = create()
+		cache.set(locale, formatter)
+	}
+	return formatter
+}
+
 /**
  * Format an ISO datetime as compact relative time ("2h ago", "yesterday", "last wk.").
  * Locale-aware via Intl.RelativeTimeFormat.
@@ -17,7 +31,11 @@ export function formatRelativeTime(iso: string, locale = 'en'): string {
 	const then = new Date(iso).getTime()
 	if (Number.isNaN(then)) return ''
 
-	const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'narrow' })
+	const rtf = getCached(
+		relativeTimeFormatters,
+		locale,
+		() => new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'narrow' })
+	)
 	let duration = (then - Date.now()) / 1000
 	// Under a minute is just "now" — with second granularity the label visibly ticks while
 	// typing a reply (every keystroke re-renders the card).
@@ -33,10 +51,6 @@ export function formatRelativeTime(iso: string, locale = 'en'): string {
 	return ''
 }
 
-// Cached per locale — comment cards re-render on every reply keystroke, and constructing a
-// DateTimeFormat is far more expensive than formatting with one.
-const fullDateTimeFormatters = new Map<string, Intl.DateTimeFormat>()
-
 /**
  * Format an ISO datetime as a full date and time ("Tuesday, July 22, 2025 at 4:44 PM").
  * Locale-aware via Intl.DateTimeFormat.
@@ -45,10 +59,9 @@ const fullDateTimeFormatters = new Map<string, Intl.DateTimeFormat>()
 export function formatFullDateTime(iso: string, locale = 'en'): string {
 	const date = new Date(iso)
 	if (Number.isNaN(date.getTime())) return ''
-	let formatter = fullDateTimeFormatters.get(locale)
-	if (!formatter) {
-		formatter = new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeStyle: 'short' })
-		fullDateTimeFormatters.set(locale, formatter)
-	}
-	return formatter.format(date)
+	return getCached(
+		fullDateTimeFormatters,
+		locale,
+		() => new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeStyle: 'short' })
+	).format(date)
 }

package/src/ui/reaction.tsx

@@ -108,28 +108,16 @@ export function DefaultReactionTooltipContent({ reactors }: { reactors: Reaction
 	const names = reactors.map((reactor) =>
 		reactor.you ? msg('comments.mention-you') : reactor.name
 	)
+	if (names.length === 0) return null
 	const [a, b, c] = names
-	switch (names.length) {
-		case 0:
-			return null
-		case 1:
-			return <>{msg('comments.reacted-1').replace('{a}', a)}</>
-		case 2:
-			return <>{msg('comments.reacted-2').replace('{a}', a).replace('{b}', b)}</>
-		case 3:
-			return <>{msg('comments.reacted-3').replace('{a}', a).replace('{b}', b).replace('{c}', c)}</>
-		default: {
-			const others = names.length - 3
-			const template = others === 1 ? 'comments.reacted-more-one' : 'comments.reacted-more'
-			return (
-				<>
-					{msg(template)
-						.replace('{a}', a)
-						.replace('{b}', b)
-						.replace('{c}', c)
-						.replace('{count}', String(others))}
-				</>
-			)
-		}
-	}
+	const others = names.length - 3
+	const key =
+		names.length <= 3
+			? `comments.reacted-${names.length}`
+			: others === 1
+				? 'comments.reacted-more-one'
+				: 'comments.reacted-more'
+	// Single pass, so a substituted name containing a placeholder can't be re-substituted.
+	const vars: Record<string, string | undefined> = { a, b, c, count: String(others) }
+	return <>{msg(key).replace(/\{(a|b|c|count)\}/g, (_, k) => vars[k] ?? '')}</>
 }