feat: Detached pages and fix navigation actions

src/lib/components/Card/Card.svelte

@@ -11,7 +11,6 @@
 
 	export let tmdbId: number | undefined = undefined;
 	export let tvdbId: number | undefined = undefined;
-	export let openInModal = true;
 	export let jellyfinId: string = '';
 	export let type: TitleType = 'movie';
 	export let backdropUrl: string;
@@ -32,14 +31,8 @@
 <Container
 	active={focusable}
 	on:click={() => {
-		if (openInModal) {
-			if (tmdbId) {
-				//openTitleModal({ type, id: tmdbId, provider: 'tmdb' });
-			} else if (tvdbId) {
-				//openTitleModal({ type, id: tvdbId, provider: 'tvdb' });
-			}
-		} else if (tmdbId || tvdbId) {
-			navigate(`/${type}/${tmdbId || tvdbId}`);
+		if (tmdbId || tvdbId) {
+			navigate(`${type}/${tmdbId || tvdbId}`);
 		}
 	}}
 	class={classNames(

src/lib/components/Card/TmdbCard.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import Card from './Card.svelte';
+	import type { TmdbMovie2 } from '../../apis/tmdb/tmdb-api';
+	import type { ComponentProps } from 'svelte';
+	import { TMDB_POSTER_SMALL } from '../../constants';
+
+	export let item: TmdbMovie2;
+	const props: ComponentProps<Card> = {
+		tmdbId: item.id,
+		title: item.title,
+		subtitle: item.release_date,
+		backdropUrl: TMDB_POSTER_SMALL + item.poster_path,
+		type: 'movie',
+		orientation: 'portrait',
+		rating: item.vote_average
+	};
+</script>
+
+<Card {...props} />

src/lib/components/DetatchedPage/DetatchedPage.svelte

@@ -0,0 +1,18 @@
+<script>
+	import Container from '../../../Container.svelte';
+</script>
+
+<Container
+	navigationActions={{
+		left: () => {
+			console.log('Not called?');
+			history.back();
+			return false;
+		}
+	}}
+	focusOnMount
+	trapFocus
+	class="fixed inset-0"
+>
+	<slot />
+</Container>

src/lib/components/HeroCarousel/HeroCarousel.svelte

@@ -21,7 +21,7 @@
 
 	function onPrevious() {
 		if (index === 0) {
-			Selectable.focusLeft();
+			return false;
 		} else {
 			index = (index - 1 + length) % length;
 		}
@@ -41,7 +41,7 @@
 		navigationActions={{
 			right: onNext,
 			left: onPrevious,
-			up: () => Selectable.focusLeft() || true
+			up: () => Selectable.giveFocus('left') || true
 		}}
 	/>
 	<div class="flex flex-1 z-10 p-4">

src/lib/components/HeroShowcase/HeroShowcase.svelte

@@ -25,7 +25,7 @@
 
 	function onPrevious() {
 		if (showcaseIndex === 0) {
-			Selectable.focusLeft();
+			Selectable.giveFocus('left');
 		} else {
 			showcaseIndex = (showcaseIndex - 1 + showcaseLength) % showcaseLength;
 		}

src/lib/components/Sidebar/Sidebar.svelte

@@ -40,7 +40,7 @@
 					<Laptop class="w-8 h-8" slot="icon" />
 				</div>
 			</Container>
-			<Container on:click={() => navigate('/movie/359410')}>
+			<Container on:click={() => navigate('movies')}>
 				<div class={itemContainer(1, $focusIndex)}>
 					<CardStack class="w-8 h-8" slot="icon" />
 				</div>