mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 00:36:31 +02:00
651d381bcb
- 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.
74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronRight } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface SidebarSectionProps {
|
|
title: string;
|
|
defaultOpen?: boolean;
|
|
children: React.ReactNode;
|
|
action?: React.ReactNode;
|
|
alwaysShowAction?: boolean;
|
|
persistentAction?: React.ReactNode;
|
|
className?: string;
|
|
fillHeight?: boolean;
|
|
}
|
|
|
|
export function SidebarSection({
|
|
title,
|
|
defaultOpen = true,
|
|
children,
|
|
action,
|
|
alwaysShowAction = false,
|
|
persistentAction,
|
|
className,
|
|
fillHeight = false,
|
|
}: SidebarSectionProps) {
|
|
const [isOpen, setIsOpen] = useState(defaultOpen);
|
|
|
|
return (
|
|
<Collapsible
|
|
open={isOpen}
|
|
onOpenChange={setIsOpen}
|
|
className={cn(
|
|
"overflow-hidden",
|
|
fillHeight && "flex flex-col min-h-0",
|
|
fillHeight && isOpen && "flex-1",
|
|
className
|
|
)}
|
|
>
|
|
<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 && (
|
|
<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>
|
|
)}
|
|
|
|
{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")}>
|
|
{children}
|
|
</div>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
);
|
|
}
|