{useOldComponent ?
;
+```
+
+## Component File Comparison
+
+### Before (Old)
+
+```
+SearchBox.js 813 lines JavaScript
+└── (monolithic component)
+```
+
+### After (New)
+
+```
+modern/
+├── SearchBox.tsx ~150 lines TypeScript
+├── SearchBox.css ~200 lines Modern CSS
+├── types.ts ~150 lines TypeScript interfaces
+├── hooks/
+│ └── useSearchBox.ts ~200 lines Business logic
+├── components/ ~50 lines ea Modular components
+│ ├── ActionButtons.tsx
+│ ├── CoordinatesDialogs.tsx
+│ ├── FavoriteSection.tsx
+│ ├── FilterSection.tsx
+│ ├── SearchInput.tsx
+│ └── SearchResultDetails.tsx
+└── README.md Documentation
+```
+
+**Total: ~800 lines spread across multiple focused files vs 813 lines in one file**
+
+## Benefits Summary
+
+✅ **Zero breaking changes** - Same interface and functionality
+✅ **Better maintainability** - Modular, typed codebase
+✅ **Modern UX** - Responsive design and accessibility
+✅ **Future-proof** - Built with latest React and MUI patterns
+✅ **Easy transition** - Simple import change
+✅ **Safe rollback** - Old component remains until you delete it
+
+## Questions?
+
+If you encounter any issues during migration:
+
+1. Check that all imports are updated
+2. Verify Redux state is properly connected
+3. Test responsive design on different screen sizes
+4. Confirm all user interactions work as expected
+
+The new component maintains 100% API compatibility with the old one while providing significant architectural improvements.
diff --git a/src/components/Map/EditStopMap.js b/src/components/Map/EditStopMap.js
index 4e92bdcab..f183a32c4 100644
--- a/src/components/Map/EditStopMap.js
+++ b/src/components/Map/EditStopMap.js
@@ -203,6 +203,7 @@ class EditStopMap extends React.Component {
minZoom={minZoom}
handleZoomEnd={this.handleZoomEnd.bind(this)}
handleSetCompassBearing={this.handleSetCompassBearing.bind(this)}
+ uiMode={this.props.uiMode}
/>
-
+ {menuItems.map((item) => (
+
-
+ {favorites.map((favorite, index) => (
+
+
+ ),
+ };
+};
+
+const createParentStopPlaceMenuItem = (
+ element: SearchResult,
+ formatMessage: FormatMessage,
+): MenuItem => {
+ const futureOrExpiredLabel = getFutureOrExpiredLabel(element);
+ return {
+ element: element,
+ text: element.name,
+ id: element.id,
+ menuDiv: (
+
+
+
+
+ {topographicPlaces.length > 0 && (
+ {element.name}
+ {element.id}
+
+ {topographicPlaces.map((place, i) => (
+
+ )}
+
+ {`${place.topographicPlace}, ${place.parentTopographicPlace}`}
+
+ ))}
+
+ ({
+ submode: child.submode,
+ stopPlaceType: child.stopPlaceType,
+ })) || []
+ }
+ />
+
+ ),
+ };
+};
+
+const createStopPlaceMenuItem = (
+ element: SearchResult,
+ formatMessage: FormatMessage,
+): MenuItem => {
+ const futureOrExpiredLabel = getFutureOrExpiredLabel(element);
+ return {
+ element: element,
+ text: element.name,
+ id: element.id,
+ menuDiv: (
+
+
+
+
+
+ {element.name}
+
+ MM
+
+
+ {element.id}
+
+
+ {`${element.topographicPlace}, ${element.parentTopographicPlace}`}
+ {futureOrExpiredLabel && (
+
+ {formatMessage({ id: futureOrExpiredLabel })}
+
+ )}
+
+
+ ),
+ };
+};
diff --git a/src/components/modern/MainPage/components/SearchResultDetails.tsx b/src/components/modern/MainPage/components/SearchResultDetails.tsx
new file mode 100644
index 000000000..e14c6205f
--- /dev/null
+++ b/src/components/modern/MainPage/components/SearchResultDetails.tsx
@@ -0,0 +1,412 @@
+/*
+ * Licensed under the EUPL, Version 1.2 or – as soon they will be approved by
+ the European Commission - subsequent versions of the EUPL (the "Licence");
+ You may not use this work except in compliance with the Licence.
+ You may obtain a copy of the Licence at:
+
+ https://joinup.ec.europa.eu/software/page/eupl
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the Licence is distributed on an "AS IS" basis,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the Licence for the specific language governing permissions and
+ limitations under the Licence. */
+
+/**
+ * @deprecated This component is no longer used in the search flow since we navigate
+ * directly to the edit page when selecting a search result. It may be used elsewhere
+ * or removed in a future cleanup. Marked for potential deletion.
+ */
+
+import {
+ Close as CloseIcon,
+ GroupWork as GroupIcon,
+} from "@mui/icons-material";
+import WheelChair from "@mui/icons-material/Accessible";
+import {
+ Box,
+ Divider,
+ IconButton,
+ Paper,
+ Typography,
+ useTheme,
+} from "@mui/material";
+import React from "react";
+import { useIntl } from "react-intl";
+import { getPrimaryDarkerColor } from "../../../../config/themeConfig";
+import { AccessibilityLimitationType } from "../../../../models/AccessibilityLimitation";
+import { Entities } from "../../../../models/Entities";
+import { getIn } from "../../../../utils/";
+import ModalityIconImg from "../../../MainPage/ModalityIconImg";
+import ModalityTray from "../../../ReportPage/ModalityIconTray";
+import {
+ CountBadge,
+ ExpiredWarning,
+ GroupMembership,
+ QuayCode,
+ Tags,
+} from "../../Shared";
+import { modernCard } from "../../styles";
+import { SearchResultDetailsProps } from "../types";
+import { SearchBoxEdit } from "./SearchBoxEdit";
+import { SearchBoxGeoWarning } from "./SearchBoxGeoWarning";
+import { SearchBoxUsingTempGeo } from "./SearchBoxUsingTempGeo";
+import { SimpleStopPlaceLink } from "./SimpleStopPlaceLink";
+
+export const SearchResultDetails: React.FC<
+ SearchResultDetailsProps & { onClose?: () => void }
+> = ({
+ result,
+ canEdit,
+ userSuppliedCoordinates,
+ onEdit,
+ onChangeCoordinates,
+ onClose,
+}) => {
+ const theme = useTheme();
+ const { formatMessage } = useIntl();
+ const primaryDarker = getPrimaryDarkerColor();
+
+ const text = {
+ emptyDescription: formatMessage({ id: "empty_description" }),
+ edit: formatMessage({ id: "edit" }),
+ view: formatMessage({ id: "view" }),
+ };
+
+ const { entityType } = result;
+
+ const hasWheelchairAccess =
+ getIn(
+ result,
+ ["accessibilityAssessment", "limitations", "wheelchairAccess"],
+ null,
+ ) === AccessibilityLimitationType.TRUE;
+
+ const renderStopPlaceInfo = () => {
+ if (result.isParent) {
+ return (
+ <>
+
+
+
+
+ {element.name}
+ {element.id}
+
+
+ {`${element.topographicPlace}, ${element.parentTopographicPlace}`}
+ {futureOrExpiredLabel && (
+
+ {formatMessage({ id: futureOrExpiredLabel })}
+
+ )}
+
+
+
+
+
+ {formatMessage({ id: "go_to_coordinates" })}
+
+
+ {coordinates[0]}, {coordinates[1]}
+
+
+
+ ),
+ type: place.topographicPlaceType,
+ };
+ });
+ }, [topographicalPlaces, topoiChips, getTopographicalNames, formatMessage]);
+
+ return {
+ menuItems,
+ topographicalPlacesDataSource,
+ };
+};
diff --git a/src/components/modern/MainPage/hooks/searchBox/useSearchState.ts b/src/components/modern/MainPage/hooks/searchBox/useSearchState.ts
new file mode 100644
index 000000000..6a0b21f24
--- /dev/null
+++ b/src/components/modern/MainPage/hooks/searchBox/useSearchState.ts
@@ -0,0 +1,53 @@
+/*
+ * Licensed under the EUPL, Version 1.2 or – as soon they will be approved by
+the European Commission - subsequent versions of the EUPL (the "Licence");
+You may not use this work except in compliance with the Licence.
+You may obtain a copy of the Licence at:
+
+ https://joinup.ec.europa.eu/software/page/eupl
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the Licence is distributed on an "AS IS" basis,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the Licence for the specific language governing permissions and
+limitations under the Licence. */
+
+import { useCallback, useState } from "react";
+
+/**
+ * Hook for managing local state in search box
+ * Handles loading states, search values, and filter visibility
+ */
+export const useSearchState = () => {
+ const [showMoreFilterOptions, setShowMoreFilterOptions] = useState(false);
+ const [loading, setLoading] = useState(false);
+ const [loadingSelection, setLoadingSelection] = useState(false);
+ const [loadingStopPlaceName, setLoadingStopPlaceName] = useState
+
+
+ {name}
+
+
+ {formatMessage({ id: place.topographicPlaceType })}
+
+
+
+
+ );
+};
diff --git a/src/components/modern/Map/controls/AddElementFab.tsx b/src/components/modern/Map/controls/AddElementFab.tsx
new file mode 100644
index 000000000..92a3e8715
--- /dev/null
+++ b/src/components/modern/Map/controls/AddElementFab.tsx
@@ -0,0 +1,294 @@
+/*
+ * Licensed under the EUPL, Version 1.2 or – as soon they will be approved by
+the European Commission - subsequent versions of the EUPL (the "Licence");
+You may not use this work except in compliance with the Licence.
+You may obtain a copy of the Licence at:
+
+ https://joinup.ec.europa.eu/software/page/eupl
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the Licence is distributed on an "AS IS" basis,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the Licence for the specific language governing permissions and
+limitations under the Licence. */
+
+import {
+ DirectionsBike as BikeParkingIcon,
+ Navigation as BoardingPositionIcon,
+ LocalParking as ParkAndRideIcon,
+ LocationOn as QuayIcon,
+ DirectionsBus as StopPlaceIcon,
+} from "@mui/icons-material";
+import {
+ SpeedDial,
+ SpeedDialAction,
+ SpeedDialIcon,
+ Typography,
+ useTheme,
+} from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+import { useIntl } from "react-intl";
+import { useMap } from "react-map-gl/maplibre";
+import { StopPlaceActions, UserActions } from "../../../../actions";
+import { useAppDispatch, useAppSelector } from "../../../../store/hooks";
+import { PlacementHint } from "./PlacementHint";
+
+type ElementType = "quay" | "parkAndRide" | "bikeParking" | "boardingPosition";
+
+interface StopAction {
+ icon: React.ReactNode;
+ labelKey: string;
+ elementType: ElementType;
+}
+
+const STOP_ELEMENT_ACTIONS: StopAction[] = [
+ {
+ icon: