all good

frontend/src/components/map/MapPage.tsx

@@ -1,5 +1,5 @@
 import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import type { MapFlyToOptions, PostcodeGeometry } from '../../types';
 import type { SearchedLocation } from './LocationSearch';
@@ -82,6 +82,10 @@ export default function MapPage({
   deferTutorial = false,
   onSaveSearch,
   savingSearch,
+  editingSearch,
+  onCancelEdit,
+  onUpdateEdit,
+  onUpdateEditInPlace,
 }: MapPageProps) {
   const { t } = useTranslation();
   const [selectedPOICategories, setSelectedPOICategories] =
@@ -164,6 +168,7 @@ export default function MapPage({
     viewFeature,
     activeFeature,
     pinnedFeature,
+    filterRange,
     travelTimeEntries: entries,
     shareCode,
   });
@@ -283,7 +288,6 @@ export default function MapPage({
     setRightPaneTab,
     handleHexagonClick,
     handleHexagonHover,
-    handleViewPropertiesFromArea,
     handlePropertiesTabClick,
     handleLoadMoreProperties,
     handleCloseSelection,
@@ -506,6 +510,9 @@ export default function MapPage({
     },
     [dashboardParams, onSaveSearch]
   );
+  const handleUpdateEditInPlaceWithParams = useCallback(async () => {
+    await onUpdateEditInPlace?.(dashboardParams);
+  }, [dashboardParams, onUpdateEditInPlace]);
   const checkoutReturnPath = useMemo(
     () => `/dashboard${dashboardParams ? `?${dashboardParams}` : ''}`,
     [dashboardParams]
@@ -543,7 +550,6 @@ export default function MapPage({
         loading={loadingAreaStats}
         hexagonId={selectedHexagon?.id || null}
         isPostcode={selectedHexagon?.type === 'postcode'}
-        onViewProperties={handleViewPropertiesFromArea}
         hexagonLocation={hexagonLocation}
         filters={filters}
         unfilteredCount={unfilteredAreaCount}
@@ -621,6 +627,11 @@ export default function MapPage({
         onClearAll={handleClearAll}
         onSaveSearch={onSaveSearch ? handleSaveSearch : undefined}
         savingSearch={savingSearch}
+        editingSearchName={editingSearch?.name ?? null}
+        onUpdateSearch={
+          editingSearch && onUpdateEditInPlace ? handleUpdateEditInPlaceWithParams : undefined
+        }
+        onExitEditing={onCancelEdit}
         destinationDropdownPortal={options?.destinationDropdownPortal}
       />
     </Suspense>
@@ -643,6 +654,40 @@ export default function MapPage({
     />
   );
   const toasts = exportToast;
+
+  const editingBar =
+    editingSearch && isMobile ? (
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-warm-200 dark:border-navy-700 bg-warm-50 dark:bg-navy-900">
+        <span
+          className="flex-1 min-w-0 truncate text-xs text-warm-700 dark:text-warm-200"
+          title={editingSearch.name}
+        >
+          <Trans
+            i18nKey="savedPage.isBeingUpdated"
+            values={{ name: editingSearch.name }}
+            components={{
+              strong: (
+                <strong className="font-semibold text-navy-950 dark:text-warm-100" />
+              ),
+            }}
+          />
+        </span>
+        <button
+          onClick={onCancelEdit}
+          className="shrink-0 cursor-pointer px-2.5 py-1 rounded text-xs font-medium border border-warm-200 dark:border-warm-700 text-warm-700 dark:text-warm-200 hover:bg-warm-100 dark:hover:bg-navy-800"
+        >
+          {t('common.cancel')}
+        </button>
+        <button
+          onClick={() => onUpdateEdit?.(dashboardParams)}
+          disabled={savingSearch}
+          className="shrink-0 cursor-pointer px-2.5 py-1 rounded text-xs font-medium bg-teal-600 text-white hover:bg-teal-700 disabled:opacity-50 disabled:cursor-wait flex items-center gap-1.5"
+        >
+          {savingSearch ? t('savedPage.updating') : t('common.update')}
+        </button>
+      </div>
+    ) : null;
+
   const upgradeModal = mapData.licenseRequired ? (
     <Suspense fallback={null}>
       <UpgradeModal
@@ -714,6 +759,7 @@ export default function MapPage({
         renderPropertiesPane={renderPropertiesPane}
         toasts={toasts}
         upgradeModal={upgradeModal}
+        editingBar={editingBar}
       />
     );
   }