feat(web): remember last chosen map location when editing (#16366)

Uses a global store to remember the last location chosen by a user when
editing asset locations. This fixes an annoyance when adding location
data to multiple assets in a row and having to zoom in the same area
everytime.

web/src/lib/components/shared-components/change-location.svelte

@@ -2,6 +2,7 @@
   import ConfirmDialog from './dialog/confirm-dialog.svelte';
   import { timeDebounceOnSearch } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
+  import { lastChosenLocation } from '$lib/stores/asset-editor.store';
 
   import { clickOutside } from '$lib/actions/click-outside';
   import LoadingSpinner from './loading-spinner.svelte';
@@ -13,6 +14,7 @@
   import { t } from 'svelte-i18n';
   import CoordinatesInput from '$lib/components/shared-components/coordinates-input.svelte';
   import Map from '$lib/components/shared-components/map/map.svelte';
+  import { get } from 'svelte/store';
 
   interface Point {
     lng: number;
@@ -36,9 +38,15 @@
   let hideSuggestion = $state(false);
   let mapElement = $state<ReturnType<typeof Map>>();
 
-  let lat = $derived(asset?.exifInfo?.latitude ?? undefined);
+  let previousLocation = get(lastChosenLocation);
-  let lng = $derived(asset?.exifInfo?.longitude ?? undefined);
+
-  let zoom = $derived(lat !== undefined && lng !== undefined ? 12.5 : 1);
+  let assetLat = $derived(asset?.exifInfo?.latitude ?? undefined);
+  let assetLng = $derived(asset?.exifInfo?.longitude ?? undefined);
+
+  let mapLat = $derived(assetLat ?? previousLocation?.lat ?? undefined);
+  let mapLng = $derived(assetLng ?? previousLocation?.lng ?? undefined);
+
+  let zoom = $derived(mapLat !== undefined && mapLng !== undefined ? 12.5 : 1);
 
   $effect(() => {
     if (places) {
@@ -53,6 +61,7 @@
 
   const handleConfirm = () => {
     if (point) {
+      lastChosenLocation.set(point);
       onConfirm(point);
     } else {
       onCancel();
@@ -160,12 +169,12 @@
         {:then { default: Map }}
           <Map
             bind:this={mapElement}
-            mapMarkers={lat !== undefined && lng !== undefined && asset
+            mapMarkers={assetLat !== undefined && assetLng !== undefined && asset
               ? [
                   {
                     id: asset.id,
-                    lat,
+                    lat: assetLat,
-                    lon: lng,
+                    lon: assetLng,
                     city: asset.exifInfo?.city ?? null,
                     state: asset.exifInfo?.state ?? null,
                     country: asset.exifInfo?.country ?? null,
@@ -173,7 +182,7 @@
                 ]
               : []}
             {zoom}
-            center={lat && lng ? { lat, lng } : undefined}
+            center={mapLat && mapLng ? { lat: mapLat, lng: mapLng } : undefined}
             simplified={true}
             clickable={true}
             onClickPoint={(selected) => (point = selected)}
@@ -183,8 +192,8 @@
 
       <div class="grid sm:grid-cols-2 gap-4 text-sm text-left mt-4">
         <CoordinatesInput
-          lat={point ? point.lat : lat}
+          lat={point ? point.lat : assetLat}
-          lng={point ? point.lng : lng}
+          lng={point ? point.lng : assetLng}
           onUpdate={(lat, lng) => {
             point = { lat, lng };
             mapElement?.addClipMapMarker(lng, lat);

web/src/lib/stores/asset-editor.store.ts

@@ -17,6 +17,7 @@ export const normaizedRorateDegrees = derived(rotateDegrees, (v) => {
 export const changedOriention = derived(normaizedRorateDegrees, () => get(normaizedRorateDegrees) % 180 > 0);
 //-----other
 export const showCancelConfirmDialog = writable<boolean | CallableFunction>(false);
+export const lastChosenLocation = writable<{ lng: number; lat: number } | null>(null);
 
 export const editTypes = [
   {