Improve search visibility and add simple/full filter toggles

[Swastikdan]

Motivation

• Make the global search input match the app surface contrast so it is readable and consistent with other controls.
• Provide a simpler default UI for recommendation generation and watchlist filtering while keeping access to advanced customization (era/count/genres) when desired.
• Fix recommendation history header layout on small screens so timestamp and result count are not hidden.

Description

• Updated search input styling in src/components/ui/search-bar.tsx to use a higher-contrast background, stronger border, and subtle shadow so the field is less dim and matches other surfaces.
• Added a showAdvancedOptions toggle and a SlidersHorizontal button to src/routes/recommendations.tsx and moved era/count/genre controls behind this toggle so the default view is simpler.
• Improved recommendation history responsiveness by allowing the header to wrap and adding a dedicated mobile row to show timestamp and result count in src/routes/recommendations.tsx.
• Added the same simple/full options affordance to the watchlist filter controls in src/routes/watchlist.tsx and adjusted the filters container visibility to be toggled on demand.
• Changes touch only UI/UX rendering and state for the above pages and do not change backend behavior.

Testing

• Ran lint/format checks with pnpm -s biome check src/components/ui/search-bar.tsx src/routes/recommendations.tsx src/routes/watchlist.tsx which completed successfully.
• Type-checked the codebase with pnpm -s tsc --noEmit which completed successfully.
• Started the dev server and captured a visual screenshot of the home page search bar to validate the styling change (screenshot artifact captured).
• Attempted a mobile /recommendations screenshot with Playwright which failed in this environment due to a browser/container crash (Playwright Chromium SIGSEGV), so mobile rendering was adjusted by code inspection and local checks rather than the failed capture.

---

Codex Task

Summary by CodeRabbit

• New Features

  • Added toggleable "Advanced Options" mode in recommendations to switch between simplified and full control views.
  • Enhanced filter control accessibility on watchlist with improved visibility and dynamic labels.

• Style

  • Updated search bar color scheme for improved visual consistency.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
film-fanatic	Ready	Preview, Comment	Mar 10, 2026 5:19am

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds an advanced options toggle to the recommendations and watchlist components, updating their UI to switch between "Simple" and "Full options" modes, while also refreshing the search bar styling from a dark theme to a light theme.

Changes

Cohort / File(s)	Summary
Search Bar Styling src/components/ui/search-bar.tsx	Updated Input component styling from dark/secondary theme to light/primary theme with adjusted background, border, shadow, placeholder, and focus ring colors. No functional changes.
Recommendations Advanced Options Toggle src/routes/recommendations.tsx	Added showAdvancedOptions state and SlidersHorizontal icon button to toggle between "Full options" and "Simple" modes. Advanced controls (Era selection, Count selection, Genre chips) now render conditionally. Adjusted responsive layout for history entries with flexible flex/wrap structures and screen-size-specific timestamp/results visibility.
Watchlist Filter Button src/routes/watchlist.tsx	Removed md breakpoint from filter toggle button for consistent visibility across all screen sizes. Added dynamic label ("Simple"/"Full options"). Updated secondary filters panel to only display when filtersOpen is true.
Dependencies package.json	Updated package dependency version (+1/-1).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Improve search visibility and add simple/full filter toggles' accurately summarizes the main changes: enhanced search-bar styling for visibility and new toggle UI controls across recommendations and watchlist.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codex/fix-search-bar-visibility-and-add-customization

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/routes/recommendations.tsx (1)

419-515: ⚠️ Potential issue | 🟠 Major

Don't leave advanced constraints active when the UI is in "Simple" mode.

Collapsing this section only hides the controls; selectedEras, selectedGenres, and a non-default count still affect handleGenerate(). In the collapsed state there is no badge or summary like the watchlist toggle, so users can generate with stale hidden constraints and no visible explanation for the changed results. Please either clear advanced state when switching back to simple mode, or surface an active-options summary/count on the toggle and expose it as a proper disclosure with aria-expanded/aria-controls.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/routes/recommendations.tsx` around lines 419 - 515, When collapsing
advanced options (via setShowAdvancedOptions), clear or reset hidden advanced
constraints so they don't affect handleGenerate: update the toggle handler used
in the Button onClick to, when switching from true to false, call the state
setters to reset selectedEras, selectedGenres, and count to their defaults
(e.g., setSelectedEras([]), setSelectedGenres([]), setCount(DEFAULT_COUNT));
ensure you reference the existing state vars and setters (selectedEras,
selectedGenres, count, setSelectedEras, setSelectedGenres, setCount,
setShowAdvancedOptions) so hidden constraints are not applied when
showAdvancedOptions is false.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/routes/recommendations.tsx`:
- Around line 419-515: When collapsing advanced options (via
setShowAdvancedOptions), clear or reset hidden advanced constraints so they
don't affect handleGenerate: update the toggle handler used in the Button
onClick to, when switching from true to false, call the state setters to reset
selectedEras, selectedGenres, and count to their defaults (e.g.,
setSelectedEras([]), setSelectedGenres([]), setCount(DEFAULT_COUNT)); ensure you
reference the existing state vars and setters (selectedEras, selectedGenres,
count, setSelectedEras, setSelectedGenres, setCount, setShowAdvancedOptions) so
hidden constraints are not applied when showAdvancedOptions is false.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: a5ce8d7f-93e0-478c-a868-180e237ed86c

📥 Commits

Reviewing files that changed from the base of the PR and between 4e22d91 and fbfa472.

📒 Files selected for processing (3)

• src/components/ui/search-bar.tsx
• src/routes/recommendations.tsx
• src/routes/watchlist.tsx