fix: TV Back button not working and choppy sidebar animations

src/lib/components/Modal/ModalStack.svelte

@@ -4,7 +4,7 @@
 
 	function handleShortcuts(event: KeyboardEvent) {
 		const top = $modalStackTop;
-		if (event.key === 'Escape' && top) {
+		if ((event.key === 'Escape' || event.key === 'Back' || event.key === 'XF86Back') && top) {
 			modalStack.close(top.id);
 		}
 	}

src/lib/components/NavigationDebugger.svelte

@@ -49,7 +49,7 @@
 
 {#if showOverlay}
 	<div
-		class={classNames('fixed bg-red-500 opacity-20 z-50')}
+		class={classNames('fixed bg-red-500 opacity-20 z-50 pointer-events-none')}
 		style={`left: ${x}px; top: ${y}px; width: ${width}px; height: ${height}px;`}
 	/>
 {/if}

src/lib/components/SeriesPage/SeriesPage.svelte

@@ -95,7 +95,7 @@
 							<DotFilled />
 							<p class="flex-shrink-0">
 								<a href={`https://www.themoviedb.org/movie/${series?.id}/episode/${episode.id}`}
-									>{episode.vote_average} TMDB</a
+									>{episode.vote_average?.toFixed(1)} TMDB</a
 								>
 							</p>
 						</div>

src/lib/components/Sidebar/Sidebar.svelte

@@ -69,15 +69,17 @@
 
 	<div
 		class={classNames(
-			'absolute inset-y-0 right-full pl-[64px] pr-10 z-10 transition-all bg-stone-900/90',
-			'flex flex-col flex-1 p-4 opacity-0',
+			'absolute inset-y-0 left-0 pl-[64px] pr-10 z-10 transition-all bg-stone-900/90',
+			'flex flex-col flex-1 p-4',
 			{
-				'translate-x-full opacity-100': $isNavBarOpen,
-				'group-hover:translate-x-full group-hover:opacity-100': true
+				// 'translate-x-full opacity-100': $isNavBarOpen,
+				'-translate-x-full opacity-0': !$isNavBarOpen,
+				'group-hover:translate-x-0 group-hover:opacity-100': true
 			}
 		)}
 	>
 		<div class="flex flex-col flex-1 justify-center">
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<div class={itemContainer(0, $focusIndex)} on:click={() => navigate('/')}>
 				<span
 					class={classNames('text-xl transition-opacity font-medium', {
@@ -87,6 +89,7 @@
 					Series</span
 				>
 			</div>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<div class={itemContainer(1, $focusIndex)} on:click={() => navigate('movies')}>
 				<span
 					class={classNames('text-xl transition-opacity font-medium', {
@@ -96,6 +99,7 @@
 					Movies</span
 				>
 			</div>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<div class={itemContainer(2, $focusIndex)} on:click={() => navigate('library')}>
 				<span
 					class={classNames('text-xl transition-opacity font-medium', {
@@ -105,6 +109,7 @@
 					Library</span
 				>
 			</div>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<div class={itemContainer(3, $focusIndex)} on:click={() => navigate('search')}>
 				<span
 					class={classNames('text-xl transition-opacity font-medium', {
@@ -116,6 +121,7 @@
 			</div>
 		</div>
 
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div class={itemContainer(4, $focusIndex)} on:click={() => navigate('manage')}>
 			<span
 				class={classNames('text-xl transition-opacity font-medium', {

src/lib/components/VideoPlayer/JellyfinVideoPlayerModal.svelte

@@ -8,6 +8,7 @@
 	import { getQualities } from '../../apis/jellyfin/qualities';
 	import { appState } from '../../stores/app-state.store';
 	import { onDestroy } from 'svelte';
+	import { modalStack } from '../Modal/modal.store';
 
 	export let id: string;
 	export let modalId: symbol;

src/lib/pages/ManagePage.svelte

@@ -2,9 +2,22 @@
 	import Container from '../../Container.svelte';
 	import { appState } from '../stores/app-state.store';
 	import Button from '../components/Button.svelte';
+
+	let lastKeyCode = 0;
+	let lastKey = '';
 </script>
 
 <Container class="pl-24 flex flex-col items-start" focusOnMount>
 	User agent: {window.navigator.userAgent}
+	<div>Last key code: {lastKeyCode}</div>
+	<div>Last key: {lastKey}</div>
 	<Button on:clickOrSelect={appState.logOut} class="hover:bg-red-500">Log Out</Button>
 </Container>
+
+<svelte:window
+	on:keydown={(e) => {
+		console.log('keypress', e);
+		lastKeyCode = e.keyCode;
+		lastKey = e.key;
+	}}
+/>

src/lib/pages/MoviePage.svelte

@@ -68,7 +68,7 @@
 							<DotFilled />
 							<p class="flex-shrink-0">
 								<a href={'https://www.themoviedb.org/movie/' + movie.id}
-									>{movie.vote_average} TMDB</a
+									>{movie.vote_average?.toFixed(1)} TMDB</a
 								>
 							</p>
 						</div>

src/lib/selectable.ts

@@ -714,7 +714,7 @@ export function handleKeyboardNavigation(event: KeyboardEvent) {
 		else {
 			currentlyFocusedObject.select();
 		}
-	} else if (event.key === 'Back') {
+	} else if (event.key === 'Back' || event.key === 'XF86Back') {
 	} else if (event.key === 'MediaPlayPause') {
 	}
 }