HeaderMaker v1.0.3

• Added toast notifications for errors and success messages
• Various small updates

Updated by: Pavlo Mytrovtsiy (Bump_Er)

Author: NewBumpEr

.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 release-builds/
 test/
+idea/
 
 .DS_Store
 Thumbs.db

.idea/workspace.xml

@@ -14,10 +14,6 @@ body, html {
 .container {
     max-width: 1000px;
     width: 100%;
-    padding: 20px;
-    background-color: white;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -220,6 +216,7 @@ textarea {
     align-items: flex-start;
     margin: 20px 0;
     width: 48%;
+    margin-bottom: 1px;
 }
 
 .button-row {
@@ -248,15 +245,13 @@ textarea {
 #status_successfully {
     display: flex;
     justify-content: center;
-    margin-top: 20px;
     color: #28a745;
     font-weight: bold;
 }
 
 #status_error {
     display: flex;
     justify-content: center;
-    margin-top: 20px;
     color: #a72828;
     font-weight: bold;
 }
@@ -390,7 +385,7 @@ textarea {
 }
 
 .template-item {
-    background-color: #b8d1f3; /*Background Color for Item */
+    background-color: #b8d1f3; /*Background Color for Items */
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     overflow: hidden;
@@ -475,3 +470,37 @@ textarea {
 .version{
     margin-top: -20px;
 }
+
+#toast-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.toast {
+    background-color: #333;
+    color: #fff;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.5s, transform 0.5s;
+}
+
+.toast.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.toast.success {
+    background-color: #4caf50;
+}
+
+.toast.error {
+    background-color: #f44336;
+}

app/pages/index.css

@@ -14,7 +14,7 @@
     </div>
 
     <h1>HeaderMaker</h1>
-    <h2 class="version">v1.0.2</h2>
+    <h2 class="version">v1.0.3</h2>
 
     <button id="select-directory" class="button_select-folder">Select Folder</button>
 
@@ -66,8 +66,7 @@ <h2>View</h2>
         </div>
       </div>
 
-      <div id="status_successfully"></div>
-      <div id="status_error"></div>
+      <div id="toast-container"></div>
     </div>
   </div>
 
@@ -210,10 +209,9 @@ <h2>Select a Template</h2>
   </div>
 </div>
 
-
 <div id="info-modal" class="modal">
   <div class="modal-content">
-    <h2>How to Remove a Header</h2>
+    <h2>How to remove a Header</h2>
     <p>
       To remove a header from your files, enter the exact header text you want to delete into the <strong>Enter
       Header</strong> field.
@@ -230,7 +228,7 @@ <h2>How to Remove a Header</h2>
 
 <div id="help-modal" class="modal">
   <div class="modal-content">
-    <h2>How to Use HeaderMaker</h2>
+    <h2>How to use HeaderMaker</h2>
     <p>
       Welcome to <strong>HeaderMaker</strong>, your go-to tool for adding custom headers to your files with ease. Follow
       these steps to get started:

app/pages/index.html

@@ -45,7 +45,6 @@ document.getElementById('select-directory').addEventListener('click', async () =
     window.selectedDirectoryPath = directoryPath;
 
     document.getElementById('header-options').style.display = 'block';
-
     document.getElementById('select-directory').style.display = 'none';
   }
 });
@@ -56,26 +55,21 @@ document.getElementById('add-headers').addEventListener('click', async () => {
   const directoryPath = window.selectedDirectoryPath;
 
   if (!directoryPath) {
-    document.getElementById('status_error').textContent = 'Please select a folder before adding headers.';
+    showToast('error', 'Please select a folder before adding headers.');
     return;
   }
 
   if (!header) {
-    document.getElementById('status_error').textContent = 'Please enter a header!';
+    showToast('error', 'Please enter a header!');
     return;
   }
   if (fileTypes.length === 0) {
-    document.getElementById('status_error').textContent = 'Please select at least one file type!';
+    showToast('error', 'Please select at least one file type!');
     return;
   }
 
   await window.electron.addHeaders(directoryPath, header, fileTypes);
-  document.getElementById('status_successfully').textContent = 'Headers added successfully!';
-  document.getElementById('status_error').textContent = '';
-
-  setTimeout(() => {
-    document.getElementById('status_successfully').textContent = '';
-  }, 3000);
+  showToast('success', 'Headers added successfully!');
 });
 
 document.getElementById('remove-headers').addEventListener('click', async () => {
@@ -84,26 +78,21 @@ document.getElementById('remove-headers').addEventListener('click', async () =>
   const directoryPath = window.selectedDirectoryPath;
 
   if (!directoryPath) {
-    document.getElementById('status_error').textContent = 'Please select a folder before removing headers.';
+    showToast('error', 'Please select a folder before removing headers.');
     return;
   }
 
   if (!header) {
-    document.getElementById('status_error').textContent = 'Please enter a header!';
+    showToast('error', 'Please enter a header!');
     return;
   }
   if (fileTypes.length === 0) {
-    document.getElementById('status_error').textContent = 'Please select at least one file type!';
+    showToast('error', 'Please select at least one file type!');
     return;
   }
 
   await window.electron.removeHeaders(directoryPath, header, fileTypes);
-  document.getElementById('status_successfully').textContent = 'Headers removed successfully!';
-  document.getElementById('status_error').textContent = '';
-
-  setTimeout(() => {
-    document.getElementById('status_successfully').textContent = '';
-  }, 3000);
+  showToast('success', 'Headers removed successfully!');
 });
 
 document.getElementById('back-to-menu').addEventListener('click', () => {
@@ -119,9 +108,6 @@ document.getElementById('back-to-menu').addEventListener('click', () => {
   document.getElementById('file-types').querySelectorAll('input[type=checkbox]').forEach(checkbox => {
     checkbox.checked = false;
   });
-
-  document.getElementById('status_successfully').textContent = '';
-  document.getElementById('status_error').textContent = '';
 });
 
 function updateHeaderPreview() {
@@ -219,3 +205,24 @@ document.addEventListener('DOMContentLoaded', function () {
     updateHeaderPreview();
   }
 });
+
+function showToast(type, message) {
+  const toastContainer = document.getElementById('toast-container');
+
+  const toast = document.createElement('div');
+  toast.className = `toast ${type}`;
+  toast.innerText = message;
+
+  toastContainer.appendChild(toast);
+
+  requestAnimationFrame(() => {
+    toast.classList.add('show');
+  });
+
+  setTimeout(() => {
+    toast.classList.remove('show');
+    setTimeout(() => {
+      toastContainer.removeChild(toast);
+    }, 500);
+  }, 3000);
+}

app/pages/index.js

@@ -1,16 +1,20 @@
 const { FusesPlugin } = require('@electron-forge/plugin-fuses');
 const { FuseV1Options, FuseVersion } = require('@electron/fuses');
+const path = require('path');
+const iconPath = path.resolve(__dirname, 'app/assets/icon/icon.ico');
 
 module.exports = {
   packagerConfig: {
     asar: true,
-    icon: 'app/assets/icon/icon.ico',
+    icon: iconPath,
   },
   rebuildConfig: {},
   makers: [
     {
       name: '@electron-forge/maker-squirrel',
-      config: {},
+      config: {
+        icon: iconPath,
+      },
     },
     {
       name: '@electron-forge/maker-zip',
@@ -30,8 +34,6 @@ module.exports = {
       name: '@electron-forge/plugin-auto-unpack-natives',
       config: {},
     },
-    // Fuses are used to enable/disable various Electron functionality
-    // at package time, before code signing the application
     new FusesPlugin({
       version: FuseVersion.V1,
       [FuseV1Options.RunAsNode]: false,