From b5759215b150b3cfded68562f43d416a4246857e Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Sat, 18 Apr 2026 21:32:42 +0300
Subject: [PATCH] =?UTF-8?q?Replace=20PrimeReact=20Accordion=20on=20=D0=A0?=
 =?UTF-8?q?=D0=B0=D1=81=D0=BF=D0=B8=D1=81=D0=B0=D0=BD=D0=B8=D0=B5=20=D1=80?=
 =?UTF-8?q?=D0=B5=D0=B9=D1=81=D0=B0=20with=20matching=20custom=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Angular keeps the 'Расписание рейса' collapse chevron on the right of the
header and styles the header like the Детали рейса row above it. React
was rendering the PrimeReact chevron on the LEFT with its own pill style.
Swap to the same lightweight accordion markup the details block uses so
both collapses look identical.
---
 .../FlightSchedule/FlightSchedule.scss        |  28 ++++-
 .../FlightSchedule/FlightSchedule.tsx         | 111 ++++++++++--------
 2 files changed, 91 insertions(+), 48 deletions(-)

diff --git a/src/features/online-board/components/FlightSchedule/FlightSchedule.scss b/src/features/online-board/components/FlightSchedule/FlightSchedule.scss
index 07341ad4..ffab2b17 100644
--- a/src/features/online-board/components/FlightSchedule/FlightSchedule.scss
+++ b/src/features/online-board/components/FlightSchedule/FlightSchedule.scss
@@ -3,8 +3,32 @@
   border-radius: 8px;
   padding: 0 24px;
 
-  .p-accordion-content {
-    padding: 12px 0 16px;
+  &__accordion {
+    border-top: 1px solid #e0e6f0;
+  }
+
+  &__header {
+    padding: 16px 0;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 18px;
+    color: #222;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &:hover {
+      color: #2457ff;
+    }
+  }
+
+  &__chevron {
+    font-size: 12px;
+    color: #222;
+  }
+
+  &__content {
+    padding: 4px 0 16px;
   }
 
   &__body {
diff --git a/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx b/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx
index f31c578e..d5622415 100644
--- a/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx
+++ b/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx
@@ -1,5 +1,4 @@
-import type { FC } from "react";
-import { Accordion, AccordionTab } from "primereact/accordion";
+import { type FC, useState } from "react";
 import { useTranslation } from "@/i18n/provider.js";
 import type { ISimpleFlight } from "../../types.js";
 import { DaysOfWeekStrip } from "./DaysOfWeekStrip.js";
@@ -32,6 +31,7 @@ function scheduledDurationMinutes(depIso: string, arrIso: string): number {
 
 export const FlightSchedule: FC<FlightScheduleProps> = ({ flight }) => {
   const { t } = useTranslation();
+  const [collapsed, setCollapsed] = useState(false);
 
   const firstLeg = flight.routeType === "Direct" ? flight.leg : flight.legs[0];
   const lastLeg =
@@ -49,55 +49,74 @@ export const FlightSchedule: FC<FlightScheduleProps> = ({ flight }) => {
 
   return (
     <section className="flight-schedule" data-testid="flight-schedule">
-      <Accordion multiple={false} activeIndex={0}>
-        <AccordionTab header={t("SHARED.SCHEDULE-FLIGHT")}>
-          {/* Angular parity: three side-by-side columns
-              (Вылет по расписанию | Прилет по расписанию | Время в пути). */}
-          <div className="flight-schedule__body">
-            <div className="flight-schedule__col">
-              <div className="flight-schedule__label">{t("SHARED.DEPARTURE-SCHEDULED")}</div>
-              <div className="flight-schedule__value">
-                {formatLocalTime(depLocal)}
-                {formatUtcOffset(depLocal) && (
-                  <span className="flight-schedule__offset">
-                    {formatUtcOffset(depLocal)}
-                  </span>
-                )}
+      <div className={`flight-schedule__accordion${collapsed ? "" : " flight-schedule__accordion--open"}`}>
+        <div
+          className="flight-schedule__header"
+          role="button"
+          tabIndex={0}
+          onClick={() => setCollapsed((v) => !v)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setCollapsed((v) => !v);
+            }
+          }}
+        >
+          <span>{t("SHARED.SCHEDULE-FLIGHT")}</span>
+          <span aria-hidden="true" className="flight-schedule__chevron">
+            {collapsed ? "\u25BC" : "\u25B2"}
+          </span>
+        </div>
+        {!collapsed && (
+          <div className="flight-schedule__content">
+            {/* Angular parity: three side-by-side columns
+                (Вылет по расписанию | Прилет по расписанию | Время в пути). */}
+            <div className="flight-schedule__body">
+              <div className="flight-schedule__col">
+                <div className="flight-schedule__label">{t("SHARED.DEPARTURE-SCHEDULED")}</div>
+                <div className="flight-schedule__value">
+                  {formatLocalTime(depLocal)}
+                  {formatUtcOffset(depLocal) && (
+                    <span className="flight-schedule__offset">
+                      {formatUtcOffset(depLocal)}
+                    </span>
+                  )}
+                </div>
+              </div>
+              <div className="flight-schedule__col">
+                <div className="flight-schedule__label">{t("SHARED.ARRIVAL-SCHEDULED")}</div>
+                <div className="flight-schedule__value">
+                  {formatLocalTime(arrLocal)}
+                  {formatUtcOffset(arrLocal) && (
+                    <span className="flight-schedule__offset">
+                      {formatUtcOffset(arrLocal)}
+                    </span>
+                  )}
+                </div>
+              </div>
+              <div className="flight-schedule__col">
+                <div className="flight-schedule__label">{t("SHARED.PATH-TIME")}</div>
+                <div className="flight-schedule__value">
+                  {formatDuration(
+                    scheduledDurationMinutes(depLocal, arrLocal),
+                    "ru",
+                  )}
+                </div>
               </div>
             </div>
-            <div className="flight-schedule__col">
-              <div className="flight-schedule__label">{t("SHARED.ARRIVAL-SCHEDULED")}</div>
-              <div className="flight-schedule__value">
-                {formatLocalTime(arrLocal)}
-                {formatUtcOffset(arrLocal) && (
-                  <span className="flight-schedule__offset">
-                    {formatUtcOffset(arrLocal)}
-                  </span>
-                )}
-              </div>
-            </div>
-            <div className="flight-schedule__col">
-              <div className="flight-schedule__label">{t("SHARED.PATH-TIME")}</div>
-              <div className="flight-schedule__value">
-                {formatDuration(
-                  scheduledDurationMinutes(depLocal, arrLocal),
-                  "ru",
-                )}
-              </div>
-            </div>
-          </div>
 
-          <div className="flight-schedule__days-section">
-            <div className="flight-schedule__section-title">
-              {t("SHARED.DAYS-EXECUTE-FLIGHT")}
-            </div>
-            <DaysOfWeekStrip flightBitString={firstLeg.daysOfWeek.flight} />
-            <div className="flight-schedule__note" data-testid="flight-schedule-note">
-              {note}
+            <div className="flight-schedule__days-section">
+              <div className="flight-schedule__section-title">
+                {t("SHARED.DAYS-EXECUTE-FLIGHT")}
+              </div>
+              <DaysOfWeekStrip flightBitString={firstLeg.daysOfWeek.flight} />
+              <div className="flight-schedule__note" data-testid="flight-schedule-note">
+                {note}
+              </div>
             </div>
           </div>
-        </AccordionTab>
-      </Accordion>
+        )}
+      </div>
     </section>
   );
 };