From f72aa54a1fa9a75045ad23ad73907d96370554c0 Mon Sep 17 00:00:00 2001
From: Andreas Heinz <github@a80.net>
Date: Wed, 6 May 2026 11:56:23 +0200
Subject: [PATCH] feat(enhancement): Navigate stack with up and down arrow keys
 (#27854)

* feat(enhancement): navigate stack with up and down arrow keys

* remove unnecessary code

* move shortcut to section; no need for document level
---
 .../asset-viewer/AssetViewer.svelte           | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/web/src/lib/components/asset-viewer/AssetViewer.svelte b/web/src/lib/components/asset-viewer/AssetViewer.svelte
index cb49828f0d..de6e96fa72 100644
--- a/web/src/lib/components/asset-viewer/AssetViewer.svelte
+++ b/web/src/lib/components/asset-viewer/AssetViewer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import { focusTrap } from '$lib/actions/focus-trap';
+  import { shortcuts } from '$lib/actions/shortcut';
   import type { Action, OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
   import NextAssetAction from '$lib/components/asset-viewer/actions/NextAssetAction.svelte';
   import PreviousAssetAction from '$lib/components/asset-viewer/actions/PreviousAssetAction.svelte';
@@ -246,6 +247,22 @@
     }, $t('error_while_navigating'));
   };
 
+  const navigateStack = (direction: 'previous' | 'next') => {
+    if (!stack || !withStacked || assetViewerManager.isShowEditor) {
+      return;
+    }
+    const assets = stack.assets;
+    const currentIndex = assets.findIndex(({ id }) => id === asset.id);
+    if (currentIndex === -1) {
+      return;
+    }
+    const nextIndex = direction === 'previous' ? currentIndex - 1 : currentIndex + 1;
+    if (nextIndex < 0 || nextIndex >= assets.length) {
+      return;
+    }
+    cursor.current = assets[nextIndex];
+  };
+
   /**
    * Slide show mode
    */
@@ -459,6 +476,10 @@
   id="immich-asset-viewer"
   class="fixed inset-s-0 top-0 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
   use:focusTrap
+  use:shortcuts={[
+    { shortcut: { key: 'ArrowUp' }, onShortcut: () => navigateStack('previous') },
+    { shortcut: { key: 'ArrowDown' }, onShortcut: () => navigateStack('next') },
+  ]}
   bind:this={assetViewerHtmlElement}
 >
   <!-- Top navigation bar -->