Fix terminal panel

Author: pomber

packages/mini-editor/src/editor-frame.tsx

@@ -12,7 +12,6 @@ export {
   OutputPanel,
   TabsSnapshot,
   Tab,
-  TerminalPanel,
 }
 
 type Tab = {
@@ -329,24 +328,3 @@ function getPanelStyles(
 function tween(a: number, b: number, t: number) {
   return a + (b - a) * t
 }
-
-type TerminalPanelProps = {
-  height?: number
-  children: React.ReactNode
-}
-
-function TerminalPanel({
-  height,
-  children,
-}: TerminalPanelProps) {
-  return !height ? null : (
-    <div className="ch-editor-terminal" style={{ height }}>
-      <div className="ch-editor-terminal-tab">
-        <span>Terminal</span>
-      </div>
-      <div className="ch-editor-terminal-content">
-        {children}
-      </div>
-    </div>
-  )
-}

packages/mini-editor/src/editor-transition.tsx

@@ -12,6 +12,7 @@ import {
   useSnapshots,
 } from "./use-snapshots"
 import { getTabs } from "./tabs"
+import { TerminalPanel } from "./terminal-panel"
 
 export { EditorTransition, EditorTransitionProps }
 
@@ -45,11 +46,21 @@ function EditorTransition({
     backward,
     codeProps
   )
+
+  const terminalPanel = (
+    <TerminalPanel
+      prev={prev.terminal}
+      next={next.terminal}
+      t={t}
+      backward={backward}
+    />
+  )
   return (
     <EditorFrame
       ref={ref}
       northPanel={northPanel}
       southPanel={southPanel}
+      terminalPanel={terminalPanel}
       {...rest}
     />
   )

packages/mini-editor/src/mini-editor-hike.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { EditorFrame, TerminalPanel } from "./editor-frame"
+import { EditorFrame } from "./editor-frame"
 import { InnerTerminal } from "@code-hike/mini-terminal"
 import { Code } from "./code"
 import {

packages/mini-editor/src/terminal-panel.tsx

@@ -0,0 +1,70 @@
+import { InnerTerminal } from "@code-hike/mini-terminal"
+import React from "react"
+
+type TerminalPanelProps = {
+  prev: string | undefined
+  next: string | undefined
+  t: number
+  backward: boolean
+}
+
+export function TerminalPanel({
+  prev,
+  next,
+  t,
+  backward,
+}: TerminalPanelProps) {
+  const height = getHeight({ prev, next, t, backward })
+  return !height ? null : (
+    <div className="ch-editor-terminal" style={{ height }}>
+      <div className="ch-editor-terminal-tab">
+        <span>Terminal</span>
+      </div>
+      <div className="ch-editor-terminal-content">
+        <InnerTerminal
+          steps={[
+            { text: prev || "" },
+            { text: next || "" },
+          ]}
+          progress={t}
+        />
+        )
+      </div>
+    </div>
+  )
+}
+
+function getHeight({
+  prev,
+  next,
+  t,
+  backward,
+}: TerminalPanelProps) {
+  if (!prev && !next) return 0
+  if (!prev && next) return MAX_HEIGHT * Math.min(t * 4, 1)
+  if (prev && !next)
+    return MAX_HEIGHT * Math.max(1 - t * 4, 0)
+  return MAX_HEIGHT
+}
+
+const MAX_HEIGHT = 150
+function getTerminalHeight(steps: any, progress: number) {
+  if (!steps.length) {
+    return 0
+  }
+
+  const prevIndex = Math.floor(progress)
+  const nextIndex = Math.ceil(progress)
+  const prevTerminal =
+    steps[prevIndex] && steps[prevIndex].terminal
+  const nextTerminal = steps[nextIndex].terminal
+
+  if (!prevTerminal && !nextTerminal) return 0
+
+  if (!prevTerminal && nextTerminal)
+    return MAX_HEIGHT * Math.min((progress % 1) * 4, 1)
+  if (prevTerminal && !nextTerminal)
+    return MAX_HEIGHT * Math.max(1 - (progress % 1) * 4, 0)
+
+  return MAX_HEIGHT
+}