chore: migrate to immich/ui confirm modal (#20114)

web/package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@formatjs/icu-messageformat-parser": "^2.9.8",
         "@immich/sdk": "file:../open-api/typescript-sdk",
-        "@immich/ui": "^0.23.2",
+        "@immich/ui": "^0.23.5",
         "@mapbox/mapbox-gl-rtl-text": "0.2.3",
         "@mdi/js": "^7.4.47",
         "@photo-sphere-viewer/core": "^5.11.5",
@@ -1357,9 +1357,9 @@
       "link": true
     },
     "node_modules/@immich/ui": {
-      "version": "0.23.3",
-      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.23.3.tgz",
-      "integrity": "sha512-YbYJSv3HqDu2+6MmiHhLThSessZ6HkoVOWun/ZoGb8mKj5x/ZZ4AyXGPIqbyKTamsjzbcD9FInij70G+m4egkg==",
+      "version": "0.23.5",
+      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.23.5.tgz",
+      "integrity": "sha512-1wlFMmfDmtGC+Kcc8cYTT00mQaSumR41KEOOOmVn5Rw/8z9pUhpNY8mGl1AxY4qhtnaz+G3dH6vowYzL23D+YQ==",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@mdi/js": "^7.4.47",

web/package.json

@@ -28,7 +28,7 @@
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.23.2",
+    "@immich/ui": "^0.23.5",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",

web/src/lib/components/asset-viewer/editor/editor-panel.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { editTypes, showCancelConfirmDialog } from '$lib/stores/asset-editor.store';
   import { websocketEvents } from '$lib/stores/websocket';
   import { type AssetResponseDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
+  import { ConfirmModal, IconButton } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

web/src/lib/components/photos-page/delete-asset-dialog.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { Checkbox, Label } from '@immich/ui';
+  import { Checkbox, ConfirmModal, Label } from '@immich/ui';
   import { mdiDeleteForeverOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 

web/src/lib/components/shared-components/change-date.spec.ts

@@ -12,8 +12,8 @@ describe('ChangeDate component', () => {
 
   const getDateInput = () => screen.getByLabelText('date_and_time') as HTMLInputElement;
   const getTimeZoneInput = () => screen.getByLabelText('timezone') as HTMLInputElement;
-  const getCancelButton = () => screen.getByText('cancel');
-  const getConfirmButton = () => screen.getByText('confirm');
+  const getCancelButton = () => screen.getByText('Cancel');
+  const getConfirmButton = () => screen.getByText('Confirm');
 
   beforeEach(() => {
     vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
+  import { ConfirmModal } from '@immich/ui';
   import { mdiCalendarEditOutline } from '@mdi/js';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
@@ -184,8 +184,6 @@
   disabled={!date.isValid}
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
 >
-  <!-- @migration-task: migrate this slot by hand, `prompt` would shadow a prop on the parent component -->
-  <!-- @migration-task: migrate this slot by hand, `prompt` would shadow a prop on the parent component -->
   {#snippet promptSnippet()}
     <div class="flex flex-col text-start gap-2">
       <div class="flex flex-col">

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

@@ -6,11 +6,11 @@
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import type Map from '$lib/components/shared-components/map/map.svelte';
   import { timeDebounceOnSearch, timeToLoadTheMap } from '$lib/constants';
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { lastChosenLocation } from '$lib/stores/asset-editor.store';
   import { delay } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
+  import { ConfirmModal } from '@immich/ui';
   import { mdiMapMarkerMultipleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { get } from 'svelte/store';

web/src/lib/managers/modal-manager.svelte.ts

@@ -1,4 +1,4 @@
-import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
+import { ConfirmModal } from '@immich/ui';
 import { mount, unmount, type Component, type ComponentProps } from 'svelte';
 
 type OnCloseData<T> = T extends { onClose: (data?: infer R) => void }

web/src/lib/modals/AssetUpdateDecriptionConfirmModal.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
-  import { Input } from '@immich/ui';
+  import { ConfirmModal, Input } from '@immich/ui';
   import { mdiText } from '@mdi/js';
   import { t } from 'svelte-i18n';
 

web/src/lib/modals/ConfirmModal.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-  import { Button, HStack, Modal, ModalBody, ModalFooter, type Color } from '@immich/ui';
-  import type { Snippet } from 'svelte';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    title?: string;
-    prompt?: string;
-    confirmText?: string;
-    confirmColor?: Color;
-    disabled?: boolean;
-    size?: 'small' | 'medium';
-    icon?: string;
-    onClose: (confirmed: boolean) => void;
-    promptSnippet?: Snippet;
-  }
-
-  let {
-    title = $t('confirm'),
-    prompt = $t('are_you_sure_to_do_this'),
-    confirmText = $t('confirm'),
-    confirmColor = 'danger',
-    disabled = false,
-    size = 'small',
-    icon = undefined,
-    onClose,
-    promptSnippet,
-  }: Props = $props();
-
-  const handleConfirm = () => {
-    onClose(true);
-  };
-</script>
-
-<Modal {title} {icon} onClose={() => onClose(false)} {size}>
-  <ModalBody>
-    {#if promptSnippet}{@render promptSnippet()}{:else}
-      <p>{prompt}</p>
-    {/if}
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
-        {$t('cancel')}
-      </Button>
-      <Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
-        {confirmText}
-      </Button>
-    </HStack>
-  </ModalFooter>
-</Modal>

web/src/lib/modals/JobCreateModal.svelte

@@ -4,9 +4,9 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { createJob, ManualJobName } from '@immich/sdk';
+  import { ConfirmModal } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   type Props = { onClose: (confirmed: boolean) => void };

web/src/lib/modals/UserDeleteConfirmModal.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { serverConfig } from '$lib/stores/server-config.store';
   import { handleError } from '$lib/utils/handle-error';
   import { deleteUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk';
-  import { Checkbox, Label } from '@immich/ui';
+  import { Checkbox, ConfirmModal, Label } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {