Address Claude review feedback

- index.css: theme the placement popup tip for left/right anchors too, so
  the tip is not white in dark mode when the pin is near a map edge.
- map-controller.ts: coalesce the drag handler to one update per animation
  frame so a heavier onMove cannot stutter the drag.
- PhotosSource.tsx: dispose the drag pin and popup if the layer is removed
  before placement is finished, via a store subscription (the dialog closes
  right after, so the subscription owns the cleanup, not a React effect).
- tests: cover loadPhotosAtLocation (placed at center, never skips).

Author: giswqs

apps/geolibre-desktop/src/components/layout/add-data/sources/PhotosSource.tsx

@@ -123,14 +123,31 @@ export function PhotosSource() {
     // Hand the user a draggable pin on the map to fine-tune the position. It
     // lives outside React, so closing the dialog (below) does not cancel it;
     // each drag rewrites the layer's coordinates in the store.
-    source.shell.mapControllerRef.current?.startManualPlacement(manualCenter, {
-      hint: t("addData.photos.manualHint"),
-      doneLabel: t("common.done"),
-      onMove: (lngLat) =>
-        updateLayer(layer.id, {
-          geojson: relocatePhotoFeatures(result.featureCollection, lngLat),
-        }),
-    });
+    let unsubscribe = () => {};
+    const dispose = source.shell.mapControllerRef.current?.startManualPlacement(
+      manualCenter,
+      {
+        hint: t("addData.photos.manualHint"),
+        doneLabel: t("common.done"),
+        onMove: (lngLat) =>
+          updateLayer(layer.id, {
+            geojson: relocatePhotoFeatures(result.featureCollection, lngLat),
+          }),
+        onDone: () => unsubscribe(),
+      },
+    );
+    // If the user deletes the layer before finishing placement, the pin and its
+    // popup would otherwise linger on the map. Watch the store and dispose them
+    // when the layer disappears. (This dialog closes right after, so the
+    // subscription, not a React effect, owns the cleanup.)
+    if (dispose) {
+      unsubscribe = useAppStore.subscribe((state) => {
+        if (!state.layers.some((l) => l.id === layer.id)) {
+          dispose();
+          unsubscribe();
+        }
+      });
+    }
     // Close the dialog so the map (and the drag pin) become interactive; the
     // modal overlay would otherwise block dragging.
     source.shell.closeDialog();

apps/geolibre-desktop/src/index.css

@@ -1872,6 +1872,16 @@ body,
   border-top-color: hsl(var(--popover));
 }
 
+.geolibre-placement-popup-root.maplibregl-popup-anchor-left
+  .maplibregl-popup-tip {
+  border-right-color: hsl(var(--popover));
+}
+
+.geolibre-placement-popup-root.maplibregl-popup-anchor-right
+  .maplibregl-popup-tip {
+  border-left-color: hsl(var(--popover));
+}
+
 .geolibre-placement-popup {
   display: flex;
   flex-direction: column;

packages/map/src/map-controller.ts

@@ -913,10 +913,20 @@ export class MapController {
       .addTo(map);
 
     let disposed = false;
+    // The `drag` event fires once per pointer-move frame (60-120 Hz), and each
+    // call rewrites the store and re-syncs the source. Coalesce to one update
+    // per animation frame so a heavier `onMove` cannot stutter the drag.
+    let rafPending = false;
     const handleDrag = () => {
-      const next = marker.getLngLat();
-      popup.setLngLat(next);
-      options.onMove([next.lng, next.lat]);
+      if (rafPending) return;
+      rafPending = true;
+      requestAnimationFrame(() => {
+        rafPending = false;
+        if (disposed) return;
+        const next = marker.getLngLat();
+        popup.setLngLat(next);
+        options.onMove([next.lng, next.lat]);
+      });
     };
     const dispose = () => {
       if (disposed) return;

tests/geotagged-photos.test.ts

@@ -7,6 +7,7 @@ import {
   isPhotoDropFileName,
   isPhotoFileName,
   isValidLngLat,
+  loadPhotosAtLocation,
   PHOTO_IMAGE_EXTENSIONS,
   relocatePhotoFeatures,
 } from "../apps/geolibre-desktop/src/lib/geotagged-photos";
@@ -165,3 +166,25 @@ describe("relocatePhotoFeatures", () => {
     assert.deepEqual(collection.features[1].geometry.coordinates, [-100, 40]);
   });
 });
+
+describe("loadPhotosAtLocation", () => {
+  it("places every photo at the center and never skips one", async () => {
+    // A buffer with no EXIF: GPS is absent, so the GPS importer would skip it,
+    // but manual placement must still produce a feature at the center. The
+    // thumbnail is null here (no canvas decoder under node), which is fine.
+    const files = [
+      new File([new Uint8Array([0, 1, 2, 3])], "a.jpg", { type: "image/jpeg" }),
+      new File([new Uint8Array([4, 5, 6, 7])], "b.jpg", { type: "image/jpeg" }),
+    ];
+    const result = await loadPhotosAtLocation(files, [-100, 40]);
+    assert.equal(result.total, 2);
+    assert.equal(result.located, 2);
+    assert.equal(result.skipped, 0);
+    assert.equal(result.featureCollection.features.length, 2);
+    for (const feature of result.featureCollection.features) {
+      assert.deepEqual(feature.geometry.coordinates, [-100, 40]);
+    }
+    assert.equal(result.featureCollection.features[0].properties?.name, "a.jpg");
+    assert.equal(result.featureCollection.features[1].properties?.name, "b.jpg");
+  });
+});