From 21e7f600be374b8e97408407094134543a30a855 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 11 Mar 2026 02:02:05 +0530
Subject: [PATCH] feat: enhance RightPanel and LayoutShell components with
 improved animations and layout handling; integrate motion effects for
 smoother transitions

---
 .../layout/ui/right-panel/RightPanel.tsx      | 105 +++++++++---------
 .../layout/ui/shell/LayoutShell.tsx           |   5 +-
 2 files changed, 56 insertions(+), 54 deletions(-)

diff --git a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
index aea9e2836..232518ba7 100644
--- a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
+++ b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
@@ -3,7 +3,7 @@
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { PanelRight, PanelRightClose } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import { useEffect } from "react";
+import { startTransition, useEffect } from "react";
 import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
 import { rightPanelCollapsedAtom, rightPanelTabAtom } from "@/atoms/layout/right-panel.atom";
@@ -54,8 +54,8 @@ export function RightPanelExpandButton() {
 					<Button
 						variant="ghost"
 						size="icon"
-						onClick={() => setCollapsed(false)}
-						className="h-8 w-8 shrink-0"
+					onClick={() => startTransition(() => setCollapsed(false))}
+					className="h-8 w-8 shrink-0"
 					>
 						<PanelRight className="h-4 w-4" />
 						<span className="sr-only">Expand panel</span>
@@ -109,56 +109,57 @@ export function RightPanel({ documentsPanel }: RightPanelProps) {
 	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: "tween", duration: 0.25, ease: [0.4, 0, 0.2, 1] },
-						opacity: { duration: 0.15 },
-					}}
-					className="flex h-full shrink-0 flex-col border-l bg-background overflow-hidden"
-				>
-					<div className="flex-1 min-h-0 overflow-hidden">
-						<AnimatePresence mode="wait" initial={false}>
-							{contentKey === "sources" && documentsPanel && (
-								<motion.div
-									key="sources"
-									initial={{ opacity: 0 }}
-									animate={{ opacity: 1 }}
-									exit={{ opacity: 0 }}
-									transition={{ duration: 0.12 }}
-									className="h-full"
-								>
-									<DocumentsSidebar
-										open={documentsPanel.open}
-										onOpenChange={documentsPanel.onOpenChange}
-										embedded
-										headerAction={collapseButton}
+			<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}
 									/>
-								</motion.div>
-							)}
-							{contentKey === "report" && (
-								<motion.div
-									key="report"
-									initial={{ opacity: 0 }}
-									animate={{ opacity: 1 }}
-									exit={{ opacity: 0 }}
-									transition={{ duration: 0.12 }}
-									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>
+								</div>
+							</motion.div>
+						)}
+					</AnimatePresence>
 					</div>
 				</motion.aside>
 			)}
diff --git a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
index 8ac897fd4..df8d7a04b 100644
--- a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
+++ b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
@@ -1,5 +1,6 @@
 "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";
@@ -307,13 +308,13 @@ export function LayoutShell({
 						isResizing={isResizing}
 					/>
 
-						<main className="flex-1 flex flex-col min-w-0">
+						<motion.main layout="position" style={{ contain: "inline-size" }} className="flex-1 flex flex-col min-w-0">
 							<Header />
 
 							<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
 								{children}
 							</div>
-						</main>
+						</motion.main>
 
 						{/* Right panel — tabbed Sources/Report (desktop only) */}
 						{documentsPanel && (