guibranco / guibranco/logstream-ui
[FEATURE] Context field search inputs in Search screen
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 0
- Avg merge
- 15m
- Merged PRs (30d)
- 49
Description
## Summary
Extend the Search screen filter panel with inputs for **context key-value search** and **fulltext context search**, corresponding to the new `context[key]=value` and `context_search=term` query parameters on the server.
> **Depends on:** [`[FEATURE] Context field search`](https://github.com/guibranco/logstream-server/issues) in `guibranco/logstream-server`
## Motivation
The `context` field holds the richest structured data (invoice IDs, user IDs, error codes) but is currently invisible in the search UI. Engineers must use the raw API to filter by it.
## Proposed UI additions
### Fulltext context search
A single input in the existing filter panel:
```
Context contains: [________________________]
```
Maps to: `?context_search=card_declined`
### Key-value context filter
A dynamic key-value pair builder:
```
Context filters:
[invoice_id ] = [1234 ] [×]
[code ] = [card_declined] [×]
[+ Add context filter]
```
Maps to: `?context[invoice_id]=1234&context[code]=card_declined`
## Files to create / modify
- `src/components/search/ContextSearchInput.tsx` — fulltext context search field
- `src/components/search/ContextKeyValueFilter.tsx` — dynamic add/remove key-value rows
- `src/screens/SearchScreen.tsx` — integrate new inputs into filter panel
- `src/hooks/useSearch.ts` — extend filter state and URL serialisation for context params
## UX details
- Context filters appear in a collapsible **"Advanced filters"** section below the main filters to avoid cluttering the default view
- Active context filters are shown as badge chips in the active filter summary bar
- Context filters are included in the Saved Searches feature
- Show a tooltip on the section header: *"Context search requires MariaDB storage"* when `storage_type: file` is returned by `GET /api/info`; inputs are disabled with a greyed-out appearance
## Acceptance criteria
- [ ] Fulltext context search input added to filter panel
- [ ] Key-value filter builder with add/remove rows
- [ ] Filters correctly serialised to `context[key]=value` query params
- [ ] Active context filters shown as chips in filter summary
- [ ] Inputs disabled with tooltip when server is in file storage mode
- [ ] Context filters included when exporting or saving a search
- [ ] URL reflects context filter state (shareable links)
Contributor guide
Research direction
Start with src/screens/SearchScreen.tsx and src/hooks/useSearch.ts to understand the existing filter panel, state, URL serialization, saved searches, and export flow. Then read the proposed ContextSearchInput.tsx and ContextKeyValueFilter.tsx responsibilities and the existing filter summary components. Done means context_search and context[key] values work in shareable URLs, appear as chips, are saved/exported, and are disabled with the specified tooltip for file storage mode.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript, vite
- Domain
- frontend, search
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 58/100