refactor: dialog callbacks (#18034)

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

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { DateTime } from 'luxon';
-  import ConfirmDialog from './dialog/confirm-dialog.svelte';
-  import Combobox, { type ComboBoxOption } from './combobox.svelte';
-  import DateInput from '../elements/date-input.svelte';
   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;
@@ -138,8 +138,7 @@
   title={$t('edit_date_and_time')}
   prompt="Please select a new date:"
   disabled={!date.isValid}
-  onConfirm={handleConfirm}
-  {onCancel}
+  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 -->

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-  import ConfirmDialog from './dialog/confirm-dialog.svelte';
   import { timeDebounceOnSearch } from '$lib/constants';
-  import { handleError } from '$lib/utils/handle-error';
   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 LoadingSpinner from './loading-spinner.svelte';
-  import { delay } from '$lib/utils/asset-utils';
-  import { timeToLoadTheMap } from '$lib/constants';
-  import { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
-  import SearchBar from '../elements/search-bar.svelte';
   import { listNavigation } from '$lib/actions/list-navigation';
-  import { t } from 'svelte-i18n';
   import CoordinatesInput from '$lib/components/shared-components/coordinates-input.svelte';
   import type Map from '$lib/components/shared-components/map/map.svelte';
+  import { timeToLoadTheMap } from '$lib/constants';
+  import { delay } from '$lib/utils/asset-utils';
+  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 +112,12 @@
   };
 </script>
 
-<ConfirmDialog confirmColor="primary" title={$t('change_location')} width="wide" onConfirm={handleConfirm} {onCancel}>
+<ConfirmDialog
+  confirmColor="primary"
+  title={$t('change_location')}
+  width="wide"
+  onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
+>
   {#snippet promptSnippet()}
     <div class="flex flex-col w-full h-full gap-2">
       <div class="relative w-64 sm:w-96">

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import FullScreenModal from '../full-screen-modal.svelte';
-  import { t } from 'svelte-i18n';
-  import type { Snippet } from 'svelte';
   import { Button, type Color } from '@immich/ui';
+  import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import FullScreenModal from '../full-screen-modal.svelte';
 
   interface Props {
     title?: string;
@@ -14,8 +14,7 @@
     hideCancelButton?: boolean;
     disabled?: boolean;
     width?: 'wide' | 'narrow';
-    onCancel: () => void;
-    onConfirm: () => void;
+    onClose: (confirmed: boolean) => void;
     promptSnippet?: Snippet;
   }
 
@@ -29,17 +28,16 @@
     hideCancelButton = false,
     disabled = false,
     width = 'narrow',
-    onCancel,
-    onConfirm,
+    onClose,
     promptSnippet,
   }: Props = $props();
 
   const handleConfirm = () => {
-    onConfirm();
+    onClose(true);
   };
 </script>
 
-<FullScreenModal {title} onClose={onCancel} {width}>
+<FullScreenModal {title} onClose={() => onClose(false)} {width}>
   <div class="text-md py-5 text-center">
     {#if promptSnippet}{@render promptSnippet()}{:else}
       <p>{prompt}</p>
@@ -48,7 +46,7 @@
 
   {#snippet stickyBottom()}
     {#if !hideCancelButton}
-      <Button shape="round" color={cancelColor} fullWidth onclick={onCancel}>
+      <Button shape="round" color={cancelColor} fullWidth onclick={() => onClose(false)}>
         {cancelText}
       </Button>
     {/if}

web/src/lib/components/shared-components/dialog/dialog.ts

@@ -1,8 +1,7 @@
 import { writable } from 'svelte/store';
 
 type DialogActions = {
-  onConfirm: () => void;
-  onCancel: () => void;
+  onClose: (confirmed: boolean) => void;
 };
 
 type DialogOptions = {
@@ -24,13 +23,9 @@ function createDialogWrapper() {
     return new Promise<boolean>((resolve) => {
       const newDialog: Dialog = {
         ...options,
-        onConfirm: () => {
+        onClose: (confirmed) => {
           dialog.set(undefined);
-          resolve(true);
-        },
-        onCancel: () => {
-          dialog.set(undefined);
-          resolve(false);
+          resolve(confirmed);
         },
       };