fix(web): nested layout navigation issue (#1936)

* fix(web): nested layout navigation issue

* move guarding to html template

* fix test

web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import ImmichLogo from './immich-logo.svelte';
-
 	export let dropHandler: (event: DragEvent) => void;
 
 	let dragStartTarget: EventTarget | null = null;
+
+	const handleDragEnter = (e: DragEvent) => {
+		dragStartTarget = e.target;
+	};
 </script>
 
 <svelte:body
-	on:dragenter|stopPropagation|preventDefault={(e) => {
-		dragStartTarget = e.target;
-	}}
+	on:dragenter|stopPropagation|preventDefault={handleDragEnter}
 	on:dragleave|stopPropagation|preventDefault={(e) => {
 		if (dragStartTarget === e.target) {
 			dragStartTarget = null;

web/src/routes/(user)/+layout.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores';
-	import { fileUploadHandler } from '$lib/utils/file-uploader';
-	import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
-
-	const dropHandler = async ({ dataTransfer }: DragEvent) => {
-		const files = dataTransfer?.files;
-		if (!files) {
-			return;
-		}
-
-		const filesArray: File[] = Array.from<File>(files);
-		const albumId =
-			($page.route.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
-
-		await fileUploadHandler(filesArray, albumId);
-	};
-</script>
-
-<slot />
-
-<UploadCover {dropHandler} />

web/src/routes/+layout.svelte

@@ -10,8 +10,11 @@
 	import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
 	import faviconUrl from '$lib/assets/favicon.png';
 	import type { LayoutData } from './$types';
+	import { fileUploadHandler } from '$lib/utils/file-uploader';
+	import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
 
 	let showNavigationLoadingBar = false;
+	export let data: LayoutData;
 
 	beforeNavigate(() => {
 		showNavigationLoadingBar = true;
@@ -21,7 +24,18 @@
 		showNavigationLoadingBar = false;
 	});
 
-	export let data: LayoutData;
+	const dropHandler = async ({ dataTransfer }: DragEvent) => {
+		const files = dataTransfer?.files;
+		if (!files) {
+			return;
+		}
+
+		const filesArray: File[] = Array.from<File>(files);
+		const albumId =
+			($page.route.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
+
+		await fileUploadHandler(filesArray, albumId);
+	};
 </script>
 
 <svelte:head>
@@ -58,3 +72,7 @@
 {#if data.user?.isAdmin}
 	<VersionAnnouncementBox serverVersion={data.serverVersion} />
 {/if}
+
+{#if $page.route.id?.includes('(user)')}
+	<UploadCover {dropHandler} />
+{/if}