Persist category filter selection in URL

[marccsaada]

Closes #140

Overview

Persisted the category filter selection in the URL so filtered map views survive a refresh and are shareable. Added encode and decode helpers in filters.ts, and wired MapFiltersProvider to read the selection from the URL on load and sync it back on every change.

Testing

Manual testing on /carte:

• Unchecking a category updates the URL immediately
• Refreshing preserves the filter state, including Faune/flore, which needed a fix since the reused helper was dropping that group's state
• Re-checking everything clears the param
• A filtered URL loads correctly in a new incognito window

Ran npm run lint, npx tsc --noEmit, and npm run test, all pass.

Screenshots / Screencasts

N/A

Checklist

• Code is neat, readable, and works
• Code is commented where appropriate and well-documented
• Commit messages follow our guidelines
• Issue number is linked
• Branch is linked
• Reviewers are assigned (one of your tech leads)

Notes

None.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
canopee-project	Ready	Preview	Aug 26, 2026 2:16pm

[lauriechammah]

Keeping filter state and query params bidirectionally synchronized. Right now, filters don't truly persist when you reload the page.

Suggested change

	const router = useRouter()
	const pathname = usePathname()
	const searchParams = useSearchParams()
	const [selection, setSelection] = useState<CategorySelection>(() =>
	paramToSelection(searchParams.get('categories')),
	)
	useEffect(() => {
	const params = new URLSearchParams(searchParams.toString())
	const value = selectionToUrlParam(selection)
	if (value === null) {
	params.delete('categories')
	} else {
	params.set('categories', value)
	}
	const query = params.toString()
	router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false })
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [selection])
	const router = useRouter()
	const pathname = usePathname()
	const searchParams = useSearchParams()
	const [selection, setSelection] = useState<CategorySelection>(() =>
	paramToSelection(searchParams.get('categories')),
	)
	useEffect(() => {
	const next = paramToSelection(searchParams.get('categories'))
	setSelection((prev) => {
	const sameSize = next.size === prev.size
	const sameValues = sameSize && [...next].every((c) => prev.has(c))
	return sameValues ? prev : next
	})
	}, [searchParams])
	useEffect(() => {
	const params = new URLSearchParams(searchParams.toString())
	const nextValue = selectionToUrlParam(selection)
	const currentValue = searchParams.get('categories')
	if (nextValue === null) params.delete('categories')
	else params.set('categories', nextValue)
	const normalizedCurrent = currentValue ?? null
	if (normalizedCurrent === nextValue) return
	const query = params.toString()
	router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false })
	}, [selection, searchParams, pathname, router])

[lauriechammah]

Behavior is not exactly as expected. When the page is reloaded, all filters are reactivated. The state doesn't quite persist