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;
     }