fix: plan content view losing scroll position on unmount (#1307)

Co-authored-by: Jonathan Mieloo <32547391+jonathanlab@users.noreply.github.com>

Author: CaioDGallo

apps/code/src/renderer/components/permissions/PlanContent.tsx

@@ -1,14 +1,43 @@
 import { Box } from "@radix-ui/themes";
+import { useEffect, useRef } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
+const planScrollPosition = new Map<string, number>();
+
 interface PlanContentProps {
+  id: string;
   plan: string;
 }
 
-export function PlanContent({ plan }: PlanContentProps) {
+export function PlanContent({ id, plan }: PlanContentProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    const position = planScrollPosition.get(id);
+    if (position !== undefined) {
+      el.scrollTop = position;
+    }
+
+    const handleScroll = () => {
+      planScrollPosition.set(id, el.scrollTop);
+    };
+
+    el.addEventListener("scroll", handleScroll, { passive: true });
+
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  }, [id]);
+
   return (
-    <Box className="max-h-[50vh] max-w-[750px] overflow-y-auto rounded-lg border-2 border-blue-6 bg-blue-2 p-4">
+    <Box
+      ref={scrollRef}
+      className="max-h-[50vh] max-w-[750px] overflow-y-auto rounded-lg border-2 border-blue-6 bg-blue-2 p-4"
+    >
       <Box className="plan-markdown text-blue-12">
         <ReactMarkdown remarkPlugins={[remarkGfm]}>{plan}</ReactMarkdown>
       </Box>

apps/code/src/renderer/features/sessions/components/session-update/PlanApprovalView.tsx

@@ -40,7 +40,9 @@ export function PlanApprovalView({
 
   return (
     <Box className="my-3">
-      {showPlanContent && planText && <PlanContent plan={planText} />}
+      {showPlanContent && planText && (
+        <PlanContent id={toolCall.toolCallId} plan={planText} />
+      )}
 
       {showResult && (
         <Flex align="center" gap="2" className="px-1">