fix: scroll setting preferences
This commit is contained in:
Faisal Amir
parent
24e301854c
commit
6def8193cb
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user