From 9b08885afa3a6767094be4604c0a58af07dee169 Mon Sep 17 00:00:00 2001
From: Aleksi Lassila <aleksi.emil.lassila@gmail.com>
Date: Thu, 30 May 2024 17:28:28 +0300
Subject: [PATCH] perf: Optimize stack router performance

---
 src/App.svelte                                | 79 +++++++++----------
 .../DetachedPage/DetachedPage.svelte          | 20 ++---
 src/lib/components/Modal/ModalStack.svelte    |  1 +
 src/lib/components/StackRouter/StackRouter.ts |  3 +-
 src/lib/pages/LibraryPage.svelte              |  5 +-
 src/lib/pages/ManagePage.svelte               |  5 +-
 src/lib/pages/MoviePage.svelte                |  1 -
 src/lib/pages/MoviesHomePage.svelte           |  5 +-
 src/lib/pages/SearchPage.svelte               |  5 +-
 src/lib/pages/SeriesHomePage.svelte           |  5 +-
 10 files changed, 63 insertions(+), 66 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 68a27e6..e629d5a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -30,48 +30,47 @@
 </script>
 
 <I18n />
-<Container class="w-full h-full overflow-auto text-white scrollbar-hide">
-	{#if $appState.user === undefined}
-		<div class="h-full w-full flex flex-col items-center justify-center">
-			<div class="flex items-center justify-center hover:text-inherit selectable rounded-sm mb-2">
-				<div class="rounded-full bg-amber-300 h-4 w-4 mr-2" />
-				<h1 class="font-display uppercase font-semibold tracking-wider text-xl">Reiverr</h1>
-			</div>
-			<div>Loading...</div>
+<!--<Container class="w-full h-full overflow-auto text-white scrollbar-hide">-->
+{#if $appState.user === undefined}
+	<div class="h-full w-full flex flex-col items-center justify-center">
+		<div class="flex items-center justify-center hover:text-inherit selectable rounded-sm mb-2">
+			<div class="rounded-full bg-amber-300 h-4 w-4 mr-2" />
+			<h1 class="font-display uppercase font-semibold tracking-wider text-xl">Reiverr</h1>
 		</div>
-	{:else if $appState.user === null}
-		<LoginPage />
-	{:else if $appState.user.onboardingDone === false}
-		<OnboardingPage />
-	{:else}
-		<!--		<Router primary={false}>-->
-		<Container class="flex flex-col relative" direction="horizontal" trapFocus>
-			<Sidebar />
-			<!--				<Route path="series/*">-->
-			<!--					<SeriesHomePage />-->
-			<!--				</Route>-->
-			<!--				<Route path="movies/*">-->
-			<!--					<MoviesHomePage />-->
-			<!--				</Route>-->
-			<!--				<Route path="library/*">-->
-			<!--					<LibraryPage />-->
-			<!--				</Route>-->
-			<!--				<Route path="manage">-->
-			<!--					<ManagePage />-->
-			<!--				</Route>-->
-			<!--				<Route path="search">-->
-			<!--					<SearchPage />-->
-			<!--				</Route>-->
-			<!--				<Route path="*">-->
-			<!--					<PageNotFound />-->
-			<!--				</Route>-->
-			<StackRouter stack={defaultStackRouter} />
-		</Container>
-		<!--		</Router>-->
+		<div>Loading...</div>
+	</div>
+{:else if $appState.user === null}
+	<LoginPage />
+{:else if $appState.user.onboardingDone === false}
+	<OnboardingPage />
+{:else}
+	<!--		<Router primary={false}>-->
+	<!--		<Container class="flex flex-col relative" direction="horizontal" trapFocus>-->
+	<!--				<Route path="series/*">-->
+	<!--					<SeriesHomePage />-->
+	<!--				</Route>-->
+	<!--				<Route path="movies/*">-->
+	<!--					<MoviesHomePage />-->
+	<!--				</Route>-->
+	<!--				<Route path="library/*">-->
+	<!--					<LibraryPage />-->
+	<!--				</Route>-->
+	<!--				<Route path="manage">-->
+	<!--					<ManagePage />-->
+	<!--				</Route>-->
+	<!--				<Route path="search">-->
+	<!--					<SearchPage />-->
+	<!--				</Route>-->
+	<!--				<Route path="*">-->
+	<!--					<PageNotFound />-->
+	<!--				</Route>-->
+	<StackRouter stack={defaultStackRouter} />
+	<!--		</Container>-->
+	<!--		</Router>-->
 
-		<ModalStack />
-	{/if}
-</Container>
+	<ModalStack />
+{/if}
+<!--</Container>-->
 
 <NavigationDebugger />
 
diff --git a/src/lib/components/DetachedPage/DetachedPage.svelte b/src/lib/components/DetachedPage/DetachedPage.svelte
index 4b25321..2bf25e2 100644
--- a/src/lib/components/DetachedPage/DetachedPage.svelte
+++ b/src/lib/components/DetachedPage/DetachedPage.svelte
@@ -10,7 +10,7 @@
 	// Top element, that when focused and back is pressed, will exit the modal
 	const topSelectable = useRegistrar();
 
-	function handleGoBack({ detail }: CustomEvent<KeyEvent> | CustomEvent<NavigateEvent>) {
+	function handleGoBack() {
 		// if ('willLeaveContainer' in detail) {
 		// 	if (detail.direction !== 'left' || !detail.willLeaveContainer) return;
 		// 	detail.preventNavigation();
@@ -24,18 +24,11 @@
 		}
 	}
 
-	function handleGoToTop({ detail }: CustomEvent<KeyEvent> | CustomEvent<NavigateEvent>) {
-		if ('willLeaveContainer' in detail) {
-			// Navigate event
-			// if (detail.direction === 'left' && detail.willLeaveContainer) {
-			// 	detail.preventNavigation();
-			// 	get(topSelectable)?.focus();
-			// }
-		} else {
-			// Back event
-			const selectable = get(topSelectable);
+	function handleGoToTop() {
+		const selectable = get(topSelectable);
+		if (topSelectable) {
 			selectable?.focusChild(0) || selectable?.focus();
-		}
+		} else handleGoBack();
 	}
 </script>
 
@@ -44,11 +37,12 @@
 		hidden: !topmost
 	})}
 	trapFocus
