# Phase 2E — Routes + Pages

> **Parent plan:** `2026-04-14-phase-2-online-board-master.md` section 2E
>
> **Depends on:** 2A (UI adapter), 2B (URL serializer), 2C (API hooks), 2D (SignalR wiring)
>
> **Scope:** 6 route pages under `src/routes/[lang]/onlineboard/`, 3 feature-specific components in `src/features/online-board/components/`, barrel export updates, MF expose update.

---

## Task inventory

### T1 — Shared `OnlineBoardSearchPage` component

**File:** `src/features/online-board/components/OnlineBoardSearchPage.tsx`

Shared component composed by all 4 search pages (flight, departure, arrival, route). Accepts parsed URL params, converts to `SearchFlightsParams`, wires `useOnlineBoard` + `useLiveBoardSearch` + `useCalendarDays`, renders `FlightList` + `ConnectionStatusBadge` (inline). Provides `useNavigate` callbacks for date changes and flight detail links.

**Test:** `src/features/online-board/components/OnlineBoardSearchPage.test.tsx` — renders with mock provider, verifies `FlightList` presence and navigation wiring.

### T2 — `OnlineBoardStartPage` component

**File:** `src/features/online-board/components/OnlineBoardStartPage.tsx`

Start page with plain HTML search form: radio buttons for search mode (flight/departure/arrival/route), text inputs for flight number / airport codes, date input. Submits via `useNavigate` to the correct search URL using `buildOnlineBoardUrl`.

**Test:** `src/features/online-board/components/OnlineBoardStartPage.test.tsx`

### T3 — `OnlineBoardDetailsPage` component

**File:** `src/features/online-board/components/OnlineBoardDetailsPage.tsx`

Flight details page. Accepts `IParsedFlightId`, wires `useFlightDetails` + `useLiveFlightDetails`, renders flight info (legs, stations, times) using FlightCard + inline detail sections.

**Test:** `src/features/online-board/components/OnlineBoardDetailsPage.test.tsx`

### T4 — Start page route

**File:** `src/routes/[lang]/onlineboard/page.tsx`

Renders `OnlineBoardStartPage`. No API calls. Wraps in `SeoHead` with basic title.

### T5 — Flight search route

**File:** `src/routes/[lang]/onlineboard/flight/[params]/page.tsx`

Parses URL via `parseFlightUrlParams`, renders `OnlineBoardSearchPage` with `type: "flight"`.

### T6 — Departure search route

**File:** `src/routes/[lang]/onlineboard/departure/[params]/page.tsx`

Parses URL via `parseStationUrlParams`, renders `OnlineBoardSearchPage` with `type: "departure"`.

### T7 — Arrival search route

**File:** `src/routes/[lang]/onlineboard/arrival/[params]/page.tsx`

Parses URL via `parseStationUrlParams`, renders `OnlineBoardSearchPage` with `type: "arrival"`.

### T8 — Route search route

**File:** `src/routes/[lang]/onlineboard/route/[params]/page.tsx`

Parses URL via `parseRouteUrlParams`, renders `OnlineBoardSearchPage` with `type: "route"`.

### T9 — Flight details route

**File:** `src/routes/[lang]/onlineboard/[params]/page.tsx`

Parses URL via `parseFlightUrlParams`, renders `OnlineBoardDetailsPage`.

### T10 — Update feature barrel

**File:** `src/features/online-board/index.ts`

Add exports for `OnlineBoardStartPage`, `OnlineBoardSearchPage`, `OnlineBoardDetailsPage`.

### T11 — Update MF expose

**File:** `src/mf/expose/OnlineBoard.tsx`

Replace stub with `React.lazy` + `Suspense` loading `OnlineBoardStartPage` from the feature barrel.

### T12 — Verification

Run `pnpm typecheck && pnpm lint && pnpm test && pnpm build:standalone`.

---

## Execution order

T1 → T2 → T3 → T4,T5,T6,T7,T8,T9 (parallel) → T10 → T11 → T12

## Commit plan

1. Plan file (this document)
2. Feature components (T1 + T2 + T3 + tests)
3. Route pages (T4-T9)
4. Barrel + MF expose updates (T10 + T11) + verification
