From 807bdfeda976a0155a2fb644ad06f4c86b7eb097 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Mon, 27 Feb 2023 04:23:43 +0100
Subject: [PATCH] fix(web): layout nesting (#1881)

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../drag-and-drop-upload-overlay.svelte       | 44 +++++++---
 .../side-bar/side-bar.svelte                  | 12 ++-
 web/src/routes/(user)/+layout.svelte          | 21 +++++
 .../{ => (user)}/albums/+page.server.ts       |  0
 .../routes/{ => (user)}/albums/+page.svelte   |  0
 .../albums/[albumId]/+page.server.ts          |  0
 .../albums/[albumId]/+page.svelte             |  0
 .../[albumId]/photos/[assetId]/+page.svelte   |  0
 .../[albumId]/photos/[assetId]/+page.ts       |  0
 .../albums/__tests__/albums.bloc.spec.ts      |  0
 .../routes/{ => (user)}/albums/albums.bloc.ts |  0
 .../{ => (user)}/favorites/+page.server.ts    |  0
 .../{ => (user)}/favorites/+page.svelte       |  2 +-
 .../favorites/[assetId]/+page.server.ts       |  0
 .../favorites/[assetId]/+page.svelte          |  0
 .../{ => (user)}/photos/+page.server.ts       |  0
 .../routes/{ => (user)}/photos/+page.svelte   |  0
 .../photos/[assetId]/+page.server.ts          |  0
 .../photos/[assetId]/+page.svelte             |  0
 .../{ => (user)}/share/[key]/+error.svelte    |  0
 .../{ => (user)}/share/[key]/+page.server.ts  |  0
 .../{ => (user)}/share/[key]/+page.svelte     |  0
 .../[key]/photos/[assetId]/+page.server.ts    |  0
 .../share/[key]/photos/[assetId]/+page.svelte |  0
 .../{ => (user)}/sharing/+page.server.ts      |  0
 .../routes/{ => (user)}/sharing/+page.svelte  |  0
 .../sharing/sharedlinks/+page.server.ts       |  0
 .../sharing/sharedlinks/+page.svelte          |  0
 .../user-settings/+page.server.ts             |  0
 .../{ => (user)}/user-settings/+page.svelte   |  0
 web/src/routes/+layout.svelte                 | 81 +++----------------
 31 files changed, 72 insertions(+), 88 deletions(-)
 create mode 100644 web/src/routes/(user)/+layout.svelte
 rename web/src/routes/{ => (user)}/albums/+page.server.ts (100%)
 rename web/src/routes/{ => (user)}/albums/+page.svelte (100%)
 rename web/src/routes/{ => (user)}/albums/[albumId]/+page.server.ts (100%)
 rename web/src/routes/{ => (user)}/albums/[albumId]/+page.svelte (100%)
 rename web/src/routes/{ => (user)}/albums/[albumId]/photos/[assetId]/+page.svelte (100%)
 rename web/src/routes/{ => (user)}/albums/[albumId]/photos/[assetId]/+page.ts (100%)
 rename web/src/routes/{ => (user)}/albums/__tests__/albums.bloc.spec.ts (100%)
 rename web/src/routes/{ => (user)}/albums/albums.bloc.ts (100%)
 rename web/src/routes/{ => (user)}/favorites/+page.server.ts (100%)
 rename web/src/routes/{ => (user)}/favorites/+page.svelte (99%)
 rename web/src/routes/{ => (user)}/favorites/[assetId]/+page.server.ts (100%)
 rename web/src/routes/{ => (user)}/favorites/[assetId]/+page.svelte (100%)
 rename web/src/routes/{ => (user)}/photos/+page.server.ts (100%)
 rename web/src/routes/{ => (user)}/photos/+page.svelte (100%)
 rename web/src/routes/{ => (user)}/photos/[assetId]/+page.server.ts (100%)
 rename web/src/routes/{ => (user)}/photos/[assetId]/+page.svelte (100%)
 rename web/src/routes/{ => (user)}/share/[key]/+error.svelte (100%)
 rename web/src/routes/{ => (user)}/share/[key]/+page.server.ts (100%)
 rename web/src/routes/{ => (user)}/share/[key]/+page.svelte (100%)
 rename web/src/routes/{ => (user)}/share/[key]/photos/[assetId]/+page.server.ts (100%)
 rename web/src/routes/{ => (user)}/share/[key]/photos/[assetId]/+page.svelte (100%)
 rename web/src/routes/{ => (user)}/sharing/+page.server.ts (100%)
 rename web/src/routes/{ => (user)}/sharing/+page.svelte (100%)
 rename web/src/routes/{ => (user)}/sharing/sharedlinks/+page.server.ts (100%)
 rename web/src/routes/{ => (user)}/sharing/sharedlinks/+page.svelte (100%)
 rename web/src/routes/{ => (user)}/user-settings/+page.server.ts (100%)
 rename web/src/routes/{ => (user)}/user-settings/+page.svelte (100%)

diff --git a/web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte b/web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
index 63461c41be..016b38a741 100644
--- a/web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
+++ b/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}
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
index 83272d6d44..0d0303c488 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/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 />
diff --git a/web/src/routes/(user)/+layout.svelte b/web/src/routes/(user)/+layout.svelte
new file mode 100644
index 0000000000..7594849b73
--- /dev/null
+++ b/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} />
diff --git a/web/src/routes/albums/+page.server.ts b/web/src/routes/(user)/albums/+page.server.ts
similarity index 100%
rename from web/src/routes/albums/+page.server.ts
rename to web/src/routes/(user)/albums/+page.server.ts
diff --git a/web/src/routes/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
similarity index 100%
rename from web/src/routes/albums/+page.svelte
rename to web/src/routes/(user)/albums/+page.svelte
diff --git a/web/src/routes/albums/[albumId]/+page.server.ts b/web/src/routes/(user)/albums/[albumId]/+page.server.ts
similarity index 100%
rename from web/src/routes/albums/[albumId]/+page.server.ts
rename to web/src/routes/(user)/albums/[albumId]/+page.server.ts
diff --git a/web/src/routes/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte
similarity index 100%
rename from web/src/routes/albums/[albumId]/+page.svelte
rename to web/src/routes/(user)/albums/[albumId]/+page.svelte
diff --git a/web/src/routes/albums/[albumId]/photos/[assetId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/photos/[assetId]/+page.svelte
similarity index 100%
rename from web/src/routes/albums/[albumId]/photos/[assetId]/+page.svelte
rename to web/src/routes/(user)/albums/[albumId]/photos/[assetId]/+page.svelte
diff --git a/web/src/routes/albums/[albumId]/photos/[assetId]/+page.ts b/web/src/routes/(user)/albums/[albumId]/photos/[assetId]/+page.ts
similarity index 100%
rename from web/src/routes/albums/[albumId]/photos/[assetId]/+page.ts
rename to web/src/routes/(user)/albums/[albumId]/photos/[assetId]/+page.ts
diff --git a/web/src/routes/albums/__tests__/albums.bloc.spec.ts b/web/src/routes/(user)/albums/__tests__/albums.bloc.spec.ts
similarity index 100%
rename from web/src/routes/albums/__tests__/albums.bloc.spec.ts
rename to web/src/routes/(user)/albums/__tests__/albums.bloc.spec.ts
diff --git a/web/src/routes/albums/albums.bloc.ts b/web/src/routes/(user)/albums/albums.bloc.ts
similarity index 100%
rename from web/src/routes/albums/albums.bloc.ts
rename to web/src/routes/(user)/albums/albums.bloc.ts
diff --git a/web/src/routes/favorites/+page.server.ts b/web/src/routes/(user)/favorites/+page.server.ts
similarity index 100%
rename from web/src/routes/favorites/+page.server.ts
rename to web/src/routes/(user)/favorites/+page.server.ts
diff --git a/web/src/routes/favorites/+page.svelte b/web/src/routes/(user)/favorites/+page.svelte
similarity index 99%
rename from web/src/routes/favorites/+page.svelte
rename to web/src/routes/(user)/favorites/+page.svelte
index 00a175a556..9f97cfab5c 100644
--- a/web/src/routes/favorites/+page.svelte
+++ b/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';
 
diff --git a/web/src/routes/favorites/[assetId]/+page.server.ts b/web/src/routes/(user)/favorites/[assetId]/+page.server.ts
similarity index 100%
rename from web/src/routes/favorites/[assetId]/+page.server.ts
rename to web/src/routes/(user)/favorites/[assetId]/+page.server.ts
diff --git a/web/src/routes/favorites/[assetId]/+page.svelte b/web/src/routes/(user)/favorites/[assetId]/+page.svelte
similarity index 100%
rename from web/src/routes/favorites/[assetId]/+page.svelte
rename to web/src/routes/(user)/favorites/[assetId]/+page.svelte
diff --git a/web/src/routes/photos/+page.server.ts b/web/src/routes/(user)/photos/+page.server.ts
similarity index 100%
rename from web/src/routes/photos/+page.server.ts
rename to web/src/routes/(user)/photos/+page.server.ts
diff --git a/web/src/routes/photos/+page.svelte b/web/src/routes/(user)/photos/+page.svelte
similarity index 100%
rename from web/src/routes/photos/+page.svelte
rename to web/src/routes/(user)/photos/+page.svelte
diff --git a/web/src/routes/photos/[assetId]/+page.server.ts b/web/src/routes/(user)/photos/[assetId]/+page.server.ts
similarity index 100%
rename from web/src/routes/photos/[assetId]/+page.server.ts
rename to web/src/routes/(user)/photos/[assetId]/+page.server.ts
diff --git a/web/src/routes/photos/[assetId]/+page.svelte b/web/src/routes/(user)/photos/[assetId]/+page.svelte
similarity index 100%
rename from web/src/routes/photos/[assetId]/+page.svelte
rename to web/src/routes/(user)/photos/[assetId]/+page.svelte
diff --git a/web/src/routes/share/[key]/+error.svelte b/web/src/routes/(user)/share/[key]/+error.svelte
similarity index 100%
rename from web/src/routes/share/[key]/+error.svelte
rename to web/src/routes/(user)/share/[key]/+error.svelte
diff --git a/web/src/routes/share/[key]/+page.server.ts b/web/src/routes/(user)/share/[key]/+page.server.ts
similarity index 100%
rename from web/src/routes/share/[key]/+page.server.ts
rename to web/src/routes/(user)/share/[key]/+page.server.ts
diff --git a/web/src/routes/share/[key]/+page.svelte b/web/src/routes/(user)/share/[key]/+page.svelte
similarity index 100%
rename from web/src/routes/share/[key]/+page.svelte
rename to web/src/routes/(user)/share/[key]/+page.svelte
diff --git a/web/src/routes/share/[key]/photos/[assetId]/+page.server.ts b/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.server.ts
similarity index 100%
rename from web/src/routes/share/[key]/photos/[assetId]/+page.server.ts
rename to web/src/routes/(user)/share/[key]/photos/[assetId]/+page.server.ts
diff --git a/web/src/routes/share/[key]/photos/[assetId]/+page.svelte b/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.svelte
similarity index 100%
rename from web/src/routes/share/[key]/photos/[assetId]/+page.svelte
rename to web/src/routes/(user)/share/[key]/photos/[assetId]/+page.svelte
diff --git a/web/src/routes/sharing/+page.server.ts b/web/src/routes/(user)/sharing/+page.server.ts
similarity index 100%
rename from web/src/routes/sharing/+page.server.ts
rename to web/src/routes/(user)/sharing/+page.server.ts
diff --git a/web/src/routes/sharing/+page.svelte b/web/src/routes/(user)/sharing/+page.svelte
similarity index 100%
rename from web/src/routes/sharing/+page.svelte
rename to web/src/routes/(user)/sharing/+page.svelte
diff --git a/web/src/routes/sharing/sharedlinks/+page.server.ts b/web/src/routes/(user)/sharing/sharedlinks/+page.server.ts
similarity index 100%
rename from web/src/routes/sharing/sharedlinks/+page.server.ts
rename to web/src/routes/(user)/sharing/sharedlinks/+page.server.ts
diff --git a/web/src/routes/sharing/sharedlinks/+page.svelte b/web/src/routes/(user)/sharing/sharedlinks/+page.svelte
similarity index 100%
rename from web/src/routes/sharing/sharedlinks/+page.svelte
rename to web/src/routes/(user)/sharing/sharedlinks/+page.svelte
diff --git a/web/src/routes/user-settings/+page.server.ts b/web/src/routes/(user)/user-settings/+page.server.ts
similarity index 100%
rename from web/src/routes/user-settings/+page.server.ts
rename to web/src/routes/(user)/user-settings/+page.server.ts
diff --git a/web/src/routes/user-settings/+page.svelte b/web/src/routes/(user)/user-settings/+page.svelte
similarity index 100%
rename from web/src/routes/user-settings/+page.svelte
rename to web/src/routes/(user)/user-settings/+page.svelte
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index dd98e12d71..748d5078cf 100644
--- a/web/src/routes/+layout.svelte
+++ b/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 />