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

* fix(web): consistent modal escape behavior

* make onClose optional

web/src/lib/components/shared-components/change-date.svelte

@@ -68,8 +68,8 @@
     title="Edit date & time"
     prompt="Please select a new date:"
     disabled={!date.isValid}
-    on:confirm={handleConfirm}
-    on:cancel={handleCancel}
+    onConfirm={handleConfirm}
+    onClose={handleCancel}
   >
     <div class="flex flex-col text-md px-4 text-center gap-2" slot="prompt">
       <div class="mt-2" />

web/src/lib/components/shared-components/change-location.svelte

@@ -144,8 +144,8 @@
   cancelColor="secondary"
   title="Change Location"
   width={800}
-  on:confirm={handleConfirm}
-  on:cancel={handleCancel}
+  onConfirm={handleConfirm}
+  onClose={handleCancel}
 >
   <div slot="prompt" class="flex flex-col w-full h-full gap-2">
     <div class="relative w-64 sm:w-96" use:clickOutside on:outclick={() => (hideSuggestion = true)}>

web/src/lib/components/shared-components/confirm-dialogue.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import FullScreenModal from './full-screen-modal.svelte';
   import Button from '../elements/buttons/button.svelte';
   import type { Color } from '$lib/components/elements/buttons/button.svelte';
@@ -13,29 +12,18 @@
   export let hideCancelButton = false;
   export let disabled = false;
   export let width = 500;
-
-  const dispatch = createEventDispatcher<{ cancel: void; confirm: void; 'click-outside': void }>();
+  export let onClose: () => void;
+  export let onConfirm: () => void;
 
   let isConfirmButtonDisabled = false;
 
-  const handleCancel = () => dispatch('cancel');
-  const handleEscape = () => {
-    if (!isConfirmButtonDisabled) {
-      dispatch('cancel');
-    }
-  };
-
   const handleConfirm = () => {
     isConfirmButtonDisabled = true;
-    dispatch('confirm');
-  };
-
-  const handleClickOutside = () => {
-    dispatch('click-outside');
+    onConfirm();
   };
 </script>
 
-<FullScreenModal on:clickOutside={handleClickOutside} on:escape={() => handleEscape()}>
+<FullScreenModal {onClose}>
   <div
     class="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"
     style="width: {width}px"
@@ -56,7 +44,7 @@
 
       <div class="mt-4 flex w-full gap-4 px-4">
         {#if !hideCancelButton}
-          <Button color={cancelColor} fullwidth on:click={handleCancel}>
+          <Button color={cancelColor} fullwidth on:click={onClose}>
             {cancelText}
           </Button>
         {/if}

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

@@ -1,12 +1,8 @@
 <script lang="ts">
   import { clickOutside } from '../../utils/click-outside';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
 
-  const dispatch = createEventDispatcher<{
-    clickOutside: void;
-    escape: void;
-  }>();
+  export let onClose: (() => void) | undefined = undefined;
 </script>
 
 <section
@@ -14,12 +10,7 @@
   out:fade={{ duration: 100 }}
   class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40"
 >
-  <div
-    class="z-[9999]"
-    use:clickOutside
-    on:outclick={() => dispatch('clickOutside')}
-    on:escape={() => dispatch('escape')}
-  >
+  <div class="z-[9999]" use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}>
     <slot />
   </div>
 </section>

web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte

@@ -15,7 +15,7 @@
   const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
 </script>
 
-<FullScreenModal on:clickOutside={() => dispatch('close')} on:escape={() => dispatch('close')}>
+<FullScreenModal onClose={() => dispatch('close')}>
   <div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
     <div
       class=" rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg p-4"

web/src/lib/components/shared-components/show-shortcuts.svelte

@@ -36,7 +36,7 @@
   }>();
 </script>
 
-<FullScreenModal on:clickOutside={() => dispatch('close')} on:escape={() => dispatch('close')}>
+<FullScreenModal onClose={() => dispatch('close')}>
   <div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
     <div
       class="w-[400px] max-w-[125vw] rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg md:w-[650px]"

web/src/lib/components/shared-components/version-announcement-box.svelte

@@ -33,7 +33,7 @@
 </script>
 
 {#if showModal}
-  <FullScreenModal on:clickOutside={() => (showModal = false)}>
+  <FullScreenModal onClose={() => (showModal = false)}>
     <div
       class="max-w-lg rounded-3xl border bg-immich-bg px-8 py-10 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
     >