Add confirmation modal when deleting from your list to avoid accidental data loss

src/lib/content/WatchedDeleteBtn.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import tooltip from "../actions/tooltip";
+	import Icon from "../Icon.svelte";
+	import { removeWatched } from "../util/api";
+	import { notify } from "../util/notify";
+	import WatchedDeleteModal from "../watched/WatchedDeleteModal.svelte";
+
+	interface Props {
+		watchedId: number;
+		mediaName?: string;
+		onDelete: () => void;
+	}
+
+	let { watchedId, mediaName, onDelete }: Props = $props();
+
+	// If confirm delete modal should be shown, then this will be
+	// set to a callback.
+	let showConfirmDeleteModalCallback: (() => void) | undefined = $state();
+
+	function onDeleteClicked() {
+		showConfirmDeleteModalCallback = () => {
+			removeWatched(watchedId).then((removed) => {
+				if (removed) {
+					onDelete();
+				}
+			});
+		};
+	}
+</script>
+
+<button
+	class="delete-btn"
+	onclick={() => onDeleteClicked()}
+	use:tooltip={{ text: "Delete", pos: "bot" }}
+>
+	<Icon i="trash" wh={19} />
+</button>
+
+{#if showConfirmDeleteModalCallback !== undefined}
+	<WatchedDeleteModal
+		{mediaName}
+		onClose={(confirmed) => {
+			if (!showConfirmDeleteModalCallback) {
+				notify({
+					type: "error",
+					text: "Somehow the deletion callback doesn't exist anymore so we couldn't delete! Please try again",
+					time: 5000,
+				});
+				return;
+			}
+			if (confirmed) {
+				showConfirmDeleteModalCallback();
+			}
+			showConfirmDeleteModalCallback = undefined;
+		}}
+	/>
+{/if}
+
+<style lang="scss">
+	.delete-btn {
+		&:hover {
+			color: $error;
+		}
+	}
+</style>

src/lib/poster/Poster.svelte

@@ -20,6 +20,7 @@
 	import ExtraDetails from "./ExtraDetails.svelte";
 	import { buildExtraDetails } from "./lib";
 	import { decode } from "blurhash";
+	import WatchedDeleteModal from "../watched/WatchedDeleteModal.svelte";
 
 	interface Props {
 		media: Media;
@@ -75,6 +76,10 @@
 	let containerEl: HTMLDivElement | undefined = $state();
 	let bhCanvas: HTMLCanvasElement | undefined = $state();
 
+	// If confirm delete modal should be shown, then this will be
+	// set to a callback.
+	let showConfirmDeleteModalCallback: (() => void) | undefined = $state();
+
 	const meta:
 		| {
 				id: number | undefined;
@@ -162,11 +167,13 @@
 				});
 				return;
 			}
-			removeWatched(watched.id).then((removed) => {
-				if (removed) {
-					watched = undefined;
-				}
-			});
+			showConfirmDeleteModalCallback = () => {
+				removeWatched(watched.id).then((removed) => {
+					if (removed) {
+						watched = undefined;
+					}
+				});
+			};
 			return;
 		}
 		if (type == watched?.status || !meta?.id) return;
@@ -381,6 +388,26 @@
 	</div>
 </li>
 
+{#if showConfirmDeleteModalCallback !== undefined}
+	<WatchedDeleteModal
+		mediaName={media.name}
+		onClose={(confirmed) => {
+			if (!showConfirmDeleteModalCallback) {
+				notify({
+					type: "error",
+					text: "Somehow the deletion callback doesn't exist anymore so we couldn't delete! Please try again",
+					time: 5000,
+				});
+				return;
+			}
+			if (confirmed) {
+				showConfirmDeleteModalCallback();
+			}
+			showConfirmDeleteModalCallback = undefined;
+		}}
+	/>
+{/if}
+
 <style lang="scss">
 	li.hidden {
 		display: none;

src/lib/watched/WatchedDeleteModal.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import Modal from "../Modal.svelte";
+
+	interface Props {
+		mediaName?: string;
+		/**
+		 * If `confirmed=true` then the deletion request was confirmed.
+		 */
+		onClose: (confirmed: boolean) => void;
+	}
+
+	let { mediaName, onClose }: Props = $props();
+</script>
+
+<Modal
+	title="Remove From Your List?"
+	onClose={() => onClose(false)}
+	maxWidth="650px"
+>
+	<div class="remove-ctr">
+		<p>
+			This will delete <b>{mediaName}</b> from your main list. Data will be lost.
+		</p>
+		<button class="confirm-delete-btn" onclick={() => onClose(true)}>
+			Remove from my main list.
+		</button>
+	</div>
+</Modal>
+
+<style lang="scss">
+	div.remove-ctr {
+		display: flex;
+		flex-flow: column;
+		gap: 10px;
+
+		button.confirm-delete-btn {
+			width: max-content;
+			margin-left: auto;
+
+			&:hover {
+				color: $error;
+			}
+		}
+	}
+</style>

src/routes/(app)/game/[id]/+page.svelte

@@ -18,6 +18,7 @@
 	import PosterImage from "@/lib/content/PosterImage.svelte";
 	import Poster from "@/lib/poster/Poster.svelte";
 	import ExpandableText from "@/lib/content/ExpandableText.svelte";
+	import WatchedDeleteBtn from "@/lib/content/WatchedDeleteBtn.svelte";
 
 	let { data } = $props();
 
@@ -78,16 +79,6 @@
 			return false;
 		}
 	}
