fix(web): consistent modal escape behavior (#7677)

* fix(web): consistent modal escape behavior

* make onClose optional

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

@@ -236,7 +236,7 @@
 </script>
 
 {#if shouldShowEditUserForm}
-  <FullScreenModal on:clickOutside={() => (shouldShowEditUserForm = false)}>
+  <FullScreenModal onClose={() => (shouldShowEditUserForm = false)}>
     <EditAlbumForm
       album={selectedAlbum}
       on:editSuccess={() => successModifyAlbum()}
@@ -399,8 +399,8 @@
   <ConfirmDialogue
     title="Delete Album"
     confirmText="Delete"
-    on:confirm={deleteSelectedAlbum}
-    on:cancel={() => (albumToDelete = null)}
+    onConfirm={deleteSelectedAlbum}
+    onClose={() => (albumToDelete = null)}
   >
     <svelte:fragment slot="prompt">
       <p>Are you sure you want to delete the album <b>{albumToDelete.albumName}</b>?</p>

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

@@ -692,8 +692,8 @@
   <ConfirmDialogue
     title="Delete album"
     confirmText="Delete"
-    on:confirm={handleRemoveAlbum}
-    on:cancel={() => (viewMode = ViewMode.VIEW)}
+    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>

web/src/routes/(user)/people/+page.svelte

@@ -420,16 +420,14 @@
 <svelte:window bind:innerHeight />
 
 {#if showMergeModal}
-  <FullScreenModal on:clickOutside={() => (showMergeModal = false)}>
-    <MergeSuggestionModal
-      {personMerge1}
-      {personMerge2}
-      {potentialMergePeople}
-      on:close={() => (showMergeModal = false)}
-      on:reject={() => changeName()}
-      on:confirm={(event) => handleMergeSamePerson(event.detail)}
-    />
-  </FullScreenModal>
+  <MergeSuggestionModal
+    {personMerge1}
+    {personMerge2}
+    {potentialMergePeople}
+    on:close={() => (showMergeModal = false)}
+    on:reject={() => changeName()}
+    on:confirm={(event) => handleMergeSamePerson(event.detail)}
+  />
 {/if}
 
 <UserPageLayout
@@ -487,7 +485,7 @@
   {/if}
 
   {#if showChangeNameModal}
-    <FullScreenModal on:clickOutside={() => (showChangeNameModal = false)}>
+    <FullScreenModal onClose={() => (showChangeNameModal = false)}>
       <div
         class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
       >

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

@@ -91,7 +91,7 @@
     title="Delete Shared Link"
     prompt="Are you sure you want to delete this shared link?"
     confirmText="Delete"
-    on:confirm={() => handleDeleteLink()}
-    on:cancel={() => (deleteLinkId = null)}
+    onConfirm={() => handleDeleteLink()}
+    onClose={() => (deleteLinkId = null)}
   />
 {/if}

web/src/routes/(user)/trash/+page.svelte

@@ -105,8 +105,8 @@
   <ConfirmDialogue
     title="Empty Trash"
     confirmText="Empty"
-    on:confirm={handleEmptyTrash}
-    on:cancel={() => (isShowEmptyConfirmation = false)}
+    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>

web/src/routes/admin/library-management/+page.svelte

@@ -307,8 +307,8 @@
   <ConfirmDialogue
     title="Warning!"
     prompt="Are you sure you want to delete this library? This will delete all {deleteAssetCount} contained assets from Immich and cannot be undone. Files will remain on disk."
-    on:confirm={handleDelete}
-    on:cancel={() => (confirmDeleteLibrary = null)}
+    onConfirm={handleDelete}
+    onClose={() => (confirmDeleteLibrary = null)}
   />
 {/if}
 

web/src/routes/admin/user-management/+page.svelte

@@ -103,19 +103,13 @@
   <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 lg:w-[850px]">
       {#if shouldShowCreateUserForm}
-        <FullScreenModal
-          on:clickOutside={() => (shouldShowCreateUserForm = false)}
-          on:escape={() => (shouldShowCreateUserForm = false)}
-        >
+        <FullScreenModal onClose={() => (shouldShowCreateUserForm = false)}>
           <CreateUserForm on:submit={onUserCreated} on:cancel={() => (shouldShowCreateUserForm = false)} />
         </FullScreenModal>
       {/if}
 
       {#if shouldShowEditUserForm}
-        <FullScreenModal
-          on:clickOutside={() => (shouldShowEditUserForm = false)}
-          on:escape={() => (shouldShowEditUserForm = false)}
-        >
+        <FullScreenModal onClose={() => (shouldShowEditUserForm = false)}>
           <EditUserForm
             user={selectedUser}
             canResetPassword={selectedUser?.id !== $user.id}
@@ -145,10 +139,7 @@
       {/if}
 
       {#if shouldShowInfoPanel}
-        <FullScreenModal
-          on:clickOutside={() => (shouldShowInfoPanel = false)}
-          on:escape={() => (shouldShowInfoPanel = false)}
-        >
+        <FullScreenModal onClose={() => (shouldShowInfoPanel = false)}>
           <div class="w-[500px] max-w-[95vw] rounded-3xl border bg-white p-8 text-sm shadow-sm">
             <h1 class="mb-4 text-lg font-medium text-immich-primary">Password reset success</h1>