Add precision crosshair for temporary site placement

Author: wilhel1812

functions/_lib/buildInfo.ts

@@ -1,3 +1,3 @@
 export const APP_VERSION = "0.8.0";
-export const APP_COMMIT = "3ac8d7f5";
+export const APP_COMMIT = "7a3f74b3";
 export const APP_BUILD_LABEL = `v${APP_VERSION}+${APP_COMMIT}`;

src/components/MapView.tsx

@@ -1019,6 +1019,11 @@ export function MapView({ isMapExpanded, onToggleMapExpanded }: MapViewProps) {
   }, [hasSimulationTerrain, analysisBounds, srtmTiles, overlayDimensions]);
 
   const webglAvailable = useMemo(() => supportsWebgl(), []);
+  const pendingPrecisionPosition = pendingNewSiteDraft
+    ? { lat: pendingNewSiteDraft.lat, lon: pendingNewSiteDraft.lon }
+    : pendingSiteMove
+      ? { lat: pendingSiteMove.currentPosition.lat, lon: pendingSiteMove.currentPosition.lon }
+      : null;
   const isBackgroundBusy = isTerrainFetching || isTerrainRecommending || isElevationSyncing;
   const backgroundBusyLabel = isTerrainFetching
     ? "Fetching terrain data..."
@@ -1458,6 +1463,16 @@ export function MapView({ isMapExpanded, onToggleMapExpanded }: MapViewProps) {
           </Marker>
         ) : null}
 
+        {pendingPrecisionPosition ? (
+          <Marker
+            anchor="center"
+            latitude={pendingPrecisionPosition.lat}
+            longitude={pendingPrecisionPosition.lon}
+          >
+            <div className="site-precision-crosshair" aria-hidden="true" />
+          </Marker>
+        ) : null}
+
         {cursorPoint ? (
           <Marker
             anchor="center"

src/index.css

@@ -829,6 +829,59 @@ input {
   border-color: #ff9f43;
   background: color-mix(in srgb, #ff9f43 16%, var(--surface-2));
   box-shadow: 0 0 0 3px color-mix(in srgb, #ff9f43 18%, transparent);
+  position: relative;
+}
+
+.site-pin.is-temporary::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: calc(100% + 1px);
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 8px solid #ff9f43;
+}
+
+.site-precision-crosshair {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  pointer-events: none;
+}
+
+.site-precision-crosshair::before,
+.site-precision-crosshair::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: #ff9f43;
+  box-shadow: 0 0 0 1px color-mix(in srgb, #0c1218 70%, transparent);
+}
+
+.site-precision-crosshair::before {
+  width: 18px;
+  height: 2px;
+}
+
+.site-precision-crosshair::after {
+  width: 2px;
+  height: 18px;
+}
+
+.site-precision-crosshair > span {
+  display: none;
+}
+
+.site-precision-crosshair {
+  border: 2px solid color-mix(in srgb, #ff9f43 92%, #fff 8%);
+  border-radius: 999px;
+  box-shadow: 0 0 0 2px color-mix(in srgb, #0c1218 64%, transparent);
+  background: color-mix(in srgb, #ff9f43 16%, transparent);
 }
 
 .profile-map-cursor {

src/lib/buildInfo.ts

@@ -1,3 +1,3 @@
 export const APP_VERSION = "0.8.0";
-export const APP_COMMIT = "3ac8d7f5";
+export const APP_COMMIT = "7a3f74b3";
 export const APP_BUILD_LABEL = `v${APP_VERSION}+${APP_COMMIT}`;