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)/albums/+page.svelte

@@ -314,7 +314,7 @@
 
 <!-- Context Menu -->
 {#if $isShowContextMenu}
-  <ContextMenu {...$contextMenuPosition} on:outclick={closeAlbumContextMenu}>
+  <ContextMenu {...$contextMenuPosition} on:outclick={closeAlbumContextMenu} on:escape={closeAlbumContextMenu}>
     <MenuOption on:click={() => setAlbumToDelete()}>
       <span class="flex place-content-center place-items-center gap-2">
         <DeleteOutline size="18" />

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

@@ -48,6 +48,8 @@
 
   export let data: PageData;
 
+  let { isViewing: showAssetViewer } = assetViewingStore;
+
   let album = data.album;
   $: album = data.album;
 
@@ -102,6 +104,30 @@
     }
   });
 
+  const handleEscape = () => {
+    if (viewMode === ViewMode.SELECT_USERS) {
+      viewMode = ViewMode.VIEW;
+      return;
+    }
+    if (viewMode === ViewMode.CONFIRM_DELETE) {
+      viewMode = ViewMode.VIEW;
+      return;
+    }
+    if (viewMode === ViewMode.SELECT_ASSETS) {
+      handleCloseSelectAssets();
+      return;
+    }
+    if ($showAssetViewer) {
+      return;
+    }
+    if ($isMultiSelectState) {
+      assetInteractionStore.clearMultiselect();
+      return;
+    }
+    goto(backUrl);
+    return;
+  };
+
   const refreshAlbum = async () => {
     const { data } = await api.albumApi.getAlbumInfo({ id: album.id, withoutAssets: true });
     album = data;
@@ -403,6 +429,7 @@
       isSelectionMode={viewMode === ViewMode.SELECT_THUMBNAIL}
       singleSelect={viewMode === ViewMode.SELECT_THUMBNAIL}
       on:select={({ detail: asset }) => handleUpdateThumbnail(asset.id)}
+      on:escape={handleEscape}
     >
       {#if viewMode !== ViewMode.SELECT_THUMBNAIL}
         <!-- ALBUM TITLE -->
@@ -540,6 +567,6 @@
   <EditDescriptionModal
     {album}
     on:close={() => (isEditingDescription = false)}
-    on:updated={({ detail: description }) => handleUpdateDescription(description)}
+    on:save={({ detail: description }) => handleUpdateDescription(description)}
   />
 {/if}

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

@@ -33,9 +33,12 @@
   import Plus from 'svelte-material-icons/Plus.svelte';
   import type { PageData } from './$types';
   import { clickOutside } from '$lib/utils/click-outside';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
 
   export let data: PageData;
 
+  let { isViewing: showAssetViewer } = assetViewingStore;
+
   enum ViewMode {
     VIEW_ASSETS = 'view-assets',
     SELECT_FACE = 'select-face',
@@ -86,6 +89,18 @@
       viewMode = ViewMode.MERGE_FACES;
     }
   });
+  const handleEscape = () => {
+    if ($showAssetViewer) {
+      return;
+    }
+    if ($isMultiSelectState) {
+      assetInteractionStore.clearMultiselect();
+      return;
+    } else {
+      goto(previousRoute);
+      return;
+    }
+  };
   afterNavigate(({ from }) => {
     // Prevent setting previousRoute to the current page.
     if (from && from.route.id !== $page.route.id) {
@@ -337,6 +352,7 @@
       isSelectionMode={viewMode === ViewMode.SELECT_FACE}
       singleSelect={viewMode === ViewMode.SELECT_FACE}
       on:select={({ detail: asset }) => handleSelectFeaturePhoto(asset)}
+      on:escape={handleEscape}
     >
       {#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE || viewMode === ViewMode.BIRTH_DATE}
         <!-- Face information block -->
@@ -344,7 +360,8 @@
           role="button"
           class="relative w-fit p-4 sm:px-6"
           use:clickOutside
-          on:outclick={() => handleCancelEditName()}
+          on:outclick={handleCancelEditName}
+          on:escape={handleCancelEditName}
         >
           <section class="flex w-96 place-items-center border-black">
             {#if isEditingName}

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}

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

@@ -58,6 +58,10 @@
     if (!$showAssetViewer) {
       switch (event.key) {
         case 'Escape':
+          if (isMultiSelectionMode) {
+            selectedAssets = new Set();
+            return;
+          }
           if (!$preventRaceConditionSearchBar) {
             goto(previousRoute);
           }