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 { modalManager } from '$lib/managers/modal-manager.svelte';
-  import { albumMapViewManager } from '$lib/managers/album-view-map.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,24 +57,17 @@
     return markers;
   }
 
-  function openMap() {
+  async function openMap() {
-    albumMapViewManager.isInMapView = true;
+    const assetIds = await modalManager.show(MapModal, { mapMarkers });
-  }
 
-  function closeMap() {
+    if (assetIds) {
-    if (!$showAssetViewer) {
+      viewingAssets = assetIds;
-      albumMapViewManager.isInMapView = false;
+      viewingAssetCursor = 0;
+
+      await setAssetId(assetIds[0]);
     }
   }
 
-  async function onViewAssets(assetIds: string[]) {
-    viewingAssets = assetIds;
-    viewingAssetCursor = 0;
-    closeMap();
-
-    await setAssetId(assetIds[0]);
-  }
-
   async function navigateNext() {
     if (viewingAssetCursor < viewingAssets.length - 1) {
       await setAssetId(viewingAssets[++viewingAssetCursor]);
@@ -112,50 +103,21 @@
   aria-label={$t('map')}
 />
 
-{#if albumMapViewManager.isInMapView}
+<Portal target="body">
-  <Modal title={$t('map')} size="medium" onClose={closeMap}>
+  {#if $showAssetViewer}
-    <ModalBody>
+    {#await import('../../../lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
-      <div class="flex flex-col w-full h-full gap-2 border border-gray-300 dark:border-light rounded-2xl">
+      <AssetViewer
-        <div class="h-[500px] min-h-[300px] w-full">
+        asset={$viewingAsset}
-          {#await import('../shared-components/map/map.svelte')}
+        showNavigation={viewingAssets.length > 1}
-            {#await delay(timeToLoadTheMap) then}
+        onNext={navigateNext}
-              <!-- show the loading spinner only if loading the map takes too much time -->
+        onPrevious={navigatePrevious}
-              <div class="flex items-center justify-center h-full w-full">
+        onRandom={navigateRandom}
-                <LoadingSpinner />
+        onClose={() => {
-              </div>
+          assetViewingStore.showAssetViewer(false);
-            {/await}
+          handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
-          {:then { default: Map }}
+        }}
-            <Map
+        isShared={false}
-              center={undefined}
+      />
-              {zoom}
+    {/await}
-              clickable={false}
+  {/if}
-              bind:mapMarkers
+</Portal>
-              onSelect={onViewAssets}
-              showSettings={false}
-              rounded
-            />
-          {/await}
-        </div>
-      </div>
-    </ModalBody>
-  </Modal>
-
-  <Portal target="body">
-    {#if $showAssetViewer}
-      {#await import('../../../lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
-        <AssetViewer
-          asset={$viewingAsset}
-          showNavigation={viewingAssets.length > 1}
-          onNext={navigateNext}
-          onPrevious={navigatePrevious}
-          onRandom={navigateRandom}
-          onClose={() => {
-            assetViewingStore.showAssetViewer(false);
-            handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
-          }}
-          isShared={false}
-        />
-      {/await}
-    {/if}
-  </Portal>
-{/if}

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>