Add asset viewer

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -296,7 +296,7 @@
 
 <section
 	id="immich-asset-viewer"
-	class="fixed h-screen w-screen left-0 top-0 overflow-y-hidden bg-black z-[999] grid grid-rows-[64px_1fr] grid-cols-4"
+	class="fixed h-screen w-screen left-0 top-0 overflow-y-hidden bg-black z-[1001] grid grid-rows-[64px_1fr] grid-cols-4"
 >
 	<div class="col-start-1 col-span-4 row-start-1 row-span-1 z-[1000] transition-transform">
 		<AssetViewerNavBar

web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte

@@ -14,6 +14,7 @@
 	import { getMapContext } from './map.svelte';
 	import { AssetResponseDto, getFileUrl } from '@api';
 	import { Marker, Icon } from 'leaflet';
+	import { assetInteractionStore } from '$lib/stores/asset-interaction.store';
 
 	export let assets: AssetResponseDto[];
 
@@ -55,6 +56,10 @@
 				alt: ''
 			});
 
+			marker.on('click', () => {
+				assetInteractionStore.setViewingAsset(asset);
+			});
+
 			cluster.addLayer(marker);
 		}
 

web/src/routes/(user)/map/+page.svelte

@@ -2,6 +2,13 @@
 	import type { PageData } from '../map/$types';
 	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
 	import { Map, TileLayer, AssetMarkerCluster } from '$lib/components/shared-components/leaflet';
+	import Portal from '$lib/components/shared-components/portal/portal.svelte';
+	import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
+	import {
+		assetInteractionStore,
+		isViewingAssetStoreState,
+		viewingAssetStoreState
+	} from '$lib/stores/asset-interaction.store';
 
 	export let data: PageData;
 </script>
@@ -26,3 +33,15 @@
 
 </UserPageLayout>
 
+<Portal target="body">
+	{#if $isViewingAssetStoreState}
+		<AssetViewer
+			asset={$viewingAssetStoreState}
+			showNavigation={false}
+			on:close={() => {
+				assetInteractionStore.setIsViewingAsset(false);
+			}}
+		/>
+	{/if}
+</Portal>
+