[ENG-1271] Implement filter, search, sort designs in clipboard

[trangdoan982]

https://www.loom.com/share/ca48bea531b44511ac951363dd996971

---

[linear]

ENG-1271 Implement filter/search/sort designs in clipboard

[supabase]

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 5 additional findings.

[mdroidian]

Let's match the UI designs more closely:

• Nodes should have their node colors (you can take this code from elsewhere in the project, eg Canvas Drawer)

• Search on left, filters/sort on right
• Show "Clear Filters" but keep it disabled. This is to be consistent with other components and help remove jank and it won't come as a surprise to users
• Filter button should have the button design as seen in the image

• Remove search layout jank
  https://www.loom.com/share/3547f91eff7e4ffa95da825a29184954

[trangdoan982]

https://youtu.be/9B_Xv7wvz48

@mdroidian Loom is down so this is the recorded test for the new filter according to Johnny's new design and your feedback

[devin-ai-integration]

Devin Review found 1 new potential issue.

View 8 additional findings in Devin Review.

[devin-ai-integration]

🟡 Filter Popover content missing onPointerDown stopPropagation, inconsistent with sibling Popover

The new node-type filter Popover at line 1244 renders its <Menu> content directly without wrapping it in a <div> with onPointerDown={(e) => e.stopPropagation()} and style={{ pointerEvents: "all" }}. The adjacent settings Popover at apps/roam/src/components/canvas/Clipboard.tsx:1290-1310 explicitly wraps its content with these event protections, with a comment at apps/roam/src/components/canvas/Clipboard.tsx:342-344 explaining this prevents TLDraw from hijacking click and pointer events. Since Blueprint Popovers render via Portal (at the document body), TLDraw's document-level event listeners can still intercept pointer events from the menu, potentially causing the dropdown menu items to not register clicks or triggering unintended TLDraw canvas interactions when the user tries to select a node type filter.

Suggested change

	<Menu>
	{availableNodeTypes.map((type) => (
	<MenuItem
	key={type}
	active={selectedNodeType === type}
	onClick={() => setSelectedNodeType(type)}
	text={
	<span className="flex items-center gap-2">
	{type !== "All" && (
	<span
	className="inline-block h-3 w-3 shrink-0 rounded-full"
	style={{
	backgroundColor:
	nodeTypeColorMap[type] || "#000000",
	}}
	/>
	)}
	{type}
	</span>
	}
	/>
	))}
	</Menu>
	<Menu
	onPointerDown={(e: React.MouseEvent) => e.stopPropagation()}
	style={{ pointerEvents: "all" }}
	>
	{availableNodeTypes.map((type) => (
	<MenuItem
	key={type}
	active={selectedNodeType === type}
	onClick={() => setSelectedNodeType(type)}
	text={
	<span className="flex items-center gap-2">
	{type !== "All" && (
	<span
	className="inline-block h-3 w-3 shrink-0 rounded-full"
	style={{
	backgroundColor:
	nodeTypeColorMap[type] || "#000000",
	}}
	/>
	)}
	{type}
	</span>
	}
	/>
	))}
	</Menu>

---

Was this helpful? React with 👍 or 👎 to provide feedback.