apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-27 01:36:30 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: enhance chat sidebar functionality and UI

Browse source 
- Updated `LayoutDataProvider` to toggle sidebar states for shared and private chats more efficiently.
- Added new props to `MobileSidebar`, `Sidebar`, and `LayoutShell` to manage the open states of chat panels.
- Improved button interactions in the sidebar to show/hide chat panels with updated tooltip text.
- Enhanced styling for tab triggers in `AllPrivateChatsSidebar` and `AllSharedChatsSidebar` for better user experience.
- Added new localization strings for "show all" and "hide" actions in multiple languages.
This commit is contained in:
Anish Sarkar 2026-03-17 03:55:49 +05:30
parent 54156633ff
commit 651d381bcb
12 changed files with 94 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

45
surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
View file

@ -10,6 +10,7 @@ interface SidebarSectionProps {
defaultOpen?: boolean;
children: React.ReactNode;
action?: React.ReactNode;
alwaysShowAction?: boolean;
persistentAction?: React.ReactNode;
className?: string;
fillHeight?: boolean;
@ -20,6 +21,7 @@ export function SidebarSection({
defaultOpen = true,
children,
action,
alwaysShowAction = false,
persistentAction,
className,
fillHeight = false,
@ -37,29 +39,30 @@ export function SidebarSection({
className
)}
>
<div className="flex items-center group/section shrink-0">
<CollapsibleTrigger className="flex flex-1 items-center gap-1.5 px-2 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0">
<ChevronRight
className={cn(
"h-3.5 w-3.5 shrink-0 transition-transform duration-200",
isOpen && "rotate-90"
)}
/>
<span className="uppercase tracking-wider truncate">{title}</span>
</CollapsibleTrigger>
<div className="flex items-center group/section shrink-0 px-2 py-1.5">
<CollapsibleTrigger className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0">
<span className="truncate">{title}</span>
<ChevronRight
className={cn(
"h-3.5 w-3.5 shrink-0 transition-transform duration-200",
isOpen && "rotate-90"
)}
/>
</CollapsibleTrigger>
{/* Action button - visible on hover (always visible on mobile) */}
{action && (
<div className="shrink-0 opacity-100 md:opacity-0 md:group-hover/section:opacity-100 transition-opacity pr-1 flex items-center">
{action}
</div>
)}
{action && (
<div className={cn(
"transition-opacity ml-1.5 flex items-center",
alwaysShowAction ? "opacity-100" : "opacity-100 md:opacity-0 md:group-hover/section:opacity-100"
)}>
{action}
</div>
)}
{/* Persistent action - always visible */}
{persistentAction && (
<div className="shrink-0 pr-1 flex items-center">{persistentAction}</div>
)}
</div>
{persistentAction && (
<div className="shrink-0 ml-auto flex items-center">{persistentAction}</div>
)}
</div>
<CollapsibleContent className={cn("overflow-hidden flex-1 flex flex-col min-h-0")}>
<div className={cn("px-2 pb-2 flex-1 flex flex-col min-h-0 overflow-hidden")}>