opt: ripple animation

module/webui/scripts/language.js

@@ -80,7 +80,8 @@ export function setupLanguageMenu() {
         if (isVisible) {
             closeLanguageMenu();
         } else {
-            openLanguageMenu();
+            languageOverlay.style.display = 'flex';
+            setTimeout(() => languageMenu.classList.add("show"), 10);
         }
     });
     document.addEventListener("click", (event) => {
@@ -98,13 +99,7 @@ export function setupLanguageMenu() {
             closeLanguageMenu();
         }
     });
-    function openLanguageMenu() {
+    const closeLanguageMenu = () => {
-        languageOverlay.style.display = 'flex';
-        setTimeout(() => {
-            languageMenu.classList.add("show");
-        }, 10);
-    }
-    function closeLanguageMenu() {
         languageMenu.classList.remove("show");
         languageOverlay.style.display = 'none';
     }

module/webui/scripts/main.js

@@ -243,7 +243,20 @@ export function hideFloatingBtn(hide = true) {
 export function applyRippleEffect() {
     document.querySelectorAll('.ripple-element').forEach(element => {
         if (element.dataset.rippleListener !== "true") {
-            element.addEventListener("pointerdown", function (event) {
+            element.addEventListener("pointerdown", async (event) => {
+                const handlePointerUp = () => {
+                    ripple.classList.add("end");
+                    setTimeout(() => {
+                        ripple.classList.remove("end");
+                        ripple.remove();
+                    }, duration * 1000);
+                    element.removeEventListener("pointerup", handlePointerUp);
+                    element.removeEventListener("pointercancel", handlePointerUp);
+                };
+                element.addEventListener("pointerup", () => setTimeout(handlePointerUp, 80));
+                element.addEventListener("pointercancel", () => setTimeout(handlePointerUp, 80));
+
+                await new Promise(resolve => setTimeout(resolve, 80));
                 if (isScrolling) return;
                 const ripple = document.createElement("span");
                 ripple.classList.add("ripple");
@@ -280,17 +293,6 @@ export function applyRippleEffect() {
 
                 // Append ripple and handle cleanup
                 element.appendChild(ripple);
-                const handlePointerUp = () => {
-                    ripple.classList.add("end");
-                    setTimeout(() => {
-                        ripple.classList.remove("end");
-                        ripple.remove();
-                    }, duration * 1000);
-                    element.removeEventListener("pointerup", handlePointerUp);
-                    element.removeEventListener("pointercancel", handlePointerUp);
-                };
-                element.addEventListener("pointerup", handlePointerUp);
-                element.addEventListener("pointercancel", handlePointerUp);
             });
             element.dataset.rippleListener = "true";
         }

module/webui/scripts/search_menu.js

@@ -4,16 +4,13 @@ const searchCard = document.querySelector('.search-card');
 export const searchInput = document.getElementById('search');
 export const clearBtn = document.getElementById('clear-btn');
 export const searchMenuContainer = document.querySelector('.search-menu-container');
-const menu = document.querySelector('.menu');
 const menuButton = document.getElementById('menu-button');
 const menuOptions = document.getElementById('menu-options');
 const menuOverlay = document.getElementById('menu-overlay');
 const menuIcon = menuButton.querySelector('.menu-icon');
 
 // Focus on search input when search card is clicked
-searchCard.addEventListener("click", () => {
+searchCard.addEventListener("click", () => searchInput.focus());
-    searchInput.focus();
-});
 
 // Search functionality
 searchInput.addEventListener("input", (e) => {
@@ -24,11 +21,8 @@ searchInput.addEventListener("input", (e) => {
         app.style.display = name.includes(searchQuery) ? "block" : "none";
         window.scrollTo(0, 0);
     });
-    if (searchQuery !== "") {
+    if (searchQuery !== "") clearBtn.style.display = "block";
-        clearBtn.style.display = "block";
+    else clearBtn.style.display = "none";
-    } else {
-        clearBtn.style.display = "none";
-    }
 });
 
 // Clear search input
@@ -37,48 +31,38 @@ clearBtn.addEventListener("click", () => {
     clearBtn.style.display = "none";
     window.scrollTo(0, 0);
     const apps = appListContainer.querySelectorAll(".card");
-    apps.forEach(app => {
+    apps.forEach(app => app.style.display = "block");
-        app.style.display = "block";
-    });
 });
 
 // Function to toggle menu option
 export function setupMenuToggle() {
-    menuButton.addEventListener('click', (event) => {
+    const closeMenu = () => {
-        event.stopPropagation();
-        if (menuOptions.classList.contains('visible')) {
-            closeMenu();
-        } else {
-            openMenu();
-        }
-    });
-    document.addEventListener('click', (event) => {
-        if (!menuOptions.contains(event.target) && event.target !== menuButton) {
-            closeMenu();
-        }
-    });
-    window.addEventListener('scroll', () => {
-        if (menuOptions.classList.contains('visible')) {
-            closeMenu();
-        }
-    });
-    const menuOptionsList = document.querySelectorAll('#menu-options li');
-    menuOptionsList.forEach(option => {
-        option.addEventListener('click', (event) => {
-            event.stopPropagation();
-            closeMenu();
-        });
-    });
-    function openMenu() {
-        setTimeout(() => {
-            menuOptions.classList.add('visible');
-            menuIcon.classList.add('menu-open');
-            menuOverlay.style.display = 'flex';
-        }, 10);
-    }
-    function closeMenu() {
         menuOptions.classList.remove('visible');
         menuIcon.classList.remove('menu-open');
         menuOverlay.style.display = 'none';
     }
-}
+
+    menuButton.addEventListener('click', () => {
+        if (menuOptions.classList.contains('visible')) {
+            closeMenu();
+        } else {
+            setTimeout(() => {
+                menuOptions.classList.add('visible');
+                menuIcon.classList.add('menu-open');
+                menuOverlay.style.display = 'flex';
+            }, 10);
+        }
+    });
+    document.addEventListener('click', (event) => {
+        if (!menuOptions.contains(event.target) && event.target !== menuButton) closeMenu();
+    });
+    window.addEventListener('scroll', () => {
+        if (menuOptions.classList.contains('visible')) closeMenu();
+    });
+    const menuOptionsList = document.querySelectorAll('#menu-options li');
+    menuOptionsList.forEach(option => {
+        option.addEventListener('click', () => {
+            setTimeout(() => closeMenu(), 80);
+        });
+    });
+}