# Visual Parity Report — Angular vs React

_Captured 2026-04-17, SVO→LED route, SU 6805 details page, viewport 1440×900._

Screenshots (checked in under `/` root):
- `parity-angular-search.png`, `parity-react-search.png`
- `parity-angular-details.png`, `parity-react-details.png`

---

## Search results (`/ru/onlineboard/route/SVO-LED-20260417`)

| Angular | React (pre-fix) | Notes |
| --- | --- | --- |
| Flight list sits on a white card with drop shadow (`section.frame`) | Flight rows rendered on the dark-blue page background → text barely readable | **fixed**: wrap `<FlightList>` in `<section class="frame">` |
| Calendar strip uses paged weekday tabs: `16 апр.` / `17 апреля` (active, bold) / `18 апр.` … with `‹ ›` arrows | Thin strip of naked numbered buttons wrapping across two rows (`16 17 18 … 1 2 3 …`) | **fixed**: replace inline `.calendar-day` with existing `<DayTabs>` component |
| Each row is clickable; hovering highlights the row | Rows are not interactive; navigation to details only via off-screen test-only buttons | **fixed**: `FlightCard` accepts `onClick` and renders with `role="button"` + hover highlight |
| Row shows: flight # · operator logo + name · scheduled time (big) · actual time struck-through in orange on delay · city + terminal link · status with plane icon · arrival mirror · expand arrow | Row shows: flight # · scheduled time · city name · status text. Missing operator logo, terminal link, actual-time strike-through, delay arrow glyph, expanded panel | open — operator logo, terminal link, expanded-state layout still pending |
| Filter sidebar has collapsible Route accordion + time slider inside; "Sheremetyevo" populated in departure input | Filter sidebar shows `SVO` / `LED` codes and sliders; labels don't render the city name | open — filter should pre-populate with the airport display name |
| Footer note `* Время в системе - МЕСТНОЕ.` | Not rendered | open |

## Details page (`/ru/onlineboard/SU6805-20260417`)

| Angular | React (pre-fix) | Notes |
| --- | --- | --- |
| All right-hand content on a single white card | Content directly on dark blue — text invisible | **fixed**: wrap in `<section class="frame">` |
| `DayTabs` used at the top of the card (already present in React) | Same component, but on dark bg | **fixed** by moving into frame |
| React console warning: `Each child in a list should have a unique "key" prop. Check the render method of FlightLegs` | — | **fixed**: key now falls back to the array index when `leg.index` is absent |
| Header shows: flight # · airline name · big `РОССИЯ` logo · share button · last-update timestamp | React header currently shows only flight # + share + last-update | open — needs operator name/logo treatment in `BoardDetailsHeader` |
| Route row: departure city + plane + status word (`Запланирован`) + arrival city; "+1" day indicator sits above the arrival time | React leg row renders raw station codes, city names, times stacked vertically | open — `FlightLegs` block needs to be rewritten as a horizontal route strip like Angular's `flight-board-details` |
| Accordion first section (`Детали рейса`) open by default with Регистрация / Посадка rows visible; others (Борт, Питание, Услуги, Деплайнинг) below | 5 accordions all rendered, all collapsed by default; no `Детали рейса` wrapper | open — open primary section by default, hide `Share` button (Angular hides it on board view) |
| `Борт` (aircraft) panel has a table with columns: Название / Количество мест / Эконом / Бизнес / Предыдущий рейс | React's `AircraftPanel` renders the same fields but as a list, not a table | open |

---

## Priority fixes shipped in this commit

1. **White card** (`section.frame`) around flight list + details body — the single biggest readability issue.
2. **`DayTabs` calendar strip** replaces the inline number-only strip on the search page.
3. **Clickable `FlightCard`** with keyboard support and hover highlight, so users don't have to use the off-screen test button.
4. **Fixed React key warning** in the `FlightLegs` renderer.

## Deferred (not shipped)

- Operator logo + airline name on every row and in the details header.
- Delay arrow + `+1` day-change indicators in Angular's layout.
- Inline per-row expansion with Registration/Boarding/Deboarding mini-grid.
- `Борт` aircraft panel as a table.
- Pre-populate the filter with the selected city's display name.
- Hide `Share` button on the board details page (Angular only shows it on schedule details).

These need targeted, per-component changes against the Angular HTML templates referenced in `ClientApp/src/app/modules/pages/board/` and `ClientApp/src/app/modules/pages/details/`. They don't affect readability, so they're listed for a follow-up pass.