seperate js from html

renderer/index.html

@@ -40,64 +40,6 @@
     </div>
   </div>
 
-  <script>
+  <script src="renderer.js"></script>
-    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');
-    });
-
-    // Add handler for loaded config
-    ipcRenderer.on('config-loaded', (event, config) => {
-      document.getElementById('dest-folder').value = config.destFolder;
-      document.getElementById('onedrive-source').value = config.onedriveSource;
-    });
-  </script>
 </body>
 </html>

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;
+});