Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-20 10:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🎨 style: Refine SidePanel and Textarea Styling (#2209)

Browse source 
* experimental: use TextareaAutosize wrapper with useLayoutEffect to hopefully fix random textarea jankiness

* fix(Textarea): force a resize when placeholder text changes

* style(ScrollToBottom): update styling for scroll button

* style: memoize values and improve side panel toggle states

* refactor(SidePanel): more control for toggle states, new hide panel button, and improve toggle state logic

* chore: hide resizable panel handle on smaller screens
This commit is contained in:
Danny Avila 2024-03-26 04:19:51 -04:00 • committed by GitHub
parent cb62847838
commit 718572b7c8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 87 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

17
client/src/components/SidePanel/Nav.tsx
View file

@ -42,6 +42,11 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
: '',
)}
onClick={() => {
if (link.onClick) {
link.onClick();
setActive('');
return;
}
setActive(link.id);
resize && resize(25);
}}
@ -50,7 +55,11 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
<span className="sr-only">{link.title}</span>
</button>
</TooltipTrigger>
<TooltipContent side="right" className="flex items-center gap-4">
<TooltipContent
side="left"
sideOffset={10}
className="flex items-center gap-4"
>
{localize(link.title)}
{link.label && (
<span className="text-muted-foreground ml-auto">{link.label}</span>
@ -78,6 +87,12 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
'hover:bg-gray-50 data-[state=open]:bg-gray-50 data-[state=open]:text-black dark:hover:bg-gray-700 dark:data-[state=open]:bg-gray-700 dark:data-[state=open]:text-white',
'w-full justify-start rounded-md border dark:border-gray-700',
)}
onClick={() => {
if (link.onClick) {
link.onClick();
setActive('');
}
}}
>
<link.icon className="mr-2 h-4 w-4" />
{localize(link.title)}