Implement mechanism to remove and add shared user in album on web (#369)

* AFixed overlay issue of modal

* Added modal with existing user

* Added custom scrollbar to all pages

* Fixed Document is not define when access document DOM node in browswer

* Added context menu

* Added api to remove user from album

* Handle user leave album

* Added share button to non-shared album

* Added padding to album viewer:

* Fixed margin top of asset selection page

* Fixed issue cannot push to dockerhub

web/src/lib/components/album-page/album-app-bar.svelte

@@ -1,18 +1,30 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { browser } from '$app/env';
+
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	import Close from 'svelte-material-icons/Close.svelte';
+	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
 
 	export let backIcon = Close;
-	let appBarBorder = '';
+	let appBarBorder = 'bg-immich-bg';
 	const dispatch = createEventDispatcher();
+
 	onMount(() => {
-		window.onscroll = () => {
-			if (window.pageYOffset > 80) {
-				appBarBorder = 'border border-gray-200 bg-gray-50';
-			} else {
-				appBarBorder = '';
-			}
-		};
+		if (browser) {
+			document.addEventListener('scroll', (e) => {
+				if (window.pageYOffset > 80) {
+					appBarBorder = 'border border-gray-200 bg-gray-50';
+				} else {
+					appBarBorder = 'bg-immich-bg';
+				}
+			});
+		}
+	});
+
+	onDestroy(() => {
+		if (browser) {
+			document.removeEventListener('scroll', (e) => {});
+		}
 	});
 </script>
 
@@ -22,17 +34,19 @@
 		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
+			<CircleIconButton
 				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>
+				logo={backIcon}
+				backgroundColor={'transparent'}
+				logoColor={'rgb(75 85 99)'}
+				hoverColor={'#e2e7e9'}
+				size={'24'}
+			/>
+
 			<slot name="leading" />
 		</div>
 
-		<div class="flex place-items-center gap-6 mr-4">
+		<div class="flex place-items-center gap-1 mr-4">
 			<slot name="trailing" />
 		</div>
 	</div>

web/src/lib/components/album-page/album-viewer.svelte

@@ -6,15 +6,16 @@
 	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 ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.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';
+	import ShareInfoModal from './share-info-modal.svelte';
+	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
 
 	const dispatch = createEventDispatcher();
 	export let album: AlbumResponseDto;
@@ -24,6 +25,7 @@
 	let isShowShareUserSelection = false;
 	let isEditingTitle = false;
 	let isCreatingSharedAlbum = false;
+	let isShowShareInfoModal = false;
 
 	let selectedAsset: AssetResponseDto;
 	let currentViewAssetIndex = 0;
@@ -34,7 +36,6 @@
 	let backUrl = '/albums';
 	let currentAlbumName = '';
 	let currentUser: UserResponseDto;
-	let bodyElement: HTMLElement;
 
 	$: isOwned = currentUser?.id == album.ownerId;
 
@@ -70,14 +71,6 @@
 	};
 
 	onMount(async () => {
-		window.onscroll = (event: Event) => {
-			if (window.pageYOffset > 80) {
-				border = 'border border-gray-200 bg-gray-50';
-			} else {
-				border = '';
-			}
-		};
-
 		currentAlbumName = album.albumName;
 
 		try {
@@ -178,28 +171,40 @@
 		}
 	};
 
-	// Prevent scrolling when modal is open
-	$: {
-		if (isShowShareUserSelection == true) {
-			document.body.style.overflow = 'hidden';
-		} else {
-			document.body.style.overflow = '';
+	const sharedUserDeletedHandler = async (event: CustomEvent) => {
+		const { userId }: { userId: string } = event.detail;
+
+		if (userId == 'me') {
+			isShowShareInfoModal = false;
+			goto(backUrl);
 		}
-	}
+
+		try {
+			const { data } = await api.albumApi.getAlbumInfo(album.id);
+
+			album = data;
+			isShowShareInfoModal = false;
+		} catch (e) {
+			console.log('Error [sharedUserDeletedHandler] ', e);
+		}
+	};
 </script>
 
-<svelte:body bind:this={bodyElement} />
-<section class="bg-immich-bg relative">
+<section class="bg-immich-bg">
 	<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`}
+				<CircleIconButton
+					title="Add Photos"
 					on:click={() => (isShowAssetSelection = true)}
-				>
-					<FileImagePlusOutline size="24" />
-				</button>
+					logo={FileImagePlusOutline}
+				/>
+
+				<CircleIconButton
+					title="Share"
+					on:click={() => (isShowShareUserSelection = true)}
+					logo={ShareVariantOutline}
+				/>
 			{/if}
 
 			{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
@@ -226,14 +231,14 @@
 		/>
 
 		{#if album.assets.length > 0}
-			<p class="my-4 text-sm text-gray-500">{getDateRange()}</p>
+			<p class="my-4 text-sm text-gray-500 font-medium">{getDateRange()}</p>
 		{/if}
 
 		{#if album.shared}
-			<div class="my-4 flex">
+			<div class="my-6 flex">
 				{#each album.sharedUsers as user}
 					<span class="mr-1">
-						<CircleAvatar {user} />
+						<CircleAvatar {user} on:click={() => (isShowShareInfoModal = true)} />
 					</span>
 				{/each}
 
@@ -248,7 +253,7 @@
 		{/if}
 
 		{#if album.assets.length > 0}
-			<div class="flex flex-wrap gap-1 w-full" bind:clientWidth={viewWidth}>
+			<div class="flex flex-wrap gap-1 w-full pb-20" bind:clientWidth={viewWidth}>
 				{#each album.assets as asset}
 					{#if album.assets.length < 7}
 						<ImmichThumbnail
@@ -305,3 +310,11 @@
 		sharedUsersInAlbum={new Set(album.sharedUsers)}
 	/>
 {/if}
+
+{#if isShowShareInfoModal}
+	<ShareInfoModal
+		on:close={() => (isShowShareInfoModal = false)}
+		{album}
+		on:user-deleted={sharedUserDeletedHandler}
+	/>
+{/if}

web/src/lib/components/album-page/asset-selection.svelte

@@ -133,8 +133,8 @@
 </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]"
+	transition:fly={{ y: 500, duration: 100, easing: quintOut }}
+	class="absolute top-0 left-0 w-full h-full  bg-immich-bg z-[9999]"
 >
 	<AlbumAppBar on:close-button-click={() => dispatch('go-back')}>
 		<svelte:fragment slot="leading">
@@ -155,7 +155,7 @@
 		</svelte:fragment>
 	</AlbumAppBar>
 
-	<section id="image-grid" class="flex flex-wrap gap-14 mt-[160px] px-20">
+	<section class="flex flex-wrap gap-14  px-20 overflow-y-auto">
 		{#each $assetsGroupByDate as assetsInDateGroup, groupIndex}
 			<!-- Asset Group By Date -->
 			<div class="flex flex-col">

web/src/lib/components/album-page/share-info-modal.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { AlbumResponseDto, api, UserResponseDto } from '@api';
+	import BaseModal from '../shared-components/base-modal.svelte';
+	import CircleAvatar from '../shared-components/circle-avatar.svelte';
+	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
+	import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
+	import MenuOption from '../shared-components/context-menu/menu-option.svelte';
+
+	export let album: AlbumResponseDto;
+
+	const dispatch = createEventDispatcher();
+
+	let currentUser: UserResponseDto;
+	let isShowMenu = false;
+	let position = { x: 0, y: 0 };
+	let targetUserId: string;
+	$: isOwned = currentUser?.id == album.ownerId;
+
+	onMount(async () => {
+		try {
+			const { data } = await api.userApi.getMyUserInfo();
+			currentUser = data;
+		} catch (e) {
+			console.error('Error [share-info-modal] [getAllUsers]', e);
+		}
+	});
+
+	const showContextMenu = (userId: string) => {
+		const iconButton = document.getElementById('icon-' + userId);
+
+		if (iconButton) {
+			position = {
+				x: iconButton.getBoundingClientRect().left,
+				y: iconButton.getBoundingClientRect().bottom
+			};
+		}
+
+		targetUserId = userId;
+		isShowMenu = !isShowMenu;
+	};
+
+	const removeUser = async (userId: string) => {
+		try {
+			await api.albumApi.removeUserFromAlbum(album.id, userId);
+			dispatch('user-deleted', { userId });
+		} catch (e) {
+			console.error('Error [share-info-modal] [removeUser]', e);
+		}
+	};
+</script>
+
+<BaseModal on:close={() => dispatch('close')}>
+	<svelte:fragment slot="title">
+		<span class="flex gap-2 place-items-center">
+			<p class="font-medium text-immich-fg">Options</p>
+		</span>
+	</svelte:fragment>
+
+	<section class="max-h-[400px] overflow-y-auto immich-scrollbar pb-4">
+		{#each album.sharedUsers as user}
+			<div
+				class="flex gap-4 p-5 place-items-center justify-between w-full transition-colors hover:bg-gray-50"
+			>
+				<div class="flex gap-4 place-items-center">
+					<CircleAvatar {user} />
+					<p class="font-medium text-sm">{user.firstName} {user.lastName}</p>
+				</div>
+
+				<div id={`icon-${user.id}`} class="flex place-items-center">
+					{#if isOwned}
+						<CircleIconButton
+							on:click={() => showContextMenu(user.id)}
+							logo={DotsVertical}
+							backgroundColor={'transparent'}
+							logoColor={'#5f6368'}
+							hoverColor={'#e2e7e9'}
+							size={'20'}
+						/>
+					{:else if user.id == currentUser?.id}
+						<button
+							on:click={() => removeUser('me')}
+							class="text-sm text-immich-primary font-medium transition-colors hover:text-immich-primary/75"
+							>Leave</button
+						>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</section>
+
+	{#if isShowMenu}
+		<ContextMenu {...position} on:clickoutside={() => (isShowMenu = false)}>
+			<MenuOption on:click={() => removeUser(targetUserId)} text="Remove" />
+		</ContextMenu>
+	{/if}
+</BaseModal>

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -50,7 +50,7 @@
 		</span>
 	</svelte:fragment>
 
-	<div class="max-h-[400px] overflow-y-auto immich-scrollbar">
+	<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>