Implement client-side search functionality for the records list with real-time
text highlighting. Users can now filter records by searching across command,
device name, and record ID fields.
Features:
- Search input positioned above device filter buttons
- Case-insensitive substring matching across command, device, and ID fields
- Real-time highlighting of matched text with <mark> tags
- Highlight component for reusable text highlighting logic
- Optimized filtering with useMemo to prevent unnecessary recalculations
- Distinct empty states: "No records yet" vs "No matches found"
- Dark theme consistent styling with focus states
- 14 comprehensive TDD tests ensuring feature correctness
Technical implementation:
- Highlight component uses regex for case-insensitive matching
- Escapes special regex characters for safe query handling
- Filtered results computed via useMemo with [records, searchQuery] dependencies
- Integrates seamlessly with existing device filtering
- Yellow highlight (#fbbf24) with dark text for visibility on dark theme
Resolves issue #7
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
xiaoju
f31c45db07