feat(home): add search / filter for notes on the home page#105
feat(home): add search / filter for notes on the home page#105sricharan12-hub wants to merge 1 commit into
Conversation
Add a controlled search input above the notes grid that filters top-level notes by title and content using a case-insensitive substring match, in real time as the user types. - Introduce a searchQuery state and derive filteredNotes from topLevelNotes. - Render filteredNotes instead of topLevelNotes. - Show a dedicated "No notes match your search" empty state when the query matches nothing, distinct from the existing NotesNotFound "no notes yet" state. - Add a clear (X) button; clearing the input restores the full list. - Style the input to match the existing Tailwind light/dark theme. Closes niharika-mente#81
📝 WalkthroughWalkthroughHomePage.jsx adds client-side search/filtering of notes via a new searchQuery state and a derived filteredNotes list matching title/content case-insensitively. The rendered grid now uses filteredNotes, includes a search input with clear button, and shows a "no matches" empty state. ChangesHome page search feature
Estimated code review effort: 1 (Trivial) | ~5 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant SearchInput
participant HomePage
participant NoteCard
User->>SearchInput: type query
SearchInput->>HomePage: update searchQuery state
HomePage->>HomePage: compute filteredNotes
alt matches found
HomePage->>NoteCard: render filteredNotes grid
else no matches
HomePage->>User: show "No notes match your search"
end
Related issues: Suggested labels: enhancement, frontend Suggested reviewers: niharika-mente Poem: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Warning |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
frontend/src/pages/HomePage.jsx (2)
33-42: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valueSearch scope silently excludes notes nested inside groups.
filteredNotesfilterstopLevelNotes, so a note with agroupId(i.e., grouped inside another note) is never matched even if its title/content contains the query — only the group container's own title/content is searchable. This is consistent with the existing top-level-only grid, but users may expect search to surface any matching note regardless of grouping.Consider deciding explicitly whether search should also match grouped/child notes (and surface their parent group if so) or document this as intended scope.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/pages/HomePage.jsx` around lines 33 - 42, The search logic in HomePage currently filters only topLevelNotes, so grouped/child notes are never matched even when their own title or content fits the query. Update the filtering flow around filteredNotes in HomePage.jsx to either explicitly keep top-level-only behavior with a clear comment/documentation, or expand the search to inspect grouped notes as well and surface the matching note or its parent group consistently. Make the intended scope explicit in the search/filter implementation.
161-217: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low valueSearch input, clear button, and empty state look correct.
Controlled input, clear button, and the distinct "no matches" empty state (separate from
NotesNotFound) all align with the PR objective. Accessibility labels (aria-label) are present on both the input and clear button.One minor note:
filteredNotesis recomputed on every render rather than memoized withuseMemo. Given typical note counts this is unlikely to matter in practice, but could be revisited if the notes list grows large.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/pages/HomePage.jsx` around lines 161 - 217, `HomePage` recomputes `filteredNotes` on every render, which can be avoided for better scalability. Move the filtering logic into a `useMemo` in `HomePage.jsx` so the derived list only recalculates when `notes` or `searchQuery` changes, and keep the existing `filteredNotes.map(...)` rendering unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@frontend/src/pages/HomePage.jsx`:
- Around line 33-42: The search logic in HomePage currently filters only
topLevelNotes, so grouped/child notes are never matched even when their own
title or content fits the query. Update the filtering flow around filteredNotes
in HomePage.jsx to either explicitly keep top-level-only behavior with a clear
comment/documentation, or expand the search to inspect grouped notes as well and
surface the matching note or its parent group consistently. Make the intended
scope explicit in the search/filter implementation.
- Around line 161-217: `HomePage` recomputes `filteredNotes` on every render,
which can be avoided for better scalability. Move the filtering logic into a
`useMemo` in `HomePage.jsx` so the derived list only recalculates when `notes`
or `searchQuery` changes, and keep the existing `filteredNotes.map(...)`
rendering unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 985b80f4-12bf-497c-ae50-89689366fcc3
📒 Files selected for processing (1)
frontend/src/pages/HomePage.jsx
1 participant
Overview
Adds a client-side search / filter to the home page so users can quickly
find notes as their collection grows, instead of scrolling the whole grid.
Closes #81
Changes
searchQuerystate and a controlled search<input>above the notes grid.filteredNotesfromtopLevelNotesusing a case-insensitive substringmatch on title and content; render
filteredNotesinstead oftopLevelNotes.matches nothing — distinct from the existing
NotesNotFound"no notes yet" state.Filtering happens entirely on the client using the already-fetched notes, so no
backend changes are required.
Acceptance criteria
Testing
npx eslint src/pages/HomePage.jsxpasses with no errors.Summary by CodeRabbit