Remove temporary crosshair and show pointer for selected site pins

Author: wilhel1812

functions/_lib/buildInfo.ts

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

src/components/MapView.tsx

@@ -1019,11 +1019,6 @@ 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..."
@@ -1463,16 +1458,6 @@ 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

@@ -825,14 +825,12 @@ input {
   box-shadow: 0 0 0 4px color-mix(in srgb, #ffd166 26%, transparent);
 }
 
+.site-pin.is-selected,
 .site-pin.is-temporary {
-  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 {
+.site-pin.is-selected::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -842,47 +840,29 @@ input {
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-top: 8px solid #ff9f43;
+  border-top: 8px solid #ffd166;
 }
 
-.site-precision-crosshair {
-  width: 24px;
-  height: 24px;
+.site-pin.is-temporary {
+  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;
-  pointer-events: none;
 }
 
-.site-precision-crosshair::before,
-.site-precision-crosshair::after {
+.site-pin.is-temporary::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;
+  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 {
-  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 {
   width: 12px;

src/lib/buildInfo.ts

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