Display Asterisk on Unsaved Documents (#392)

* ability to mark an open document as unsaved

* unsaved detection now being triggered based on layer tree height

* - rust implementation of unsaved markers
- upgraded eslint

* updated eslint in package.json

* - Renamed GetOpenDocumentsList -> UpdateOpenDocumentsList
- is not -> was not

* changed hash to current identifier to better reflect its meaning

* resolve some merge conflicts

* removed console.log statement leftover from debuging

frontend/src/components/panels/LayerTree.vue

@@ -393,7 +393,6 @@ export default defineComponent({
 		registerResponseHandler(ResponseType.DisplayFolderTreeStructure, (responseData: Response) => {
 			const expandData = responseData as DisplayFolderTreeStructure;
 			if (!expandData) return;
-			console.log(expandData);
 
 			const path = [] as Array<bigint>;
 			this.layers = [] as Array<LayerPanelEntry>;

frontend/src/components/window/title-bar/TitleBar.vue

@@ -4,7 +4,7 @@
 		<MenuBarInput v-if="platform !== ApplicationPlatform.Mac" />
 	</div>
 	<div class="header-third">
-		<WindowTitle :title="`${documents.title}${documents.unsaved ? '*' : ''} - Graphite`" />
+		<WindowTitle :title="`${documents.activeDocument} - Graphite`" />
 	</div>
 	<div class="header-third">
 		<WindowButtonsWindows :maximized="maximized" v-if="platform === ApplicationPlatform.Windows || platform === ApplicationPlatform.Linux" />

frontend/src/utilities/documents.ts

@@ -17,10 +17,11 @@ import { panicProxy } from "@/utilities/panic-proxy";
 const wasm = import("@/../wasm/pkg").then(panicProxy);
 
 const state = reactive({
-	title: "",
-	unsaved: false,
-	documents: [] as Array<string>,
+	documents: [] as string[],
 	activeDocumentIndex: 0,
+	get activeDocument() {
+		return this.documents[this.activeDocumentIndex];
+	},
 });
 
 export async function selectDocument(tabIndex: number) {
@@ -83,17 +84,13 @@ export default readonly(state);
 
 registerResponseHandler(ResponseType.UpdateOpenDocumentsList, (responseData: Response) => {
 	const documentListData = responseData as UpdateOpenDocumentsList;
-	if (documentListData) {
-		state.documents = documentListData.open_documents;
-		state.title = state.documents[state.activeDocumentIndex];
-	}
+	state.documents = documentListData.open_documents.map(({ name, isSaved }) => `${name}${isSaved ? "" : "*"}`);
 });
 
 registerResponseHandler(ResponseType.SetActiveDocument, (responseData: Response) => {
 	const documentData = responseData as SetActiveDocument;
 	if (documentData) {
 		state.activeDocumentIndex = documentData.document_index;
-		state.title = state.documents[state.activeDocumentIndex];
 	}
 });
 

frontend/src/utilities/response-handler.ts

@@ -119,10 +119,11 @@ export type Response =
 	| DisplayConfirmationToCloseAllDocuments;
 
 export interface UpdateOpenDocumentsList {
-	open_documents: Array<string>;
+	open_documents: { name: string; isSaved: boolean }[];
 }
 function newUpdateOpenDocumentsList(input: any): UpdateOpenDocumentsList {
-	return { open_documents: input.open_documents };
+	const openDocuments = input.open_documents.map((docData: [string, boolean]) => ({ name: docData[0], isSaved: docData[1] }));
+	return { open_documents: openDocuments };
 }
 
 export interface Color {