feat(search): open postcode searches on the map on phones too

Trial the map as the default for every postcode search, not only on
desktop (DEFAULT_LOCATION_VIEW in HomeView; results_view_changed shows
how often readers switch away). The view is now derived: the reader's
choice once made, else the default for the kind of search. That follows
a hero search through client-side navigation without syncing state.

With nothing left varying by device, the user-agent default goes
(lib/device.ts, the headers() read in page.tsx). That settles two review
points: the HTML no longer needs Vary: User-Agent, and there is no
narrow-window fallback left to flash the map before the list.

Review fix in LeafletMapInner: the card reopened only when the selection
or the school list changed, so a rebuild caused by the centre, reference
point or radius closed it for good while the page still had the school
selected. The selection effect now follows a pins-rebuilt counter.
SchoolMap memoises its fallback centre, which was a fresh array on every
render and would have rebuilt every pin each time.

Phones hide the map view's list pane, so it no longer builds up to 500
hidden cards there (decided after mount, so hydration still matches).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

nextjs-app/__tests__/components/HomeView.staleFetch.test.tsx

@@ -39,15 +39,17 @@ beforeEach(() => {
 });
 
 test('load-more results from an old search are discarded, even after returning to it', async () => {
+  // Name searches: a postcode search opens on the map, which has no Load more.
+  params = new URLSearchParams('search=abbey');
   const pending = deferred();
   jest.mocked(fetchSchools).mockReturnValueOnce(pending.promise);
   const view = render(<HomeView initialSchools={response('Initial A')} filters={filters} />);
   fireEvent.click(screen.getByRole('button', { name: 'Load more schools' }));
   const signal = jest.mocked(fetchSchools).mock.calls[0][1]?.signal;
-  params = new URLSearchParams('postcode=SW2+1AA');
+  params = new URLSearchParams('search=brecknock');
   view.rerender(<HomeView initialSchools={response('Initial B')} filters={filters} />);
   expect(signal?.aborted).toBe(true);
-  params = new URLSearchParams('postcode=SW1A+1AA');
+  params = new URLSearchParams('search=abbey');
   view.rerender(<HomeView initialSchools={response('Fresh A')} filters={filters} />);
   await act(async () => pending.resolve(response('Stale append')));
   expect(screen.queryByText('Stale append')).not.toBeInTheDocument();

nextjs-app/__tests__/components/LeafletMapInner.test.tsx

@@ -95,3 +95,13 @@ it('opens no card on a narrow screen, where the page shows a bottom sheet', () =
   expect(container.querySelectorAll('.sc-pin--selected')).toHaveLength(1);
   expect(container.querySelector('.sc-popup')).toBeNull();
 });
+
+it('puts the card back when the pins are rebuilt for a reason other than the schools', () => {
+  const onDeselect = jest.fn();
+  const { container, rerender } = renderMap({ onDeselect, selectedUrn: 1 });
+  act(() => rerender({ onDeselect, selectedUrn: 1, radiusMiles: 3, referencePoint: [51.43, -0.21] }));
+  expect(onDeselect).not.toHaveBeenCalled();
+  expect(container.querySelector('.sc-radius-label')).toHaveTextContent('3 miles');
+  expect(container.querySelector('.sc-popup')).toHaveTextContent('Southmead Primary School');
+  expect(container.querySelectorAll('.sc-pin--selected')).toHaveLength(1);
+});

nextjs-app/__tests__/components/ResultsMapView.test.tsx

@@ -5,8 +5,8 @@ import { primaryFixture } from '../support/schoolFixtures';
 import type { School, SchoolsResponse } from '@/lib/types';
 
 /*
- * The map view: the list beside the map (mockup B), opening on the map for
- * desktop. The map itself is Leaflet and mocked here; what is pinned is what
+ * The map view: the list beside the map (mockup B), where every postcode
+ * search opens. The map itself is Leaflet and mocked here; what is pinned is what
  * HomeView hands it and the list it draws beside it.
  */
 
@@ -63,26 +63,33 @@ beforeEach(() => {
   params = new URLSearchParams('postcode=SW196AR&radius=1');
   jest.mocked(fetchSchools).mockReset().mockResolvedValue(results());
   jest.mocked(fetchNationalAverages).mockResolvedValue({ primary: { rwm_expected_pct: 62 } } as never);
-  window.innerWidth = 1440;
+  setWide(true);
 });
 
+/** Desktop unless a test says otherwise: the list pane is shown from 769px. */
+function setWide(wide: boolean) {
+  window.matchMedia = ((q: string) => ({
+    matches: wide, media: q, addEventListener() {}, removeEventListener() {},
+  })) as unknown as typeof window.matchMedia;
+}
+
 async function renderMap() {
-  const view = render(<HomeView initialSchools={results()} filters={filters} initialView="map" />);
+  const view = render(<HomeView initialSchools={results()} filters={filters} />);
   await act(async () => {});
   return view;
 }
 
-it('opens on the map when the server says desktop', async () => {
+it('opens a postcode search on the map', async () => {
   await renderMap();
   expect(screen.getByTestId('map')).toHaveAttribute('data-radius', '1');
   expect(screen.getByRole('button', { name: 'Map' })).toHaveAttribute('aria-pressed', 'true');
 });
 
-it('falls back to the list in a window too narrow for the split', async () => {
-  window.innerWidth = 800;
-  await renderMap();
+it('lists a name search, which has no map', async () => {
+  params = new URLSearchParams('search=southmead');
+  render(<HomeView initialSchools={results()} filters={filters} />);
+  await act(async () => {});
   expect(screen.queryByTestId('map')).not.toBeInTheDocument();
-  expect(screen.getByRole('button', { name: 'List' })).toHaveAttribute('aria-pressed', 'true');
 });
 
 it('puts the count and the sort in the list beside the map, once', async () => {
@@ -119,22 +126,29 @@ it('shows the England comparison for mainstream schools only, and never a placeh
   expect(card(3)).not.toHaveTextContent(/%|pts/);
 });
 
-it('follows a new default after a client-side search, until the reader picks', async () => {
+it('opens the map after a hero search, and keeps the reader\'s choice after that', async () => {
+  // Landing page, then a hero search: the same instance gets new props.
   params = new URLSearchParams('');
   const empty = { schools: [], total: 0, page: 1, page_size: 25, total_pages: 0 } as SchoolsResponse;
-  const view = render(<HomeView initialSchools={empty} filters={filters} initialView="list" />);
-
-  // Hero search: same component, new props.
+  const view = render(<HomeView initialSchools={empty} filters={filters} />);
   params = new URLSearchParams('postcode=SW196AR&radius=1');
-  view.rerender(<HomeView initialSchools={results()} filters={filters} initialView="map" />);
+  view.rerender(<HomeView initialSchools={results()} filters={filters} />);
   await act(async () => {});
   expect(screen.getByTestId('map')).toBeInTheDocument();
 
-  // Chosen: a later search keeps the reader's view.
+  // Chosen: a later search keeps the list.
   fireEvent.click(screen.getByRole('button', { name: 'List' }));
   params = new URLSearchParams('postcode=SW170AA&radius=1');
-  view.rerender(<HomeView initialSchools={results()} filters={filters} initialView="list" />);
-  view.rerender(<HomeView initialSchools={results()} filters={filters} initialView="map" />);
+  view.rerender(<HomeView initialSchools={results()} filters={filters} />);
   await act(async () => {});
   expect(screen.queryByTestId('map')).not.toBeInTheDocument();
 });
+
+it('builds no list cards on a phone, where the pane is hidden', async () => {
+  setWide(false);
+  const { container } = await renderMap();
+  expect(screen.getByTestId('map')).toBeInTheDocument();
+  expect(container.querySelectorAll('[data-urn]')).toHaveLength(0);
+  // The count stays: it is the pane's heading, shown above the map.
+  expect(screen.getByRole('heading', { name: /3 schools within/ })).toBeInTheDocument();
+});

nextjs-app/__tests__/components/ResultsToolbar.test.tsx

@@ -54,25 +54,28 @@ describe('the List/Map switch', () => {
     render(<HomeView initialSchools={results()} filters={filters} />);
     const view = screen.getByRole('group', { name: 'Results view' });
     expect(view.closest('div[class*="resultsToolbar"]')).not.toBeNull();
-    expect(screen.getByRole('button', { name: 'List' })).toHaveAttribute('aria-pressed', 'true');
-    expect(screen.getByRole('button', { name: 'Map' })).toHaveAttribute('aria-pressed', 'false');
+    // A postcode search opens on the map.
+    expect(screen.getByRole('button', { name: 'Map' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: 'List' })).toHaveAttribute('aria-pressed', 'false');
   });
 
   it('has a floating twin that flips between map and list', async () => {
     render(<HomeView initialSchools={results()} filters={filters} />);
-    await act(async () => fireEvent.click(screen.getByRole('button', { name: 'Show map' })));
-    expect(screen.getByTestId('map')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Map' })).toHaveAttribute('aria-pressed', 'true');
-    expect(track).toHaveBeenCalledWith('results_view_changed', { view: 'map', via: 'floating' });
-
+    await act(async () => {});
     fireEvent.click(screen.getByRole('button', { name: 'Show list' }));
     expect(screen.queryByTestId('map')).not.toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Show map' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'List' })).toHaveAttribute('aria-pressed', 'true');
+    expect(track).toHaveBeenCalledWith('results_view_changed', { view: 'list', via: 'floating' });
+
+    await act(async () => fireEvent.click(screen.getByRole('button', { name: 'Show map' })));
+    expect(screen.getByTestId('map')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Show list' })).toBeInTheDocument();
   });
 
-  it('does not track a click on the view already showing', () => {
+  it('does not track a click on the view already showing', async () => {
     render(<HomeView initialSchools={results()} filters={filters} />);
-    fireEvent.click(screen.getByRole('button', { name: 'List' }));
+    await act(async () => {});
+    fireEvent.click(screen.getByRole('button', { name: 'Map' }));
     expect(track).not.toHaveBeenCalledWith('results_view_changed', expect.anything());
   });