From c6a7fa4e7da2094535f3f1397beb7e1a803844b0 Mon Sep 17 00:00:00 2001
From: Send_Nukez <erikjulius2701@yahoo.de>
Date: Wed, 6 Oct 2021 03:52:06 +0200
Subject: [PATCH] Automatically hide sidebar playlist shadows when scrolled all
 the way up / down

---
 dribbblish.js | 37 +++++++++++++++++++++++++++++++------
 user.css      |  9 +++++++++
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/dribbblish.js b/dribbblish.js
index cb02215..af4e219 100644
--- a/dribbblish.js
+++ b/dribbblish.js
@@ -180,18 +180,43 @@ waitForElement([
         .observe(listElem, {childList: true});
 });
 
+waitForElement([".main-rootlist-rootlist", ".main-rootlist-wrapper > :nth-child(2) > :first-child"], ([rootlist]) => {
+    function checkSidebarPlaylistScroll() {
+        const topDist = rootlist.getBoundingClientRect().top - document.querySelector(".main-rootlist-wrapper > :nth-child(2) > :first-child").getBoundingClientRect().top;
+        const bottomDist = document.querySelector(".main-rootlist-wrapper > :nth-child(2) > :last-child").getBoundingClientRect().bottom - rootlist.getBoundingClientRect().bottom;
+
+        rootlist.classList.remove("no-top-shadow", "no-bottom-shadow");
+        if (topDist < 10) rootlist.classList.add("no-top-shadow");
+        if (bottomDist < 10) rootlist.classList.add("no-bottom-shadow");
+    }
+    checkSidebarPlaylistScroll();
+
+    // Use Interval because scrolling takes a while and getBoundingClientRect() gets position at the moment of calling, so the interval keeps calling for 1s
+    let c = 0;
+    let interval;
+    rootlist.addEventListener("wheel", () => {
+        checkSidebarPlaylistScroll();
+        c = 0;
+        if (interval == null)
+            interval = setInterval(() => {
+                if (c > 20) {
+                    clearInterval(interval);
+                    interval = null;
+                    return;
+                }
+
+                checkSidebarPlaylistScroll();
+                c++;
+            }, 50);
+    });
+});
+
 waitForElement([".Root__main-view"], ([mainView]) => {
     const shadow = document.createElement("div");
     shadow.id = "dribbblish-back-shadow";
     mainView.prepend(shadow);
 });
 
-waitForElement([".main-rootlist-rootlistPlaylistsScrollNode"], (queries) => {
-    const fade = document.createElement("div");
-    fade.id = "dribbblish-sidebar-fade-in";
-    queries[0].append(fade);
-});
-
 waitForElement([
     ".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"
 ], ([resizer]) => {
diff --git a/user.css b/user.css
index 720ab81..40c99dc 100644
--- a/user.css
+++ b/user.css
@@ -405,6 +405,15 @@ html.sidebar-hide-text .GlueDropTarget span {
     left: 0px;
     right: 0px;
     pointer-events: none;
+    transition: height 0.5s ease;
+}
+
+.main-rootlist-rootlist.no-top-shadow::before {
+    height: 0px;
+}
+
+.main-rootlist-rootlist.no-bottom-shadow::after {
+    height: 0px;
 }
 
 .main-rootlist-rootlist::before {