Add save file dialog for desktop

Author: Shellishack

components/nav-menu.tsx

@@ -8,6 +8,7 @@ import { ViewTypeEnum } from "@/lib/views/available-views";
 import { ViewDocument } from "@/lib/types";
 import { View } from "@/lib/views/view";
 import { ViewManager } from "@/lib/views/view-manager";
+import toast from "react-hot-toast";
 
 function MenuPanel({ children }: { children?: React.ReactNode }) {
   const isDesktop = useMediaQuery({
@@ -64,7 +65,13 @@ export default function NavMenu({
   isMenuOpen: boolean;
   setIsMenuOpen: (isOpen: boolean) => void;
 }) {
-  const { projectPath, openFile } = useFileSystem();
+  const {
+    projectPath,
+    showOpenFileDialog,
+    showSaveFileDialog,
+    openFile,
+    writeFile,
+  } = useFileSystem();
 
   const editorContext = useContext(EditorContext);
 
@@ -112,13 +119,14 @@ export default function NavMenu({
                   <Button
                     className="w-40"
                     onPress={() => {
-                      openFile().then((file) => {
-                        console.log(file);
-                        file?.text().then((text) => {
+                      showOpenFileDialog().then((files) => {
+                        console.log(files);
+                        const firstFile = files[0];
+                        firstFile?.text().then((text) => {
                           console.log("File content:\n" + text);
                           const viewDocument: ViewDocument = {
                             fileContent: text,
-                            filePath: file.name,
+                            filePath: firstFile.name,
                           };
                           openDocumentInView(viewDocument);
                         });
@@ -127,7 +135,28 @@ export default function NavMenu({
                   >
                     Open File
                   </Button>
-                  <Button className="w-40">Save File</Button>
+                  <Button
+                    className="w-40"
+                    onPress={() => {
+                      const viewDocument =
+                        editorContext?.viewManager?.getActiveView()
+                          ?.viewDocument;
+                      if (viewDocument) {
+                        showSaveFileDialog().then((filePath) => {
+                          if (filePath) {
+                            writeFile(
+                              new File([viewDocument.fileContent], filePath),
+                              filePath,
+                            ).then(() => {
+                              toast.success("File saved successfully");
+                            });
+                          }
+                        });
+                      }
+                    }}
+                  >
+                    Save File
+                  </Button>
                 </div>
               )}
             </div>

desktop/main.mjs

@@ -27,7 +27,7 @@ const createWindow = () => {
       color: "#00000000",
       symbolColor: "#74b1be",
     },
-    icon: path.join(__dirname, "../public/icons/electron/pulse_logo_round")
+    icon: path.join(__dirname, "../public/icons/electron/pulse_logo_round"),
   });
 
   win.menuBarVisible = false;
@@ -57,27 +57,42 @@ function handleSetTitle(event, title) {
   return title[0];
 }
 
-async function handleOpenFilePicker(event, isFolder) {
+async function handleShowOpenFileDialog(event, config) {
   const { canceled, filePaths } = await dialog.showOpenDialog({
-    properties: isFolder ? ["openDirectory"] : ["openFile"],
+    properties: config?.isFolder ? ["openDirectory"] : ["openFile"],
   });
   if (!canceled) {
     return filePaths;
   }
 }
 
+async function handleShowSaveFileDialog(event, config) {
+  const { canceled, filePath } = await dialog.showSaveDialog({});
+  if (!canceled) {
+    return filePath;
+  }
+  return undefined;
+}
+
 async function handleReadFile(event, path) {
   // Read the file at path
   const data = await fs.promises.readFile(path, "utf-8");
 
   return data;
 }
 
+async function handleWriteFile(event, data, path) {
+  // Write the data at path
+  await fs.promises.writeFile(path, data);
+}
+
 app.whenReady().then(() => {
   nativeTheme.themeSource = "light";
 
-  ipcMain.handle("open-file-picker", handleOpenFilePicker);
+  ipcMain.handle("show-open-file-dialog", handleShowOpenFileDialog);
+  ipcMain.handle("show-save-file-dialog", handleShowSaveFileDialog);
   ipcMain.handle("read-file", handleReadFile);
+  ipcMain.handle("write-file", handleWriteFile);
   createWindow();
 });
 

desktop/preload.mjs

@@ -1,7 +1,10 @@
 const { contextBridge, ipcRenderer } = require("electron");
 
 contextBridge.exposeInMainWorld("electronAPI", {
-  openFilePicker: (isFolder) =>
-    ipcRenderer.invoke("open-file-picker", isFolder),
+  showOpenFileDialog: (config) =>
+    ipcRenderer.invoke("show-open-file-dialog", config),
+  showSaveFileDialog: (config) =>
+    ipcRenderer.invoke("show-save-file-dialog", config),
   readFile: (path) => ipcRenderer.invoke("read-file", path),
+  writeFile: (data, path) => ipcRenderer.invoke("write-file", data, path),
 });

lib/hooks/use-file-system.ts

@@ -1,7 +1,11 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { Folder } from "@/lib/types";
+import {
+  OpenFileDialogConfig,
+  Folder,
+  SaveFileDialogConfig,
+} from "@/lib/types";
 import { getPlatform } from "../platform-api/platform-checker";
 import { PlatformEnum } from "../platform-api/available-platforms";
 import { CapacitorAPI } from "../platform-api/capacitor/capacitor-api";
@@ -30,12 +34,32 @@ export function useFileSystem() {
     }
   }, []);
 
-  async function openFolder(): Promise<Folder | undefined> {
+  async function showOpenFileDialog(
+    config?: OpenFileDialogConfig,
+  ): Promise<File[]> {
     if (platformApi.current === undefined) {
       throw new Error("Platform API not initialized");
     }
 
-    return await platformApi.current.openFolder();
+    return await platformApi.current.showOpenFileDialog(config);
+  }
+
+  async function showSaveFileDialog(
+    config?: SaveFileDialogConfig,
+  ): Promise<string | undefined> {
+    if (platformApi.current === undefined) {
+      throw new Error("Platform API not initialized");
+    }
+
+    return await platformApi.current.showSaveFileDialog(config);
+  }
+
+  async function openFolder(uri: string): Promise<Folder | undefined> {
+    if (platformApi.current === undefined) {
+      throw new Error("Platform API not initialized");
+    }
+
+    return await platformApi.current.openFolder(uri);
   }
 
   async function saveFolder(folder: Folder, uriPrefix: string) {
@@ -46,12 +70,12 @@ export function useFileSystem() {
     platformApi.current.saveFolder(folder, uriPrefix);
   }
 
-  async function openFile(): Promise<File | undefined> {
+  async function openFile(uri: string): Promise<File | undefined> {
     if (platformApi.current === undefined) {
       throw new Error("Platform API not initialized");
     }
 
-    return platformApi.current.openFile();
+    return platformApi.current.openFile(uri);
   }
 
   async function writeFile(file: File, uri: string) {
@@ -64,6 +88,8 @@ export function useFileSystem() {
 
   return {
     projectPath,
+    showOpenFileDialog,
+    showSaveFileDialog,
     openFolder,
     saveFolder,
     openFile,

lib/platform-api/abstract-platform-api.ts

@@ -1,8 +1,12 @@
-import { Folder } from "../types";
+import { OpenFileDialogConfig, Folder, SaveFileDialogConfig } from "../types";
 
 export abstract class AbstractPlatformAPI {
-  abstract openFolder(): Promise<Folder | undefined>;
+  // Dialogs
+  abstract showOpenFileDialog(config?: OpenFileDialogConfig): Promise<File[]>;
+  abstract showSaveFileDialog(config?: SaveFileDialogConfig): Promise<string | undefined>;
+
+  abstract openFolder(uri: string): Promise<Folder | undefined>;
   abstract saveFolder(folder: Folder, uriPrefix: string): Promise<void>;
-  abstract openFile(): Promise<File | undefined>;
+  abstract openFile(uri: string): Promise<File | undefined>;
   abstract writeFile(file: File, uri: string): Promise<void>;
 }

lib/platform-api/capacitor/capacitor-api.ts

@@ -1,4 +1,8 @@
-import { Folder } from "@/lib/types";
+import {
+  OpenFileDialogConfig as OpenFileDialogConfig,
+  Folder,
+  SaveFileDialogConfig,
+} from "@/lib/types";
 import { AbstractPlatformAPI } from "../abstract-platform-api";
 import { Filesystem } from "@capacitor/filesystem";
 
@@ -7,24 +11,7 @@ export class CapacitorAPI extends AbstractPlatformAPI {
     super();
   }
 
-  async openFolder(): Promise<Folder | undefined> {
-    throw new Error("Method not implemented.");
-  }
-  async saveFolder(folder: Folder, uriPrefix: string): Promise<void> {
-    throw new Error("Method not implemented.");
-  }
-  async openFile(): Promise<File | undefined> {
-    const files = await this.openFilePicker();
-    if (files.length === 0) {
-      return undefined;
-    }
-    return files[0];
-  }
-  async writeFile(file: File, uri: string): Promise<void> {
-    throw new Error("Method not implemented.");
-  }
-
-  private async openFilePicker(): Promise<File[]> {
+  async showOpenFileDialog(config?: OpenFileDialogConfig): Promise<File[]> {
     const hasPermission = await Filesystem.requestPermissions();
     if (hasPermission.publicStorage !== "granted") {
       return [];
@@ -50,4 +37,23 @@ export class CapacitorAPI extends AbstractPlatformAPI {
       fileInput.click();
     });
   }
+
+  async showSaveFileDialog(
+    config?: SaveFileDialogConfig,
+  ): Promise<string | undefined> {
+    throw new Error("Method not implemented.");
+  }
+
+  async openFolder(uri: string): Promise<Folder | undefined> {
+    throw new Error("Method not implemented.");
+  }
+  async saveFolder(folder: Folder, uriPrefix: string): Promise<void> {
+    throw new Error("Method not implemented.");
+  }
+  async openFile(uri: string): Promise<File | undefined> {
+    throw new Error("Method not implemented.");
+  }
+  async writeFile(file: File, uri: string): Promise<void> {
+    throw new Error("Method not implemented.");
+  }
 }

lib/platform-api/electron/electron-api.ts

@@ -1,4 +1,4 @@
-import { Folder } from "@/lib/types";
+import { OpenFileDialogConfig, Folder, SaveFileDialogConfig } from "@/lib/types";
 import { AbstractPlatformAPI } from "../abstract-platform-api";
 
 export class ElectronAPI extends AbstractPlatformAPI {
@@ -9,29 +9,39 @@ export class ElectronAPI extends AbstractPlatformAPI {
     this.electronAPI = window.electronAPI;
   }
 
-  async openFolder(): Promise<Folder | undefined> {
+  async showOpenFileDialog(config?: OpenFileDialogConfig): Promise<File[]> {
+    // Open a file dialogue and return the selected folder
+    const paths: string[] = await this.electronAPI.showOpenFileDialog(config);
+
+    const files = [];
+    for (const path of paths) {
+      const data: string = await this.electronAPI.readFile(path);
+      const file = new File([data], path);
+      files.push(file);
+    }
+
+    return files;
+  }
+
+  async showSaveFileDialog(
+    config?: SaveFileDialogConfig,
+  ): Promise<string | undefined> {
+    return await this.electronAPI.showSaveFileDialog(config);
+  }
+
+  async openFolder(uri: string): Promise<Folder | undefined> {
     throw new Error("Method not implemented.");
   }
   async saveFolder(folder: Folder, uriPrefix: string): Promise<void> {
     throw new Error("Method not implemented.");
   }
-  async openFile(): Promise<File | undefined> {
-    const paths = await this.openFilePicker(false);
-    if (paths.length === 0){
-      return undefined;
-    }
-    const uri = paths[0];
+  async openFile(uri: string): Promise<File | undefined> {
     const data: string = await this.electronAPI.readFile(uri);
     const file = new File([data], uri);
     return file;
   }
   async writeFile(file: File, uri: string): Promise<void> {
-    throw new Error("Method not implemented.");
-  }
-
-  private async openFilePicker(isFolder: boolean): Promise<string[]> {
-    // Open a file dialogue and return the selected folder
-    const paths: string[] = await this.electronAPI.openFilePicker(isFolder);
-    return paths;
+    const data = await file.text();
+    await this.electronAPI.writeFile(data, uri);
   }
 }