From 848ba484847ebf68c04649182b084e600b20a987 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Wed, 22 Apr 2026 11:03:57 +0300
Subject: [PATCH] Extract SwapCityButton so all 3 filter blocks share the same
 DOM
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

OnlineBoard, Schedule and FlightsMap each inlined their own swap-cities
wrapper — three different class names and, in FlightsMap's case, a different
inline SVG. Angular keeps logic separate per filter (Schedule/FlightsMap
clear validation on swap, OnlineBoard doesn't) but its DOM is identical
across the three. Mirror that: ship a shared <SwapCityButton> that owns
the `.change-container > .button-change > .svg--change-city` markup and
CSS, keep each caller's onClick local.

Also align filter visuals: FlightsMapFilter row gap $space-m → $space-l to
match OnlineBoard/Schedule, and CityAutocomplete label gutter $space-s2 →
$space-m to match Angular's city-autocomplete.component.scss.
---
 .../components/FlightsMapFilter.test.tsx      |  3 ++
 .../components/FlightsMapFilter.tsx           | 32 +++-----------
 .../components/FlightsMapStartPage.scss       | 32 +++-----------
 .../components/OnlineBoardFilter.scss         | 35 ++-------------
 .../components/OnlineBoardFilter.test.tsx     |  3 ++
 .../components/OnlineBoardFilter.tsx          | 18 +++-----
 .../components/OnlineBoardStartPage.test.tsx  |  3 ++
 .../schedule/components/ScheduleFilter.scss   | 23 +---------
 .../components/ScheduleFilter.test.tsx        |  3 ++
 .../schedule/components/ScheduleFilter.tsx    | 19 +++-----
 .../components/ScheduleStartPage.scss         | 34 +--------------
 .../components/ScheduleStartPage.test.tsx     |  3 ++
 .../city-autocomplete/CityAutocomplete.scss   |  4 +-
 src/ui/city-autocomplete/SwapCityButton.scss  | 30 +++++++++++++
 src/ui/city-autocomplete/SwapCityButton.tsx   | 43 +++++++++++++++++++
 src/ui/city-autocomplete/index.ts             |  2 +
 .../online-board/start-page.test.tsx          |  3 ++
 17 files changed, 124 insertions(+), 166 deletions(-)
 create mode 100644 src/ui/city-autocomplete/SwapCityButton.scss
 create mode 100644 src/ui/city-autocomplete/SwapCityButton.tsx

diff --git a/src/features/flights-map/components/FlightsMapFilter.test.tsx b/src/features/flights-map/components/FlightsMapFilter.test.tsx
index 784fc3eb..0fc955d3 100644
--- a/src/features/flights-map/components/FlightsMapFilter.test.tsx
+++ b/src/features/flights-map/components/FlightsMapFilter.test.tsx
@@ -24,6 +24,9 @@ vi.mock("@/ui/city-autocomplete/index.js", () => ({
       placeholder={props["placeholder"] as string}
     />
   ),
+  SwapCityButton: (props: { onClick: () => void; testId?: string }) => (
+    <button type="button" data-testid={props.testId} onClick={props.onClick} />
+  ),
 }));
 
 vi.mock("@/shared/dictionaries/index.js", () => ({
diff --git a/src/features/flights-map/components/FlightsMapFilter.tsx b/src/features/flights-map/components/FlightsMapFilter.tsx
index 570934ee..2f7b60a5 100644
--- a/src/features/flights-map/components/FlightsMapFilter.tsx
+++ b/src/features/flights-map/components/FlightsMapFilter.tsx
@@ -11,7 +11,7 @@ import { type FC, useCallback, useEffect, useMemo, type FormEvent } from "react"
 import { Calendar } from "primereact/calendar";
 import { useTranslation } from "@/i18n/provider.js";
 import { useLocale } from "@/i18n/useLocale.js";
-import { CityAutocomplete } from "@/ui/city-autocomplete/index.js";
+import { CityAutocomplete, SwapCityButton } from "@/ui/city-autocomplete/index.js";
 import { DayQuickPick } from "@/ui/calendar/DayQuickPick.js";
 import { useDictionaries, findCityByCoord } from "@/shared/dictionaries/index.js";
 import {
@@ -185,33 +185,11 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
         testIdPrefix="fm-departure"
       />
 
-      <button
-        type="button"
-        className="flights-map-filter__exchange"
+      <SwapCityButton
         onClick={handleExchange}
-        aria-label={t("SHARED.CITY_CHANGE")}
-        data-testid="fm-exchange-btn"
-      >
-        <svg
-          className="flights-map-filter__exchange-icon"
-          width="12"
-          height="25"
-          viewBox="0 0 12 25"
-          fill="#1b62b4"
-          aria-hidden="true"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M10 21.25H12L9.5 24.25L7 21.25H9V3.25H10V21.25Z"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M2 3.25H0L2.5 0.25L5 3.25H3V21.25H2V3.25Z"
-          />
-        </svg>
-      </button>
+        ariaLabel={t("SHARED.CITY_CHANGE")}
+        testId="fm-exchange-btn"
+      />
 
       <CityAutocomplete
         label={t("SHARED.ARRIVAL_CITY")}
diff --git a/src/features/flights-map/components/FlightsMapStartPage.scss b/src/features/flights-map/components/FlightsMapStartPage.scss
index d7aaf35d..5c763bb2 100644
--- a/src/features/flights-map/components/FlightsMapStartPage.scss
+++ b/src/features/flights-map/components/FlightsMapStartPage.scss
@@ -169,7 +169,9 @@
   padding: vars.$space-xl;
   display: flex;
   flex-direction: column;
-  gap: vars.$space-m;
+  // Match OnlineBoard + Schedule filter row gap ($space-l = 15px) — Angular's
+  // `.filter-content` uses $space-l everywhere.
+  gap: vars.$space-l;
 
   .flights-map-filter-header {
     padding: vars.$space-m 0;
@@ -216,32 +218,8 @@
     }
   }
 
-  // Mirrors Angular's `.change-container .button-change` under
-  // left-accordeon: a 35×40 pill sitting between the two city pickers,
-  // shifted up/down by $space-m so the button overlaps the two inputs
-  // rather than sitting in the vertical gap between them.
-  &__exchange {
-    align-self: center;
-    width: 35px;
-    height: vars.$medium-button-height;
-    margin-top: vars.$space-m;
-    margin-bottom: -(vars.$space-m);
-    background: colors.$white;
-    border: none;
-    box-shadow: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-
-    &:hover { background-color: colors.$white; }
-  }
-
-  &__exchange-icon {
-    width: 12px;
-    height: 25px;
-  }
+  // Swap-cities button moved to shared `SwapCityButton` component —
+  // classes `.change-container` + `.button-change` are now global.
 
   &__info {
     padding: vars.$space-s 0;
diff --git a/src/features/online-board/components/OnlineBoardFilter.scss b/src/features/online-board/components/OnlineBoardFilter.scss
index 5f3bba40..278c1b79 100644
--- a/src/features/online-board/components/OnlineBoardFilter.scss
+++ b/src/features/online-board/components/OnlineBoardFilter.scss
@@ -149,37 +149,10 @@
     position: relative;
   }
 
-  .change-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-
-    .button-change {
-      margin-top: vars.$space-m;
-      margin-bottom: -(vars.$space-m);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: vars.$medium-button-height;
-      width: 35px;
-      background-color: colors.$white;
-      border: none;
-      box-shadow: none;
-      cursor: pointer;
-
-      &:hover {
-        background-color: colors.$white;
-      }
-
-      .svg--change-city {
-        width: 25px;
-        height: 12px;
-        fill: colors.$blue;
-        transform: rotate(90deg);
-      }
-    }
-  }
+  // Swap-cities button styling moved to `ui/city-autocomplete/SwapCityButton.scss`
+  // so every filter sidebar (OnlineBoard / Schedule / FlightsMap) shares the
+  // exact same DOM + CSS. The `.svg--change-city` sizing lives globally in
+  // `styles/_icons.scss`.
 
   .wrapper--time-selector {
     margin-top: vars.$space-xl;
diff --git a/src/features/online-board/components/OnlineBoardFilter.test.tsx b/src/features/online-board/components/OnlineBoardFilter.test.tsx
index aca5631f..e5d70a86 100644
--- a/src/features/online-board/components/OnlineBoardFilter.test.tsx
+++ b/src/features/online-board/components/OnlineBoardFilter.test.tsx
@@ -73,6 +73,9 @@ vi.mock("@/ui/city-autocomplete/index.js", () => ({
       defaultValue={(props["value"] as string) ?? ""}
     />
   ),
+  SwapCityButton: (props: { onClick: () => void; testId?: string }) => (
+    <button type="button" data-testid={props.testId} onClick={props.onClick} />
+  ),
 }));
 
 // ---------------------------------------------------------------------------
diff --git a/src/features/online-board/components/OnlineBoardFilter.tsx b/src/features/online-board/components/OnlineBoardFilter.tsx
index a32c8d60..1fdb4821 100644
--- a/src/features/online-board/components/OnlineBoardFilter.tsx
+++ b/src/features/online-board/components/OnlineBoardFilter.tsx
@@ -14,7 +14,7 @@ import { useLocale } from "@/i18n/useLocale.js";
 import { Calendar } from "primereact/calendar";
 import { Slider, type SliderChangeEvent } from "primereact/slider";
 import { useTranslation } from "@/i18n/provider.js";
-import { CityAutocomplete } from "@/ui/city-autocomplete/index.js";
+import { CityAutocomplete, SwapCityButton } from "@/ui/city-autocomplete/index.js";
 import { DayQuickPick } from "@/ui/calendar/DayQuickPick.js";
 import { useDictionaries } from "@/shared/dictionaries/index.js";
 import { buildOnlineBoardUrl } from "../url.js";
@@ -536,18 +536,10 @@ export const OnlineBoardFilter: FC<OnlineBoardFilterProps> = ({
                       testIdPrefix="route-departure"
                     />
 
-                    <div className="change-container">
-                      <button
-                        className="button-change"
-                        type="button"
-                        onClick={handleExchange}
-                        data-testid="swap-cities-button"
-                      >
-                        <svg className="svg--change-city">
-                          <use xlinkHref="/assets/img/sprite.svg#changeCity" />
-                        </svg>
-                      </button>
-                    </div>
+                    <SwapCityButton
+                      onClick={handleExchange}
+                      testId="swap-cities-button"
+                    />
 
                     <CityAutocomplete
                       label={t("SHARED.ARRIVAL_CITY")}
diff --git a/src/features/online-board/components/OnlineBoardStartPage.test.tsx b/src/features/online-board/components/OnlineBoardStartPage.test.tsx
index c07d48c4..366e5a00 100644
--- a/src/features/online-board/components/OnlineBoardStartPage.test.tsx
+++ b/src/features/online-board/components/OnlineBoardStartPage.test.tsx
@@ -93,6 +93,9 @@ vi.mock("@/ui/city-autocomplete/index.js", () => ({
       defaultValue={(props["value"] as string) ?? ""}
     />
   ),
+  SwapCityButton: (props: { onClick: () => void; testId?: string }) => (
+    <button type="button" data-testid={props.testId} onClick={props.onClick} />
+  ),
 }));
 
 // ---------------------------------------------------------------------------
diff --git a/src/features/schedule/components/ScheduleFilter.scss b/src/features/schedule/components/ScheduleFilter.scss
index db4d9454..53e9d1a2 100644
--- a/src/features/schedule/components/ScheduleFilter.scss
+++ b/src/features/schedule/components/ScheduleFilter.scss
@@ -41,27 +41,8 @@
     width: 100%;
   }
 
-  &__swap {
-    display: flex;
-    justify-content: center;
-    padding: vars.$space-s 0;
-  }
-
-  &__swap-btn {
-    background: transparent;
-    border: 0;
-    padding: 4px;
-    cursor: pointer;
-    color: colors.$blue;
-    border-radius: vars.$border-radius;
-
-    &:hover { background: colors.$blue-extra-light; }
-
-    .svg--change-city {
-      width: 24px;
-      height: 24px;
-    }
-  }
+  // Swap-cities button moved to the shared `SwapCityButton` component —
+  // classes `.change-container` + `.button-change` are now global.
 
   &__checkbox {
     display: flex;
diff --git a/src/features/schedule/components/ScheduleFilter.test.tsx b/src/features/schedule/components/ScheduleFilter.test.tsx
index aee49cd0..dea5a71b 100644
--- a/src/features/schedule/components/ScheduleFilter.test.tsx
+++ b/src/features/schedule/components/ScheduleFilter.test.tsx
@@ -70,6 +70,9 @@ vi.mock("@/ui/city-autocomplete/index.js", () => ({
       defaultValue={(props["value"] as string) ?? ""}
     />
   ),
+  SwapCityButton: (props: { onClick: () => void; testId?: string }) => (
+    <button type="button" data-testid={props.testId} onClick={props.onClick} />
+  ),
 }));
 
 vi.mock("@/shared/dateWindow.js", () => ({
diff --git a/src/features/schedule/components/ScheduleFilter.tsx b/src/features/schedule/components/ScheduleFilter.tsx
index 702ca3b2..4ded6e81 100644
--- a/src/features/schedule/components/ScheduleFilter.tsx
+++ b/src/features/schedule/components/ScheduleFilter.tsx
@@ -14,7 +14,7 @@ import { Calendar } from "primereact/calendar";
 import { Slider, type SliderChangeEvent } from "primereact/slider";
 import { useTranslation } from "@/i18n/provider.js";
 import { useLocale } from "@/i18n/useLocale.js";
-import { CityAutocomplete } from "@/ui/city-autocomplete/index.js";
+import { CityAutocomplete, SwapCityButton } from "@/ui/city-autocomplete/index.js";
 import { useDictionaries } from "@/shared/dictionaries/index.js";
 import { buildScheduleUrl } from "../url.js";
 import type { ScheduleParams } from "../url.js";
@@ -315,19 +315,10 @@ export const ScheduleFilter: FC<ScheduleFilterProps> = ({
               testIdPrefix="schedule-departure"
             />
 
-            <div className="schedule-filter__swap">
-              <button
-                type="button"
-                className="schedule-filter__swap-btn"
-                onClick={handleSwap}
-                aria-label="swap"
-                data-testid="swap-cities-button"
-              >
-                <svg className="svg--change-city">
-                  <use xlinkHref="/assets/img/sprite.svg#changeCity" />
-                </svg>
-              </button>
-            </div>
+            <SwapCityButton
+              onClick={handleSwap}
+              testId="swap-cities-button"
+            />
 
             <CityAutocomplete
               label={t("SHARED.ARRIVAL_CITY")}
diff --git a/src/features/schedule/components/ScheduleStartPage.scss b/src/features/schedule/components/ScheduleStartPage.scss
index 859635ed..2c534120 100644
--- a/src/features/schedule/components/ScheduleStartPage.scss
+++ b/src/features/schedule/components/ScheduleStartPage.scss
@@ -355,36 +355,6 @@
     padding-right: 2rem; // leave room for the trigger icon on the right
   }
 
-  // Swap button — match Angular's flat style
-  .change-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-
-    .button-change {
-      margin-top: vars.$space-m;
-      margin-bottom: -(vars.$space-m);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: vars.$medium-button-height;
-      width: 35px;
-      background-color: colors.$white;
-      border: none;
-      box-shadow: none;
-      cursor: pointer;
-
-      &:hover {
-        background-color: colors.$white;
-      }
-
-      .svg--change-city {
-        width: 25px;
-        height: 12px;
-        fill: colors.$blue;
-        transform: rotate(90deg);
-      }
-    }
-  }
+  // Swap-cities button styling moved to the shared `SwapCityButton` component
+  // — classes `.change-container` + `.button-change` are now global.
 }
diff --git a/src/features/schedule/components/ScheduleStartPage.test.tsx b/src/features/schedule/components/ScheduleStartPage.test.tsx
index b213cc57..e4eb10c6 100644
--- a/src/features/schedule/components/ScheduleStartPage.test.tsx
+++ b/src/features/schedule/components/ScheduleStartPage.test.tsx
@@ -83,6 +83,9 @@ vi.mock("@/ui/city-autocomplete/index.js", () => ({
       defaultValue={(props["value"] as string) ?? ""}
     />
   ),
+  SwapCityButton: (props: { onClick: () => void; testId?: string }) => (
+    <button type="button" data-testid={props.testId} onClick={props.onClick} />
+  ),
 }));
 
 vi.mock("@/ui/layout/SearchHistory.js", () => ({
diff --git a/src/ui/city-autocomplete/CityAutocomplete.scss b/src/ui/city-autocomplete/CityAutocomplete.scss
index 05399592..393072f4 100644
--- a/src/ui/city-autocomplete/CityAutocomplete.scss
+++ b/src/ui/city-autocomplete/CityAutocomplete.scss
@@ -12,7 +12,9 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    margin-bottom: vars.$space-s2;
+    // Matches Angular `city-autocomplete__labels-container { margin-bottom: $space-m }`
+    // in `components/city-autocomplete/city-autocomplete.component.scss`.
+    margin-bottom: vars.$space-m;
   }
 
   &__label {
diff --git a/src/ui/city-autocomplete/SwapCityButton.scss b/src/ui/city-autocomplete/SwapCityButton.scss
new file mode 100644
index 00000000..1bbcd540
--- /dev/null
+++ b/src/ui/city-autocomplete/SwapCityButton.scss
@@ -0,0 +1,30 @@
+@use "../../styles/colors" as colors;
+@use "../../styles/variables" as vars;
+
+// Shared swap-cities button styling for every filter block. Mirrors Angular's
+// `.change-container .button-change` in `online-board-route-filter.scss`
+// byte-for-byte so the three filter sidebars render an identical 35×40 pill.
+.change-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+
+  .button-change {
+    margin-top: vars.$space-m;
+    margin-bottom: -(vars.$space-m);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: vars.$medium-button-height;
+    width: 35px;
+    background-color: colors.$white;
+    border: none;
+    box-shadow: none;
+    cursor: pointer;
+
+    &:hover {
+      background-color: colors.$white;
+    }
+  }
+}
diff --git a/src/ui/city-autocomplete/SwapCityButton.tsx b/src/ui/city-autocomplete/SwapCityButton.tsx
new file mode 100644
index 00000000..848957a4
--- /dev/null
+++ b/src/ui/city-autocomplete/SwapCityButton.tsx
@@ -0,0 +1,43 @@
+import "./SwapCityButton.scss";
+
+/**
+ * Swap-cities button used between the departure and arrival CityAutocomplete
+ * inputs in every filter (OnlineBoard route, Schedule, FlightsMap).
+ *
+ * The DOM shape mirrors Angular's `.change-container > .button-change >
+ * .svg--change-city` so the global `.svg--change-city` rule in
+ * `styles/_icons.scss` renders the sprite identically on every page.
+ * Each caller keeps its own onClick handler — swap semantics differ between
+ * pages (Schedule clears validation, FlightsMap routes through a state
+ * service, OnlineBoard just swaps values), so only the DOM/CSS is shared.
+ */
+
+export interface SwapCityButtonProps {
+  onClick: () => void;
+  /** data-testid for the inner <button>. */
+  testId?: string;
+  /** Accessible label. Defaults to "swap". */
+  ariaLabel?: string;
+}
+
+export function SwapCityButton({
+  onClick,
+  testId,
+  ariaLabel = "swap",
+}: SwapCityButtonProps): JSX.Element {
+  return (
+    <div className="change-container">
+      <button
+        type="button"
+        className="button-change"
+        onClick={onClick}
+        aria-label={ariaLabel}
+        data-testid={testId}
+      >
+        <svg className="svg--change-city">
+          <use xlinkHref="/assets/img/sprite.svg#changeCity" />
+        </svg>
+      </button>
+    </div>
+  );
+}
diff --git a/src/ui/city-autocomplete/index.ts b/src/ui/city-autocomplete/index.ts
index 378c00ec..c57bea84 100644
--- a/src/ui/city-autocomplete/index.ts
+++ b/src/ui/city-autocomplete/index.ts
@@ -2,5 +2,7 @@ export { CityAutocomplete } from "./CityAutocomplete.js";
 export type { CityAutocompleteProps } from "./CityAutocomplete.js";
 export { CityPickerPopup } from "./CityPickerPopup.js";
 export type { CityPickerPopupProps } from "./CityPickerPopup.js";
+export { SwapCityButton } from "./SwapCityButton.js";
+export type { SwapCityButtonProps } from "./SwapCityButton.js";
 export { buildCountryCityRows } from "./buildCountryCityRows.js";
 export type { ICountryCityRow } from "./buildCountryCityRows.js";
diff --git a/tests/integration/online-board/start-page.test.tsx b/tests/integration/online-board/start-page.test.tsx
index 709e9990..aee5b8d9 100644
--- a/tests/integration/online-board/start-page.test.tsx
+++ b/tests/integration/online-board/start-page.test.tsx
@@ -56,6 +56,9 @@ vi.mock("@/ui/city-autocomplete/index.js", () => ({
       placeholder={props["placeholder"] as string}
     />
   ),
+  SwapCityButton: (props: { onClick: () => void; testId?: string }) => (
+    <button type="button" data-testid={props.testId} onClick={props.onClick} />
+  ),
 }));
 
 // ---------------------------------------------------------------------------