fix(places): phase-grouped tables, plain-English measures, styled links

Three presentation faults on the place pages, all found by looking at a
rendered page rather than at a test.

An unphased place page showed one primary-only measure for a list holding both
phases: 8 of 27 rows on /schools/brentwood were blank, because secondaries
have no reading-writing-maths score. Picking the other measure would only have
inverted which rows were empty, and putting both in one column would have
mixed a percentage with a 0-90 score. Each phase now gets its own table, so a
blank cell means the school genuinely has no published result — which is worth
saying, and now says "Not published" rather than a bare dash.

"RWM expected" was invented here. The site already names the measure in
METRIC_DEFINITIONS, surfaced at /api/metrics: "Reading, Writing & Maths
Combined %". The heading now reads "Reading, writing & maths" with the full
definition in the tooltip.

Links carried no class at all, so they rendered as default blue underlined
browser links beside a site that styles table links as body colour with a
brand hover. They now follow RankingsView's convention, and running-copy links
take the brand colour.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015mWQnpye9F299NVRCCSRvj

nextjs-app/components/places/PlaceView.tsx

@@ -12,6 +12,7 @@
 import Link from 'next/link';
 import type { PlaceDetail, PlaceSummary } from '@/lib/places';
 import { placeUrl, authoritySlug } from '@/lib/places';
+import type { School } from '@/lib/types';
 import { schoolUrl } from '@/lib/utils';
 import { absoluteUrl } from '@/lib/site';
 import styles from './PlaceView.module.css';
@@ -30,19 +31,101 @@ const OFSTED_LABELS: Array<[number, string]> = [
   [3, 'Requires improvement'], [4, 'Inadequate'],
 ];
 
