improve config panel and file saving/export/delete

main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow , ipcMain} = require('electron/main');
+const { app, BrowserWindow , ipcMain, dialog} = require('electron/main');
 const path = require('node:path');
 const Store = require('electron-store').default;
 const fs = require('fs/promises');
@@ -57,4 +57,24 @@ ipcMain.handle('file-exists', async (_, filePath) => {
 
 ipcMain.handle('get-userSavePath', () => {
   return userSavePath
-});
+});
+
+ipcMain.handle('delete-data', async (event, path) => {
+  await fs.unlink(path)
+});
+
+ipcMain.handle('export-data', async () => {
+  const dataPath = `${userSavePath}\\config.json`
+
+  const { canceled, filePath } = await dialog.showSaveDialog({
+    title: 'Export Data',
+    defaultPath: 'config.json',
+    filters: [
+      { name: 'JSON', extensions: ['json'] }
+    ]
+  })
+
+  if (canceled || !filePath) return
+
+  await fs.copyFile(dataPath, filePath)
+})

preload.js

@@ -15,5 +15,8 @@ contextBridge.exposeInMainWorld('save', {
 
 contextBridge.exposeInMainWorld('files', {
   fileExists: (path) => ipcRenderer.invoke('file-exists', path),
-  userSavePath: () => ipcRenderer.invoke('get-userSavePath')
+  userSavePath: () => ipcRenderer.invoke('get-userSavePath'),
+  delete: (path) => ipcRenderer.invoke('delete-data', path),
+  export: () => ipcRenderer.invoke('export-data'),
+  import: (data) => ipcRenderer.invoke('import-data', data)
 });

renderer/index.html

@@ -82,10 +82,17 @@
 
   <template id="settings-template">
     <h2>General settings</h2>
-    <div class="silksong-path-div">
+    <div class="horizontal-div">
       <label for="silksong-path-label">Enter Silksong path: </label>
       <input type="text" class="silksong-path-input" id="silksong-path-input" name="silksong-path-input">
-      <button class="default-button" onclick="autoDetectGamePath()">Auto Dectect</button>
+      <button class="default-button" onclick="autoDetectGamePath()">Auto Detect</button>
+    </div>
+    <br>
+    <h2>Import/Export</h2>
+    <div class="horizontal-div">
+      <button class="default-button" onclick="importData()">Import Data</button>
+      <button class="default-button" onclick="exportData()">Export Data</button>
+      <button class="important-button" onclick="deleteData()">Delete All Data</button>
     </div>
   </template>
 

renderer/renderer.js

@@ -10,9 +10,10 @@ const versionText = HomeTemplate.content.getElementById("version-text")
 
 navigate("home")
 
+let savePath
 files.userSavePath().then(path => {
-  path = `${path}\\config.json`
+  savePath = `${path}\\config.json`
-  files.fileExists(path).then(result => {
+  files.fileExists(savePath).then(result => {
     if(!result) {
       autoDetectGamePath()
     }
@@ -69,4 +70,12 @@ async function autoDetectGamePath() {
       document.getElementById("silksong-path-input").value = await save.loadSilksongPath()
     }
   }
+}
+
+async function deleteData() {
+  await files.delete(savePath)
+}
+
+async function exportData() {
+  await files.export()
 }

renderer/style.css

@@ -135,7 +135,7 @@ input[type="range"] {
   width: 100%;
 }
 
-.silksong-path-div {
+.horizontal-div {
   display: flex;
   align-items: center;
   gap: 20px;
@@ -166,19 +166,43 @@ input[type="range"] {
 }
 
 .default-button {
-  width: 40px;
+  width: 120px;
   height: 40px;
+  padding: 2px;
   background: rgba(0, 0, 0, 0.4);
   border: 1px solid #ff6b6b;
   border-radius: 4px;
   color: #eee;
   cursor: pointer;
-  text-align: left;
+  font-size: 16px;
-  font-size: 10px;
   transition: all 0.2s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .default-button:hover {
   background: rgba(255, 72, 0, 0.2);
   border-color: rgba(255, 25, 0, 0.3);
+}
+
+.important-button {
+  width: 120px;
+  height: 40px;
+  padding: 2px;
+  background: rgba(100, 0, 0, 0.4);
+  border: 1px solid rgba(200, 25, 0);
+  border-radius: 4px;
+  color: #eee;
+  cursor: pointer;
+  font-size: 16px;
+  transition: all 0.2s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.important-button:hover {
+  background: rgba(255, 0, 0, 0.4);
+  border-color: rgba(255, 25, 0, 0.8);
 }