Add 'Дата рейса' caption to DayTabs mobile dropdown on details page

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>
   );
 };

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;
   }
 }

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>
   );

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"
           />
         }
       >