feat(search): school type groups and a faith filter

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

nextjs-app/components/FilterBar.tsx

@@ -59,6 +59,7 @@ function SelectShell({
 const FILTER_KEYS = [
   "phase",
   "school_type",
+  "faith",
   "local_authority",
   "gender",
   "has_sixth_form",
@@ -186,12 +187,14 @@ export function FilterBar({
   const currentGender = searchParams.get("gender") || "";
   const currentAdmissionsPolicy = searchParams.get("admissions_policy") || "";
   const currentHasSixthForm = searchParams.get("has_sixth_form") || "";
+  const currentFaith = searchParams.get("faith") || "";
 
   // Count the filters behind "More filters". Search, postcode, distance, phase
   // and school type each have their own control in the toolbar, so they are
   // visible without opening anything and are not counted here.
   const activeDropdownFilters = [
     currentLA,
+    currentFaith,
     currentGender,
     currentAdmissionsPolicy,
     currentHasSixthForm,
@@ -318,6 +321,7 @@ export function FilterBar({
       currentPhase && `phase=${currentPhase}`,
       currentLA && `la=${currentLA}`,
       currentType && `type=${currentType}`,
+      currentFaith && `faith=${currentFaith}`,
       currentGender && `gender=${currentGender}`,
       currentAdmissionsPolicy && `admissions=${currentAdmissionsPolicy}`,
       currentHasSixthForm && `sixth_form=${currentHasSixthForm}`,
@@ -370,6 +374,7 @@ export function FilterBar({
     currentSearch ||
     currentLA ||
     currentType ||
+    currentFaith ||
     currentPhase ||
     currentPostcode ||
     currentGender ||
@@ -387,7 +392,9 @@ export function FilterBar({
    */
   const laOptions =
     resultFilters?.local_authorities ?? filters.local_authorities;
-  const typeOptions = filters.school_types;
+  // Six groups a parent recognises, not GIAS's 34 establishment types.
+  const typeOptions = filters.school_type_groups ?? [];
+  const faithOptions = filters.faiths ?? [];
   const phaseOptions = filters.phases ?? [];
   const genderOptions = filters.genders ?? [];
   const admissionsPolicyOptions = filters.admissions_policies ?? [];
@@ -423,6 +430,7 @@ export function FilterBar({
   const values: Record<FilterKey, string> = {
     phase: currentPhase,
     school_type: currentType,
+    faith: currentFaith,
     local_authority: currentLA,
     gender: currentGender,
     has_sixth_form: currentHasSixthForm,
@@ -432,6 +440,11 @@ export function FilterBar({
     if (key === "has_sixth_form") {
       return value === "yes" ? "With sixth form" : "Without sixth form";
     }
+    // An old link may carry a raw GIAS type, which reads as itself.
+    const labelled = { school_type: typeOptions, faith: faithOptions }[
+      key as "school_type" | "faith"
+    ];
+    if (labelled) return labelled.find((o) => o.value === value)?.label ?? value;
     // Phase, gender and admissions values are lowercased option names; the
     // rest are the names themselves.
     const named: Partial<Record<FilterKey, string[]>> = {
@@ -487,9 +500,9 @@ export function FilterBar({
         disabled={isPending && look !== "sheet"}
       >
         <option value="">Any school type</option>
-        {typeOptions.map((type) => (
-          <option key={type} value={type}>
-            {type}
+        {typeOptions.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
           </option>
         ))}
       </select>
@@ -515,6 +528,25 @@ export function FilterBar({
     </SelectShell>
   );
 
+  const faithSelect = (look: Look) => (
+    <SelectShell wide>
+      <select
+        value={currentFaith}
+        onChange={(e) => handleFilterChange("faith", e.target.value)}
+        className={selectClass(look, currentFaith)}
+        aria-label="Faith"
+        disabled={isPending && look !== "sheet"}
+      >
+        <option value="">Any faith or none</option>
+        {faithOptions.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </SelectShell>
+  );
+
   const genderSelect = (look: Look) => (
     <SelectShell wide>
       <select
@@ -764,7 +796,7 @@ export function FilterBar({
 
             {phaseOptions.length > 0 && phaseSelect("pill")}
 
-            {typeSelect("pill")}
+            {typeOptions.length > 0 && typeSelect("pill")}
 
             <button
               type="button"
@@ -797,6 +829,7 @@ export function FilterBar({
           {filtersOpen && (
             <div className={styles.filters}>
               {laSelect("panel")}
+              {faithOptions.length > 0 && faithSelect("panel")}
 
               {isSecondaryMode && (
                 <>
@@ -869,7 +902,12 @@ export function FilterBar({
             {phaseOptions.length > 0 && (
               <SheetField label="Phase">{phaseSelect("sheet")}</SheetField>
             )}
-            <SheetField label="School type">{typeSelect("sheet")}</SheetField>
+            {typeOptions.length > 0 && (
+              <SheetField label="School type">{typeSelect("sheet")}</SheetField>
+            )}
+            {faithOptions.length > 0 && (
+              <SheetField label="Faith">{faithSelect("sheet")}</SheetField>
+            )}
             <SheetField label="Local authority">{laSelect("sheet")}</SheetField>
             {isSecondaryMode && (
               <>