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/routes/(user)/photos/+page.svelte

@@ -21,27 +21,47 @@
   import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
   import Plus from 'svelte-material-icons/Plus.svelte';
   import type { PageData } from './$types';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
 
   export let data: PageData;
 
+  let { isViewing: showAssetViewer } = assetViewingStore;
+  let handleEscapeKey = false;
   const assetStore = new AssetStore({ size: TimeBucketSize.Month, isArchived: false });
   const assetInteractionStore = createAssetInteractionStore();
   const { isMultiSelectState, selectedAssets } = assetInteractionStore;
 
   $: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
+
+  const handleEscape = () => {
+    if ($showAssetViewer) {
+      return;
+    }
+    if (handleEscapeKey) {
+      handleEscapeKey = false;
+      return;
+    }
+    if ($isMultiSelectState) {
+      assetInteractionStore.clearMultiselect();
+      return;
+    }
+  };
 </script>
 
 <UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} showUploadButton>
   <svelte:fragment slot="header">
     {#if $isMultiSelectState}
       <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
-        <CreateSharedLink />
+        <CreateSharedLink on:escape={() => (handleEscapeKey = true)} />
         <SelectAllAssets {assetStore} {assetInteractionStore} />
         <AssetSelectContextMenu icon={Plus} title="Add">
           <AddToAlbum />
           <AddToAlbum shared />
         </AssetSelectContextMenu>
-        <DeleteAssets onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
+        <DeleteAssets
+          on:escape={() => (handleEscapeKey = true)}
+          onAssetDelete={(assetId) => assetStore.removeAsset(assetId)}
+        />
         <AssetSelectContextMenu icon={DotsVertical} title="Menu">
           <FavoriteAction menuItem removeFavorite={isAllFavorite} />
           <DownloadAction menuItem />
@@ -52,7 +72,7 @@
     {/if}
   </svelte:fragment>
   <svelte:fragment slot="content">
-    <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.ARCHIVE}>
+    <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.ARCHIVE} on:escape={handleEscape}>
       {#if data.user.memoriesEnabled}
         <MemoryLane />
       {/if}