refactor(web): disable shortcut when writting (#4057)

* Revert "fix: disable shortcut when writting text (#4053)"

This reverts commit fd6ade2b5d.

* refactor: disable shortcut when writting

* pr feedback

* pr feedback

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

@@ -20,6 +20,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';
 
   export let sharedLink: SharedLinkResponseDto;
 
@@ -76,6 +77,9 @@
   });
 
   const handleKeyboardPress = (event: KeyboardEvent) => {
+    if (shouldIgnoreShortcut(event)) {
+      return;
+    }
     if (!$showAssetViewer) {
       switch (event.key) {
         case 'Escape':

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -27,7 +27,7 @@
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import Close from 'svelte-material-icons/Close.svelte';
   import ProgressBar, { ProgressBarStatus } from '../shared-components/progress-bar/progress-bar.svelte';
-  import { disableShortcut } from '$lib/stores/shortcut.store';
+  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
 
   export let assetStore: AssetStore | null = null;
   export let asset: AssetResponseDto;
@@ -53,7 +53,7 @@
   let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : true;
   let canCopyImagesToClipboard: boolean;
 
-  const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo.key, keyInfo.shiftKey);
+  const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo);
 
   onMount(async () => {
     document.addEventListener('keydown', onKeyboardPress);
@@ -89,11 +89,14 @@
     }
   };
 
-  const handleKeyboardPress = (key: string, shiftKey: boolean) => {
-    if ($disableShortcut) {
+  const handleKeyboardPress = (event: KeyboardEvent) => {
+    if (shouldIgnoreShortcut(event)) {
       return;
     }
 
+    const key = event.key;
+    const shiftKey = event.shiftKey;
+
     switch (key) {
       case 'a':
       case 'A':
@@ -212,13 +215,11 @@
 
   const openAlbumPicker = (shared: boolean) => {
     isShowAlbumPicker = true;
-    $disableShortcut = true;
     addToSharedAlbum = shared;
   };
 
   const handleAddToNewAlbum = (event: CustomEvent) => {
     isShowAlbumPicker = false;
-    $disableShortcut = false;
 
     const { albumName }: { albumName: string } = event.detail;
     api.albumApi.createAlbum({ createAlbumDto: { albumName, assetIds: [asset.id] } }).then((response) => {
@@ -229,7 +230,6 @@
 
   const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => {
     isShowAlbumPicker = false;
-    $disableShortcut = false;
     const album = event.detail.album;
 
     await addAssetsToAlbum(album.id, [asset.id]);
@@ -457,10 +457,7 @@
       on:newAlbum={handleAddToNewAlbum}
       on:newSharedAlbum={handleAddToNewAlbum}
       on:album={handleAddToAlbum}
-      on:close={() => {
-        isShowAlbumPicker = false;
-        $disableShortcut = false;
-      }}
+      on:close={() => (isShowAlbumPicker = false)}
     />
   {/if}
 

web/src/lib/components/photos-page/actions/add-to-album.svelte

@@ -10,7 +10,6 @@
   import { AlbumResponseDto, api } from '@api';
   import { getMenuContext } from '../asset-select-context-menu.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { disableShortcut } from '$lib/stores/shortcut.store';
 
   export let shared = false;
   let showAlbumPicker = false;
@@ -20,13 +19,11 @@
 
   const handleHideAlbumPicker = () => {
     showAlbumPicker = false;
-    $disableShortcut = false;
     closeMenu();
   };
 
   const handleAddToNewAlbum = (event: CustomEvent) => {
     showAlbumPicker = false;
-    $disableShortcut = false;
 
     const { albumName }: { albumName: string } = event.detail;
     const assetIds = Array.from(getAssets()).map((asset) => asset.id);
@@ -46,7 +43,6 @@
 
   const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => {
     showAlbumPicker = false;
-    $disableShortcut = false;
     const album = event.detail.album;
     const assetIds = Array.from(getAssets()).map((asset) => asset.id);
     await addAssetsToAlbum(album.id, assetIds);
@@ -54,13 +50,7 @@
   };
 </script>
 
-<MenuOption
-  on:click={() => {
-    showAlbumPicker = true;
-    $disableShortcut = true;
-  }}
-  text={shared ? 'Add to Shared Album' : 'Add to Album'}
-/>
+<MenuOption on:click={() => (showAlbumPicker = true)} text={shared ? 'Add to Shared Album' : 'Add to Album'} />
 
 {#if showAlbumPicker}
   <AlbumSelectionModal

web/src/lib/components/photos-page/asset-grid.svelte

@@ -17,7 +17,7 @@
   import Scrollbar from '../shared-components/scrollbar/scrollbar.svelte';
   import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
   import AssetDateGroup from './asset-date-group.svelte';
-  import { disableShortcut } from '$lib/stores/shortcut.store';
+  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
 
   export let isSelectionMode = false;
   export let singleSelect = false;
@@ -55,7 +55,7 @@
   });
 
   const handleKeyboardPress = (event: KeyboardEvent) => {
-    if ($isSearchEnabled || $disableShortcut) {
+    if ($isSearchEnabled || shouldIgnoreShortcut(event)) {
       return;
     }
 

web/src/lib/stores/shortcut.store.ts

@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const disableShortcut = writable<boolean>(false);

web/src/lib/utils/shortcut.ts

@@ -0,0 +1,7 @@
+export const shouldIgnoreShortcut = (event: Event): boolean => {
+  const type = (event.target as HTMLInputElement).type;
+  if (['textarea', 'text'].includes(type)) {
+    return true;
+  }
+  return false;
+};

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -45,7 +45,6 @@
   import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
   import type { PageData } from './$types';
   import { clickOutside } from '$lib/utils/click-outside';
-  import { disableShortcut } from '$lib/stores/shortcut.store';
 
   export let data: PageData;
 
@@ -277,7 +276,6 @@
 
       album.description = description;
       isEditingDescription = false;
-      $disableShortcut = false;
     } catch (error) {
       handleError(error, 'Error updating album description');
     }
@@ -474,10 +472,7 @@
           {#if isOwned || album.description}
             <button
               class="mb-12 mt-6 w-full border-b-2 border-transparent pb-2 text-left text-lg font-medium transition-colors hover:border-b-2 dark:text-gray-300"
-              on:click={() => {
-                isEditingDescription = true;
-                $disableShortcut = true;
-              }}
+              on:click={() => (isEditingDescription = true)}
               class:hover:border-gray-400={isOwned}
               disabled={!isOwned}
               title="Edit description"
@@ -544,10 +539,7 @@
 {#if isEditingDescription}
   <EditDescriptionModal
     {album}
-    on:close={() => {
-      isEditingDescription = false;
-      $disableShortcut = false;
-    }}
+    on:close={() => (isEditingDescription = false)}
     on:updated={({ detail: description }) => handleUpdateDescription(description)}
   />
 {/if}

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

@@ -21,6 +21,7 @@
   import { browser } from '$app/environment';
   import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
   import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
+  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
 
   export let data: PageData;
   let selectHidden = false;
@@ -60,6 +61,9 @@
   });
 
   const handleKeyboardPress = (event: KeyboardEvent) => {
+    if (shouldIgnoreShortcut(event)) {
+      return;
+    }
     switch (event.key) {
       case 'Escape':
         handleCloseClick();

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

@@ -27,6 +27,7 @@
   import { browser } from '$app/environment';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { preventRaceConditionSearchBar } from '$lib/stores/search.store';
+  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
 
   export let data: PageData;
 
@@ -51,6 +52,9 @@
   });
 
   const handleKeyboardPress = (event: KeyboardEvent) => {
+    if (shouldIgnoreShortcut(event)) {
+      return;
+    }
     if (!$showAssetViewer) {
       switch (event.key) {
         case 'Escape':