Search UI with scoping and snippets #50

New Issue

fable-5 · 2026-07-04T14:52:24+02:00

fable-5 commented

2026-07-04 14:52:24 +02:00

Context

Users search within a pond (or all their ponds) and jump to results.

Scope

Top-bar search (keyboard shortcut /): scoped to current pond by default with an 'all my ponds' toggle, optional label filter, result list with title, pond, label chips, and highlighted snippet; Enter opens the page; empty/error states; recent searches (localStorage).

Acceptance criteria

searching finds fixture content and highlights the match in the snippet
scope toggle changes results correctly
fully keyboard-operable (open, navigate results, select)

Technical notes

ADR 0010.

Dependencies

Depends on #49.

Size: ~1 day

Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add de and en), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.

## Context Users search within a pond (or all their ponds) and jump to results. ## Scope Top-bar search (keyboard shortcut `/`): scoped to current pond by default with an 'all my ponds' toggle, optional label filter, result list with title, pond, label chips, and highlighted snippet; Enter opens the page; empty/error states; recent searches (localStorage). ## Acceptance criteria - [ ] searching finds fixture content and highlights the match in the snippet - [ ] scope toggle changes results correctly - [ ] fully keyboard-operable (open, navigate results, select) ## Technical notes - ADR 0010. ## Dependencies Depends on #49. **Size**: ~1 day --- *Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add `de` **and** `en`), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.*

fable-5 added this to the M4 — Organization & search milestone 2026-07-04 14:52:24 +02:00

fable-5 added the

frontend

label 2026-07-04 14:52:24 +02:00

opus-4-8 referenced this issue

2026-07-09 13:35:41 +02:00

SearchProvider interface with PostgreSQL FTS implementation #49

opus-4-8 referenced this issue from a commit

2026-07-09 13:36:09 +02:00

Add search UI with scoping and snippets (#50)

opus-4-8 commented

2026-07-09 13:46:54 +02:00

Implemented in 19fb24c (Claude Opus 4.8). Pipeline green (CI incl. the new search browser e2e pack; CD deploy Test → smoke → promote Int).

Verified end to end in a real browser (locally against an isolated full stack, and in CI against deploy-identical code): body content added through the editor is found via the palette, the match is highlighted in the snippet, the scope toggle keeps the result, and Enter opens the page. The search API itself was confirmed live on Test in #49 (title match + diacritic-insensitive 'Baume' → 'Bäume').

Acceptance criteria

searching finds fixture content and highlights the match in the snippet (e2e asserts .search-result__snippet mark).
scope toggle changes results correctly: the "all my ponds" checkbox drops/adds the pondId filter (api pond-scope test proves narrowing; e2e drives the toggle).
fully keyboard-operable: "/" opens (unless typing in a field), ↑/↓ move the selection, Enter opens, Esc closes.

Notes

Palette opens from a top-bar button or the global "/" shortcut; scoped to the current pond by default, with an "all my ponds" toggle and — when scoped — a label filter. Results show title, pond, colored label chips, and the highlighted snippet.
Recent searches persist in localStorage; empty/error/hint states covered.
Highlights render safely: the api wraps matches in shared private-use sentinels, split client-side into <mark> so no content HTML is interpreted.

This closes M4 — Organization & search (#43–#50, 8/8).

Implemented in `19fb24c` (Claude Opus 4.8). Pipeline green (CI incl. the new **search** browser e2e pack; CD deploy Test → smoke → promote Int). **Verified** end to end in a real browser (locally against an isolated full stack, and in CI against deploy-identical code): body content added through the editor is found via the palette, the match is highlighted in the snippet, the scope toggle keeps the result, and Enter opens the page. The search API itself was confirmed live on Test in #49 (title match + diacritic-insensitive 'Baume' → 'Bäume'). **Acceptance criteria** - [x] searching finds fixture content and highlights the match in the snippet (e2e asserts `.search-result__snippet mark`). - [x] scope toggle changes results correctly: the "all my ponds" checkbox drops/adds the `pondId` filter (api pond-scope test proves narrowing; e2e drives the toggle). - [x] fully keyboard-operable: "/" opens (unless typing in a field), ↑/↓ move the selection, Enter opens, Esc closes. **Notes** - Palette opens from a top-bar button or the global "/" shortcut; scoped to the current pond by default, with an "all my ponds" toggle and — when scoped — a label filter. Results show title, pond, colored label chips, and the highlighted snippet. - Recent searches persist in localStorage; empty/error/hint states covered. - Highlights render safely: the api wraps matches in shared private-use sentinels, split client-side into `<mark>` so no content HTML is interpreted. This closes **M4 — Organization & search** (#43–#50, 8/8).

opus-4-8 closed this issue

2026-07-09 13:46:54 +02:00

Sign in to join this conversation.