fix(web): cancel select all (#6047)

* fix: cancel select all

* rename var

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

@@ -1,7 +1,7 @@
 <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 } from '$lib/stores/assets.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';
@@ -13,10 +13,14 @@
 
   const handleSelectAll = async () => {
     try {
+      $isSelectAllCancelled = false;
       selecting = true;
 
       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);

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

@@ -5,6 +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';
 
   export let showBackButton = true;
   export let backIcon = mdiClose;
@@ -29,6 +30,11 @@
     }
   };
 
+  const handleClose = () => {
+    $isSelectAllCancelled = true;
+    dispatch('close');
+  };
+
   onMount(() => {
     if (browser) {
       document.addEventListener('scroll', onScroll);
@@ -52,7 +58,7 @@
     <div class="flex place-items-center gap-6 justify-self-start dark:text-immich-dark-fg">
       {#if showBackButton}
         <CircleIconButton
-          on:click={() => dispatch('close')}
+          on:click={handleClose}
           icon={backIcon}
           backgroundColor={'transparent'}
           hoverColor={'#e2e7e9'}

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

@@ -438,3 +438,5 @@ export class AssetStore {
     this.store$.update(() => this);
   }
 }
+
+export const isSelectAllCancelled = writable(false);