From cfb90415406055f6113677c3e290cb436f86b06d Mon Sep 17 00:00:00 2001
From: Josel95 <jose.lopezh95@gmail.com>
Date: Tue, 16 Nov 2021 13:29:16 -0300
Subject: [PATCH 1/4] terminal dragging refactor

---
 .../src/lib/custom-hooks/useDragTerminal.tsx  | 67 +++++++++++++
 .../terminal/src/lib/remix-ui-terminal.tsx    | 95 ++++++-------------
 2 files changed, 97 insertions(+), 65 deletions(-)
 create mode 100644 libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx

diff --git a/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx b/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
new file mode 100644
index 0000000000..4a269d4d31
--- /dev/null
+++ b/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react'
+
+export const useDragTerminal = (offsetHeight: number) => {
+    const [isOpen, setIsOpen] = useState(true)
+    const [lastYPosition, setLastYPosition] = useState(0)
+    const [terminalPosition, setTerminalPosition] = useState(offsetHeight)
+    const [isDragging, setIsDragging] = useState(false)
+
+    const handleDraggingStart = (event: React.MouseEvent) => {
+        setLastYPosition(event.clientY)
+        setIsDragging(true)
+    }
+
+    const handleDragging = (event: MouseEvent) => {
+        event.preventDefault()
+
+        if (isDragging) {
+            const mouseYPosition = event.clientY
+            const difference = lastYPosition - mouseYPosition
+            const newTerminalPosition = terminalPosition + difference
+            setTerminalPosition(newTerminalPosition)
+            setLastYPosition(mouseYPosition)
+        }
+    }
+
+    const handleDraggingEnd = () => {
+        if(!isDragging) return
+
+        setIsDragging(false)
+
+        // Check terminal position to determine if it should be open or closed
+        setIsOpen(terminalPosition > offsetHeight)
+    }
+
+    const handleToggleTerminal = (event: React.MouseEvent<HTMLElement>) => {
+        event.preventDefault()
+        event.stopPropagation()
+
+        setIsOpen(!isOpen)
+    }
+
+    // Add event listeners for dragging
+    useEffect(() => {
+        document.addEventListener('mousemove', handleDragging)
+        document.addEventListener('mouseup', handleDraggingEnd)
+
+        return () => {
+            document.removeEventListener('mousemove', handleDragging)
+            document.removeEventListener('mouseup', handleDraggingEnd)
+        }
+    }, [handleDragging, handleDraggingEnd])
+
+    // Reset terminal position
+    useEffect(() => {
+        if(!terminalPosition){
+            setTerminalPosition(offsetHeight)
+        }
+    }, [terminalPosition, setTerminalPosition])
+
+    return {
+        isOpen,
+        terminalPosition,
+        isDragging,
+        handleDraggingStart,
+        handleToggleTerminal,
+    }
+}
\ No newline at end of file
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index 6225e4f50e..54c10f39c5 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -17,6 +17,7 @@ import RenderKnownTransactions from './components/RenderKnownTransactions' // es
 import parse from 'html-react-parser'
 import { EMPTY_BLOCK, KNOWN_TRANSACTION, RemixUiTerminalProps, UNKNOWN_TRANSACTION } from './types/terminalTypes'
 import { wrapScript } from './utils/wrapScript'
