fix(projects): Preserve group filter on return

src/app/components/ProjectCard.tsx

@@ -12,12 +12,14 @@ export function ProjectCard({
   project,
   view = 'grid',
   voteCategories = [],
+  detailsSearch,
 }: {
   project: ProjectSummary;
   view?: 'grid' | 'list';
   voteCategories?: string[];
+  detailsSearch?: string;
 }) {
-  const projectLink = `/years/${project.yearId}/projects/${project.id}`;
+  const projectLink = `/years/${project.yearId}/projects/${project.id}${detailsSearch ? `?${detailsSearch}` : ''}`;
 
   if (view === 'list') {
     return (

src/app/routes/ProjectDetailsPage.tsx

@@ -1,6 +1,6 @@
 import {useState, type ChangeEvent} from 'react';
 import {useQuery} from '@tanstack/react-query';
-import {Link, useLocation, useParams} from 'wouter';
+import {Link, useLocation, useParams, useSearchParams} from 'wouter';
 
 import {QueryState} from '../components/AppLayout';
 import {Markdown} from '../components/Markdown';
@@ -21,6 +21,9 @@ export function ProjectDetailsPage() {
     projectId: string;
   }>();
   const [, navigate] = useLocation();
+  const [searchParams] = useSearchParams();
+  const group = searchParams.get('group');
+  const projectsHref = `/years/${yearId}/projects${group ? `?group=${encodeURIComponent(group)}` : ''}`;
   const project = useProject(projectId);
   const ballotYearId = project.data?.project.yearId ?? yearId;
   const ballot = useBallotStatus(ballotYearId, project.data?.project.kind === 'project');
@@ -49,7 +52,7 @@ export function ProjectDetailsPage() {
         <main className="detailPage">
           <header className="detailHero">
             <div>
-              <Link className="backLink" href={`/years/${yearId}/projects`}>
+              <Link className="backLink" href={projectsHref}>
                 ← {yearId} projects
               </Link>
               <div className="detailTags">
@@ -88,7 +91,7 @@ export function ProjectDetailsPage() {
                     if (!window.confirm('Withdraw this project from the archive?'))
                       return;
                     withdraw.mutate(projectId, {
-                      onSuccess: () => navigate(`/years/${yearId}/projects`),
+                      onSuccess: () => navigate(projectsHref),
                       onError: (error) => setActionError(error.message),
                     });
                   }}

src/app/routes/ProjectsPage.tsx

@@ -1,5 +1,5 @@
 import {useEffect, useRef, useState} from 'react';
-import {Link, useParams} from 'wouter';
+import {Link, useParams, useSearchParams} from 'wouter';
 
 import type {BallotStatusResponse} from '../../shared/administration';
 import {getAwardCategoryDescription} from '../awardCategories';
@@ -34,8 +34,9 @@ function saveProjectsView(view: ProjectsView) {
 
 export function ProjectsPage({isAdmin = false}: {isAdmin?: boolean}) {
   const {yearId} = useParams<{yearId: string}>();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [kind, setKind] = useState<'project' | 'idea'>('project');
-  const [group, setGroup] = useState('');
+  const group = searchParams.get('group') ?? '';
   const [searchInput, setSearchInput] = useState('');
   const [search, setSearch] = useState('');
   const [cursor, setCursor] = useState<string | undefined>();
@@ -72,6 +73,16 @@ export function ProjectsPage({isAdmin = false}: {isAdmin?: boolean}) {
     setCursorHistory([]);
   };
 
+  const selectGroup = (groupId: string) => {
+    setSearchParams((current) => {
+      const next = new URLSearchParams(current);
+      if (groupId) next.set('group', groupId);
+      else next.delete('group');
+      return next;
+    });
+    resetPagination();
+  };
+
   useEffect(() => {
     const timeout = window.setTimeout(() => {
       setSearch(searchInput.trim());
@@ -81,7 +92,7 @@ export function ProjectsPage({isAdmin = false}: {isAdmin?: boolean}) {
 
   useEffect(() => {
     resetPagination();
-  }, [yearId, search]);
+  }, [yearId, search, group]);
 
   useEffect(() => {
     if (
@@ -212,10 +223,7 @@ export function ProjectsPage({isAdmin = false}: {isAdmin?: boolean}) {
                   <span>Group</span>
                   <select
                     value={group}
-                    onChange={(event) => {
-                      setGroup(event.target.value);
-                      resetPagination();
-                    }}
+                    onChange={(event) => selectGroup(event.target.value)}
                   >
                     <option value="">All groups</option>
                     {year.data.groups.map((item) => (
@@ -252,7 +260,7 @@ export function ProjectsPage({isAdmin = false}: {isAdmin?: boolean}) {
                 {year.data.awards.map((award) => (
                   <Link
                     key={award.id}
-                    href={`/years/${yearId}/projects/${award.projectId}`}
+                    href={`/years/${yearId}/projects/${award.projectId}${group ? `?group=${encodeURIComponent(group)}` : ''}`}
                   >
                     <span>{award.categoryName}</span>
                     <small>{getAwardCategoryDescription(award.categoryName)}</small>
@@ -289,6 +297,11 @@ export function ProjectsPage({isAdmin = false}: {isAdmin?: boolean}) {
                   project={project}
                   view={view}
                   voteCategories={voteCategoriesByProject.get(project.id)}
+                  detailsSearch={
+                    kind === 'project' && group
+                      ? `group=${encodeURIComponent(group)}`
+                      : undefined
+                  }
                   key={project.id}
                 />
               ))}

test/app/routes.test.tsx

@@ -635,6 +635,188 @@ describe('clickable project routes', () => {
     ).toBe('true');
   });
 
+  it('resets pagination when the group filter changes', async () => {
+    fetchMock.mockImplementation(async (input) => {
+      const url = requestUrl(input);
+      if (url.includes('/api/years/2026')) {
+        return json({
+          year: {
+            id: '2026',
+            votingEnabled: false,
+            submissionsClosed: false,
+            projectCount: 251,
+            ideaCount: 0,
+            groupCount: 2,
+            participantCount: 251,
+          },
+          groups: [
+            {id: 'group-a', yearId: '2026', name: 'Orbital', projectCount: 251},
+            {id: 'group-b', yearId: '2026', name: 'Lunar', projectCount: 1},
+          ],
+          awards: [],
+        });
+      }
+
+      const projectsUrl = new URL(url, 'https://hackweek.test');
+      const group = projectsUrl.searchParams.get('group');
+      const cursor = projectsUrl.searchParams.get('cursor');
+      if (group === 'group-b') {
+        expect(cursor).toBeNull();
+        return json({
+          projects: [
+            {
+              ...projectFixture,
+              id: 'lunar-1',
+              name: 'Lunar one',
+              group: {
+                id: 'group-b',
+                yearId: '2026',
+                name: 'Lunar',
+                projectCount: 1,
+              },
+            },
+          ],
+          nextCursor: null,
+        });
+      }
+
+      if (cursor === '250') {
+        return json({
+          projects: [{...projectFixture, id: 'project-251', name: 'Project 251'}],
+          nextCursor: null,
+        });
+      }
+
+      return json({
+        projects: Array.from({length: 250}, (_, index) => ({
+          ...projectFixture,
+          id: `project-${index + 1}`,
+          name: `Project ${index + 1}`,
+        })),
+        nextCursor: '250',
+      });
+    });
+
+    renderRoute(
+      <ProjectsPage />,
+      '/years/2026/projects?group=group-a',
+      '/years/:yearId/projects',
+    );
+
+    expect(await screen.findByRole('heading', {name: 'Project 1'})).toBeTruthy();
+    await userEvent.click(screen.getByRole('button', {name: 'next'}));
+    expect(await screen.findByRole('heading', {name: 'Project 251'})).toBeTruthy();
+
+    await userEvent.selectOptions(
+      screen.getByRole('combobox', {name: 'Group'}),
+      'group-b',
+    );
+
+    expect(await screen.findByRole('heading', {name: 'Lunar one'})).toBeTruthy();
+    await waitFor(() => {
+      const lastInput = fetchMock.mock.calls.at(-1)?.[0];
+      const lastUrl =
+        lastInput instanceof Request ? lastInput.url : lastInput?.toString();
+      expect(lastUrl).toContain('group=group-b');
+      expect(lastUrl).not.toContain('cursor=');
+    });
+  });
+
+  it('omits the group filter from idea detail links', async () => {
+    fetchMock.mockImplementation(async (input) => {
+      const url = requestUrl(input);
+      if (url.includes('/api/years/2026')) {
+        return json({
+          year: {
+            id: '2026',
+            votingEnabled: false,
+            submissionsClosed: false,
+            projectCount: 1,
+            ideaCount: 1,
+            groupCount: 1,
+            participantCount: 1,
+          },
+          groups: [{id: 'group', yearId: '2026', name: 'Orbital', projectCount: 1}],
+          awards: [],
+        });
+      }
+      return json({
+        projects: [
+          {
+            ...projectFixture,
+            id: 'idea',
+            name: 'Open idea',
+            kind: 'idea',
+            group: null,
+          },
+        ],
+        nextCursor: null,
+      });
+    });
+
+    renderRoute(
+      <ProjectsPage />,
+      '/years/2026/projects?group=group',
+      '/years/:yearId/projects',
+    );
+
+    await userEvent.click(await screen.findByRole('button', {name: /Ideas/}));
+    expect(
+      (await screen.findByRole('link', {name: 'Open idea'})).getAttribute('href'),
+    ).toBe('/years/2026/projects/idea');
+  });
+
+  it('keeps the selected group when viewing a project and returning', async () => {
+    fetchMock.mockImplementation(async (input) => {
+      const url = requestUrl(input);
+      if (url.includes('/api/years/2026')) {
+        return json({
+          year: {
+            id: '2026',
+            votingEnabled: false,
+            submissionsClosed: false,
+            projectCount: 1,
+            ideaCount: 0,
+            groupCount: 1,
+            participantCount: 1,
+          },
+          groups: [{id: 'group', yearId: '2026', name: 'Orbital', projectCount: 1}],
+          awards: [],
+        });
+      }
+      expect(new URL(url, 'https://hackweek.test').searchParams.get('group')).toBe(
+        'group',
+      );
+      return json({projects: [projectFixture], nextCursor: null});
+    });
+
+    const projects = renderRoute(
+      <ProjectsPage />,
+      '/years/2026/projects?group=group',
+      '/years/:yearId/projects',
+    );
+
+    const groupSelect = await screen.findByRole('combobox', {name: 'Group'});
+    expect(groupSelect).toBeInstanceOf(HTMLSelectElement);
+    if (!(groupSelect instanceof HTMLSelectElement)) throw new Error();
+    expect(groupSelect.value).toBe('group');
+    expect(screen.getByRole('link', {name: 'A small machine'}).getAttribute('href')).toBe(
+      '/years/2026/projects/project?group=group',
+    );
+
+    projects.unmount();
+    mockProjectDetails({detail: projectFixture});
+    renderRoute(
+      <ProjectDetailsPage />,
+      '/years/2026/projects/project?group=group',
+      '/years/:yearId/projects/:projectId',
+    );
+
+    expect(
+      (await screen.findByRole('link', {name: '← 2026 projects'})).getAttribute('href'),
+    ).toBe('/years/2026/projects?group=group');
+  });
+
   it('requests a 250-item page and focuses and announces loaded pages', async () => {
     let resolveSecondPage!: (response: Response) => void;
     const pendingSecondPage = new Promise<Response>((resolve) => {