fix(web): escape shortcut (#3753)

* fix: escape shortcut

* feat: more escape scenarios

* feat: more escape shortcuts

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

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

@@ -36,6 +36,7 @@
   <div
     use:clickOutside
     on:outclick={() => dispatch('close')}
+    on:escape={() => dispatch('escape')}
     class="max-h-[600px] min-h-[200px] w-[450px] rounded-lg bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg"
   >
     <div class="flex place-items-center justify-between px-5 py-3">

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

@@ -17,6 +17,11 @@
   let isConfirmButtonDisabled = false;
 
   const handleCancel = () => dispatch('cancel');
+  const handleEscape = () => {
+    if (!isConfirmButtonDisabled) {
+      dispatch('cancel');
+    }
+  };
 
   const handleConfirm = () => {
     isConfirmButtonDisabled = true;
@@ -24,7 +29,7 @@
   };
 </script>
 
-<FullScreenModal on:clickOutside={handleCancel}>
+<FullScreenModal on:clickOutside={handleCancel} on:escape={() => handleEscape()}>
   <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/lib/components/shared-components/context-menu/context-menu.svelte

@@ -28,6 +28,7 @@
   role="menu"
   use:clickOutside
   on:outclick
+  on:escape
 >
   <slot />
 </div>

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

@@ -137,7 +137,7 @@
   };
 </script>
 
-<BaseModal on:close={() => dispatch('close')}>
+<BaseModal on:close={() => dispatch('close')} on:escape={() => dispatch('escape')}>
   <svelte:fragment slot="title">
     <span class="flex place-items-center gap-2">
       <Link size={24} />

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

@@ -3,7 +3,10 @@
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
 
-  const dispatch = createEventDispatcher<{ clickOutside: void }>();
+  const dispatch = createEventDispatcher<{
+    clickOutside: void;
+    escape: void;
+  }>();
 </script>
 
 <section
@@ -11,7 +14,12 @@
   out:fade={{ duration: 100 }}
   class="fixed left-0 top-0 z-[990] flex h-screen w-screen place-content-center place-items-center bg-black/40"
 >
-  <div class="z-[9999]" use:clickOutside on:outclick={() => dispatch('clickOutside')}>
+  <div
+    class="z-[9999]"
+    use:clickOutside
+    on:outclick={() => dispatch('clickOutside')}
+    on:escape={() => dispatch('escape')}
+  >
     <slot />
   </div>
 </section>

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

@@ -106,7 +106,11 @@
           </a>
         {/if}
 
-        <div use:clickOutside on:outclick={() => (shouldShowAccountInfoPanel = false)}>
+        <div
+          use:clickOutside
+          on:outclick={() => (shouldShowAccountInfoPanel = false)}
+          on:escape={() => (shouldShowAccountInfoPanel = false)}
+        >
           <button
             class="flex"
             on:mouseover={() => (shouldShowAccountInfo = true)}

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -32,6 +32,7 @@
     });
 
     showBigSearchBar = false;
+    $isSearchEnabled = false;
     goto(`${AppRoute.SEARCH}?${params}`);
   }
 
@@ -68,7 +69,7 @@
   };
 </script>
 
-<div role="button" class="w-full" use:clickOutside on:outclick={onFocusOut}>
+<div role="button" class="w-full" use:clickOutside on:outclick={onFocusOut} on:escape={onFocusOut}>
   <form
     draggable="false"
     autocomplete="off"

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

@@ -22,7 +22,7 @@
   const dispatch = createEventDispatcher();
 </script>
 
-<FullScreenModal on:clickOutside={() => dispatch('close')}>
+<FullScreenModal on:clickOutside={() => dispatch('close')} on:escape={() => 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]"