From 970c496e55bdf261e7c1247bb282d3a7204e40f2 Mon Sep 17 00:00:00 2001
From: DawidKrynski <dawid_krynski.64@wp.pl>
Date: Mon, 28 Sep 2026 10:59:37 +0200
Subject: [PATCH] fix(web): keep other comments visible when deleting a comment
 (#31848)

---
 .../asset-viewer/ActivityViewer.svelte        | 12 +++----
 .../managers/activity-manager.svelte.spec.ts  | 32 +++++++++++++++++++
 .../lib/managers/activity-manager.svelte.ts   |  6 ++--
 3 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 web/src/lib/managers/activity-manager.svelte.spec.ts

diff --git a/web/src/lib/components/asset-viewer/ActivityViewer.svelte b/web/src/lib/components/asset-viewer/ActivityViewer.svelte
index c2219d4696..7644fbddbd 100644
--- a/web/src/lib/components/asset-viewer/ActivityViewer.svelte
+++ b/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
diff --git a/web/src/lib/managers/activity-manager.svelte.spec.ts b/web/src/lib/managers/activity-manager.svelte.spec.ts
new file mode 100644
index 0000000000..2da5398b4f
--- /dev/null
+++ b/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']);
+  });
+});
diff --git a/web/src/lib/managers/activity-manager.svelte.ts b/web/src/lib/managers/activity-manager.svelte.ts
index 44dc0cfb41..31f5202971 100644
--- a/web/src/lib/managers/activity-manager.svelte.ts
+++ b/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);