feat(filters): move phase filter out of advanced section to always-visible position

Phase is a common filter (primary vs secondary) so it now appears
between the search form and the Advanced filters toggle rather than
being hidden inside the collapsible section.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

nextjs-app/components/FilterBar.module.css

@@ -159,6 +159,27 @@
   cursor: pointer;
 }
 
+/* ── Phase filter (always visible) ──────────────────── */
+.phaseFilterRow {
+  margin-top: 0.75rem;
+}
+
+.phaseSelect {
+  padding: 0.5rem 0.875rem;
+  font-size: 0.9rem;
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 6px;
+  background: var(--bg-card, white);
+  cursor: pointer;
+  outline: none;
+  color: var(--text-primary, #1a1612);
+  min-width: 160px;
+}
+
+.phaseSelect:focus {
+  border-color: var(--accent-coral, #e07256);
+}
+
 /* ── Advanced filters toggle ─────────────────────────── */
 .advancedSection {
   margin-top: 0.75rem;

nextjs-app/components/FilterBar.tsx

@@ -33,8 +33,8 @@ export function FilterBar({ filters, isHero, resultFilters }: FilterBarProps) {
   const currentAdmissionsPolicy = searchParams.get('admissions_policy') || '';
   const currentHasSixthForm = searchParams.get('has_sixth_form') || '';
 
-  // Count active dropdown filters (not search/postcode)
+  // Count active dropdown filters (not search/postcode, not phase since it's always visible)
-  const activeDropdownFilters = [currentLA, currentType, currentPhase, currentGender, currentAdmissionsPolicy, currentHasSixthForm].filter(Boolean);
+  const activeDropdownFilters = [currentLA, currentType, currentGender, currentAdmissionsPolicy, currentHasSixthForm].filter(Boolean);
   const hasActiveDropdownFilters = activeDropdownFilters.length > 0;
   const [filtersOpen, setFiltersOpen] = useState(hasActiveDropdownFilters);
 
@@ -147,6 +147,24 @@ export function FilterBar({ filters, isHero, resultFilters }: FilterBarProps) {
       </form>
 
       {!isHero && (
+        <>
+          {/* Phase filter — always visible on results page */}
+          {phaseOptions.length > 0 && (
+            <div className={styles.phaseFilterRow}>
+              <select
+                value={currentPhase}
+                onChange={(e) => handleFilterChange('phase', e.target.value)}
+                className={styles.phaseSelect}
+                disabled={isPending}
+              >
+                <option value="">All Phases</option>
+                {phaseOptions.map((p) => (
+                  <option key={p} value={p.toLowerCase()}>{p}</option>
+                ))}
+              </select>
+            </div>
+          )}
+
           <div className={styles.advancedSection}>
           <button
             type="button"
@@ -183,20 +201,6 @@ export function FilterBar({ filters, isHero, resultFilters }: FilterBarProps) {
                 ))}
               </select>
 
-              {phaseOptions.length > 0 && (
-                <select
-                  value={currentPhase}
-                  onChange={(e) => handleFilterChange('phase', e.target.value)}
-                  className={styles.filterSelect}
-                  disabled={isPending}
-                >
-                  <option value="">All Phases</option>
-                  {phaseOptions.map((p) => (
-                    <option key={p} value={p.toLowerCase()}>{p}</option>
-                  ))}
-                </select>
-              )}
-
               {isSecondaryMode && (
                 <>
                   {genderOptions.length > 0 && (