Add visual feedback for button addition: implement mouse ripple effect and update addButton function to trigger it

Author: MaxITService

popup-page-scripts/popup-page-customButtons.js

@@ -42,10 +42,10 @@ function createButtonCardElement(button, index) {
             <label class="checkbox-row">
                 <input type="checkbox" class="autosend-toggle" ${button.autoSend ? 'checked' : ''}>
                 <span>Auto-send</span>
-                ${ index < 10 
-                    ? `<span class="shortcut-indicator">[Ctrl+${index === 9 ? 0 : index + 1}]</span>` 
-                    : '' 
-                }
+                ${index < 10
+                ? `<span class="shortcut-indicator">[Ctrl+${index === 9 ? 0 : index + 1}]</span>`
+                : ''
+            }
             </label>
             <button class="delete-button danger">Delete</button>
         `;
@@ -94,8 +94,9 @@ function clearText() {
 
 /**
  * Adds a new custom button and related card to the current profile.
+ * @param {MouseEvent} [event] - The click event, used for visual feedback around the cursor.
  */
-async function addButton() {
+async function addButton(event) {
     const icon = document.getElementById('buttonIcon').value || '✨';
     const text = document.getElementById('buttonText').value || 'New Button';
     const autoSend = document.getElementById('buttonAutoSendToggle').checked;
@@ -109,6 +110,13 @@ async function addButton() {
     await saveCurrentProfile();
     updatebuttonCardsList();
     logToGUIConsole('Added new button');
+
+    // --- Visual Feedback ---
+    showToast('Button added', 'success');
+    if (event) {
+        // This function is in popup-page-visuals.js
+        showMouseEffect(event);
+    }
 }
 
 
@@ -302,8 +310,8 @@ function handleDragOver(e) {
             } else {
                 // If DOM position didn't change, ensure it still has the correct base dragging transform
                 // and importantly, ensure no transition is active from a previous interrupted move.
-                 draggedItem.style.transition = 'none'; // Remove any potentially active transition
-                 draggedItem.style.transform = playTransform; // Ensure the scale(0.8) is applied
+                draggedItem.style.transition = 'none'; // Remove any potentially active transition
+                draggedItem.style.transform = playTransform; // Ensure the scale(0.8) is applied
             }
         }
 
@@ -420,9 +428,10 @@ function textareaSaverAndResizerFunc() {
             const buttonItem = textarea.closest('.button-item');
             const index = parseInt(buttonItem.dataset.index);
             currentProfile.customButtons[index].text = textarea.value;
-            
+
             // Use debounced save to throttle saving
             debouncedSaveCurrentProfile();
         });
     });
 }
+

popup-page-scripts/popup-page-script.js

@@ -296,7 +296,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     // Button management
-    document.getElementById('addButton').addEventListener('click', addButton);
+    document.getElementById('addButton').addEventListener('click', e => addButton(e));
     document.getElementById('clearText').addEventListener('click', clearText);
     document.getElementById('addSeparator').addEventListener('click', addSeparator);
 

popup-page-scripts/popup-page-visuals.js

@@ -38,3 +38,27 @@ function showToast(message, type = 'info', duration = 3000) {
     }, duration);
 }
 
+
+/**
+ * Creates a ripple effect at the mouse cursor's position.
+ * This is used to provide visual feedback on actions like adding a button.
+ *
+ * @param {MouseEvent} event - The mouse event that triggered the effect.
+ */
+function showMouseEffect(event) {
+    // Ensure event is provided
+    if (!event) return;
+
+    const effect = document.createElement('div');
+    effect.className = 'mouse-effect';
+    document.body.appendChild(effect);
+
+    // Position at mouse coordinates. Use clientX/Y for viewport-relative position.
+    effect.style.left = `${event.clientX}px`;
+    effect.style.top = `${event.clientY}px`;
+
+    // Remove the element after the animation finishes to keep the DOM clean.
+    effect.addEventListener('animationend', () => {
+        effect.remove();
+    });
+}

popup-page-styles/popup-components.css

@@ -23,6 +23,32 @@ Key areas:
     --text-muted: #666;
 }
 
+/* ------------------------------------------------------------------------- */
+/* Mouse Click Effect                                                        */
+/* ------------------------------------------------------------------------- */
+.mouse-effect {
+    position: fixed;
+    /* Use fixed positioning so scroll doesn't matter */
+    border: 2px solid var(--primary-color);
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    /* Center on cursor and start scaled down */
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+    pointer-events: none;
+    /* So it doesn't interfere with other clicks */
+    z-index: 9999;
+    animation: mouse-ripple 0.5s ease-out forwards;
+}
+
+@keyframes mouse-ripple {
+    to {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(4);
+    }
+}
+
 /* ------------------------------------------------------------------------- */
 /* Console Styling                                                           */
 /* ------------------------------------------------------------------------- */
@@ -435,7 +461,7 @@ Key areas:
     border-bottom: none;
 }
 
-.floating-site-item span { 
+.floating-site-item span {
     font-size: 1.1em;
     /* Responsive, scales with parent font size */
 }