fix(web): layout nesting (#1881)

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/routes/(user)/share/[key]/+error.svelte

@@ -0,0 +1,9 @@
+<svelte:head>
+	<title>Opps! Error - Immich</title>
+</svelte:head>
+
+<section class="w-screen h-screen flex place-items-center place-content-center">
+	<div class="p-20 text-4xl dark:text-immich-dark-primary text-immich-primary">
+		Page not found :/
+	</div>
+</section>

web/src/routes/(user)/share/[key]/+page.server.ts

@@ -0,0 +1,36 @@
+export const prerender = false;
+import { error } from '@sveltejs/kit';
+
+import { getThumbnailUrl } from '$lib/utils/asset-utils';
+import { ThumbnailFormat } from '@api';
+import type { PageServerLoad } from './$types';
+import featurePanelUrl from '$lib/assets/feature-panel.png';
+
+export const load: PageServerLoad = async ({ params, parent, locals: { api } }) => {
+	const { user } = await parent();
+
+	const { key } = params;
+
+	try {
+		const { data: sharedLink } = await api.shareApi.getMySharedLink(key);
+
+		const assetCount = sharedLink.assets.length;
+		const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
+
+		return {
+			sharedLink,
+			meta: {
+				title: sharedLink.album ? sharedLink.album.albumName : 'Public Share',
+				description: sharedLink.description || `${assetCount} shared photos & videos.`,
+				imageUrl: assetId
+					? getThumbnailUrl(assetId, ThumbnailFormat.Webp, sharedLink.key)
+					: featurePanelUrl
+			},
+			user
+		};
+	} catch (e) {
+		throw error(404, {
+			message: 'Invalid shared link'
+		});
+	}
+};

web/src/routes/(user)/share/[key]/+page.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+	import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
+	import { AlbumResponseDto, SharedLinkType } from '@api';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	const { sharedLink } = data;
+
+	let album: AlbumResponseDto | null = null;
+	let isOwned = data.user ? data.user.id === sharedLink.userId : false;
+	if (sharedLink.album) {
+		album = { ...sharedLink.album, assets: sharedLink.assets };
+	}
+</script>
+
+{#if sharedLink.type == SharedLinkType.Album && album}
+	<div class="immich-scrollbar">
+		<AlbumViewer {album} {sharedLink} />
+	</div>
+{/if}
+
+{#if sharedLink.type == SharedLinkType.Individual}
+	<div class="immich-scrollbar">
+		<IndividualSharedViewer {sharedLink} {isOwned} />
+	</div>
+{/if}

web/src/routes/(user)/share/[key]/photos/[assetId]/+page.server.ts

@@ -0,0 +1,18 @@
+export const prerender = false;
+
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load = (async ({ params, locals: { api } }) => {
+	try {
+		const { key, assetId } = params;
+		const { data: asset } = await api.assetApi.getAssetById(assetId, key);
+
+		if (!asset) {
+			return error(404, 'Asset not found');
+		}
+		return { asset, key };
+	} catch (e) {
+		console.log('Error', e);
+	}
+}) satisfies PageServerLoad;

web/src/routes/(user)/share/[key]/photos/[assetId]/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
+	import type { PageData } from './$types';
+	import { goto } from '$app/navigation';
+	export let data: PageData;
+</script>
+
+{#if data.asset && data.key}
+	<AssetViewer
+		asset={data.asset}
+		publicSharedKey={data.key}
+		on:navigate-previous={() => null}
+		on:navigate-next={() => null}
+		showNavigation={false}
+		on:close={() => goto(`/share/${data.key}`)}
+	/>
+{/if}