fix(web): cluster invitation

This commit is contained in:
Jason Rasmussen 2026-08-13 12:19:47 -04:00
parent 66860b8786
commit cb6114d13f
No known key found for this signature in database
GPG key ID: 2EF24B77EAFA4A41
2 changed files with 21 additions and 5 deletions

View file

@ -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",

View file

@ -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>