Replace target selection buttons with always-on map drag handles

- Remove useMapClickHandler hook and "Select Target" / "Select Target
  & Direction" toolbar buttons
- Add "Edit on Map" toggle in TargetComponent and toolbar (EditLocation
  icon, highlights when active)
- When active: draggable cyan target marker + orange heading handle
  (15 m out) with connecting line; map clicks also move the target
- On mobile, activating edit navigates to map automatically

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: bgrozev

src/App.tsx

@@ -38,15 +38,14 @@ import {
   WindSummary,
   WindsComponent
 } from './components';
-import { CourseEditTarget } from './components/MapComponent';
+import { CourseEditTarget, TargetEditTarget } from './components/MapComponent';
 import { SOURCE_DZ, SOURCE_MANUAL } from './forecast/forecast';
 import {
   AppStateProvider,
   DEFAULT_TARGET,
   useAppState,
   useCustomCourses,
   useFetchForecast,
-  useMapClickHandler,
   usePresets
 } from './hooks';
 import { Course, LatLng, Target, WindSummaryData } from './types';
@@ -172,6 +171,7 @@ function DashboardContent() {
 
   const [forecastTime, setForecastTime] = useState<Date | null>(null);
   const [courseEditOpen, setCourseEditOpen] = useState(false);
+  const [targetEditOpen, setTargetEditOpen] = useState(false);
   const [exportOpen, setExportOpen] = useState(false);
 
   const { winds, fetching, fetchWinds, setWinds, resetWinds } = useFetchForecast({
@@ -194,12 +194,6 @@ function DashboardContent() {
   const isMobile = useMediaQuery('(max-width:600px)');
   const router = useDemoRouter('/map');
 
-  const { handleMapClick, selectFromMap, isWaitingForClick } = useMapClickHandler({
-    currentTarget: target,
-    onTargetSelected: setTarget,
-    onNavigateToMap: isMobile ? () => router.navigate('/map') : undefined
-  });
-
   const {
     presets,
     activePresetId,
@@ -294,9 +288,13 @@ function DashboardContent() {
   } else if (router.pathname === '/target') {
     p = (
       <TargetComponent
-        selectFromMap={selectFromMap}
         target={target}
         setTarget={setTarget}
+        editOpen={targetEditOpen}
+        onEditOpenChange={open => {
+          setTargetEditOpen(open);
+          if (open && isMobile) router.navigate('/map');
+        }}
         onUpwindClick={onUpwindClick}
       />
     );
@@ -362,18 +360,26 @@ function DashboardContent() {
         }
       : undefined;
 
+  const targetEditTarget: TargetEditTarget | undefined = targetEditOpen
+    ? {
+        target: target.target,
+        heading: target.finalHeading,
+        onMove: (pos: LatLng) => setTarget({ ...target, target: pos }),
+        onHeadingChange: (h: number) => setTarget({ ...target, finalHeading: Math.round(h) })
+      }
+    : undefined;
+
   const map = (
     <MapComponent
       center={target.target}
       pathA={c}
       pathB={c2Display}
       settings={settings}
-      onClick={handleMapClick}
       windDirection={averageWind_?.direction ?? 0}
       windSpeed={averageWind_?.speedKts ?? 0}
-      waitingForClick={isWaitingForClick}
       courses={enabledCourses}
       courseEditTarget={courseEditTarget}
+      targetEditTarget={targetEditTarget}
     />
   );
   const dashboard = (
@@ -385,9 +391,13 @@ function DashboardContent() {
             fetching={fetching}
             onMapButtonClick={() => router.navigate('/map')}
             onRefreshWindsClick={handleFetchWinds}
-            onSelectTargetClick={() => selectFromMap(false)}
-            onSelectTargetAndHeadingClick={() => selectFromMap(true)}
             onExportClick={() => setExportOpen(true)}
+            targetEditOpen={targetEditOpen}
+            onTargetEditToggle={() => {
+              const next = !targetEditOpen;
+              setTargetEditOpen(next);
+              if (next && isMobile) router.navigate('/map');
+            }}
             showPresets={settings.showPresets}
             presets={presets}
             activePresetId={activePresetId}

src/components/MapComponent.tsx

@@ -28,6 +28,13 @@ export interface CourseEditTarget {
   onMove: (newCenter: LatLng) => void;
   onRotate: (newDirection: number) => void;
 }
+
+export interface TargetEditTarget {
+  target: LatLng;
+  heading: number;
+  onMove: (pos: LatLng) => void;
+  onHeadingChange: (heading: number) => void;
+}
 import { pathToLatLngs } from '../util/coords';
 import { FlightPath } from '../types';
 import {
@@ -358,26 +365,24 @@ interface MapComponentProps {
   windSpeed: number;
   windDirection: number;
   center: LatLng;
-  onClick: (latLng: LatLng) => void;
   pathA: FlightPath;
   pathB: FlightPath;
   settings: Settings;
-  waitingForClick: boolean;
   courses?: Course[];
   courseEditTarget?: CourseEditTarget;
+  targetEditTarget?: TargetEditTarget;
 }
 
 function MapComponent({
   windSpeed,
   windDirection,
   center,
-  onClick,
   pathA,
   pathB,
   settings,
-  waitingForClick,
   courses = [],
-  courseEditTarget
+  courseEditTarget,
+  targetEditTarget
 }: MapComponentProps) {
   const { showPoms, showPomAltitudes, showPomTooltips, showPreWind, displayWindArrow, highlightCorrespondingPoints, showMeasureTool } = settings;
   const { formatAltitude, altitudeLabel } = useUnits();
@@ -387,8 +392,9 @@ function MapComponent({
   const [measurePoints, setMeasurePoints] = useState<LatLng[]>([]);
   const mapRef = useRef<google.maps.Map | null>(null);
   const [zoom, setZoom] = useState<number>(DEFAULT_MAP_OPTIONS.zoom);
-  // Live position of the rotation handle while dragging (for smooth line preview)
+  // Live position of drag handles while dragging (for smooth line preview)
   const [liveHandlePos, setLiveHandlePos] = useState<LatLng | null>(null);
+  const [liveTargetHeadingPos, setLiveTargetHeadingPos] = useState<LatLng | null>(null);
 
   const toggleMeasuring = useCallback(() => {
     setMeasuring(m => {
@@ -425,7 +431,7 @@ function MapComponent({
 
   // Update cursor without causing map re-render
   if (mapRef.current) {
-    const cursor = (showMeasureTool && measuring) || waitingForClick ? 'crosshair' : 'grab';
+    const cursor = (showMeasureTool && measuring) || targetEditTarget ? 'crosshair' : 'grab';
     mapRef.current.setOptions({ draggableCursor: cursor });
   }
 
@@ -467,8 +473,8 @@ function MapComponent({
           const latlng = { lat: ev.latLng.lat(), lng: ev.latLng.lng() };
           if (showMeasureTool && measuring) {
             setMeasurePoints(pts => [...pts, latlng]);
-          } else {
-            onClick(latlng);
+          } else if (targetEditTarget) {
+            targetEditTarget.onMove(latlng);
           }
         }}
         options={DEFAULT_MAP_OPTIONS}
@@ -697,6 +703,66 @@ function MapComponent({
             )}
           </React.Fragment>
         ))}
+        {/* Target edit handles — position drag + heading direction handle */}
+        {targetEditTarget && (() => {
+          const headingHandlePos = (() => {
+            const pt = turf.destination(
+              [targetEditTarget.target.lng, targetEditTarget.target.lat],
+              15, targetEditTarget.heading, { units: 'meters' }
+            );
+            return { lat: pt.geometry.coordinates[1], lng: pt.geometry.coordinates[0] };
+          })();
+          const headingLineEnd = liveTargetHeadingPos ?? headingHandlePos;
+          /* eslint-disable @typescript-eslint/no-explicit-any */
+          const circleIcon = (color: string, scale: number) => ({
+            path: (window as any).google.maps.SymbolPath.CIRCLE,
+            scale,
+            fillColor: color,
+            fillOpacity: 0.85,
+            strokeColor: '#fff',
+            strokeWeight: 2
+          });
+          /* eslint-enable @typescript-eslint/no-explicit-any */
+          return (
+            <React.Fragment key="target-edit-handles">
+              <PolylineF
+                path={[targetEditTarget.target, headingLineEnd]}
+                options={{ strokeColor: '#ffaa00', strokeWeight: 2, strokeOpacity: 0.9, zIndex: 25, clickable: false }}
+              />
+              <MarkerF
+                position={targetEditTarget.target}
+                draggable
+                cursor="move"
+                zIndex={26}
+                icon={circleIcon('#00ccff', 9)}
+                onDragEnd={e => {
+                  if (e.latLng) targetEditTarget.onMove({ lat: e.latLng.lat(), lng: e.latLng.lng() });
+                }}
+              />
+              <MarkerF
+                position={headingHandlePos}
+                draggable
+                cursor="pointer"
+                zIndex={27}
+                icon={circleIcon('#ffaa00', 7)}
+                onDrag={e => {
+                  if (e.latLng) setLiveTargetHeadingPos({ lat: e.latLng.lat(), lng: e.latLng.lng() });
+                }}
+                onDragEnd={e => {
+                  setLiveTargetHeadingPos(null);
+                  if (e.latLng) {
+                    const bearing = turf.bearing(
+                      [targetEditTarget.target.lng, targetEditTarget.target.lat],
+                      [e.latLng.lng(), e.latLng.lat()]
+                    );
+                    targetEditTarget.onHeadingChange((bearing + 360) % 360);
+                  }
+                }}
+              />
+            </React.Fragment>
+          );
+        })()}
+
         {/* Course edit handles — center drag + rotation handle */}
         {courseEditTarget && (() => {
           const rotationHandlePos = (() => {

src/components/TargetComponent.tsx

@@ -1,6 +1,5 @@
 import {
-  Explore as ExploreIcon,
-  ModeStandby as ModeStandbyIcon
+  EditLocation as EditLocationIcon
 } from '@mui/icons-material';
 import {
   Button,
@@ -22,14 +21,16 @@ import { LocationComponent } from './';
 interface TargetComponentProps {
   target: Target;
   setTarget: (target: Target) => void;
-  selectFromMap: (withHeading: boolean) => void;
+  editOpen: boolean;
+  onEditOpenChange: (open: boolean) => void;
   onUpwindClick: () => void;
 }
 
 export default function TargetComponent({
   target,
   setTarget,
-  selectFromMap,
+  editOpen,
+  onEditOpenChange,
   onUpwindClick
 }: TargetComponentProps) {
   const handleHeadingChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
@@ -41,30 +42,15 @@ export default function TargetComponent({
 
   return (
     <Stack spacing={3}>
-      <Stack direction="row" spacing={1}>
-        <Tooltip title="Select target by clicking on the map." arrow>
-          <Button
-            variant="outlined"
-            size="small"
-            startIcon={<ModeStandbyIcon />}
-            onClick={() => selectFromMap(false)}
-            sx={{ textTransform: 'none' }}
-          >
-            Set Target
-          </Button>
-        </Tooltip>
-        <Tooltip title="Select target and direction by clicking on the map twice." arrow>
-          <Button
-            variant="outlined"
-            size="small"
-            startIcon={<ExploreIcon />}
-            onClick={() => selectFromMap(true)}
-            sx={{ textTransform: 'none' }}
-          >
-            Set Target & Direction
-          </Button>
-        </Tooltip>
-      </Stack>
+      <Button
+        variant={editOpen ? 'contained' : 'outlined'}
+        size="small"
+        startIcon={<EditLocationIcon />}
+        onClick={() => onEditOpenChange(!editOpen)}
+        sx={{ textTransform: 'none', alignSelf: 'flex-start' }}
+      >
+        {editOpen ? 'Done' : 'Edit on Map'}
+      </Button>
 
       <Stack direction="row">
         <ControlledNumberInput

src/components/ToolbarActions.tsx

@@ -1,11 +1,10 @@
 import {
-  Explore as ExploreIcon,
+  EditLocation as EditLocationIcon,
   FileDownload as FileDownloadIcon,
-  ModeStandby as ModeStandbyIcon,
   Public as PublicIcon,
   Refresh as RefreshIcon
 } from '@mui/icons-material';
-import { CircularProgress, Divider, IconButton, Stack, Tooltip } from '@mui/material';
+import { CircularProgress, Divider, IconButton, Stack, Tooltip, useTheme } from '@mui/material';
 import React from 'react';
 
 import { Preset } from '../types';
@@ -15,9 +14,9 @@ import PresetSelector from './PresetSelector';
 interface ToolbarActionsProps {
   onMapButtonClick: () => void;
   onRefreshWindsClick: () => void;
-  onSelectTargetClick: () => void;
-  onSelectTargetAndHeadingClick: () => void;
   onExportClick: () => void;
+  targetEditOpen: boolean;
+  onTargetEditToggle: () => void;
   fetching: boolean;
   showPresets: boolean;
   presets: Preset[];
@@ -31,9 +30,9 @@ interface ToolbarActionsProps {
 export default function ToolbarActions({
   onMapButtonClick,
   onRefreshWindsClick,
-  onSelectTargetClick,
-  onSelectTargetAndHeadingClick,
   onExportClick,
+  targetEditOpen,
+  onTargetEditToggle,
   fetching,
   showPresets,
   presets,
@@ -47,8 +46,7 @@ export default function ToolbarActions({
     <Stack direction="row" spacing={1} alignItems="center">
       <MapButton onClick={onMapButtonClick} />
       <Divider orientation="vertical" flexItem />
-      <SelectTargetAndHeadingButton onClick={onSelectTargetAndHeadingClick} />
-      <SelectTargetButton onClick={onSelectTargetClick} />
+      <EditTargetButton active={targetEditOpen} onClick={onTargetEditToggle} />
       <RefreshWindsButton onClick={onRefreshWindsClick} fetching={fetching} />
       <ExportButton onClick={onExportClick} />
       <Divider orientation="vertical" flexItem />
@@ -76,21 +74,18 @@ function MapButton({ onClick }: { onClick: () => void }) {
   );
 }
 
-function SelectTargetButton({ onClick }: { onClick: () => void }) {
-  return (
-    <Tooltip title="Select target">
-      <IconButton type="button" aria-label="refresh-wind" onClick={onClick}>
-        <ModeStandbyIcon />
-      </IconButton>
-    </Tooltip>
-  );
-}
 
-function SelectTargetAndHeadingButton({ onClick }: { onClick: () => void }) {
+function EditTargetButton({ active, onClick }: { active: boolean; onClick: () => void }) {
+  const theme = useTheme();
   return (
-    <Tooltip title="Select target and direction">
-      <IconButton type="button" aria-label="refresh-wind" onClick={onClick}>
-        <ExploreIcon />
+    <Tooltip title={active ? 'Stop editing target' : 'Edit target on map'}>
+      <IconButton
+        type="button"
+        aria-label="edit-target"
+        onClick={onClick}
+        sx={active ? { color: theme.palette.primary.main } : undefined}
+      >
+        <EditLocationIcon />
       </IconButton>
     </Tooltip>
   );

src/hooks/index.ts

@@ -1,7 +1,6 @@
 export { AppStateProvider, useAppState, DEFAULT_TARGET, DEFAULT_SETTINGS } from './useAppState';
 export { useCustomCourses } from './useCustomCourses';
 export { useFetchForecast } from './useFetchForecast';
-export { useMapClickHandler } from './useMapClickHandler';
 export { usePresets } from './usePresets';
 export { TargetProvider, useTarget } from './useTargetContext';
 export { useUnits } from './useUnits';