feat: replace project dropdown with filtering typeahead - #52
Conversation
roborev: Combined Review (
|
The simple <select> dropdown doesn't scale when there are hundreds of projects. Replace it with a custom typeahead component that filters as you type, supports keyboard navigation (arrow keys, enter, escape), and shows a dropdown with highlighted matches. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace the plain <select> dropdown for project filtering on the insights page with the same typeahead component used in the header. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Uses min(400px, 50vh) so it scales on smaller screens. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
When filtering, the matched portion of each project name is highlighted with a blue background, similar to VS Code's file matching. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Increase background opacity, make matched text blue and bold. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Update sessions-page page object to interact with the new ProjectTypeahead component instead of the removed <select> element. Fix dropdown closing when clicking the scrollbar by tracking pointer state inside the container. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
767efc3 to
f79013b
Compare
roborev: Combined Review (
|
Replace pointerInsideContainer tracking with preventDefault on the list's mousedown. This keeps focus on the input during scrollbar and option interactions, so blur fires correctly for outside clicks. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Prevent substring collisions when project names overlap by matching the option text with ^project \( instead of plain hasText. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
roborev: Combined Review (
|
## Summary - Replace the native `<select>` dropdown for project filtering with a custom typeahead component that filters as you type - Supports keyboard navigation (arrow keys, Enter, Escape), substring match highlighting, and responsive dropdown height (50vh) - Applied to both the header and the insights page project filter - Handles hundreds of projects gracefully ## Test plan - [x] Open AgentsView with multiple projects and verify the typeahead appears in the header - [x] Type to filter projects and confirm substring highlighting works - [x] Verify keyboard navigation (arrows, Enter, Escape) works - [x] Check the insights page also uses the typeahead for project filtering - [x] Test in both light and dark mode for highlight visibility - [x] Verify dropdown height scales with viewport 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Wes McKinney <wesmckinn+git@gmail.com>
Summary
<select>dropdown for project filtering with a custom typeahead component that filters as you typeTest plan
🤖 Generated with Claude Code