refactor: Rewrote selectable component tree composition algorithm and fixed focus issues

src/lib/components/ManageMedia/DownloadsList.svelte

@@ -19,7 +19,7 @@
 		{/each}
 	{:then downloads}
 		{#each downloads as download, index}
-			<Button on:click={() => cancelDownload(download.id || -1)} let:hasFocus>
+			<Button on:clickOrSelect={() => cancelDownload(download.id || -1)} let:hasFocus>
 				<div class="flex w-full">
 					<h1 class="flex-1 line-clamp-1">
 						{download.title}

src/lib/components/ManageMedia/LocalFiles/FileActionsModal.svelte

@@ -22,7 +22,7 @@
 		</div>
 		<Container>
 			<div class="-my-1">
-				<Button focusOnMount on:click={() => file.id && handleDeleteFile(file.id)}>
+				<Button focusOnMount on:clickOrSelect={() => file.id && handleDeleteFile(file.id)}>
 					Delete File
 				</Button>
 			</div>

src/lib/components/ManageMedia/ManageMediaMenuLayout.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import Container from '../../../Container.svelte';
+
+	export let focusOnMount = false;
 </script>
 
-<Container class="flex flex-col my-16" canFocusEmpty={false}>
+<Container class="flex flex-col my-16" canFocusEmpty={false} {focusOnMount}>
 	<h1 class="tracking-wide text-2xl font-semibold mb-4">
 		<slot name="header">Header is missing</slot>
 	</h1>

src/lib/components/ManageMedia/RadarrMediaMangerModal.svelte

@@ -15,6 +15,8 @@
 	import { derived, type Readable } from 'svelte/store';
 	import ReleaseActionsModal from './Releases/ReleaseActionsModal.svelte';
 	import type { SonarrRelease } from '../../apis/sonarr/sonarr-api';
+	import Button from '../Button.svelte';
+	import type { FileResource } from '../../apis/combined-types';
 
 	export let modalId: symbol;
 	export let hidden: boolean;
@@ -63,7 +65,7 @@
 		);
 	}
 
-	function handleSelectFile(file: MovieFileResource) {
+	function handleSelectFile(file: FileResource) {
 		modalStack.create(
 			FileActionsModal,
 			{
@@ -76,7 +78,7 @@
 </script>
 
 <FullScreenModal {modalId} {hidden}>
-	<ManageMediaMenuLayout>
+	<ManageMediaMenuLayout focusOnMount>
 		<h1 slot="header">Download</h1>
 		<ReleaseList
 			getReleases={() => radarrApi.getReleases(id)}

src/lib/components/ManageMedia/Releases/ReleaseActionsModal.svelte

@@ -34,7 +34,7 @@
 			<div class="-my-1">
 				<Button
 					focusOnMount
-					on:click={() => handleGrabRelease(release.guid || '', release.indexerId || -1)}
+					on:clickOrSelect={() => handleGrabRelease(release.guid || '', release.indexerId || -1)}
 					inactive={!!($data || $isFetching || status)}
 				>
 					{#if $data || status === 'downloading'}

src/lib/components/ManageMedia/Releases/ReleaseList.svelte

@@ -108,11 +108,13 @@
 		{/each}
 		{#if !showAll && $releases?.length}
 			<div class="my-1 w-full">
-				<Button on:click={() => (showAll = true)}>Show all {$releases?.length} releases</Button>
+				<Button on:clickOrSelect={() => (showAll = true)}
+					>Show all {$releases?.length} releases</Button
+				>
 			</div>
 		{:else if showAll}
 			<div class="my-1 w-full">
-				<Button on:click={() => (showAll = false)}>Show less</Button>
+				<Button on:clickOrSelect={() => (showAll = false)}>Show less</Button>
 			</div>
 		{/if}
 	{/if}

src/lib/components/ManageMedia/SonarrMediaMangerModal.svelte

@@ -89,7 +89,7 @@
 </script>
 
 <FullScreenModal {modalId} {hidden}>
-	<ManageMediaMenuLayout>
+	<ManageMediaMenuLayout focusOnMount>
 		<h1 slot="header">Download</h1>
 		<SeasonList {id} selectSeason={handleSelectSeason} />
 	</ManageMediaMenuLayout>

src/lib/components/SeriesPage/SeriesPage.svelte

@@ -59,7 +59,7 @@
 		class="h-screen flex flex-col py-12 px-20 relative"
 		on:enter={scrollIntoView({ top: 0 })}
 		handleNavigateOut={{
-			down: () => episodesSelectable?.focusChildren(1)
+			down: () => episodesSelectable?.focusChild(1)
 		}}
 	>
 		<HeroCarousel