[Expiremental] Add ability to disable blur effects

resources/js/theme.js

@@ -19,4 +19,46 @@ if(localStorage.theme) {
 } else {
     // Default Dark Theme
     localStorage.theme = 'dark';
-}
+}
+
+// Ability to disable blur effects for slower devices
+const LOCAL_STORAGE_KEY = 'blur';
+const blurCheckbox = document.querySelector("input[type='checkbox']#toggleBlur");
+
+function setCSSFilter(selector, value) {
+    document.querySelectorAll(selector).forEach(el => {
+        el.style.backdropFilter = value
+    });
+}
+
+function applyBlur(enabled) {
+    if (!enabled) { 
+        setCSSFilter('.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-lg', 'none');
+        return;
+    }
+
+    setCSSFilter('.backdrop-blur-lg', 'blur(16px)');
+    setCSSFilter('.backdrop-blur',    'blur(8px)');
+    setCSSFilter('.backdrop-blur-sm', 'blur(4px)');
+}
+
+function initBlurToggle() {
+    const storedValue = localStorage.getItem(LOCAL_STORAGE_KEY);
+    const enabled = storedValue === null ? true : storedValue === 'true';
+
+    // initialize UI and DOM
+    applyBlur(enabled);
+    if (blurCheckbox) blurCheckbox.checked = enabled;
+
+    // add event listener
+    if (blurCheckbox) {
+        blurCheckbox.addEventListener('click', (e) => {
+            console.log("Received Event");
+            const isEnabled = e.target.checked;
+            applyBlur(isEnabled);
+            localStorage.setItem(LOCAL_STORAGE_KEY, isEnabled ? 'true' : 'false');
+        });
+    }
+}
+
+initBlurToggle();