+import { useDragTerminal } from './custom-hooks/useDragTerminal'
 
 /* eslint-disable-next-line */
 export interface ClipboardEvent<T = Element> extends SyntheticEvent<T, any> {
@@ -25,13 +26,8 @@ export interface ClipboardEvent<T = Element> extends SyntheticEvent<T, any> {
 
 export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const { call, _deps, on, config, event, gistHandler, version } = props.plugin
-  const [toggleDownUp, setToggleDownUp] = useState('fa-angle-double-down')
   const [_cmdIndex, setCmdIndex] = useState(-1)
   const [_cmdTemp, setCmdTemp] = useState('')
-  // dragable state
-  const [leftHeight, setLeftHeight] = useState<undefined | number>(undefined)
-  const [separatorYPosition, setSeparatorYPosition] = useState<undefined | number>(undefined)
-  const [dragging, setDragging] = useState(false)
 
   const [newstate, dispatch] = useReducer(registerCommandReducer, initialState)
   const [cmdHistory, cmdHistoryDispatch] = useReducer(addCommandHistoryReducer, initialState)
@@ -78,6 +74,30 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   // terminal dragable
   const leftRef = useRef(null)
   const panelRef = useRef(null)
+  const terminalMenu = useRef(null)
+
+  const {
+    isOpen,
+    isDragging,
+    terminalPosition,
+    handleDraggingStart,
+    handleToggleTerminal
+  } = useDragTerminal((terminalMenu.current && terminalMenu.current.offsetHeight) || 0)
+
+  // Check open state
+  useEffect(() => {
+    const resizeValue = isOpen ? [config.get('terminal-top-offset')] : []
+    event.trigger('resize', resizeValue)
+  }, [isOpen])
+
+  useEffect(() => {
+    leftRef.current.style.backgroundColor = isDragging ? '#007AA6' : ''
+    leftRef.current.style.border = isDragging ? '2px solid #007AA6' : ''
+  }, [isDragging])
+
+  useEffect(() => {
+    event.trigger('resize', [terminalPosition + 32])
+  } , [terminalPosition])
 
   const scrollToBottom = () => {
     messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
@@ -193,18 +213,8 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     }
   }
 
-  const handleMinimizeTerminal = (e) => {
-    e.preventDefault()
-    e.stopPropagation()
-    if (toggleDownUp === 'fa-angle-double-down') {
-      setToggleDownUp('fa-angle-double-up')
-      event.trigger('resize', [])
-    } else {
-      const terminalTopOffset = config.get('terminal-top-offset')
-      event.trigger('resize', [terminalTopOffset])
-      setToggleDownUp('fa-angle-double-down')
-    }
-  }
+
+
 
   const focusinput = () => {
     inputEl.current.focus()
@@ -277,51 +287,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     }
   }
 
