@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.31036673d3f8

package/src/canvas/comment-render.ts

@@ -1,16 +1,20 @@
 import { generateHTML, generateText, JSONContent } from '@tiptap/core'
+import { type CommentAuthor, createMentionExtension } from '@tldraw/mentions'
 import { 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
@@ -54,7 +58,7 @@ 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>',
@@ -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,14 +1,7 @@
-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
@@ -16,40 +9,87 @@ import {
  * 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.
+ *
+ * Writes do the same reinterpretation, but they also answer to the undo/redo policy, so they live
+ * with the rest of the write path 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 ones** and ones left empty by their
+ * last comment's delete — records that are still present but awaiting the server's prune, and that
+ * 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 this — not {@link getComments} — is what a count or a list of your own
+ * should be built from.
+ *
+ * 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): live — not soft-deleted — and still
+ * holding at least one live comment. A soft-deleted thread or comment is awaiting the server's
+ * prune, as is a thread emptied by its last comment's delete; until the prune lands, the emptied
+ * thread record lingers with no surface.
+ *
+ * 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,11 @@ 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 immediately at the pointer, and it
+ * follows the pointer 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 instead
+ * draws a region rectangle.) Placement only opens a composer (via `pendingComment`); the records
+ * are created when the comment is posted.
  * @public
  */
 export class CommentTool extends StateNode {
@@ -90,7 +91,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 +109,28 @@ 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)
+	}
+
+	// Hint the shape a click would attach to.
+	override onPointerMove() {
+		updateAnchorHint(this.editor)
+	}
+
 	override onPointerDown() {
 		this.parent.transition('pointing')
 	}
@@ -110,32 +139,84 @@ 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 — the composer no longer stands in for the pointer, so a hidden cursor would leave
+		// the drag with no pointer at all. Drop the placement hint too: a region anchors to its
+		// rectangle, so a single-shape outline under the dashed box would be stale.
+		pendingComment.set(this.editor, null)
+		this.editor.setHintingShapes([])
+		this.editor.setCursor({ type: 'cross', rotation: 0 })
 		this.updateDraft()
 	}
 
@@ -146,14 +227,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')
 	}

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

@@ -9,6 +9,7 @@ import {
 	useTranslation,
 	useValue,
 } from 'tldraw'
+import { TooltipButton } from '../ui/tooltip-button'
 import { SidebarFilters } from './sidebar-filters'
 import { sidebarFilters } from './state'
 
@@ -36,28 +37,25 @@ export function CommentsFilterMenu({
 	return (
 		<TldrawUiDropdownMenuRoot id="comments-filter">
 			<TldrawUiDropdownMenuTrigger>
-				<button
-					type="button"
-					className="cmt-header-btn"
-					title={msg('comments.filter')}
-					aria-label={msg('comments.filter')}
-				>
+				<TooltipButton tooltip={msg('comments.filter')} className="tlui-cmt-header-btn">
 					<FilterIcon />
-				</button>
+				</TooltipButton>
 			</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 +69,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>
@@ -85,20 +83,13 @@ export function CommentsFilterMenu({
 
 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 width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+			<path
+				d="M5.5 3C4.67157 3 4 3.67157 4 4.5C4 5.32843 4.67157 6 5.5 6C6.32843 6 7 5.32843 7 4.5C7 3.67157 6.32843 3 5.5 3ZM3 5C3.01671 5 3.03323 4.99918 3.04952 4.99758C3.28022 6.1399 4.28967 7 5.5 7C6.71033 7 7.71978 6.1399 7.95048 4.99758C7.96677 4.99918 7.98329 5 8 5H13.5C13.7761 5 14 4.77614 14 4.5C14 4.22386 13.7761 4 13.5 4H8C7.98329 4 7.96677 4.00082 7.95048 4.00242C7.71978 2.86009 6.71033 2 5.5 2C4.28967 2 3.28022 2.86009 3.04952 4.00242C3.03323 4.00082 3.01671 4 3 4H1.5C1.22386 4 1 4.22386 1 4.5C1 4.77614 1.22386 5 1.5 5H3ZM11.9505 10.9976C11.7198 12.1399 10.7103 13 9.5 13C8.28967 13 7.28022 12.1399 7.04952 10.9976C7.03323 10.9992 7.01671 11 7 11H1.5C1.22386 11 1 10.7761 1 10.5C1 10.2239 1.22386 10 1.5 10H7C7.01671 10 7.03323 10.0008 7.04952 10.0024C7.28022 8.8601 8.28967 8 9.5 8C10.7103 8 11.7198 8.8601 11.9505 10.0024C11.9668 10.0008 11.9833 10 12 10H13.5C13.7761 10 14 10.2239 14 10.5C14 10.7761 13.7761 11 13.5 11H12C11.9833 11 11.9668 10.9992 11.9505 10.9976ZM8 10.5C8 9.67157 8.67157 9 9.5 9C10.3284 9 11 9.67157 11 10.5C11 11.3284 10.3284 12 9.5 12C8.67157 12 8 11.3284 8 10.5Z"
+				fill="currentColor"
+				fillRule="evenodd"
+				clipRule="evenodd"
+			/>
 		</svg>
 	)
 }