feat(web): file open and save

In-place saving is only supported in Chromium.

11 files changed, 302 insertions, 19 deletions

diff --git a/subprojects/frontend/src/RootStore.ts b/subprojects/frontend/src/RootStore.ts
index 8a17d2de..c029f746 100644
--- a/subprojects/frontend/src/RootStore.ts
+++ b/subprojects/frontend/src/RootStore.ts
@@ -5,7 +5,12 @@
  */
 
 import { getLogger } from 'loglevel';
-import { makeAutoObservable, runInAction } from 'mobx';
+import {
+  IReactionDisposer,
+  autorun,
+  makeAutoObservable,
+  runInAction,
+} from 'mobx';
 
 import PWAStore from './PWAStore';
 import type EditorStore from './editor/EditorStore';
@@ -34,16 +39,22 @@ export default class RootStore {
 
   disposed = false;
 
+  private titleReaction: IReactionDisposer | undefined;
+
   constructor() {
     this.pwaStore = new PWAStore();
     this.themeStore = new ThemeStore();
     this.exportSettingsStore = new ExportSettingsScotre();
-    makeAutoObservable<RootStore, 'compressor' | 'editorStoreClass'>(this, {
+    makeAutoObservable<
+      RootStore,
+      'compressor' | 'editorStoreClass' | 'titleReaction'
+    >(this, {
       compressor: false,
       editorStoreClass: false,
       pwaStore: false,
       themeStore: false,
       exportSettingsStore: false,
+      titleReaction: false,
     });
     (async () => {
       const { default: EditorStore } = await import('./editor/EditorStore');
@@ -66,11 +77,21 @@ export default class RootStore {
     this.initialValue = initialValue;
     if (this.editorStoreClass !== undefined) {
       const EditorStore = this.editorStoreClass;
-      this.editorStore = new EditorStore(
+      const editorStore = new EditorStore(
         this.initialValue,
         this.pwaStore,
         (text) => this.compressor.compress(text),
       );
+      this.editorStore = editorStore;
+      this.titleReaction?.();
+      this.titleReaction = autorun(() => {
+        const { simpleName, unsavedChanges } = editorStore;
+        if (simpleName === undefined) {
+          document.title = 'Refinery';
+        } else {
+          document.title = `${unsavedChanges ? '\u25cf ' : ''}${simpleName} - Refinery`;
+        }
+      });
     }
   }
 
@@ -78,6 +99,7 @@ export default class RootStore {
     if (this.disposed) {
       return;
     }
+    this.titleReaction?.();
     this.editorStore?.dispose();
     this.compressor.dispose();
     this.disposed = true;
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
index d80c022d..738052c7 100644
--- a/subprojects/frontend/src/TopBar.tsx
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -85,6 +85,16 @@ const DevModeBadge = styled('div')(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
 }));
 
+const FileName = styled('span', {
+  shouldForwardProp: (prop) => prop !== 'unsavedChanges',
+})<{ unsavedChanges: boolean }>(({ theme, unsavedChanges }) => ({
+  marginLeft: theme.spacing(1),
+  fontWeight: theme.typography.fontWeightLight,
+  fontSize: '1.25rem',
+  lineHeight: '1.6rem',
+  fontStyle: unsavedChanges ? 'italic' : 'normal',
+}));
+
 export default observer(function TopBar(): JSX.Element {
   const { editorStore, themeStore } = useRootStore();
   const overlayVisible = useWindowControlsOverlayVisible();
@@ -126,6 +136,11 @@ export default observer(function TopBar(): JSX.Element {
         <Typography variant="h6" component="h1" pl={1}>
           Refinery {import.meta.env.DEV && <DevModeBadge>Dev</DevModeBadge>}
         </Typography>
+        {large && editorStore?.simpleName !== undefined && (
+          <FileName unsavedChanges={editorStore.unsavedChanges}>
+            {editorStore.simpleName}
+          </FileName>
+        )}
         <Stack direction="row" alignItems="center" flexGrow={1} marginLeft={1}>
           {medium && !large && (
             <PaneButtons themeStore={themeStore} hideLabel />
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index f4513909..4afba607 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -7,11 +7,14 @@
 import type { Diagnostic } from '@codemirror/lint';
 import CancelIcon from '@mui/icons-material/Cancel';
 import CheckIcon from '@mui/icons-material/Check';
+import FileOpenIcon from '@mui/icons-material/FileOpen';
 import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
 import FormatPaintIcon from '@mui/icons-material/FormatPaint';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import LooksIcon from '@mui/icons-material/Looks';
 import RedoIcon from '@mui/icons-material/Redo';
+import SaveIcon from '@mui/icons-material/Save';
+import SaveAsIcon from '@mui/icons-material/SaveAs';
 import SearchIcon from '@mui/icons-material/Search';
 import UndoIcon from '@mui/icons-material/Undo';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -47,10 +50,37 @@ export default observer(function EditorButtons({
   return (
     <Stack direction="row" flexGrow={1}>
       <IconButton
+        disabled={editorStore === undefined}
+        onClick={() => editorStore?.openFile()}
+        aria-label="Open"
+        color="inherit"
+      >
+        <FileOpenIcon fontSize="small" />
+      </IconButton>
+      <IconButton
+        disabled={editorStore === undefined || !editorStore.unsavedChanges}
+        onClick={() => editorStore?.saveFile()}
+        aria-label="Save"
+        color="inherit"
+      >
+        <SaveIcon fontSize="small" />
+      </IconButton>
+      {'showSaveFilePicker' in window && (
+        <IconButton
+          disabled={editorStore === undefined}
+          onClick={() => editorStore?.saveFileAs()}
+          aria-label="Save as"
+          color="inherit"
+        >
+          <SaveAsIcon fontSize="small" />
+        </IconButton>
+      )}
+      <IconButton
         disabled={editorStore === undefined || !editorStore.canUndo}
         onClick={() => editorStore?.undo()}
         aria-label="Undo"
         color="inherit"
+        sx={{ ml: 1 }}
       >
         <UndoIcon fontSize="small" />
       </IconButton>
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index 5e7d05e1..33bca382 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -27,6 +27,13 @@ import { nanoid } from 'nanoid';
 
 import type PWAStore from '../PWAStore';
 import GraphStore from '../graph/GraphStore';
+import {
+  type OpenResult,
+  type OpenTextFileResult,
+  openTextFile,
+  saveTextFile,
+  saveBlob,
+} from '../utils/fileIO';
 import getLogger from '../utils/getLogger';
 import type XtextClient from '../xtext/XtextClient';
 import type { SemanticsSuccessResult } from '../xtext/xtextServiceResults';
@@ -35,7 +42,10 @@ import EditorErrors from './EditorErrors';
 import GeneratedModelStore from './GeneratedModelStore';
 import LintPanelStore from './LintPanelStore';
 import SearchPanelStore from './SearchPanelStore';
-import createEditorState from './createEditorState';
+import createEditorState, {
+  createHistoryExtension,
+  historyCompartment,
+} from './createEditorState';
 import { countDiagnostics } from './exposeDiagnostics';
 import { type IOccurrence, setOccurrences } from './findOccurrences';
 import {
@@ -45,6 +55,25 @@ import {
 
 const log = getLogger('editor.EditorStore');
 
+const REFINERY_CONTENT_TYPE = 'text/x-refinery';
+
+const FILE_PICKER_OPTIONS: FilePickerOptions = {
+  id: 'problem',
+  types: [
+    {
+      description: 'Refinery files',
+      accept: {
+        [REFINERY_CONTENT_TYPE]: [
+          '.problem',
+          '.PROBLEM',
+          '.refinery',
+          '.REFINERY',
+        ],
+      },
+    },
+  ],
+};
+
 export default class EditorStore {
   readonly id: string;
 
@@ -76,6 +105,12 @@ export default class EditorStore {
 
   selectedGeneratedModel: string | undefined;
 
+  fileName: string | undefined;
+
+  private fileHandle: FileSystemFileHandle | undefined;
+
+  unsavedChanges = false;
+
   constructor(
     initialValue: string,
     pwaStore: PWAStore,
@@ -201,6 +236,9 @@ export default class EditorStore {
     log.trace('Editor transaction', tr);
     this.state = tr.state;
     this.client?.onTransaction(tr);
+    if (tr.docChanged) {
+      this.unsavedChanges = true;
+    }
   }
 
   doCommand(command: Command): boolean {
@@ -403,4 +441,88 @@ export default class EditorStore {
     });
     return generating;
   }
+
+  openFile(): boolean {
+    openTextFile(FILE_PICKER_OPTIONS)
+      .then((result) => this.fileOpened(result))
+      .catch((error) => log.error('Failed to open file', error));
+    return true;
+  }
+
+  private clearUnsavedChanges(): void {
+    this.unsavedChanges = false;
+  }
+
+  private setFile({ name, handle }: OpenResult): void {
+    log.info('Opened file', name);
+    this.fileName = name;
+    this.fileHandle = handle;
+  }
+
+  private fileOpened(result: OpenTextFileResult): void {
+    this.dispatch({
+      changes: [
+        {
+          from: 0,
+          to: this.state.doc.length,
+          insert: result.text,
+        },
+      ],
+      effects: [historyCompartment.reconfigure([])],
+    });
+    // Clear history by removing and re-adding the history extension. See
+    // https://stackoverflow.com/a/77943295 and
+    // https://discuss.codemirror.net/t/codemirror-6-cm-clearhistory-equivalent/2851/10
+    this.dispatch({
+      effects: [historyCompartment.reconfigure([createHistoryExtension()])],
+    });
+    this.setFile(result);
+    this.clearUnsavedChanges();
+  }
+
+  saveFile(): boolean {
+    if (!this.unsavedChanges) {
+      return false;
+    }
+    if (this.fileHandle === undefined) {
+      return this.saveFileAs();
+    }
+    saveTextFile(this.fileHandle, this.state.sliceDoc())
+      .then(() => this.clearUnsavedChanges())
+      .catch((error) => log.error('Failed to save file', error));
+    return true;
+  }
+
+  saveFileAs(): boolean {
+    const blob = new Blob([this.state.sliceDoc()], {
+      type: REFINERY_CONTENT_TYPE,
+    });
+    saveBlob(blob, this.fileName ?? 'graph.problem', FILE_PICKER_OPTIONS)
+      .then((result) => this.fileSavedAs(result))
+      .catch((error) => log.error('Failed to save file', error));
+    return true;
+  }
+
+  private fileSavedAs(result: OpenResult | undefined) {
+    if (result !== undefined) {
+      this.setFile(result);
+    }
+    this.clearUnsavedChanges();
+  }
+
+  get simpleName(): string | undefined {
+    const { fileName } = this;
+    if (fileName === undefined) {
+      return undefined;
+    }
+    const index = fileName.lastIndexOf('.');
+    if (index < 0) {
+      return fileName;
+    }
+    return fileName.substring(0, index);
+  }
+
+  get simpleNameOrFallback(): string {
+    return this.simpleName ?? 'graph';
+  }
 }
diff --git a/subprojects/frontend/src/editor/GeneratedModelStore.ts b/subprojects/frontend/src/editor/GeneratedModelStore.ts
index f2695d9a..4af49e2c 100644
--- a/subprojects/frontend/src/editor/GeneratedModelStore.ts
+++ b/subprojects/frontend/src/editor/GeneratedModelStore.ts
@@ -21,7 +21,7 @@ export default class GeneratedModelStore {
   graph: GraphStore | undefined;
 
   constructor(
-    randomSeed: number,
+    private readonly randomSeed: number,
     private readonly editorStore: EditorStore,
   ) {
     const time = new Date().toLocaleTimeString(undefined, { hour12: false });
@@ -50,7 +50,8 @@ export default class GeneratedModelStore {
 
   setSemantics(semantics: SemanticsSuccessResult): void {
     if (this.running) {
-      this.graph = new GraphStore(this.editorStore);
+      const name = `${this.editorStore.simpleNameOrFallback}_solution_${this.randomSeed}`;
+      this.graph = new GraphStore(this.editorStore, name);
       this.graph.setSemantics(semantics);
     }
   }
diff --git a/subprojects/frontend/src/editor/createEditorState.ts b/subprojects/frontend/src/editor/createEditorState.ts
index 67b8fb9e..9b29228f 100644
--- a/subprojects/frontend/src/editor/createEditorState.ts
+++ b/subprojects/frontend/src/editor/createEditorState.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -26,7 +26,7 @@ import {
 } from '@codemirror/language';
 import { lintKeymap, lintGutter } from '@codemirror/lint';
 import { search, searchKeymap } from '@codemirror/search';
-import { EditorState } from '@codemirror/state';
+import { Compartment, EditorState, type Extension } from '@codemirror/state';
 import {
   drawSelection,
   highlightActiveLine,
@@ -46,6 +46,12 @@ import exposeDiagnostics from './exposeDiagnostics';
 import findOccurrences from './findOccurrences';
 import semanticHighlighting from './semanticHighlighting';
 
+export const historyCompartment = new Compartment();
+
+export function createHistoryExtension(): Extension {
+  return history();
+}
+
 export default function createEditorState(
   initialValue: string,
   store: EditorStore,
@@ -66,7 +72,7 @@ export default function createEditorState(
       highlightActiveLine(),
       highlightActiveLineGutter(),
       highlightSpecialChars(),
-      history(),
+      historyCompartment.of([createHistoryExtension()]),
       indentOnInput(),
       rectangularSelection(),
       search({
@@ -103,6 +109,9 @@ export default function createEditorState(
       }),
       keymap.of([
         { key: 'Mod-Shift-f', run: () => store.formatText() },
+        { key: 'Ctrl-o', run: () => store.openFile() },
+        { key: 'Ctrl-s', run: () => store.saveFile() },
+        { key: 'Ctrl-Shift-s', run: () => store.saveFileAs() },
         ...closeBracketsKeymap,
         ...completionKeymap,
         ...foldKeymap,
diff --git a/subprojects/frontend/src/graph/GraphStore.ts b/subprojects/frontend/src/graph/GraphStore.ts
index 58c4422d..d9282326 100644
--- a/subprojects/frontend/src/graph/GraphStore.ts
+++ b/subprojects/frontend/src/graph/GraphStore.ts
@@ -66,7 +66,10 @@ export default class GraphStore {
 
   selectedSymbol: RelationMetadata | undefined;
 
-  constructor(private readonly editorStore: EditorStore) {
+  constructor(
+    private readonly editorStore: EditorStore,
+    private readonly nameOverride?: string,
+  ) {
     makeAutoObservable<GraphStore, 'editorStore'>(this, {
       editorStore: false,
       semantics: observable.ref,
@@ -190,4 +193,8 @@ export default class GraphStore {
   get colorNodes(): boolean {
     return this.editorStore.colorIdentifiers;
   }
+
+  get name(): string {
+    return this.nameOverride ?? this.editorStore.simpleNameOrFallback;
+  }
 }
diff --git a/subprojects/frontend/src/graph/export/ExportSettingsStore.tsx b/subprojects/frontend/src/graph/export/ExportSettingsStore.ts
index 53a161ab..53a161ab 100644
--- a/subprojects/frontend/src/graph/export/ExportSettingsStore.tsx
+++ b/subprojects/frontend/src/graph/export/ExportSettingsStore.ts
diff --git a/subprojects/frontend/src/graph/export/exportDiagram.tsx b/subprojects/frontend/src/graph/export/exportDiagram.tsx
index cd374d23..44489d28 100644
--- a/subprojects/frontend/src/graph/export/exportDiagram.tsx
+++ b/subprojects/frontend/src/graph/export/exportDiagram.tsx
@@ -340,7 +340,7 @@ export default async function exportDiagram(
 
   if (settings.format === 'pdf') {
     const pdf = await serializePDF(copyOfSVG, settings);
-    await saveBlob(pdf, 'graph.pdf', {
+    await saveBlob(pdf, `${graph.name}.pdf`, {
       id: EXPORT_ID,
       types: [
         {
@@ -359,7 +359,7 @@ export default async function exportDiagram(
     if (mode === 'copy') {
       await copyBlob(png);
     } else {
-      await saveBlob(png, 'graph.png', {
+      await saveBlob(png, `${graph.name}.png`, {
         id: EXPORT_ID,
         types: [
           {
@@ -374,7 +374,7 @@ export default async function exportDiagram(
   } else if (mode === 'copy') {
     await copyBlob(serializedSVG);
   } else {
-    await saveBlob(serializedSVG, 'graph.svg', {
+    await saveBlob(serializedSVG, `${graph.name}.svg`, {
       id: EXPORT_ID,
       types: [
         {
diff --git a/subprojects/frontend/src/utils/fileIO.ts b/subprojects/frontend/src/utils/fileIO.ts
index 4f376882..fe0b1fbb 100644
--- a/subprojects/frontend/src/utils/fileIO.ts
+++ b/subprojects/frontend/src/utils/fileIO.ts
@@ -4,11 +4,67 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
+export interface OpenResult {
+  name: string;
+  handle: FileSystemFileHandle | undefined;
+}
+
+export interface OpenTextFileResult extends OpenResult {
+  text: string;
+}
+
+export async function openTextFile(
+  options: FilePickerOptions,
+): Promise<OpenTextFileResult> {
+  let file: File;
+  let handle: FileSystemFileHandle | undefined;
+  if ('showOpenFilePicker' in window) {
+    [handle] = await window.showOpenFilePicker(options);
+    if (handle === undefined) {
+      throw new Error('No file was selected');
+    }
+    file = await handle.getFile();
+  } else {
+    const input = document.createElement('input');
+    input.type = 'file';
+    file = await new Promise((resolve, reject) => {
+      input.addEventListener('change', () => {
+        const { files } = input;
+        const result = files?.item(0);
+        if (result) {
+          resolve(result);
+        } else {
+          reject(new Error('No file was selected'));
+        }
+      });
+      input.click();
+    });
+  }
+  const text = await file.text();
+  return {
+    name: file.name,
+    text,
+    handle,
+  };
+}
+
+export async function saveTextFile(
+  handle: FileSystemFileHandle,
+  text: string,
+): Promise<void> {
+  const writable = await handle.createWritable();
+  try {
+    await writable.write(text);
+  } finally {
+    await writable.close();
+  }
+}
+
 export async function saveBlob(
   blob: Blob,
   name: string,
   options: FilePickerOptions,
-): Promise<void> {
+): Promise<OpenResult | undefined> {
   if ('showSaveFilePicker' in window) {
     const handle = await window.showSaveFilePicker({
       ...options,
@@ -20,7 +76,10 @@ export async function saveBlob(
     } finally {
       await writable.close();
     }
-    return;
+    return {
+      name: handle.name,
+      handle,
+    };
   }
   const link = document.createElement('a');
   const url = window.URL.createObjectURL(blob);
@@ -31,6 +90,7 @@ export async function saveBlob(
   } finally {
     window.URL.revokeObjectURL(url);
   }
+  return undefined;
 }
 
 export async function copyBlob(blob: Blob): Promise<void> {
diff --git a/subprojects/frontend/types/filesystemAccess.d.ts b/subprojects/frontend/types/filesystemAccess.d.ts
index 000cd2a5..e9accc77 100644
--- a/subprojects/frontend/types/filesystemAccess.d.ts
+++ b/subprojects/frontend/types/filesystemAccess.d.ts
@@ -5,7 +5,6 @@
  */
 
 interface FilePickerOptions {
-  suggestedName?: string;
   id?: string;
   types?: {
     description?: string;
@@ -13,11 +12,29 @@ interface FilePickerOptions {
   }[];
 }
 
+interface FilePickerSaveOptions extends FilePickerOptions {
+  suggestedName?: string;
+}
+
 interface Window {
   showOpenFilePicker?: (
-    options?: FilePickerOptions,
-  ) => Promise<FileSystemFileHandle>;
+    options?: FilePickerOpenOptions,
+  ) => Promise<FileSystemFileHandle[]>;
   showSaveFilePicker?: (
-    options?: FilePickerOptions,
+    options?: FilePickerSaveOptions,
   ) => Promise<FileSystemFileHandle>;
 }
+
+interface FileSystemHandlePermissionDescriptor {
+  mode?: 'read' | 'readwrite';
+}
+
+interface FileSystemHandle {
+  queryPermission?: (
+    options?: FileSystemHandlePermissionDescriptor,
+  ) => Promise<PermissionStatus>;
+
+  requestPermission?: (
+    options?: FileSystemHandlePermissionDescriptor,
+  ) => Promise<PermissionStatus>;
+}