FE-512: Create FilterableListSubView with keyboard navigation and search

[kube]

Kapture.2026-03-13.at.11.01.04.mp4

🌟 What is the purpose of this PR?

Introduces the FilterableListSubView component and a global search panel for the Petrinaut editor sidebar. This provides a reusable, keyboard-navigable list pattern for all sidebar sections, along with fuzzy search across all entities.

🔗 Related links

• FE-512 (internal)

🔍 What does this change?

FilterableListSubView

• Add createFilterableListSubView factory for reusable sidebar list sections
• Keyboard navigation (Arrow Up/Down), range selection (Shift+Click, Shift+Arrow), multi-select (Ctrl/Cmd+Click)
• Row ellipsis menu with context actions
• Focus management with visual focus indicator and blur reset

Search panel

• Global search triggered via Ctrl/Cmd+F or Search button in sidebar headers
• Fuzzy matching using fuzzysort with highlighted match results
• Keyboard navigation between search input and results (ArrowDown enters list, ArrowUp on first item returns to input)
• Escape closes search; empty query shows no results

VerticalSubViewsContainer improvements

• Collapsible header border hidden when collapsed
• renderTitle support for custom header content (used by search input)
• Token-based header height and icon sizing

Other

• Centralized entity icons
• Keyboard focus highlighting on Menu items and submenu triggers
• TopBar title input fills available space
• Fix infinite render loop in EditorProvider by removing manual useCallback/useMemo (React Compiler handles memoization)

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

• modifies an npm-publishable library and I have added a changeset file(s)

📜 Does this require a change to the docs?

The changes in this PR:

• are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

• do not affect the execution graph

❓ How to test this?

1. Checkout the branch and run yarn dev in libs/@hashintel/petrinaut
2. Open the sidebar — verify lists are keyboard navigable (Arrow keys, Shift+Click range, Ctrl+Click toggle)
3. Press Ctrl/Cmd+F — search panel appears with animated transition
4. Type to fuzzy-search entities — matches are highlighted
5. Use Arrow Down to navigate into results, Arrow Up on first result returns to input
6. Press Escape to close search

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview, Comment	Mar 17, 2026 11:38am
petrinaut	Ready	Preview	Mar 17, 2026 11:38am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
hashdotdesign	Ignored	Preview	Mar 17, 2026 11:38am
hashdotdesign-tokens	Ignored	Preview	Mar 17, 2026 11:38am

[kube]

• FE-502, H-6330: Improve SDCPN file import/export and file save/open behaviour #8536
• FE-504: Add Copy, Paste and Select All to Petrinaut editor #8533
• FE-512: Create FilterableListSubView with keyboard navigation and search #8532 👈 (View in Graphite)
• H-6324: Migrate petrinaut to oxlint and verify React Compiler #8539 : 4 other dependent PRs (#8537 , #8541 , #8549 and 1 other)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[cursor]

PR Summary

Medium Risk
Medium risk due to a sizable refactor of left sidebar subviews plus new global search/keyboard shortcut handling that can affect selection/focus behavior and panel state persistence.

Overview
Adds a reusable createFilterableListSubView pattern for left-sidebar lists, including keyboard navigation, multi/range selection behavior, and per-row overflow menus.

Introduces a dedicated sidebar search view (opened via header button or Ctrl/Cmd+F) with fuzzy matching (fuzzysort), highlighted results, and focus management, implemented as a separate sidebar layer toggled by new editor state (isSearchOpen).

Updates SubView/VerticalSubViewsContainer to support icons, custom main-header titles (renderTitle), and always-visible header actions; refactors existing sidebar subviews (nodes/types/parameters/diff-eqs) to the new list factory and adds an experimental unified Entities tree view behind a new user setting (useEntitiesTreeView).

^{Written by Cursor Bugbot for commit ca42c7e. This will update automatically on new commits. Configure here.}

[augmentcode]

🤖 Augment PR Summary

Summary: Refines Petrinaut’s vertical subview headers to better match updated UI behavior and adds reusable list subviews.

Changes:

• Updated VerticalSubViewsContainer header styling: header actions/tooltip reveal on hover/focus and chevron visibility behavior.
• Extended SubView to support optional header icons and an alwaysShowHeaderAction flag.
• Introduced centralized entity icon exports (entity-icons.tsx) and applied them to PropertiesPanel headers.
• Refactored left sidebar lists (nodes/types/parameters/differential equations) onto a new createFilterableListSubView factory with consistent row styling and per-row menus.
• Adjusted menu/tooltip/section styling tokens for updated design-system alignment (highlight states, borders, radii, spacing).

Technical Notes: New filterable list subviews add keyboard navigation and multi-select range selection, and move destructive actions into an ellipsis menu using the shared Menu component.

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. 3 suggestions posted.

Comment augment review to trigger a new review at any time.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}