From 6ed3c91bdeb898a827ec0ec4a0786a2e46fd37c9 Mon Sep 17 00:00:00 2001
From: maxid <contact@dorninger.co>
Date: Thu, 18 Dec 2025 22:02:57 +0100
Subject: [PATCH] extract delete-media-dialog from movies and shows pages

---
 .../lib/components/delete-media-dialog.svelte | 109 ++++++++++++++++++
 .../movies/[movieId=uuid]/+page.svelte        |  79 +------------
 .../dashboard/tv/[showId=uuid]/+page.svelte   |  70 +----------
 3 files changed, 113 insertions(+), 145 deletions(-)
 create mode 100644 web/src/lib/components/delete-media-dialog.svelte

diff --git a/web/src/lib/components/delete-media-dialog.svelte b/web/src/lib/components/delete-media-dialog.svelte
new file mode 100644
index 0000000..997c0bf
--- /dev/null
+++ b/web/src/lib/components/delete-media-dialog.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { components } from '$lib/api/api.ts';
+	import { toast } from 'svelte-sonner';
+	import client from '$lib/api/index.ts';
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	import { getFullyQualifiedMediaName } from '$lib/utils.ts';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
+	import { Checkbox } from '$lib/components/ui/checkbox/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+
+	let {
+		media,
+		isShow
+	}: {
+		media: components['schemas']['PublicMovie'] | components['schemas']['PublicShow'];
+		isShow: boolean;
+	} = $props();
+	let deleteDialogOpen = $state(false);
+	let deleteFilesOnDisk = $state(false);
+	let deleteTorrents = $state(false);
+
+	async function delete_movie() {
+		if (!media.id) {
+			toast.error('Movie ID is missing');
+			return;
+		}
+		const { response } = await client.DELETE('/api/v1/movies/{movie_id}', {
+			params: {
+				path: { movie_id: media.id },
+				query: { delete_files_on_disk: deleteFilesOnDisk, delete_torrents: deleteTorrents }
+			}
+		});
+		if (!response.ok) {
+			const errorText = await response.text();
+			toast.error('Failed to delete movie: ' + errorText);
+		} else {
+			toast.success('Movie deleted successfully.');
+			deleteDialogOpen = false;
+			await goto(resolve('/dashboard/movies', {}), { invalidateAll: true });
+		}
+	}
+
+	async function delete_show() {
+		const { response } = await client.DELETE('/api/v1/tv/shows/{show_id}', {
+			params: {
+				path: { show_id: media.id! },
+				query: { delete_files_on_disk: deleteFilesOnDisk, delete_torrents: deleteTorrents }
+			}
+		});
+		if (!response.ok) {
+			const errorText = await response.text();
+			toast.error('Failed to delete show: ' + errorText);
+		} else {
+			toast.success('Show deleted successfully.');
+			deleteDialogOpen = false;
+			await goto(resolve('/dashboard/tv', {}), { invalidateAll: true });
+		}
+	}
+</script>
+
+<AlertDialog.Root bind:open={deleteDialogOpen}>
+	<AlertDialog.Trigger class={buttonVariants({ variant: 'destructive' })}>
+		Delete {isShow ? ' Show' : ' Movie'}
+	</AlertDialog.Trigger>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Delete - {getFullyQualifiedMediaName(media)}?</AlertDialog.Title>
+			<AlertDialog.Description>
+				This action cannot be undone. This will permanently delete
+				<strong>{getFullyQualifiedMediaName(media)}</strong>.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<div class="flex flex-col gap-3 py-4">
+			<div class="flex items-center space-x-2">
+				<Checkbox bind:checked={deleteFilesOnDisk} id="delete-files" />
+				<Label
+					for="delete-files"
+					class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+				>
+					Also delete files on disk (this will only remove imported files, not downloads)
+				</Label>
+			</div>
+			<div class="flex items-center space-x-2">
+				<Checkbox bind:checked={deleteTorrents} id="delete-torrents" />
+				<Label
+					for="delete-torrents"
+					class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+				>
+					Also delete torrents (this will remove torrents from your download clients)
+				</Label>
+			</div>
+		</div>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={() => {
+					if (isShow) {
+						delete_show();
+					} else delete_movie();
+				}}
+				class={buttonVariants({ variant: 'destructive' })}
+			>
+				Delete
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte b/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
index fce273a..ebe89e8 100644
--- a/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
+++ b/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { buttonVariants } from '$lib/components/ui/button/index.js';
 	import { Separator } from '$lib/components/ui/separator/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
 	import { ImageOff } from 'lucide-svelte';
 	import { getContext } from 'svelte';
