feat: add file download and update permission

Author: rebase

src-tauri/capabilities/default.json

@@ -3,5 +3,5 @@
   "identifier": "default",
   "description": "Capability for the main window",
   "windows": ["main"],
-  "permissions": ["core:default", "opener:default", "dialog:allow-open"]
+  "permissions": ["core:default", "opener:default", "dialog:allow-open", "dialog:allow-save"]
 }

src-tauri/src/lib.rs

@@ -99,6 +99,11 @@ async fn read_file(path: String) -> Result<String, String> {
     std::fs::read_to_string(&path).map_err(|e| format!("Failed to read file '{}': {}", path, e))
 }
 
+#[tauri::command]
+async fn write_file(path: String, content: String) -> Result<(), String> {
+    std::fs::write(&path, content).map_err(|e| format!("Failed to write file '{}': {}", path, e))
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
@@ -109,7 +114,8 @@ pub fn run() {
             format_json_string,
             save_app_data,
             load_app_data,
-            read_file
+            read_file,
+            write_file
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src/App.tsx

@@ -1,11 +1,12 @@
 import Editor, { OnChange } from '@monaco-editor/react';
 import { invoke } from '@tauri-apps/api/core';
-import { open } from '@tauri-apps/plugin-dialog';
+import { open, save } from '@tauri-apps/plugin-dialog';
 import { openUrl } from '@tauri-apps/plugin-opener';
 import {
   Bug,
   Check,
   Copy,
+  Download,
   Eraser,
   FolderOpen,
   Github,
@@ -197,6 +198,42 @@ function App() {
     }
   };
 
+  const handleDownload = async () => {
+    if (!formattedString || isError) {
+      return;
+    }
+
+    try {
+      const now = new Date();
+      const timestamp = now.toISOString().slice(0, 19).replace(/:/g, '-');
+      const defaultFilename = `formatted-json-${timestamp}.json`;
+
+      const filePath = await save({
+        title: 'Save JSON File',
+        defaultPath: defaultFilename,
+        filters: [
+          {
+            name: 'JSON Files',
+            extensions: ['json'],
+          },
+          {
+            name: 'All Files',
+            extensions: ['*'],
+          },
+        ],
+      });
+
+      if (filePath) {
+        await invoke('write_file', {
+          path: filePath,
+          content: formattedString,
+        });
+      }
+    } catch (error) {
+      console.error('Failed to download:', error);
+    }
+  };
+
   const updateUndoRedoState = () => {
     if (editorRef.current) {
       const model = editorRef.current.getModel();
@@ -374,21 +411,32 @@ function App() {
               <div
                 className={`editor-header ${isDarkTheme ? 'dark-theme' : ''}`}
                 style={{ fontSize: `${fontSize}px` }}>
-                <div></div>
-                <button
-                  onClick={handleCopy}
-                  className={`copy-button ${isCopied ? 'copied' : ''} ${
-                    isDarkTheme ? 'dark-theme' : ''
-                  }`}
-                  style={{ fontSize: `${fontSize}px` }}
-                  title={isCopied ? 'Copied!' : 'Copy to Clipboard'}
-                  disabled={formattedString === ''}>
-                  {isCopied ? (
-                    <Check size={Math.max(12, fontSize * 0.8)} />
-                  ) : (
-                    <Copy size={Math.max(12, fontSize * 0.8)} />
-                  )}
-                </button>
+                <div className="editor-actions-left">
+                  <button
+                    onClick={handleCopy}
+                    className={`copy-button ${isCopied ? 'copied' : ''} ${
+                      isDarkTheme ? 'dark-theme' : ''
+                    }`}
+                    style={{ fontSize: `${fontSize}px` }}
+                    title={isCopied ? 'Copied!' : 'Copy to Clipboard'}
+                    disabled={formattedString === ''}>
+                    {isCopied ? (
+                      <Check size={Math.max(12, fontSize * 0.8)} />
+                    ) : (
+                      <Copy size={Math.max(12, fontSize * 0.8)} />
+                    )}
+                  </button>
+                </div>
+                <div className="editor-actions-right">
+                  <button
+                    onClick={handleDownload}
+                    className={`action-button ${isDarkTheme ? 'dark-theme' : ''}`}
+                    style={{ fontSize: `${fontSize}px` }}
+                    title="Download JSON"
+                    disabled={formattedString === '' || isError}>
+                    <Download size={Math.max(12, fontSize * 0.8)} />
+                  </button>
+                </div>
               </div>
               <div className={`output ${isError ? 'error' : ''}`}>
                 <Editor