maximize bottom panel

Author: Aniket-Engg

apps/remix-ide/src/app/panels/terminal.tsx

@@ -19,7 +19,7 @@ function register(api) { KONSOLES.push(api) }
 const profile = {
   displayName: 'Terminal',
   name: 'terminal',
-  methods: ['log', 'logHtml', 'togglePanel', 'isPanelHidden'],
+  methods: ['log', 'logHtml', 'togglePanel', 'isPanelHidden', 'maximizePanel'],
   events: [],
   description: 'Remix IDE terminal',
   version: packageJson.version
@@ -55,8 +55,10 @@ export default class Terminal extends Plugin {
   dispatch: any
   terminalApi: any
   isHidden: boolean
+  isMaximized: boolean
   constructor(opts, api) {
     super(profile)
+    this.isMaximized = false
     this.fileImport = new CompilerImports()
     this.event = new EventManager()
     this.globalRegistry = Registry.getInstance()
@@ -116,6 +118,21 @@ export default class Terminal extends Plugin {
 
   onActivation() {
     this.renderComponent()
+
+    // Listen for file changes - auto-restore terminal panel if maximized when main panel is used
+    this.on('fileManager', 'currentFileChanged', () => {
+      if (this.isMaximized) {
+        this.maximizePanel() // This will toggle and restore the panel
+      }
+    })
+
+    // Listen for tab/app switches - auto-restore terminal panel if maximized
+    this.on('tabs', 'switchApp', () => {
+      if (this.isMaximized) {
+        this.maximizePanel() // This will toggle and restore the panel
+      }
+    })
+
     // Initialize isHidden state from panelStates in localStorage
     const panelStatesStr = window.localStorage.getItem('panelStates')
     const panelStates = panelStatesStr ? JSON.parse(panelStatesStr) : {}
@@ -204,6 +221,41 @@ export default class Terminal extends Plugin {
     return this.isHidden
   }
 
+  async maximizePanel() {
+    if (!this.isMaximized) {
+      // Hide all main panel content except terminal
+      const mainView = document.querySelector('.mainview')
+      if (mainView) {
+        // Find all child elements with -wrap class except terminal-wrap
+        const wraps = mainView.querySelectorAll('[class*="-wrap"]')
+        wraps.forEach((wrap: HTMLElement) => {
+          if (!wrap.classList.contains('terminal-wrap')) {
+            wrap.classList.add('d-none')
+          }
+        })
+      }
+
+      this.isMaximized = true
+      trackMatomoEvent(this, { category: 'topbar', action: 'terminalPanel', name: 'maximized', isClick: false })
+      this.emit('terminalPanelMaximized')
+    } else {
+      // Show all main panel content
+      const mainView = document.querySelector('.mainview')
+      if (mainView) {
+        // Find all child elements with -wrap class and show them
+        const wraps = mainView.querySelectorAll('[class*="-wrap"]')
+        wraps.forEach((wrap: HTMLElement) => {
+          wrap.classList.remove('d-none')
+        })
+      }
+
+      this.isMaximized = false
+      trackMatomoEvent(this, { category: 'topbar', action: 'terminalPanel', name: 'restored', isClick: false })
+      this.emit('terminalPanelRestored')
+    }
+    this.renderComponent()
+  }
+
   setDispatch(dispatch) {
     this.dispatch = dispatch
   }
@@ -219,6 +271,8 @@ export default class Terminal extends Plugin {
           plugin={state.plugin}
           onReady={state.onReady}
           visible={true}
+          isMaximized={this.isMaximized}
+          maximizePanel={this.maximizePanel.bind(this)}
         />
       </>)
   }

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

@@ -1,19 +1,16 @@
 import { appPlatformTypes, platformContext } from '@remix-ui/app'
-import { CustomTooltip } from '@remix-ui/helper'
 import React, { useState, useEffect, useRef, useContext } from 'react' // eslint-disable-line
-import { FormattedMessage, useIntl } from 'react-intl'
-import { listenOnNetworkAction } from '../actions/terminalAction'
 import { TerminalContext } from '../context'
 import { RemixUiTerminalProps } from '../types/terminalTypes'
 import { RemixUITerminalMenu } from './remix-ui-terminal-menu'
 import { RemixUITerminalMenuToggle } from './remix-ui-terminal-menu-toggle'
+import { RemixUITerminalMenuMaximize } from './remix-ui-terminal-menu-maximize'
 import { RemixUIXtermMenu } from '../../../../xterm/src/lib/components/remix-ui-terminal-menu-xterm'
 import { RemixUITerminalMenuButtons } from './remix-ui-terminal-menu-buttons'
 
 export const RemixUITerminalBar = (props: RemixUiTerminalProps) => {
   const { terminalState, xtermState } = useContext(TerminalContext)
   const platform = useContext(platformContext)
-  const intl = useIntl()
   const terminalMenu = useRef(null)
 
   useEffect(() => {
@@ -31,10 +28,12 @@ export const RemixUITerminalBar = (props: RemixUiTerminalProps) => {
           <div className='d-flex flex-row w-100 justify-content-end align-items-center'>
             <RemixUITerminalMenuButtons {...props} />
             {xtermState.showOutput? <RemixUITerminalMenu {...props} />: <RemixUIXtermMenu {...props} />}
+            <RemixUITerminalMenuMaximize {...props} />
             <RemixUITerminalMenuToggle {...props} />
           </div> :
           <div className='d-flex flex-row w-100 justify-content-end align-items-center'>
             <RemixUITerminalMenu {...props} />
+            <RemixUITerminalMenuMaximize {...props} />
             <RemixUITerminalMenuToggle {...props} />
           </div>
         }

libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-maximize.tsx

@@ -0,0 +1,33 @@
+import { CustomTooltip } from '@remix-ui/helper'
+import React from 'react' // eslint-disable-line
+import { FormattedMessage } from 'react-intl'
+import { RemixUiTerminalProps } from '../types/terminalTypes'
+
+export const RemixUITerminalMenuMaximize = (props: RemixUiTerminalProps) => {
+
+  async function handleMaximizeTerminal(): Promise<void> {
+    if (props.maximizePanel) {
+      await props.maximizePanel()
+    }
+  }
+
+  return (
+    <>
+      <CustomTooltip
+        placement="top"
+        tooltipId="terminalMaximize"
+        tooltipClasses="text-nowrap"
+        tooltipText={props.isMaximized ? "Minimize Panel" : "Maximize Panel"}
+      >
+        <div
+          className="codicon-screen-icon mx-2"
+          data-id="maximizeBottomPanel"
+          onClick={handleMaximizeTerminal}
+          style={{ cursor: 'pointer' }}
+        >
+          {props.isMaximized ? '\ueb4d' : '\ueb4c' /* Actual icons were not being rendered, so used unicode for codicon-screen-full & codicon-screen-normal icons*/ }
+        </div>
+      </CustomTooltip>
+    </>
+  )
+}

libs/remix-ui/terminal/src/lib/types/terminalTypes.ts

@@ -35,4 +35,6 @@ export interface RemixUiTerminalProps {
   plugin: any,
   onReady: (api: any) => void,
   visible: boolean,
+  isMaximized?: boolean,
+  maximizePanel?: () => void,
 }