From cb6114d13fdf73de852739b99e7e3511875eab44 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Thu, 13 Aug 2026 12:19:47 -0400
Subject: [PATCH] fix(web): cluster invitation

---
 i18n/en.json                                  |  4 +++-
 .../lib/modals/ClusterGroupUsersModal.svelte  | 22 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index f368a235f8..55268d4cab 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -1,5 +1,6 @@
 {
   "about": "About",
+  "accept": "Accept",
   "account": "Account",
   "account_settings": "Account Settings",
   "acknowledge": "Acknowledge",
@@ -735,7 +736,8 @@
   "client_cert_title": "SSL client certificate [EXPERIMENTAL]",
   "close": "Close",
   "cluster_group": "Cluster group",
-  "cluster_group_description": "People are recognized across the photos of everyone in this group",
+  "cluster_group_description": "People are recognized across the photos of everyone in the group",
+  "cluster_group_invite_description": "You have been invited to join this cluster group.",
   "collapse": "Collapse",
   "collapse_all": "Collapse all",
   "color": "Color",
diff --git a/web/src/lib/modals/ClusterGroupUsersModal.svelte b/web/src/lib/modals/ClusterGroupUsersModal.svelte
index 8386e666c7..d461e64658 100644
--- a/web/src/lib/modals/ClusterGroupUsersModal.svelte
+++ b/web/src/lib/modals/ClusterGroupUsersModal.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
   import { getClusterGroupUsers, type UserResponseDto } from '@immich/sdk';
-  import { LoadingSpinner, Modal, ModalBody, Text } from '@immich/ui';
+  import { Button, HStack, LoadingSpinner, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
     clusterGroupId: string;
-    onClose: () => void;
+    onClose: (result?: 'accept' | 'decline') => void;
   }
 
   let { clusterGroupId, onClose }: Props = $props();
@@ -18,14 +18,21 @@
   };
 </script>
 
-<Modal title={$t('cluster_group')} {onClose} size="small">
+<!-- closing the modal leaves the request alone, so only the buttons decide its fate -->
+<Modal title={$t('cluster_group')} onClose={() => onClose()} size="small">
   <ModalBody>
     {#await loadUsers()}
       <div class="flex w-full place-content-center place-items-center">
         <LoadingSpinner />
       </div>
     {:then _}
-      <div class="flex max-h-75 immich-scrollbar flex-col gap-4 overflow-y-auto">
+      <Text size="small" color="muted">{$t('cluster_group_invite_description')}</Text>
+
+      <div class="mt-4">
+        <Text size="small" fontWeight="medium">{$t('users')}</Text>
+      </div>
+
+      <div class="mt-4 flex max-h-75 immich-scrollbar flex-col gap-4 overflow-y-auto">
         {#each users as user (user.id)}
           <div class="flex items-center gap-4">
             <UserAvatar {user} size="md" />
@@ -38,4 +45,11 @@
       </div>
     {/await}
   </ModalBody>
+
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button shape="round" color="danger" fullWidth onclick={() => onClose('decline')}>{$t('decline')}</Button>
+      <Button shape="round" fullWidth onclick={() => onClose('accept')}>{$t('accept')}</Button>
+    </HStack>
+  </ModalFooter>
 </Modal>