refactor(web): ConfirmDialog and dialogController (#9716)

* wrapper

* no more callback

* refactor: wip

* refactor: wip

* refactor: wip

* pr feedback

* fix

* pr feedback

web/src/lib/components/photos-page/actions/remove-from-album.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import {
     NotificationType,
     notificationController,
@@ -10,6 +9,7 @@
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { s } from '$lib/utils';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
 
   export let album: AlbumResponseDto;
   export let onRemove: ((assetIds: string[]) => void) | undefined;
@@ -17,9 +17,16 @@
 
   const { getAssets, clearSelect } = getAssetControlContext();
 
-  let isShowConfirmation = false;
-
   const removeFromAlbum = async () => {
+    const isConfirmed = await dialogController.show({
+      id: 'remove-from-album',
+      prompt: `Are you sure you want to remove ${getAssets().size} asset${s(getAssets().size)} from the album?`,
+    });
+
+    if (!isConfirmed) {
+      return;
+    }
+
     try {
       const ids = [...getAssets()].map((a) => a.id);
       const results = await removeAssetFromAlbum({
@@ -44,36 +51,12 @@
         type: NotificationType.Error,
         message: 'Error removing assets from album, check console for more details',
       });
-    } finally {
-      isShowConfirmation = false;
     }
   };
 </script>
 
 {#if menuItem}
-  <MenuOption text="Remove from album" icon={mdiImageRemoveOutline} on:click={() => (isShowConfirmation = true)} />
+  <MenuOption text="Remove from album" icon={mdiImageRemoveOutline} on:click={removeFromAlbum} />
 {:else}
-  <CircleIconButton title="Remove from album" icon={mdiDeleteOutline} on:click={() => (isShowConfirmation = true)} />
-{/if}
-
-{#if isShowConfirmation}
-  <ConfirmDialogue
-    id="remove-from-album-modal"
-    title="Remove from {album.albumName}"
-    confirmText="Remove"
-    onConfirm={removeFromAlbum}
-    onClose={() => (isShowConfirmation = false)}
-  >
-    <svelte:fragment slot="prompt">
-      <p>
-        Are you sure you want to remove
-        {#if getAssets().size > 1}
-          these <b>{getAssets().size}</b> assets
-        {:else}
-          this asset
-        {/if}
-        from the album?
-      </p>
-    </svelte:fragment>
-  </ConfirmDialogue>
+  <CircleIconButton title="Remove from album" icon={mdiDeleteOutline} on:click={removeFromAlbum} />
 {/if}

web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte

@@ -1,20 +1,29 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { getKey } from '$lib/utils';
+  import { getKey, s } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { removeSharedLinkAssets, type SharedLinkResponseDto } from '@immich/sdk';
   import { mdiDeleteOutline } from '@mdi/js';
-  import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
   import { NotificationType, notificationController } from '../../shared-components/notification/notification';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
 
   export let sharedLink: SharedLinkResponseDto;
 
-  let removing = false;
-
   const { getAssets, clearSelect } = getAssetControlContext();
 
   const handleRemove = async () => {
+    const isConfirmed = await dialogController.show({
+      id: 'remove-from-shared-link',
+      title: 'Remove assets?',
+      prompt: `Are you sure you want to remove ${getAssets().size} asset${s(getAssets().size)} from this shared link?`,
+      confirmText: 'Remove',
+    });
+
+    if (!isConfirmed) {
+      return;
+    }
+
     try {
       const results = await removeSharedLinkAssets({
         id: sharedLink.id,
@@ -46,15 +55,4 @@
   };
 </script>
 
-<CircleIconButton title="Remove from shared link" on:click={() => (removing = true)} icon={mdiDeleteOutline} />
-
-{#if removing}
-  <ConfirmDialogue
-    id="remove-assets-modal"
-    title="Remove assets?"
-    prompt="Are you sure you want to remove {getAssets().size} asset(s) from this shared link?"
-    confirmText="Remove"
-    onConfirm={() => handleRemove()}
-    onClose={() => (removing = false)}
-  />
-{/if}
+<CircleIconButton title="Remove from shared link" on:click={handleRemove} icon={mdiDeleteOutline} />