Feat/search improvement by Daksh-Vermaa · Pull Request #5 · abneeeees/PewPew

Daksh-Vermaa · 2026-07-13T12:13:00Z

Added advanced game search.
Added real-time search suggestions.
Added filtering and sorting options for games.
Improved search page UI and user experience.
Enhanced navigation from search suggestions to game pages.
Fixed search-related bugs and edge cases.

…esSection

vercel · 2026-07-13T12:13:04Z

@Daksh-Vermaa is attempting to deploy a commit to the avneeshkumar01's projects Team on Vercel.

A member of the Team first needs to authorize it.

Copilot

Pull request overview

This PR upgrades the games discovery experience by introducing a richer search/filter model, adding real-time search suggestions, and shifting the /games page to a client-driven UI backed by new API proxy routes to RAWG.

Changes:

Added shared search/filter TypeScript types (sort options, active filters, suggestions) and expanded Game typing.
Introduced a new navbar search bar with live suggestions, and refactored the header to use it.
Rebuilt /games around a client-side filter + pagination flow (GamesClient) and added new API routes for games/genres/platforms.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
lib/types.ts	Adds genres to `Game` and introduces search/filter-related types used across the new UI.
components/Global/NavSearchBar.tsx	New global search input with debounced live suggestions and keyboard navigation.
components/Global/Header.tsx	Replaces the old header search inputs with the new `NavSearchBar`.
components/Games/SearchBar.tsx	Adds a dedicated search bar component with suggestions (currently not wired in).
components/Games/HomeGamesSection.tsx	New server-rendered home page games section with Link-based pagination.
components/Games/GamesClient.tsx	Client-side search/filter/pagination state synced with URL + data fetching via `/api/games`.
components/Games/GameGrid.tsx	Converts grid to a client component with loading skeletons and callback-based pagination.
components/Games/FilterPanel.tsx	Adds filter UI (sort, genres, platforms, tags, year, metacritic) with dropdowns.
components/Games/ActiveFiltersBar.tsx	Adds active-filter chips, sort chip, and filter panel toggle with result count.
app/page.tsx	Updates home page to use `HomeGamesSection` and adds page metadata.
app/games/page.tsx	Replaces server pagination with Suspense + `GamesClient` and a skeleton fallback.
app/api/platforms/route.ts	New API route to fetch/cached platform metadata from RAWG.
app/api/genres/route.ts	New API route to fetch/cached genre metadata from RAWG.
app/api/games/route.ts	New API route proxying RAWG games search (supports suggestion mode).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+"use client";
+
 import GameCard from "./GameCard";
+import type { Game } from "@/lib/types";


+function highlightMatch(text: string, query: string) {
+  if (!query.trim()) return <span>{text}</span>;
+  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const regex = new RegExp(`(${escaped})`, "gi");
+  const parts = text.split(regex);
+  return (
+    <>
+      {parts.map((part, i) =>
+        regex.test(part) ? (
+          <mark key={i} className="bg-transparent text-accent font-bold not-italic">
+            {part}
+          </mark>
+        ) : (
+          <span key={i}>{part}</span>
+        )
+      )}
+    </>
+  );
+}


+function highlightMatch(text: string, query: string) {
+  if (!query.trim()) return text;
+  const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+  const parts = text.split(regex);
+  return parts.map((part, i) =>
+    regex.test(part) ? (
+      <mark key={i} className="bg-transparent text-accent font-bold not-italic">
+        {part}
+      </mark>
+    ) : (
+      <span key={i}>{part}</span>
+    )
+  );
+}


+export default function SearchBar({ value, onChange, onSubmit, placeholder = "Search games, genres, publishers…" }: SearchBarProps) {
+  const [suggestions, setSuggestions] = useState<SuggestionItem[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);


+  if (filters.releaseYearMin || filters.releaseYearMax) {
+    const from = filters.releaseYearMin || "1980";
+    const to = filters.releaseYearMax || "2025";
+    params.set("dates", `${from}-01-01,${to}-12-31`);
+  }


+  return {
+    filters: {
+      search: searchParams.get("search") || "",
+      genres: searchParams.get("genres")?.split(",").filter(Boolean) || [],
+      platforms: searchParams.get("platforms")?.split(",").filter(Boolean) || [],
+      tags: searchParams.get("tags")?.split(",").filter(Boolean) || [],
+      publishers: searchParams.get("publishers")?.split(",").filter(Boolean) || [],
+      releaseYearMin,
+      releaseYearMax,
+      metacriticMin,
+      metacriticMax,
+      ordering: (searchParams.get("ordering") as SortOption) || "-metacritic",
+    },
+    page: Number(searchParams.get("page")) || 1,
+  };


+  { value: "-added", label: "Recently Added" },
+];
+
+const RELEASE_YEARS = Array.from({ length: 2026 - 1980 }, (_, i) => 2025 - i);


+function CheckboxRow({ label, checked, onChange }: { label: string; checked: boolean; onChange: () => void }) {
+  return (
+    <label className="flex items-center gap-2.5 px-4 py-2 cursor-pointer hover:bg-white/5 transition-colors group">
+      <div
+        className={`w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-all duration-150 ${
+          checked ? "bg-accent border-accent" : "border-white/20 group-hover:border-white/40"
+        }`}
+        onClick={onChange}
+      >
+        {checked && (
+          <svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+          </svg>
+        )}
+      </div>
+      <span
+        className={`text-sm transition-colors ${checked ? "text-white font-medium" : "text-zinc-300 group-hover:text-white"}`}
+        onClick={onChange}
+      >
+        {label}
+      </span>
+    </label>
+  );
+}


+  for (const key of forwardable) {
+    const val = incoming.get(key);
+    if (val && val.trim() !== "") {
+      params.set(key, val);
+    }
+  }


Daksh-Vermaa added 3 commits July 12, 2026 18:15

feat: implement advanced game search, filtering, and navigation system

7b49d87

refactor: replace client-side GameGrid logic with server-side HomeGam…

74580fe

…esSection

refactor: convert filter panel to floating dropdown-based UI

8e4cf1e

Copilot AI review requested due to automatic review settings July 13, 2026 12:13

Copilot started reviewing on behalf of Daksh-Vermaa July 13, 2026 12:13 View session

Copilot AI reviewed Jul 13, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/search improvement#5

Feat/search improvement#5
Daksh-Vermaa wants to merge 3 commits into
abneeeees:mainfrom
Daksh-Vermaa:feat/search-improvement

Daksh-Vermaa commented Jul 13, 2026

Uh oh!

vercel Bot commented Jul 13, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Daksh-Vermaa commented Jul 13, 2026

Uh oh!

vercel Bot commented Jul 13, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants