feat(web): add shortcuts to rotate images (#26927)

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

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>

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