SurfSense/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx

"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>
	);
}