fix(web): keep other comments visible when deleting a comment (#31848)

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

@@ -67,9 +67,9 @@
     hour12: false,
   };
 
-  const handleDeleteReaction = async (reaction: ActivityResponseDto, index: number) => {
+  const handleDeleteReaction = async (reaction: ActivityResponseDto) => {
     try {
-      await activityManager.deleteActivity(reaction, index);
+      await activityManager.deleteActivity(reaction);
 
       const deleteMessages: Record<ReactionType, string> = {
         [ReactionType.Comment]: $t('comment_deleted'),
@@ -118,7 +118,7 @@
   };
 </script>
 
-{#snippet reactionMenu(reaction: ActivityResponseDto, index: number, title: string)}
+{#snippet reactionMenu(reaction: ActivityResponseDto, title: string)}
   {#if reaction.user.id === authManager.user.id || isAlbumOwner}
     <ContextMenuButton
       translations={{ open_menu: title }}
@@ -130,7 +130,7 @@
           icon: mdiTrashCanOutline,
           title: $t('remove'),
           color: 'danger',
-          onAction: () => handleDeleteReaction(reaction, index),
+          onAction: () => handleDeleteReaction(reaction),
         },
       ]}
     />
@@ -176,7 +176,7 @@
                   />
                 </a>
               {/if}
-              {@render reactionMenu(reaction, index, $t('comment_options'))}
+              {@render reactionMenu(reaction, $t('comment_options'))}
             </div>
 
             {#if (index !== activityManager.activities.length - 1 && !shouldGroup(activityManager.activities[index].createdAt, activityManager.activities[index + 1].createdAt)) || index === activityManager.activities.length - 1}
@@ -209,7 +209,7 @@
                     />
                   </a>
                 {/if}
-                {@render reactionMenu(reaction, index, $t('reaction_options'))}
+                {@render reactionMenu(reaction, $t('reaction_options'))}
               </div>
               {#if (index !== activityManager.activities.length - 1 && isTenMinutesApart(activityManager.activities[index].createdAt, activityManager.activities[index + 1].createdAt)) || index === activityManager.activities.length - 1}
                 <div

web/src/lib/managers/activity-manager.svelte.spec.ts

@@ -0,0 +1,32 @@
+import {
+  deleteActivity,
+  getActivities,
+  getActivityStatistics,
+  ReactionType,
+  type ActivityResponseDto,
+} from '@immich/sdk';
+import { activityManager } from '$lib/managers/activity-manager.svelte';
+
+vi.mock('@immich/sdk', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@immich/sdk')>()),
+  deleteActivity: vi.fn(),
+  getActivities: vi.fn(),
+  getActivityStatistics: vi.fn(),
+}));
+
+const comment = (id: string) => ({ id, type: ReactionType.Comment, comment: id }) as ActivityResponseDto;
+
+describe('ActivityManager', () => {
+  it('keeps the other comments when a comment is deleted', async () => {
+    const comments = [comment('first'), comment('second'), comment('third')];
+    vi.mocked(getActivities).mockResolvedValue(comments);
+    vi.mocked(getActivityStatistics).mockResolvedValue({ comments: 3, likes: 0 });
+    await activityManager.init('album-id', 'asset-id');
+    expect(activityManager.activities.map(({ id }) => id)).toEqual(['first', 'second', 'third']);
+
+    vi.mocked(deleteActivity).mockReturnValue(new Promise(() => {}));
+    void activityManager.deleteActivity(comments[1]);
+
+    expect(activityManager.activities.map(({ id }) => id)).toEqual(['first', 'third']);
+  });
+});

web/src/lib/managers/activity-manager.svelte.ts

@@ -98,7 +98,7 @@ class ActivityManager {
     return activity;
   }
 
-  async deleteActivity(activity: ActivityResponseDto, index?: number) {
+  async deleteActivity(activity: ActivityResponseDto) {
     if (!this.#albumId) {
       return;
     }
@@ -111,9 +111,7 @@ class ActivityManager {
       this.#likeCount--;
     }
 
-    this.#activities = index
-      ? this.#activities.splice(index, 1)
-      : this.#activities.filter(({ id }) => id !== activity.id);
+    this.#activities = this.#activities.filter(({ id }) => id !== activity.id);
 
     await deleteActivity({ id: activity.id });
     this.#invalidateCache(this.#albumId, this.#assetId);