feat(web): Left hand navigation with A/D (#11907)

immich-app · Aug 19, 2024 · ca52cba · ca52cba
1 parent bc31b7c
commit ca52cba
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 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
@@ -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
@@ -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 />