Add (EXPERIMENTAL VERY BUGGY) Smooth Scrolling Feature

index.html

@@ -468,6 +468,16 @@
                             <span class="slider"></span>
                             </label>
                         </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Smooth Scrolling</span>
+                                <span class="description">Provides a smoother scrolling experience with Lenis (Experimental)</span>
+                            </div>
+                            <label class="toggle-switch">
+                            <input type="checkbox" id="smooth-scrolling-toggle">
+                            <span class="slider"></span>
+                            </label>
+                        </div>
                         <div class="setting-item">
                             <div class="info">
                                 <span class="label">Album Cover Background</span>
@@ -883,8 +893,12 @@
 
         </footer>
     </div>
+    <script src="https://unpkg.com/@studio-freight/lenis"></script>
     <script type="module" src="js/app.js"></script>
+
+
 </body>
+
 </html>
             </div>
 </html>

js/app.js

@@ -15,6 +15,7 @@ import { sidePanelManager } from './side-panel.js';
 import { db } from './db.js';
 import { syncManager } from './firebase/sync.js';
 import { registerSW } from 'virtual:pwa-register';
+import './smooth-scrolling.js';
 
 
 function initializeCasting(audioPlayer, castBtn) {
@@ -1188,4 +1189,3 @@ function showKeyboardShortcuts() {
         }
     });
 }
-

js/settings.js

@@ -8,6 +8,7 @@ import {
   trackListSettings,
   cardSettings,
   waveformSettings,
+  smoothScrollingSettings,
 } from "./storage.js";
 import { db } from "./db.js";
 import { authManager } from "./firebase/auth.js";
@@ -356,6 +357,17 @@ export function initializeSettings(scrobbler, player, api, ui) {
     });
   }
 
+  // Smooth Scrolling Toggle
+  const smoothScrollingToggle = document.getElementById("smooth-scrolling-toggle");
+  if (smoothScrollingToggle) {
+    smoothScrollingToggle.checked = smoothScrollingSettings.isEnabled();
+    smoothScrollingToggle.addEventListener("change", (e) => {
+      smoothScrollingSettings.setEnabled(e.target.checked);
+
+      window.dispatchEvent(new CustomEvent("smooth-scrolling-toggle", { detail: { enabled: e.target.checked } }));
+    });
+  }
+
   // Filename template setting
   const filenameTemplate = document.getElementById("filename-template");
   if (filenameTemplate) {

js/smooth-scrolling.js

@@ -0,0 +1,57 @@
+//js/smooth-scrolling.js
+import { smoothScrollingSettings } from "./storage.js";
+
+let lenis = null;
+
+function initializeSmoothScrolling() {
+  if (lenis) return; // Already initialized
+
+  lenis = new Lenis({
+    wrapper: document.querySelector('.main-content'),
+    content: document.querySelector('.main-content'),
+    lerp: 0.1,
+    smoothWheel: true,
+    smoothTouch: false,
+    normalizeWheel: true,
+    wheelMultiplier: 0.8,
+  });
+
+  function raf(time) {
+    lenis.raf(time);
+    requestAnimationFrame(raf);
+  }
+
+  requestAnimationFrame(raf);
+}
+
+function destroySmoothScrolling() {
+  if (lenis) {
+    lenis.destroy();
+    lenis = null;
+  }
+}
+
+function setupSmoothScrolling() {
+  // Check if smooth scrolling is enabled
+  const smoothScrollingEnabled = smoothScrollingSettings.isEnabled();
+
+  if (smoothScrollingEnabled) {
+    initializeSmoothScrolling();
+  }
+
+  // Listen for toggle changes
+  window.addEventListener('smooth-scrolling-toggle', function(e) {
+    if (e.detail.enabled) {
+      initializeSmoothScrolling();
+    } else {
+      destroySmoothScrolling();
+    }
+  });
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', setupSmoothScrolling);
+} else {
+  setupSmoothScrolling();
+}

js/storage.js

@@ -509,6 +509,22 @@ export const waveformSettings = {
     }
 };
 
+export const smoothScrollingSettings = {
+    STORAGE_KEY: 'smooth-scrolling-enabled',
+
+    isEnabled() {
+        try {
+            return localStorage.getItem(this.STORAGE_KEY) === 'true';
+        } catch (e) {
+            return false;
+        }
+    },
+
+    setEnabled(enabled) {
+        localStorage.setItem(this.STORAGE_KEY, enabled ? 'true' : 'false');
+    }
+};
+
 export const queueManager = {
     STORAGE_KEY: 'monochrome-queue',