feat: Simple people pages implementation

src/lib/components/DetachedPage/DetachedPage.svelte

@@ -40,7 +40,7 @@
 </script>
 
 <Container
-	class={classNames('fixed inset-0 z-20 bg-secondary-800 overflow-y-auto scrollbar-hide', {
+	class={classNames('fixed inset-0 z-20 bg-secondary-900 overflow-y-auto scrollbar-hide', {
 		hidden: !topmost
 	})}
 	trapFocus

src/lib/components/PersonCard/PersonCard.svelte

@@ -3,6 +3,7 @@
 	import Container from '../../../Container.svelte';
 	import AnimateScale from '../AnimateScale.svelte';
 	import type { Readable } from 'svelte/store';
+	import { navigate } from '../StackRouter/StackRouter';
 
 	export let tmdbId: number;
 	// export let type: TitleType = 'person';
@@ -17,23 +18,19 @@
 <AnimateScale hasFocus={$hasFocus}>
 	<Container
 		class={classNames(
-			'flex flex-col justify-start rounded-xl overflow-hidden relative shadow-lg shrink-0 selectable hover:text-inherit hover:bg-stone-800 focus-visible:bg-stone-800 bg-secondary-800 group text-left',
+			'flex flex-col justify-start rounded-xl overflow-hidden relative shadow-lg shrink-0 selectable hover:text-inherit hover:bg-stone-800 focus-visible:bg-stone-800 bg-secondary-800 group text-left cursor-pointer',
 			{
 				'w-56 h-80': size === 'md',
 				'h-52': size === 'lg',
 				'w-full': size === 'dynamic'
 			}
 		)}
-		on:clickOrSelect
-		on:click={() => {
-			// if (openInModal) {
-			// 	openTitleModal({ type, id: tmdbId, provider: 'tmdb' });
-			// } else {
-			// 	window.location.href = `/${type}/${tmdbId}`;
-			// }
+		on:clickOrSelect={() => {
+			if (tmdbId) navigate(`/person/${tmdbId}`);
 		}}
 		on:enter
 		bind:hasFocus
+		focusOnClick
 	>
 		<!--		<div-->
 		<!--			class="mx-auto rounded-full overflow-hidden flex-shrink-0 aspect-square w-full bg-zinc-200 bg-opacity-20"-->

src/lib/components/PersonCard/TmdbPersonCard.svelte

@@ -14,7 +14,7 @@
 
 <PersonCard
 	tmdbId={tmdbCredit.id || -1}
-	name={tmdbCredit.original_name || 'Unknown'}
+	name={tmdbCredit.name || 'Unknown'}
 	{subtitle}
 	backdropUrl={TMDB_PROFILE_LARGE + tmdbCredit.profile_path}
 	on:clickOrSelect

src/lib/components/StackRouter/StackRouter.ts

@@ -10,6 +10,7 @@ import LibraryPage from '../../pages/LibraryPage.svelte';
 import SearchPage from '../../pages/SearchPage.svelte';
 import PageNotFound from '../../pages/PageNotFound.svelte';
 import ManagePage from '../../pages/ManagePage.svelte';
+import PersonPage from '../../pages/PersonPage.svelte';
 
 interface Page {
 	id: symbol;
@@ -21,7 +22,11 @@ interface Route {
 	path: string;
 	component: ComponentType;
 	default?: boolean;
+	// When root is navigated to, stcak is cleared
 	root?: boolean;
+	// Parent route, that is always rendered under this route,
+	// possibly sharing props that are a subset of the child's props.
+	// Child's props are also passed to these.
 	parent?: Route;
 }
 
@@ -205,6 +210,11 @@ const movieRoute: Route = {
 	parent: moviesHomeRoute
 };
 
+const personRoute: Route = {
+	path: '/person/:id',
+	component: PersonPage
+};
+
 const libraryRoute: Route = {
 	path: '/library',
 	component: LibraryPage,
@@ -236,6 +246,7 @@ export const defaultStackRouter = useStackRouter({
 		episodeRoute,
 		moviesHomeRoute,
 		movieRoute,
+		personRoute,
 		libraryRoute,
 		searchRoute,
 		manageRoute