Converted electron app to Typescript and ReactJS

sundai-club · Feb 20, 2025 · b4c5b4f · b4c5b4f
1 parent 7201d79
commit b4c5b4f
Show file tree

Hide file tree

Showing 17 changed files with 4,115 additions and 469 deletions.
diff --git a/electron-app/index.html b/electron-app/index.html
@@ -5,56 +5,14 @@
     <meta charset="UTF-8">
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
     <meta http-equiv="Content-Security-Policy"
-        content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
+        content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'">
     <link href="./styles.css" rel="stylesheet">
     <title>AutoTask</title>
 </head>
 
 <body>
-    <div class="sidebar">
-        <div class="logo">AutoTask</div>
-        <button class="nav-button active" data-page="recording">Recording</button>
-        <button class="nav-button" data-page="settings">Settings</button>
-    </div>
-
-    <div class="main-content">
-        <div class="page active" id="recording-page">
-            <div class="card">
-                <h2>Screen Recording</h2>
-                <p class="status">Ready to record</p>
-                <button id="startRecording" class="primary-button">Start Recording</button>
-                <button id="stopRecording" class="danger-button" style="display: none;">Stop Recording</button>
-            </div>
-
-            <div id="task-container">
-                <!-- Tasks will be dynamically added here -->
-            </div>
-
-        </div>
-
-        <div class="page" id="settings-page">
-            <div class="card">
-                <h2>Settings</h2>
-                <form id="settingsForm">
-                    <div class="form-group">
-                        <label for="apiKey">OpenAI API Key</label>
-                        <div class="input-group">
-                            <input type="password" id="apiKey" name="apiKey" placeholder="Enter your OpenAI API key">
-                            <button type="button" id="toggleApiKey" class="secondary-button"
-                                aria-label="Toggle API key visibility">
-                                <span class="eye-icon">👁️</span>
-                            </button>
-                        </div>
-                    </div>
-                    <button type="submit" class="primary-button">Save Settings</button>
-                </form>
-                <p id="settingsMessage" class="message"></p>
-            </div>
-        </div>
-    </div>
-
-    <!-- You can also require other files to run in this process -->
-    <script src="./renderer.js"></script>
+    <div id="root"></div>
+    <script src="./dist/index.js" type="module"></script>
 </body>
 
 </html>
diff --git a/electron-app/main.js b/electron-app/main.js
@@ -1,4 +1,3 @@
-// Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, Notification } = require('electron')
 const path = require('path')
 const fs = require('fs')
@@ -26,10 +25,16 @@ function createWindow() {
     webPreferences: {
       nodeIntegration: false,
       contextIsolation: true,
-      preload: path.join(__dirname, 'preload.js')
+      preload: path.join(__dirname, 'preload.js'),
+      webSecurity: true
     }
   })
 
+  // In development, watch for changes
+  if (process.env.NODE_ENV === 'development') {
+    require('electron-reload')(__dirname)
+  }
+
   // and load the index.html of the app.
   const indexPath = path.join(__dirname, 'index.html')
   console.log('Loading index.html from:', indexPath)
@@ -42,8 +47,10 @@ function createWindow() {
     console.error('Failed to load:', errorCode, errorDescription)
   })
 
-  // Open the DevTools.
-  mainWindow.webContents.openDevTools()
+  // Open the DevTools in development
+  if (process.env.NODE_ENV === 'development') {
+    mainWindow.webContents.openDevTools()
+  }
 }
 
 // This method will be called when Electron has finished