confirm changes for modifying over 40 assets

i18n/en.json

@@ -1589,6 +1589,7 @@
   "mobile_app_download_onboarding_note": "Download the companion mobile app using the following options",
   "model": "Model",
   "modify_date": "Modify Date",
+  "modify_tags_confirmation": "Are you sure you want to modify tags for {count} selected assets?",
   "month": "Month",
   "more": "More",
   "motion": "Motion",

web/src/lib/modals/AssetTagModal.spec.ts

@@ -362,6 +362,31 @@ describe('AssetTagModal component', () => {
     expect(tagPills[0]).toHaveTextContent('NewTag');
   });
 
+  test('displays confirmation dialog with correct asset count if modifying tags for over 40 assets', async () => {
+    mockGetAllTags.mockResolvedValueOnce(tagDtos);
+    mockGetAllTagsForAssets.mockResolvedValueOnce([] as TagsForAssetsResponseDto[]);
+
+    render(AssetTagModal, {
+      props: {
+        assetIds: Array.from({ length: 41 }).fill('asset-id') as string[],
+        onClose,
+      },
+    });
+
+    await waitFor(() => {
+      expect(mockGetAllTagsForAssets).toHaveBeenCalled();
+    });
+
+    await fireEvent.focus(getTagsCombobox());
+    const options = getTagComboboxOptions();
+    await fireEvent.click(options[0]);
+
+    // Click save button
+    await fireEvent.click(screen.getByRole('button', { name: /save tags/i }));
+
+    expect(screen.getByText(/modify_tags_confirmation/i)).toBeInTheDocument();
+  });
+
   test('calls tagUntagAssets correctly with the correct set of tag/asset ids', async () => {
     const addedTag1: TagResponseDto = {
       id: 'tag-id-added1',

web/src/lib/modals/AssetTagModal.svelte

@@ -8,7 +8,7 @@
     type TagResponseDto,
     type TagsForAssetsResponseDto,
   } from '@immich/sdk';
-  import { FormModal } from '@immich/ui';
+  import { FormModal, modalManager } from '@immich/ui';
   import { mdiTag } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -66,7 +66,14 @@
       .filter((tagForAsset) => !tagIsSelected(tagForAsset.tagId, false))
       .map((tagForAsset) => tagForAsset.tagId);
 
-    if (tagIdsToAdd.length > 0 || tagIdsToRemove.length > 0) {
+    const isConfirmed =
+      assetIds.length > 40
+        ? await modalManager.showDialog({
+            prompt: $t('modify_tags_confirmation', { values: { count: assetIds.length } }),
+          })
+        : true;
+
+    if (isConfirmed && (tagIdsToAdd.length > 0 || tagIdsToRemove.length > 0)) {
       await tagUntagAssets({
         tagIdsToAdd,
         tagIdsToRemove,
@@ -74,9 +81,10 @@
         showNotification: false,
       });
       eventManager.emit('AssetsTag', assetIds);
+      onClose(true);
+    } else {
+      onClose(false);
     }
-
-    onClose(true);
   };
 
   const handleSelect = async (option?: ComboBoxOption) => {