refactor: confirm modal (#18238)

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

@@ -1,9 +1,9 @@
 <script lang="ts">
+  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
   import DateInput from '../elements/date-input.svelte';
   import Combobox, { type ComboBoxOption } from './combobox.svelte';
-  import ConfirmDialog from './dialog/confirm-dialog.svelte';
 
   interface Props {
     initialDate?: DateTime;
@@ -133,7 +133,7 @@
   let date = $derived(DateTime.fromISO(selectedDate, { zone: selectedOption?.value, setZone: true }));
 </script>
 
-<ConfirmDialog
+<ConfirmModal
   confirmColor="primary"
   title={$t('edit_date_and_time')}
   prompt="Please select a new date:"
@@ -159,4 +159,4 @@
       </div>
     </div>
   {/snippet}
-</ConfirmDialog>
+</ConfirmModal>

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

@@ -1,20 +1,18 @@
 <script lang="ts">
-  import { timeDebounceOnSearch } from '$lib/constants';
-  import { lastChosenLocation } from '$lib/stores/asset-editor.store';
-  import { handleError } from '$lib/utils/handle-error';
-  import ConfirmDialog from './dialog/confirm-dialog.svelte';
-
   import { clickOutside } from '$lib/actions/click-outside';
   import { listNavigation } from '$lib/actions/list-navigation';
+  import SearchBar from '$lib/components/elements/search-bar.svelte';
   import CoordinatesInput from '$lib/components/shared-components/coordinates-input.svelte';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import type Map from '$lib/components/shared-components/map/map.svelte';
-  import { timeToLoadTheMap } from '$lib/constants';
+  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 { t } from 'svelte-i18n';
   import { get } from 'svelte/store';
-  import SearchBar from '../elements/search-bar.svelte';
-  import LoadingSpinner from './loading-spinner.svelte';
   interface Point {
     lng: number;
     lat: number;
@@ -112,7 +110,7 @@
   };
 </script>
 
-<ConfirmDialog
+<ConfirmModal
   confirmColor="primary"
   title={$t('change_location')}
   size="medium"
@@ -208,4 +206,4 @@
       </div>
     </div>
   {/snippet}
-</ConfirmDialog>
+</ConfirmModal>

web/src/lib/components/shared-components/dialog/confirm-dialog.svelte

@@ -1,58 +0,0 @@
-<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>