added modal and post init actions

Author: jasir99

package-lock.json

@@ -106,10 +106,12 @@
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.8",
     "electron-updater": "^6.1.4",
+    "js-yaml": "^4.1.0",
     "react": "^18.2.0",
     "react-ace": "^13.0.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",
+    "react-toastify": "^11.0.3",
     "react-tooltip": "^5.28.0"
   },
   "devDependencies": {
@@ -120,6 +122,7 @@
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.5",
+    "@types/js-yaml": "^4.0.9",
     "@types/node": "20.6.2",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",

package.json

@@ -14,7 +14,7 @@ const registerCliHandlers = (mainWindow: BrowserWindow) => {
   ipcMain.removeAllListeners('cli:error');
   ipcMain.removeAllListeners('cli:done');
 
-  ipcMain.handle('cli:run', async (_event, args: string[]) => {
+  ipcMain.handle('cli:run', async (_event, args: string) => {
     try {
       await cliService.runCommand(mainWindow, args);
       return { success: true };

src/main/ipcHandlers/cli.ipcHandlers.ts

@@ -1,6 +1,5 @@
 import { spawn, ChildProcessWithoutNullStreams } from 'child_process';
 import { BrowserWindow } from 'electron';
-import path from 'path';
 import SettingsService from './settings.service';
 
 export default class CliService {
@@ -26,22 +25,14 @@ export default class CliService {
     };
   }
 
-  runCommand(mainWindow: BrowserWindow, args: string[]) {
-    if (args.length !== 2) {
-      throw new Error('Invalid number of arguments');
-    }
-    args[1] = path.join(
-      SettingsService.loadSettings().projectsDirectory,
-      args[1],
-    );
-
+  runCommand(mainWindow: BrowserWindow, args: string) {
     return new Promise<void>((resolve, reject) => {
       if (this.process) {
         reject(new Error('A command is already running. Please wait.'));
         return;
       }
 
-      this.process = spawn(this.cliPath, args, { shell: true });
+      this.process = spawn(args, { shell: true });
 
       this.process.stdout.on('data', (data) => {
         mainWindow.webContents.send('cli:output', '', data.toString());

src/main/services/cli.service.ts

@@ -39,32 +39,6 @@ button:enabled:hover {
   opacity: 1;
 }
 
-input {
-  background-color: white;
-  padding: 10px 20px;
-  border-radius: 10px;
-  border: 1px solid rgba(24, 39, 75, 0.2);
-  font-size: 1.3rem;
-  box-shadow: 0 4px 16px -4px rgba(24, 39, 75, 0.08),
-  0 8px 32px -4px rgba(24, 39, 75, 0.1);
-  transition: all ease-in 0.15s;
-  outline: none;
-  max-width: calc(100% - 40px);
-  opacity: 0.9;
-
-  &:focus {
-    border-color: rgba(24, 39, 75, 0.4);
-    box-shadow: 0 6px 24px -4px rgba(24, 39, 75, 0.12),
-    0 12px 48px -4px rgba(24, 39, 75, 0.14);
-    opacity: 1;
-  }
-
-  &::placeholder {
-    color: rgba(24, 39, 75, 0.5);
-  }
-}
-
-
 li {
   list-style: none;
 }
@@ -81,17 +55,31 @@ a:hover {
   text-decoration: none;
 }
 
+input,
 select {
   background-color: white;
   padding: 10px 20px;
-  border-radius: 10px;
-  border: none;
-  appearance: none;
-  font-size: 1.3rem;
+  border-radius: 6px;
+  border: 1px solid rgba(24, 39, 75, 0.2);
+  font-size: 1rem;
   box-shadow: 0 8px 28px -6px rgba(24, 39, 75, 0.12),
     0 18px 88px -4px rgba(24, 39, 75, 0.14);
   transition: all ease-in 0.1s;
   opacity: 0.9;
+}
+
+input:focus,
+select:focus {
+  border-color: #007bff;
+  outline: none;
+}
+
+input {
+  max-width: calc(100% - 40px);
+}
+
+select {
+  padding: 13px 10px 13px 10px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath fill='%23000' d='M0 0L5 5L10 0H0Z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 10px center;

src/renderer/App.css

@@ -5,6 +5,7 @@ import {
   Route,
   Navigate,
 } from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
 import './App.css';
 import { AddProject, ProjectDetails, Settings, SetupProject } from './screens';
 import { AppLayout } from './layouts';
@@ -30,6 +31,17 @@ const AppWithProjectProvider: React.FC = () => {
   return (
     <AppProvider>
       <App />
+      <ToastContainer
+        position="bottom-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick={false}
+        rtl={false}
+        pauseOnFocusLoss
+        pauseOnHover
+        theme="dark"
+      />
     </AppProvider>
   );
 };

src/renderer/App.tsx

@@ -4,3 +4,4 @@ export * from './menu';
 export * from './treeViewer';
 export * from './editor';
 export * from './customToolTip';
+export * from './modals';

src/renderer/components/index.ts

@@ -0,0 +1,58 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0;
+}
+
+.formGroup {
+  margin-bottom: 15px;
+
+  input {
+    width: 326px;
+  }
+  select {
+    width: 400px;
+  }
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.formActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.saveButton {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  background-color: #007bff;
+  color: white;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.saveButton:hover {
+  background-color: #0056b3;
+}
+
+.cancelButton {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  background-color: #6c757d;
+  color: white;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.cancelButton:hover {
+  background-color: #5a6268;
+}