+	focusOnMount
 	direction="horizontal"
 	on:mount
 >
 	<Sidebar />
-	<Container on:back={handleGoToTop} focusOnMount>
+	<Container on:back={handleGoToTop} focusOnMount class={classNames($$restProps.class)}>
 		<slot {handleGoBack} registrar={topSelectable.registrar} />
 	</Container>
 </Container>
diff --git a/src/lib/components/Modal/ModalStack.svelte b/src/lib/components/Modal/ModalStack.svelte
index 0c38182..483743d 100644
--- a/src/lib/components/Modal/ModalStack.svelte
+++ b/src/lib/components/Modal/ModalStack.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { modalStack, modalStackTop } from './modal.store';
 	import { onDestroy } from 'svelte';
+	import classNames from 'classnames';
 
 	// function handleShortcuts(event: KeyboardEvent) {
 	// 	const top = $modalStackTop;
diff --git a/src/lib/components/StackRouter/StackRouter.ts b/src/lib/components/StackRouter/StackRouter.ts
index 1f7ae37..9abf04a 100644
--- a/src/lib/components/StackRouter/StackRouter.ts
+++ b/src/lib/components/StackRouter/StackRouter.ts
@@ -251,8 +251,7 @@ export const defaultStackRouter = useStackRouter({
 		searchRoute,
 		manageRoute
 	],
-	notFound: notFoundRoute,
-	maxDepth: 3
+	notFound: notFoundRoute
 });
 // export const defaultStackRouter = useStackRouter({
 // 	'/': {
diff --git a/src/lib/pages/LibraryPage.svelte b/src/lib/pages/LibraryPage.svelte
index 055defe..e15ee29 100644
--- a/src/lib/pages/LibraryPage.svelte
+++ b/src/lib/pages/LibraryPage.svelte
@@ -7,6 +7,7 @@
 	import CardGrid from '../components/CardGrid.svelte';
 	import JellyfinCard from '../components/Card/JellyfinCard.svelte';
 	import { scrollIntoView } from '../selectable';
+	import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
 
 	const libraryItemsP = jellyfinApi.getLibraryItems();
 
@@ -22,7 +23,7 @@
 	}));
 </script>
 
-<Container focusOnMount class="px-32 py-16">
+<DetachedPage class="px-32 py-16">
 	<div class="mb-6">
 		<div class="header2">Library</div>
 	</div>
@@ -40,4 +41,4 @@
 			{/each}
 		{/await}
 	</CardGrid>
-</Container>
+</DetachedPage>
diff --git a/src/lib/pages/ManagePage.svelte b/src/lib/pages/ManagePage.svelte
index 4e2e77b..747f9c3 100644
--- a/src/lib/pages/ManagePage.svelte
+++ b/src/lib/pages/ManagePage.svelte
@@ -19,6 +19,7 @@
 	import { ArrowRight, Trash } from 'radix-icons-svelte';
 	import TmdbIntegrationConnectDialog from '../components/Integrations/TmdbIntegrationConnectDialog.svelte';
 	import { createModal } from '../components/Modal/modal.store';
