Feature - Implemented virtual scroll on web (#573)

This PR implemented a virtual scroll on the web, as seen in this article.

[Building the Google Photos Web UI](https://medium.com/google-design/google-photos-45b714dfbed1)

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { assetStore } from '$lib/stores/assets.store';
+	import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
+	import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
+	import { fly } from 'svelte/transition';
+	import { AssetResponseDto } from '@api';
+	import lodash from 'lodash-es';
+	import moment from 'moment';
+	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import {
+		assetInteractionStore,
+		assetsInAlbumStoreState,
+		isMultiSelectStoreState,
+		selectedAssets,
+		selectedGroup
+	} from '$lib/stores/asset-interaction.store';
+	export let assets: AssetResponseDto[];
+	export let bucketDate: string;
+	export let bucketHeight: number;
+
+	const dispatch = createEventDispatcher();
+
+	let isMouseOverGroup = false;
+	let actualBucketHeight: number;
+	let hoveredDateGroup: string = '';
+	$: assetsGroupByDate = lodash
+		.chain(assets)
+		.groupBy((a) => moment(a.createdAt).format('ddd, MMM DD YYYY'))
+		.sortBy((group) => assets.indexOf(group[0]))
+		.value();
+
+	$: {
+		if (actualBucketHeight && actualBucketHeight != 0 && actualBucketHeight != bucketHeight) {
+			assetStore.updateBucketHeight(bucketDate, actualBucketHeight);
+		}
+	}
+
+	const assetClickHandler = (
+		asset: AssetResponseDto,
+		assetsInDateGroup: AssetResponseDto[],
+		dateGroupTitle: string
+	) => {
+		if ($isMultiSelectStoreState) {
+			assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle);
+		} else {
+			assetInteractionStore.setViewingAsset(asset);
+		}
+	};
+
+	const selectAssetGroupHandler = (
+		selectAssetGroupHandler: AssetResponseDto[],
+		dateGroupTitle: string
+	) => {
+		if ($selectedGroup.has(dateGroupTitle)) {
+			assetInteractionStore.removeGroupFromMultiselectGroup(dateGroupTitle);
+			selectAssetGroupHandler.forEach((asset) => {
+				assetInteractionStore.removeAssetFromMultiselectGroup(asset);
+			});
+		} else {
+			assetInteractionStore.addGroupToMultiselectGroup(dateGroupTitle);
+			selectAssetGroupHandler.forEach((asset) => {
+				assetInteractionStore.addAssetToMultiselectGroup(asset);
+			});
+		}
+	};
+
+	const assetSelectHandler = (
+		asset: AssetResponseDto,
+		assetsInDateGroup: AssetResponseDto[],
+		dateGroupTitle: string
+	) => {
+		if ($selectedAssets.has(asset)) {
+			assetInteractionStore.removeAssetFromMultiselectGroup(asset);
+		} else {
+			assetInteractionStore.addAssetToMultiselectGroup(asset);
+		}
+
+		// Check if all assets are selected in a group to toggle the group selection's icon
+		let selectedAssetsInGroupCount = 0;
+		assetsInDateGroup.forEach((asset) => {
+			if ($selectedAssets.has(asset)) {
+				selectedAssetsInGroupCount++;
+			}
+		});
+
+		// if all assets are selected in a group, add the group to selected group
+		if (selectedAssetsInGroupCount == assetsInDateGroup.length) {
+			assetInteractionStore.addGroupToMultiselectGroup(dateGroupTitle);
+		} else {
+			assetInteractionStore.removeGroupFromMultiselectGroup(dateGroupTitle);
+		}
+	};
+
+	const assetMouseEventHandler = (dateGroupTitle: string) => {
+		// Show multi select icon on hover on date group
+		hoveredDateGroup = dateGroupTitle;
+	};
+</script>
+
+<section
+	id="asset-group-by-date"
+	class="flex flex-wrap gap-5 mt-5"
+	bind:clientHeight={actualBucketHeight}
+>
+	{#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}
+		{@const dateGroupTitle = moment(assetsInDateGroup[0].createdAt).format('ddd, MMM DD YYYY')}
+		<!-- Asset Group By Date -->
+		<div
+			class="flex flex-col"
+			on:mouseenter={() => (isMouseOverGroup = true)}
+			on:mouseleave={() => (isMouseOverGroup = false)}
+		>
+			<!-- Date group title -->
+			<p class="font-medium text-sm text-immich-fg mb-2 flex place-items-center h-6">
+				{#if (hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle)}
+					<div
+						transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
+						class="inline-block px-2 hover:cursor-pointer"
+						on:click={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)}
+					>
+						{#if $selectedGroup.has(dateGroupTitle)}
+							<CheckCircle size="24" color="#4250af" />
+						{:else}
+							<CircleOutline size="24" color="#757575" />
+						{/if}
+					</div>
+				{/if}
+
+				<span>
+					{dateGroupTitle}
+				</span>
+			</p>
+
+			<!-- Image grid -->
+			<div class="flex flex-wrap gap-[2px]">
+				{#each assetsInDateGroup as asset (asset.id)}
+					<ImmichThumbnail
+						{asset}
+						{groupIndex}
+						on:click={() => assetClickHandler(asset, assetsInDateGroup, dateGroupTitle)}
+						on:select={() => assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle)}
+						on:mouse-event={() => assetMouseEventHandler(dateGroupTitle)}
+						selected={$selectedAssets.has(asset)}
+						disabled={$assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1}
+					/>
+				{/each}
+			</div>
+		</div>
+	{/each}
+</section>
+
+<style>
+	#asset-group-by-date {
+		contain: layout;
+	}
+</style>