guibranco / guibranco/logstream-ui

[FEATURE] Saved searches in Search screen

Open
#166 0 comments 0 reactions 0 assignees View on GitHub
✨ feature 🎨 ux enhancement good first issue hacktoberfest help wanted
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.