refactor: fixed forefox rendering issues

- Updated NewChatPage to reset state when switching between chats and search spaces.
- Enhanced LayoutDataProvider to reset transient slide-out panels on search space changes.
- Refactored RightPanel to simplify rendering logic and remove unnecessary animations.
- Cleaned up LayoutShell by removing motion components for improved performance.

surfsense_web/components/layout/ui/right-panel/RightPanel.tsx

@@ -2,7 +2,6 @@
 
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { PanelRight, PanelRightClose } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
 import { startTransition, useEffect } from "react";
 import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
@@ -99,70 +98,35 @@ export function RightPanel({ documentsPanel }: RightPanelProps) {
 	const targetWidth = PANEL_WIDTHS[effectiveTab];
 	const collapseButton = <CollapseButton onClick={() => setCollapsed(true)} />;
 
-	const contentKey =
-		effectiveTab === "sources" && documentsOpen
-			? "sources"
-			: effectiveTab === "report" && reportOpen
-				? "report"
-				: null;
+	if (!isVisible) return null;
 
 	return (
-		<AnimatePresence>
-			{isVisible && (
-				<motion.aside
-					key="right-panel"
-					initial={{ width: 0, opacity: 0 }}
-					animate={{ width: targetWidth, opacity: 1 }}
-					exit={{ width: 0, opacity: 0 }}
-					transition={{
-						width: { type: "spring", stiffness: 400, damping: 35, mass: 0.8 },
-						opacity: { duration: 0.2, ease: "easeOut" },
-					}}
-					style={{ willChange: "width, opacity", contain: "layout style" }}
-					className="flex h-full shrink-0 flex-col border-l bg-background overflow-hidden"
-				>
-					<div className="relative flex-1 min-h-0 overflow-hidden">
-						<AnimatePresence mode="popLayout" initial={false}>
-							{contentKey === "sources" && documentsPanel && (
-								<motion.div
-									key="sources"
-									initial={{ opacity: 0, x: 8 }}
-									animate={{ opacity: 1, x: 0 }}
-									exit={{ opacity: 0, x: -8 }}
-									transition={{ duration: 0.15, ease: "easeOut" }}
-									className="h-full"
-								>
-									<DocumentsSidebar
-										open={documentsPanel.open}
-										onOpenChange={documentsPanel.onOpenChange}
-										embedded
-										headerAction={collapseButton}
-									/>
-								</motion.div>
-							)}
-							{contentKey === "report" && (
-								<motion.div
-									key="report"
-									initial={{ opacity: 0, x: 8 }}
-									animate={{ opacity: 1, x: 0 }}
-									exit={{ opacity: 0, x: -8 }}
-									transition={{ duration: 0.15, ease: "easeOut" }}
-									className="h-full"
-								>
-									<div className="flex h-full flex-col">
-										<ReportPanelContent
-											reportId={reportState.reportId!}
-											title={reportState.title || "Report"}
-											onClose={closeReport}
-											shareToken={reportState.shareToken}
-										/>
-									</div>
-								</motion.div>
-							)}
-						</AnimatePresence>
+		<aside
+			style={{ width: targetWidth }}
+			className="flex h-full shrink-0 flex-col border-l bg-background overflow-hidden transition-[width] duration-200 ease-out"
+		>
+			<div className="relative flex-1 min-h-0 overflow-hidden">
+				{effectiveTab === "sources" && documentsOpen && documentsPanel && (
+					<div className="h-full">
+						<DocumentsSidebar
+							open={documentsPanel.open}
+							onOpenChange={documentsPanel.onOpenChange}
+							embedded
+							headerAction={collapseButton}
+						/>
 					</div>
-				</motion.aside>
-			)}
-		</AnimatePresence>
+				)}
+				{effectiveTab === "report" && reportOpen && (
+					<div className="h-full">
+						<ReportPanelContent
+							reportId={reportState.reportId!}
+							title={reportState.title || "Report"}
+							onClose={closeReport}
+							shareToken={reportState.shareToken}
+						/>
+					</div>
+				)}
+			</div>
+		</aside>
 	);
 }

surfsense_web/components/layout/ui/shell/LayoutShell.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { motion } from "motion/react";
 import { useMemo, useState } from "react";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { InboxItem } from "@/hooks/use-inbox";
@@ -308,27 +307,23 @@ export function LayoutShell({
 							isResizing={isResizing}
 						/>
 
-						<motion.main
-							layout={isResizing ? false : "position"}
-							style={{ contain: "inline-size" }}
-							className="flex-1 flex flex-col min-w-0"
-						>
+						<main className="flex-1 flex flex-col min-w-0">
 							<Header />
 
 							<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
 								{children}
 							</div>
-						</motion.main>
+						</main>
 
-						{/* Right panel — tabbed Sources/Report (desktop only) */}
-						{documentsPanel && (
-							<RightPanel
-								documentsPanel={{
-									open: documentsPanel.open,
-									onOpenChange: documentsPanel.onOpenChange,
-								}}
-							/>
-						)}
+					{/* Right panel — tabbed Sources/Report (desktop only) */}
+					{documentsPanel && (
+						<RightPanel
+							documentsPanel={{
+								open: documentsPanel.open,
+								onOpenChange: documentsPanel.onOpenChange,
+							}}
+						/>
+					)}
 
 						{/* Inbox Sidebar - slide-out panel */}
 						{inbox && (