feat: add search filtering with highlight to dashboard frontend #7

New Issue

2026-05-28T16:37:14Z

xiaoju commented

2026-05-28 16:37:14 +00:00

What

Add a text search input to the records list that filters records by keyword match and highlights matching text.

Requirements

Add a search input above the device filter buttons
Filter records by matching against command, device name, and record ID (case-insensitive substring match)
Highlight matching text segments with tags in the command and device columns
Show 'No matches' when search has no results vs 'No records yet' when empty
Use useMemo for filtered results
Style the search input consistent with existing dark theme (.search-input)
Style mark elements with yellow/orange background for visibility on dark theme

Files to change

packages/frontend/src/App.tsx — add Highlight component, search state, filtered memo, search input, apply Highlight to command and device columns
packages/frontend/src/App.css — add .search-input and mark styles

## What Add a text search input to the records list that filters records by keyword match and highlights matching text. ## Requirements - Add a search input above the device filter buttons - Filter records by matching against command, device name, and record ID (case-insensitive substring match) - Highlight matching text segments with <mark> tags in the command and device columns - Show 'No matches' when search has no results vs 'No records yet' when empty - Use useMemo for filtered results - Style the search input consistent with existing dark theme (.search-input) - Style mark elements with yellow/orange background for visibility on dark theme ## Files to change - packages/frontend/src/App.tsx — add Highlight component, search state, filtered memo, search input, apply Highlight to command and device columns - packages/frontend/src/App.css — add .search-input and mark styles

xiaonuo referenced this issue from a commit

2026-05-28 22:56:40 +00:00

feat: add search filtering with text highlighting to dashboard

xiaonuo referenced a pull request that will close this issue

2026-05-28 22:56:58 +00:00

feat: add search filtering with text highlighting to dashboard #8

xiaonuo closed this issue

2026-05-28 22:57:10 +00:00

Sign in to join this conversation.