refactor: MediaManager structure

src/lib/components/MediaManager/DownloadList.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import ButtonGhost from '../Ghosts/ButtonGhost.svelte';
+	import Button from '../Button.svelte';
+	import { formatSize } from '../../utils';
+	import { ChevronRight } from 'radix-icons-svelte';
+	import type { Download } from '../../apis/combined-types';
+
+	export let downloads: Promise<Download[]>;
+	export let cancelDownload: (downloadId: number) => Promise<any>;
+</script>
+
+<div class="-my-1">
+	{#await downloads}
+		{#each new Array(5) as _, index}
+			<div class="flex-1 my-1">
+				<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
+								)}
+							{:else}
+								{download.status}
+							{/if}
+						{:else}
+							<div class="flex items-center">
+								Cancel
+								<ChevronRight size={19} class="ml-1" />
+							</div>
+						{/if}
+					</div>
+				</div>
+			</Button>
+		{:else}
+			<h1 class="text-sm text-zinc-400">No downloads found</h1>
+		{/each}
+	{/await}
+</div>

src/lib/components/MediaManager/FileList.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import ButtonGhost from '../Ghosts/ButtonGhost.svelte';
+	import Button from '../Button.svelte';
+	import { ChevronRight } from 'radix-icons-svelte';
+	import { formatSize } from '../../utils.js';
+	import type { FileResource } from '../../apis/combined-types';
+	import { scrollIntoView } from '../../selectable';
+
+	export let files: Promise<FileResource[]>;
+	export let handleSelectFile: (file: FileResource) => void;
+</script>
+
+<div class="-my-1">
+	{#await files}
+		{#each new Array(5) as _, index}
+			<div class="flex-1 my-1">
+				<ButtonGhost />
+			</div>
+		{/each}
+	{:then files}
+		{#each files as file, index}
+			<div class="flex-1 my-1">
+				<Button
+					on:clickOrSelect={() => handleSelectFile(file)}
+					let:hasFocus
+					on:enter={scrollIntoView({ vertical: 64 })}
+				>
+					<div class="flex items-center w-full">
+						<div class="flex-1">
+							{file.relativePath}
+						</div>
+						{#if hasFocus}
+							<div class="flex items-center">
+								Details
+								<ChevronRight size={19} class="ml-1" />
+							</div>
+						{:else}
+							<div class="flex items-center text-zinc-400">
+								{formatSize(file.size || 0)}
+							</div>
+						{/if}
+					</div>
+				</Button>
+			</div>
+		{:else}
+			<div class="text-sm text-zinc-400">No local files found</div>
+		{/each}
+	{/await}
+</div>

src/lib/components/MediaManager/MediaManagerMenuLayout.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import Container from '../../../Container.svelte';
+
+	export let focusOnMount = false;
+</script>
+
+<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>
+	<slot>Content is missing</slot>
+</Container>

src/lib/components/MediaManager/ReleaseList.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { type RadarrRelease } from '../../apis/radarr/radarr-api';
+	import classNames from 'classnames';
+	import { useRequest } from '../../stores/data.store';
+	import Button from '../Button.svelte';
+	import { ChevronRight, DotFilled } from 'radix-icons-svelte';
+	import { formatMinutesToTime, formatSize } from '../../utils';
+	import { derived } from 'svelte/store';
+	import ButtonGhost from '../Ghosts/ButtonGhost.svelte';
+	import type { SonarrRelease } from '../../apis/sonarr/sonarr-api';
+
+	type Release = RadarrRelease | SonarrRelease;
+
+	export let getReleases: () => Promise<Release[]>;
+	export let selectRelease: (release: Release) => void;
+
+	let showAll = false;
+
+	const { data: releases, isLoading } = useRequest(getReleases);
+
+	const filteredReleases = derived(releases, ($releases) => {
+		if (!$releases) return [];
+		let filtered = $releases.slice();
+
+		const releaseIsEnough = (r: Release) => r?.quality?.quality?.resolution || 0 > 720;
+		filtered.sort((a, b) => (b.seeders || 0) - (a.seeders || 0));
+		filtered.sort((a, b) => (releaseIsEnough(b) ? 1 : 0) - (releaseIsEnough(a) ? 1 : 0));
+		filtered = filtered.slice(0, 5);
+
+		filtered.sort((a, b) => (b.size || 0) - (a.size || 0));
+
+		return filtered;
+	});
+</script>
+
+<div class="flex flex-col -my-1">
+	{#if $isLoading}
+		{#each new Array(5) as _, index}
+			<div class="flex-1 my-1">
+				<ButtonGhost />
+			</div>
+		{/each}
+	{:else}
+		{#each (showAll ? $releases : $filteredReleases)?.filter((r) => r.guid && r.indexerId) || [] as release, index}
+			<div class="flex-1 my-1">
+				<Button
+					on:clickOrSelect={() => selectRelease(release)}
+					let:hasFocus
+					focusOnMount={index === 0}
+				>
+					<div class="w-full flex">
+						<div class="flex-1 flex flex-col mr-2">
+							<div class="flex-1 flex items-center">
+								<div class="tracking-wide mr-2">{release.indexer}</div>
+								<div
+									class={classNames('mr-2', {
+										'text-zinc-400': !hasFocus,
+										'text-zinc-700': hasFocus
+									})}
+								>
+									{release?.quality?.quality?.name}
+								</div>
+								<div
+									class={classNames('mr-2', {
+										'text-zinc-400': !hasFocus,
+										'text-zinc-700': hasFocus
+									})}
+								>
+									{release.seeders} seeders
+								</div>
+							</div>
+
+							{#if hasFocus}
+								<div class="flex text-xs text-zinc-700 items-center flex-wrap mt-2">
+									<div>
+										{release.title}
+									</div>
+									<DotFilled size={15} />
+									<div>{formatMinutesToTime(release.ageMinutes || 0)} old</div>
+									<DotFilled size={15} />
+									<div><b>{release.seeders} seeders</b> / {release.leechers} leechers</div>
+									<DotFilled size={15} />
+									{#if release.seeders}
+										<div>
+											{formatSize((release.size || 0) / release.seeders)} per seeder
+										</div>
+									{/if}
+								</div>
+							{/if}
+						</div>
+						{#if hasFocus}
+							<div class="flex items-center">
+								<ChevronRight size={32} />
+							</div>
+						{:else}
+							<div
+								class={classNames({
+									'text-zinc-400': !hasFocus,
+									'text-zinc-700': hasFocus
+								})}
+							>
+								{formatSize(release?.size || 0)}
+							</div>
+						{/if}
+					</div>
+				</Button>
+			</div>
+		{/each}
+		{#if !showAll && $releases?.length}
+			<div class="my-1 w-full">
+				<Button on:clickOrSelect={() => (showAll = true)}
+					>Show all {$releases?.length} releases</Button
+				>
+			</div>
+		{:else if showAll}
+			<div class="my-1 w-full">
+				<Button on:clickOrSelect={() => (showAll = false)}>Show less</Button>
+			</div>
+		{/if}
+	{/if}
+</div>

src/lib/components/MediaManager/modals/FileActionsModal.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import Container from '../../../../Container.svelte';
+	import { formatSize } from '../../../utils';
+	import Button from '../../Button.svelte';
+	import FullScreenModal from '../../Modal/FullScreenModal.svelte';
+	import FullScreenModalContainer from '../MediaManagerMenuLayout.svelte';
+	import type { FileResource } from '../../../apis/combined-types';
+
+	export let modalId: symbol;
+	export let file: FileResource;
+	export let handleDeleteFile: (fileId: number) => Promise<any>;
+</script>
+
+<FullScreenModal {modalId}>
+	<FullScreenModalContainer>
+		<div slot="header" class="flex">
+			<h1 class="line-clamp-1 flex-1 mr-4">
+				{file.relativePath}
+			</h1>
+			<h1 class="text-zinc-300">{formatSize(file.size || 0)}</h1>
+		</div>
+		<Container>
+			<div class="-my-1">
+				<Button focusOnMount on:clickOrSelect={() => file.id && handleDeleteFile(file.id)}>
+					Delete File
+				</Button>
+			</div>
+		</Container>
+	</FullScreenModalContainer>
+</FullScreenModal>

src/lib/components/MediaManager/modals/ReleaseActionsModal.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import Container from '../../../../Container.svelte';
+	import { formatSize } from '../../../utils';
+	import Button from '../../Button.svelte';
+	import FullScreenModal from '../../Modal/FullScreenModal.svelte';
+	import FullScreenModalContainer from '../MediaManagerMenuLayout.svelte';
+	import { useActionRequest } from '../../../stores/data.store';
+	import { Download, Plus } from 'radix-icons-svelte';
+	import type { Release } from '../../../apis/combined-types';
+
+	export let modalId: symbol;
+	export let release: Release;
+	export let status: undefined | 'downloading' | 'downloaded' = undefined;
+	export let grabRelease: (guid: string, indexerId: number) => Promise<boolean>;
+
+	const {
+		send: handleGrabRelease,
+		isFetching,
+		data
+	} = useActionRequest((guid: string, indexerId: number) => grabRelease(guid, indexerId));
+</script>
+
+<FullScreenModal {modalId}>
+	<FullScreenModalContainer>
+		<div slot="header" class="flex">
+			<h1 class="line-clamp-1 flex-1 mr-4">
+				{release.title}
+			</h1>
+			<h1 class="text-zinc-300">{formatSize(release.size || 0)}</h1>
+		</div>
+		<Container>
+			<div class="-my-1">
+				<Button
+					focusOnMount
+					on:clickOrSelect={() => handleGrabRelease(release.guid || '', release.indexerId || -1)}
+					inactive={!!($data || $isFetching || status)}
+				>
+					{#if $data || status === 'downloading'}
+						Downloading...
+					{:else if status === 'downloaded'}
+						Downloaded
+					{:else}
+						Download
+					{/if}
+
+					<svelte:component
+						this={$data || status ? Download : Plus}
+						size={19}
+						slot="icon"
+						class="mr-2"
+					/>
+				</Button>
+			</div>
+		</Container>
+	</FullScreenModalContainer>
+</FullScreenModal>

src/lib/components/MediaManager/modals/ReleaseListModal.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import FullScreenModal from '../../Modal/FullScreenModal.svelte';
+	import ReleaseList from '../ReleaseList.svelte';
+	import type { Release } from '../../../apis/combined-types';
+
+	export let modalId: symbol;
+	export let hidden: boolean;
+	export let getReleases: () => Promise<Release[]>;
+	export let selectRelease: (release: Release) => void;
+</script>
+
+<FullScreenModal {modalId} {hidden}>
+	<ReleaseList {getReleases} {selectRelease} />
+</FullScreenModal>

src/lib/components/MediaManager/radarr/RadarrMediaMangerModal.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import FullScreenModal from '../../Modal/FullScreenModal.svelte';
+	import ManageMediaMenuLayout from '../MediaManagerMenuLayout.svelte';
+	import {
+		type MovieFileResource,
+		radarrApi,
+		type RadarrRelease
+	} from '../../../apis/radarr/radarr-api';
+	import ReleaseList from '../ReleaseList.svelte';
+	import FilesList from '../FileList.svelte';
+	import { modalStack } from '../../Modal/modal.store';
+	import FileActionsModal from '../modals/FileActionsModal.svelte';
+	import DownloadsList from '../DownloadList.svelte';
+	import { useRequest } from '../../../stores/data.store';
+	import { derived, type Readable } from 'svelte/store';
+	import ReleaseActionsModal from '../modals/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;
+	export let id: number;
+
+	const { promise: files, refresh: refreshFiles } = useRequest(radarrApi.getFilesByMovieId, id);
+	const {
+		promise: downloads,
+		data: downloadsData,
+		refresh: refreshDownloads
+	} = useRequest(radarrApi.getDownloadsById, id);
+
+	const handleGrabRelease = (guid: string, indexerId: number) =>
+		radarrApi
+			.downloadMovie(guid, indexerId)
+			.then((ok) => {
+				if (!ok) {
+					// TODO: Show error
+				}
+				refreshFiles(id);
+
+				return ok;
+			})
+			.finally(() => {
+				radarrApi.getReleaseHistory(id).then(console.log);
+				setTimeout(() => refreshDownloads(id), 8000);
+			});
+	const handleCancelDownload = (id: number) =>
+		radarrApi.cancelDownloadRadarrMovie(id).then(() => refreshDownloads(id));
+
+	const grabbedReleases: Readable<Record<string, boolean>> = derived(downloadsData, ($downloads) =>
+		($downloads || []).reduce((acc: Record<string, boolean>, download) => {
+			acc[`${download.title}`] = true;
+			return acc;
+		}, {})
+	);
+
+	function handleSelectRelease(release: RadarrRelease | SonarrRelease) {
+		modalStack.create(
+			ReleaseActionsModal,
+			{
+				release,
+				grabRelease: handleGrabRelease
+			},
+			modalId
+		);
+	}
+
+	function handleSelectFile(file: FileResource) {
+		modalStack.create(
+			FileActionsModal,
+			{
+				file,
+				handleDeleteFile: (id: number) => radarrApi.deleteMovieFile(id).then(() => refreshFiles(id))
+			},
+			modalId
+		);
+	}
+</script>
+
+<FullScreenModal {modalId} {hidden}>
+	<ManageMediaMenuLayout focusOnMount>
+		<h1 slot="header">Download</h1>
+		<ReleaseList
+			getReleases={() => radarrApi.getReleases(id)}
+			selectRelease={handleSelectRelease}
+		/>
+	</ManageMediaMenuLayout>
+	<ManageMediaMenuLayout>
+		<h1 slot="header">Local Files</h1>
+		<FilesList files={$files} {handleSelectFile} />
+	</ManageMediaMenuLayout>
+	<ManageMediaMenuLayout>
+		<h1 slot="header">Downloads</h1>
+		<DownloadsList downloads={$downloads} cancelDownload={handleCancelDownload} />
+	</ManageMediaMenuLayout>
+</FullScreenModal>

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { sonarrApi, type SonarrSeason } from '../../../apis/sonarr/sonarr-api';
+	import { useRequest } from '../../../stores/data.store';
+	import Button from '../../Button.svelte';
+	import { scrollIntoView } from '../../../selectable';
+
+	export let id: number;
+	export let selectSeason: (seasonNumber: number) => void;
+
+	const { promise: sonarrSeries } = useRequest(sonarrApi.getSeriesById, id);
+</script>
+
+<div class="flex flex-col -my-1">
+	{#await $sonarrSeries then series}
+		{#if series?.seasons}
+			{#each series.seasons.filter((s) => s.seasonNumber !== 0) as season, i}
+				<div class="flex-1 my-1">
+					<Button
+						on:clickOrSelect={() => selectSeason(season.seasonNumber || i + 1)}
+						on:enter={scrollIntoView({ vertical: 64 })}
+					>
+						<div class="mr-2">
+							Season {season.seasonNumber}
+						</div>
+						{#if season.statistics}
+							<div class="text-zinc-400">{season.statistics.totalEpisodeCount} Episodes</div>
+						{/if}
+					</Button>
+				</div>
+			{/each}
+		{/if}
+	{/await}
+</div>

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

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import FullScreenModal from '../../Modal/FullScreenModal.svelte';
+	import ManageMediaMenuLayout from '../MediaManagerMenuLayout.svelte';
+	import FilesList from '../FileList.svelte';
+	import { modalStack } from '../../Modal/modal.store';
+	import FileActionsModal from '../modals/FileActionsModal.svelte';
+	import DownloadsList from '../DownloadList.svelte';
+	import { useRequest } from '../../../stores/data.store';
+	import { derived, type Readable } from 'svelte/store';
+	import SeasonList from './SeasonList.svelte';
+	import { sonarrApi } from '../../../apis/sonarr/sonarr-api';
+	import SeasonReleasesModal from './modals/EpisodeListModal.svelte';
+	import type { FileResource } from '../../../apis/combined-types';
+
+	export let modalId: symbol;
+	export let groupId: symbol;
+	export let hidden: boolean;
+	export let id: number;
+
+	const { promise: files, refresh: refreshFiles } = useRequest(sonarrApi.getFilesBySeriesId, id);
+	const {
+		promise: downloads,
+		data: downloadsData,
+		refresh: refreshDownloads
+	} = useRequest(sonarrApi.getSonarrDownloadsById, id);
+
+	const handleGrabRelease = (guid: string, indexerId: number) =>
+		sonarrApi
+			.downloadSonarrEpisode(guid, indexerId)
+			.then((ok) => {
+				if (!ok) {
+					// TODO: Show error
+				}
+				refreshFiles(id);
+
+				return ok;
+			})
+			.finally(() => {
+				setTimeout(() => refreshDownloads(id), 8000);
+			});
+	const handleCancelDownload = (id: number) =>
+		sonarrApi.cancelDownloadSonarrEpisode(id).then(() => refreshDownloads(id));
+
+	const grabbedReleases: Readable<Record<string, boolean>> = derived(downloadsData, ($downloads) =>
+		($downloads || []).reduce((acc: Record<string, boolean>, download) => {
+			acc[`${download.title}`] = true;
+			return acc;
+		}, {})
+	);
+
+	function handleSelectSeason(seasonNumber: number) {
+		modalStack.create(
+			SeasonReleasesModal,
+			{
+				seriesId: id,
+				seasonNumber,
+				grabRelease: handleGrabRelease
+			},
+			groupId
+		);
+	}
+
+	function handleSelectFile(file: FileResource) {
+		modalStack.create(
+			FileActionsModal,
+			{
+				file,
+				handleDeleteFile: (id: number) =>
+					sonarrApi.deleteSonarrEpisode(id).then(() => refreshFiles(id))
+			},
+			groupId
+		);
+	}
+</script>
+
+<FullScreenModal {modalId} {hidden}>
+	<ManageMediaMenuLayout focusOnMount>
+		<h1 slot="header">Download</h1>
+		<SeasonList {id} selectSeason={handleSelectSeason} />
+	</ManageMediaMenuLayout>
+	<ManageMediaMenuLayout>
+		<h1 slot="header">Local Files</h1>
+		<FilesList files={$files} {handleSelectFile} />
+	</ManageMediaMenuLayout>
+	<ManageMediaMenuLayout>
+		<h1 slot="header">Downloads</h1>
+		<DownloadsList downloads={$downloads} cancelDownload={handleCancelDownload} />
+	</ManageMediaMenuLayout>
+</FullScreenModal>

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

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import FullScreenModal from '../../../Modal/FullScreenModal.svelte';
+	import ManageMediaMenuLayout from '../../MediaManagerMenuLayout.svelte';
+	import { sonarrApi, type SonarrEpisode } from '../../../../apis/sonarr/sonarr-api';
+	import { useRequest } from '../../../../stores/data.store';
+	import Button from '../../../Button.svelte';
+	import { modalStack } from '../../../Modal/modal.store';
+	import ReleaseListModal from '../../modals/ReleaseListModal.svelte';
+	import ReleaseActionsModal from '../../modals/ReleaseActionsModal.svelte';
+	import type { Release } from '../../../../apis/combined-types';
+
+	export let modalId: symbol;
+	export let groupId: symbol;
+	export let hidden: boolean;
+	export let seriesId: number;
+	export let seasonNumber: number;
+	export let grabRelease: (guid: string, indexerId: number) => Promise<boolean>;
+
+	const { promise: episodes } = useRequest(sonarrApi.getEpisodes, seriesId, seasonNumber);
+
+	const handleSelectRelease = (release: Release) => {
+		modalStack.create(
+			ReleaseActionsModal,
+			{
+				release,
+				grabRelease: () => grabRelease(release.guid || '', release.indexerId || -1),
+				status: undefined
+			},
+			groupId
+		);
+	};
+
+	function handleSelectEpisode(episode: SonarrEpisode) {
+		const id = episode.id;
+		if (!id) return;
+		modalStack.create(
+			ReleaseListModal,
+			{
+				getReleases: () => sonarrApi.fetchSonarrReleases(id),
+				selectRelease: handleSelectRelease
+			},
+			groupId
+		);
+	}
+
+	function handleSelectSeasonPacks() {
+		modalStack.create(
+			ReleaseListModal,
+			{
+				getReleases: () => sonarrApi.fetchSonarrSeasonReleases(seriesId, seasonNumber),
+				selectRelease: handleSelectRelease
+			},
+			groupId
+		);
+	}
+</script>
+
+<FullScreenModal {modalId} {hidden}>
+	<Button on:clickOrSelect={handleSelectSeasonPacks}>Season Packs</Button>
+	<ManageMediaMenuLayout>
+		<h1 slot="header">Episodes</h1>
+		<div class="flex flex-col -my-1">
+			{#await $episodes then episodes}
+				{#each episodes as episode}
+					<div class="my-1">
+						<Button on:clickOrSelect={() => handleSelectEpisode(episode)}>
+							<div class="flex items-center font-medium">
+								<div class="mr-2 text-zinc-300">{episode.episodeNumber}.</div>
+								<div>{episode.title}</div>
+							</div>
+						</Button>
+					</div>
+				{/each}
+			{/await}
+		</div>
+	</ManageMediaMenuLayout>
+</FullScreenModal>