fix(web): keyboard shortcut handling (#7946)

* fix(web): keyboard shortcut handling

* drop executeShortcuts in favor of action

* fix merge

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/album-page/album-description.svelte

@@ -2,6 +2,7 @@
   import { autoGrowHeight } from '$lib/utils/autogrow';
   import { updateAlbumInfo } from '@immich/sdk';
   import { handleError } from '$lib/utils/handle-error';
+  import { shortcut } from '$lib/utils/shortcut';
 
   export let id: string;
   export let description: string;
@@ -37,6 +38,10 @@
     on:focusout={handleUpdateDescription}
     use:autoGrowHeight
     placeholder="Add description"
+    use:shortcut={{
+      shortcut: { key: 'Enter', ctrl: true },
+      onShortcut: (e) => e.currentTarget.blur(),
+    }}
   />
 {:else if description}
   <p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">

web/src/lib/components/album-page/album-title.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { updateAlbumInfo } from '@immich/sdk';
   import { handleError } from '$lib/utils/handle-error';
+  import { shortcut } from '$lib/utils/shortcut';
 
   export let id: string;
   export let albumName: string;
@@ -29,7 +30,7 @@
 </script>
 
 <input
-  on:keydown={(e) => e.key === 'Enter' && e.currentTarget.blur()}
+  use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}
   on:blur={handleUpdateName}
   class="w-[99%] mb-2 border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
     ? 'hover:border-gray-400'

web/src/lib/components/album-page/album-viewer.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-  import { browser } from '$app/environment';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
   import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
-  import { onDestroy, onMount } from 'svelte';
   import { createAssetInteractionStore } from '../../stores/asset-interaction.store';
   import { AssetStore } from '../../stores/assets.store';
   import { downloadArchive } from '../../utils/asset-utils';
@@ -16,7 +14,7 @@
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import ImmichLogo from '../shared-components/immich-logo.svelte';
   import ThemeButton from '../shared-components/theme-button.svelte';
-  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
+  import { shortcut } from '$lib/utils/shortcut';
   import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
   import { handlePromiseError } from '$lib/utils';
   import AlbumSummary from './album-summary.svelte';
@@ -39,39 +37,22 @@
     }
   });
 
-  const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
-
-  onMount(() => {
-    document.addEventListener('keydown', onKeyboardPress);
-  });
-
-  onDestroy(() => {
-    if (browser) {
-      document.removeEventListener('keydown', onKeyboardPress);
-    }
-  });
-
-  const handleKeyboardPress = (event: KeyboardEvent) => {
-    if (shouldIgnoreShortcut(event)) {
-      return;
-    }
-    if (!$showAssetViewer) {
-      switch (event.key) {
-        case 'Escape': {
-          if ($isMultiSelectState) {
-            assetInteractionStore.clearMultiselect();
-          }
-          return;
-        }
-      }
-    }
-  };
-
   const downloadAlbum = async () => {
     await downloadArchive(`${album.albumName}.zip`, { albumId: album.id });
   };
 </script>
 
+<svelte:window
+  use:shortcut={{
+    shortcut: { key: 'Escape' },
+    onShortcut: () => {
+      if (!$showAssetViewer && $isMultiSelectState) {
+        assetInteractionStore.clearMultiselect();
+      }
+    },
+  }}
+/>
+
 <header>
   {#if $isMultiSelectState}
     <AssetSelectControlBar