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/routes/(user)/albums/[albumId]/+page.svelte

@@ -113,7 +113,6 @@
   let reactions: ActivityResponseDto[] = [];
   let globalWidth: number;
   let assetGridWidth: number;
-  let textArea: HTMLTextAreaElement;
   let albumOrder: AssetOrder | undefined = data.album.order;
 
   $: assetStore = new AssetStore({ albumId, order: albumOrder });
@@ -225,20 +224,6 @@
     handlePromiseError(getNumberOfComments());
   }
 
-  const handleKeypress = (event: KeyboardEvent) => {
-    if (event.target !== textArea) {
-      return;
-    }
-    const ctrl = event.ctrlKey;
-    switch (event.key) {
-      case 'Enter': {
-        if (ctrl && event.target === textArea) {
-          textArea.blur();
-        }
-      }
-    }
-  };
-
   const handleStartSlideshow = async () => {
     const asset =
       $slideshowNavigation === SlideshowNavigation.Shuffle ? await assetStore.getRandomAsset() : assetStore.assets[0];
@@ -394,8 +379,6 @@
   };
 </script>
 
-<svelte:window on:keydown={handleKeypress} />
-
 <div class="flex overflow-hidden" bind:clientWidth={globalWidth}>
   <div class="relative w-full shrink">
     {#if $isMultiSelectState}

web/src/routes/(user)/people/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
@@ -27,7 +26,7 @@
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { searchNameLocal } from '$lib/utils/person';
-  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
+  import { shortcut } from '$lib/utils/shortcut';
   import {
     getPerson,
     mergePerson,
@@ -38,7 +37,7 @@
     type PersonResponseDto,
   } from '@immich/sdk';
   import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
-  import { onDestroy, onMount } from 'svelte';
+  import { onMount } from 'svelte';
   import type { PageData } from './$types';
   import { locale } from '$lib/stores/preferences.store';
 
@@ -79,10 +78,7 @@
 
   $: countVisiblePeople = countTotalPeople - countHiddenPeople;
 
-  const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
-
   onMount(async () => {
-    document.addEventListener('keydown', onKeyboardPress);
     const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
     if (getSearchedPeople) {
       searchName = getSearchedPeople;
@@ -90,24 +86,6 @@
     }
   });
 
-  onDestroy(() => {
-    if (browser) {
-      document.removeEventListener('keydown', onKeyboardPress);
-    }
-  });
-
-  const handleKeyboardPress = (event: KeyboardEvent) => {
-    if (shouldIgnoreShortcut(event)) {
-      return;
-    }
-    switch (event.key) {
-      case 'Escape': {
-        handleCloseClick();
-        return;
-      }
-    }
-  };
-
   const handleSearch = async (force: boolean) => {
     $page.url.searchParams.set(QueryParameter.SEARCHED_PEOPLE, searchName);
     await goto($page.url);
@@ -417,7 +395,7 @@
   };
 </script>
 
-<svelte:window bind:innerHeight />
+<svelte:window bind:innerHeight use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: handleCloseClick }} />
 
 {#if showMergeModal}
   <MergeSuggestionModal

web/src/routes/(user)/search/+page.svelte

@@ -20,7 +20,7 @@
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { preventRaceConditionSearchBar } from '$lib/stores/search.store';
-  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
+  import { shortcut } from '$lib/utils/shortcut';
   import {
     type AssetResponseDto,
     searchSmart,
@@ -52,27 +52,19 @@
   let searchResultAssets: AssetResponseDto[] = [];
   let isLoading = true;
 
-  const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
-
-  const handleKeyboardPress = async (event: KeyboardEvent) => {
-    if (shouldIgnoreShortcut(event)) {
+  const onEscape = () => {
+    if ($showAssetViewer) {
       return;
     }
-    if (!$showAssetViewer) {
-      switch (event.key) {
-        case 'Escape': {
-          if (isMultiSelectionMode) {
-            selectedAssets = new Set();
-            return;
-          }
-          if (!$preventRaceConditionSearchBar) {
-            await goto(previousRoute);
-          }
-          $preventRaceConditionSearchBar = false;
-          return;
-        }
-      }
+
+    if (isMultiSelectionMode) {
+      selectedAssets = new Set();
+      return;
     }
+    if (!$preventRaceConditionSearchBar) {
+      handlePromiseError(goto(previousRoute));
+    }
+    $preventRaceConditionSearchBar = false;
   };
 
   afterNavigate(({ from }) => {
@@ -201,7 +193,7 @@
   }
 </script>
 
-<svelte:document on:keydown={onKeyboardPress} />
+<svelte:window use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onEscape }} />
 
 <section>
   {#if isMultiSelectionMode}