From 638a44c2bf3f7ff3393ac019bd92ac73c5d44ebe Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Fri, 4 Sep 2026 19:58:17 +0800
Subject: [PATCH] added prompt to display unsaved changes before leaving post

---
 src/routes/post/note/+page.svelte     | 29 ++++++++++++++++++++++++++-
 src/routes/post/question/+page.svelte | 29 ++++++++++++++++++++++++++-
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/src/routes/post/note/+page.svelte b/src/routes/post/note/+page.svelte
index dc5b152..9d1471d 100644
--- a/src/routes/post/note/+page.svelte
+++ b/src/routes/post/note/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { query, mutation } from "$lib/api";
 	import { isAuthenticated, getToken, initAuth } from "$lib/stores/auth";
-	import { goto } from "$app/navigation";
+	import { beforeNavigate, goto } from "$app/navigation";
 	import { onMount } from "svelte";
 	import { get } from "svelte/store";
 	import MarkdownEditor from "$lib/components/MarkdownEditor.svelte";
@@ -19,6 +19,30 @@
 	let useCustomUnit = $state(false);
 	let error = $state("");
 	let loading = $state(false);
+	let allowLeave = $state(false);
+
+	const isDirty = $derived(
+		Boolean(
+			title.trim() ||
+			content.trim() ||
+			selectedTopicId ||
+			selectedUnitId ||
+			customUnit.trim(),
+		),
+	);
+
+	beforeNavigate(({ cancel, type }) => {
+		if (allowLeave || !isDirty || type === "leave") return;
+		if (!confirm("Are you sure? You have unsaved changes.")) {
+			cancel();
+		}
+	});
+
+	function handleBeforeUnload(event: BeforeUnloadEvent) {
+		if (allowLeave || !isDirty) return;
+		event.preventDefault();
+		event.returnValue = "";
+	}
 
 	const topicOptions = $derived(
 		topics.map((topic) => ({
@@ -93,6 +117,7 @@
 				unitId,
 			})) as string;
 
+			allowLeave = true;
 			goto(unitCode ? postPath(unitCode, id) : `/notes/${id}`);
 		} catch (err: any) {
 			error = err.message ?? "Failed to publish note";
@@ -106,6 +131,8 @@
 	<title>Post a note — Notebook</title>
 </svelte:head>
 
+<svelte:window onbeforeunload={handleBeforeUnload} />
+
 <div class="page">
 	<h1 class="text-ink font-serif text-4xl font-medium">Post a note</h1>
 	<p class="text-muted mt-2 mb-10 text-[15px]">Share study notes with the Deakin community.</p>
diff --git a/src/routes/post/question/+page.svelte b/src/routes/post/question/+page.svelte
index 2bdeba8..7a6311e 100644
--- a/src/routes/post/question/+page.svelte
+++ b/src/routes/post/question/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { query, mutation } from "$lib/api";
 	import { isAuthenticated, getToken, initAuth } from "$lib/stores/auth";
-	import { goto } from "$app/navigation";
+	import { beforeNavigate, goto } from "$app/navigation";
 	import { onMount } from "svelte";
 	import { get } from "svelte/store";
 	import MarkdownEditor from "$lib/components/MarkdownEditor.svelte";
@@ -19,6 +19,30 @@
 	let useCustomUnit = $state(false);
 	let error = $state("");
 	let loading = $state(false);
+	let allowLeave = $state(false);
+
+	const isDirty = $derived(
+		Boolean(
+			title.trim() ||
+			content.trim() ||
+			selectedTopicId ||
+			selectedUnitId ||
+			customUnit.trim(),
+		),
+	);
+
+	beforeNavigate(({ cancel, type }) => {
+		if (allowLeave || !isDirty || type === "leave") return;
+		if (!confirm("Are you sure? You have unsaved changes.")) {
+			cancel();
+		}
+	});
+
+	function handleBeforeUnload(event: BeforeUnloadEvent) {
+		if (allowLeave || !isDirty) return;
+		event.preventDefault();
+		event.returnValue = "";
+	}
 
 	const topicOptions = $derived(
 		topics.map((topic) => ({
@@ -93,6 +117,7 @@
 				unitId,
 			})) as string;
 
+			allowLeave = true;
 			goto(unitCode ? postPath(unitCode, id) : `/questions/${id}`);
 		} catch (err: any) {
 			error = err.message ?? "Failed to post question";
@@ -106,6 +131,8 @@
 	<title>Ask a question — Notebook</title>
 </svelte:head>
 
+<svelte:window onbeforeunload={handleBeforeUnload} />
+
 <div class="page">
 	<h1 class="text-ink font-serif text-4xl font-medium">Ask a question</h1>
 	<p class="text-muted mt-2 mb-10 text-[15px]">