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

package/src/canvas/comment-render.test.ts

@@ -38,7 +38,7 @@ describe('renderCommentHtml', () => {
 	it('renders a mention as a pill and resolves its id to the current name', () => {
 		const body = doc(para(text('hey '), mention('u1', 'Ada')))
 		const html = renderCommentHtml(body, (id) => (id === 'u1' ? 'Ada Lovelace' : '?'))
-		expect(html).toContain('cmt-mention')
+		expect(html).toContain('tlui-cmt-mention')
 		// the live name from the resolver, not the label stored at insert time
 		expect(html).toContain('@Ada Lovelace')
 		expect(html).not.toContain('@Ada<')

package/src/canvas/comment-render.ts

@@ -1,16 +1,20 @@
-import { generateHTML, generateText, JSONContent } from '@tiptap/core'
-import { TLRichText } from 'tldraw'
+import { generateText, JSONContent } from '@tiptap/core'
+import { type CommentAuthor, createMentionExtension } from '@tldraw/mentions'
+import { renderHtmlFromRichTextWithExtensions, TLRichText } from 'tldraw'
 import { commentTipTapExtensions, isCommentEmpty } from '../ui/comment-extensions'
-import { commentMention } from '../ui/comment-mention'
 
 /**
  * The author name shown in a byline when no source can name an id (e.g. a deleted account, or a
  * member with no comment and no live presence). The toolkit's one generic default, applied where a
- * byline needs a name; hosts pre-empt it by returning a name from `resolveName`. Not a translation
- * key — a single English literal, matching the prior host-side default.
+ * byline needs a name; hosts pre-empt it by resolving the id from `resolveAuthor`. Not a
+ * translation key — a single English literal.
  */
 export const UNKNOWN_AUTHOR = 'Someone'
 
+/** The `CommentAuthor` fallback for an unresolvable id — just the name, no color or image.
+ *  Frozen: the one shared instance is handed to host render slots. */
+export const UNKNOWN_COMMENT_AUTHOR: CommentAuthor = Object.freeze({ name: UNKNOWN_AUTHOR })
+
 /**
  * The comment extension set has no heading node, so a body that nonetheless contains one (e.g. a
  * record created programmatically or synced from a client with a fuller set) would make TipTap
@@ -40,9 +44,9 @@ const htmlCache = new WeakMap<TLRichText, string>()
 
 /**
  * Render a comment body to HTML through the limited comment extension set (no headings), so a body
- * always renders with comment formatting regardless of the host editor's rich-text config. Mirrors
- * tldraw's `renderHtmlFromRichText`, including the empty-paragraph fix that keeps blank lines from
- * collapsing. `resolveName` maps a member id to its current name for any @mentions.
+ * always renders with comment formatting regardless of the host editor's rich-text config. Renders
+ * through tldraw's shared helper, so it gets the same empty-paragraph fix that keeps blank lines
+ * from collapsing. `resolveName` maps a member id to its current name for any @mentions.
  */
 export function renderCommentHtml(
 	richText: TLRichText,
@@ -54,11 +58,11 @@ export function renderCommentHtml(
 		if (cached !== undefined) return cached
 	}
 	const extensions = mentions
-		? [...commentTipTapExtensions, commentMention({ resolveName })]
+		? [...commentTipTapExtensions, createMentionExtension({ resolveName })]
 		: commentTipTapExtensions
-	const html = generateHTML(demoteHeadings(richText as JSONContent), extensions).replaceAll(
-		'<p dir="auto"></p>',
-		'<p><br /></p>'
+	const html = renderHtmlFromRichTextWithExtensions(
+		demoteHeadings(richText as JSONContent) as TLRichText,
+		extensions
 	)
 	if (!mentions) htmlCache.set(richText, html)
 	return html
@@ -82,7 +86,7 @@ export function renderCommentPlaintext(
 		if (cached !== undefined) return cached
 	}
 	const extensions = mentions
-		? [...commentTipTapExtensions, commentMention({ resolveName })]
+		? [...commentTipTapExtensions, createMentionExtension({ resolveName })]
 		: commentTipTapExtensions
 	const text = generateText(demoteHeadings(richText as JSONContent), extensions, {
 		blockSeparator: '\n',

package/src/canvas/comment-store.ts

@@ -1,55 +1,90 @@
-import {
-	Editor,
-	TLComment,
-	TLCommentId,
-	TLCommentThread,
-	TLCommentThreadId,
-	TLRecord,
-} from 'tldraw'
+import { Editor, TLComment, TLCommentReaction, TLCommentThread, TLRecord } from 'tldraw'
 
 /**
- * Typed access to comment records on the editor store.
+ * Typed reads of comment records on the editor store.
  *
- * Comment threads and comments live on the editor's local store so the canvas can render them
- * reactively, but they are opt-in records that aren't part of the `TLRecord` union (they ride the
- * sync server's object-store lane on the wire — see `TLCommentThread`). `editor.store` is therefore
- * statically typed `Store<TLRecord>` and doesn't know about them, so every access has to reinterpret
- * the type. These helpers own that reinterpretation — an `unknown` hop to exactly the type the store
- * expects, so the rest of each call stays checked — behind one boundary, and keep call sites typed.
+ * Comment records live on the editor's local store so the canvas can render them reactively, but
+ * they're opt-in and aren't part of the `TLRecord` union — so `editor.store` is statically typed
+ * `Store<TLRecord>` and every access has to reinterpret the type. These helpers own that
+ * reinterpretation behind one boundary and keep call sites typed.
+ *
+ * Writes do the same, but also answer to the undo/redo policy, so they live in
+ * `comment-mutations.ts`.
  */
 
-/** A record that lives in a comment thread: the thread itself or one of its messages. @public */
-export type TLCommentRecord = TLComment | TLCommentThread
-
-/** Write comment records to the store. @public */
-export function putCommentRecords(editor: Editor, records: TLCommentRecord[]): void {
-	editor.store.put(records as unknown as TLRecord[])
-}
-
-/** Remove comment records from the store by id. @public */
-export function removeCommentRecords(
-	editor: Editor,
-	ids: (TLCommentId | TLCommentThreadId)[]
-): void {
-	editor.store.remove(ids as unknown as TLRecord['id'][])
-}
+/**
+ * A record that lives in a comment thread: the thread itself, one of its messages, or a reaction
+ * to one of those messages.
+ * @public
+ */
+export type TLCommentRecord = TLComment | TLCommentThread | TLCommentReaction
 
 /** Read one comment record by id, or `undefined` if the id isn't a present comment record. @public */
 export function getCommentRecord(editor: Editor, id: string): TLCommentRecord | undefined {
 	const record = editor.store.get(id as TLRecord['id']) as unknown as TLCommentRecord | undefined
 	if (!record) return undefined
-	if (record.typeName === 'comment' || record.typeName === 'comment-thread') return record
+	if (
+		record.typeName === 'comment' ||
+		record.typeName === 'comment-thread' ||
+		record.typeName === 'comment-reaction'
+	) {
+		return record
+	}
 	return undefined
 }
 
-/** All comment threads currently in the store (non-reactive; wrap in `useValue` to react). @public */
+/**
+ * Every comment thread in the store, **including soft-deleted and emptied ones** awaiting the
+ * server's prune, which nothing renders. For the set the UI shows, use {@link getLiveCommentThreads}.
+ *
+ * Non-reactive; wrap in `useValue`, or use `useCommentThreads`, to react.
+ * @public
+ */
 export function getCommentThreads(editor: Editor): TLCommentThread[] {
 	const typeName = 'comment-thread' as TLRecord['typeName']
 	return editor.store.query.records(typeName).get() as unknown as TLCommentThread[]
 }
 
-/** All comments currently in the store (non-reactive; wrap in `useValue` to react). @public */
+/**
+ * Every comment in the store, **including soft-deleted ones** awaiting the server's prune. For the
+ * set the UI shows, use {@link getLiveComments}.
+ *
+ * Non-reactive; wrap in `useValue`, or use `useComments`, to react.
+ * @public
+ */
 export function getComments(editor: Editor): TLComment[] {
 	const typeName = 'comment' as TLRecord['typeName']
 	return editor.store.query.records(typeName).get() as unknown as TLComment[]
 }
+
+/**
+ * The comments that should render: not soft-deleted. A deleted record lingers in the store until
+ * the server prunes it, so build counts and lists from this rather than {@link getComments}.
+ *
+ * Non-reactive; the reactive equivalent is `useComments` (which also sorts oldest first).
+ * @public
+ */
+export function getLiveComments(editor: Editor): TLComment[] {
+	return getComments(editor).filter((comment) => !comment.isDeleted)
+}
+
+/**
+ * The comment threads that should render (pins, sidebar): not soft-deleted, and still holding at
+ * least one live comment. A thread emptied by its last comment's delete lingers with no surface
+ * until the server's prune lands.
+ *
+ * Non-reactive; the reactive equivalent is `useCommentThreads`.
+ * @public
+ */
+export function getLiveCommentThreads(editor: Editor): TLCommentThread[] {
+	const threadIdsWithComments = new Set(getLiveComments(editor).map((comment) => comment.threadId))
+	return getCommentThreads(editor).filter(
+		(thread) => !thread.isDeleted && threadIdsWithComments.has(thread.id)
+	)
+}
+
+/** All comment reactions currently in the store (non-reactive; wrap in `useValue` to react). @public */
+export function getCommentReactions(editor: Editor): TLCommentReaction[] {
+	const typeName = 'comment-reaction' as TLRecord['typeName']
+	return editor.store.query.records(typeName).get() as unknown as TLCommentReaction[]
+}

package/src/canvas/comment-tool.test.ts

@@ -0,0 +1,162 @@
+import { Driver } from '@tldraw/driver'
+import {
+	commentSchemaRecords,
+	createShapeId,
+	createTLSchema,
+	createTLStore,
+	defaultBindingUtils,
+	defaultShapeUtils,
+	defaultTools,
+	Editor,
+	TLShapeId,
+	TLStateNodeConstructor,
+} from 'tldraw'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { CommentTool } from './comment-tool'
+
+/**
+ * Pointer-driven tests for the comment tool's placement affordances. These need a real editor
+ * and real pointer dispatch: the behavior under test is how the tool's state transitions
+ * (idle → pointing → dragging) maintain the editor's hinting state.
+ */
+
+let editor: Editor
+
+function makeEditor(tool: TLStateNodeConstructor = CommentTool) {
+	editor = new Editor({
+		store: createTLStore({ schema: createTLSchema({ records: commentSchemaRecords }) }),
+		shapeUtils: defaultShapeUtils,
+		bindingUtils: defaultBindingUtils,
+		tools: [...defaultTools, tool],
+		getContainer: () => document.body,
+	})
+	return new Driver(editor)
+}
+
+afterEach(() => {
+	editor.dispose()
+})
+
+function makeShape(x = 100, y = 100, w = 100, h = 50): TLShapeId {
+	const id = createShapeId()
+	editor.createShape({ id, type: 'geo', x, y, props: { w, h } })
+	return id
+}
+
+function makeFrame(x = 300, y = 100, w = 200, h = 200): TLShapeId {
+	const id = createShapeId()
+	editor.createShape({ id, type: 'frame', x, y, props: { w, h } })
+	return id
+}
+
+describe('comment tool placement hints', () => {
+	let driver: Driver
+
+	beforeEach(() => {
+		driver = makeEditor()
+	})
+
+	it('hints the shape under the pointer while hovering', () => {
+		const id = makeShape()
+		editor.setCurrentTool('comment')
+		driver.pointerMove(150, 125)
+		expect(editor.getHintingShapeIds()).toEqual([id])
+
+		driver.pointerMove(400, 400)
+		expect(editor.getHintingShapeIds()).toEqual([])
+	})
+
+	it('keeps hinting the anchor target while the composer follows the pointer', () => {
+		const id = makeShape()
+		editor.setCurrentTool('comment')
+		driver.pointerMove(400, 400)
+		expect(editor.getHintingShapeIds()).toEqual([])
+
+		// Press away from the shape, then drag the follow composer over it: the shape a release
+		// would anchor to stays hinted, exactly like the idle hover.
+		driver.pointerDown(400, 400)
+		driver.pointerMove(150, 125)
+		expect(editor.isIn('comment.pointing')).toBe(true)
+		expect(editor.getHintingShapeIds()).toEqual([id])
+
+		// ...and dragging back off the shape drops the hint.
+		driver.pointerMove(400, 400)
+		expect(editor.getHintingShapeIds()).toEqual([])
+	})
+
+	it('clears the hint when the tool exits', () => {
+		const id = makeShape()
+		editor.setCurrentTool('comment')
+		driver.pointerMove(150, 125)
+		expect(editor.getHintingShapeIds()).toEqual([id])
+
+		// Releasing places the comment and hands back to select, which owns its own hover state.
+		driver.pointerDown(150, 125)
+		driver.pointerUp(150, 125)
+		expect(editor.isIn('select')).toBe(true)
+		expect(editor.getHintingShapeIds()).toEqual([])
+	})
+})
+
+describe('comment tool placement hints with regions enabled', () => {
+	it('clears the hint when a drag becomes a region', () => {
+		const driver = makeEditor(CommentTool.configure({ enableRegions: true }))
+		const id = makeShape()
+		editor.setCurrentTool('comment')
+		driver.pointerMove(150, 125)
+		expect(editor.getHintingShapeIds()).toEqual([id])
+
+		// Past the drag threshold this is a region draw — a single-shape outline under the dashed
+		// box would be stale, so the hint clears even with the pointer still over the shape.
+		driver.pointerDown(150, 125)
+		driver.pointerMove(180, 140)
+		expect(editor.isIn('comment.dragging')).toBe(true)
+		expect(editor.getHintingShapeIds()).toEqual([])
+	})
+})
+
+describe('comment tool anchoring to frames', () => {
+	let driver: Driver
+
+	beforeEach(() => {
+		driver = makeEditor()
+	})
+
+	it('hints a frame when hovering its empty interior', () => {
+		// A frame is hit only on its edge/label by default; the comment tool passes hitFrameInside
+		// so a click in its body anchors the frame. (300,100)–(500,300): (400,200) is well inside,
+		// clear of the edges and the (above-frame) label.
+		const frame = makeFrame(300, 100, 200, 200)
+		editor.setCurrentTool('comment')
+		driver.pointerMove(400, 200)
+		expect(editor.getHintingShapeIds()).toEqual([frame])
+	})
+
+	it('a shape over the frame still wins the hit', () => {
+		const frame = makeFrame(300, 100, 200, 200)
+		const child = makeShape(340, 140, 60, 40) // sits inside the frame, drawn above it
+		editor.setCurrentTool('comment')
+		driver.pointerMove(370, 160)
+		expect(editor.getHintingShapeIds()).toEqual([child])
+		// ...and the frame's empty interior beside it still anchors the frame.
+		driver.pointerMove(470, 260)
+		expect(editor.getHintingShapeIds()).toEqual([frame])
+	})
+
+	it('keeps hinting a frame while the composer follows the pointer into it', () => {
+		// The click-drag path, not just idle hover: press away from the frame, then drag the follow
+		// composer into its body. The pointing state hints the anchor target too, so the frame stays
+		// hinted while dragging over it (regions are off by default, so this doesn't become a region).
+		const frame = makeFrame(300, 100, 200, 200)
+		editor.setCurrentTool('comment')
+		driver.pointerMove(50, 50)
+		driver.pointerDown(50, 50)
+		driver.pointerMove(400, 200)
+		expect(editor.isIn('comment.pointing')).toBe(true)
+		expect(editor.getHintingShapeIds()).toEqual([frame])
+
+		// ...and dragging back off the frame clears it.
+		driver.pointerMove(50, 400)
+		expect(editor.getHintingShapeIds()).toEqual([])
+	})
+})

package/src/canvas/comment-tool.tsx

@@ -1,21 +1,20 @@
 import {
 	BoxModel,
+	Editor,
 	StateNode,
 	TLCommentAnchor,
 	TLStateNodeConstructor,
 	TLUiOverrides,
 	VecLike,
 } from 'tldraw'
-import { type CommentingOptions, defaultCommentingOptions } from './options'
-import { getRegionCommentOptions } from './region-options'
-import { pendingComment, regionDraft } from './state'
-import { regionPinPoint, shapeAnchorAt } from './thread-state'
+import { type CommentingOptions, defaultCommentingOptions, getCommentingOptions } from './options'
+import { commentsSidebarOpen, pendingComment, regionDraft } from './state'
+import { commentTargetShapeAt, regionPinPoint, shapeAnchorAt } from './thread-state'
 
 /** A comment being placed but not yet posted: where its composer sits and what it will anchor
  *  to. Shared between the tool (which sets it on click) and the overlay (which renders the
- *  composer). Null when nothing is being placed. The atom itself lives in `./state`
- *  ({@link pendingComment}), scoped per editor.
- * @public */
+ *  composer) through the internal `pendingComment` atom.
+ * @internal */
 export interface PendingComment {
 	anchor: TLCommentAnchor
 	/** Page point where the composer opens (the click location, or a region's pin corner). */
@@ -50,9 +49,10 @@ export function regionBetween(a: VecLike, b: VecLike): BoxModel {
 }
 
 /**
- * The comment tool. A click starts a point/shape thread (the pin tracks the shape it lands on);
- * dragging out a rectangle starts a region thread anchored to that area. Placement only opens a
- * composer (via `pendingComment`); the records are created when the comment is posted.
+ * The comment tool. Pressing down opens the comment composer at the pointer and it follows until
+ * release — like placing a sticky note — settling on a point, or on a shape when released over one.
+ * With region comments enabled, dragging past the threshold draws a region rectangle instead.
+ * Placement only opens a composer; the records are created when the comment is posted.
  * @public
  */
 export class CommentTool extends StateNode {
@@ -90,7 +90,16 @@ export class CommentTool extends StateNode {
 	options: CommentingOptions = defaultCommentingOptions
 
 	override onEnter() {
-		this.editor.setCursor({ type: 'cross', rotation: 0 })
+		this.editor.setCursor({ type: 'comment', rotation: 0 })
+		// Placing comments is canvas-focused — the thread list gets out of the way while the tool is
+		// active. Reopened via its own control (a button), never by leaving the tool.
+		commentsSidebarOpen.set(this.editor, false)
+	}
+
+	override onExit() {
+		// Drop the hover hint painted while pointing at shapes (see CommentIdle). The cursor resets
+		// when the next tool takes over.
+		this.editor.setHintingShapes([])
 	}
 
 	// Escape leaves the tool, like the built-in tools (the editor dispatches `cancel` on Escape).
@@ -99,9 +108,27 @@ export class CommentTool extends StateNode {
 	}
 }
 
+/** Hint the shape a comment placed at the pointer would anchor to, using the same hit-test as the
+ *  anchor resolution on release. Hinting shapes render an indicator ungated by the active tool, so
+ *  this shows the select-style outline while the comment tool — not select — is active. */
+function updateAnchorHint(editor: Editor) {
+	const hit = commentTargetShapeAt(editor, editor.inputs.getCurrentPagePoint())
+	editor.setHintingShapes(hit ? [hit.id] : [])
+}
+
 class CommentIdle extends StateNode {
 	static override id = 'idle'
 
+	override onEnter() {
+		// Back to hovering: restore the pin cursor (a prior placing state may have hidden it).
+		this.editor.setCursor({ type: 'comment', rotation: 0 })
+		updateAnchorHint(this.editor)
+	}
+
+	override onPointerMove() {
+		updateAnchorHint(this.editor)
+	}
+
 	override onPointerDown() {
 		this.parent.transition('pointing')
 	}
@@ -110,32 +137,82 @@ class CommentIdle extends StateNode {
 class CommentPointing extends StateNode {
 	static override id = 'pointing'
 
-	// Once the pointer passes the editor's drag threshold this is a region, not a click — but only
-	// when region comments are enabled; otherwise a drag is treated as a click (point/shape).
+	override onEnter() {
+		// Open the composer immediately at the press point so it's visible from pointer-down (not just
+		// on release), and let it trail the pointer while dragging — like placing a sticky note. The
+		// anchor is a bare point for now; it's resolved (shape or point) on pointer up.
+		const { editor } = this
+		// Hide the cursor while placing: the draft composer is the pointer's stand-in now, so the pin
+		// cursor sitting over it just reads as clutter.
+		editor.setCursor({ type: 'none', rotation: 0 })
+		const point = editor.inputs.getCurrentPagePoint()
+		pendingComment.set(editor, {
+			anchor: { type: 'point', x: point.x, y: point.y },
+			point: { x: point.x, y: point.y },
+		})
+	}
+
 	override onPointerMove() {
-		if (getRegionCommentOptions(this.editor).enabled && this.editor.inputs.getIsDragging()) {
+		const { editor } = this
+		// Once the pointer passes the drag threshold with region comments enabled, this is a region,
+		// not a follow — hand off to the region drag (which clears this composer and draws the box).
+		if (getCommentingOptions(editor).enableRegions && editor.inputs.getIsDragging()) {
 			this.parent.transition('dragging')
+			return
 		}
+		// Otherwise the composer trails the pointer — keep hinting the shape a release here would
+		// anchor to, like the idle hover does.
+		updateAnchorHint(editor)
+		const point = editor.inputs.getCurrentPagePoint()
+		pendingComment.update(editor, (p) => (p ? { ...p, point: { x: point.x, y: point.y } } : p))
 	}
 
-	// A pointer up with no drag is a click: anchor to the shape under it, or drop a point.
+	// Settle where the pointer is released: anchor to the shape under it, or drop a point.
 	override onPointerUp() {
 		const { editor } = this
 		const point = editor.inputs.getCurrentPagePoint()
-		const hit = editor.getShapeAtPoint(point, { hitInside: true })
+		const hit = commentTargetShapeAt(editor, point)
 		const anchor: TLCommentAnchor = hit
-			? shapeAnchorAt(editor, hit.id, point, editor.inputs.getAltKey())
+			? shapeAnchorAt(
+					editor,
+					hit.id,
+					point,
+					getCommentingOptions(editor).shouldBePrecise(editor, {
+						shapeId: hit.id,
+						point,
+						altKey: editor.inputs.getAltKey(),
+					})
+				)
 			: { type: 'point', x: point.x, y: point.y }
 		pendingComment.set(editor, { anchor, point: { x: point.x, y: point.y } })
-		// Hand back to select; the open composer is now the focus.
 		editor.setCurrentTool('select')
 	}
+
+	override onCancel() {
+		this.cancel()
+	}
+
+	override onInterrupt() {
+		this.cancel()
+	}
+
+	// Abandon the follow composer if placement is interrupted (Escape, focus loss, etc.).
+	private cancel() {
+		pendingComment.set(this.editor, null)
+		this.editor.setCurrentTool('select')
+	}
 }
 
 class CommentDragging extends StateNode {
 	static override id = 'dragging'
 
 	override onEnter() {
+		// A region drag supersedes the point-follow composer opened in `pointing`. Show a crosshair again,
+		// since the composer no longer stands in for the pointer, and drop the placement hint — a region
+		// anchors to its rectangle, so a single-shape outline would be stale.
+		pendingComment.set(this.editor, null)
+		this.editor.setHintingShapes([])
+		this.editor.setCursor({ type: 'cross', rotation: 0 })
 		this.updateDraft()
 	}
 
@@ -146,14 +223,15 @@ class CommentDragging extends StateNode {
 	// Commit the dragged rectangle as a region anchor; the composer opens at its pin corner.
 	override onPointerUp() {
 		const { editor } = this
-		const region = regionBetween(
-			editor.inputs.getOriginPagePoint(),
-			editor.inputs.getCurrentPagePoint()
-		)
+		const origin = editor.inputs.getOriginPagePoint()
+		const current = editor.inputs.getCurrentPagePoint()
+		const region = regionBetween(origin, current)
+		// The pin lives on the corner the drag released on — drag up-left, pin top-left.
+		const pin = { x: current.x >= origin.x ? 1 : 0, y: current.y >= origin.y ? 1 : 0 }
 		regionDraft.set(editor, null)
 		pendingComment.set(editor, {
-			anchor: { type: 'region', ...region },
-			point: regionPinPoint(region, getRegionCommentOptions(editor).pinCorner),
+			anchor: { type: 'region', ...region, pinX: pin.x, pinY: pin.y },
+			point: regionPinPoint(region, pin),
 		})
 		editor.setCurrentTool('select')
 	}
@@ -184,7 +262,7 @@ class CommentDragging extends StateNode {
 export const commentTools = [CommentTool]
 
 /** Registers the comment tool in the UI (icon, label, shortcut). Compose into your overrides.
- *  Once registered, tldraw's `DefaultToolbarContent` shows the comment button next to the eraser.
+ *  Once registered, tldraw's `DefaultQuickActionsContent` shows the comment button.
  * @public */
 export const commentToolOverrides: TLUiOverrides = {
 	tools(editor, tools) {

package/src/canvas/comments-filter-menu.tsx

@@ -1,4 +1,5 @@
 import {
+	TldrawUiButton,
 	TldrawUiDropdownMenuContent,
 	TldrawUiDropdownMenuRoot,
 	TldrawUiDropdownMenuTrigger,
@@ -9,6 +10,7 @@ import {
 	useTranslation,
 	useValue,
 } from 'tldraw'
+import { FilterIcon } from '../ui/icons'
 import { SidebarFilters } from './sidebar-filters'
 import { sidebarFilters } from './state'
 
@@ -36,28 +38,30 @@ export function CommentsFilterMenu({
 	return (
 		<TldrawUiDropdownMenuRoot id="comments-filter">
 			<TldrawUiDropdownMenuTrigger>
-				<button
-					type="button"
-					className="cmt-header-btn"
+				<TldrawUiButton
+					type="icon"
+					tooltip={msg('comments.filter')}
 					title={msg('comments.filter')}
-					aria-label={msg('comments.filter')}
+					className="tlui-cmt-header-btn"
 				>
 					<FilterIcon />
-				</button>
+				</TldrawUiButton>
 			</TldrawUiDropdownMenuTrigger>
-			<TldrawUiDropdownMenuContent side="bottom" align="start">
+			{/* No tlui-cmt-menu here: the rows are tldraw menu items, which carry their own insets —
+			    the extra padding would set this menu apart from the canvas menus it should match. */}
+			<TldrawUiDropdownMenuContent side="bottom" align="end" alignOffset={0}>
 				<TldrawUiMenuContextProvider type="menu" sourceId="menu">
 					<TldrawUiMenuGroup id="comments-filter">
 						<TldrawUiMenuCheckboxItem
-							id="show-resolved"
-							label="comments.show-resolved"
-							checked={filters.showResolved}
-							onSelect={() => toggle('showResolved')}
+							id="show-all-pages"
+							label="comments.show-all-pages"
+							checked={!filters.onlyCurrentPage}
+							onSelect={() => toggle('onlyCurrentPage')}
 						/>
 						{canFilterByAuthor && (
 							<TldrawUiMenuCheckboxItem
-								id="only-mine"
-								label="comments.only-mine"
+								id="only-my-comments"
+								label="comments.only-my-comments"
 								checked={filters.onlyMine}
 								onSelect={() => toggle('onlyMine')}
 							/>
@@ -71,10 +75,10 @@ export function CommentsFilterMenu({
 							/>
 						)}
 						<TldrawUiMenuCheckboxItem
-							id="only-current-page"
-							label="comments.only-current-page"
-							checked={filters.onlyCurrentPage}
-							onSelect={() => toggle('onlyCurrentPage')}
+							id="show-resolved"
+							label="comments.show-resolved"
+							checked={filters.showResolved}
+							onSelect={() => toggle('showResolved')}
 						/>
 					</TldrawUiMenuGroup>
 				</TldrawUiMenuContextProvider>
@@ -82,23 +86,3 @@ export function CommentsFilterMenu({
 		</TldrawUiDropdownMenuRoot>
 	)
 }
-
-function FilterIcon() {
-	return (
-		<svg
-			width="16"
-			height="16"
-			viewBox="0 0 16 16"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			strokeLinecap="round"
-			aria-hidden="true"
-		>
-			<line x1="2.5" y1="5" x2="13.5" y2="5" />
-			<line x1="2.5" y1="11" x2="13.5" y2="11" />
-			<circle cx="6" cy="5" r="1.9" fill="currentColor" stroke="none" />
-			<circle cx="10.5" cy="11" r="1.9" fill="currentColor" stroke="none" />
-		</svg>
-	)
-}