chore(web): move BaseModal to callback pattern (#8696)

* chore(web): move BaseModal to callback to close

* chore: add question mark

web/src/lib/components/album-page/albums-list.svelte

@@ -442,7 +442,7 @@
     {#if showShareByURLModal}
       <CreateSharedLinkModal
         albumId={albumToShare.id}
-        on:close={() => closeShareModal()}
+        onClose={() => closeShareModal()}
         on:created={() => albumToShare && handleSharedLinkCreated(albumToShare)}
       />
     {:else}
@@ -450,7 +450,7 @@
         album={albumToShare}
         on:select={({ detail: users }) => handleAddUsers(users)}
         on:share={() => (showShareByURLModal = true)}
-        on:close={() => closeShareModal()}
+        onClose={() => closeShareModal()}
       />
     {/if}
   {/if}

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

@@ -13,10 +13,10 @@
   import UserAvatar from '../shared-components/user-avatar.svelte';
 
   export let album: AlbumResponseDto;
+  export let onClose: () => void;
 
   const dispatch = createEventDispatcher<{
     remove: string;
-    close: void;
   }>();
 
   let currentUser: UserResponseDto;
@@ -66,7 +66,7 @@
 </script>
 
 {#if !selectedRemoveUser}
-  <BaseModal id="share-info-modal" title="Options" on:close>
+  <BaseModal id="share-info-modal" title="Options" {onClose}>
     <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">
@@ -134,7 +134,7 @@
   <ConfirmDialogue
     id="remove-user-modal"
     title="Remove user?"
-    prompt="Are you sure you want to remove {selectedRemoveUser.name}"
+    prompt="Are you sure you want to remove {selectedRemoveUser.name}?"
     confirmText="Remove"
     onConfirm={handleRemoveUser}
     onClose={() => (selectedRemoveUser = null)}

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -16,13 +16,13 @@
   import UserAvatar from '../shared-components/user-avatar.svelte';
 
   export let album: AlbumResponseDto;
+  export let onClose: () => void;
   let users: UserResponseDto[] = [];
   let selectedUsers: UserResponseDto[] = [];
 
   const dispatch = createEventDispatcher<{
     select: UserResponseDto[];
     share: void;
-    close: void;
   }>();
   let sharedLinks: SharedLinkResponseDto[] = [];
   onMount(async () => {
@@ -54,7 +54,7 @@
   };
 </script>
 
-<BaseModal id="user-selection-modal" title="Invite to album" showLogo on:close>
+<BaseModal id="user-selection-modal" title="Invite to album" showLogo {onClose}>
   {#if selectedUsers.length > 0}
     <div class="mb-2 flex flex-wrap place-items-center gap-4 overflow-x-auto px-5 py-2 sticky">
       <p class="font-medium">To</p>

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

@@ -756,7 +756,7 @@
         shared={addToSharedAlbum}
         on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
         on:album={({ detail }) => handleAddToAlbum(detail)}
-        on:close={() => (isShowAlbumPicker = false)}
+        onClose={() => (isShowAlbumPicker = false)}
       />
     {/if}
 
@@ -770,11 +770,11 @@
     {/if}
 
     {#if isShowProfileImageCrop}
-      <ProfileImageCropper {asset} on:close={() => (isShowProfileImageCrop = false)} />
+      <ProfileImageCropper {asset} onClose={() => (isShowProfileImageCrop = false)} />
     {/if}
 
     {#if isShowShareModal}
-      <CreateSharedLinkModal assetIds={[asset.id]} on:close={() => (isShowShareModal = false)} />
+      <CreateSharedLinkModal assetIds={[asset.id]} onClose={() => (isShowShareModal = false)} />
     {/if}
   </section>
 </FocusTrap>

web/src/lib/components/photos-page/actions/add-to-album.svelte

@@ -46,6 +46,6 @@
     {shared}
     on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
     on:album={({ detail }) => handleAddToAlbum(detail)}
-    on:close={handleHideAlbumPicker}
+    onClose={handleHideAlbumPicker}
   />
 {/if}

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

@@ -11,5 +11,5 @@
 <CircleIconButton title="Share" icon={mdiShareVariantOutline} on:click={() => (showModal = true)} />
 
 {#if showModal}
-  <CreateSharedLinkModal assetIds={[...getAssets()].map(({ id }) => id)} on:close={() => (showModal = false)} />
+  <CreateSharedLinkModal assetIds={[...getAssets()].map(({ id }) => id)} onClose={() => (showModal = false)} />
 {/if}

web/src/lib/components/shared-components/album-selection-modal.svelte

@@ -16,10 +16,10 @@
   const dispatch = createEventDispatcher<{
     newAlbum: string;
     album: AlbumResponseDto;
-    close: void;
   }>();
 
   export let shared: boolean;
+  export let onClose: () => void;
 
   onMount(async () => {
     albums = await getAllAlbums({ shared: shared || undefined });
@@ -52,7 +52,7 @@
   };
 </script>
 
-<BaseModal id="album-selection-modal" title={getTitle()} on:close>
+<BaseModal id="album-selection-modal" title={getTitle()} {onClose}>
   <div class="mb-2 flex max-h-[400px] flex-col">
     {#if loading}
       {#each { length: 3 } as _}

web/src/lib/components/shared-components/base-modal.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
   import { quintOut } from 'svelte/easing';
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import { browser } from '$app/environment';
   import { clickOutside } from '$lib/utils/click-outside';
   import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
   import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
 
-  const dispatch = createEventDispatcher<{
-    close: void;
-  }>();
   /**
    * Unique identifier for the modal.
    */
   export let id: string;
   export let title: string;
+  export let onClose: () => void;
   export let zIndex = 9999;
   /**
    * If true, the logo will be displayed next to the modal title.
@@ -57,14 +55,14 @@
   >
     <div
       use:clickOutside={{
-        onOutclick: () => dispatch('close'),
+        onOutclick: onClose,
-        onEscape: () => dispatch('close'),
+        onEscape: onClose,
       }}
       class="min-h-[200px] w-[450px] overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar scroll-pb-20"
       style="max-height: min(95vh, 800px);"
       tabindex="-1"
     >
-      <ModalHeader id={titleId} {title} {showLogo} {icon} on:close />
+      <ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
 
       <div>
         <slot />

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -15,6 +15,7 @@
   import SettingInputField, { SettingInputFieldType } from '../settings/setting-input-field.svelte';
   import SettingSwitch from '../settings/setting-switch.svelte';
 
+  export let onClose: () => void;
   export let albumId: string | undefined = undefined;
   export let assetIds: string[] = [];
   export let editingLink: SharedLinkResponseDto | undefined = undefined;
@@ -30,8 +31,6 @@
   let enablePassword = false;
 
   const dispatch = createEventDispatcher<{
-    close: void;
-    escape: void;
     created: void;
   }>();
 
@@ -146,7 +145,7 @@
         message: 'Edited',
       });
 
-      dispatch('close');
+      onClose();
     } catch (error) {
       handleError(error, 'Failed to edit shared link');
     }
@@ -160,7 +159,7 @@
   };
 </script>
 
-<BaseModal id="create-shared-link-modal" title={getTitle()} icon={mdiLink} on:close>
+<BaseModal id="create-shared-link-modal" title={getTitle()} icon={mdiLink} {onClose}>
   <section class="mx-6 mb-6">
     {#if shareType === SharedLinkType.Album}
       {#if !editingLink}

web/src/lib/components/shared-components/full-screen-modal.svelte

@@ -55,7 +55,7 @@
       aria-modal="true"
       aria-labelledby={titleId}
     >
-      <ModalHeader id={titleId} {title} {showLogo} {icon} on:close={() => onClose?.()} />
+      <ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
       <div class="p-5 pt-0">
         <slot />
       </div>

web/src/lib/components/shared-components/modal-header.svelte

@@ -2,18 +2,14 @@
   import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { createEventDispatcher } from 'svelte';
   import { mdiClose } from '@mdi/js';
 
-  const dispatch = createEventDispatcher<{
-    close: void;
-  }>();
-
   /**
    * Unique identifier for the header text.
    */
   export let id: string;
   export let title: string;
+  export let onClose: () => void;
   /**
    * If true, the logo will be displayed next to the modal title.
    */
@@ -36,5 +32,5 @@
     </h1>
   </div>
 
-  <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} title="Close" />
+  <CircleIconButton on:click={onClose} icon={mdiClose} size={'20'} title="Close" />
 </div>

web/src/lib/components/shared-components/profile-image-cropper.svelte

@@ -3,17 +3,15 @@
   import { handleError } from '$lib/utils/handle-error';
   import { createProfileImage, type AssetResponseDto } from '@immich/sdk';
   import domtoimage from 'dom-to-image';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { onMount } from 'svelte';
   import PhotoViewer from '../asset-viewer/photo-viewer.svelte';
   import Button from '../elements/buttons/button.svelte';
   import BaseModal from './base-modal.svelte';
   import { NotificationType, notificationController } from './notification/notification';
 
   export let asset: AssetResponseDto;
+  export let onClose: () => void;
 
-  const dispatch = createEventDispatcher<{
-    close: void;
-  }>();
   let imgElement: HTMLDivElement;
 
   onMount(() => {
@@ -67,11 +65,11 @@
     } catch (error) {
       handleError(error, 'Error setting profile picture.');
     }
-    dispatch('close');
+    onClose();
   };
 </script>
 
-<BaseModal id="profile-image-cropper" title="Set profile picture" on:close>
+<BaseModal id="profile-image-cropper" title="Set profile picture" {onClose}>
   <div class="flex place-items-center items-center justify-center">
     <div
       class="relative flex aspect-square w-1/2 overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"

web/src/lib/components/user-settings-page/partner-selection-modal.svelte

@@ -6,11 +6,12 @@
   import UserAvatar from '../shared-components/user-avatar.svelte';
 
   export let user: UserResponseDto;
+  export let onClose: () => void;
 
   let availableUsers: UserResponseDto[] = [];
   let selectedUsers: UserResponseDto[] = [];
 
-  const dispatch = createEventDispatcher<{ close: void; 'add-users': UserResponseDto[] }>();
+  const dispatch = createEventDispatcher<{ 'add-users': UserResponseDto[] }>();
 
   onMount(async () => {
     // TODO: update endpoint to have a query param for deleted users
@@ -32,7 +33,7 @@
   };
 </script>
 
-<BaseModal id="partner-selection-modal" title="Add partner" showLogo on:close>
+<BaseModal id="partner-selection-modal" title="Add partner" showLogo {onClose}>
   <div class="immich-scrollbar max-h-[300px] overflow-y-auto">
     {#if availableUsers.length > 0}
       {#each availableUsers as user}

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -182,7 +182,7 @@
 {#if createPartnerFlag}
   <PartnerSelectionModal
     {user}
-    on:close={() => (createPartnerFlag = false)}
+    onClose={() => (createPartnerFlag = false)}
     on:add-users={(event) => handleCreatePartners(event.detail)}
   />
 {/if}

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -665,17 +665,17 @@
     {album}
     on:select={({ detail: users }) => handleAddUsers(users)}
     on:share={() => (viewMode = ViewMode.LINK_SHARING)}
-    on:close={() => (viewMode = ViewMode.VIEW)}
+    onClose={() => (viewMode = ViewMode.VIEW)}
   />
 {/if}
 
 {#if viewMode === ViewMode.LINK_SHARING}
-  <CreateSharedLinkModal albumId={album.id} on:close={() => (viewMode = ViewMode.VIEW)} />
+  <CreateSharedLinkModal albumId={album.id} onClose={() => (viewMode = ViewMode.VIEW)} />
 {/if}
 
 {#if viewMode === ViewMode.VIEW_USERS}
   <ShareInfoModal
-    on:close={() => (viewMode = ViewMode.VIEW)}
+    onClose={() => (viewMode = ViewMode.VIEW)}
     {album}
     on:remove={({ detail: userId }) => handleRemoveUser(userId)}
   />

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

@@ -83,7 +83,7 @@
 </section>
 
 {#if editSharedLink}
-  <CreateSharedLinkModal editingLink={editSharedLink} on:close={handleEditDone} />
+  <CreateSharedLinkModal editingLink={editSharedLink} onClose={handleEditDone} />
 {/if}
 
 {#if deleteLinkId}