chore: migrate to UI modal manager (#20116)

Author: danieldietzler

web/src/lib/components/admin-page/jobs/jobs-panel.svelte

@@ -3,11 +3,11 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { getJobName } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { JobCommand, JobName, sendJobCommand, type AllJobStatusResponseDto, type JobCommandDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import {
     mdiContentDuplicate,
     mdiFaceRecognition,

web/src/lib/components/admin-page/settings/auth/auth-settings.svelte

@@ -6,9 +6,9 @@
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import AuthDisableLoginConfirmModal from '$lib/modals/AuthDisableLoginConfirmModal.svelte';
   import { OAuthTokenEndpointAuthMethod, type SystemConfigDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { isEqual } from 'lodash-es';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';

web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte

@@ -4,11 +4,10 @@
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import EmailTemplatePreviewModal from '$lib/modals/EmailTemplatePreviewModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { type SystemConfigDto, type SystemConfigTemplateEmailsDto, getNotificationTemplateAdmin } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, modalManager } from '@immich/ui';
   import { mdiEyeOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import MapModal from '$lib/modals/MapModal.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { getAlbumInfo, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
+  import { IconButton, modalManager } from '@immich/ui';
   import { mdiMapOutline } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';

web/src/lib/components/album-page/albums-list.svelte

@@ -9,7 +9,6 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import AlbumEditModal from '$lib/modals/AlbumEditModal.svelte';
   import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
   import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
@@ -38,6 +37,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { normalizeSearchString } from '$lib/utils/string-utils';
   import { addUsersToAlbum, deleteAlbum, isHttpError, type AlbumResponseDto, type AlbumUserAddDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiDeleteOutline, mdiFolderDownloadOutline, mdiRenameOutline, mdiShareVariantOutline } from '@mdi/js';
   import { groupBy } from 'lodash-es';
   import { onMount, type Snippet } from 'svelte';

web/src/lib/components/asset-viewer/actions/add-to-album-action.svelte

@@ -3,11 +3,11 @@
   import type { OnAction } from '$lib/components/asset-viewer/actions/action';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { AssetAction } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import AlbumPickerModal from '$lib/modals/AlbumPickerModal.svelte';
   import { addAssetsToAlbum } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import type { AssetResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 

web/src/lib/components/asset-viewer/actions/keep-this-delete-others.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-
   import { AssetAction } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { keepThisDeleteOthers } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import type { AssetResponseDto, StackResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiPinOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction } from './action';

web/src/lib/components/asset-viewer/actions/set-profile-picture-action.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import ProfileImageCropperModal from '$lib/modals/ProfileImageCropperModal.svelte';
   import type { AssetResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiAccountCircleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 

web/src/lib/components/asset-viewer/actions/set-visibility-action.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-
   import { AssetAction } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetVisibility, updateAssets } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiLockOpenVariantOutline, mdiLockOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction, PreAction } from './action';

web/src/lib/components/asset-viewer/actions/share-action.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
   import { makeSharedLinkUrl } from '$lib/utils';
   import type { AssetResponseDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
+  import { IconButton, modalManager } from '@immich/ui';
   import { mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';