Build the URL Update Helper

Now connect the client-side controls to the URL. The first goal is not search or sorting yet; it is one reusable function that can update exactly one piece of browse state while preserving the rest.

Step 1 — Make FilterBar a client component

At the top of components/FilterBar.tsx, add the client directive because this component will use the navigation hooks and event handlers.

"use client";

Step 2 — Add the navigation hooks

Import useRouter and usePathname, then create them inside the component.

const router = useRouter();
const pathname = usePathname();

Step 3 — Build pushParams

Create a helper that accepts optional q, genres, and sort values. For any omitted value, use the existing prop. This is what lets one control update the URL without erasing the other active controls.

function pushParams(next: {
  q?: string;
  genres?: number[];
  sort?: SortOption;
}) {

Inside the helper, write only non-empty query values to URLSearchParams, then push the resulting string with the current pathname.

router.push(`${pathname}?${params.toString()}`);

Checkpoint

FilterBar can now generate a URL that preserves the current browse state while changing one selection. No individual control needs its own URL-building logic.