Add search bar to home screen#1775
Conversation
|
|
WalkthroughThe dashboard route adds a "Discover your library" search feature that filters media by query string and media lot. Search state is managed locally, metadata is fetched via GraphQL when a query is present, and results are conditionally rendered as a grid, empty state, or loading skeleton. ChangesDashboard Search Feature
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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.
Inline comments:
In `@apps/frontend/app/routes/_dashboard._index.tsx`:
- Around line 49-50: Imports are out of alphabetical order; move the import of
DebouncedSearchInput (from ~/components/common/filters) so it appears before the
import of ApplicationGrid (from ~/components/common/layout). Update the two
import lines so they are alphabetically sorted by module path (filters before
layout) to satisfy tooling/linters and CI.
- Around line 94-97: Swap the two React hook declarations so the shorter
single-line state hook dashboardSearchQuery (useState("")) is declared before
the multi-line dashboardSearchLot (useState<MediaLot | "ALL">("ALL")), i.e.,
reorder the declarations of dashboardSearchQuery and dashboardSearchLot to
follow ascending line length while keeping useState types and initializers
unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 2091da02-a17b-4f26-9242-57c95e5f3869
📒 Files selected for processing (1)
apps/frontend/app/routes/_dashboard._index.tsx
| import { ApplicationGrid } from "~/components/common/layout"; | ||
| import { DebouncedSearchInput } from "~/components/common/filters"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win
Import out of alphabetical order.
~/components/common/filters should precede ~/components/common/layout. This ordering is tooling-enforced and may fail lint/CI.
♻️ Proposed fix
-import { ApplicationGrid } from "~/components/common/layout";
import { DebouncedSearchInput } from "~/components/common/filters";
+import { ApplicationGrid } from "~/components/common/layout";As per coding guidelines: "Import statements should follow alphabetical ordering as enforced by tooling".
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { ApplicationGrid } from "~/components/common/layout"; | |
| import { DebouncedSearchInput } from "~/components/common/filters"; | |
| import { DebouncedSearchInput } from "~/components/common/filters"; | |
| import { ApplicationGrid } from "~/components/common/layout"; |
🤖 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 `@apps/frontend/app/routes/_dashboard._index.tsx` around lines 49 - 50, Imports
are out of alphabetical order; move the import of DebouncedSearchInput (from
~/components/common/filters) so it appears before the import of ApplicationGrid
(from ~/components/common/layout). Update the two import lines so they are
alphabetically sorted by module path (filters before layout) to satisfy
tooling/linters and CI.
| const [dashboardSearchLot, setDashboardSearchLot] = useState<MediaLot | "ALL">( | ||
| "ALL", | ||
| ); | ||
| const [dashboardSearchQuery, setDashboardSearchQuery] = useState(""); |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial | 💤 Low value
Order the new hooks by ascending line length.
dashboardSearchQuery (single line) should be declared before the multi-line dashboardSearchLot.
♻️ Proposed fix
+ const [dashboardSearchQuery, setDashboardSearchQuery] = useState("");
const [dashboardSearchLot, setDashboardSearchLot] = useState<MediaLot | "ALL">(
"ALL",
);
- const [dashboardSearchQuery, setDashboardSearchQuery] = useState("");As per coding guidelines: "When declaring multiple variables in sequence (particularly React hooks), order them by ascending line length".
🤖 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 `@apps/frontend/app/routes/_dashboard._index.tsx` around lines 94 - 97, Swap
the two React hook declarations so the shorter single-line state hook
dashboardSearchQuery (useState("")) is declared before the multi-line
dashboardSearchLot (useState<MediaLot | "ALL">("ALL")), i.e., reorder the
declarations of dashboardSearchQuery and dashboardSearchLot to follow ascending
line length while keeping useState types and initializers unchanged.
|
Please add some screenshots so that I can verify it visually. |
3 participants
This pull request adds a new "Discover your library" search feature to the dashboard page, allowing users to search and filter their media library by type (e.g., Anime, Books, Movies). It introduces a debounced search input, category filter buttons, and displays search results in a grid with loading and empty states.
New search and filter functionality:
dashboardSearchLotanddashboardSearchQueryto manage media type and search input, including a debounced search input (DebouncedSearchInput) and filter buttons for different media categories. [1] [2]UserMetadataListDocument) using React Query to fetch and display search results based on the user's input and selected media type, with loading and empty result handling. [1] [2]Supporting code and imports:
MediaLot,MediaSortBy,UserMetadataListDocument,UserMetadataListInput, andDebouncedSearchInput. [1] [2]useStateto manage local state for search input and filter selection.Summary by CodeRabbit
Release Notes