refactor: confirm modal (#18238)

web/src/lib/modals/ConfirmModal.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { Button, 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;
+    cancelText?: string;
+    cancelColor?: Color;
+    hideCancelButton?: boolean;
+    disabled?: boolean;
+    size?: 'small' | 'medium';
+    onClose: (confirmed: boolean) => void;
+    promptSnippet?: Snippet;
+  }
+
+  let {
+    title = $t('confirm'),
+    prompt = $t('are_you_sure_to_do_this'),
+    confirmText = $t('confirm'),
+    confirmColor = 'danger',
+    cancelText = $t('cancel'),
+    cancelColor = 'secondary',
+    hideCancelButton = false,
+    disabled = false,
+    size = 'small',
+    onClose,
+    promptSnippet,
+  }: Props = $props();
+
+  const handleConfirm = () => {
+    onClose(true);
+  };
+</script>
+
+<Modal {title} onClose={() => onClose(false)} {size} class="bg-light text-dark">
+  <ModalBody>
+    {#if promptSnippet}{@render promptSnippet()}{:else}
+      <p>{prompt}</p>
+    {/if}
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-3 w-full">
+      {#if !hideCancelButton}
+        <Button shape="round" color={cancelColor} fullWidth onclick={() => onClose(false)}>
+          {cancelText}
+        </Button>
+      {/if}
+      <Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
+        {confirmText}
+      </Button>
+    </div>
+  </ModalFooter>
+</Modal>

web/src/lib/modals/JobCreateModal.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
-  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
   import {
     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 { t } from 'svelte-i18n';
@@ -44,7 +44,7 @@
   };
 </script>
 
-<ConfirmDialog
+<ConfirmModal
   confirmColor="primary"
   title={$t('admin.create_job')}
   disabled={!selectedJob}
@@ -62,4 +62,4 @@
       </div>
     </form>
   {/snippet}
-</ConfirmDialog>
+</ConfirmModal>

web/src/lib/modals/UserDeleteConfirmModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Checkbox from '$lib/components/elements/checkbox.svelte';
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.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 UserResponseDto } from '@immich/sdk';
@@ -39,7 +39,7 @@
   };
 </script>
 
-<ConfirmDialog
+<ConfirmModal
   title={$t('delete_user')}
   confirmText={forceDelete ? $t('permanently_delete') : $t('delete')}
   onClose={(confirmed) => (confirmed ? handleDeleteUser() : onClose())}
@@ -98,4 +98,4 @@
       {/if}
     </div>
   {/snippet}
-</ConfirmDialog>
+</ConfirmModal>

web/src/lib/modals/UserRestoreConfirmModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { restoreUserAdmin, type UserResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
@@ -22,7 +22,7 @@
   };
 </script>
 
-<ConfirmDialog
+<ConfirmModal
   title={$t('restore_user')}
   confirmText={$t('continue')}
   confirmColor="success"
@@ -37,4 +37,4 @@
       </FormatMessage>
     </p>
   {/snippet}
-</ConfirmDialog>
+</ConfirmModal>