fix(web): escape key to clear selection and go to previous page (#15142…

…) (#15219)
immich-app · Jan 10, 2025 · 3030e74 · 3030e74
1 parent f9db60f
commit 3030e74
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 5 deletions.
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -215,7 +215,10 @@
       viewMode = AlbumPageViewMode.VIEW;
       return;
     }
-
+    if (viewMode === AlbumPageViewMode.SELECT_THUMBNAIL) {
+      viewMode = AlbumPageViewMode.VIEW;
+      return;
+    }
     if (viewMode === AlbumPageViewMode.SELECT_ASSETS) {
       await handleCloseSelectAssets();
       return;

diff --git a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -28,6 +28,13 @@
   const assetStore = new AssetStore({ isArchived: true });
   const assetInteraction = new AssetInteraction();
 
+  const handleEscape = () => {
+    if (assetInteraction.selectionActive) {
+      assetInteraction.clearMultiselect();
+      return;
+    }
+  };
+
   onDestroy(() => {
     assetStore.destroy();
   });
@@ -54,7 +61,13 @@
 {/if}
 
 <UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
-  <AssetGrid enableRouting={true} {assetStore} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
+  <AssetGrid
+    enableRouting={true}
+    {assetStore}
+    {assetInteraction}
+    removeAction={AssetAction.UNARCHIVE}
+    onEscape={handleEscape}
+  >
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_archived_assets_message')} />
     {/snippet}

diff --git a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -32,6 +32,13 @@
   const assetStore = new AssetStore({ isFavorite: true });
   const assetInteraction = new AssetInteraction();
 
+  const handleEscape = () => {
+    if (assetInteraction.selectionActive) {
+      assetInteraction.clearMultiselect();
+      return;
+    }
+  };
+
   onDestroy(() => {
     assetStore.destroy();
   });
@@ -68,7 +75,13 @@
 {/if}
 
 <UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
-  <AssetGrid enableRouting={true} {assetStore} {assetInteraction} removeAction={AssetAction.UNFAVORITE}>
+  <AssetGrid
+    enableRouting={true}
+    {assetStore}
+    {assetInteraction}
+    removeAction={AssetAction.UNFAVORITE}
+    onEscape={handleEscape}
+  >
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_favorites_message')} />
     {/snippet}

diff --git a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -24,6 +24,13 @@
   const assetStore = new AssetStore({ userId: data.partner.id, isArchived: false, withStacked: true });
   const assetInteraction = new AssetInteraction();
 
+  const handleEscape = () => {
+    if (assetInteraction.selectionActive) {
+      assetInteraction.clearMultiselect();
+      return;
+    }
+  };
+
   onDestroy(() => {
     assetStore.destroy();
   });
@@ -51,5 +58,5 @@
       {/snippet}
     </ControlAppBar>
   {/if}
-  <AssetGrid enableRouting={true} {assetStore} {assetInteraction} />
+  <AssetGrid enableRouting={true} {assetStore} {assetInteraction} onEscape={handleEscape} />
 </main>
diff --git a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -87,6 +87,13 @@
     }
   };
 
+  const handleEscape = () => {
+    if (assetInteraction.selectionActive) {
+      assetInteraction.clearMultiselect();
+      return;
+    }
+  };
+
   onDestroy(() => {
     assetStore.destroy();
   });
@@ -122,7 +129,7 @@
       </div>
     {/snippet}
 
-    <AssetGrid enableRouting={true} {assetStore} {assetInteraction}>
+    <AssetGrid enableRouting={true} {assetStore} {assetInteraction} onEscape={handleEscape}>
       <p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
         {$t('trashed_items_will_be_permanently_deleted_after', { values: { days: $serverConfig.trashDays } })}
       </p>