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