guibranco / guibranco/logstream-ui
[FEATURE] Saved searches in Search screen
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 0
- Avg merge
- 15m
- Merged PRs (30d)
- 49
Description
## Summary
Add a **Saved searches** dropdown and a **"Save current search"** button to the Search screen, backed by the new `/api/searches` CRUD endpoints on the server.
> **Depends on:** [`[FEATURE] Saved searches`](https://github.com/guibranco/logstream-server/issues) in `guibranco/logstream-server`
## Motivation
Power users re-apply the same filter combinations daily. Saved searches eliminate repetitive manual filter entry and allow sharing useful search configurations across team members.
## Proposed layout
```
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β Search [Saved searches βΎ] [Save search π]β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β App key: [__________] Level: [______βΎ] Date: [____] β [____] β
β Message: [__________________________________________] β
β [Clear] [Search] β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
```
### Saved searches dropdown
Lists all saved searches. Clicking one loads its filters into the search panel and runs the search immediately.
```
βββββββββββββββββββββββββββββββββββ
β Production errors today β
β Billing debug β last hour β
β PII pattern matches β
β βββββββββββββββββββββββββ β
β Manage saved searchesβ¦ β
βββββββββββββββββββββββββββββββββββ
```
### "Save current search" flow
Clicking the π button opens a small inline popover:
```
ββββββββββββββββββββββββββββββββββββββββββββ
β Save current search β
β β
β Name: [Production errors today ] β
β β
β [Cancel] [Save] β
ββββββββββββββββββββββββββββββββββββββββββββ
```
On save, the new search appears at the top of the dropdown immediately.
### Manage saved searches screen (or modal)
Accessible from the dropdown footer: full list with edit (rename) and delete per row.
## Files to create / modify
- `src/hooks/useSavedSearches.ts` β CRUD hooks for `/api/searches`
- `src/components/search/SavedSearchesDropdown.tsx` β dropdown component
- `src/components/search/SaveSearchPopover.tsx` β inline save form
- `src/components/search/ManageSavedSearches.tsx` β management list (modal or separate screen)
- `src/screens/SearchScreen.tsx` β integrate dropdown and save button into toolbar
## UX details
- Relative date values (`today`, `-1h`, `-24h`) saved as-is and re-evaluated at execution time β the label "Production errors today" always means today, not the day the search was saved
- When a saved search is loaded, the URL updates so the state is shareable
- Duplicate name: inline error *"A search named 'X' already exists"* (409 from server)
## Acceptance criteria
- [ ] Saved searches dropdown in Search toolbar
- [ ] Clicking a saved search loads filters and runs the search
- [ ] "Save current search" popover with name field
- [ ] Saved search persisted via `POST /api/searches`
- [ ] Manage saved searches: rename and delete
- [ ] Duplicate name handled gracefully (409 error shown inline)
- [ ] Relative date values preserved correctly
- [ ] Dropdown empty state: *"No saved searches yet"*
Contributor guide
Research direction
Start by reading src/screens/SearchScreen.tsx and the requested hook and search components, then verify the server issue's /api/searches CRUD contract. Done means the toolbar, save popover, dropdown, and management view support loading, creating, renaming, deleting, duplicate-name errors, empty state, URL updates, and preservation of relative dates.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- api, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100