feat: Esc for navigating back out of detached pages

src/lib/components/DetachedPage/DetachedPage.svelte

@@ -3,7 +3,8 @@
 	import { type KeyEvent, type NavigateEvent, useRegistrar } from '../../selectable.js';
 	import { get } from 'svelte/store';
 
-	const selectable = useRegistrar();
+	// Top element, that when focused and back is pressed, will exit the modal
+	const topSelectable = useRegistrar();
 
 	function handleGoBack({ detail }: CustomEvent<KeyEvent> | CustomEvent<NavigateEvent>) {
 		if ('willLeaveContainer' in detail) {
@@ -11,7 +12,12 @@
 			detail.preventNavigation();
 		}
 
-		history.back();
+		const selectable = get(topSelectable);
+		if (selectable && get(selectable.focusIndex) === 0) {
+			history.back();
+		} else {
+			selectable?.focusChild(0) || selectable?.focus();
+		}
 	}
 
 	function handleGoToTop({ detail }: CustomEvent<KeyEvent> | CustomEvent<NavigateEvent>) {
@@ -19,11 +25,12 @@
 			// Navigate event
 			if (detail.direction === 'left' && detail.willLeaveContainer) {
 				detail.preventNavigation();
-				get(selectable)?.focus();
+				get(topSelectable)?.focus();
 			}
 		} else {
 			// Back event
-			get(selectable)?.focus();
+			const selectable = get(topSelectable);
+			selectable?.focusChild(0) || selectable?.focus();
 		}
 	}
 </script>
@@ -35,6 +42,6 @@
 >
 	<Container />
 	<Container on:navigate={handleGoToTop} on:back={handleGoToTop} focusOnMount>
-		<slot {handleGoBack} registrar={selectable.registrar} />
+		<slot {handleGoBack} registrar={topSelectable.registrar} />
 	</Container>
 </Container>

src/lib/components/SeriesPage/SeriesPage.svelte

@@ -170,7 +170,7 @@
 			})}
 		>
 			<EpisodeGrid
-				on:enter={scrollIntoView({ top: 32 })}
+				on:enter={scrollIntoView({ vertical: 32 })}
 				id={Number(id)}
 				tmdbSeries={tmdbSeriesData}
 				{jellyfinEpisodes}

src/lib/selectable.ts

@@ -748,7 +748,7 @@ export function handleKeyboardNavigation(event: KeyboardEvent) {
 		if (Selectable.giveFocus('right')) event.preventDefault();
 	} else if (event.key === 'Enter') {
 		currentlyFocusedObject.select();
-	} else if (event.key === 'Back' || event.key === 'XF86Back') {
+	} else if (event.key === 'Back' || event.key === 'XF86Back' || event.key === 'Escape') {
 		currentlyFocusedObject.back();
 	} else if (event.key === 'MediaPlayPause') {
 		currentlyFocusedObject.playPause();

src/lib/utils.ts

@@ -75,6 +75,10 @@ export function log<T>(arg: T): T {
 	return arg;
 }
 
+export function timeout(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 export function formatDateToYearMonthDay(date: Date) {
 	const year = date.getFullYear();
 	const month = String(date.getMonth() + 1).padStart(2, '0');