feat(web): Memory (#2759)

* Add on this day

* add query for x year

* dev: add query

* dev: front end

* dev: styling

* styling

* more styling

* add new page

* navigating

* navigate back and forth

* styling

* show gallery

* fix test

* fix test

* show previous and next title

* fix test

* show up down scrolling button

* more styling

* styling

* fix app bar

* fix height of next/previous

* autoplay

* auto play

* refactor

* refactor

* refactor

* show date

* Navigate

* finish

* pr feedback

web/src/lib/components/photos-page/asset-grid.svelte

@@ -17,6 +17,7 @@
 	} from '../shared-components/scrollbar/scrollbar.svelte';
 	import AssetDateGroup from './asset-date-group.svelte';
 	import { BucketPosition } from '$lib/models/asset-grid-state';
+	import MemoryLane from './memory-lane.svelte';
 
 	export let user: UserResponseDto | undefined = undefined;
 	export let isAlbumSelectionMode = false;
@@ -130,6 +131,7 @@
 	on:scroll={handleTimelineScroll}
 >
 	{#if assetGridElement}
+		<MemoryLane />
 		<section id="virtual-timeline" style:height={$assetGridState.timelineHeight + 'px'}>
 			{#each $assetGridState.buckets as bucket, bucketIndex (bucketIndex)}
 				<IntersectionObserver

web/src/lib/components/photos-page/memory-lane.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { DateTime } from 'luxon';
+	import { MemoryLaneResponseDto, api } from '@api';
+	import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
+	import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
+	import { memoryStore } from '$lib/stores/memory.store';
+	import { goto } from '$app/navigation';
+
+	let memoryLane: MemoryLaneResponseDto[] = [];
+	$: shouldRender = memoryLane.length > 0;
+
+	onMount(async () => {
+		const timezone = DateTime.local().zoneName;
+		const { data } = await api.assetApi.getMemoryLane({ timezone });
+
+		memoryLane = data;
+		$memoryStore = data;
+	});
+
+	let memoryLaneElement: HTMLElement;
+	let offsetWidth = 0;
+	let innerWidth = 0;
+	$: isOverflow = offsetWidth < innerWidth;
+
+	function scrollLeft() {
+		memoryLaneElement.scrollTo({
+			left: memoryLaneElement.scrollLeft - 400,
+			behavior: 'smooth'
+		});
+	}
+
+	function scrollRight() {
+		memoryLaneElement.scrollTo({
+			left: memoryLaneElement.scrollLeft + 400,
+			behavior: 'smooth'
+		});
+	}
+</script>
+
+{#if shouldRender}
+	<section
+		id="memory-lane"
+		bind:this={memoryLaneElement}
+		class="relative overflow-x-hidden whitespace-nowrap mt-5 transition-all"
+		bind:offsetWidth
+	>
+		{#if isOverflow}
+			<div class="sticky left-0 z-20">
+				<div class="absolute right-0 top-[6rem] z-20">
+					<button
+						class="rounded-full opacity-50 hover:opacity-100 p-2 border border-gray-500 bg-gray-100 text-gray-500"
+						on:click={scrollRight}
+					>
+						<ChevronRight size="36" /></button
+					>
+				</div>
+
+				<div class="absolute left-0 top-[6rem] z-20">
+					<button
+						class="rounded-full opacity-50 hover:opacity-100 p-2 border border-gray-500 bg-gray-100 text-gray-500"
+						on:click={scrollLeft}><ChevronLeft size="36" /></button
+					>
+				</div>
+			</div>
+		{/if}
+
+		<div class="inline-block" bind:offsetWidth={innerWidth}>
+			{#each memoryLane as memory, i (memory.title)}
+				<button
+					class="memory-card relative inline-block mr-8 rounded-xl aspect-video h-[215px]"
+					on:click={() => goto(`/memory?index=${i}`)}
+				>
+					<img
+						class="rounded-xl h-full w-full object-cover"
+						src={api.getAssetThumbnailUrl(memory.assets[0].id, 'JPEG')}
+						alt={memory.title}
+						draggable="false"
+					/>
+					<p class="absolute bottom-2 left-4 text-lg text-white z-10">{memory.title}</p>
+					<div
+						class="absolute top-0 left-0 w-full h-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent z-0 hover:bg-black/20 transition-all"
+					/>
+				</button>
+			{/each}
+		</div>
+	</section>
+{/if}
+
+<style>
+	.memory-card {
+		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+	}
+</style>