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

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 -->