From 6def8193cba57f79d6a5e17b8b5d0337ff2f8aee Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 13 Mar 2025 13:45:48 +0700
Subject: [PATCH] fix: scroll setting preferences

---
 web/screens/Settings/Appearance/index.tsx | 269 +++++++++++-----------
 1 file changed, 137 insertions(+), 132 deletions(-)

diff --git a/web/screens/Settings/Appearance/index.tsx b/web/screens/Settings/Appearance/index.tsx
index 409b7c727..35d429132 100644
--- a/web/screens/Settings/Appearance/index.tsx
+++ b/web/screens/Settings/Appearance/index.tsx
@@ -3,7 +3,7 @@ import { useCallback } from 'react'
 import { useTheme } from 'next-themes'
 
 import { fs, joinPath } from '@janhq/core'
-import { Button, Select, Switch } from '@janhq/joi'
+import { Button, ScrollArea, Select, Switch } from '@janhq/joi'
 import { useAtom, useAtomValue } from 'jotai'
 
 import { twMerge } from 'tailwind-merge'
@@ -73,147 +73,152 @@ export default function AppearanceOptions() {
   )
 
   return (
-    <div className="m-4 block">
-      <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
-        <div className="flex-shrink-0 space-y-1">
-          <div className="flex gap-x-2">
-            <h6 className="font-semibold capitalize">Appearance</h6>
-          </div>
-          <p className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
-            Select a color theme.
-          </p>
-        </div>
-        <Select
-          position="popper"
-          sideOffset={4}
-          value={selectedIdTheme}
-          options={themeOptions}
-          onValueChange={(e) => handleClickTheme(e)}
-        />
-      </div>
-      {themeData?.reduceTransparent && (
+    <ScrollArea
+      type={showScrollBar ? 'always' : 'scroll'}
+      className="h-full w-full px-4"
+    >
+      <div className="m-4 block">
         <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
           <div className="flex-shrink-0 space-y-1">
             <div className="flex gap-x-2">
-              <h6 className="font-semibold capitalize">Interface theme</h6>
+              <h6 className="font-semibold capitalize">Appearance</h6>
+            </div>
+            <p className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
+              Select a color theme.
+            </p>
+          </div>
+          <Select
+            position="popper"
+            sideOffset={4}
+            value={selectedIdTheme}
+            options={themeOptions}
+            onValueChange={(e) => handleClickTheme(e)}
+          />
+        </div>
+        {themeData?.reduceTransparent && (
+          <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
+            <div className="flex-shrink-0 space-y-1">
+              <div className="flex gap-x-2">
+                <h6 className="font-semibold capitalize">Interface theme</h6>
+              </div>
+            </div>
+            <div className="flex items-center gap-x-2">
+              <Button
+                theme={reduceTransparent ? 'primary' : 'ghost'}
+                variant={reduceTransparent ? 'solid' : 'outline'}
+                onClick={() => setReduceTransparent(true)}
+              >
+                Solid
+              </Button>
+              <Button
+                theme={reduceTransparent ? 'ghost' : 'primary'}
+                variant={reduceTransparent ? 'outline' : 'solid'}
+                onClick={() => setReduceTransparent(false)}
+              >
+                Translucent
+              </Button>
             </div>
           </div>
-          <div className="flex items-center gap-x-2">
-            <Button
-              theme={reduceTransparent ? 'primary' : 'ghost'}
-              variant={reduceTransparent ? 'solid' : 'outline'}
-              onClick={() => setReduceTransparent(true)}
-            >
-              Solid
-            </Button>
-            <Button
-              theme={reduceTransparent ? 'ghost' : 'primary'}
-              variant={reduceTransparent ? 'outline' : 'solid'}
-              onClick={() => setReduceTransparent(false)}
-            >
-              Translucent
-            </Button>
+        )}
+        <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
+          <div className="w-full space-y-1 lg:w-3/4">
+            <div className="flex gap-x-2">
+              <h6 className="font-semibold capitalize">Chat Width</h6>
+            </div>
+            <p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
+              Choose the width of the chat area to customize your conversation
+              view.
+            </p>
           </div>
-        </div>
-      )}
-      <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
-        <div className="w-full space-y-1 lg:w-3/4">
-          <div className="flex gap-x-2">
-            <h6 className="font-semibold capitalize">Chat Width</h6>
-          </div>
-          <p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
-            Choose the width of the chat area to customize your conversation
-            view.
-          </p>
-        </div>
-        <div className="flex-shrink-0">
-          <div className="flex items-center gap-4">
-            {chatWidthOption.map((option) => {
-              return (
-                <div
-                  className="inline-flex flex-col items-center justify-center text-center"
-                  key={option.name}
-                >
-                  <label
-                    className="relative cursor-pointer"
-                    htmlFor={option.name}
-                    onClick={() => setChatWidth(option.value)}
+          <div className="flex-shrink-0">
+            <div className="flex items-center gap-4">
+              {chatWidthOption.map((option) => {
+                return (
+                  <div
+                    className="inline-flex flex-col items-center justify-center text-center"
+                    key={option.name}
                   >
-                    <img
-                      src={theme === 'dark' ? option.darkImg : option.img}
-                      alt={option.value}
-                      width={140}
-                      className={twMerge(
-                        'rounded-lg border-2 border-[hsla(var(--app-border))] bg-[hsla(var(--secondary-bg))] transition-all',
-                        chatWidth === option.value &&
-                          'border-[hsla(var(--primary-bg))]'
+                    <label
+                      className="relative cursor-pointer"
+                      htmlFor={option.name}
+                      onClick={() => setChatWidth(option.value)}
+                    >
+                      <img
+                        src={theme === 'dark' ? option.darkImg : option.img}
+                        alt={option.value}
+                        width={140}
+                        className={twMerge(
+                          'rounded-lg border-2 border-[hsla(var(--app-border))] bg-[hsla(var(--secondary-bg))] transition-all',
+                          chatWidth === option.value &&
+                            'border-[hsla(var(--primary-bg))]'
+                        )}
+                      />
+                      <p className="my-2 font-medium">{option.name}</p>
+                      {chatWidth === option.value && (
+                        <div className="absolute right-2 top-2 ">
+                          <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 16 16"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <rect
+                              width="16"
+                              height="16"
+                              rx="8"
+                              className="fill-[hsla(var(--primary-bg))]"
+                            />
+                            <path
+                              d="M11.1111 5.66699L6.83333 9.94477L4.88889 8.00033"
+                              stroke="white"
+                              strokeWidth="0.886667"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </svg>
+                        </div>
                       )}
-                    />
-                    <p className="my-2 font-medium">{option.name}</p>
-                    {chatWidth === option.value && (
-                      <div className="absolute right-2 top-2 ">
-                        <svg
-                          width="24"
-                          height="24"
-                          viewBox="0 0 16 16"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            width="16"
-                            height="16"
-                            rx="8"
-                            className="fill-[hsla(var(--primary-bg))]"
-                          />
-                          <path
-                            d="M11.1111 5.66699L6.83333 9.94477L4.88889 8.00033"
-                            stroke="white"
-                            strokeWidth="0.886667"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
-                      </div>
-                    )}
-                  </label>
-                </div>
-              )
-            })}
+                    </label>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+        <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
+          <div className="w-full space-y-1 lg:w-3/4">
+            <div className="flex gap-x-2">
+              <h6 className="font-semibold capitalize">Spell Check</h6>
+            </div>
+            <p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
+              Turn on to enable spell check.
+            </p>
+          </div>
+          <div className="flex-shrink-0">
+            <Switch
+              checked={spellCheck}
+              onChange={(e) => setSpellCheck(e.target.checked)}
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
+          <div className="w-full space-y-1 lg:w-3/4">
+            <div className="flex gap-x-2">
+              <h6 className="font-semibold capitalize">Scrolling Bar</h6>
+            </div>
+            <p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
+              Turn on to make scrolling bar visible across windows.
+            </p>
+          </div>
+          <div className="flex-shrink-0">
+            <Switch
+              checked={showScrollBar}
+              onChange={(e) => setShowScrollBar(e.target.checked)}
+            />
           </div>
         </div>
       </div>
-      <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
-        <div className="w-full space-y-1 lg:w-3/4">
-          <div className="flex gap-x-2">
-            <h6 className="font-semibold capitalize">Spell Check</h6>
-          </div>
-          <p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
-            Turn on to enable spell check.
-          </p>
-        </div>
-        <div className="flex-shrink-0">
-          <Switch
-            checked={spellCheck}
-            onChange={(e) => setSpellCheck(e.target.checked)}
-          />
-        </div>
-      </div>
-      <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
-        <div className="w-full space-y-1 lg:w-3/4">
-          <div className="flex gap-x-2">
-            <h6 className="font-semibold capitalize">Scrolling Bar</h6>
-          </div>
-          <p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
-            Turn on to make scrolling bar visible across windows.
-          </p>
-        </div>
-        <div className="flex-shrink-0">
-          <Switch
-            checked={showScrollBar}
-            onChange={(e) => setShowScrollBar(e.target.checked)}
-          />
-        </div>
-      </div>
-    </div>
+    </ScrollArea>
   )
 }