From 51f997e642909e27b90380796c4b200075403013 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Sat, 18 Apr 2026 10:26:24 +0300
Subject: [PATCH] Match Angular layout in flights-map filter sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add the 'Найдите свой маршрут' heading (uses the existing
  FLIGHTS-MAP.ROUTE key, previously unused).
- Reorder the fields to Angular's order: cities → info → toggles →
  date (date was previously stuck in the middle).
- Replace the three native checkboxes with styled pill toggles +
  sliding knobs — matches p-inputswitch used in the Angular filter.
- Add 'ДД.ММ.ГГГГ' placeholder to the date input so the empty state
  reads the same as Angular.
---
 .../components/FlightsMapFilter.tsx           | 90 +++++++++++--------
 .../components/FlightsMapStartPage.scss       | 62 +++++++++++--
 2 files changed, 106 insertions(+), 46 deletions(-)

diff --git a/src/features/flights-map/components/FlightsMapFilter.tsx b/src/features/flights-map/components/FlightsMapFilter.tsx
index cf960fd8..f818a0b0 100644
--- a/src/features/flights-map/components/FlightsMapFilter.tsx
+++ b/src/features/flights-map/components/FlightsMapFilter.tsx
@@ -146,6 +146,8 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
 
   return (
     <div className="flights-map-filter" data-testid="flights-map-filter">
+      <h3 className="flights-map-filter__title">{t("FLIGHTS-MAP.ROUTE")}</h3>
+
       <CityAutocomplete
         label={t("SHARED.DEPARTURE_CITY")}
         placeholder={t("FLIGHTS-MAP.FILTER_DEPARTURE_PLACEHOLDER")}
@@ -183,6 +185,54 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
         testIdPrefix="fm-arrival"
       />
 
+      <div className="flights-map-filter__info">
+        <p>{t("FLIGHTS-MAP.FILTER_INFO")}</p>
+      </div>
+
+      <div className="flights-map-filter__toggles">
+        <label
+          className={`flights-map-filter__toggle${!value.departure ? " flights-map-filter__toggle--disabled" : ""}`}
+        >
+          <input
+            type="checkbox"
+            checked={value.domestic}
+            onChange={handleDomesticChange}
+            disabled={!value.departure}
+            data-testid="fm-domestic-toggle"
+          />
+          <span className="flights-map-filter__switch" aria-hidden="true" />
+          {t("FLIGHTS-MAP.DOMESTIC_FLIGHTS")}
+        </label>
+
+        <label
+          className={`flights-map-filter__toggle${!value.departure ? " flights-map-filter__toggle--disabled" : ""}`}
+        >
+          <input
+            type="checkbox"
+            checked={value.international}
+            onChange={handleInternationalChange}
+            disabled={!value.departure}
+            data-testid="fm-international-toggle"
+          />
+          <span className="flights-map-filter__switch" aria-hidden="true" />
+          {t("FLIGHTS-MAP.INTERNATIONAL_FLIGHTS")}
+        </label>
+
+        <label
+          className={`flights-map-filter__toggle${!(value.departure && value.arrival) ? " flights-map-filter__toggle--disabled" : ""}`}
+        >
+          <input
+            type="checkbox"
+            checked={value.connections}
+            onChange={handleConnectionsChange}
+            disabled={!(value.departure && value.arrival)}
+            data-testid="fm-connections-toggle"
+          />
+          <span className="flights-map-filter__switch" aria-hidden="true" />
+          {t("FLIGHTS-MAP.CONNECTING_FLIGHTS")}
+        </label>
+      </div>
+
       <div className="flights-map-filter__field">
         <label htmlFor="fm-date">{t("SHARED.FLIGHT_DATE")}</label>
         <Calendar
@@ -192,51 +242,13 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
           maxDate={maxDate}
           disabledDates={disabledDates}
           dateFormat="dd.mm.yy"
+          placeholder={t("SHARED.DATE_FORMAT")}
           showIcon
           className="input--filter"
           inputId="fm-date"
           data-testid="fm-date-input"
         />
       </div>
-
-      <div className="flights-map-filter__info">
-        <p>{t("FLIGHTS-MAP.FILTER_INFO")}</p>
-      </div>
-
-      <div className="flights-map-filter__toggles">
-        <label className={!value.departure ? "flights-map-filter__toggle--disabled" : ""}>
-          <input
-            type="checkbox"
-            checked={value.domestic}
-            onChange={handleDomesticChange}
-            disabled={!value.departure}
-            data-testid="fm-domestic-toggle"
-          />
-          {t("FLIGHTS-MAP.DOMESTIC_FLIGHTS")}
-        </label>
-
-        <label className={!value.departure ? "flights-map-filter__toggle--disabled" : ""}>
-          <input
-            type="checkbox"
-            checked={value.international}
-            onChange={handleInternationalChange}
-            disabled={!value.departure}
-            data-testid="fm-international-toggle"
-          />
-          {t("FLIGHTS-MAP.INTERNATIONAL_FLIGHTS")}
-        </label>
-
-        <label className={!(value.departure && value.arrival) ? "flights-map-filter__toggle--disabled" : ""}>
-          <input
-            type="checkbox"
-            checked={value.connections}
-            onChange={handleConnectionsChange}
-            disabled={!(value.departure && value.arrival)}
-            data-testid="fm-connections-toggle"
-          />
-          {t("FLIGHTS-MAP.CONNECTING_FLIGHTS")}
-        </label>
-      </div>
     </div>
   );
 };
diff --git a/src/features/flights-map/components/FlightsMapStartPage.scss b/src/features/flights-map/components/FlightsMapStartPage.scss
index 482fcfb7..a43da352 100644
--- a/src/features/flights-map/components/FlightsMapStartPage.scss
+++ b/src/features/flights-map/components/FlightsMapStartPage.scss
@@ -180,17 +180,65 @@
     }
   }
 
+  &__title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #222;
+    margin: 0 0 vars.$space-s;
+  }
+
   &__toggles {
     display: flex;
     flex-direction: column;
-    gap: vars.$space-s;
+    gap: vars.$space-m;
+    padding: vars.$space-s 0;
+  }
 
-    label {
-      display: flex;
-      align-items: center;
-      gap: vars.$space-s;
-      cursor: pointer;
-      @include fonts.font-small(colors.$gray);
+  // Visual toggle switch matching Angular's p-inputswitch. Hides the
+  // native checkbox and renders a pill + sliding knob via <span>.
+  &__toggle {
+    display: flex;
+    align-items: center;
+    gap: vars.$space-m;
+    cursor: pointer;
+    @include fonts.font-small(colors.$gray);
+
+    input[type="checkbox"] {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  &__switch {
+    display: inline-block;
+    width: 36px;
+    height: 20px;
+    background: #d0d5dd;
+    border-radius: 10px;
+    position: relative;
+    transition: background-color 150ms ease;
+    flex-shrink: 0;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 16px;
+      height: 16px;
+      background: #fff;
+      border-radius: 50%;
+      transition: transform 150ms ease;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  input[type="checkbox"]:checked + &__switch {
+    background: colors.$blue;
+
+    &::before {
+      transform: translateX(16px);
     }
   }