refactor: confirm modal (#18238)

web/src/lib/components/admin-page/settings/auth/auth-settings.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
+  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { OAuthTokenEndpointAuthMethod, type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
   import { t } from 'svelte-i18n';
@@ -47,7 +47,7 @@
 </script>
 
 {#if isConfirmOpen}
-  <ConfirmDialog
+  <ConfirmModal
     title={$t('admin.disable_login')}
     onClose={(confirmed) => (confirmed ? handleSave(true) : (isConfirmOpen = false))}
   >
@@ -70,7 +70,7 @@
         </p>
       </div>
     {/snippet}
-  </ConfirmDialog>
+  </ConfirmModal>
 {/if}
 
 <div>

web/src/lib/components/album-page/album-options.svelte

@@ -2,10 +2,10 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import {
     AlbumUserRole,
@@ -191,7 +191,7 @@
 {/if}
 
 {#if selectedRemoveUser}
-  <ConfirmDialog
+  <ConfirmModal
     title={$t('album_remove_user')}
     prompt={$t('album_remove_user_confirmation', { values: { user: selectedRemoveUser.name } })}
     confirmText={$t('remove_user')}

web/src/lib/components/album-page/share-info-modal.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import {
     AlbumUserRole,
     getMyUser,
@@ -13,10 +20,6 @@
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { handleError } from '../../utils/handle-error';
-  import MenuOption from '../shared-components/context-menu/menu-option.svelte';
-  import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
-  import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
 
   interface Props {
     album: AlbumResponseDto;
@@ -140,7 +143,7 @@
 {/if}
 
 {#if selectedRemoveUser && selectedRemoveUser?.id === currentUser?.id}
-  <ConfirmDialog
+  <ConfirmModal
     title={$t('album_leave')}
     prompt={$t('album_leave_confirmation', { values: { album: album.albumName } })}
     confirmText={$t('leave')}
@@ -149,7 +152,7 @@
 {/if}
 
 {#if selectedRemoveUser && selectedRemoveUser?.id !== currentUser?.id}
-  <ConfirmDialog
+  <ConfirmModal
     title={$t('album_remove_user')}
     prompt={$t('album_remove_user_confirmation', { values: { user: selectedRemoveUser.name } })}
     confirmText={$t('remove_user')}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  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';
@@ -67,7 +67,7 @@
 </section>
 
 {#if $showCancelConfirmDialog}
-  <ConfirmDialog
+  <ConfirmModal
     title={$t('editor_close_without_save_title')}
     prompt={$t('editor_close_without_save_prompt')}
     cancelText={$t('no')}

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

@@ -1,9 +1,9 @@
 <script lang="ts">
   import Checkbox from '$lib/components/elements/checkbox.svelte';
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
+  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { t } from 'svelte-i18n';
-  import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
 
   interface Props {
     size: number;
@@ -23,7 +23,7 @@
   };
 </script>
 
-<ConfirmDialog
+<ConfirmModal
   title={$t('permanently_delete_assets_count', { values: { count: size } })}
   confirmText={$t('delete')}
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
@@ -42,4 +42,4 @@
       <Checkbox id="confirm-deletion-input" label={$t('do_not_show_again')} bind:checked />
     </div>
   {/snippet}
-</ConfirmDialog>
+</ConfirmModal>

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/forms/password-reset-success.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { copyToClipboard } from '$lib/utils';
   import { Code, IconButton, Text } from '@immich/ui';
   import { mdiContentCopy } from '@mdi/js';
@@ -13,7 +13,7 @@
   const { onClose, newPassword }: Props = $props();
 </script>
 
-<ConfirmDialog
+<ConfirmModal
   title={$t('password_reset_success')}
   confirmText={$t('done')}
   {onClose}
@@ -40,4 +40,4 @@
       <Text>{$t('admin.user_password_reset_description')}</Text>
     </div>
   {/snippet}
-</ConfirmDialog>
+</ConfirmModal>

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

@@ -1,4 +1,4 @@
-import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
 import { mount, unmount, type Component, type ComponentProps } from 'svelte';
 
 type OnCloseData<T> = T extends { onClose: (data?: infer R) => void } ? R : never;
@@ -34,8 +34,8 @@ class ModalManager {
     };
   }
 
-  showDialog(options: Omit<ComponentProps<typeof ConfirmDialog>, 'onClose'>) {
-    return this.show(ConfirmDialog, options);
+  showDialog(options: Omit<ComponentProps<typeof ConfirmModal>, 'onClose'>) {
+    return this.show(ConfirmModal, options);
   }
 }
 

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>