From bc15c83d22918bd610d8705d563527ba104d6207 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 01:54:22 +0300
Subject: [PATCH] =?UTF-8?q?Add=20'=D0=94=D0=B0=D1=82=D0=B0=20=D1=80=D0=B5?=
 =?UTF-8?q?=D0=B9=D1=81=D0=B0'=20caption=20to=20DayTabs=20mobile=20dropdow?=
 =?UTF-8?q?n=20on=20details=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DayTabs/DaySelect.tsx          | 38 +++++++++++++------
 .../components/DayTabs/DayTabs.scss           | 19 ++++++++++
 .../components/DayTabs/DayTabs.tsx            |  8 ++++
 .../components/OnlineBoardDetailsPage.tsx     |  1 +
 4 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/features/online-board/components/DayTabs/DaySelect.tsx b/src/features/online-board/components/DayTabs/DaySelect.tsx
index 1ee6b55c..f5ea1cf5 100644
--- a/src/features/online-board/components/DayTabs/DaySelect.tsx
+++ b/src/features/online-board/components/DayTabs/DaySelect.tsx
@@ -1,4 +1,5 @@
 import type { FC } from "react";
+import { useTranslation } from "@/i18n/provider.js";
 import { parseYyyymmdd } from "./dateRange.js";
 import "./DayTabs.scss";
 
@@ -7,6 +8,12 @@ export interface DaySelectProps {
   availableDates: string[];
   locale: string;
   onNavigate: (date: string) => void;
+  /**
+   * Optional caption shown above the dropdown (e.g. 'Дата рейса' on the
+   * flight details page). Angular renders this via day-tabs' `caption`
+   * input. Omit for search pages where no caption is wanted.
+   */
+  captionKey?: string;
 }
 
 function formatLabel(date: string, locale: string): string {
@@ -23,23 +30,30 @@ export const DaySelect: FC<DaySelectProps> = ({
   availableDates,
   locale,
   onNavigate,
+  captionKey,
 }) => {
+  const { t } = useTranslation();
   // No data → don't render an empty dropdown that just adds visual
   // noise on mobile. Angular hides the date picker when the calendar
   // API hasn't returned any usable days for this view.
   if (availableDates.length === 0) return null;
   return (
-    <select
-      className="day-select"
-      data-testid="day-select"
-      value={selectedDate}
-      onChange={(e) => onNavigate(e.target.value)}
-    >
-      {availableDates.map((date) => (
-        <option key={date} value={date}>
-          {formatLabel(date, locale)}
-        </option>
-      ))}
-    </select>
+    <div className="day-select-wrap">
+      {captionKey && (
+        <label className="day-select-wrap__caption">{t(captionKey)}</label>
+      )}
+      <select
+        className="day-select"
+        data-testid="day-select"
+        value={selectedDate}
+        onChange={(e) => onNavigate(e.target.value)}
+      >
+        {availableDates.map((date) => (
+          <option key={date} value={date}>
+            {formatLabel(date, locale)}
+          </option>
+        ))}
+      </select>
+    </div>
   );
 };
diff --git a/src/features/online-board/components/DayTabs/DayTabs.scss b/src/features/online-board/components/DayTabs/DayTabs.scss
index 5ca8b122..f0ef1016 100644
--- a/src/features/online-board/components/DayTabs/DayTabs.scss
+++ b/src/features/online-board/components/DayTabs/DayTabs.scss
@@ -82,6 +82,24 @@
   }
 }
 
+.day-select-wrap {
+  display: none;
+
+  @media (max-width: 768px) {
+    display: block;
+    background: #fff;
+    padding: 12px 16px;
+    border-radius: 8px;
+  }
+
+  &__caption {
+    display: block;
+    font-size: 12px;
+    color: #657282;
+    margin-bottom: 4px;
+  }
+}
+
 .day-select {
   display: none;
 
@@ -92,5 +110,6 @@
     border-radius: 8px;
     background: #fff;
     border: 1px solid #d0dae5;
+    font-size: 14px;
   }
 }
diff --git a/src/features/online-board/components/DayTabs/DayTabs.tsx b/src/features/online-board/components/DayTabs/DayTabs.tsx
index c24f7830..b877991b 100644
--- a/src/features/online-board/components/DayTabs/DayTabs.tsx
+++ b/src/features/online-board/components/DayTabs/DayTabs.tsx
@@ -14,6 +14,12 @@ export interface DayTabsProps {
   daysAfter: number;
   locale: string;
   onNavigate: (date: string) => void;
+  /**
+   * Caption rendered above the mobile dropdown (desktop ignores it).
+   * Pass 'SHARED.FLIGHT_DATE' on the details page to mirror Angular's
+   * "Дата рейса" label.
+   */
+  mobileCaptionKey?: string;
 }
 
 export const DayTabs: FC<DayTabsProps> = ({
@@ -23,6 +29,7 @@ export const DayTabs: FC<DayTabsProps> = ({
   daysAfter,
   locale,
   onNavigate,
+  mobileCaptionKey,
 }) => {
   const { t } = useTranslation();
   const allDates = useMemo(
@@ -95,6 +102,7 @@ export const DayTabs: FC<DayTabsProps> = ({
         availableDates={availableDates}
         locale={locale}
         onNavigate={onNavigate}
+        {...(mobileCaptionKey ? { captionKey: mobileCaptionKey } : {})}
       />
     </div>
   );
diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.tsx b/src/features/online-board/components/OnlineBoardDetailsPage.tsx
index 4bd71603..7464aa15 100644
--- a/src/features/online-board/components/OnlineBoardDetailsPage.tsx
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.tsx
@@ -533,6 +533,7 @@ export const OnlineBoardDetailsPage: FC<OnlineBoardDetailsPageProps> = ({
             daysAfter={onlineboardSearchTo}
             locale={locale}
             onNavigate={handleNavigateDate}
+            mobileCaptionKey="SHARED.FLIGHT_DATE"
           />
         }
       >