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

* wrapper

* no more callback

* refactor: wip

* refactor: wip

* refactor: wip

* pr feedback

* fix

* pr feedback

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -24,7 +24,6 @@
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
@@ -81,6 +80,7 @@
   } from '@mdi/js';
   import { fly } from 'svelte/transition';
   import type { PageData } from './$types';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
 
   export let data: PageData;
 
@@ -98,7 +98,6 @@
   }
 
   enum ViewMode {
-    CONFIRM_DELETE = 'confirm-delete',
     LINK_SHARING = 'link-sharing',
     SELECT_USERS = 'select-users',
     SELECT_THUMBNAIL = 'select-thumbnail',
@@ -248,10 +247,7 @@
       viewMode = ViewMode.VIEW;
       return;
     }
-    if (viewMode === ViewMode.CONFIRM_DELETE) {
-      viewMode = ViewMode.VIEW;
-      return;
-    }
+
     if (viewMode === ViewMode.SELECT_ASSETS) {
       handleCloseSelectAssets();
       return;
@@ -353,6 +349,16 @@
   };
 
   const handleRemoveAlbum = async () => {
+    const isConfirmed = await dialogController.show({
+      id: 'remove-album',
+      prompt: `Are you sure you want to delete the album ${album.albumName}?\nIf this album is shared, other users will not be able to access it anymore.`,
+    });
+
+    if (!isConfirmed) {
+      viewMode = ViewMode.VIEW;
+      return;
+    }
+
     try {
       await deleteAlbum({ id: album.id });
       await goto(backUrl);
@@ -471,11 +477,7 @@
                         on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)}
                       />
                       <MenuOption icon={mdiCogOutline} text="Options" on:click={() => (viewMode = ViewMode.OPTIONS)} />
-                      <MenuOption
-                        icon={mdiDeleteOutline}
-                        text="Delete album"
-                        on:click={() => (viewMode = ViewMode.CONFIRM_DELETE)}
-                      />
+                      <MenuOption icon={mdiDeleteOutline} text="Delete album" on:click={() => handleRemoveAlbum()} />
                     </ContextMenu>
                   {/if}
                 </div>
@@ -697,21 +699,6 @@
   />
 {/if}
 
-{#if viewMode === ViewMode.CONFIRM_DELETE}
-  <ConfirmDialogue
-    id="delete-album-modal"
-    title="Delete album"
-    confirmText="Delete"
-    onConfirm={handleRemoveAlbum}
-    onClose={() => (viewMode = ViewMode.VIEW)}
-  >
-    <svelte:fragment slot="prompt">
-      <p>Are you sure you want to delete the album <b>{album.albumName}</b>?</p>
-      <p>If this album is shared, other users will not be able to access it anymore.</p>
-    </svelte:fragment>
-  </ConfirmDialogue>
-{/if}
-
 {#if viewMode === ViewMode.OPTIONS && $user}
   <AlbumOptions
     {album}

web/src/routes/(user)/sharing/sharedlinks/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
   import {
@@ -15,12 +15,11 @@
   import { getAllSharedLinks, removeSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
   import { mdiArrowLeft } from '@mdi/js';
   import { onMount } from 'svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
 
   let sharedLinks: SharedLinkResponseDto[] = [];
   let editSharedLink: SharedLinkResponseDto | null = null;
 
-  let deleteLinkId: string | null = null;
-
   const refresh = async () => {
     sharedLinks = await getAllSharedLinks();
   };
@@ -29,15 +28,21 @@
     await refresh();
   });
 
-  const handleDeleteLink = async () => {
-    if (!deleteLinkId) {
+  const handleDeleteLink = async (id: string) => {
+    const isConfirmed = await dialogController.show({
+      id: 'delete-shared-link',
+      title: 'Delete shared link',
+      prompt: 'Are you sure you want to delete this shared link?',
+      confirmText: 'Delete',
+    });
+
+    if (!isConfirmed) {
       return;
     }
 
     try {
-      await removeSharedLink({ id: deleteLinkId });
+      await removeSharedLink({ id });
       notificationController.show({ message: 'Deleted shared link', type: NotificationType.Info });
-      deleteLinkId = null;
       await refresh();
     } catch (error) {
       handleError(error, 'Unable to delete shared link');
@@ -73,7 +78,7 @@
       {#each sharedLinks as link (link.id)}
         <SharedLinkCard
           {link}
-          on:delete={() => (deleteLinkId = link.id)}
+          on:delete={() => handleDeleteLink(link.id)}
           on:edit={() => (editSharedLink = link)}
           on:copy={() => handleCopyLink(link.key)}
         />
@@ -85,14 +90,3 @@
 {#if editSharedLink}
   <CreateSharedLinkModal editingLink={editSharedLink} onClose={handleEditDone} />
 {/if}
-
-{#if deleteLinkId}
-  <ConfirmDialogue
-    id="delete-shared-link-modal"
-    title="Delete shared link"
-    prompt="Are you sure you want to delete this shared link?"
-    confirmText="Delete"
-    onConfirm={() => handleDeleteLink()}
-    onClose={() => (deleteLinkId = null)}
-  />
-{/if}

web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -9,7 +9,6 @@
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import {
     NotificationType,
@@ -24,6 +23,7 @@
   import { mdiDeleteOutline, mdiHistory } from '@mdi/js';
   import type { PageData } from './$types';
   import { handlePromiseError } from '$lib/utils';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
 
   export let data: PageData;
 
@@ -32,10 +32,18 @@
   const assetStore = new AssetStore({ isTrashed: true });
   const assetInteractionStore = createAssetInteractionStore();
   const { isMultiSelectState, selectedAssets } = assetInteractionStore;
-  let isShowEmptyConfirmation = false;
 
   const handleEmptyTrash = async () => {
-    isShowEmptyConfirmation = false;
+    const isConfirmed = await dialogController.show({
+      id: 'empty-trash',
+      prompt:
+        'Are you sure you want to empty the trash? This will remove all the assets in trash permanently from Immich.\nYou cannot undo this action!',
+    });
+
+    if (!isConfirmed) {
+      return;
+    }
+
     try {
       await emptyTrash();
 
@@ -87,7 +95,7 @@
           Restore all
         </div>
       </LinkButton>
-      <LinkButton on:click={() => (isShowEmptyConfirmation = true)}>
+      <LinkButton on:click={() => handleEmptyTrash()}>
         <div class="flex place-items-center gap-2 text-sm">
           <Icon path={mdiDeleteOutline} size="18" />
           Empty trash
@@ -103,18 +111,3 @@
     </AssetGrid>
   </UserPageLayout>
 {/if}
-
-{#if isShowEmptyConfirmation}
-  <ConfirmDialogue
-    id="empty-trash-modal"
-    title="Empty trash"
-    confirmText="Empty"
-    onConfirm={handleEmptyTrash}
-    onClose={() => (isShowEmptyConfirmation = false)}
-  >
-    <svelte:fragment slot="prompt">
-      <p>Are you sure you want to empty the trash? This will remove all the assets in trash permanently from Immich.</p>
-      <p><b>You cannot undo this action!</b></p>
-    </svelte:fragment>
-  </ConfirmDialogue>
-{/if}