fix: disable shortcut when writting text (#4053)

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

@@ -27,6 +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';
 
   export let assetStore: AssetStore | null = null;
   export let asset: AssetResponseDto;
@@ -89,6 +90,10 @@
   };
 
   const handleKeyboardPress = (key: string, shiftKey: boolean) => {
+    if ($disableShortcut) {
+      return;
+    }
+
     switch (key) {
       case 'a':
       case 'A':
@@ -207,11 +212,13 @@
 
   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) => {
@@ -222,6 +229,7 @@
 
   const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => {
     isShowAlbumPicker = false;
+    $disableShortcut = false;
     const album = event.detail.album;
 
     await addAssetsToAlbum(album.id, [asset.id]);
@@ -449,7 +457,10 @@
       on:newAlbum={handleAddToNewAlbum}
       on:newSharedAlbum={handleAddToNewAlbum}
       on:album={handleAddToAlbum}
-      on:close={() => (isShowAlbumPicker = false)}
+      on:close={() => {
+        isShowAlbumPicker = false;
+        $disableShortcut = false;
+      }}
     />
   {/if}
 

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

@@ -10,6 +10,7 @@
   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;
@@ -19,11 +20,13 @@
 
   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);
@@ -43,6 +46,7 @@
 
   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);
@@ -50,7 +54,13 @@
   };
 </script>
 
-<MenuOption on:click={() => (showAlbumPicker = true)} text={shared ? 'Add to Shared Album' : 'Add to Album'} />
+<MenuOption
+  on:click={() => {
+    showAlbumPicker = true;
+    $disableShortcut = true;
+  }}
+  text={shared ? 'Add to Shared Album' : 'Add to Album'}
+/>
 
 {#if showAlbumPicker}
   <AlbumSelectionModal

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

@@ -17,6 +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';
 
   export let isSelectionMode = false;
   export let singleSelect = false;
@@ -54,7 +55,7 @@
   });
 
   const handleKeyboardPress = (event: KeyboardEvent) => {
-    if ($isSearchEnabled) {
+    if ($isSearchEnabled || $disableShortcut) {
       return;
     }
 

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

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

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

@@ -45,6 +45,7 @@
   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;
 
@@ -276,6 +277,7 @@
 
       album.description = description;
       isEditingDescription = false;
+      $disableShortcut = false;
     } catch (error) {
       handleError(error, 'Error updating album description');
     }
@@ -472,7 +474,10 @@
           {#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)}
+              on:click={() => {
+                isEditingDescription = true;
+                $disableShortcut = true;
+              }}
               class:hover:border-gray-400={isOwned}
               disabled={!isOwned}
               title="Edit description"
@@ -539,7 +544,10 @@
 {#if isEditingDescription}
   <EditDescriptionModal
     {album}
-    on:close={() => (isEditingDescription = false)}
+    on:close={() => {
+      isEditingDescription = false;
+      $disableShortcut = false;
+    }}
     on:updated={({ detail: description }) => handleUpdateDescription(description)}
   />
 {/if}