-	import { toast } from 'svelte-sonner';
 	import type { components } from '$lib/api/api';
 	import { getFullyQualifiedMediaName } from '$lib/utils';
 	import { page } from '$app/state';
@@ -14,41 +12,12 @@
 	import DownloadMovieDialog from '$lib/components/download-movie-dialog.svelte';
 	import RequestMovieDialog from '$lib/components/request-movie-dialog.svelte';
 	import LibraryCombobox from '$lib/components/library-combobox.svelte';
-	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
-	import { Checkbox } from '$lib/components/ui/checkbox/index.js';
-	import { Label } from '$lib/components/ui/label';
 	import { base } from '$app/paths';
-	import { resolve } from '$app/paths';
-	import { goto } from '$app/navigation';
 	import * as Card from '$lib/components/ui/card/index.js';
-	import client from '$lib/api';
+	import DeleteMediaDialog from '$lib/components/delete-media-dialog.svelte';
 
 	let movie: components['schemas']['PublicMovie'] = page.data.movie;
 	let user: () => components['schemas']['UserRead'] = getContext('user');
-	let deleteDialogOpen = $state(false);
-	let deleteFilesOnDisk = $state(false);
-	let deleteTorrents = $state(false);
-
-	async function delete_movie() {
-		if (!movie.id) {
-			toast.error('Movie ID is missing');
-			return;
-		}
-		const { response } = await client.DELETE('/api/v1/movies/{movie_id}', {
-			params: {
-				path: { movie_id: movie.id },
-				query: { delete_files_on_disk: deleteFilesOnDisk, delete_torrents: deleteTorrents }
-			}
-		});
-		if (!response.ok) {
-			const errorText = await response.text();
-			toast.error('Failed to delete movie: ' + errorText);
-		} else {
-			toast.success('Movie deleted successfully.');
-			deleteDialogOpen = false;
-			await goto(resolve('/dashboard/movies', {}), { invalidateAll: true });
-		}
-	}
 </script>
 
 <svelte:head>
@@ -124,51 +93,7 @@
 					</Card.Header>
 					<Card.Content class="flex flex-col items-center gap-4">
 						<LibraryCombobox media={movie} mediaType="movie" />
-						<AlertDialog.Root bind:open={deleteDialogOpen}>
-							<AlertDialog.Trigger class={buttonVariants({ variant: 'destructive' })}>
-								Delete Movie
-							</AlertDialog.Trigger>
-							<AlertDialog.Content>
-								<AlertDialog.Header>
-									<AlertDialog.Title
-										>Delete - {getFullyQualifiedMediaName(movie)}?</AlertDialog.Title
-									>
-									<AlertDialog.Description>
-										This action cannot be undone. This will permanently delete
-										<strong>{getFullyQualifiedMediaName(movie)}</strong> from the database.
-									</AlertDialog.Description>
-								</AlertDialog.Header>
-								<div class="flex flex-col gap-3 py-4">
-									<div class="flex items-center space-x-2">
-										<Checkbox bind:checked={deleteFilesOnDisk} id="delete-files" />
-										<Label
-											for="delete-files"
-											class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-										>
-											Also delete files on disk
-										</Label>
-									</div>
-									<div class="flex items-center space-x-2">
-										<Checkbox bind:checked={deleteTorrents} id="delete-torrents" />
-										<Label
-											for="delete-torrents"
-											class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-										>
-											Also delete torrents
-										</Label>
-									</div>
-								</div>
-								<AlertDialog.Footer>
-									<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-									<AlertDialog.Action
-										onclick={() => delete_movie()}
-										class={buttonVariants({ variant: 'destructive' })}
-									>
-										Delete
-									</AlertDialog.Action>
-								</AlertDialog.Footer>
-							</AlertDialog.Content>
-						</AlertDialog.Root>
+						<DeleteMediaDialog isShow={false} media={movie} />
 					</Card.Content>
 				</Card.Root>
 			{/if}
