seperate js from html

handle config save
lazy load configuration button
2025-01-07 13:15:55 +08:00 · 2025-01-07 12:12:40 +08:00 · 2025-01-07 12:01:48 +08:00 · 2025-01-07 11:58:30 +08:00
6 changed files with 522 additions and 136 deletions
--- a/main.js
+++ b/main.js
@ -1,8 +1,15 @@
 const { app, BrowserWindow, ipcMain, dialog } = require('electron');
 const path = require('path');

+let store;
 let mainWindow;

+// Initialize store using dynamic import
+(async () => {
+  const Store = await import('electron-store');
+  store = new Store.default();
+})();
+
 function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
@ -38,8 +45,21 @@ ipcMain.on('toggle-config', () => {
 });

 ipcMain.on('set-config', (event, config) => {
-  console.log('Destination Folder:', config.destFolder);
-  console.log('OneDrive Source Path:', config.onedriveSource);
+  if (store) {
+    store.set('destFolder', config.destFolder);
+    store.set('onedriveSource', config.onedriveSource);
+    console.log('Configuration saved:', config);
+  }
+});
+
+ipcMain.on('load-config', (event) => {
+  if (store) {
+    const config = {
+      destFolder: store.get('destFolder', ''),
+      onedriveSource: store.get('onedriveSource', '')
+    };
+    event.reply('config-loaded', config);
+  }
 });

 ipcMain.on('select-folder', (event) => {
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,9 @@
      "name": "onedrive_sync",
      "version": "1.0.0",
      "license": "ISC",
+      "dependencies": {
+        "electron-store": "^10.0.0"
+      },
      "devDependencies": {
        "electron": "^33.2.1"
      }
@ -112,6 +115,46 @@
        "@types/node": "*"
      }
    },
+    "node_modules/ajv": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/atomically": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/atomically/-/atomically-2.0.3.tgz",
+      "integrity": "sha512-kU6FmrwZ3Lx7/7y3hPS5QnbJfaohcIul5fGqf7ok+4KklIEk9tJ0C2IQPdacSbVUWv6zVHXEBWoWd6NrVMT7Cw==",
+      "dependencies": {
+        "stubborn-fs": "^1.2.5",
+        "when-exit": "^2.1.1"
+      }
+    },
    "node_modules/boolean": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
@ -168,6 +211,64 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/conf": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/conf/-/conf-13.1.0.tgz",
+      "integrity": "sha512-Bi6v586cy1CoTFViVO4lGTtx780lfF96fUmS1lSX6wpZf6330NvHUu6fReVuDP1de8Mg0nkZb01c8tAQdz1o3w==",
+      "dependencies": {
+        "ajv": "^8.17.1",
+        "ajv-formats": "^3.0.1",
+        "atomically": "^2.0.3",
+        "debounce-fn": "^6.0.0",
+        "dot-prop": "^9.0.0",
+        "env-paths": "^3.0.0",
+        "json-schema-typed": "^8.0.1",
+        "semver": "^7.6.3",
+        "uint8array-extras": "^1.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/conf/node_modules/env-paths": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-3.0.0.tgz",
+      "integrity": "sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/conf/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/debounce-fn": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/debounce-fn/-/debounce-fn-6.0.0.tgz",
+      "integrity": "sha512-rBMW+F2TXryBwB54Q0d8drNEI+TfoS9JpNTAoVpukbWEhjXQq4rySFYLaqXMFXwdv61Zb2OHtj5bviSoimqxRQ==",
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/debug": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@ -264,6 +365,31 @@
      "dev": true,
      "optional": true
    },
