refactor: map modal (#19120)

web/src/lib/components/album-page/album-map.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import { timeToLoadTheMap } from '$lib/constants';
-  import { albumMapViewManager } from '$lib/managers/album-view-map.manager.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import MapModal from '$lib/modals/MapModal.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { handlePromiseError } from '$lib/utils';
-  import { delay } from '$lib/utils/asset-utils';
   import { navigate } from '$lib/utils/navigation';
   import { getAlbumInfo, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
-  import { IconButton, LoadingSpinner, Modal, ModalBody } from '@immich/ui';
+  import { IconButton } from '@immich/ui';
   import { mdiMapOutline } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -22,7 +21,6 @@
   let viewingAssets: string[] = $state([]);
   let viewingAssetCursor = 0;
 
-  let zoom = $derived(1);
   let mapMarkers: MapMarkerResponseDto[] = $state([]);
 
   onMount(async () => {
@@ -59,23 +57,16 @@
     return markers;
   }
 
-  function openMap() {
-    albumMapViewManager.isInMapView = true;
-  }
+  async function openMap() {
+    const assetIds = await modalManager.show(MapModal, { mapMarkers });
 
-  function closeMap() {
-    if (!$showAssetViewer) {
-      albumMapViewManager.isInMapView = false;
-    }
-  }
-
-  async function onViewAssets(assetIds: string[]) {
+    if (assetIds) {
       viewingAssets = assetIds;
       viewingAssetCursor = 0;
-    closeMap();
 
       await setAssetId(assetIds[0]);
     }
+  }
 
   async function navigateNext() {
     if (viewingAssetCursor < viewingAssets.length - 1) {
@@ -112,35 +103,7 @@
   aria-label={$t('map')}
 />
 
-{#if albumMapViewManager.isInMapView}
-  <Modal title={$t('map')} size="medium" onClose={closeMap}>
-    <ModalBody>
-      <div class="flex flex-col w-full h-full gap-2 border border-gray-300 dark:border-light rounded-2xl">
-        <div class="h-[500px] min-h-[300px] w-full">
-          {#await import('../shared-components/map/map.svelte')}
-            {#await delay(timeToLoadTheMap) then}
-              <!-- show the loading spinner only if loading the map takes too much time -->
-              <div class="flex items-center justify-center h-full w-full">
-                <LoadingSpinner />
-              </div>
-            {/await}
-          {:then { default: Map }}
-            <Map
-              center={undefined}
-              {zoom}
-              clickable={false}
-              bind:mapMarkers
-              onSelect={onViewAssets}
-              showSettings={false}
-              rounded
-            />
-          {/await}
-        </div>
-      </div>
-    </ModalBody>
-  </Modal>
-
-  <Portal target="body">
+<Portal target="body">
   {#if $showAssetViewer}
     {#await import('../../../lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
       <AssetViewer
@@ -157,5 +120,4 @@
       />
     {/await}
   {/if}
-  </Portal>
-{/if}
+</Portal>

web/src/lib/modals/MapModal.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { timeToLoadTheMap } from '$lib/constants';
+  import { delay } from '$lib/utils/asset-utils';
+  import type { MapMarkerResponseDto } from '@immich/sdk';
+  import { LoadingSpinner, Modal, ModalBody } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    onClose: (assetIds?: string[]) => void;
+    mapMarkers: MapMarkerResponseDto[];
+    zoom?: number;
+  };
+
+  let { onClose, mapMarkers, zoom }: Props = $props();
+</script>
+
+<Modal title={$t('map')} size="giant" {onClose}>
+  <ModalBody>
+    <div class="flex flex-col w-full h-full gap-2 border border-gray-300 dark:border-light rounded-2xl">
+      <div class="h-[75vh] min-h-[300px] w-full">
+        {#await import('../components/shared-components/map/map.svelte')}
+          {#await delay(timeToLoadTheMap) then}
+            <!-- show the loading spinner only if loading the map takes too much time -->
+            <div class="flex items-center justify-center h-full w-full">
+              <LoadingSpinner />
+            </div>
+          {/await}
+        {:then { default: Map }}
+          <Map
+            center={undefined}
+            {zoom}
+            clickable={false}
+            {mapMarkers}
+            onSelect={onClose}
+            showSettings={false}
+            rounded
+          />
+        {/await}
+      </div>
+    </div>
+  </ModalBody>
+</Modal>