Added sharing page to web (#355)

* Added shared album

* Added list tile

* Show info of shared album owner

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { AlbumResponseDto, api, ThumbnailFormat } from '@api';
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+
+	export let album: AlbumResponseDto;
+
+	let imageData: string = '/no-thumbnail.png';
+	const dispatch = createEventDispatcher();
+
+	const loadImageData = async (thubmnailId: string | null) => {
+		if (thubmnailId == null) {
+			return '/no-thumbnail.png';
+		}
+
+		const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Jpeg, { responseType: 'blob' });
+		if (data instanceof Blob) {
+			imageData = URL.createObjectURL(data);
+			return imageData;
+		}
+	};
+</script>
+
+<div class="h-[339px] w-[275px] hover:cursor-pointer mt-4" on:click={() => dispatch('click', album)}>
+	<div class={`h-[275px] w-[275px]`}>
+		{#await loadImageData(album.albumThumbnailAssetId)}
+			<div class={`bg-immich-primary/10 w-full h-full  flex place-items-center place-content-center rounded-xl`}>
+				...
+			</div>
+		{:then imageData}
+			<img
+				in:fade={{ duration: 250 }}
+				src={imageData}
+				alt={album.id}
+				class={`object-cover w-full h-full transition-all z-0 rounded-xl duration-300 hover:translate-x-2 hover:-translate-y-2 hover:shadow-[-8px_8px_0px_0_#FFB800]`}
+			/>
+		{/await}
+	</div>
+
+	<div class="mt-4">
+		<p class="text-sm font-medium text-gray-800">
+			{album.albumName}
+		</p>
+
+		<span class="text-xs flex gap-2">
+			<p>{album.assets.length} items</p>
+
+			{#if album.shared}
+				<p>·</p>
+				<p>Shared</p>
+			{/if}
+		</span>
+	</div>
+</div>
+
+<style>
+</style>

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

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+
+	import { AlbumResponseDto, ThumbnailFormat } from '@api';
+	import { createEventDispatcher, onMount } from 'svelte';
+	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+	import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
+	import CircleAvatar from '../shared-components/circle-avatar.svelte';
+	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
+
+	const dispatch = createEventDispatcher();
+	export let album: AlbumResponseDto;
+	let viewWidth: number;
+	let thumbnailSize: number = 300;
+	let border = '';
+	let backUrl = '/albums';
+
+	afterNavigate(({ from, to }) => {
+		backUrl = from?.pathname ?? '/albums';
+	});
+	$: {
+		if (album.assets.length < 6) {
+			thumbnailSize = Math.floor(viewWidth / album.assets.length - album.assets.length);
+		} else {
+			thumbnailSize = Math.floor(viewWidth / 6 - 6);
+		}
+	}
+
+	const getDateRange = () => {
+		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', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+		const endDateString = endDate.toLocaleDateString('us-EN', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+		return `${startDateString} - ${endDateString}`;
+	};
+
+	onMount(() => {
+		window.onscroll = (event: Event) => {
+			if (window.pageYOffset > 80) {
+				border = 'border border-gray-200 bg-gray-50';
+			} else {
+				border = '';
+			}
+		};
+	});
+</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">
+				<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')}
+				>
+					<FileImagePlusOutline size="24" />
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<section class="m-6 py-[72px] px-[160px]">
+		<p class="text-6xl text-immich-primary">
+			{album.albumName}
+		</p>
+
+		<p class="my-4 text-sm text-gray-500">{getDateRange()}</p>
+
+		{#if album.sharedUsers.length > 0}
+			<div class="mb-4">
+				{#each album.sharedUsers as user}
+					<span class="mr-1">
+						<CircleAvatar {user} />
+					</span>
+				{/each}
+			</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} />
+				{:else}
+					<ImmichThumbnail {asset} {thumbnailSize} />
+				{/if}
+			{/each}
+		</div>
+	</section>
+</section>