+    "node_modules/dot-prop": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-9.0.0.tgz",
+      "integrity": "sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==",
+      "dependencies": {
+        "type-fest": "^4.18.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/dot-prop/node_modules/type-fest": {
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.31.0.tgz",
+      "integrity": "sha512-yCxltHW07Nkhv/1F6wWBr8kz+5BGMfP+RbRSYFnegVb0qV/UMT0G0ElBloPVerqn4M2ZV80Ir1FtCcYv1cT6vQ==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/electron": {
      "version": "33.2.1",
      "resolved": "https://registry.npmjs.org/electron/-/electron-33.2.1.tgz",
@ -282,6 +408,32 @@
        "node": ">= 12.20.55"
      }
    },
+    "node_modules/electron-store": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/electron-store/-/electron-store-10.0.0.tgz",
+      "integrity": "sha512-BU/QZh+5twHBprRdLu3YZX/rIarmZzhTNpJvAvqG1/yN0mNCrsMh0kl7bM4xaUKDNRiHz1r7wP/7Prjh7cleIw==",
+      "dependencies": {
+        "conf": "^13.0.0",
+        "type-fest": "^4.20.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/electron-store/node_modules/type-fest": {
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.31.0.tgz",
+      "integrity": "sha512-yCxltHW07Nkhv/1F6wWBr8kz+5BGMfP+RbRSYFnegVb0qV/UMT0G0ElBloPVerqn4M2ZV80Ir1FtCcYv1cT6vQ==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/end-of-stream": {
      "version": "1.4.4",
      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@ -360,6 +512,26 @@
        "@types/yauzl": "^2.9.1"
      }
    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "node_modules/fast-uri": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.5.tgz",
+      "integrity": "sha512-5JnBCWpFlMo0a3ciDy/JckMzzv1U9coZrIhedq+HXxxUfDTAiS0LA8OKVao4G9BxmCVck/jtA5r3KAtRWEyD8Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ]
+    },
    "node_modules/fd-slicer": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@ -528,6 +700,16 @@
      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
      "dev": true
    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+    },
+    "node_modules/json-schema-typed": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/json-schema-typed/-/json-schema-typed-8.0.1.tgz",
+      "integrity": "sha512-XQmWYj2Sm4kn4WeTYvmpKEbyPsL7nBsb647c7pMe6l02/yx2+Jfc4dT6UZkEXnIUb5LhD55r2HPsJ1milQ4rDg=="
+    },
    "node_modules/json-stringify-safe": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@ -575,6 +757,17 @@
        "node": ">=10"
      }
    },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/mimic-response": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
@ -667,6 +860,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/resolve-alpn": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
@ -742,6 +943,11 @@
      "dev": true,
      "optional": true
    },
+    "node_modules/stubborn-fs": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/stubborn-fs/-/stubborn-fs-1.2.5.tgz",
+      "integrity": "sha512-H2N9c26eXjzL/S/K+i/RHHcFanE74dptvvjM8iwzwbVcWY/zjBbgRqF3K0DY4+OD+uTTASTBvDoxPDaPN02D7g=="
+    },
    "node_modules/sumchecker": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
@ -767,6 +973,17 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/uint8array-extras": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/uint8array-extras/-/uint8array-extras-1.4.0.tgz",
+      "integrity": "sha512-ZPtzy0hu4cZjv3z5NW9gfKnNLjoz4y6uv4HlelAjDK7sY/xOkKZv9xK/WQpcsBB3jEybChz9DPC2U/+cusjJVQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/undici-types": {
      "version": "6.19.8",
      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
@ -782,6 +999,11 @@
        "node": ">= 4.0.0"
      }
    },
+    "node_modules/when-exit": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/when-exit/-/when-exit-2.1.3.tgz",
+      "integrity": "sha512-uVieSTccFIr/SFQdFWN/fFaQYmV37OKtuaGphMAzi4DmmUlrvRBJW5WSLkHyjNQY/ePJMz3LoiX9R3yy1Su6Hw=="
+    },
    "node_modules/wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -12,5 +12,8 @@
  "license": "ISC",
  "devDependencies": {
    "electron": "^33.2.1"
+  },
+  "dependencies": {
+    "electron-store": "^10.0.0"
  }
 }
--- a/renderer/index.html
+++ b/renderer/index.html
@ -2,148 +2,44 @@
 <html>
 <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-  <style>
