Add functionality for plugin calls to maximise and reset pinned panel size

apps/remix-ide/src/app/components/pinned-panel.tsx

@@ -15,7 +15,6 @@ const pinnedPanel = {
 }
 
 export class PinnedPanel extends AbstractPanel {
-  sideelement: any
   dispatch: React.Dispatch<any> = () => {}
   loggedState: any
 

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

@@ -6,7 +6,7 @@ import { QueryParams } from '@remix-project/remix-lib'
 const profile: Profile = {
   name: 'layout',
   description: 'layout',
-  methods: ['minimize', 'maximiseSidePanel', 'resetSidePanel', 'maximizeTerminal']
+  methods: ['minimize', 'maximiseSidePanel', 'resetSidePanel', 'maximizeTerminal', 'maximisePinnedPanel', 'resetPinnedPanel']
 }
 
 interface panelState {
@@ -74,6 +74,16 @@ export class Layout extends Plugin {
         this.event.emit('resetsidepanel')
       }
     })
+
+    this.on('pinnedPanel', 'pinnedPlugin', async (name) => {
+      const current = await this.call('pinnedPanel', 'currentFocus')
+      if (this.maximised[current]) {
+        this.event.emit('maximisepinnedpanel')
+      } else {
+        this.event.emit('resetpinnedpanel')
+      }
+    })
+
     document.addEventListener('keypress', e => {
       if (e.shiftKey && e.ctrlKey) {
         if (e.code === 'KeyF') {
@@ -110,6 +120,12 @@ export class Layout extends Plugin {
     this.maximised[current] = true
   }
 
+  async maximisePinnedPanel () {
+    this.event.emit('maximisepinnedpanel')
+    const current = await this.call('pinnedPanel', 'currentFocus')
+    this.maximised[current] = true
+  }
+
   async maximizeTerminal() {
     this.panels.terminal.minimized = false
     this.event.emit('change', this.panels)
@@ -121,4 +137,10 @@ export class Layout extends Plugin {
     const current = await this.call('sidePanel', 'currentFocus')
     this.maximised[current] = false
   }
+
+  async resetPinnedPanel () {
+    this.event.emit('resetpinnedpanel')
+    const current = await this.call('pinnedPanel', 'currentFocus')
+    this.maximised[current] = false
+  }
 }

apps/remix-ide/src/app/tabs/locales/en/panel.json

@@ -4,7 +4,7 @@
   "panel.documentation": "Documentation",
   "panel.description": "Description",
   "panel.maintainedByRemix": "Maintained by Remix",
-  "panel.pinnedMsg": "Click to return plugin to the right side panel",
+  "panel.pinnedMsg": "Click to move plugin to the right side panel",
   "panel.unPinnedMsg": "Click to return plugin to the left side panel",
   "panel.maintainedExternally": "Not maintained by Remix",
   "panel.pluginInfo": "Plugin info",

libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx

@@ -32,22 +32,41 @@ const DragBar = (props: IRemixDragBarUi) => {
   useEffect(() => {
     initialWidth.current = props.refObject.current.clientWidth
     if (props.maximiseTrigger > 0) {
+      if (props.layoutPosition === 'left') {
         const width = 0.4 * window.innerWidth
+
         if (width > props.refObject.current.offsetWidth) {
           props.refObject.current.style.width = width + 'px'
           setTimeout(() => {
             setDragBarPosX(offset + width)
           }, 300)
         }
+      } else if (props.layoutPosition === 'right') {
+        const width = 0.4 * window.innerWidth
+
+        if (width > props.refObject.current.offsetWidth) {
+          props.refObject.current.style.width = width + 'px'
+          setTimeout(() => {
+            setDragBarPosX(window.innerWidth - width)
+          }, 300)
+        }
+      }
     }
   }, [props.maximiseTrigger])
 
   useEffect(() => {
     if (props.maximiseTrigger > 0) {
+      if (props.layoutPosition === 'left') {
         props.refObject.current.style.width = initialWidth.current + 'px'
         setTimeout(() => {
           setDragBarPosX(offset + initialWidth.current)
         }, 300)
+      } else if (props.layoutPosition === 'right') {
+        props.refObject.current.style.width = props.minWidth + 'px'
+        setTimeout(() => {
+          setDragBarPosX(window.innerWidth - props.minWidth)
+        }, 300)
+      }
     }
   }, [props.resetTrigger])
 

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

@@ -96,12 +96,6 @@ const RemixApp = (props: IRemixAppUi) => {
       })
     })
 
-    props.app.layout.event.on('minimizepinnedpanel', () => {
-      setTimeout(() => {
-        setHidePinnedPanel(true)
-      }, 1000)
-    })
-
     props.app.layout.event.on('maximisepinnedpanel', () => {
       setMaximiseRightTrigger((prev) => {
         return prev + 1
@@ -211,15 +205,18 @@ const RemixApp = (props: IRemixAppUi) => {
               <div id="pinned-panel" ref={pinnedPanelRef} data-id="remixIdePinnedPanel" className={`flex-row-reverse pinnedpanel border-right border-left ${hidePinnedPanel ? 'd-none' : 'd-flex'}`}>
                 {props.app.pinnedPanel.render()}
               </div>
+              {
+                !hidePinnedPanel &&
                 <DragBar
                   resetTrigger={resetRightTrigger}
                   maximiseTrigger={maximiseRightTrigger}
-                minWidth={285}
+                  minWidth={331}
                   refObject={pinnedPanelRef}
                   hidden={hidePinnedPanel}
                   setHideStatus={setHidePinnedPanel}
                   layoutPosition='right'
                 ></DragBar>
+              }
             </div>
             <div>{props.app.hiddenPanel.render()}</div>
             <AppDialogs></AppDialogs>

libs/remix-ui/debugger-ui/src/lib/api/debugger-api.ts

@@ -183,14 +183,26 @@ export const DebuggerApiMixin = (Base) => class extends Base {
 
   showMessage (title: string, message: string) {}
 
-  onStartDebugging (debuggerBackend: any) {
+  async onStartDebugging (debuggerBackend: any) {
+    const pinnedPlugin = await this.call('pinnedPanel', 'currentFocus')
+
+    if (pinnedPlugin === 'debugger') {
+      this.call('layout', 'maximisePinnedPanel')
+    } else {
       this.call('layout', 'maximiseSidePanel')
+    }
     this.emit('startDebugging')
     this.debuggerBackend = debuggerBackend
   }
 
-  onStopDebugging () {
+  async onStopDebugging () {
+    const pinnedPlugin = await this.call('pinnedPanel', 'currentFocus')
+
+    if (pinnedPlugin === 'debugger') {
+      this.call('layout', 'resetPinnedPanel')
+    } else {
       this.call('layout', 'resetSidePanel')
+    }
     this.emit('stopDebugging')
     this.debuggerBackend = null
   }