+	import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
 
 	enum Tabs {
 		Interface,
@@ -127,7 +128,7 @@
 	}}
 />
 
-<Container class="px-32 py-16" focusOnMount>
+<DetachedPage class="px-32 py-16">
 	<Container
 		direction="horizontal"
 		class="flex space-x-8 header2 pb-3 border-b-2 border-secondary-700 w-full mb-8"
@@ -313,4 +314,4 @@
 			</div>
 		</Tab>
 	</Container>
-</Container>
+</DetachedPage>
diff --git a/src/lib/pages/MoviePage.svelte b/src/lib/pages/MoviePage.svelte
index dbddc7a..fe0dd09 100644
--- a/src/lib/pages/MoviePage.svelte
+++ b/src/lib/pages/MoviePage.svelte
@@ -82,7 +82,6 @@
 						direction="horizontal"
 						class="flex mt-8"
 						focusOnMount
-						on:navigate={handleGoBack}
 						on:back={handleGoBack}
 						{registrar}
 					>
diff --git a/src/lib/pages/MoviesHomePage.svelte b/src/lib/pages/MoviesHomePage.svelte
index 190e0cb..0fd1686 100644
--- a/src/lib/pages/MoviesHomePage.svelte
+++ b/src/lib/pages/MoviesHomePage.svelte
@@ -10,6 +10,7 @@
 	import { formatDateToYearMonthDay } from '../utils';
 	import TmdbCard from '../components/Card/TmdbCard.svelte';
 	import { navigate } from '../components/StackRouter/StackRouter';
+	import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
 
 	const continueWatching = jellyfinApi.getContinueWatching('movie');
 	const recentlyAdded = jellyfinApi.getRecentlyAdded('movie');
@@ -59,7 +60,7 @@
 	}
 </script>
 
-<Container focusOnMount class="flex flex-col">
+<DetachedPage class="flex flex-col relative">
 	<div class="h-[calc(100vh-12rem)] flex px-32">
 		<HeroShowcase
 			items={recommendedMovies.then(({ top10 }) => getShowcasePropsFromTmdbMovie(top10))}
@@ -202,4 +203,4 @@
 		<!-- TRENDING PEOPLE -->
 		<!-- Watchlist -->
 	</div>
-</Container>
+</DetachedPage>
diff --git a/src/lib/pages/SearchPage.svelte b/src/lib/pages/SearchPage.svelte
index 46249ba..77729cb 100644
--- a/src/lib/pages/SearchPage.svelte
+++ b/src/lib/pages/SearchPage.svelte
@@ -9,6 +9,7 @@
 	import { scrollIntoView } from '../selectable';
 	import AnimateScale from '../components/AnimateScale.svelte';
 	import type { Readable } from 'svelte/store';
+	import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
 
 	let searchQuery = '';
 	let typingTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
@@ -36,7 +37,7 @@
 	});
 </script>
 
-<Container class="px-32 py-16 h-screen flex flex-col" focusOnMount>
+<DetachedPage class="px-32 py-16 h-screen flex flex-col">
 	<Container
 		direction="horizontal"
 		class={classNames('header2 pb-3 border-b-2 w-full mb-4', {
@@ -80,4 +81,4 @@
 			{/await}
 		{/if}
 	</div>
-</Container>
+</DetachedPage>
diff --git a/src/lib/pages/SeriesHomePage.svelte b/src/lib/pages/SeriesHomePage.svelte
index 02ccebf..dc1ff47 100644
--- a/src/lib/pages/SeriesHomePage.svelte
+++ b/src/lib/pages/SeriesHomePage.svelte
@@ -12,6 +12,7 @@
 	import TmdbCard from '../components/Card/TmdbCard.svelte';
 	import { navigate } from '../components/StackRouter/StackRouter';
 	import { TMDB_SERIES_GENRES } from '../apis/tmdb/tmdb-api.js';
+	import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
 
 	const continueWatching = jellyfinApi.getContinueWatchingSeries();
 	const recentlyAdded = jellyfinApi.getRecentlyAdded('series');
@@ -53,7 +54,7 @@
 	}
 </script>
 
-<Container focusOnMount class="flex flex-col">
+<DetachedPage class="flex flex-col relative">
 	<div class="h-[calc(100vh-12rem)] flex px-32">
 		<HeroShowcase
 			items={recommendations.then(({ top10 }) => getShowcasePropsFromTmdbSeries(top10))}
@@ -196,4 +197,4 @@
 		<!-- TRENDING PEOPLE -->
 		<!-- Watchlist -->
 	</div>
-</Container>
+</DetachedPage>