-    body {
-      margin: 0;
-      overflow-x: hidden;
-    }
-    #config-panel {
-      position: fixed;
-      width: 300px;
-      height: 100vh;
-      right: -300px;
-      top: 0;
-      background: white;
-      border-left: 1px solid #ccc;
-      padding: 20px;
-      box-sizing: border-box;
-      transition: right 0.3s ease-in-out;
-      z-index: 1000;
-    }
-    #config-panel.open {
-      right: 0;
-    }
-    #main-content {
-      width: 100vw;
-      height: 100vh;
-      border: none;
-    }
-    #config-button {
-      position: fixed;
-      top: 10px;
-      right: 180px;
-      z-index: 1000;
-      padding: 8px 16px;
-      background: transparent;
-      color: #0078d4;
-      border: 1px solid #0078d4;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      height: 32px;
-      transition: all 0.2s;
-      margin-right: 8px;
-    }
-    #config-button:hover {
-      background: #f0f8ff;
-    }
-    #config-button i {
-      font-size: 14px;
-    }
-    .close-button {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      background: none;
-      border: none;
-      font-size: 24px;
-      cursor: pointer;
-      padding: 5px 10px;
-      color: #666;
-      transition: color 0.2s;
-    }
-    .close-button:hover {
-      color: #333;
-    }
-    .panel-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 20px;
-      padding-right: 40px;
-    }
-    .close-button i {
-      font-size: 18px;
-    }
-  </style>
+  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-  <button id="config-button">
-    <i class="fas fa-cog"></i>
-    Configuration
-  </button>
  <webview id="main-content" src="https://photos.onedrive.com"></webview>
+  
  <div id="config-panel">
+    <div class="panel-header">
+      <h1>Configuration</h1>
      <button class="close-button" id="close-config">
        <i class="fas fa-arrow-right"></i>
      </button>
-    <div class="panel-header">
-      <h1>Configuration</h1>
    </div>
+    
+    <div class="panel-content">
      <form id="config-form">
-      <div>
-        <label for="dest-folder">Destination Folder for Photo Sync:</label>
-        <input type="text" id="dest-folder" name="dest-folder" readonly>
-        <button type="button" id="select-folder">Select Folder</button>
+        <div class="form-group">
+          <label for="dest-folder">Destination Folder for Photo Sync</label>
+          <div class="input-with-button">
+            <input type="text" id="dest-folder" name="dest-folder" readonly placeholder="Select a folder...">
+            <button type="button" id="select-folder">Browse</button>
          </div>
-      <div>
-        <label for="onedrive-source">OneDrive Source Path:</label>
-        <input type="text" id="onedrive-source" name="onedrive-source">
        </div>
-      <button type="submit">Save</button>
+
+        <div class="form-group">
+          <label for="onedrive-source">OneDrive Source Path</label>
+          <input 
+            type="text" 
+            id="onedrive-source" 
+            name="onedrive-source" 
+            placeholder="Enter OneDrive path..."
+          >
+        </div>
+
+        <button type="submit" class="submit-button">Save Changes</button>
      </form>
    </div>
+  </div>

-  <script>
-    const { ipcRenderer } = require('electron');
-
-    // Configuration button handler
-    document.getElementById('config-button').addEventListener('click', () => {
-      ipcRenderer.send('toggle-config');
-    });
-
-    // Configuration panel toggle
-    ipcRenderer.on('toggle-config', () => {
-      const panel = document.getElementById('config-panel');
-      panel.classList.toggle('open');
-    });
-
-    // Folder selection
-    document.getElementById('select-folder').addEventListener('click', () => {
-      ipcRenderer.send('select-folder');
-    });
-
-    ipcRenderer.on('folder-selected', (event, path) => {
-      document.getElementById('dest-folder').value = path;
-    });
-
-    // Form submission
-    document.getElementById('config-form').addEventListener('submit', (event) => {
-      event.preventDefault();
-      const destFolder = document.getElementById('dest-folder').value;
-      const onedriveSource = document.getElementById('onedrive-source').value;
-      ipcRenderer.send('set-config', { destFolder, onedriveSource });
-      // Close the panel after saving
-      document.getElementById('config-panel').classList.remove('open');
-    });
-
-    // Add close button handler
-    document.getElementById('close-config').addEventListener('click', () => {
-      document.getElementById('config-panel').classList.remove('open');
-    });
-  </script>
+  <script src="renderer.js"></script>
 </body>
 </html>
