refactor: stackRouterPage controls to use context everywhere

aleksilassila · aleksilassila · commit 08fd9060e174 · 2025-03-28T14:47:14.000+02:00
diff --git a/backend/src/auth/auth.controller.ts b/backend/src/auth/auth.controller.ts
@@ -38,7 +38,7 @@ export class AuthController {
 
     return {
       accessToken: token,
-      user: this.usersService.getUserDto(user),
+      user: await this.usersService.getUserDto(user),
     };
   }
 }
diff --git a/src/lib/components/Sidebar/Sidebar.svelte b/src/lib/components/Sidebar/Sidebar.svelte
@@ -29,8 +29,6 @@
 		Manage
 	}
 
-	const tab = useTabs(Tabs.Series);
-
 	const { visibleStyle } = getUiVisibilityContext();
 
 	let selectedIndex = 0;
diff --git a/src/lib/components/StackRouter/StackRouter.ts b/src/lib/components/StackRouter/StackRouter.ts
@@ -329,18 +329,15 @@ function useStackRouterControls() {
 	const topSelectable = useRegistrar();
 
 	function handleGoBack() {
-		const selectable = get(topSelectable);
-		if (selectable && get(selectable.focusIndex) === 0) {
-			history.back();
-		} else {
-			selectable?.focusChild(0, { cycleTo: true }) || selectable?.focus({ cycleTo: true });
-		}
+		history.back();
 	}
 
 	function handleGoToTop() {
 		const selectable = get(topSelectable);
-		if (topSelectable) {
-			selectable?.focusChild(0, { cycleTo: true }) || selectable?.focus({ cycleTo: true });
+		if (selectable && get(selectable.focusIndex) === 0 && get(selectable.hasFocusWithin)) {
+			history.back();
+		} else if (selectable) {
+			selectable.focusChild(0, { cycleTo: true }) || selectable.focus({ cycleTo: true });
 		} else handleGoBack();
 	}
 
diff --git a/src/lib/pages/CollectionPages/CollectionPage.svelte b/src/lib/pages/CollectionPages/CollectionPage.svelte
@@ -2,8 +2,9 @@
 	import TmdbCard from '$lib/components/Card/TmdbCard.svelte';
 	import CardGrid from '$lib/components/CardGrid.svelte';
 	import Container from '$lib/components/Container.svelte';
+	import FloatingHeader from '$lib/components/FloatingHeader.svelte';
 	import { createBackgroundPage } from '$lib/components/GlobalBackground/BackgroundStack';
-	import type { StackRouterPageProps } from '$lib/components/StackRouter/StackRouterPage.type';
+	import { getStackRouterControls } from '$lib/components/StackRouter/StackRouter';
 	import { scrollIntoView } from '$lib/selectable';
 	import { setScrollContext } from '$lib/stores/scroll.store';
 	import classNames from 'classnames';
@@ -12,18 +13,13 @@
 	export let title: string;
 	export let subtitle = '';
 	export let items: Promise<ComponentProps<TmdbCard>['item'][]>;
-	export let registrar: StackRouterPageProps['registrar'];
-	export let handleGoBack: StackRouterPageProps['handleGoBack'];
+	const { registrar } = getStackRouterControls();
 
 	const background = createBackgroundPage();
 	const { registrar: registerScroll, topVisible } = setScrollContext();
-	console.log($topVisible);
 </script>
 
-<Container
-	on:back={handleGoBack}
-	class="py-16 *:px-32 flex flex-col h-screen overflow-y-auto overflow-x-hidden"
->
+<Container class="py-16 *:px-32 flex flex-col h-screen overflow-y-auto overflow-x-hidden">
 	<slot name="header">
 		<div class="pt-8">
 			<h2 class="uppercase text-zinc-300 font-semibold tracking-wider">{subtitle}</h2>
@@ -39,14 +35,7 @@
 	</slot>
 
 	<slot name="header-compact">
-		<div
-			class={classNames(
-				'py-6 absolute top-0 inset-x-0 z-10 bg-gradient-to-b from-100% from-secondary-900 to-transparent transition-all',
-				{
-					'opacity-0 pointer-events-none -translate-y-4': $topVisible
-				}
-			)}
-		>
+		<FloatingHeader visible={$topVisible}>
 			<h2 class="uppercase text-zinc-300 font-semibold tracking-wider">{subtitle}</h2>
 			<h1
 				class={classNames('text-left font-semibold tracking-wider text-stone-200 mt-1', {
@@ -56,7 +45,7 @@
 			>
 				{title}
 			</h1>
-		</div>
+		</FloatingHeader>
 	</slot>
 
 	<div class="pt-16" use:registerScroll>
diff --git a/src/lib/pages/CollectionPages/CompanyPage.svelte b/src/lib/pages/CollectionPages/CompanyPage.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
 	import { companies } from '$lib/components/Collection/collections';
-	import type { StackRouterPageProps } from '$lib/components/StackRouter/StackRouterPage.type';
 	import { tmdbApi } from '$lib/stores/user.store';
 	import { capitalize } from '$lib/utils';
 	import CollectionPage from './CollectionPage.svelte';
 
 	export let company: string;
-	export let registrar: StackRouterPageProps['registrar'];
-	export let handleGoBack: StackRouterPageProps['handleGoBack'];
 
 	const tmdbCompanyId = companies[company]?.id;
 	const companyName = companies[company]?.name ?? capitalize(company);
@@ -21,10 +18,4 @@
 		: Promise.resolve([]);
 </script>
 
-<CollectionPage
-	{registrar}
-	{handleGoBack}
-	{items}
-	title={companyName}
-	subtitle="Production Company"
-/>
+<CollectionPage {items} title={companyName} subtitle="Production Company" />
diff --git a/src/lib/pages/CollectionPages/ListPage.svelte b/src/lib/pages/CollectionPages/ListPage.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
 	import { collections } from '$lib/components/Collection/collections';
-	import type { StackRouterPageProps } from '$lib/components/StackRouter/StackRouterPage.type';
 	import { tmdbApi } from '$lib/stores/user.store';
 	import { capitalize } from '$lib/utils';
 	import CollectionPage from './CollectionPage.svelte';
 
 	export let collection: string;
-	export let registrar: StackRouterPageProps['registrar'];
-	export let handleGoBack: StackRouterPageProps['handleGoBack'];
-
+	
 	const listId = collection.match(/^\d+$/) ? parseInt(collection) : collections[collection]?.id;
 	const collectionName = collections[collection]?.name ?? capitalize(collection);
 
@@ -17,4 +14,4 @@
 		: Promise.resolve([]);
 </script>
 
-<CollectionPage {registrar} {handleGoBack} {items} title={collectionName} subtitle="Collection" />
+<CollectionPage {items} title={collectionName} subtitle="Collection" />
diff --git a/src/lib/pages/CollectionPages/NetworkPage.svelte b/src/lib/pages/CollectionPages/NetworkPage.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
 	import { networks } from '$lib/components/Collection/collections';
-	import type { StackRouterPageProps } from '$lib/components/StackRouter/StackRouterPage.type';
 	import { tmdbApi } from '$lib/stores/user.store';
 	import { capitalize } from '$lib/utils';
 	import CollectionPage from './CollectionPage.svelte';
 
 	export let network: string;
-	export let registrar: StackRouterPageProps['registrar'];
-	export let handleGoBack: StackRouterPageProps['handleGoBack'];
 
 	const networkId = networks[network]?.id;
 	const networkName = networks[network]?.name ?? capitalize(network);
@@ -19,4 +16,4 @@
 		.then((r) => r.data.results ?? []);
 </script>
 
-<CollectionPage {registrar} {handleGoBack} {items} title={networkName} subtitle="Network" />
+<CollectionPage {items} title={networkName} subtitle="Network" />
diff --git a/src/lib/pages/PersonPage.svelte b/src/lib/pages/PersonPage.svelte
@@ -1,20 +1,14 @@
 <script lang="ts">
-	import Container from '$components/Container.svelte';
 	import { createBackgroundPage } from '$lib/components/GlobalBackground/BackgroundStack';
-	import type { StackRouterPageProps } from '$lib/components/StackRouter/StackRouterPage.type';
-	import { scrollIntoView } from '$lib/selectable.js';
 	import { tmdbApi } from '../apis/tmdb/tmdb-api';
-	import TmdbCard from '../components/Card/TmdbCard.svelte';
-	import CardGrid from '../components/CardGrid.svelte';
 	import { TMDB_POSTER_SMALL } from '../constants.js';
 	import CollectionPage from './CollectionPages/CollectionPage.svelte';
 	import HeroTitleInfo from './TitlePages/HeroTitleInfo.svelte';
 
 	createBackgroundPage();
 
 	export let id: string;
-	export let registrar: StackRouterPageProps['registrar'];
-	export let handleGoBack: StackRouterPageProps['handleGoBack'];
+	
 
 	$: person = tmdbApi.getPerson(Number(id));
 	$: titles = person.then((person) => {
@@ -69,8 +63,6 @@
 		items={titles}
 		subtitle="Person"
 		title={person.name ?? 'Unknown'}
-		{registrar}
-		{handleGoBack}
 	>
 		<div class="flex space-x-8" slot="header">
 			<div
diff --git a/src/lib/pages/TitlePages/EpisodePage.svelte b/src/lib/pages/TitlePages/EpisodePage.svelte
@@ -11,13 +11,13 @@
 	import { PLATFORM_WEB, TMDB_IMAGES_ORIGINAL } from '../../constants';
 	import { formatThousands } from '../../utils';
 	import TitleProperties from './HeroTitleInfo.svelte';
+	import { getStackRouterControls } from '$lib/components/StackRouter/StackRouter';
 
 	export let id: string; // Series tmdbId
 	export let season: string;
 	export let episode: string;
 
-	export let handleGoBack: StackRouterPageProps['handleGoBack'];
-	export let registrar: StackRouterPageProps['registrar'];
+	const { registrar } = getStackRouterControls();
 
 	const background = createBackgroundPage({ videoMediaId: id });
 	const { promise: tmdbEpisode, unsubscribe: unsubscribeTmdbEpisode } =
@@ -90,7 +90,6 @@
 				direction="horizontal"
 				class="flex mt-8 space-x-4"
 				focusOnMount
-				on:back={handleGoBack}
 				on:mount={registrar}
 			>
 				<Button
diff --git a/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte b/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
@@ -7,7 +7,7 @@
 	import { createBackgroundPage } from '$lib/components/GlobalBackground/BackgroundStack';
 	import HeroCarousel from '$lib/components/HeroShowcase/HeroCarousel.svelte';
 	import TmdbPersonCard from '$lib/components/PersonCard/TmdbPersonCard.svelte';
-	import type { StackRouterPageProps } from '$lib/components/StackRouter/StackRouterPage.type';
+	import { getStackRouterControls } from '$lib/components/StackRouter/StackRouter';
 	import { PLATFORM_WEB, TMDB_IMAGES_ORIGINAL } from '$lib/constants';
 	import { scrollIntoView } from '$lib/selectable';
 	import { tmdbMovieDataStore } from '$lib/stores/data.store';
@@ -22,8 +22,7 @@
 	import HeroTitleInfo from '../HeroTitleInfo.svelte';
 
 	export let id: string;
-	export let handleGoBack: StackRouterPageProps['handleGoBack'];
-	export let registrar: StackRouterPageProps['registrar'];
+	const { registrar } = getStackRouterControls();
 
 	const tmdbId = Number(id);
 	const background = createBackgroundPage({ backgroundMediaId: id, videoMediaId: id });
@@ -123,7 +122,6 @@
 				direction="horizontal"
 				class="flex mt-8 space-x-4"
 				focusOnMount
-				on:back={handleGoBack}
 				on:mount={registrar}
 			>
 				<Button
diff --git a/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte b/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
@@ -20,10 +20,10 @@
 	import type { TitleInfoProperty } from '../HeroTitleInfo';
 	import TitleProperties from '../HeroTitleInfo.svelte';
 	import EpisodeGrid from './EpisodeGrid.svelte';
+	import { getStackRouterControls } from '$lib/components/StackRouter/StackRouter';
 
 	export let id: string;
-	export let registrar: StackRouterPageProps['registrar'];
-	export let handleGoBack: StackRouterPageProps['handleGoBack'];
+	const { registrar } = getStackRouterControls();
 
 	const background = createBackgroundPage({ backgroundMediaId: id, videoMediaId: id });
 	const {
@@ -134,7 +134,6 @@
 				direction="horizontal"
 				class="flex mt-8 space-x-4"
 				focusOnMount
-				on:back={handleGoBack}
 				on:mount={registrar}
 			>
 				<Button

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export class AuthController {`
`38`	`38`
`39`	`39`	`return {`
`40`	`40`	`accessToken: token,`
`41`		`- user: this.usersService.getUserDto(user),`
	`41`	`+ user: await this.usersService.getUserDto(user),`
`42`	`42`	`};`
`43`	`43`	`}`
`44`	`44`	`}`
Original file line number	Diff line number	Diff line change
`@@ -29,8 +29,6 @@`
`29`	`29`	`Manage`
`30`	`30`	`}`
`31`	`31`
`32`		`- const tab = useTabs(Tabs.Series);`
`33`		`-`
`34`	`32`	`const { visibleStyle } = getUiVisibilityContext();`
`35`	`33`
`36`	`34`	`let selectedIndex = 0;`