From 9f35d103f24a369051b8deaa25c8f36b196f78bb Mon Sep 17 00:00:00 2001
From: Nayam Amarshe <25067102+NayamAmarshe@users.noreply.github.com>
Date: Fri, 19 Apr 2024 00:15:12 +0530
Subject: [PATCH] Fix scroll

---
 renderer/components/settings-tab/index.tsx | 41 +++++++++++++++++++---
 renderer/pages/index.tsx                   |  2 ++
 renderer/styles/globals.css                | 26 +++++++++-----
 3 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/renderer/components/settings-tab/index.tsx b/renderer/components/settings-tab/index.tsx
index 3b66ff3..ea0ae25 100644
--- a/renderer/components/settings-tab/index.tsx
+++ b/renderer/components/settings-tab/index.tsx
@@ -23,6 +23,7 @@ import { UpscaylCloudModal } from "../UpscaylCloudModal";
 import { ResetSettings } from "./ResetSettings";
 import { featureFlags } from "@common/feature-flags";
 import TurnOffNotificationsToggle from "./TurnOffNotificationsToggle";
+import { cn } from "@/lib/utils";
 
 interface IProps {
   batchMode: boolean;
@@ -68,9 +69,8 @@ function SettingsTab({
   const [customModelsPath, setCustomModelsPath] = useAtom(customModelsPathAtom);
   const modelOptions = useAtomValue(modelsListAtom);
   const [scale, setScale] = useAtom(scaleAtom);
-  const [noImageProcessing, setNoImageProcessing] = useAtom(
-    noImageProcessingAtom,
-  );
+  const [enableScrollbar, setEnableScrollbar] = useState(true);
+  const [timeoutId, setTimeoutId] = useState(null);
 
   const { logit } = useLog();
 
@@ -152,8 +152,39 @@ function SettingsTab({
     /Upscayl\/([\d\.]+\d+)/,
   )[1];
 
+  function disableScrolling() {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+
+    setTimeoutId(
+      setTimeout(function () {
+        setEnableScrollbar(false);
+      }, 1000),
+    );
+  }
+
+  function enableScrolling() {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+
+    setEnableScrollbar(true);
+  }
+
   return (
-    <div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto overflow-x-hidden p-5">
+    <div
+      className={cn(
+        "animate-step-in animate z-50 flex h-screen flex-col gap-7 overflow-y-auto overflow-x-hidden p-5",
+        enableScrollbar ? "" : "hide-scrollbar",
+      )}
+      onScroll={() => {
+        if (enableScrollbar) disableScrolling();
+      }}
+      onWheel={() => {
+        enableScrolling();
+      }}
+    >
       <div className="flex flex-col gap-2 text-sm font-medium uppercase">
         <p>Having issues?</p>
         <a
@@ -161,7 +192,7 @@ function SettingsTab({
           href="https://github.com/upscayl/upscayl/wiki/"
           target="_blank"
         >
-          GET HELP!
+          GET HELP
         </a>
         {featureFlags.APP_STORE_BUILD && (
           <a
diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx
index 89cb1b5..09c00e4 100644
--- a/renderer/pages/index.tsx
+++ b/renderer/pages/index.tsx
@@ -532,6 +532,7 @@ const Home = () => {
       >
         <PanelRightCloseIcon />
       </button>
+
       {/* LEFT PANE */}
       <div
         className={`relative flex h-screen min-w-[350px] max-w-[350px] flex-col bg-base-100 ${showSidebar ? "" : "hidden"}`}
@@ -542,6 +543,7 @@ const Home = () => {
         >
           <PanelLeftCloseIcon />
         </button>
+
         {/* UPSCAYL CLOUD MODAL */}
         {featureFlags.SHOW_UPSCAYL_CLOUD_INFO && (
           <UpscaylCloudModal
diff --git a/renderer/styles/globals.css b/renderer/styles/globals.css
index 208cec3..5dbbc41 100644
--- a/renderer/styles/globals.css
+++ b/renderer/styles/globals.css
@@ -45,20 +45,28 @@
     font-family: "Poppins", sans-serif;
   }
 
+  .hide-scrollbar::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  .hide-scrollbar::-webkit-scrollbar-thumb {
+    @apply bg-transparent;
+  }
+
   ::-webkit-scrollbar {
     @apply w-3;
   }
 
   ::-webkit-scrollbar-track {
-    @apply bg-base-300/80 rounded-full;
+    @apply rounded-full bg-base-300/30;
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply bg-base-content/20 rounded-full;
+    @apply rounded-full bg-base-content/20;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    @apply bg-base-content/50 rounded-full;
+    @apply rounded-full bg-base-content/50;
   }
 }
 
@@ -85,11 +93,11 @@
   }
 
   .react-select-container .react-select__single-value {
-    @apply text-primary-content text-sm font-semibold uppercase;
+    @apply text-sm font-semibold uppercase text-primary-content;
   }
 
   .react-select-container .react-select__input-container {
-    @apply text-primary-content text-sm font-semibold uppercase;
+    @apply text-sm font-semibold uppercase text-primary-content;
   }
 
   .react-select-container .react-select__menu {
@@ -97,11 +105,11 @@
   }
 
   .react-select-container .react-select__option {
-    @apply text-primary-content hover:bg-primary-focus hover:text-primary-content my-1 cursor-pointer break-all rounded-md bg-primary;
+    @apply my-1 cursor-pointer break-all rounded-md bg-primary text-primary-content hover:bg-primary-focus hover:text-primary-content;
   }
 
   .react-select-container .react-select__option--is-selected {
-    @apply text-accent-content bg-accent;
+    @apply bg-accent text-accent-content;
   }
 
   .outline-title {
@@ -147,11 +155,11 @@
 }
 
 [data-theme="upscayl"] .react-select-container .react-select__single-value {
-  @apply text-primary-content font-medium normal-case;
+  @apply font-medium normal-case text-primary-content;
 }
 
 [data-theme="upscayl"] .react-select-container .react-select__input-container {
-  @apply text-primary-content text-xs font-medium normal-case;
+  @apply text-xs font-medium normal-case text-primary-content;
 }
 
 [data-theme="upscayl"] .react-select-container .react-select__menu {