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/components/window/title-bar/TitleBar.vue

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

frontend/src/components/workspace/Panel.vue

@@ -7,11 +7,26 @@
 					:class="{ active: tabIndex === tabActiveIndex }"
 					v-for="(tabLabel, tabIndex) in tabLabels"
 					:key="tabIndex"
-					@click.middle="closeDocumentWithConfirmation(tabIndex)"
+					@click.middle="
+					(e) => {
+							e.stopPropagation();
+							closeDocumentWithConfirmation(tabIndex);
+						}
+					"
 					@click="panelType === 'Document' && selectDocument(tabIndex)"
 				>
 					<span>{{ tabLabel }}</span>
-					<IconButton :action="() => closeDocumentWithConfirmation(tabIndex)" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
+					<IconButton
+						:action="
+							(e) => {
+								e.stopPropagation();
+								closeDocumentWithConfirmation(tabIndex);
+							}
+						"
+						:icon="'CloseX'"
+						:size="16"
+						v-if="tabCloseButtons"
+					/>
 				</div>
 			</div>
 			<PopoverButton :icon="PopoverButtonIcon.VerticalEllipsis">

frontend/src/components/workspace/Workspace.vue

@@ -1,7 +1,13 @@
 <template>
 	<LayoutRow class="workspace-grid-subdivision">
 		<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 1597">
-			<Panel :panelType="'Document'" :tabCloseButtons="true" :tabMinWidths="true" :tabLabels="documents.documents" :tabActiveIndex="documents.activeDocumentIndex" />
+			<Panel
+				:panelType="'Document'"
+				:tabCloseButtons="true"
+				:tabMinWidths="true"
+				:tabLabels="documents.documents.map((doc) => doc.displayName)"
+				:tabActiveIndex="documents.activeDocumentIndex"
+			/>
 		</LayoutCol>
 		<LayoutCol class="workspace-grid-resize-gutter"></LayoutCol>
 		<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 319">