+/**
+ * Column headings, taken from the site's own metric dictionary rather than
+ * invented here — see METRIC_DEFINITIONS in backend/schemas.py, surfaced at
+ * /api/metrics. The first cut said "RWM expected", which is jargon that
+ * appears nowhere else on the site.
+ */
+const METRICS = {
+  primary: {
+    key: 'rwm_expected_pct' as const,
+    heading: 'Reading, writing & maths',
+    hint: '% meeting the expected standard in reading, writing and maths',
+    unit: '%',
+  },
+  secondary: {
+    key: 'attainment_8_score' as const,
+    heading: 'Attainment 8',
+    hint: "Average grade across a pupil's best 8 GCSEs, including English and maths",
+    unit: '',
+  },
+};
+
+type PhaseKey = keyof typeof METRICS;
+
+/** All-through schools sit in both phases, matching the search filters. */
+function isPhase(school: School, phase: PhaseKey): boolean {
+  const p = (school.phase ?? '').toLowerCase();
+  if (p === 'all-through') return true;
+  return phase === 'secondary'
+    ? p.includes('secondary') || p === '16 plus'
+    : p.includes('primary') || p.includes('middle');
+}
+
+function SchoolTable({ schools, phase }: { schools: School[]; phase: PhaseKey }) {
+  const metric = METRICS[phase];
+  return (
+    <div className={styles.tableWrap}>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <th scope="col">School</th>
+            <th scope="col">
+              <abbr className={styles.metricHead} title={metric.hint}>
+                {metric.heading}
+              </abbr>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {schools.map((s) => {
+            const value = s[metric.key];
+            return (
+              <tr key={s.urn}>
+                <td>
+                  <Link href={schoolUrl(s.urn, s.school_name)} className={styles.schoolLink}>
+                    {s.school_name}
+                  </Link>
+                </td>
+                <td className={styles.num}>
+                  {value == null
+                    ? <span className={styles.noData}>Not published</span>
+                    : `${Math.round(Number(value))}${metric.unit}`}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
 export function PlaceView({ detail, phase, englandAverage, neighbours }: Props) {
   const { place, schools, averages } = detail;
-  const metric = phase === 'secondary' ? 'attainment_8_score' : 'rwm_expected_pct';
-  const local = averages[metric];
+  const local = averages[METRICS[phase ?? 'primary'].key];
   const phaseWord = phase === 'secondary' ? 'Secondary schools'
     : phase === 'primary' ? 'Primary schools' : 'Schools';
   const graded = OFSTED_LABELS
     .map(([grade, label]) => [label, schools.filter((s) => s.ofsted_grade === grade).length] as const)
     .filter(([, n]) => n > 0);
 
-  // ItemList tells Google this page is a ranked set rather than prose;
-  // BreadcrumbList puts the place in a hierarchy. Capped at 20 because that
-  // is what the page shows above the fold and what the markup should mirror.
+  /*
+   * An unphased page holds both primaries and secondaries, and they are
+   * scored on different measures — a percentage and a 0-90 score. Showing one
+   * column for both left 30% of rows blank on /schools/brentwood and put two
+   * incomparable scales in one column when it did not.
+   *
+   * So the phases get a table each. A blank cell inside one now means the
+   * school genuinely has no published result, which is worth saying.
+   */
+  const groups: Array<[PhaseKey, School[]]> = phase
+    ? [[phase, schools]]
+    : (['primary', 'secondary'] as PhaseKey[])
+        .map((p) => [p, schools.filter((s) => isPhase(s, p))] as [PhaseKey, School[]])
+        .filter(([, list]) => list.length > 0);
+
   const jsonLd = {
     '@context': 'https://schema.org',
     '@graph': [
@@ -60,8 +143,7 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
       {
         '@type': 'BreadcrumbList',
         itemListElement: [
-          { '@type': 'ListItem', position: 1, name: 'Schools',
-            item: absoluteUrl('/') },
+          { '@type': 'ListItem', position: 1, name: 'Schools', item: absoluteUrl('/') },
           { '@type': 'ListItem', position: 2, name: place.name },
         ],
       },
@@ -74,6 +156,7 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
+
       <header className={styles.header}>
         <h1>{phaseWord} in {place.name}</h1>
         <p className={styles.summary}>
@@ -81,7 +164,8 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
           {place.parent_authority && (
             <>
               {' · '}
-              <Link href={`/schools/authority/${authoritySlug(place.parent_authority)}`}>
+              <Link href={`/schools/authority/${authoritySlug(place.parent_authority)}`}
+                className={styles.inlineLink}>
                 {place.parent_authority}
               </Link>
             </>
@@ -92,7 +176,7 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
       {!phase && (place.phases ?? []).length > 0 && (
         <nav className={styles.phaseLinks} aria-label="By phase">
           {(place.phases ?? []).map((ph) => (
-            <Link key={ph} href={`/schools/${place.slug}/${ph}`}>
+            <Link key={ph} href={`/schools/${place.slug}/${ph}`} className={styles.phaseLink}>
               {ph === 'secondary' ? 'Secondary schools' : 'Primary schools'} in {place.name}
             </Link>
           ))}
@@ -114,28 +198,17 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
         </ul>
       )}
 
-      <div className={styles.tableWrap}>
-        <table className={styles.table}>
-          <thead>
-            <tr>
-              <th>School</th>
-              <th>{phase === 'secondary' ? 'Attainment 8' : 'RWM expected'}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {schools.map((s) => (
-              <tr key={s.urn}>
-                <td>
-                  <Link href={schoolUrl(s.urn, s.school_name)}>{s.school_name}</Link>
-                </td>
-                <td className={styles.num}>
-                  {s[metric] == null ? '—' : Math.round(Number(s[metric]))}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+      {groups.map(([p, list]) => (
+        <section key={p} className={styles.group}>
+          {groups.length > 1 && (
+            <h2 className={styles.groupHeading}>
+              {p === 'secondary' ? 'Secondary schools' : 'Primary schools'}
+              <span className={styles.groupCount}>{list.length}</span>
+            </h2>
+          )}
+          <SchoolTable schools={list} phase={p} />
+        </section>
+      ))}
 
       {neighbours.length > 0 && (
         <nav className={styles.neighbours} aria-label="Nearby places">
@@ -143,7 +216,7 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
           <ul>
             {neighbours.map((n) => (
               <li key={n.kind + n.slug}>
-                <Link href={placeUrl(n.kind, n.slug)}>{n.name}</Link>
+                <Link href={placeUrl(n.kind, n.slug)} className={styles.inlineLink}>{n.name}</Link>
               </li>
             ))}
           </ul>