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/photos-page/actions/create-shared-link.svelte

@@ -3,13 +3,23 @@
   import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
   import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { createEventDispatcher } from 'svelte';
 
   let showModal = false;
+  const dispatch = createEventDispatcher();
   const { getAssets } = getAssetControlContext();
+  const escape = () => {
+    dispatch('escape');
+    showModal = false;
+  };
 </script>
 
 <CircleIconButton title="Share" logo={ShareVariantOutline} on:click={() => (showModal = true)} />
 
 {#if showModal}
-  <CreateSharedLinkModal assetIds={Array.from(getAssets()).map(({ id }) => id)} on:close={() => (showModal = false)} />
+  <CreateSharedLinkModal
+    assetIds={Array.from(getAssets()).map(({ id }) => id)}
+    on:close={() => (showModal = false)}
+    on:escape={escape}
+  />
 {/if}

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -11,11 +11,14 @@
   import TimerSand from 'svelte-material-icons/TimerSand.svelte';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { OnAssetDelete, getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { createEventDispatcher } from 'svelte';
 
   export let onAssetDelete: OnAssetDelete;
   export let menuItem = false;
   const { getAssets, clearSelect } = getAssetControlContext();
 
+  const dispatch = createEventDispatcher();
+
   let isShowConfirmation = false;
   let loading = false;
 
@@ -51,6 +54,11 @@
       loading = false;
     }
   };
+
+  const escape = () => {
+    dispatch('escape');
+    isShowConfirmation = false;
+  };
 </script>
 
 {#if menuItem}
@@ -71,6 +79,7 @@
     confirmText="Delete"
     on:confirm={handleDelete}
     on:cancel={() => (isShowConfirmation = false)}
+    on:escape={escape}
   >
     <svelte:fragment slot="prompt">
       <p>

web/src/lib/components/photos-page/asset-grid.svelte

@@ -36,7 +36,7 @@
   $: timelineY = element?.scrollTop || 0;
 
   const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
-  const dispatch = createEventDispatcher<{ select: AssetResponseDto }>();
+  const dispatch = createEventDispatcher<{ select: AssetResponseDto; escape: void }>();
 
   onMount(async () => {
     showSkeleton = false;
@@ -62,7 +62,7 @@
     if (!$showAssetViewer) {
       switch (event.key) {
         case 'Escape':
-          assetInteractionStore.clearMultiselect();
+          dispatch('escape');
           return;
         case '?':
           if (event.shiftKey) {