feat(web): add ctrl+a / ctrl+d shortcuts to select / deselect all assets (#8105)

* feat(web): use ctrl+a / ctrl+d to select / deselect all assets

* fix(web): use shortcutList for ctrl+a / ctrl+d

* fix(web): remove useless get()

* feat(web): asset interaction store can now select many assets at once

web/src/lib/components/photos-page/actions/select-all-assets.svelte

@@ -1,42 +1,24 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
-  import { BucketPosition, type AssetStore, isSelectAllCancelled } from '$lib/stores/assets.store';
-  import { handleError } from '$lib/utils/handle-error';
-  import { get } from 'svelte/store';
-  import { mdiTimerSand, mdiSelectAll } from '@mdi/js';
+  import { type AssetStore, isSelectingAllAssets } from '$lib/stores/assets.store';
+  import { mdiSelectAll, mdiTimerSand } from '@mdi/js';
+  import { selectAllAssets } from '$lib/utils/asset-utils';
 
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;
 
-  let selecting = false;
-
   const handleSelectAll = async () => {
-    try {
-      $isSelectAllCancelled = false;
-      selecting = true;
+    await selectAllAssets(assetStore, assetInteractionStore);
+  };
 
-      const assetGridState = get(assetStore);
-      for (const bucket of assetGridState.buckets) {
-        if ($isSelectAllCancelled) {
-          break;
-        }
-        await assetStore.loadBucket(bucket.bucketDate, BucketPosition.Unknown);
-        for (const asset of bucket.assets) {
-          assetInteractionStore.selectAsset(asset);
-        }
-      }
-
-      selecting = false;
-    } catch (error) {
-      handleError(error, 'Error selecting all assets');
-    }
+  const handleCancel = () => {
+    $isSelectingAllAssets = false;
   };
 </script>
 
-{#if selecting}
-  <CircleIconButton title="Delete" icon={mdiTimerSand} />
-{/if}
-{#if !selecting}
+{#if $isSelectingAllAssets}
+  <CircleIconButton title="Cancel" icon={mdiTimerSand} on:click={handleCancel} />
+{:else}
   <CircleIconButton title="Select all" icon={mdiSelectAll} on:click={handleSelectAll} />
 {/if}

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

@@ -3,12 +3,12 @@
   import { AppRoute, AssetAction } from '$lib/constants';
   import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { BucketPosition, type AssetStore, type Viewport } from '$lib/stores/assets.store';
+  import { BucketPosition, isSelectingAllAssets, type AssetStore, type Viewport } from '$lib/stores/assets.store';
   import { locale, showDeleteModal } from '$lib/stores/preferences.store';
   import { isSearchEnabled } from '$lib/stores/search.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { deleteAssets } from '$lib/utils/actions';
-  import { shortcuts, type ShortcutOptions, matchesShortcut } from '$lib/utils/shortcut';
+  import { type ShortcutOptions, shortcuts } from '$lib/utils/shortcut';
   import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
   import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
   import { DateTime } from 'luxon';
@@ -20,6 +20,7 @@
   import AssetDateGroup from './asset-date-group.svelte';
   import DeleteAssetDialog from './delete-asset-dialog.svelte';
   import { handlePromiseError } from '$lib/utils';
+  import { selectAllAssets } from '$lib/utils/asset-utils';
 
   export let isSelectionMode = false;
   export let singleSelect = false;
@@ -93,12 +94,14 @@
       { shortcut: { key: 'Escape' }, onShortcut: () => dispatch('escape') },
       { shortcut: { key: '?', shift: true }, onShortcut: () => (showShortcuts = !showShortcuts) },
       { shortcut: { key: '/' }, onShortcut: () => goto(AppRoute.EXPLORE) },
+      { shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets(assetStore, assetInteractionStore) },
     ];
 
     if ($isMultiSelectState) {
       shortcuts.push(
         { shortcut: { key: 'Delete' }, onShortcut: onDelete },
         { shortcut: { key: 'Delete', shift: true }, onShortcut: onForceDelete },
+        { shortcut: { key: 'D', ctrl: true }, onShortcut: () => deselectAllAssets() },
       );
     }
 
@@ -202,12 +205,17 @@
 
   let shiftKeyIsDown = false;
 
+  const deselectAllAssets = () => {
+    $isSelectingAllAssets = false;
+    assetInteractionStore.clearMultiselect();
+  };
+
   const onKeyDown = (event: KeyboardEvent) => {
     if ($isSearchEnabled) {
       return;
     }
 
-    if (matchesShortcut(event, { key: 'Shift', shift: true })) {
+    if (event.key === 'Shift') {
       event.preventDefault();
       shiftKeyIsDown = true;
     }
@@ -218,7 +226,7 @@
       return;
     }
 
-    if (matchesShortcut(event, { key: 'Shift', shift: false })) {
+    if (event.key === 'Shift') {
       event.preventDefault();
       shiftKeyIsDown = false;
     }

web/src/lib/components/shared-components/control-app-bar.svelte

@@ -5,7 +5,7 @@
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import { fly } from 'svelte/transition';
   import { mdiClose } from '@mdi/js';
-  import { isSelectAllCancelled } from '$lib/stores/assets.store';
+  import { isSelectingAllAssets } from '$lib/stores/assets.store';
 
   export let showBackButton = true;
   export let backIcon = mdiClose;
@@ -31,7 +31,7 @@
   };
 
   const handleClose = () => {
-    $isSelectAllCancelled = true;
+    $isSelectingAllAssets = false;
     dispatch('close');
   };