fix(web): layout nesting (#1881)

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

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

@@ -3,18 +3,36 @@
 	import ImmichLogo from './immich-logo.svelte';
 
 	export let dropHandler: (event: DragEvent) => void;
-	export let dragOverHandler: (event: DragEvent) => void;
-	export let dragLeaveHandler: () => void;
+
+	let dragStartTarget: EventTarget | null = null;
 </script>
 
-<div
-	in:fade={{ duration: 250 }}
-	out:fade={{ duration: 250 }}
-	on:drop={dropHandler}
-	on:dragover={dragOverHandler}
-	on:dragleave={dragLeaveHandler}
-	class="fixed inset-0 w-full h-full z-[1000] flex flex-col items-center justify-center bg-gray-100/90 dark:bg-immich-dark-bg/90 text-immich-dark-gray dark:text-immich-gray"
->
-	<ImmichLogo height="200" width="200" class="animate-bounce pb-16" />
-	<div class="text-2xl">Drop files anywhere to upload</div>
-</div>
+<svelte:body
+	on:dragenter|stopPropagation|preventDefault={(e) => {
+		dragStartTarget = e.target;
+	}}
+	on:dragleave|stopPropagation|preventDefault={(e) => {
+		if (dragStartTarget === e.target) {
+			dragStartTarget = null;
+		}
+	}}
+	on:drop|stopPropagation|preventDefault={(e) => {
+		dragStartTarget = null;
+		dropHandler(e);
+	}}
+/>
+
+{#if dragStartTarget}
+	<div
+		class="fixed inset-0 w-full h-full z-[1000] flex flex-col items-center justify-center bg-gray-100/90 dark:bg-immich-dark-bg/90 text-immich-dark-gray dark:text-immich-gray"
+		transition:fade={{ duration: 250 }}
+		on:dragover={(e) => {
+			// Prevent browser from opening the dropped file.
+			e.stopPropagation();
+			e.preventDefault();
+		}}
+	>
+		<ImmichLogo class="animate-bounce w-48 m-16" />
+		<div class="text-2xl">Drop files anywhere to upload</div>
+	</div>
+{/if}

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -48,7 +48,7 @@
 		<SideBarButton
 			title="Photos"
 			logo={ImageOutline}
-			isSelected={$page.route.id === AppRoute.PHOTOS}
+			isSelected={$page.route.id === '/(user)/photos'}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAssetCount()}
@@ -66,7 +66,7 @@
 		<SideBarButton
 			title="Sharing"
 			logo={AccountMultipleOutline}
-			isSelected={$page.route.id === AppRoute.SHARING}
+			isSelected={$page.route.id === '/(user)/sharing'}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAlbumCount()}
@@ -87,7 +87,7 @@
 		<SideBarButton
 			title="Favorites"
 			logo={StarOutline}
-			isSelected={$page.route.id == AppRoute.FAVORITES}
+			isSelected={$page.route.id == '/(user)/favorites'}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getFavoriteCount()}
@@ -101,7 +101,11 @@
 		</SideBarButton>
 	</a>
 	<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} draggable="false">
-		<SideBarButton title="Albums" logo={ImageAlbum} isSelected={$page.route.id === AppRoute.ALBUMS}>
+		<SideBarButton
+			title="Albums"
+			logo={ImageAlbum}
+			isSelected={$page.route.id === '/(user)/albums'}
+		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAlbumCount()}
 					<LoadingSpinner />

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

@@ -0,0 +1,21 @@
+<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 === '/albums/[albumId]' || undefined) && $page.params.albumId;
+
+		await fileUploadHandler(filesArray, albumId);
+	};
+</script>
+
+<slot />
+
+<UploadCover {dropHandler} />

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

@@ -11,7 +11,7 @@
 	import Close from 'svelte-material-icons/Close.svelte';
 	import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
 	import StarMinusOutline from 'svelte-material-icons/StarMinusOutline.svelte';
-	import Error from '../+error.svelte';
+	import Error from '../../+error.svelte';
 	import type { PageData } from './$types';
 	import empty1Url from '$lib/assets/empty-1.svg';
 

web/src/routes/+layout.svelte

@@ -1,33 +1,15 @@
 <script lang="ts">
 	import '../app.css';
 
-	import { fade } from 'svelte/transition';
 	import { page } from '$app/stores';
-	import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
-	import AnnouncementBox from '$lib/components/shared-components/announcement-box.svelte';
-	import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
-	import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
-	import { onMount } from 'svelte';
-	import { checkAppVersion } from '$lib/utils/check-app-version';
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
+	import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
+	import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
 	import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
-	import { fileUploadHandler } from '$lib/utils/file-uploader';
 	import faviconUrl from '$lib/assets/favicon.png';
 
-	let shouldShowAnnouncement: boolean;
-	let localVersion: string;
-	let remoteVersion: string;
 	let showNavigationLoadingBar = false;
-	let showUploadCover = false;
-
-	onMount(async () => {
-		const res = await checkAppVersion();
-
-		shouldShowAnnouncement = res.shouldShowAnnouncement;
-		localVersion = res.localVersion ?? 'unknown';
-		remoteVersion = res.remoteVersion ?? 'unknown';
-	});
 
 	beforeNavigate(() => {
 		showNavigationLoadingBar = true;
@@ -36,35 +18,13 @@
 	afterNavigate(() => {
 		showNavigationLoadingBar = false;
 	});
-
-	const dropHandler = async (event: DragEvent) => {
-		event.preventDefault();
-		event.stopPropagation();
-
-		showUploadCover = false;
-
-		const files = event.dataTransfer?.files;
-		if (!files) {
-			return;
-		}
-
-		const filesArray: File[] = Array.from<File>(files);
-		const albumId = ($page.route.id === '/albums/[albumId]' || undefined) && $page.params.albumId;
-
-		await fileUploadHandler(filesArray, albumId);
-	};
-
-	// Required to prevent default browser behavior
-	const dragOverHandler = (event: DragEvent) => {
-		event.preventDefault();
-		event.stopPropagation();
-	};
 </script>
 
 <svelte:head>
 	<title>{$page.data.meta?.title || 'Web'} - Immich</title>
+	<link rel="icon" href={faviconUrl} />
+
 	{#if $page.data.meta}
-		<link rel="icon" href={faviconUrl} />
 		<meta name="description" content={$page.data.meta.description} />
 
 		<!-- Facebook Meta Tags -->
@@ -81,31 +41,12 @@
 	{/if}
 </svelte:head>
 
-<main on:dragenter={() => (showUploadCover = true)}>
-	<div in:fade={{ duration: 100 }}>
-		{#if showNavigationLoadingBar}
-			<NavigationLoadingBar />
-		{/if}
+{#if showNavigationLoadingBar}
+	<NavigationLoadingBar />
+{/if}
 
-		<slot />
+<slot />
 
-		{#if showUploadCover}
-			<UploadCover
-				{dropHandler}
-				{dragOverHandler}
-				dragLeaveHandler={() => (showUploadCover = false)}
-			/>
-		{/if}
-
-		<DownloadPanel />
-		<UploadPanel />
-		<NotificationList />
-		{#if shouldShowAnnouncement}
-			<AnnouncementBox
-				{localVersion}
-				{remoteVersion}
-				on:close={() => (shouldShowAnnouncement = false)}
-			/>
-		{/if}
-	</div>
-</main>
+<DownloadPanel />
+<UploadPanel />
+<NotificationList />