From a28da89e896cada1f722ccf6eb19f40b354fe5cd Mon Sep 17 00:00:00 2001 From: Aniket-Engg Date: Mon, 8 Dec 2025 15:23:15 +0530 Subject: [PATCH 01/11] maximize right side panel --- .../src/app/components/right-side-panel.tsx | 68 ++++++++++++++++++- .../app/src/lib/remix-app/style/remix-app.css | 4 ++ .../panel/src/lib/plugins/panel-header.tsx | 15 +++- 3 files changed, 85 insertions(+), 2 deletions(-) diff --git a/apps/remix-ide/src/app/components/right-side-panel.tsx b/apps/remix-ide/src/app/components/right-side-panel.tsx index 66eef3460a6..d7008ca5d3b 100644 --- a/apps/remix-ide/src/app/components/right-side-panel.tsx +++ b/apps/remix-ide/src/app/components/right-side-panel.tsx @@ -25,9 +25,13 @@ export class RightSidePanel extends AbstractPanel { highlightStamp: number hiddenPlugin: any isHidden: boolean + isMaximized: boolean + maximizedState: { leftPanelHidden: boolean, terminalPanelHidden: boolean } constructor() { super(rightSidePanel) + this.isMaximized = false + this.maximizedState = { leftPanelHidden: false, terminalPanelHidden: false } } onActivation() { @@ -225,6 +229,68 @@ export class RightSidePanel extends AbstractPanel { return this.isHidden } + async maximizePanel() { + if (!this.isMaximized) { + // Store the current state of panels before maximizing + const leftPanelHidden = await this.call('sidePanel', 'isPanelHidden') + const terminalPanelHidden = await this.call('terminal', 'isPanelHidden') + + this.maximizedState = { leftPanelHidden, terminalPanelHidden } + + // Hide left panel if it's visible + if (!leftPanelHidden) { + await this.call('sidePanel', 'togglePanel') + } + + // Hide terminal panel if it's visible + if (!terminalPanelHidden) { + await this.call('terminal', 'togglePanel') + } + + // Hide main panel (center panel with editor) + const mainPanel = document.querySelector('#main-panel') + mainPanel?.classList.add('d-none') + + // Make right panel take full width + const rightPanel = document.querySelector('#right-side-panel') + rightPanel?.classList.add('right-panel-maximized') + + this.isMaximized = true + trackMatomoEvent(this, { category: 'topbar', action: 'rightSidePanel', name: 'maximized', isClick: false }) + this.emit('rightSidePanelMaximized') + this.events.emit('rightSidePanelMaximized') + } else { + // Restore panels to their previous state + const leftPanelHidden = await this.call('sidePanel', 'isPanelHidden') + const terminalPanelHidden = await this.call('terminal', 'isPanelHidden') + + // Restore left panel if it was visible before maximizing + if (!this.maximizedState.leftPanelHidden && leftPanelHidden) { + await this.call('sidePanel', 'togglePanel') + } + + // Restore terminal panel if it was visible before maximizing + if (!this.maximizedState.terminalPanelHidden && terminalPanelHidden) { + await this.call('terminal', 'togglePanel') + } + + // Show main panel + const mainPanel = document.querySelector('#main-panel') + mainPanel?.classList.remove('d-none') + + // Remove full width from right panel + const rightPanel = document.querySelector('#right-side-panel') + rightPanel?.classList.remove('right-panel-maximized') + + this.isMaximized = false + trackMatomoEvent(this, { category: 'topbar', action: 'rightSidePanel', name: 'restored', isClick: false }) + this.emit('rightSidePanelRestored') + this.events.emit('rightSidePanelRestored') + } + + this.renderComponent() + } + highlight () { // If the right side panel is hidden, unhide it when a pinned icon is clicked if (this.isHidden) { @@ -262,7 +328,7 @@ export class RightSidePanel extends AbstractPanel { } updateComponent(state: any) { - return } { ...state } /> + return } { ...state } /> } renderComponent() { diff --git a/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css b/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css index 2b7675e3a4e..69cffcfeb09 100644 --- a/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css +++ b/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css @@ -49,6 +49,10 @@ pre { transition : width 0.25s; padding-bottom : 1.4rem; } +.right-panel-maximized { + width : 100% !important; + flex : 1; +} .highlightcode { position : absolute; z-index : 20; diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx index 6841ed4acdd..5ec9387895f 100644 --- a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx +++ b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx @@ -10,7 +10,9 @@ export interface RemixPanelProps { plugins: Record, pinView?: (profile: PluginRecord['profile'], view: PluginRecord['view']) => void, unPinView?: (profile: PluginRecord['profile']) => void, - togglePanel?: () => void + togglePanel?: () => void, + maximizePanel?: () => void, + isMaximized?: boolean } const RemixUIPanelHeader = (props: RemixPanelProps) => { const [plugin, setPlugin] = useState() @@ -45,6 +47,10 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => { props.togglePanel && props.togglePanel() } + const maximizePanelHandler = () => { + props.maximizePanel && props.maximizePanel() + } + const tooltipChild = const FilePanelHeading = () => { @@ -99,6 +105,13 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
+ +
+
Date: Mon, 8 Dec 2025 15:47:06 +0530 Subject: [PATCH 02/11] restore on left or bottom panel display --- .../src/app/components/right-side-panel.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/apps/remix-ide/src/app/components/right-side-panel.tsx b/apps/remix-ide/src/app/components/right-side-panel.tsx index d7008ca5d3b..c4c4f7e83ba 100644 --- a/apps/remix-ide/src/app/components/right-side-panel.tsx +++ b/apps/remix-ide/src/app/components/right-side-panel.tsx @@ -44,6 +44,20 @@ export class RightSidePanel extends AbstractPanel { } }) + // Listen for left panel being shown - auto-restore right panel if maximized + this.on('sidePanel', 'leftSidePanelShown', () => { + if (this.isMaximized) { + this.maximizePanel() // This will toggle and restore the panel + } + }) + + // Listen for terminal panel being shown - auto-restore right panel if maximized + this.on('terminal', 'terminalPanelShown', () => { + 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) : {} From 9e99caaaf5cc0856c16b5dd3634092a444171054 Mon Sep 17 00:00:00 2001 From: Aniket-Engg Date: Mon, 8 Dec 2025 21:10:13 +0530 Subject: [PATCH 03/11] fix icons --- .../panel/src/lib/plugins/panel-header.tsx | 8 +++++--- libs/remix-ui/panel/src/lib/plugins/panel.css | 18 ++++++++++++++++++ 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx index 5ec9387895f..6c12ca7dac1 100644 --- a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx +++ b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx @@ -105,12 +105,14 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
- +
+ > + {props.isMaximized ? '\ueb4d' : '\ueb4c' /* Actual icons were not being rendered, so used unicode for codicon-screen-full & codicon-screen-normal icons*/ } +
Date: Mon, 8 Dec 2025 21:55:48 +0530 Subject: [PATCH 04/11] shrink step by step --- .../src/app/components/right-side-panel.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/apps/remix-ide/src/app/components/right-side-panel.tsx b/apps/remix-ide/src/app/components/right-side-panel.tsx index c4c4f7e83ba..f351c800915 100644 --- a/apps/remix-ide/src/app/components/right-side-panel.tsx +++ b/apps/remix-ide/src/app/components/right-side-panel.tsx @@ -44,15 +44,22 @@ export class RightSidePanel extends AbstractPanel { } }) - // Listen for left panel being shown - auto-restore right panel if maximized - this.on('sidePanel', 'leftSidePanelShown', () => { + // Listen for terminal panel being shown - auto-restore right panel if maximized + this.on('terminal', 'terminalPanelShown', () => { if (this.isMaximized) { this.maximizePanel() // This will toggle and restore the panel } }) - // Listen for terminal panel being shown - auto-restore right panel if maximized - this.on('terminal', 'terminalPanelShown', () => { + // Listen for file changes - auto-restore right 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 right panel if maximized (includes home tab, file tabs, etc.) + this.on('tabs', 'switchApp', () => { if (this.isMaximized) { this.maximizePanel() // This will toggle and restore the panel } From be8ea9793009c6ee7f8d9b908038391f4ec22ba5 Mon Sep 17 00:00:00 2001 From: Aniket-Engg Date: Tue, 9 Dec 2025 15:31:25 +0530 Subject: [PATCH 05/11] centralize panel on maximize --- libs/remix-ui/app/src/lib/remix-app/style/remix-app.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css b/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css index 69cffcfeb09..05b24b140a5 100644 --- a/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css +++ b/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css @@ -50,8 +50,10 @@ pre { padding-bottom : 1.4rem; } .right-panel-maximized { - width : 100% !important; - flex : 1; + width : 50% !important; + max-width : 50%; + margin : 0 auto; + flex : none; } .highlightcode { position : absolute; From 8b302a3e17f155b3cacd369b0899aa955f81ce2c Mon Sep 17 00:00:00 2001 From: Aniket-Engg Date: Tue, 9 Dec 2025 15:53:23 +0530 Subject: [PATCH 06/11] fix move left while maximized --- .../src/app/components/right-side-panel.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/apps/remix-ide/src/app/components/right-side-panel.tsx b/apps/remix-ide/src/app/components/right-side-panel.tsx index f351c800915..6c98502bbe1 100644 --- a/apps/remix-ide/src/app/components/right-side-panel.tsx +++ b/apps/remix-ide/src/app/components/right-side-panel.tsx @@ -171,6 +171,30 @@ export class RightSidePanel extends AbstractPanel { const activePlugin = this.currentFocus() if (activePlugin !== profile.name) throw new Error(`Plugin ${profile.name} is not pinned`) + + // If the panel is maximized, restore left and main panels but not terminal + if (this.isMaximized) { + const leftPanelHidden = await this.call('sidePanel', 'isPanelHidden') + + // Restore left panel if it was visible before maximizing + if (!this.maximizedState.leftPanelHidden && leftPanelHidden) { + await this.call('sidePanel', 'togglePanel') + } + + // Show main panel + const mainPanel = document.querySelector('#main-panel') + mainPanel?.classList.remove('d-none') + + // Remove full width from right panel + const rightPanel = document.querySelector('#right-side-panel') + rightPanel?.classList.remove('right-panel-maximized') + + this.isMaximized = false + trackMatomoEvent(this, { category: 'topbar', action: 'rightSidePanel', name: 'restoredOnUnpin', isClick: false }) + this.emit('rightSidePanelRestored') + this.events.emit('rightSidePanelRestored') + } + await this.call('sidePanel', 'unPinView', profile, this.plugins[profile.name].view) super.remove(profile.name) // Clear hiddenPlugin and set panel to hidden state when no plugin is pinned From 2aa66f51bf7205e521415b2cb10e1fd975e9d86c Mon Sep 17 00:00:00 2001 From: Aniket-Engg Date: Tue, 9 Dec 2025 16:03:12 +0530 Subject: [PATCH 07/11] fix hide panel --- apps/remix-ide/src/app/components/right-side-panel.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/remix-ide/src/app/components/right-side-panel.tsx b/apps/remix-ide/src/app/components/right-side-panel.tsx index 6c98502bbe1..04ae3fb6f44 100644 --- a/apps/remix-ide/src/app/components/right-side-panel.tsx +++ b/apps/remix-ide/src/app/components/right-side-panel.tsx @@ -220,7 +220,7 @@ export class RightSidePanel extends AbstractPanel { return this.hiddenPlugin } - togglePanel () { + async togglePanel () { const pinnedPanel = document.querySelector('#right-side-panel') // Persist the hidden state to panelStates, preserving pluginProfile const panelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}') @@ -254,6 +254,11 @@ export class RightSidePanel extends AbstractPanel { this.emit('rightSidePanelShown') this.events.emit('rightSidePanelShown') } else { + // If the panel is maximized, restore all panels before hiding + if (this.isMaximized) { + await this.maximizePanel() // This will toggle and restore the panels + } + this.isHidden = true this.hiddenPlugin = pluginProfile pinnedPanel?.classList.add('d-none') From 02d94c04a1fe624c0ba8ebee89d7fcb2b10bbe95 Mon Sep 17 00:00:00 2001 From: Aniket-Engg Date: Tue, 9 Dec 2025 22:20:34 +0530 Subject: [PATCH 08/11] maximize bottom panel --- apps/remix-ide/src/app/panels/terminal.tsx | 56 ++++++++++++++++++- .../lib/components/remix-ui-terminal-bar.tsx | 7 +-- .../remix-ui-terminal-menu-maximize.tsx | 33 +++++++++++ .../terminal/src/lib/types/terminalTypes.ts | 2 + 4 files changed, 93 insertions(+), 5 deletions(-) create mode 100644 libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-maximize.tsx diff --git a/apps/remix-ide/src/app/panels/terminal.tsx b/apps/remix-ide/src/app/panels/terminal.tsx index 24967b11b83..5ac0700e1df 100644 --- a/apps/remix-ide/src/app/panels/terminal.tsx +++ b/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)} /> ) } diff --git a/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-bar.tsx b/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-bar.tsx index 0a443e2e218..0044c331f94 100644 --- a/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-bar.tsx +++ b/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) => {
{xtermState.showOutput? : } +
:
+
} diff --git a/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-maximize.tsx b/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-maximize.tsx new file mode 100644 index 00000000000..09039872308 --- /dev/null +++ b/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 { + if (props.maximizePanel) { + await props.maximizePanel() + } + } + + return ( + <> + +
+ {props.isMaximized ? '\ueb4d' : '\ueb4c' /* Actual icons were not being rendered, so used unicode for codicon-screen-full & codicon-screen-normal icons*/ } +
+ + + ) +} diff --git a/libs/remix-ui/terminal/src/lib/types/terminalTypes.ts b/libs/remix-ui/terminal/src/lib/types/terminalTypes.ts index 0de59411173..f904716a804 100644 --- a/libs/remix-ui/terminal/src/lib/types/terminalTypes.ts +++ b/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, } From 4fa67155dfeeea13d875877a092a2e01dc51b03f Mon Sep 17 00:00:00 2001 From: Aniket-Engg Date: Wed, 10 Dec 2025 15:37:10 +0530 Subject: [PATCH 09/11] show main panel on hide bottom panel --- .../src/lib/components/remix-ui-terminal-menu-maximize.tsx | 1 - .../src/lib/components/remix-ui-terminal-menu-toggle.tsx | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-maximize.tsx b/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-maximize.tsx index 09039872308..4dce22b21bc 100644 --- a/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-maximize.tsx +++ b/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-maximize.tsx @@ -1,6 +1,5 @@ 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) => { diff --git a/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-toggle.tsx b/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-toggle.tsx index d73b00cfb7a..113daad263e 100644 --- a/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-toggle.tsx +++ b/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-toggle.tsx @@ -5,6 +5,10 @@ import { RemixUiTerminalProps } from '../types/terminalTypes' export const RemixUITerminalMenuToggle = (props: RemixUiTerminalProps) => { async function handleToggleTerminal(): Promise { + // If panel is maximized, un-maximize it first to show main panel + if (props.isMaximized && props.maximizePanel) { + await props.maximizePanel() + } // Toggle the bottom terminal panel using terminal-wrap component await props.plugin.call('terminal', 'togglePanel') } From c733873d244e8aab364c49dbe542996aada07ac4 Mon Sep 17 00:00:00 2001 From: Aniket-Engg Date: Wed, 10 Dec 2025 21:25:58 +0530 Subject: [PATCH 10/11] maximize the right area in bottom panel --- apps/remix-ide/src/app/panels/terminal.tsx | 7 +++++++ libs/remix-ui/panel/src/lib/plugins/panel.css | 5 +++++ 2 files changed, 12 insertions(+) diff --git a/apps/remix-ide/src/app/panels/terminal.tsx b/apps/remix-ide/src/app/panels/terminal.tsx index 5ac0700e1df..7922ac050e2 100644 --- a/apps/remix-ide/src/app/panels/terminal.tsx +++ b/apps/remix-ide/src/app/panels/terminal.tsx @@ -231,6 +231,9 @@ export default class Terminal extends Plugin { wraps.forEach((wrap: HTMLElement) => { if (!wrap.classList.contains('terminal-wrap')) { wrap.classList.add('d-none') + } else { + // Add maximized class to terminal-wrap + wrap.classList.add('maximized') } }) } @@ -246,6 +249,10 @@ export default class Terminal extends Plugin { const wraps = mainView.querySelectorAll('[class*="-wrap"]') wraps.forEach((wrap: HTMLElement) => { wrap.classList.remove('d-none') + // Remove maximized class from terminal-wrap + if (wrap.classList.contains('terminal-wrap')) { + wrap.classList.remove('maximized') + } }) } diff --git a/libs/remix-ui/panel/src/lib/plugins/panel.css b/libs/remix-ui/panel/src/lib/plugins/panel.css index 85b7e3c946b..cd6a06ebe91 100644 --- a/libs/remix-ui/panel/src/lib/plugins/panel.css +++ b/libs/remix-ui/panel/src/lib/plugins/panel.css @@ -118,6 +118,11 @@ iframe { height: 20%; } +.terminal-wrap.maximized { + height: 100% !important; + flex: 1; +} + .terminal-wrap.minimized { height: 2rem !important; } From e8bdba1df77b761836310aad86de8f7517f4cad4 Mon Sep 17 00:00:00 2001 From: Aniket-Engg Date: Wed, 10 Dec 2025 21:49:46 +0530 Subject: [PATCH 11/11] fix toggle icon click hide bp --- apps/remix-ide/src/app/panels/terminal.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/apps/remix-ide/src/app/panels/terminal.tsx b/apps/remix-ide/src/app/panels/terminal.tsx index 7922ac050e2..ac3d0b6d09d 100644 --- a/apps/remix-ide/src/app/panels/terminal.tsx +++ b/apps/remix-ide/src/app/panels/terminal.tsx @@ -204,6 +204,23 @@ export default class Terminal extends Plugin { this.emit('terminalPanelShown') } else { this.isHidden = true + + // If terminal was hidden when maximized, restore the main panel + if (this.isMaximized) { + const mainView = document.querySelector('.mainview') + if (mainView) { + const wraps = mainView.querySelectorAll('[class*="-wrap"]') + wraps.forEach((wrap: HTMLElement) => { + if (!wrap.classList.contains('terminal-wrap')) { + wrap.classList.remove('d-none') + } + }) + } + terminalPanel?.classList.remove('maximized') + this.isMaximized = false + this.renderComponent() + } + terminalPanel?.classList.add('d-none') trackMatomoEvent(this, { category: 'topbar', action: 'terminalPanel', name: 'hiddenOnToggleIconClick', isClick: false }) this.emit('terminalPanelHidden')