--- a/renderer/renderer.js
+++ b/renderer/renderer.js
@ -0,0 +1,57 @@
+const { ipcRenderer } = require('electron');
+
+// Wait for webview to load
+const webview = document.getElementById('main-content');
+webview.addEventListener('did-finish-load', () => {
+  // Create and add the configuration button
+  const button = document.createElement('button');
+  button.id = 'config-button';
+  button.innerHTML = '<i class="fas fa-cog"></i> Configuration';
+  document.body.appendChild(button);
+
+  // Add click handler to the dynamically created button
+  button.addEventListener('click', () => {
+    ipcRenderer.send('toggle-config');
+  });
+});
+
+// Configuration panel toggle
+ipcRenderer.on('toggle-config', () => {
+  const panel = document.getElementById('config-panel');
+  panel.classList.toggle('open');
+  
+  // Load saved config when panel opens
+  if (panel.classList.contains('open')) {
+    ipcRenderer.send('load-config');
+  }
+});
+
+// Folder selection
+document.getElementById('select-folder').addEventListener('click', () => {
+  ipcRenderer.send('select-folder');
+});
+
+ipcRenderer.on('folder-selected', (event, path) => {
+  document.getElementById('dest-folder').value = path;
+});
+
+// Form submission
+document.getElementById('config-form').addEventListener('submit', (event) => {
+  event.preventDefault();
+  const destFolder = document.getElementById('dest-folder').value;
+  const onedriveSource = document.getElementById('onedrive-source').value;
+  ipcRenderer.send('set-config', { destFolder, onedriveSource });
+  // Close the panel after saving
+  document.getElementById('config-panel').classList.remove('open');
+});
+
+// Close button handler
+document.getElementById('close-config').addEventListener('click', () => {
+  document.getElementById('config-panel').classList.remove('open');
+});
+
+// Config loaded handler
+ipcRenderer.on('config-loaded', (event, config) => {
+  document.getElementById('dest-folder').value = config.destFolder;
+  document.getElementById('onedrive-source').value = config.onedriveSource;
+}); 
--- a/renderer/styles.css
+++ b/renderer/styles.css
@ -0,0 +1,188 @@
+body {
+  margin: 0;
+  overflow-x: hidden;
+}
+
+#main-content {
+  width: 100vw;
+  height: 100vh;
+  border: none;
+}
+
+/* Configuration Button */
+#config-button {
+  position: fixed;
+  top: 10px;
+  right: 180px;
+  z-index: 999;
+  padding: 8px 16px;
+  background: transparent;
+  color: #0078d4;
+  border: 1px solid #0078d4;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  transition: all 0.2s;
+  margin-right: 8px;
+}
+
+#config-button:hover {
+  background: #f0f8ff;
+}
+
+#config-button i {
+  font-size: 14px;
+}
+
+/* Configuration Panel */
+#config-panel {
+  position: fixed;
+  width: 360px;
+  height: 100vh;
+  right: -360px;
+  top: 0;
+  background: #fff;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  padding: 0;
+  box-sizing: border-box;
+  transition: right 0.3s ease-in-out;
+  z-index: 1001;
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+
+#config-panel.open {
+  right: 0;
+}
+
+/* Panel Header */
+.panel-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid #e5e5e5;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.panel-header h1 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  margin: 0;
+}
+
+.close-button {
+  position: absolute;
+  top: 12px;
+  right: 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  color: #666;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.close-button i {
+  font-size: 18px;
+}
+
+.close-button:hover {
+  background: #f5f5f5;
+  color: #0078d4;
+  transform: translateX(2px);
+}
+
+.close-button:active {
+  transform: translateX(4px);
+}
+
+/* Panel Content */
+.panel-content {
+  padding: 24px;
+}
+
+#config-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* Form Elements */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.form-group input {
+  padding: 8px 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: border-color 0.2s;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.input-with-button {
+  display: flex;
+  gap: 8px;
+}
+
+.input-with-button input {
+  flex: 1;
+}
+
+#select-folder {
+  padding: 8px 16px;
+  background: #f5f5f5;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #333;
+  transition: all 0.2s;
+}
+
+#select-folder:hover {
+  background: #e5e5e5;
+}
+
+/* Submit Button */
+.submit-button {
+  background: #0078d4;
+  color: white;
+  border: none;
+  padding: 10px 24px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+  margin-top: 16px;
+}
+
+.submit-button:hover {
+  background: #106ebe;
+}
+
+.submit-button:active {
+  background: #005a9e;
+}
Author	SHA1	Message	Date
Tiger Ren	b9248eecb9	seperate js from html	2025-01-07 13:15:55 +08:00
Tiger Ren	11b95dfde5	handle config save	2025-01-07 12:12:40 +08:00
Tiger Ren	5ae99d4b74	lazy load configuration button	2025-01-07 12:01:48 +08:00
Tiger Ren	c78f56e2f5	seperate css file, and better look for config panel	2025-01-07 11:58:30 +08:00