refactor: Media Manager Modals

src/lib/components/MediaManager/DownloadList.svelte

@@ -4,45 +4,48 @@
 	import { formatSize } from '../../utils';
 	import { ChevronRight } from 'radix-icons-svelte';
 	import type { Download } from '../../apis/combined-types';
+	import Container from '../../../Container.svelte';
 
 	export let downloads: Promise<Download[]>;
 	export let cancelDownload: (downloadId: number) => Promise<any>;
 </script>
 
-<div class="-my-1">
+<Container class="flex flex-col -my-2">
 	{#await downloads}
 		{#each new Array(5) as _, index}
-			<div class="flex-1 my-1">
+			<div class="flex-1 my-2">
 				<ButtonGhost />
 			</div>
 		{/each}
 	{:then downloads}
 		{#each downloads as download, index}
-			<Button on:clickOrSelect={() => cancelDownload(download.id || -1)} let:hasFocus>
-				<div class="flex w-full">
-					<h1 class="flex-1 line-clamp-1">
-						{download.title}
-					</h1>
-					<div>
-						{#if !hasFocus}
-							{#if download.status === 'downloading'}
-								{formatSize((download.size || 0) - (download.sizeleft || 0))}/{formatSize(
-									download.size || 0
-								)}
+			<div class="my-2">
+				<Button on:clickOrSelect={() => cancelDownload(download.id || -1)} let:hasFocus>
+					<div class="flex w-full">
+						<h1 class="flex-1 line-clamp-1">
+							{download.title}
+						</h1>
+						<div>
+							{#if !hasFocus}
+								{#if download.status === 'downloading'}
+									{formatSize((download.size || 0) - (download.sizeleft || 0))}/{formatSize(
+										download.size || 0
+									)}
+								{:else}
+									{download.status}
+								{/if}
 							{:else}
-								{download.status}
+								<div class="flex items-center">
+									Cancel
+									<ChevronRight size={19} class="ml-1" />
+								</div>
 							{/if}
-						{:else}
-							<div class="flex items-center">
-								Cancel
-								<ChevronRight size={19} class="ml-1" />
-							</div>
-						{/if}
+						</div>
 					</div>
-				</div>
-			</Button>
+				</Button>
+			</div>
 		{:else}
 			<h1 class="text-sm text-zinc-400">No downloads found</h1>
 		{/each}
 	{/await}
-</div>
+</Container>

src/lib/components/MediaManager/FileList.svelte

@@ -5,21 +5,22 @@
 	import { formatSize } from '../../utils.js';
 	import type { FileResource } from '../../apis/combined-types';
 	import { scrollIntoView } from '../../selectable';
+	import Container from '../../../Container.svelte';
 
 	export let files: Promise<FileResource[]>;
 	export let handleSelectFile: (file: FileResource) => void;
 </script>
 
-<div class="-my-1">
+<Container class="flex flex-col -my-2">
 	{#await files}
 		{#each new Array(5) as _, index}
-			<div class="flex-1 my-1">
+			<div class="flex-1 my-2">
 				<ButtonGhost />
 			</div>
 		{/each}
 	{:then files}
 		{#each files as file, index}
-			<div class="flex-1 my-1">
+			<div class="flex-1 my-2">
 				<Button
 					on:clickOrSelect={() => handleSelectFile(file)}
 					let:hasFocus
@@ -46,4 +47,4 @@
 			<div class="text-sm text-zinc-400">No local files found</div>
 		{/each}
 	{/await}
-</div>
+</Container>

src/lib/components/MediaManager/MMModal.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import Container from '../../../Container.svelte';
+	import { modalStack } from '../Modal/modal.store';
+
+	export let modalId: symbol;
+	export let hidden: boolean = false;
+</script>
+
+<Container
+	on:navigate={({ detail }) => {
+		if (detail.direction === 'left' && detail.willLeaveContainer) {
+			modalStack.close(modalId);
+			detail.preventNavigation();
+		}
+	}}
+	focusOnMount
+	trapFocus
+	class={classNames('fixed inset-0 bg-stone-950/80 overflow-auto', {
+		'opacity-0': hidden
+	})}
+	canFocusEmpty
+>
+	<div class="mx-20 py-16">
+		<slot />
+	</div>
+</Container>

src/lib/components/MediaManager/ReleaseList.svelte

@@ -8,6 +8,7 @@
 	import { derived } from 'svelte/store';
 	import ButtonGhost from '../Ghosts/ButtonGhost.svelte';
 	import type { SonarrRelease } from '../../apis/sonarr/sonarr-api';
+	import Container from '../../../Container.svelte';
 
 	type Release = RadarrRelease | SonarrRelease;
 
@@ -33,16 +34,16 @@
 	});
 </script>
 
-<div class="flex flex-col -my-1">
+<Container class="flex flex-col -my-2">
 	{#if $isLoading}
 		{#each new Array(5) as _, index}
-			<div class="flex-1 my-1">
+			<div class="flex-1 my-2">
 				<ButtonGhost />
 			</div>
 		{/each}
 	{:else}
 		{#each (showAll ? $releases : $filteredReleases)?.filter((r) => r.guid && r.indexerId) || [] as release, index}
-			<div class="flex-1 my-1">
+			<div class="flex-1 my-2">
 				<Button
 					on:clickOrSelect={() => selectRelease(release)}
 					let:hasFocus
@@ -118,4 +119,4 @@
 			</div>
 		{/if}
 	{/if}
-</div>
+</Container>

src/lib/components/MediaManager/sonarr/SonarrMediaMangerModal.svelte

@@ -22,7 +22,7 @@
 		promise: downloads,
 		data: downloadsData,
 		refresh: refreshDownloads
-	} = useRequest(sonarrApi.getSonarrDownloadsById, id);
+	} = useRequest(sonarrApi.getDownloadsBySeriesId, id);
 
 	const handleGrabRelease = (guid: string, indexerId: number) =>
 		sonarrApi

src/lib/components/MediaManager/sonarr/modals/EpisodeListModal.svelte

@@ -36,7 +36,7 @@
 		modalStack.create(
 			ReleaseListModal,
 			{
-				getReleases: () => sonarrApi.fetchSonarrReleases(id),
+				getReleases: () => sonarrApi.getEpisodeReleases(id),
 				selectRelease: handleSelectRelease
 			},
 			groupId
@@ -47,7 +47,7 @@
 		modalStack.create(
 			ReleaseListModal,
 			{
-				getReleases: () => sonarrApi.fetchSonarrSeasonReleases(seriesId, seasonNumber),
+				getReleases: () => sonarrApi.getSeasonReleases(seriesId, seasonNumber),
 				selectRelease: handleSelectRelease
 			},
 			groupId