From 3555972bfd691044b8b94eecd6a2ab7ecebe7421 Mon Sep 17 00:00:00 2001
From: Claudio Schaad <c.schaad@pog.ch>
Date: Tue, 21 Jul 2026 20:09:18 +0200
Subject: [PATCH] Open add-city form only via the Add city button, not map
 clicks

Map clicks were navigating straight to the new-city form, which made it
easy to open by accident while panning/zooming.
---
 client/src/components/city/CitySearchInput.tsx |  2 +-
 client/src/components/map/CityMap.tsx          | 15 ++-------------
 client/src/pages/CityDetailPage.tsx            |  2 +-
 client/src/pages/MapDashboardPage.tsx          |  6 +-----
 4 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/client/src/components/city/CitySearchInput.tsx b/client/src/components/city/CitySearchInput.tsx
index bbcc317..52cce9c 100644
--- a/client/src/components/city/CitySearchInput.tsx
+++ b/client/src/components/city/CitySearchInput.tsx
@@ -69,7 +69,7 @@ export function CitySearchInput({ onSelect }: CitySearchInputProps) {
       )}
       {open && !loading && results.length === 0 && query.trim().length >= 3 && (
         <div className="search-empty">
-          No results — you can still enter details manually or click the map.
+          No results — try a different search.
         </div>
       )}
     </div>
diff --git a/client/src/components/map/CityMap.tsx b/client/src/components/map/CityMap.tsx
index 53ea4f9..944e8b4 100644
--- a/client/src/components/map/CityMap.tsx
+++ b/client/src/components/map/CityMap.tsx
@@ -1,6 +1,6 @@
 import 'leaflet/dist/leaflet.css';
 import { useRef } from 'react';
-import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import { useNavigate } from 'react-router-dom';
 import type { City } from '@citytracker/shared';
 import { cityMarkerIcon } from './CityMarker';
@@ -8,16 +8,6 @@ import { cityMarkerIcon } from './CityMarker';
 interface CityMapProps {
   cities: City[];
   focusCity?: City;
-  onMapClick?: (lat: number, lng: number) => void;
-}
-
-function ClickHandler({ onMapClick }: { onMapClick?: (lat: number, lng: number) => void }) {
-  useMapEvents({
-    click(e) {
-      onMapClick?.(e.latlng.lat, e.latlng.lng);
-    },
-  });
-  return null;
 }
 
 /** Roughly bounds a `radiusKm` circle around a point, for an initial "zoomed to this area" view. */
@@ -42,7 +32,7 @@ function InitialFocus({ focusCity }: { focusCity?: City }) {
   return null;
 }
 
-export function CityMap({ cities, focusCity, onMapClick }: CityMapProps) {
+export function CityMap({ cities, focusCity }: CityMapProps) {
   const navigate = useNavigate();
 
   return (
@@ -51,7 +41,6 @@ export function CityMap({ cities, focusCity, onMapClick }: CityMapProps) {
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <ClickHandler onMapClick={onMapClick} />
       <InitialFocus focusCity={focusCity} />
       {cities.map((city) => (
         <Marker key={city.id} position={[city.lat, city.lng]} icon={cityMarkerIcon(city)}>
diff --git a/client/src/pages/CityDetailPage.tsx b/client/src/pages/CityDetailPage.tsx
index 657b985..24493cc 100644
--- a/client/src/pages/CityDetailPage.tsx
+++ b/client/src/pages/CityDetailPage.tsx
@@ -307,7 +307,7 @@ export function CityDetailPage({ mode }: CityDetailPageProps) {
             {saveStatus === 'error' && 'Could not save — check your connection'}
             {saveStatus === 'idle' &&
               !isEditing &&
-              'Search for a city or click the map, then add a name and country to save'}
+              'Search for a city, then add a name and country to save'}
           </span>
           <button type="button" className="btn btn-ghost" onClick={() => navigate('/')}>
             Back to map
diff --git a/client/src/pages/MapDashboardPage.tsx b/client/src/pages/MapDashboardPage.tsx
index e9b1a4e..ea5cda0 100644
--- a/client/src/pages/MapDashboardPage.tsx
+++ b/client/src/pages/MapDashboardPage.tsx
@@ -33,10 +33,6 @@ export function MapDashboardPage() {
   // Cities are returned newest-first, so the first entry is the most recently added one.
   const latestCity = allCities?.[0];
 
-  function handleMapClick(lat: number, lng: number) {
-    navigate('/cities/new', { state: { lat, lng } });
-  }
-
   return (
     <div className="map-dashboard">
       <MapFilters filters={filters} countries={countries} years={years} onChange={setFilters} />
@@ -44,7 +40,7 @@ export function MapDashboardPage() {
         {isLoading ? (
           <div className="page-loading">Loading map…</div>
         ) : (
-          <CityMap cities={cities ?? []} focusCity={latestCity} onMapClick={handleMapClick} />
+          <CityMap cities={cities ?? []} focusCity={latestCity} />
         )}
         <button type="button" className="btn btn-primary fab" onClick={() => navigate('/cities/new')}>
           + Add city