unsaved file marker

packages/web/src/utility/common.ts

@@ -1,4 +1,4 @@
-import { openedTabs } from '../stores';
+import { getOpenedTabs, openedTabs } from '../stores';
 import _ from 'lodash';
 import getElectron from './getElectron';
 
@@ -18,6 +18,16 @@ export function changeTab(tabid, changeFunc) {
   openedTabs.update(files => files.map(tab => (tab.tabid == tabid ? changeFunc(tab) : tab)));
 }
 
+export function markTabUnsaved(tabid) {
+  const tab = getOpenedTabs().find(x => x.tabid == tabid);
+  if (tab.unsaved) return;
+  openedTabs.update(files => files.map(tab => (tab.tabid == tabid ? { ...tab, unsaved: true } : tab)));
+}
+
+export function markTabSaved(tabid) {
+  openedTabs.update(files => files.map(tab => (tab.tabid == tabid ? { ...tab, unsaved: false } : tab)));
+}
+
 export function setSelectedTabFunc(files, tabid) {
   return [
     ...(files || []).filter(x => x.tabid != tabid).map(x => ({ ...x, selected: false })),

packages/web/src/utility/saveTabFile.ts

@@ -1,7 +1,7 @@
 import { derived, get } from 'svelte/store';
 import { showModal } from '../modals/modalTools';
 import { openedTabs } from '../stores';
-import { changeTab } from './common';
+import { changeTab, markTabSaved } from './common';
 import SaveFileModal from '../modals/SaveFileModal.svelte';
 import registerCommand from '../commands/registerCommand';
 import { apiCall } from './api';
@@ -24,12 +24,14 @@ export default async function saveTabFile(editor, saveMode, folder, format, file
     if (savedFilePath) {
       await apiCall('files/save-as', { filePath: savedFilePath, data, format });
     }
+    markTabSaved(tabid);
   };
 
   const onSave = (title, newProps) => {
     changeTab(tabid, tab => ({
       ...tab,
       title,
+      unsaved: false,
       props: {
         ...tab.props,
         savedFormat: format,