1 files changed, 26 insertions, 9 deletions
diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx
index 01e184d6b..f5af09e5b 100644
--- a/src/client/views/UndoStack.tsx
+++ b/src/client/views/UndoStack.tsx
@@ -1,24 +1,41 @@
+import { action, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { UndoManager } from '../util/UndoManager';
-import './ScriptingRepl.scss';
+import './UndoStack.scss';
 
+interface UndoStackProps {
+    width?: number;
+    height?: number;
+    inline?: boolean;
+}
 @observer
-export class UndoStack extends React.Component {
+export class UndoStack extends React.Component<UndoStackProps> {
+    @observable static HideInline: boolean;
+    @observable static Expand: boolean;
     render() {
-        return (
-            <div className="scriptingRepl-outerContainer">
-                <div className="scriptingRepl-commandsContainer" ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })} style={{ background: UndoManager.batchCounter.get() ? 'yellow' : undefined }}>
+        return this.props.inline && UndoStack.HideInline ? null : (
+            <div
+                className="undoStack-outerContainer"
+                style={{ width: this.props.width, height: this.props.height ? (UndoStack.Expand ? 4 : 1) * this.props.height : undefined, top: UndoStack.Expand && this.props.height ? -this.props.height * 3 : undefined }}
+                onClick={action(e => (UndoStack.Expand = !UndoStack.Expand))}
+                onDoubleClick={action(e => (UndoStack.Expand = UndoStack.HideInline = false))}>
+                <div className="undoStack-commandsContainer" ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })} style={{ background: UndoManager.batchCounter.get() ? 'yellow' : undefined }}>
+                    <div className="undoStack-resultContainer" key={0}>
+                        <div className="undoStack-commandString" style={{ fontWeight: 'bold', textAlign: 'center' }}>
+                            Undo/Redo Stack
+                        </div>
+                    </div>
                     {UndoManager.undoStackNames.map((name, i) => (
-                        <div className="scriptingRepl-resultContainer" key={i}>
-                            <div className="scriptingRepl-commandString">{name.replace(/[^\.]*\./, '')}</div>
+                        <div className="undoStack-resultContainer" key={i}>
+                            <div className="undoStack-commandString">{name.replace(/[^\.]*\./, '')}</div>
                         </div>
                     ))}
                     {Array.from(UndoManager.redoStackNames)
                         .reverse()
                         .map((name, i) => (
-                            <div className="scriptingRepl-resultContainer" key={i}>
-                                <div className="scriptingRepl-commandString" style={{ fontWeight: 'bold', color: 'red' }}>
+                            <div className="undoStack-resultContainer" key={i}>
+                                <div className="undoStack-commandString" style={{ fontWeight: 'bold', color: 'red' }}>
                                     {name.replace(/[^\.]*\./, '')}
                                 </div>
                             </div>