refactor: confirm modal in album users modal (#18241)

web/src/lib/modals/AlbumUsersModal.svelte

@@ -1,13 +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 { modalManager } from '$lib/managers/modal-manager.svelte';
+  import { handleError } from '$lib/utils/handle-error';
   import {
     AlbumUserRole,
     getMyUser,
@@ -16,10 +16,10 @@
     type AlbumResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
+  import { Modal, ModalBody } from '@immich/ui';
   import { mdiDotsVertical } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { handleError } from '../../utils/handle-error';
 
   interface Props {
     album: AlbumResponseDto;
@@ -31,7 +31,6 @@
   let { album, onClose, onRemove, onRefreshAlbum }: Props = $props();
 
   let currentUser: UserResponseDto | undefined = $state();
-  let selectedRemoveUser: UserResponseDto | null = $state(null);
 
   let isOwned = $derived(currentUser?.id == album.ownerId);
 
@@ -43,16 +42,32 @@
     }
   });
 
-  const handleMenuRemove = (user: UserResponseDto) => {
+  const handleRemoveUser = async (user: UserResponseDto) => {
-    selectedRemoveUser = user;
+    if (!user) {
-  };
-
-  const handleRemoveUser = async () => {
-    if (!selectedRemoveUser) {
       return;
     }
 
-    const userId = selectedRemoveUser.id === currentUser?.id ? 'me' : selectedRemoveUser.id;
+    const userId = user.id === currentUser?.id ? 'me' : user.id;
+    let confirmed: boolean | undefined;
+
+    // eslint-disable-next-line unicorn/prefer-ternary
+    if (userId === 'me') {
+      confirmed = await modalManager.showDialog({
+        title: $t('album_leave'),
+        prompt: $t('album_leave_confirmation', { values: { album: album.albumName } }),
+        confirmText: $t('leave'),
+      });
+    } else {
+      confirmed = await modalManager.showDialog({
+        title: $t('album_remove_user'),
+        prompt: $t('album_remove_user_confirmation', { values: { user: user.name } }),
+        confirmText: $t('remove_user'),
+      });
+    }
+
+    if (!confirmed) {
+      return;
+    }
 
     try {
       await removeUserFromAlbum({ id: album.id, userId });
@@ -60,12 +75,10 @@
       const message =
         userId === 'me'
           ? $t('album_user_left', { values: { album: album.albumName } })
-          : $t('album_user_removed', { values: { user: selectedRemoveUser.name } });
+          : $t('album_user_removed', { values: { user: user.name } });
       notificationController.show({ type: NotificationType.Info, message });
     } catch (error) {
       handleError(error, $t('errors.unable_to_remove_album_users'));
-    } finally {
-      selectedRemoveUser = null;
     }
   };
 
@@ -79,14 +92,12 @@
       notificationController.show({ type: NotificationType.Info, message });
     } catch (error) {
       handleError(error, $t('errors.unable_to_change_album_user_role'));
-    } finally {
-      selectedRemoveUser = null;
     }
   };
 </script>
 
-{#if !selectedRemoveUser}
+<Modal title={$t('options')} size="small" {onClose}>
-  <FullScreenModal title={$t('options')} {onClose}>
+  <ModalBody>
     <section class="immich-scrollbar max-h-[400px] overflow-y-auto pb-4">
       <div class="flex w-full place-items-center justify-between gap-4 p-5">
         <div class="flex place-items-center gap-4">
@@ -125,12 +136,12 @@
                     text={$t('disallow_edits')}
                   />
                 {/if}
-                <MenuOption onClick={() => handleMenuRemove(user)} text={$t('remove')} />
+                <MenuOption onClick={() => handleRemoveUser(user)} text={$t('remove')} />
               </ButtonContextMenu>
             {:else if user.id == currentUser?.id}
               <button
                 type="button"
-                onclick={() => (selectedRemoveUser = user)}
+                onclick={() => handleRemoveUser(user)}
                 class="text-sm font-medium text-immich-primary transition-colors hover:text-immich-primary/75 dark:text-immich-dark-primary"
                 >{$t('leave')}</button
               >
@@ -139,23 +150,5 @@
         </div>
       {/each}
     </section>
-  </FullScreenModal>
+  </ModalBody>
-{/if}
+</Modal>
-
-{#if selectedRemoveUser && selectedRemoveUser?.id === currentUser?.id}
-  <ConfirmModal
-    title={$t('album_leave')}
-    prompt={$t('album_leave_confirmation', { values: { album: album.albumName } })}
-    confirmText={$t('leave')}
-    onClose={(confirmed) => (confirmed ? handleRemoveUser() : (selectedRemoveUser = null))}
-  />
-{/if}
-
-{#if selectedRemoveUser && selectedRemoveUser?.id !== currentUser?.id}
-  <ConfirmModal
-    title={$t('album_remove_user')}
-    prompt={$t('album_remove_user_confirmation', { values: { user: selectedRemoveUser.name } })}
-    confirmText={$t('remove_user')}
-    onClose={(confirmed) => (confirmed ? handleRemoveUser() : (selectedRemoveUser = null))}
-  />
-{/if}

web/src/lib/modals/ConfirmModal.svelte

@@ -10,7 +10,7 @@
     confirmColor?: Color;
     disabled?: boolean;
     size?: 'small' | 'medium';
-    onClose: (confirmed: boolean) => void;
+    onClose: (confirmed?: boolean) => void;
     promptSnippet?: Snippet;
   }
 

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

@@ -6,7 +6,6 @@
   import AlbumOptions from '$lib/components/album-page/album-options.svelte';
   import AlbumSummary from '$lib/components/album-page/album-summary.svelte';
   import AlbumTitle from '$lib/components/album-page/album-title.svelte';
-  import ShareInfoModal from '$lib/components/album-page/share-info-modal.svelte';
   import ActivityStatus from '$lib/components/asset-viewer/activity-status.svelte';
   import ActivityViewer from '$lib/components/asset-viewer/activity-viewer.svelte';
   import Button from '$lib/components/elements/buttons/button.svelte';
@@ -37,6 +36,7 @@
   import { activityManager } from '$lib/managers/activity-manager.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
+  import AlbumUsersModal from '$lib/modals/AlbumUsersModal.svelte';
   import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -723,7 +723,7 @@
 </div>
 
 {#if viewMode === AlbumPageViewMode.VIEW_USERS}
-  <ShareInfoModal
+  <AlbumUsersModal
     onClose={() => (viewMode = AlbumPageViewMode.VIEW)}
     {album}
     onRemove={(userId) => handleRemoveUser(userId, AlbumPageViewMode.VIEW_USERS)}