From b1ee23d1b6d0876791bb67e2356f2c23d4d2311a Mon Sep 17 00:00:00 2001
From: Samidy <samidy@proton.me>
Date: Sat, 10 Jan 2026 17:37:41 +0300
Subject: [PATCH] Add (EXPERIMENTAL VERY BUGGY) Smooth Scrolling Feature

---
 index.html             | 14 +++++++++++
 js/app.js              |  2 +-
 js/settings.js         | 12 +++++++++
 js/smooth-scrolling.js | 57 ++++++++++++++++++++++++++++++++++++++++++
 js/storage.js          | 16 ++++++++++++
 5 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 js/smooth-scrolling.js

diff --git a/index.html b/index.html
index 5ca975c..498964c 100644
--- a/index.html
+++ b/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>
diff --git a/js/app.js b/js/app.js
index 1dbba2f..0f790ec 100644
--- a/js/app.js
+++ b/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() {
         }
     });
 }
-
diff --git a/js/settings.js b/js/settings.js
index c99e149..4f18b49 100644
--- a/js/settings.js
+++ b/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) {
diff --git a/js/smooth-scrolling.js b/js/smooth-scrolling.js
new file mode 100644
index 0000000..afcb049
--- /dev/null
+++ b/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();
+}
diff --git a/js/storage.js b/js/storage.js
index 39bfcb4..8279c24 100644
--- a/js/storage.js
+++ b/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',