From 892dc2fa9021b5d21531242ffdea9801343162ee Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 1 Mar 2023 20:43:55 +0530
Subject: [PATCH] feat: scrollbar setting

---
 src/App.svelte                        | 2 +-
 src/components/SettingsManager.svelte | 4 ++--
 src/components/TabBar.svelte          | 4 ++--
 src/store/settings.ts                 | 6 ++++++
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index f2af4f0e..3ab6e9e2 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -64,7 +64,7 @@
   });
 </script>
 
-<main>
+<main class:custom-scrollbar={!$settings["systemScrollbars"]?.value}>
   {#if showTitlebar}
     <CustomTitlebar />
   {/if}
diff --git a/src/components/SettingsManager.svelte b/src/components/SettingsManager.svelte
index f632cf2e..b5f86284 100644
--- a/src/components/SettingsManager.svelte
+++ b/src/components/SettingsManager.svelte
@@ -176,10 +176,10 @@
     overflow-x: hidden;
     margin-bottom: 0.75rem;
   }
-  .settings::-webkit-scrollbar {
+  :global(.custom-scrollbar) .settings::-webkit-scrollbar {
     width: 5px;
   }
-  .settings::-webkit-scrollbar-thumb {
+  :global(.custom-scrollbar) .settings::-webkit-scrollbar-thumb {
     background: #36475d;
   }
   .setting {
diff --git a/src/components/TabBar.svelte b/src/components/TabBar.svelte
index 8f0481f1..fda83611 100644
--- a/src/components/TabBar.svelte
+++ b/src/components/TabBar.svelte
@@ -258,10 +258,10 @@
     display: flex;
     overflow-x: auto;
   }
-  .tabs::-webkit-scrollbar {
+  :global(.custom-scrollbar) .tabs::-webkit-scrollbar {
     height: 5px;
   }
-  .tabs::-webkit-scrollbar-thumb {
+  :global(.custom-scrollbar) .tabs::-webkit-scrollbar-thumb {
     background: #36475d;
   }
   .add-tab {
diff --git a/src/store/settings.ts b/src/store/settings.ts
index e821679d..80950499 100644
--- a/src/store/settings.ts
+++ b/src/store/settings.ts
@@ -81,6 +81,12 @@ const defaultSettings: () => Settings = () => {
       description:
         "When enabled, Altus will use a custom titlebar instead of the one provided by the system. (NOTE: Requires a restart for changes to apply.)",
     },
+    systemScrollbars: {
+      value: false,
+      name: "Use system scrollbars for UI",
+      description:
+        "When enabled, Altus will use the system scrollbar style instead of a custom style. This does not apply to the WhatsApp UI, use a custom theme for that.",
+    },
     rememberWindowSize: {
       value: false,
       name: "Remember Window Size",