Confirm when the browser window is closed and there is unsaved work (#397)

* - browser confirmation on page exit
- prompt to save a document when closed will only trigger when unsaved

* add back select document for close prompt

* - name -> displayname
- add preventPropigation to middle click

frontend/src/utilities/documents.ts

@@ -16,12 +16,17 @@ import { panicProxy } from "@/utilities/panic-proxy";
 
 const wasm = import("@/../wasm/pkg").then(panicProxy);
 
+class DocumentState {
+	readonly displayName: string;
+
+	constructor(readonly name: string, readonly isSaved: boolean) {
+		this.displayName = `${name}${isSaved ? "" : "*"}`;
+	}
+}
+
 const state = reactive({
-	documents: [] as string[],
+	documents: [] as DocumentState[],
 	activeDocumentIndex: 0,
-	get activeDocument() {
-		return this.documents[this.activeDocumentIndex];
-	},
 });
 
 export async function selectDocument(tabIndex: number) {
@@ -29,9 +34,16 @@ export async function selectDocument(tabIndex: number) {
 }
 
 export async function closeDocumentWithConfirmation(tabIndex: number) {
-	selectDocument(tabIndex);
+	const targetDocument = state.documents[tabIndex];
+	if (targetDocument.isSaved) {
+		(await wasm).close_document(tabIndex);
+		return;
+	}
 
-	const tabLabel = state.documents[tabIndex];
+	// Show the document is being prompted to close
+	await selectDocument(tabIndex);
+
+	const tabLabel = targetDocument.displayName;
 
 	createDialog("File", "Save changes before closing?", tabLabel, [
 		{
@@ -84,7 +96,7 @@ export default readonly(state);
 
 registerResponseHandler(ResponseType.UpdateOpenDocumentsList, (responseData: Response) => {
 	const documentListData = responseData as UpdateOpenDocumentsList;
-	state.documents = documentListData.open_documents.map(({ name, isSaved }) => `${name}${isSaved ? "" : "*"}`);
+	state.documents = documentListData.open_documents.map(({ name, isSaved }) => new DocumentState(name, isSaved));
 });
 
 registerResponseHandler(ResponseType.SetActiveDocument, (responseData: Response) => {

frontend/src/utilities/input.ts

@@ -1,6 +1,7 @@
 import { toggleFullscreen } from "@/utilities/fullscreen";
 import { dialogIsVisible, dismissDialog, submitDialog } from "@/utilities/dialog";
 import { panicProxy } from "@/utilities/panic-proxy";
+import documents from "./documents";
 
 const wasm = import("@/../wasm/pkg").then(panicProxy);
 
@@ -125,6 +126,14 @@ export async function onWindowResize() {
 	if (boundsOfViewports.length > 0) (await wasm).bounds_of_viewports(data);
 }
 
+export function onBeforeUnload(event: BeforeUnloadEvent) {
+	const allDocumentsSaved = documents.documents.reduce((acc, doc) => doc.isSaved && acc, true);
+	if (!allDocumentsSaved) {
+		event.returnValue = "Unsaved work will be lost if the web browser tab is closed. Close anyway?";
+		event.preventDefault();
+	}
+}
+
 export function makeModifiersBitfield(e: MouseEvent | KeyboardEvent): number {
 	return Number(e.ctrlKey) | (Number(e.shiftKey) << 1) | (Number(e.altKey) << 2);
 }