From c1c9f30ea4b7879febc98188ba89a4a3f2ef1bc9 Mon Sep 17 00:00:00 2001
From: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
Date: Wed, 23 Jul 2025 22:56:56 +0200
Subject: [PATCH] chore: migrate to immich/ui confirm modal (#20114)

---
 web/package-lock.json                         |  8 +--
 web/package.json                              |  2 +-
 .../asset-viewer/editor/editor-panel.svelte   |  3 +-
 .../photos-page/delete-asset-dialog.svelte    |  3 +-
 .../shared-components/change-date.spec.ts     |  4 +-
 .../shared-components/change-date.svelte      |  4 +-
 .../shared-components/change-location.svelte  |  2 +-
 web/src/lib/managers/modal-manager.svelte.ts  |  2 +-
 .../AssetUpdateDecriptionConfirmModal.svelte  |  3 +-
 web/src/lib/modals/ConfirmModal.svelte        | 52 -------------------
 web/src/lib/modals/JobCreateModal.svelte      |  2 +-
 .../lib/modals/UserDeleteConfirmModal.svelte  |  3 +-
 12 files changed, 15 insertions(+), 73 deletions(-)
 delete mode 100644 web/src/lib/modals/ConfirmModal.svelte

diff --git a/web/package-lock.json b/web/package-lock.json
index 51f60a83c3..46b0a059ed 100644
--- a/web/package-lock.json
+++ b/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",
diff --git a/web/package.json b/web/package.json
index 753b0a15a6..7e1b769c52 100644
--- a/web/package.json
+++ b/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",
diff --git a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte b/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
index f4d5c69c62..203f1c6587 100644
--- a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
+++ b/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';
diff --git a/web/src/lib/components/photos-page/delete-asset-dialog.svelte b/web/src/lib/components/photos-page/delete-asset-dialog.svelte
index 2af215a34a..c04b5f39d0 100644
--- a/web/src/lib/components/photos-page/delete-asset-dialog.svelte
+++ b/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';
 
diff --git a/web/src/lib/components/shared-components/change-date.spec.ts b/web/src/lib/components/shared-components/change-date.spec.ts
index 38c72838e5..5b894a625d 100644
--- a/web/src/lib/components/shared-components/change-date.spec.ts
+++ b/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());
diff --git a/web/src/lib/components/shared-components/change-date.svelte b/web/src/lib/components/shared-components/change-date.svelte
index e5da909028..bf9cd376fb 100644
--- a/web/src/lib/components/shared-components/change-date.svelte
+++ b/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">
diff --git a/web/src/lib/components/shared-components/change-location.svelte b/web/src/lib/components/shared-components/change-location.svelte
index 6409774d37..0829adaf4e 100644
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/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';
diff --git a/web/src/lib/managers/modal-manager.svelte.ts b/web/src/lib/managers/modal-manager.svelte.ts
index 73967aef15..5b3babc84d 100644
--- a/web/src/lib/managers/modal-manager.svelte.ts
+++ b/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 }
diff --git a/web/src/lib/modals/AssetUpdateDecriptionConfirmModal.svelte b/web/src/lib/modals/AssetUpdateDecriptionConfirmModal.svelte
index 77458b6e04..d7066e8ea6 100644
--- a/web/src/lib/modals/AssetUpdateDecriptionConfirmModal.svelte
+++ b/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';
 
diff --git a/web/src/lib/modals/ConfirmModal.svelte b/web/src/lib/modals/ConfirmModal.svelte
deleted file mode 100644
index c60d7c3963..0000000000
--- a/web/src/lib/modals/ConfirmModal.svelte
+++ /dev/null
@@ -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>
diff --git a/web/src/lib/modals/JobCreateModal.svelte b/web/src/lib/modals/JobCreateModal.svelte
index dbb97fdcf7..95751cbb98 100644
--- a/web/src/lib/modals/JobCreateModal.svelte
+++ b/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 };
diff --git a/web/src/lib/modals/UserDeleteConfirmModal.svelte b/web/src/lib/modals/UserDeleteConfirmModal.svelte
index 3fde7a7ef9..bbb045ecb7 100644
--- a/web/src/lib/modals/UserDeleteConfirmModal.svelte
+++ b/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 {