chore: migrate to UI modal manager (#20116)

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -4,7 +4,6 @@
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -20,6 +19,7 @@
   import { navigate } from '$lib/utils/navigation';
   import { isTimelineAsset, toTimelineAsset } from '$lib/utils/timeline-util';
   import { AssetVisibility, type AssetResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { debounce } from 'lodash-es';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../../asset-viewer/asset-viewer.svelte';

web/src/lib/components/shared-components/map/map.svelte

@@ -10,13 +10,13 @@
   import { afterNavigate } from '$app/navigation';
   import Icon from '$lib/components/elements/icon.svelte';
   import { Theme } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { themeManager } from '$lib/managers/theme-manager.svelte';
   import MapSettingsModal from '$lib/modals/MapSettingsModal.svelte';
   import { mapSettings } from '$lib/stores/preferences.store';
   import { serverConfig } from '$lib/stores/server-config.store';
   import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { getMapMarkers, type MapMarkerResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import mapboxRtlUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js?url';
   import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
   import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';

web/src/lib/components/shared-components/modal-header.svelte

@@ -1,49 +0,0 @@
-<script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
-  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
-  import { IconButton } from '@immich/ui';
-  import { mdiClose } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    /**
-     * Unique identifier for the header text.
-     */
-    id: string;
-    title: string;
-    onClose: () => void;
-    /**
-     * If true, the logo will be displayed next to the modal title.
-     */
-    showLogo?: boolean;
-    /**
-     * Optional icon to display next to the modal title, if `showLogo` is false.
-     */
-    icon?: string;
-  }
-
-  let { id, title, onClose, showLogo = false, icon = undefined }: Props = $props();
-</script>
-
-<div class="flex place-items-center justify-between px-5 pb-3">
-  <div class="flex gap-2 place-items-center">
-    {#if showLogo}
-      <ImmichLogo noText={true} class="h-[40px]" />
-    {:else if icon}
-      <Icon path={icon} size={24} ariaHidden={true} class="text-immich-primary dark:text-immich-dark-primary" />
-    {/if}
-    <h1 {id}>
-      {title}
-    </h1>
-  </div>
-
-  <IconButton
-    shape="round"
-    color="secondary"
-    variant="ghost"
-    onclick={onClose}
-    icon={mdiClose}
-    size="medium"
-    aria-label={$t('close')}
-  />
-</div>

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -3,13 +3,12 @@
   import { focusTrap } from '$lib/actions/focus-trap';
   import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import AvatarEditModal from '$lib/modals/AvatarEditModal.svelte';
   import HelpAndFeedbackModal from '$lib/modals/HelpAndFeedbackModal.svelte';
   import { user } from '$lib/stores/user.store';
   import { userInteraction } from '$lib/stores/user.svelte';
   import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
-  import { Button, IconButton } from '@immich/ui';
+  import { Button, IconButton, modalManager } from '@immich/ui';
   import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -3,14 +3,13 @@
   import { focusOutside } from '$lib/actions/focus-outside';
   import { shortcuts } from '$lib/actions/shortcut';
   import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import SearchFilterModal from '$lib/modals/SearchFilterModal.svelte';
   import { searchStore } from '$lib/stores/search.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { generateId } from '$lib/utils/generate-id';
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
   import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
+  import { IconButton, modalManager } from '@immich/ui';
   import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
   import { onDestroy, tick } from 'svelte';
   import { t } from 'svelte-i18n';

web/src/lib/components/shared-components/side-bar/purchase-info.svelte

@@ -5,7 +5,6 @@
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
   import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import PurchaseModal from '$lib/modals/PurchaseModal.svelte';
   import { purchaseStore } from '$lib/stores/purchase.store';
   import { preferences } from '$lib/stores/user.store';
@@ -13,11 +12,11 @@
   import { handleError } from '$lib/utils/handle-error';
   import { getButtonVisibility } from '$lib/utils/purchase-utils';
   import { updateMyPreferences } from '@immich/sdk';
-  import { Button, IconButton } from '@immich/ui';
+  import { Button, IconButton, modalManager } from '@immich/ui';
   import { mdiClose, mdiInformationOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
   import { SvelteDate } from 'svelte/reactivity';
+  import { fade } from 'svelte/transition';
 
   let showMessage = $state(false);
   let hoverMessage = $state(false);

web/src/lib/components/shared-components/side-bar/server-status.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import ServerAboutModal from '$lib/modals/ServerAboutModal.svelte';
   import { userInteraction } from '$lib/stores/user.svelte';
   import { websocketStore } from '$lib/stores/websocket';
@@ -11,6 +10,7 @@
     type ServerAboutResponseDto,
     type ServerVersionHistoryResponseDto,
   } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiAlert } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';