diff --git a/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte b/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte
index cf70bc1..301912f 100644
--- a/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte
+++ b/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { buttonVariants } from '$lib/components/ui/button/index.js';
 	import { Separator } from '$lib/components/ui/separator/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
@@ -19,9 +18,8 @@
 	import { toast } from 'svelte-sonner';
 	import { Label } from '$lib/components/ui/label';
 	import LibraryCombobox from '$lib/components/library-combobox.svelte';
-	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
-	import { Checkbox } from '$lib/components/ui/checkbox/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
+	import DeleteMediaDialog from '$lib/components/delete-media-dialog.svelte';
 	import { resolve } from '$app/paths';
 	import client from '$lib/api';
 
@@ -30,9 +28,6 @@
 	let torrents: components['schemas']['RichShowTorrent'] = page.data.torrentsData;
 
 	let continuousDownloadEnabled = $state(show().continuous_download);
-	let deleteDialogOpen = $state(false);
-	let deleteFilesOnDisk = $state(false);
-	let deleteTorrents = $state(false);
 
 	async function toggle_continuous_download() {
 		const { response } = await client.POST('/api/v1/tv/shows/{show_id}/continuousDownload', {
@@ -55,23 +50,6 @@
 			toast.success('Continuous download toggled successfully.');
 		}
 	}
-
-	async function delete_show() {
-		const { response } = await client.DELETE('/api/v1/tv/shows/{show_id}', {
-			params: {
-				path: { show_id: show().id },
-				query: { delete_files_on_disk: deleteFilesOnDisk, delete_torrents: deleteTorrents }
-			}
-		});
-		if (!response.ok) {
-			const errorText = await response.text();
-			toast.error('Failed to delete show: ' + errorText);
-		} else {
-			toast.success('Show deleted successfully.');
-			deleteDialogOpen = false;
-			await goto(resolve('/dashboard/tv', {}), { invalidateAll: true });
-		}
-	}
 </script>
 
 <svelte:head>
@@ -158,51 +136,7 @@
 							</div>
 						{/if}
 						<LibraryCombobox media={show()} mediaType="tv" />
-						<AlertDialog.Root bind:open={deleteDialogOpen}>
-							<AlertDialog.Trigger class={buttonVariants({ variant: 'destructive' })}>
-								Delete Show
-							</AlertDialog.Trigger>
-							<AlertDialog.Content>
-								<AlertDialog.Header>
-									<AlertDialog.Title
-										>Delete - {getFullyQualifiedMediaName(show())}?</AlertDialog.Title
-									>
-									<AlertDialog.Description>
-										This action cannot be undone. This will permanently delete
-										<strong>{getFullyQualifiedMediaName(show())}</strong> from the database.
-									</AlertDialog.Description>
-								</AlertDialog.Header>
-								<div class="flex flex-col gap-3 py-4">
-									<div class="flex items-center space-x-2">
-										<Checkbox bind:checked={deleteFilesOnDisk} id="delete-files" />
-										<Label
-											for="delete-files"
-											class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-										>
-											Also delete files on disk
-										</Label>
-									</div>
-									<div class="flex items-center space-x-2">
-										<Checkbox bind:checked={deleteTorrents} id="delete-torrents" />
-										<Label
-											for="delete-torrents"
-											class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-										>
-											Also delete torrents
-										</Label>
-									</div>
-								</div>
-								<AlertDialog.Footer>
-									<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-									<AlertDialog.Action
-										onclick={() => delete_show()}
-										class={buttonVariants({ variant: 'destructive' })}
-									>
-										Delete
-									</AlertDialog.Action>
-								</AlertDialog.Footer>
-							</AlertDialog.Content>
-						</AlertDialog.Root>
+						<DeleteMediaDialog isShow={true} media={show()} />
 					</Card.Content>
 				</Card.Root>
 			{/if}