Implement album creation on web (#365)

* Added album creation button functionality * Added input for album title * Added select photos button * Added page to select assets * Show photo selection timeline * Implemented update album name mechanism: * Added selection mechanism * Added selection mechanism with existing assets in album * Refactored and added comments * Refactored and added comments - 2 * Refactor album app bar * Added modal for select user * Implemented choose users * Added additional share user button * Added rule to show add users button
2025-10-29 17:40:28 +00:00 · 2022-07-22 09:44:22 -05:00
parent 02bde51caf
commit 1d34976dd0
14 changed files with 787 additions and 154 deletions
--- a/web/src/lib/components/album-page/album-app-bar.svelte
+++ b/web/src/lib/components/album-page/album-app-bar.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte';
+	import Close from 'svelte-material-icons/Close.svelte';
+
+	export let backIcon = Close;
+	let appBarBorder = '';
+	const dispatch = createEventDispatcher();
+	onMount(() => {
+		window.onscroll = () => {
+			if (window.pageYOffset > 80) {
+				appBarBorder = 'border border-gray-200 bg-gray-50';
+			} else {
+				appBarBorder = '';
+			}
+		};
+	});
+</script>
+
+<div class="fixed top-0 w-full bg-transparent z-[100]">
+	<div
+		id="asset-selection-app-bar"
+		class={`flex justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2  transition-all place-items-center`}
+	>
+		<div class="flex place-items-center gap-6">
+			<button
+				on:click={() => dispatch('close-button-click')}
+				id="immich-circle-icon-button"
+				class={`rounded-full p-3 flex place-items-center place-content-center text-gray-600 transition-all hover:bg-gray-200`}
+			>
+				<svelte:component this={backIcon} size="24" />
+			</button>
+			<slot name="leading" />
+		</div>
+
+		<div class="flex place-items-center gap-6 mr-4">
+			<slot name="trailing" />
+		</div>
+	</div>
+</div>
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -1,18 +1,30 @@
 <script lang="ts">
-	import { afterNavigate } from '$app/navigation';
+	import { afterNavigate, goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { AlbumResponseDto, AssetResponseDto, ThumbnailFormat } from '@api';
+	import { AlbumResponseDto, api, AssetResponseDto, ThumbnailFormat, UserResponseDto } from '@api';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+	import Plus from 'svelte-material-icons/Plus.svelte';
 	import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
 	import AssetViewer from '../asset-viewer/asset-viewer.svelte';
 	import CircleAvatar from '../shared-components/circle-avatar.svelte';
 	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
+	import AssetSelection from './asset-selection.svelte';
+	import _ from 'lodash-es';
+	import { assets } from '$app/paths';
+	import UserSelection from './user-selection-modal.svelte';
+	import AlbumAppBar from './album-app-bar.svelte';
+	import UserSelectionModal from './user-selection-modal.svelte';

 	const dispatch = createEventDispatcher();
 	export let album: AlbumResponseDto;

 	let isShowAssetViewer = false;
+	let isShowAssetSelection = false;
+	let isShowShareUserSelection = false;
+	let isEditingTitle = false;
+	let isCreatingSharedAlbum = false;
+
 	let selectedAsset: AssetResponseDto;
 	let currentViewAssetIndex = 0;

@@ -20,10 +32,20 @@
 	let thumbnailSize: number = 300;
 	let border = '';
 	let backUrl = '/albums';
+	let currentAlbumName = '';
+	let currentUser: UserResponseDto;
+	let bodyElement: HTMLElement;

-	afterNavigate(({ from, to }) => {
+	$: isOwned = currentUser?.id == album.ownerId;
+
+	afterNavigate(({ from }) => {
 		backUrl = from?.pathname ?? '/albums';
+
+		if (from?.pathname === '/sharing') {
+			isCreatingSharedAlbum = true;
+		}
 	});
+
 	$: {
 		if (album.assets.length < 6) {
 			thumbnailSize = Math.floor(viewWidth / album.assets.length - album.assets.length);
@@ -36,20 +58,18 @@
 		const startDate = new Date(album.assets[0].createdAt);
 		const endDate = new Date(album.assets[album.assets.length - 1].createdAt);

-		const startDateString = startDate.toLocaleDateString('us-EN', {
+		const timeFormatOption: Intl.DateTimeFormatOptions = {
 			month: 'short',
 			day: 'numeric',
 			year: 'numeric'
-		});
-		const endDateString = endDate.toLocaleDateString('us-EN', {
-			month: 'short',
-			day: 'numeric',
-			year: 'numeric'
-		});
+		};
+
+		const startDateString = startDate.toLocaleDateString('us-EN', timeFormatOption);
+		const endDateString = endDate.toLocaleDateString('us-EN', timeFormatOption);
 		return `${startDateString} - ${endDateString}`;
 	};

-	onMount(() => {
+	onMount(async () => {
 		window.onscroll = (event: Event) => {
 			if (window.pageYOffset > 80) {
 				border = 'border border-gray-200 bg-gray-50';
@@ -57,6 +77,15 @@
 				border = '';
 			}
 		};
+
+		currentAlbumName = album.albumName;
+
+		try {
+			const { data } = await api.userApi.getMyUserInfo();
+			currentUser = data;
+		} catch (e) {
+			console.log('Error [getMyUserInfo - album-viewer] ', e);
+		}
 	});

 	const viewAsset = (event: CustomEvent) => {
@@ -102,62 +131,152 @@
 		isShowAssetViewer = false;
 		history.pushState(null, '', `${$page.url.pathname}`);
 	};
+
+	// Update Album Name
+	$: {
+		if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) {
+			api.albumApi
+				.updateAlbumInfo(album.id, {
+					ownerId: album.ownerId,
+					albumName: album.albumName
+				})
+				.then(() => {
+					currentAlbumName = album.albumName;
+				})
+				.catch((e) => {
+					console.log('Error [updateAlbumInfo] ', e);
+				});
+		}
+	}
+
+	const createAlbumHandler = async (event: CustomEvent) => {
+		const { assets }: { assets: string[] } = event.detail;
+
+		try {
+			const { data } = await api.albumApi.addAssetsToAlbum(album.id, { assetIds: assets });
+			album = data;
+
+			isShowAssetSelection = false;
+		} catch (e) {
+			console.log('Error [createAlbumHandler] ', e);
+		}
+	};
+
+	const addUserHandler = async (event: CustomEvent) => {
+		const { selectedUsers }: { selectedUsers: UserResponseDto[] } = event.detail;
+
+		try {
+			const { data } = await api.albumApi.addUsersToAlbum(album.id, {
+				sharedUserIds: Array.from(selectedUsers).map((u) => u.id)
+			});
+
+			album = data;
+
+			isShowShareUserSelection = false;
+		} catch (e) {
+			console.log('Error [createAlbumHandler] ', e);
+		}
+	};
+
+	// Prevent scrolling when modal is open
+	$: {
+		if (isShowShareUserSelection == true) {
+			document.body.style.overflow = 'hidden';
+		} else {
+			document.body.style.overflow = '';
+		}
+	}
 </script>

-<section class="w-screen h-screen bg-immich-bg">
-	<div class="fixed top-0 w-full bg-immich-bg z-[100]">
-		<div class={`flex justify-between rounded-lg ${border} p-2 mx-2 mt-2 transition-all`}>
-			<a sveltekit:prefetch href={backUrl} title="Go Back">
+<svelte:body bind:this={bodyElement} />
+<section class="bg-immich-bg relative">
+	<AlbumAppBar on:close-button-click={() => goto(backUrl)} backIcon={ArrowLeft}>
+		<svelte:fragment slot="trailing">
+			{#if album.assets.length > 0}
 				<button
 					id="immich-circle-icon-button"
 					class={`rounded-full p-3 flex place-items-center place-content-center text-gray-600 transition-all hover:bg-gray-200`}
-				>
-					<ArrowLeft size="24" />
-				</button>
-			</a>
-			<div class="right-button-group" title="Add Photos">
-				<button
-					id="immich-circle-icon-button"
-					class={`rounded-full p-3 flex place-items-center place-content-center text-gray-600 transition-all hover:bg-gray-200`}
-					on:click={() => dispatch('click')}
+					on:click={() => (isShowAssetSelection = true)}
 				>
 					<FileImagePlusOutline size="24" />
 				</button>
-			</div>
-		</div>
-	</div>
+			{/if}

-	<section class="m-6 py-[72px] px-[160px]">
-		<p class="text-6xl text-immich-primary">
-			{album.albumName}
-		</p>
+			{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
+				<button
+					disabled={album.assets.length == 0}
+					on:click={() => (isShowShareUserSelection = true)}
+					class="immich-text-button border bg-immich-primary text-gray-50 hover:bg-immich-primary/75 px-6 text-sm disabled:opacity-25 disabled:bg-gray-500 disabled:cursor-not-allowed"
+					><span class="px-2">Share</span></button
+				>
+			{/if}
+		</svelte:fragment>
+	</AlbumAppBar>

-		<p class="my-4 text-sm text-gray-500">{getDateRange()}</p>
+	<section class="m-auto my-[160px] w-[60%]">
+		<input
+			on:focus={() => (isEditingTitle = true)}
+			on:blur={() => (isEditingTitle = false)}
+			class={`transition-all text-6xl text-immich-primary w-[99%] border-b-2 border-transparent outline-none ${
+				isOwned ? 'hover:border-gray-400' : 'hover:border-transparent'
+			} focus:outline-none focus:border-b-2 focus:border-immich-primary bg-immich-bg`}
+			type="text"
+			bind:value={album.albumName}
+			disabled={!isOwned}
+		/>

-		{#if album.sharedUsers.length > 0}
-			<div class="mb-4">
+		{#if album.assets.length > 0}
+			<p class="my-4 text-sm text-gray-500">{getDateRange()}</p>
+		{/if}
+
+		{#if album.shared}
+			<div class="my-4 flex">
 				{#each album.sharedUsers as user}
 					<span class="mr-1">
 						<CircleAvatar {user} />
 					</span>
 				{/each}
+
+				<button
+					style:display={isOwned ? 'block' : 'none'}
+					on:click={() => (isShowShareUserSelection = true)}
+					title="Add more users"
+					class="h-12 w-12 border bg-white transition-colors hover:bg-gray-300 text-3xl flex place-items-center place-content-center rounded-full"
+					>+</button
+				>
 			</div>
 		{/if}

-		<div class="flex flex-wrap gap-1 w-full" bind:clientWidth={viewWidth}>
-			{#each album.assets as asset}
-				{#if album.assets.length < 7}
-					<ImmichThumbnail
-						{asset}
-						{thumbnailSize}
-						format={ThumbnailFormat.Jpeg}
-						on:viewAsset={viewAsset}
-					/>
-				{:else}
-					<ImmichThumbnail {asset} {thumbnailSize} on:viewAsset={viewAsset} />
-				{/if}
-			{/each}
-		</div>
+		{#if album.assets.length > 0}
+			<div class="flex flex-wrap gap-1 w-full" bind:clientWidth={viewWidth}>
+				{#each album.assets as asset}
+					{#if album.assets.length < 7}
+						<ImmichThumbnail
+							{asset}
+							{thumbnailSize}
+							format={ThumbnailFormat.Jpeg}
+							on:click={viewAsset}
+						/>
+					{:else}
+						<ImmichThumbnail {asset} {thumbnailSize} on:click={viewAsset} />
+					{/if}
+				{/each}
+			</div>
+		{:else}
+			<!-- Album is empty - Show asset selectection buttons -->
+			<section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
+				<div class="w-[300px]">
+					<p class="text-xs">ADD PHOTOS</p>
+					<button
+						on:click={() => (isShowAssetSelection = true)}
+						class="w-full py-8 border bg-white rounded-md mt-5 flex place-items-center gap-6 px-8 transition-all hover:bg-gray-100 hover:text-immich-primary"
+					>
+						<span><Plus color="#4250af" size="24" /> </span>
+						<span class="text-lg text-immich-fg">Select photos</span>
+					</button>
+				</div>
+			</section>
+		{/if}
 	</section>
 </section>

@@ -170,3 +289,19 @@
 		on:close={closeViewer}
 	/>
 {/if}
+
+{#if isShowAssetSelection}
+	<AssetSelection
+		assetsInAlbum={album.assets}
+		on:go-back={() => (isShowAssetSelection = false)}
+		on:create-album={createAlbumHandler}
+	/>
+{/if}
+
+{#if isShowShareUserSelection}
+	<UserSelectionModal
+		on:close={() => (isShowShareUserSelection = false)}
+		on:add-user={addUserHandler}
+		sharedUsersInAlbum={new Set(album.sharedUsers)}
+	/>
+{/if}
--- a/web/src/lib/components/album-page/asset-selection.svelte
+++ b/web/src/lib/components/album-page/asset-selection.svelte
@@ -0,0 +1,197 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { quintOut } from 'svelte/easing';
+	import { fly } from 'svelte/transition';
+	import { assetsGroupByDate, flattenAssetGroupByDate } from '$lib/stores/assets';
+	import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
+	import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
+	import moment from 'moment';
+	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
+	import { AssetResponseDto } from '@api';
+	import AlbumAppBar from './album-app-bar.svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let assetsInAlbum: AssetResponseDto[];
+
+	let selectedAsset: Set<string> = new Set();
+	let selectedGroup: Set<number> = new Set();
+	let existingGroup: Set<number> = new Set();
+	let groupWithAssetsInAlbum: Record<number, Set<string>> = {};
+
+	onMount(() => scanForExistingSelectedGroup());
+
+	const selectAssetHandler = (assetId: string, groupIndex: number) => {
+		const tempSelectedAsset = new Set(selectedAsset);
+
+		if (selectedAsset.has(assetId)) {
+			tempSelectedAsset.delete(assetId);
+
+			const tempSelectedGroup = new Set(selectedGroup);
+			tempSelectedGroup.delete(groupIndex);
+			selectedGroup = tempSelectedGroup;
+		} else {
+			tempSelectedAsset.add(assetId);
+		}
+
+		selectedAsset = tempSelectedAsset;
+
+		// Check if all assets are selected in a group to toggle the group selection's icon
+		if (!selectedGroup.has(groupIndex)) {
+			const assetsInGroup = $assetsGroupByDate[groupIndex];
+			let selectedAssetsInGroupCount = 0;
+
+			assetsInGroup.forEach((asset) => {
+				if (selectedAsset.has(asset.id)) {
+					selectedAssetsInGroupCount++;
+				}
+			});
+
+			// Taking into account of assets in group that are already in album
+			if (groupWithAssetsInAlbum[groupIndex]) {
+				selectedAssetsInGroupCount += groupWithAssetsInAlbum[groupIndex].size;
+			}
+
+			// if all assets are selected in a group, add the group to selected group
+			if (selectedAssetsInGroupCount == assetsInGroup.length) {
+				selectedGroup = selectedGroup.add(groupIndex);
+			}
+		}
+	};
+
+	const selectAssetGroupHandler = (groupIndex: number) => {
+		if (existingGroup.has(groupIndex)) return;
+
+		let tempSelectedGroup = new Set(selectedGroup);
+		let tempSelectedAsset = new Set(selectedAsset);
+
+		if (selectedGroup.has(groupIndex)) {
+			tempSelectedGroup.delete(groupIndex);
+			tempSelectedAsset.forEach((assetId) => {
+				if ($assetsGroupByDate[groupIndex].find((a) => a.id == assetId)) {
+					tempSelectedAsset.delete(assetId);
+				}
+			});
+		} else {
+			tempSelectedGroup.add(groupIndex);
+			tempSelectedAsset = new Set([
+				...selectedAsset,
+				...$assetsGroupByDate[groupIndex].map((a) => a.id)
+			]);
+		}
+
+		// Remove existed assets in the date group
+		if (groupWithAssetsInAlbum[groupIndex]) {
+			tempSelectedAsset.forEach((assetId) => {
+				if (groupWithAssetsInAlbum[groupIndex].has(assetId)) {
+					tempSelectedAsset.delete(assetId);
+				}
+			});
+		}
+
+		selectedAsset = tempSelectedAsset;
+		selectedGroup = tempSelectedGroup;
+	};
+
+	const addSelectedAssets = async () => {
+		dispatch('create-album', {
+			assets: Array.from(selectedAsset)
+		});
+	};
+
+	/**
+	 * This function is used to scan for existing selected group in the album
+	 * and format it into the form of Record<any, Set<string>> to conditionally render and perform interaction
+	 * relationship between the noneselected assets/groups
+	 * with the existing assets/groups
+	 */
+	const scanForExistingSelectedGroup = () => {
+		if (assetsInAlbum) {
+			// Convert to each assetGroup to set of assetIds
+			const distinctAssetGroup = $assetsGroupByDate.map((assetGroup) => {
+				return new Set(assetGroup.map((asset) => asset.id));
+			});
+
+			// Find the group that contains all existed assets with the same set of assetIds
+			for (const assetInAlbum of assetsInAlbum) {
+				distinctAssetGroup.forEach((group, index) => {
+					if (group.has(assetInAlbum.id)) {
+						groupWithAssetsInAlbum[index] = new Set(groupWithAssetsInAlbum[index] || []).add(
+							assetInAlbum.id
+						);
+					}
+				});
+			}
+
+			Object.keys(groupWithAssetsInAlbum).forEach((key) => {
+				if (distinctAssetGroup[parseInt(key)].size == groupWithAssetsInAlbum[parseInt(key)].size) {
+					existingGroup = existingGroup.add(parseInt(key));
+				}
+			});
+		}
+	};
+</script>
+
+<section
+	transition:fly={{ y: 1000, duration: 200, easing: quintOut }}
+	class="absolute top-0 left-0 w-full h-full  bg-immich-bg z-[200]"
+>
+	<AlbumAppBar on:close-button-click={() => dispatch('go-back')}>
+		<svelte:fragment slot="leading">
+			{#if selectedAsset.size == 0}
+				<p class="text-lg">Add to album</p>
+			{:else}
+				<p class="text-lg">{selectedAsset.size} selected</p>
+			{/if}
+		</svelte:fragment>
+
+		<svelte:fragment slot="trailing">
+			<button
+				disabled={selectedAsset.size === 0}
+				on:click={addSelectedAssets}
+				class="immich-text-button border bg-immich-primary text-gray-50 hover:bg-immich-primary/75 px-6 text-sm disabled:opacity-25 disabled:bg-gray-500 disabled:cursor-not-allowed"
+				><span class="px-2">Done</span></button
+			>
+		</svelte:fragment>
+	</AlbumAppBar>
+
+	<section id="image-grid" class="flex flex-wrap gap-14 mt-[160px] px-20">
+		{#each $assetsGroupByDate as assetsInDateGroup, groupIndex}
+			<!-- Asset Group By Date -->
+			<div class="flex flex-col">
+				<!-- Date group title -->
+				<p class="font-medium text-sm text-immich-fg mb-2 flex place-items-center h-6">
+					<span
+						in:fly={{ x: -24, duration: 200, opacity: 0.5 }}
+						out:fly={{ x: -24, duration: 200 }}
+						class="inline-block px-2 hover:cursor-pointer"
+						on:click={() => selectAssetGroupHandler(groupIndex)}
+					>
+						{#if selectedGroup.has(groupIndex)}
+							<CheckCircle size="24" color="#4250af" />
+						{:else if existingGroup.has(groupIndex)}
+							<CheckCircle size="24" color="#757575" />
+						{:else}
+							<CircleOutline size="24" color="#757575" />
+						{/if}
+					</span>
+
+					{moment(assetsInDateGroup[0].createdAt).format('ddd, MMM DD YYYY')}
+				</p>
+
+				<!-- Image grid -->
+				<div class="flex flex-wrap gap-[2px]">
+					{#each assetsInDateGroup as asset}
+						<ImmichThumbnail
+							{asset}
+							on:click={() => selectAssetHandler(asset.id, groupIndex)}
+							{groupIndex}
+							selected={selectedAsset.has(asset.id)}
+							isExisted={assetsInAlbum.findIndex((a) => a.id == asset.id) != -1}
+						/>
+					{/each}
+				</div>
+			</div>
+		{/each}
+	</section>
+</section>
--- a/web/src/lib/components/album-page/user-selection-modal.svelte
+++ b/web/src/lib/components/album-page/user-selection-modal.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { api, UserResponseDto } from '@api';
+	import BaseModal from '../shared-components/base-modal.svelte';
+	import CircleAvatar from '../shared-components/circle-avatar.svelte';
+
+	export let sharedUsersInAlbum: Set<UserResponseDto>;
+	let users: UserResponseDto[] = [];
+	let selectedUsers: Set<UserResponseDto> = new Set();
+
+	const dispatch = createEventDispatcher();
+
+	onMount(async () => {
+		const { data } = await api.userApi.getAllUsers(false);
+
+		users = data;
+
+		// Remove the existed shared users from the album
+		sharedUsersInAlbum.forEach((sharedUser) => {
+			users = users.filter((user) => user.id !== sharedUser.id);
+		});
+	});
+
+	const selectUser = (user: UserResponseDto) => {
+		const tempSelectedUsers = new Set(selectedUsers);
+
+		if (selectedUsers.has(user)) {
+			tempSelectedUsers.delete(user);
+		} else {
+			tempSelectedUsers.add(user);
+		}
+
+		selectedUsers = tempSelectedUsers;
+	};
+
+	const deselectUser = (user: UserResponseDto) => {
+		const tempSelectedUsers = new Set(selectedUsers);
+
+		tempSelectedUsers.delete(user);
+
+		selectedUsers = tempSelectedUsers;
+	};
+</script>
+
+<BaseModal on:close={() => dispatch('close')}>
+	<svelte:fragment slot="title">
+		<span class="flex gap-2 place-items-center">
+			<img src="/immich-logo.svg" width="24" alt="Immich" />
+			<p class="font-medium text-immich-fg">Invite to album</p>
+		</span>
+	</svelte:fragment>
+
+	<div class="max-h-[400px] overflow-y-auto immich-scrollbar">
+		{#if selectedUsers.size > 0}
+			<div class="flex gap-4 py-2 px-5 overflow-x-auto place-items-center mb-2">
+				<p class="font-medium">To</p>
+
+				{#each Array.from(selectedUsers) as user}
+					<button
+						on:click={() => deselectUser(user)}
+						class="flex gap-1 place-items-center border border-gray-400 rounded-full p-1 hover:bg-gray-200 transition-colors"
+					>
+						<CircleAvatar size={28} {user} />
+						<p class="text-xs font-medium">{user.firstName} {user.lastName}</p>
+					</button>
+				{/each}
+			</div>
+		{/if}
+
+		{#if users.length > 0}
+			<p class="text-xs font-medium px-5">SUGGESTIONS</p>
+
+			<div class="my-4">
+				{#each users as user}
+					<button
+						on:click={() => selectUser(user)}
+						class="w-full flex place-items-center gap-4 py-4 px-5 hover:bg-gray-200  transition-all"
+					>
+						{#if selectedUsers.has(user)}
+							<span
+								class="bg-immich-primary text-white rounded-full w-12 h-12 border flex place-items-center place-content-center text-3xl"
+								>✓</span
+							>
+						{:else}
+							<CircleAvatar {user} />
+						{/if}
+
+						<div class="text-left">
+							<p class="text-immich-fg">
+								{user.firstName}
+								{user.lastName}
+							</p>
+							<p class="text-xs ">
+								{user.email}
+							</p>
+						</div>
+					</button>
+				{/each}
+			</div>
+		{:else}
+			<p class="text-sm px-5">
+				Looks like you have shared this album with all users or you don't have any user to share
+				with.
+			</p>
+		{/if}
+
+		{#if selectedUsers.size > 0}
+			<div class="flex place-content-end p-5 ">
+				<button
+					on:click={() => dispatch('add-user', { selectedUsers })}
+					class="text-white bg-immich-primary px-4 py-2 rounded-lg text-sm font-bold transition-colors hover:bg-immich-primary/75"
+					>Add</button
+				>
+			</div>
+		{/if}
+	</div>
+</BaseModal>