feat: add new layout system (Slack/ClickUp inspired)

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

@@ -0,0 +1,56 @@
+"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;
+	persistentAction?: React.ReactNode;
+}
+
+export function SidebarSection({
+	title,
+	defaultOpen = true,
+	children,
+	action,
+	persistentAction,
+}: SidebarSectionProps) {
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+
+	return (
+		<Collapsible open={isOpen} onOpenChange={setIsOpen} className="overflow-hidden">
+			<div className="flex items-center group/section">
+				<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>
+
+				{/* Action button - visible on hover (always visible on mobile) */}
+				{action && (
+					<div className="shrink-0 opacity-0 group-hover/section:opacity-100 transition-opacity pr-1 flex items-center gap-0.5">
+						{action}
+					</div>
+				)}
+
+				{/* Persistent action - always visible */}
+				{persistentAction && (
+					<div className="shrink-0 pr-1 flex items-center gap-0.5">{persistentAction}</div>
+				)}
+			</div>
+
+			<CollapsibleContent className="overflow-hidden">
+				<div className="px-2 pb-2">{children}</div>
+			</CollapsibleContent>
+		</Collapsible>
+	);
+}