Merge pull request #1965 from ethereum/dragbar

terminal hide

apps/remix-ide/src/app/panels/layout.ts

@@ -80,7 +80,8 @@ export class Layout extends Plugin {
     const params = queryParams.get()
     if (params.minimizeterminal || params.embed) {
       this.panels.terminal.minimized = true
-      this.event.emit('change', null)
+      this.event.emit('change', this.panels)
+      this.emit('change', this.panels)
     }
     if (params.minimizesidepanel || params.embed) {
       this.event.emit('minimizesidepanel')

libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx

@@ -20,6 +20,7 @@ const DragBar = (props: IRemixDragBarUi) => {
     props.refObject.current.setAttribute('style', `height: ${h}px;`)
     setDragBarPosY(window.innerHeight - props.refObject.current.offsetHeight)
     setDragState(false)
+    props.setHideStatus(false)
   }
   const handleResize = () => {
     setDragBarPosY(window.innerHeight - props.refObject.current.offsetHeight)

libs/remix-ui/panel/src/lib/main/main-panel.tsx

@@ -37,14 +37,24 @@ const RemixUIMainPanel = () => {
     appContext.layout.event.on('change', () => {
       renderPanels()
     })
+
+    return () => {
+      appContext.layout.event.off('change')
+    }
   }, [])
 
+  const showTerminal = (hide: boolean) => {
+    appContext.layout.panels.terminal.minimized = hide
+    appContext.layout.event.emit('change', appContext.layout.panels)
+    appContext.layout.emit('change', appContext.layout.panels)
+  }
+
   return (
     <div className="mainview">
       {Object.values(plugins).map((pluginRecord, i) => {
         return (
           <React.Fragment key={`mainView${i}`}>
-            {(pluginRecord.profile.name === 'terminal') ? <DragBar key='dragbar-terminal' hidden={pluginRecord.minimized || false} setHideStatus={() => {}} refObject={terminalRef}></DragBar> : null}
+            {(pluginRecord.profile.name === 'terminal') ? <DragBar key='dragbar-terminal' hidden={pluginRecord.minimized || false} setHideStatus={showTerminal} refObject={terminalRef}></DragBar> : null}
             <RemixUIPanelPlugin
               ref={refs[i]}
               key={pluginRecord.profile.name}

libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

@@ -419,6 +419,16 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     props.plugin.call('layout', 'minimize', props.plugin.profile.name, isOpen)
   }
 
+  useEffect(() => {
+    props.plugin.on('layout', 'change', (panels) => {
+      setIsOpen(!panels.terminal.minimized)
+    })
+
+    return () => {
+      props.plugin.off('layout', 'change')
+    }
+  }, [])
+
   const classNameBlock = 'remix_ui_terminal_block px-4 py-1 text-break'
 
   return (