-
-	async function deleteWatched() {
-		if (game?.watched) {
-			if (await removeWatched(game.watched.id)) {
-				game.watched = undefined;
-			}
-			return;
-		}
-		console.error("deleteWatched: no wlistItem.. can't delete");
-	}
 </script>
 
 <svelte:head>
@@ -173,13 +164,15 @@
 									>
 										<Icon i={game.watched?.pinned ? "unpin" : "pin"} wh={19} />
 									</button>
-									<button
-										class="delete-btn"
-										onclick={() => deleteWatched()}
-										use:tooltip={{ text: "Delete", pos: "bot" }}
-									>
-										<Icon i="trash" wh={19} />
-									</button>
+									<WatchedDeleteBtn
+										watchedId={game.watched.id}
+										mediaName={game.name}
+										onDelete={() => {
+											if (game) {
+												game.watched = undefined;
+											}
+										}}
+									/>
 								</div>
 							{/if}
 						</div>
@@ -277,12 +270,6 @@
 						margin-left: auto;
 					}
 				}
-
-				.delete-btn {
-					&:hover {
-						color: $error;
-					}
-				}
 			}
 		}
 	}

src/routes/(app)/movie/[id]/+page.svelte

@@ -32,6 +32,7 @@
 	import ViewTrailerButton from "@/lib/content/ViewTrailerButton.svelte";
 	import PosterImage from "@/lib/content/PosterImage.svelte";
 	import ExpandableText from "@/lib/content/ExpandableText.svelte";
+	import WatchedDeleteBtn from "@/lib/content/WatchedDeleteBtn.svelte";
 
 	let { data } = $props();
 
@@ -112,16 +113,6 @@
 			return false;
 		}
 	}
-
-	async function deleteWatched() {
-		if (movie?.watched) {
-			if (await removeWatched(movie.watched.id)) {
-				movie.watched = undefined;
-			}
-			return;
-		}
-		console.error("deleteWatched: no wlistItem.. can't delete");
-	}
 </script>
 
 <svelte:head>
@@ -214,13 +205,15 @@
 									>
 										<Icon i={movie.watched?.pinned ? "unpin" : "pin"} wh={19} />
 									</button>
-									<button
-										class="delete-btn"
-										onclick={() => deleteWatched()}
-										use:tooltip={{ text: "Delete", pos: "bot" }}
-									>
-										<Icon i="trash" wh={19} />
-									</button>
+									<WatchedDeleteBtn
+										watchedId={movie.watched.id}
+										mediaName={movie.name}
+										onDelete={() => {
+											if (movie) {
+												movie.watched = undefined;
+											}
+										}}
+									/>
 								</div>
 							{/if}
 						</div>
@@ -359,12 +352,6 @@
 						margin-left: auto;
 					}
 				}
-
-				.delete-btn {
-					&:hover {
-						color: $error;
-					}
-				}
 			}
 		}
 	}

src/routes/(app)/tv/[id]/+page.svelte

@@ -33,6 +33,7 @@
 	import ViewTrailerButton from "@/lib/content/ViewTrailerButton.svelte";
 	import PosterImage from "@/lib/content/PosterImage.svelte";
 	import ExpandableText from "@/lib/content/ExpandableText.svelte";
+	import WatchedDeleteBtn from "@/lib/content/WatchedDeleteBtn.svelte";
 
 	let { data } = $props();
 
@@ -113,16 +114,6 @@
 			return false;
 		}
 	}
-
-	async function deleteWatched() {
-		if (show?.watched) {
-			if (await removeWatched(show.watched.id)) {
-				show.watched = undefined;
-			}
-			return;
-		}
-		console.error("deleteWatched: no wlistItem.. can't delete");
-	}
 </script>
 
 <svelte:head>
@@ -213,13 +204,15 @@
 									>
 										<Icon i={show.watched?.pinned ? "unpin" : "pin"} wh={19} />
 									</button>
-									<button
-										class="delete-btn"
-										onclick={() => deleteWatched()}
-										use:tooltip={{ text: "Delete", pos: "bot" }}
-									>
-										<Icon i="trash" wh={19} />
-									</button>
+									<WatchedDeleteBtn
+										watchedId={show.watched.id}
+										mediaName={show.name}
+										onDelete={() => {
+											if (show) {
+												show.watched = undefined;
+											}
+										}}
+									/>
 								</div>
 							{/if}
 						</div>
@@ -371,12 +364,6 @@
 						margin-left: auto;
 					}
 				}
-
-				.delete-btn {
-					&:hover {
-						color: $error;
-					}
-				}
 			}
 		}
 	}