feat: collections page compact header and reusable component, use in persons page

Author: aleksilassila

src/lib/components/CardGrid.svelte

@@ -71,7 +71,7 @@
 	style={`grid-template-columns: repeat(${cols}, minmax(0, 1fr));`}
 	on:mount
 >
-	<slot />
+	<slot columns={cols} />
 </Container>
 
 <!--<svelte:window on:resize={calculateRows} />-->

src/lib/components/StackRouter/StackRouterPage.svelte

@@ -13,11 +13,6 @@
 	const topSelectable = useRegistrar();
 
 	function handleGoBack() {
-		// if ('willLeaveContainer' in detail) {
-		// 	if (detail.direction !== 'left' || !detail.willLeaveContainer) return;
-		// 	detail.preventNavigation();
-		// }
-
 		const selectable = get(topSelectable);
 		if (selectable && get(selectable.focusIndex) === 0) {
 			history.back();
@@ -32,8 +27,6 @@
 			selectable?.focusChild(0, { cycleTo: true }) || selectable?.focus({ cycleTo: true });
 		} else handleGoBack();
 	}
-
-	// onDestroy(() => background.destroy())
 </script>
 
 <Container

src/lib/pages/CollectionPages/CollectionPage.svelte

@@ -22,18 +22,10 @@
 
 <Container
 	on:back={handleGoBack}
-	on:mount={registrar}
-	class="*:px-32 flex flex-col h-screen relative"
+	class="py-16 *:px-32 flex flex-col h-screen overflow-y-auto overflow-x-hidden"
 >
-	<div
-		class={classNames(
-			'pt-16 pb-4 absolute top-0 inset-x-0 z-10 bg-gradient-to-b from-100% from-secondary-900 to-transparent transition-transform',
-			{
-				'-translate-y-12 ': !$topVisible
-			}
-		)}
-	>
-		<div class={classNames('transition-transform', {})}>
+	<slot name="header">
+		<div class="pt-8">
 			<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', {
@@ -44,14 +36,48 @@
 				{title}
 			</h1>
 		</div>
-	</div>
-	<div class="py-48 flex-1 overflow-y-auto overflow-x-hidden scrollbar-hide" use:registerScroll>
+	</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
+				}
+			)}
+		>
+			<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', {
+					'text-3xl sm:text-4xl 2xl:text-5xl': title.length || 0 < 15,
+					'text-2xl sm:text-3xl 2xl:text-4xl': title.length || 0 >= 15
+				})}
+			>
+				{title}
+			</h1>
+		</div>
+	</slot>
+
+	<div class="pt-16" use:registerScroll>
 		{#await items}
 			Loading...
 		{:then items}
-			<CardGrid>
-				{#each items as item}
-					<TmdbCard on:enter={scrollIntoView({ top: 192 })} {item} />
+			<CardGrid let:columns
+			on:mount={registrar}
+			
+			>
+				{#each items as item, index}
+					<TmdbCard
+						on:enter={(e) => {
+							if (index < columns) {
+								scrollIntoView({ top: 500 })(e);
+							} else {
+								scrollIntoView({ top: 192 })(e);
+							}
+						}}
+						{item}
+					/>
 				{/each}
 			</CardGrid>
 		{/await}

src/lib/pages/PersonPage.svelte

@@ -7,6 +7,7 @@
 	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();
@@ -64,15 +65,15 @@
 </script>
 
 {#await person then person}
-	<Container
-		focusOnMount
-		on:back={handleGoBack}
-		on:mount={registrar}
-		class="px-32 py-16 space-y-16"
+	<CollectionPage
+		items={titles}
+		subtitle="Person"
+		title={person.name ?? 'Unknown'}
+		{registrar}
+		{handleGoBack}
 	>
-		<div class="flex space-x-8">
-			<Container
-				on:enter={scrollIntoView({ vertical: 128 })}
+		<div class="flex space-x-8" slot="header">
+			<div
 				class="bg-center bg-cover rounded-xl w-44 h-64 cursor-pointer flex-shrink-0"
 				style={`background-image: url("${TMDB_POSTER_SMALL + person.profile_path}")`}
 			/>
@@ -85,13 +86,5 @@
 				/>
 			</div>
 		</div>
-
-		<CardGrid>
-			{#await titles then titles}
-				{#each titles as title}
-					<TmdbCard item={title} on:enter={scrollIntoView({ vertical: 128 })} />
-				{/each}
-			{/await}
-		</CardGrid>
-	</Container>
+	</CollectionPage>
 {/await}