fix(webui): add a packaged favicon

Author: GhostTypes

scripts/copy-webui-assets.js

@@ -13,7 +13,7 @@ const path = require('path');
 // Configuration
 const srcDir = 'src/webui/static';
 const destDir = 'dist/webui/static';
-const filesToCopy = ['index.html', 'webui.css', 'gridstack-extra.min.css'];
+const filesToCopy = ['index.html', 'webui.css', 'gridstack-extra.min.css', 'favicon.png'];
 
 // Vendor library to copy from node_modules
 const vendorLibraries = [

src/webui/static/favicon.png

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="theme-color" content="#1e1e1e">
   <title>FlashForge Web UI</title>
+  <link rel="icon" type="image/png" href="/favicon.png">
   <link rel="stylesheet" href="gridstack.min.css">
   <link rel="stylesheet" href="gridstack-extra.min.css">
   <link rel="stylesheet" href="webui.css">
@@ -24,7 +25,7 @@ <h1>FlashForge Web UI</h1>
               <span>Remember me</span>
             </label>
           </div>
-          <button id="login-button">Login</button>
+          <button id="login-button" type="button">Login</button>
         </div>
         <div id="login-error" class="login-error"></div>
       </div>
@@ -47,13 +48,14 @@ <h1>FlashForge Web UI</h1>
           </div>
         </div>
         <div class="header-right">
-          <button id="edit-mode-toggle" class="edit-mode-toggle" aria-pressed="false">
+          <button id="edit-mode-toggle" class="edit-mode-toggle" aria-pressed="false" type="button">
             <i id="edit-mode-lock-icon" class="lock-icon" data-lucide="lock" aria-hidden="true"></i>
             <span class="edit-text">Locked</span>
           </button>
           <button
             id="settings-button"
             class="settings-button"
+            type="button"
             aria-haspopup="dialog"
             aria-controls="settings-modal"
             title="WebUI Settings"
@@ -64,7 +66,7 @@ <h1>FlashForge Web UI</h1>
             <span class="connection-indicator" id="connection-indicator"></span>
             <span id="connection-text">Disconnected</span>
           </div>
-          <button id="logout-button" class="logout-button">Logout</button>
+          <button id="logout-button" class="logout-button" type="button">Logout</button>
         </div>
       </div>
 
@@ -86,7 +88,7 @@ <h1>FlashForge Web UI</h1>
         <div class="modal-content large">
           <div class="modal-header">
             <h2 id="settings-modal-title">WebUI Settings</h2>
-            <button id="close-settings" class="close-btn" aria-label="Close settings">&times;</button>
+            <button id="close-settings" class="close-btn" aria-label="Close settings" type="button">&times;</button>
           </div>
           <div class="modal-body">
             <section class="settings-section">
@@ -135,17 +137,17 @@ <h3>Theme Colors</h3>
                 </label>
               </div>
               <div class="theme-buttons">
-                <button id="apply-webui-theme-btn" class="primary-btn">Apply Theme</button>
-                <button id="reset-webui-theme-btn" class="secondary-btn">Reset to Default</button>
+                <button id="apply-webui-theme-btn" class="primary-btn" type="button">Apply Theme</button>
+                <button id="reset-webui-theme-btn" class="secondary-btn" type="button">Reset to Default</button>
               </div>
             </section>
             <section class="settings-section">
               <h3>Reset</h3>
-              <button id="reset-layout-btn" class="secondary-btn">Reset Layout to Default</button>
+              <button id="reset-layout-btn" class="secondary-btn" type="button">Reset Layout to Default</button>
             </section>
           </div>
           <div class="modal-footer">
-            <button id="save-settings-btn" class="primary-btn">Save</button>
+            <button id="save-settings-btn" class="primary-btn" type="button">Save</button>
           </div>
         </div>
       </div>
@@ -155,7 +157,7 @@ <h3>Reset</h3>
         <div class="modal-content">
           <div class="modal-header">
             <h2 id="modal-title">Select File</h2>
-            <button id="close-modal" class="close-btn">&times;</button>
+            <button id="close-modal" class="close-btn" type="button">&times;</button>
           </div>
           <div class="modal-body">
             <div id="file-list" class="file-list"></div>
@@ -169,7 +171,7 @@ <h2 id="modal-title">Select File</h2>
               <input type="checkbox" id="start-now" checked>
               <span>Start Now</span>
             </label>
-            <button id="print-file-btn" class="primary-btn" disabled>Print</button>
+            <button id="print-file-btn" class="primary-btn" type="button" disabled>Print</button>
           </div>
         </div>
       </div>
@@ -179,7 +181,7 @@ <h2 id="modal-title">Select File</h2>
         <div class="modal-content material-matching">
           <div class="modal-header">
             <h2 id="material-matching-title">Match Materials</h2>
-            <button id="material-matching-close" class="close-btn" aria-label="Close material matching">&times;</button>
+            <button id="material-matching-close" class="close-btn" aria-label="Close material matching" type="button">&times;</button>
           </div>
           <div class="modal-body">
             <p class="material-matching-description">
@@ -214,7 +216,7 @@ <h3>Current Mappings</h3>
         <div class="modal-content">
           <div class="modal-header">
             <h2 id="spoolman-modal-title">Select Spool</h2>
-            <button id="spoolman-modal-close" class="close-btn" aria-label="Close spool selection">&times;</button>
+            <button id="spoolman-modal-close" class="close-btn" aria-label="Close spool selection" type="button">&times;</button>
           </div>
           <div class="modal-body">
             <input
@@ -242,15 +244,15 @@ <h2 id="spoolman-modal-title">Select Spool</h2>
         <div class="modal-content small">
           <div class="modal-header">
             <h2 id="temp-dialog-title">Set Temperature</h2>
-            <button id="close-temp-dialog" class="close-btn">&times;</button>
+            <button id="close-temp-dialog" class="close-btn" type="button">&times;</button>
           </div>
           <div class="modal-body">
             <p id="temp-dialog-message">Enter temperature (°C):</p>
             <input type="number" id="temp-input" min="0" max="300" step="5" value="0">
           </div>
           <div class="modal-footer">
-            <button id="temp-cancel" class="secondary-btn">Cancel</button>
-            <button id="temp-confirm" class="primary-btn">Set</button>
+            <button id="temp-cancel" class="secondary-btn" type="button">Cancel</button>
+            <button id="temp-confirm" class="primary-btn" type="button">Set</button>
           </div>
         </div>
       </div>
@@ -260,17 +262,17 @@ <h2 id="temp-dialog-title">Set Temperature</h2>
         <div class="modal-content large">
           <div class="modal-header">
             <h2 id="discovery-modal-title">Add Printer</h2>
-            <button id="close-discovery" class="close-btn" aria-label="Close discovery">&times;</button>
+            <button id="close-discovery" class="close-btn" aria-label="Close discovery" type="button">&times;</button>
           </div>
           <div class="modal-body">
             <div class="discovery-tabs">
-              <button class="discovery-tab-btn active" data-tab="scan">
+              <button class="discovery-tab-btn active" data-tab="scan" type="button">
                 <i data-lucide="wifi" aria-hidden="true"></i> Network Scan
               </button>
-              <button class="discovery-tab-btn" data-tab="manual">
+              <button class="discovery-tab-btn" data-tab="manual" type="button">
                 <i data-lucide="keyboard" aria-hidden="true"></i> Manual Entry
               </button>
-              <button class="discovery-tab-btn" data-tab="saved">
+              <button class="discovery-tab-btn" data-tab="saved" type="button">
                 <i data-lucide="archive" aria-hidden="true"></i> Saved Printers
               </button>
             </div>
@@ -282,7 +284,7 @@ <h2 id="discovery-modal-title">Add Printer</h2>
                   Scan your local network to automatically discover FlashForge printers.
                 </p>
 
-                <button class="btn btn-primary btn-block" id="discovery-scan-btn">
+                <button class="btn btn-primary btn-block" id="discovery-scan-btn" type="button">
                   <i data-lucide="search" aria-hidden="true"></i> Start Network Scan
                 </button>
 
@@ -322,7 +324,7 @@ <h3>Discovered Printers</h3>
                   <small class="form-text">Required for 5M/Pro printers. Found in printer settings.</small>
                 </div>
 
-                <button class="btn btn-primary btn-block" id="discovery-manual-connect">
+                <button class="btn btn-primary btn-block" id="discovery-manual-connect" type="button">
                   <i data-lucide="link" aria-hidden="true"></i> Connect to Printer
                 </button>
               </div>