Match Angular form controls: swap icon, city dropdowns, schedule date range

Online board filter: use Angular sprite SVG for swap button, add dropdown
chevron to city AutoComplete inputs.

Schedule filter: add swap button between cities, replace two separate
date fields with single range Calendar matching Angular. Fix button text
to "Показать расписание", date label to "Показать расписание на".
Add dropdown chevrons to city inputs.

src/features/online-board/components/OnlineBoardFilter.tsx

@@ -257,6 +257,7 @@ export const OnlineBoardFilter: FC = () => {
                       suggestions={routeDepSuggestions}
                       completeMethod={handleRouteDepSearch}
                       field="name"
+                      dropdown
                       onChange={(e) => setRouteDeparture(e.value as CitySuggestion | string)}
                       placeholder={t("SHARED.CITY_PLACEHOLDER")}
                       className="input--filter"
@@ -272,8 +273,8 @@ export const OnlineBoardFilter: FC = () => {
                         onClick={handleExchange}
                         data-testid="swap-cities-button"
                       >
-                        <svg className="svg--change-city" viewBox="0 0 24 24" width="24" height="24">
-                          <path d="M7.5 3L3 7.5M3 7.5L7.5 12M3 7.5H21M16.5 21L21 16.5M21 16.5L16.5 12M21 16.5H3" stroke="currentColor" strokeWidth="1.5" fill="none" />
+                        <svg className="svg--change-city">
+                          <use xlinkHref="/assets/img/sprite.svg#changeCity" />
                         </svg>
                       </button>
                     </div>
@@ -286,6 +287,7 @@ export const OnlineBoardFilter: FC = () => {
                       suggestions={routeArrSuggestions}
                       completeMethod={handleRouteArrSearch}
                       field="name"
+                      dropdown
                       onChange={(e) => setRouteArrival(e.value as CitySuggestion | string)}
                       placeholder={t("SHARED.CITY_PLACEHOLDER")}
                       className="input--filter"

src/features/schedule/components/ScheduleStartPage.tsx

@@ -141,6 +141,7 @@ export const ScheduleStartPage: FC = () => {
           suggestions={departureSuggestions}
           completeMethod={handleDepartureSearch}
           field="name"
+          dropdown
           onChange={(e) => setDepartureAirport(e.value as CitySuggestion | string)}
           placeholder={t("SHARED.CITY_PLACEHOLDER")}
           className="input--filter"
@@ -150,6 +151,23 @@ export const ScheduleStartPage: FC = () => {
         />
       </div>
 
+      <div className="change-container">
+        <button
+          className="button-change"
+          type="button"
+          onClick={() => {
+            const tmp = departureAirport;
+            setDepartureAirport(arrivalAirport);
+            setArrivalAirport(tmp);
+          }}
+          data-testid="swap-cities-button"
+        >
+          <svg className="svg--change-city">
+            <use xlinkHref="/assets/img/sprite.svg#changeCity" />
+          </svg>
+        </button>
+      </div>
+
       <div className="schedule-start__field">
         <label htmlFor="schedule-arrival">{t("SHARED.ARRIVAL_CITY")}</label>
         <AutoComplete
@@ -157,6 +175,7 @@ export const ScheduleStartPage: FC = () => {
           suggestions={arrivalSuggestions}
           completeMethod={handleArrivalSearch}
           field="name"
+          dropdown
           onChange={(e) => setArrivalAirport(e.value as CitySuggestion | string)}
           placeholder={t("SHARED.CITY_PLACEHOLDER")}
           className="input--filter"
@@ -167,30 +186,21 @@ export const ScheduleStartPage: FC = () => {
       </div>
 
       <div className="schedule-start__field">
-        <label htmlFor="schedule-date-from">{t("SHARED.DEPARTURE_DATE")}</label>
+        <label htmlFor="schedule-date-from">{t("SHARED.SCHEDULES_DATE")}</label>
         <Calendar
-          value={dateFrom}
-          onChange={(e) => setDateFrom(e.value as Date | null)}
+          value={dateFrom && dateTo ? [dateFrom, dateTo] : null}
+          onChange={(e) => {
+            const val = e.value as Date[] | null;
+            if (val && val.length >= 1) setDateFrom(val[0] ?? null);
+            if (val && val.length >= 2) setDateTo(val[1] ?? null);
+          }}
+          selectionMode="range"
           dateFormat="dd.mm.yy"
-          placeholder={t("SHARED.DATE_FORMAT")}
+          placeholder={`${t("SHARED.DATE_FORMAT")} - ${t("SHARED.DATE_FORMAT")}`}
           showIcon
           className="input--filter"
           inputId="schedule-date-from"
-          data-testid="date-from-input"
-        />
-      </div>
-
-      <div className="schedule-start__field">
-        <label htmlFor="schedule-date-to">{t("SHARED.ARRIVAL_DATE")}</label>
-        <Calendar
-          value={dateTo}
-          onChange={(e) => setDateTo(e.value as Date | null)}
-          dateFormat="dd.mm.yy"
-          placeholder={t("SHARED.DATE_FORMAT")}
-          showIcon
-          className="input--filter"
-          inputId="schedule-date-to"
-          data-testid="date-to-input"
+          data-testid="date-range-input"
         />
       </div>
 
@@ -287,7 +297,7 @@ export const ScheduleStartPage: FC = () => {
         className="schedule-start__submit"
         data-testid="schedule-search-submit"
       >
-        {t("SHARED.SEARCH")}
+        {t("SHARED.SCHEDULES_VIEW")}
       </button>
     </form>
   );