From ca52cbace1f8df0591132406d6c694d3c78ce3a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carles=20Alb=C3=A0s=20Boix?=
 <43018489+carlesalbasboix@users.noreply.github.com>
Date: Mon, 19 Aug 2024 19:07:18 +0200
Subject: [PATCH] feat(web): Left hand navigation with A/D (#11907)

---
 .../asset-viewer/actions/next-asset-action.svelte        | 9 +++++++--
 .../asset-viewer/actions/previous-asset-action.svelte    | 9 +++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/actions/next-asset-action.svelte b/web/src/lib/components/asset-viewer/actions/next-asset-action.svelte
index a4ee322996..cc074f3b6c 100644
--- a/web/src/lib/components/asset-viewer/actions/next-asset-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/next-asset-action.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { shortcut } from '$lib/actions/shortcut';
+  import { shortcuts } from '$lib/actions/shortcut';
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiChevronRight } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -8,7 +8,12 @@
   export let onNextAsset: () => void;
 </script>
 
-<svelte:window use:shortcut={{ shortcut: { key: 'ArrowRight' }, onShortcut: onNextAsset }} />
+<svelte:window
+  use:shortcuts={[
+    { shortcut: { key: 'ArrowRight' }, onShortcut: onNextAsset },
+    { shortcut: { key: 'd' }, onShortcut: onNextAsset },
+  ]}
+/>
 
 <NavigationArea onClick={onNextAsset} label={$t('view_next_asset')}>
   <Icon path={mdiChevronRight} size="36" ariaHidden />
diff --git a/web/src/lib/components/asset-viewer/actions/previous-asset-action.svelte b/web/src/lib/components/asset-viewer/actions/previous-asset-action.svelte
index ef836b618c..9f8c638e12 100644
--- a/web/src/lib/components/asset-viewer/actions/previous-asset-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/previous-asset-action.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { shortcut } from '$lib/actions/shortcut';
+  import { shortcuts } from '$lib/actions/shortcut';
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiChevronLeft } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -8,7 +8,12 @@
   export let onPreviousAsset: () => void;
 </script>
 
-<svelte:window use:shortcut={{ shortcut: { key: 'ArrowLeft' }, onShortcut: onPreviousAsset }} />
+<svelte:window
+  use:shortcuts={[
+    { shortcut: { key: 'ArrowLeft' }, onShortcut: onPreviousAsset },
+    { shortcut: { key: 'a' }, onShortcut: onPreviousAsset },
+  ]}
+/>
 
 <NavigationArea onClick={onPreviousAsset} label={$t('view_previous_asset')}>
   <Icon path={mdiChevronLeft} size="36" ariaHidden />