Added "Dynamic modals"; fixed title modals not allowing child modals

src/lib/components/TitlePageLayout/TitlePageLayout.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
 	import { TMDB_IMAGES_ORIGINAL, TMDB_POSTER_SMALL } from '$lib/constants';
 	import classNames from 'classnames';
-	import { ChevronLeft, DotFilled, ExternalLink } from 'radix-icons-svelte';
+	import { ChevronLeft, Cross2, DotFilled, ExternalLink } from 'radix-icons-svelte';
 	import { fade } from 'svelte/transition';
 	import Carousel from '../Carousel/Carousel.svelte';
 	import CarouselPlaceholderItems from '../Carousel/CarouselPlaceholderItems.svelte';
 	import IconButton from '../IconButton.svelte';
+	import type { TitleType } from '$lib/types';
 
 	export let isModal = false;
 	export let handleCloseModal: () => void = () => {};
 
 	export let tmdbId: number;
-	export let type: 'movie' | 'series';
+	export let type: TitleType;
 
 	export let backdropUriCandidates: string[];
 	export let posterPath: string;
@@ -79,11 +80,16 @@
 					<ExternalLink size={20} />
 				</IconButton>
 			</a>
-			<div class="sm:hidden absolute top-8 left-4 sm:left-8 z-10">
-				<button class="flex items-center" on:click={handleCloseModal}>
+			<div class="absolute top-8 left-4 sm:left-8 z-10">
+				<button class="flex items-center sm:hidden" on:click={handleCloseModal}>
 					<ChevronLeft size={20} />
 					Back
 				</button>
+				<div class="hidden sm:block">
+					<IconButton on:click={handleCloseModal}>
+						<Cross2 size={20} />
+					</IconButton>
+				</div>
 			</div>
 		{/if}
 		<div class="absolute inset-0 bg-gradient-to-t from-stone-950 to-30%" />

src/lib/components/TitlePageLayout/TitlePageModal.svelte

@@ -1,44 +1,38 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import MoviePage from '../../../routes/movie/[id]/MoviePage.svelte';
 	import SeriesPage from '../../../routes/series/[id]/SeriesPage.svelte';
-	import { createModalProps } from '../Modal/Modal';
-	import Modal from '../Modal/Modal.svelte';
-	import { titlePageModal } from './TitlePageModal';
-	import { onMount } from 'svelte';
+	import { modalStack } from '../Modal/Modal';
+	import type { TitleType } from '$lib/types';
 
-	const modalProps = createModalProps(() => {
-		titlePageModal.close();
-	});
+	export let tmdbId: number;
+	export let type: TitleType;
+	export let modalId: Symbol;
 
 	function handleCloseModal() {
-		modalProps.close();
+		modalStack.close(modalId);
 	}
 
 	onMount(() => {
-		console.log('modal mounted');
+		console.log('TitlePageModal mounted');
 
-		return () => modalProps.close();
+		return () => console.log('TitlePageModal unmounted');
 	});
 </script>
 
-{#if $titlePageModal.tmdbId}
-	{@const tmdbId = $titlePageModal.tmdbId}
-	<Modal {...modalProps}>
-		<div
-			class="max-w-screen-2xl overflow-x-hidden overflow-y-scroll h-screen sm:mx-4 lg:mx-12 xl:mx-16 scrollbar-hide"
-		>
-			<div
-				class="relative overflow-hidden"
-				in:fly|global={{ y: 20, duration: 200, delay: 200 }}
-				out:fly|global={{ y: 20, duration: 200 }}
-			>
-				{#if $titlePageModal.type === 'movie'}
-					<MoviePage {tmdbId} isModal={true} {handleCloseModal} />
-				{:else}
-					<SeriesPage {tmdbId} isModal={true} {handleCloseModal} />
-				{/if}
-			</div>
-		</div>
-	</Modal>
-{/if}
+<div
+	class="max-w-screen-2xl overflow-x-hidden overflow-y-scroll h-screen sm:mx-4 lg:mx-12 xl:mx-16 scrollbar-hide"
+>
+	<div
+		class="relative overflow-hidden"
+		in:fly|global={{ y: 20, duration: 200, delay: 200 }}
+		out:fly|global={{ y: 20, duration: 200 }}
+	>
+		{#if type === 'movie'}
+			<MoviePage {tmdbId} isModal={true} {handleCloseModal} />
+		{:else}
+			<SeriesPage {tmdbId} isModal={true} {handleCloseModal} />
+		{/if}
+	</div>
+</div>

src/lib/components/TitlePageLayout/TitlePageModal.ts

@@ -1,6 +1,7 @@
+import type { TitleType } from '$lib/types';
 import { writable } from 'svelte/store';
 
-type Type = 'movie' | 'series' | undefined;
+type Type = TitleType | undefined;
 
 function createTitlePageModalStore() {
 	const store = writable<{ tmdbId: number | undefined; type: Type }>({