-  /* start of mouse events */
-
-  const mousedown = (event: MouseEvent) => {
-    setSeparatorYPosition(event.clientY)
-    setDragging(true)
-  }
-
-  const onMouseMove: any = (e: MouseEvent) => {
-    e.preventDefault()
-    if (dragging && leftHeight && separatorYPosition) {
-      const newLeftHeight = leftHeight + separatorYPosition - e.clientY
-      setSeparatorYPosition(e.clientY)
-      setLeftHeight(newLeftHeight)
-      event.trigger('resize', [newLeftHeight + 32])
-    }
-  }
-
-  const onMouseUp = () => {
-    leftRef.current.style.backgroundColor = ''
-    leftRef.current.style.border = ''
-    setDragging(false)
-  }
-
-  /* end of mouse event */
-
-  useEffect(() => {
-    document.addEventListener('mousemove', onMouseMove)
-    document.addEventListener('mouseup', onMouseUp)
-
-    return () => {
-      document.removeEventListener('mousemove', onMouseMove)
-      document.removeEventListener('mouseup', onMouseUp)
-    }
-  }, [onMouseMove, onMouseUp])
-
-  React.useEffect(() => {
-    if (panelRef) {
-      if (!leftHeight) {
-        setLeftHeight(panelRef.current.offsetHeight)
-        return
-      }
-      panelRef.current.style.height = `${leftHeight}px`
-    }
-  }, [leftHeight, setLeftHeight, panelRef])
-
   /* block contents that gets rendered from scriptRunner */
 
   const _blocksRenderer = (mode) => {
@@ -463,9 +428,9 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   return (
     <div style={{ height: '323px', flexGrow: 1 }} className='panel' ref={panelRef}>
       <div className="bar">
-        <div className="dragbarHorizontal" onMouseDown={mousedown} ref={leftRef}></div>
-        <div className="menu border-top border-dark bg-light" data-id="terminalToggleMenu">
-          <i className={`mx-2 toggleTerminal fas ${toggleDownUp}`} data-id="terminalToggleIcon" onClick={ handleMinimizeTerminal }></i>
+        <div className="dragbarHorizontal" onMouseDown={handleDraggingStart} ref={leftRef}></div>
+        <div className="menu border-top border-dark bg-light" ref={terminalMenu} data-id="terminalToggleMenu">
+          <i className={`mx-2 toggleTerminal fas ${isOpen ? 'fa-angle-double-down' : 'fa-angle-double-up'}`} data-id="terminalToggleIcon" onClick={handleToggleTerminal}></i>
           <div className="mx-2 console" id="clearConsole" data-id="terminalClearConsole" onClick={handleClearConsole} >
             <i className="fas fa-ban" aria-hidden="true" title="Clear console"
             ></i>

From cf716f4eea7c9d9d066bab0c212be6219f37e235 Mon Sep 17 00:00:00 2001
From: Josel95 <jose.lopezh95@gmail.com>
Date: Tue, 16 Nov 2021 13:39:27 -0300
Subject: [PATCH 2/4] fixed bug when scrolling terminal when is closed

---
 .../terminal/src/lib/custom-hooks/useDragTerminal.tsx  | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx b/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
index 4a269d4d31..89d24f6f19 100644
--- a/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
@@ -4,6 +4,8 @@ export const useDragTerminal = (offsetHeight: number) => {
     const [isOpen, setIsOpen] = useState(true)
     const [lastYPosition, setLastYPosition] = useState(0)
     const [terminalPosition, setTerminalPosition] = useState(offsetHeight)
+    // Used to save position of the terminal when it is closed
+    const [lastTerminalPosition, setLastTerminalPosition] = useState(offsetHeight)
     const [isDragging, setIsDragging] = useState(false)
 
     const handleDraggingStart = (event: React.MouseEvent) => {
@@ -36,6 +38,14 @@ export const useDragTerminal = (offsetHeight: number) => {
         event.preventDefault()
         event.stopPropagation()
 
+        if(isOpen) {
+            setLastTerminalPosition(terminalPosition)
+            setLastYPosition(0)
+            setTerminalPosition(offsetHeight)
+        } else {
+            setTerminalPosition(lastTerminalPosition)
+        }
+
         setIsOpen(!isOpen)
     }
 

From e5bfd2658ddae649ca61b6a17b19e0dd1e9ab330 Mon Sep 17 00:00:00 2001
From: Josel95 <jose.lopezh95@gmail.com>
Date: Tue, 16 Nov 2021 13:45:03 -0300
Subject: [PATCH 3/4] get saved terminal position

---
 .../src/lib/custom-hooks/useDragTerminal.tsx     | 16 ++++++++--------
 .../terminal/src/lib/remix-ui-terminal.tsx       |  7 +++++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx b/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
index 89d24f6f19..cdd4f6dc6a 100644
--- a/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react'
 
-export const useDragTerminal = (offsetHeight: number) => {
-    const [isOpen, setIsOpen] = useState(true)
+export const useDragTerminal = (minHeight: number, defaultPosition: number) => {
+    const [isOpen, setIsOpen] = useState(defaultPosition > minHeight)
     const [lastYPosition, setLastYPosition] = useState(0)
-    const [terminalPosition, setTerminalPosition] = useState(offsetHeight)
+    const [terminalPosition, setTerminalPosition] = useState(defaultPosition)
     // Used to save position of the terminal when it is closed
-    const [lastTerminalPosition, setLastTerminalPosition] = useState(offsetHeight)
+    const [lastTerminalPosition, setLastTerminalPosition] = useState(defaultPosition)
     const [isDragging, setIsDragging] = useState(false)
 
     const handleDraggingStart = (event: React.MouseEvent) => {
@@ -31,7 +31,7 @@ export const useDragTerminal = (offsetHeight: number) => {
         setIsDragging(false)
 
         // Check terminal position to determine if it should be open or closed
-        setIsOpen(terminalPosition > offsetHeight)
+        setIsOpen(terminalPosition > minHeight)
     }
 
     const handleToggleTerminal = (event: React.MouseEvent<HTMLElement>) => {
@@ -41,9 +41,9 @@ export const useDragTerminal = (offsetHeight: number) => {
         if(isOpen) {
             setLastTerminalPosition(terminalPosition)
             setLastYPosition(0)
-            setTerminalPosition(offsetHeight)
+            setTerminalPosition(minHeight)
         } else {
-            setTerminalPosition(lastTerminalPosition)
+            setTerminalPosition(lastTerminalPosition <= minHeight ? 323 : lastTerminalPosition)
         }
 
         setIsOpen(!isOpen)
@@ -63,7 +63,7 @@ export const useDragTerminal = (offsetHeight: number) => {
     // Reset terminal position
     useEffect(() => {
         if(!terminalPosition){
-            setTerminalPosition(offsetHeight)
+            setTerminalPosition(defaultPosition)
         }
     }, [terminalPosition, setTerminalPosition])
 
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index 54c10f39c5..5c3cd54c33 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -76,13 +76,16 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const panelRef = useRef(null)
   const terminalMenu = useRef(null)
 
+  const terminalMenuOffsetHeight = (terminalMenu.current && terminalMenu.current.offsetHeight) || 35
+  const terminalDefaultPosition = config.get('terminal-top-offset')
+
   const {
     isOpen,
     isDragging,
     terminalPosition,
     handleDraggingStart,
     handleToggleTerminal
-  } = useDragTerminal((terminalMenu.current && terminalMenu.current.offsetHeight) || 0)
+  } = useDragTerminal(terminalMenuOffsetHeight, terminalDefaultPosition)
 
   // Check open state
   useEffect(() => {
@@ -96,7 +99,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   }, [isDragging])
 
   useEffect(() => {
-    event.trigger('resize', [terminalPosition + 32])
+    event.trigger('resize', [terminalPosition])
   } , [terminalPosition])
 
   const scrollToBottom = () => {

From 67f0ac842d7c7c8e8b86cf8b009c063559e8a457 Mon Sep 17 00:00:00 2001
From: Josel95 <jose.lopezh95@gmail.com>
Date: Thu, 25 Nov 2021 08:29:20 -0300
Subject: [PATCH 4/4] changed terminal dragbar styles

---
 libs/remix-ui/terminal/src/lib/remix-ui-terminal.css | 5 +++++
 libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx | 7 +------
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
index ca50eee4dc..74b88d8b76 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
@@ -151,6 +151,11 @@ element.style {
     cursor            : row-resize;
     z-index           : 999;
   }
+
+  .dragbarDragging {
+    background-color: var(--primary);
+    border: 2px solid var(--primary);
+  }
   
   .console {
     cursor           : pointer;
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index 5c3cd54c33..420ec850bf 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -93,11 +93,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     event.trigger('resize', resizeValue)
   }, [isOpen])
 
-  useEffect(() => {
-    leftRef.current.style.backgroundColor = isDragging ? '#007AA6' : ''
-    leftRef.current.style.border = isDragging ? '2px solid #007AA6' : ''
-  }, [isDragging])
-
   useEffect(() => {
     event.trigger('resize', [terminalPosition])
   } , [terminalPosition])
@@ -431,7 +426,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   return (
     <div style={{ height: '323px', flexGrow: 1 }} className='panel' ref={panelRef}>
       <div className="bar">
-        <div className="dragbarHorizontal" onMouseDown={handleDraggingStart} ref={leftRef}></div>
+        <div className={`dragbarHorizontal ${isDragging ? 'dragbarDragging' : ''}`} onMouseDown={handleDraggingStart} ref={leftRef}></div>
         <div className="menu border-top border-dark bg-light" ref={terminalMenu} data-id="terminalToggleMenu">
           <i className={`mx-2 toggleTerminal fas ${isOpen ? 'fa-angle-double-down' : 'fa-angle-double-up'}`} data-id="terminalToggleIcon" onClick={handleToggleTerminal}></i>
           <div className="mx-2 console" id="clearConsole" data-id="terminalClearConsole" onClick={handleClearConsole} >