feat(web): add archive shortcut to grid (#9499)

* feat(web): add archive shortcut to grid

* Fix error

* Don't unnecessarily pass parameter

* Use an existing function to close the menu

* Deduplicate type

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/photos-page/actions/archive-action.svelte

@@ -1,15 +1,10 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import {
-    NotificationType,
-    notificationController,
-  } from '$lib/components/shared-components/notification/notification';
   import type { OnArchive } from '$lib/utils/actions';
-  import { handleError } from '$lib/utils/handle-error';
-  import { updateAssets } from '@immich/sdk';
   import { mdiArchiveArrowDownOutline, mdiArchiveArrowUpOutline, mdiTimerSand } from '@mdi/js';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { archiveAssets } from '$lib/utils/asset-utils';
   import { t } from 'svelte-i18n';
 
   export let onArchive: OnArchive;
@@ -26,33 +21,14 @@
 
   const handleArchive = async () => {
     const isArchived = !unarchive;
+    const assets = [...getOwnedAssets()].filter((asset) => asset.isArchived !== isArchived);
     loading = true;
-
-    try {
-      const assets = [...getOwnedAssets()].filter((asset) => asset.isArchived !== isArchived);
-      const ids = assets.map(({ id }) => id);
-
-      if (ids.length > 0) {
-        await updateAssets({ assetBulkUpdateDto: { ids, isArchived } });
-      }
-
-      for (const asset of assets) {
-        asset.isArchived = isArchived;
-      }
-
+    const ids = await archiveAssets(assets, isArchived);
+    if (ids) {
       onArchive(ids, isArchived);
-
-      notificationController.show({
-        message: `${isArchived ? $t('archived') : $t('unarchived')} ${ids.length}`,
-        type: NotificationType.Info,
-      });
-
       clearSelect();
-    } catch (error) {
-      handleError(error, `Unable to ${isArchived ? 'archive' : 'unarchive'}`);
-    } finally {
-      loading = false;
     }
+    loading = false;
   };
 </script>
 

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

@@ -18,7 +18,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 { stackAssets } from '$lib/utils/asset-utils';
+  import { archiveAssets, stackAssets } from '$lib/utils/asset-utils';
   import DeleteAssetDialog from './delete-asset-dialog.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { selectAllAssets } from '$lib/utils/asset-utils';
@@ -48,6 +48,7 @@
   $: timelineY = element?.scrollTop || 0;
   $: isEmpty = $assetStore.initialized && $assetStore.buckets.length === 0;
   $: idsSelectedAssets = [...$selectedAssets].map(({ id }) => id);
+  $: isAllArchived = [...$selectedAssets].every((asset) => asset.isArchived);
   $: {
     if (isEmpty) {
       assetInteractionStore.clearMultiselect();
@@ -106,6 +107,14 @@
     }
   };
 
+  const toggleArchive = async () => {
+    const ids = await archiveAssets(Array.from($selectedAssets), !isAllArchived);
+    if (ids) {
+      assetStore.removeAssets(ids);
+      deselectAllAssets();
+    }
+  };
+
   const focusElement = () => {
     if (document.activeElement === document.body) {
       element.focus();
@@ -132,6 +141,7 @@
         { shortcut: { key: 'Delete', shift: true }, onShortcut: onForceDelete },
         { shortcut: { key: 'D', ctrl: true }, onShortcut: () => deselectAllAssets() },
         { shortcut: { key: 's' }, onShortcut: () => onStackAssets() },
+        { shortcut: { key: 'a', shift: true }, onShortcut: toggleArchive },
       );
     }