From 4c52f550bbc28d657828a05a1c5806dc854e0d60 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 21 May 2026 23:52:08 -0700
Subject: [PATCH] feat(terminal): animate panel open/close with motion/react

Panel fades in and grows in height using AnimatePresence + motion.div.
Pushes the composer up smoothly as it expands. Reverse on close.
---
 .../src/features/terminal/TerminalPanel.tsx   | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/desktop/src/features/terminal/TerminalPanel.tsx b/desktop/src/features/terminal/TerminalPanel.tsx
index d5450304f6..4613787b88 100644
--- a/desktop/src/features/terminal/TerminalPanel.tsx
+++ b/desktop/src/features/terminal/TerminalPanel.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { AnimatePresence, motion } from "motion/react";
 
 import { TerminalInstance } from "./TerminalInstance";
 
@@ -80,20 +81,28 @@ export function TerminalPanel({ channelId, isOpen }: TerminalPanelProps) {
     [heightPx],
   );
 
-  if (!isOpen) return null;
-
   return (
-    <div className="px-4 pb-2 pt-1">
-      <div
-        className="pointer-events-auto relative flex flex-col overflow-hidden rounded-2xl border border-border/50 shadow-[0_4px_24px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.35)]"
-        style={{ height: `${heightPx}px` }}
-        onPointerDown={handleResizeStart}
-      >
-        {/* Terminal content */}
-        <div className="min-h-0 flex-1 bg-terminal p-2">
-          <TerminalInstance channelId={channelId} isVisible={isOpen} />
-        </div>
-      </div>
-    </div>
+    <AnimatePresence>
+      {isOpen ? (
+        <motion.div
+          key="terminal-panel"
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: heightPx + 12, opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          transition={{ duration: 0.2, ease: "easeOut" }}
+          className="overflow-hidden px-4 pb-2 pt-1"
+        >
+          <div
+            className="pointer-events-auto relative flex h-full flex-col overflow-hidden rounded-2xl border border-border/50 shadow-[0_4px_24px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.35)]"
+            onPointerDown={handleResizeStart}
+          >
+            {/* Terminal content */}
+            <div className="min-h-0 flex-1 bg-terminal p-2">
+              <TerminalInstance channelId={channelId} isVisible={isOpen} />
+            </div>
+          </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
   );
 }