From 448c069fb6148c8539ed905013d885f3a16dc88d Mon Sep 17 00:00:00 2001
From: Robin Wohlers-Reichel <me@robinwr.com>
Date: Thu, 26 Mar 2026 19:13:01 +0100
Subject: [PATCH] feat(web): add shortcuts to rotate images (#26927)

---
 .../components/asset-viewer/editor/editor-panel.svelte   | 9 +++++++--
 .../editor/transform-tool/transform-tool.svelte          | 8 ++++++++
 web/src/lib/services/asset.service.ts                    | 1 +
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte b/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
index d9a344cdc8..2ed519da4d 100644
--- a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
+++ b/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { shortcut } from '$lib/actions/shortcut';
+  import { shortcuts } from '$lib/actions/shortcut';
   import { editManager, EditToolType } from '$lib/managers/edit/edit-manager.svelte';
   import { websocketEvents } from '$lib/stores/websocket';
   import { getAssetEdits, type AssetResponseDto } from '@immich/sdk';
@@ -47,7 +47,12 @@
   let { asset = $bindable(), onClose }: Props = $props();
 </script>
 
-<svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onClose }} />
+<svelte:document
+  use:shortcuts={[
+    { shortcut: { key: 'Escape' }, onShortcut: onClose },
+    { shortcut: { key: 'Enter' }, onShortcut: applyEdits },
+  ]}
+/>
 
 <section class="relative flex flex-col h-full p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg dark pt-3">
   <HStack class="justify-between me-4">
diff --git a/web/src/lib/components/asset-viewer/editor/transform-tool/transform-tool.svelte b/web/src/lib/components/asset-viewer/editor/transform-tool/transform-tool.svelte
index 1850389581..54ab126dfa 100644
--- a/web/src/lib/components/asset-viewer/editor/transform-tool/transform-tool.svelte
+++ b/web/src/lib/components/asset-viewer/editor/transform-tool/transform-tool.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { shortcuts } from '$lib/actions/shortcut';
   import { transformManager } from '$lib/managers/edit/transform-manager.svelte';
   import { Button, HStack, IconButton } from '@immich/ui';
   import { mdiFlipHorizontal, mdiFlipVertical, mdiRotateLeft, mdiRotateRight } from '@mdi/js';
@@ -68,6 +69,13 @@
   }
 </script>
 
+<svelte:document
+  use:shortcuts={[
+    { shortcut: { key: ']' }, onShortcut: () => rotateImage(90) },
+    { shortcut: { key: '[' }, onShortcut: () => rotateImage(-90) },
+  ]}
+/>
+
 <div class="mt-3 px-4">
   <div class="flex h-10 w-full items-center justify-between text-sm mt-2">
     <h2>{$t('editor_orientation')}</h2>
diff --git a/web/src/lib/services/asset.service.ts b/web/src/lib/services/asset.service.ts
index 76ac0b7fc0..baade8facd 100644
--- a/web/src/lib/services/asset.service.ts
+++ b/web/src/lib/services/asset.service.ts
@@ -248,6 +248,7 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
       !asset.originalPath.toLowerCase().endsWith('.gif') &&
       !asset.originalPath.toLowerCase().endsWith('.svg'),
     onAction: () => assetViewerManager.openEditor(),
+    shortcuts: [{ key: 'e' }],
   };
 
   const RefreshFacesJob: ActionItem = {