wip: resolve scroll stutter issue

Author: ci-bot

apps/remix-ide/src/app.ts

@@ -110,6 +110,7 @@ import Editor from './app/editor/editor'
 import Terminal from './app/panels/terminal'
 import TabProxy from './app/panels/tab-proxy.js'
 import { Plugin } from '@remixproject/engine'
+import BottomBarPanel from './app/components/bottom-bar-panel'
 
 const _paq = (window._paq = window._paq || [])
 
@@ -526,7 +527,9 @@ class AppComponent {
     const landingPage = new LandingPage(appManager, this.menuicons, fileManager, filePanel, contentImport)
     this.settings = new SettingsTab(Registry.getInstance().get('config').api, editor)//, appManager)
 
-    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, this.statusBar, this.topBar, filePanel, pluginManagerComponent, this.settings, this.pinnedPanel, this.popupPanel])
+    const bottomBarPanel = new BottomBarPanel()
+
+    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, this.statusBar, this.topBar, filePanel, pluginManagerComponent, this.settings, this.pinnedPanel, this.popupPanel, bottomBarPanel])
 
     // CONTENT VIEWS & DEFAULT PLUGINS
     const openZeppelinProxy = new OpenZeppelinProxy(blockchain)
@@ -573,6 +576,7 @@ class AppComponent {
       tabs: { plugin: tabProxy, active: true },
       editor: { plugin: editor, active: true },
       main: { plugin: appPanel, active: false },
+      bottomBar: { plugin: bottomBarPanel, active: true },
       terminal: { plugin: terminal, active: true, minimized: false }
     }
   }
@@ -607,6 +611,7 @@ class AppComponent {
     await this.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
     await this.appManager.activatePlugin(['topbar'])
     await this.appManager.activatePlugin(['statusBar'])
+    await this.appManager.activatePlugin(['bottomBar'])
     await this.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
     await this.appManager.activatePlugin(['pinnedPanel'])
     await this.appManager.activatePlugin(['popupPanel'])

apps/remix-ide/src/app/components/bottom-bar-panel.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Plugin } from '@remixproject/engine'
+import { PluginViewWrapper } from '@remix-ui/helper'
+import * as packageJson from '../../../../../package.json'
+import BottomBar from './bottom-bar'
+
+const profile = {
+  displayName: 'Bottom Bar',
+  name: 'bottomBar',
+  methods: [],
+  events: [],
+  description: 'Editor bottom bar (renders above dragbar-terminal)',
+  version: packageJson.version
+}
+
+export default class BottomBarPanel extends Plugin {
+  private dispatch: ((state: any) => void) | null = null
+
+  constructor() {
+    super(profile)
+  }
+
+  setDispatch = (dispatch) => {
+    this.dispatch = dispatch
+  }
+
+  onActivation() {
+    this.renderComponent()
+  }
+
+  render() {
+    return (
+      <div className="panel" data-id="bottomBarPanelView">
+        <PluginViewWrapper plugin={this} />
+      </div>
+    )
+  }
+
+  updateComponent() {
+    return <BottomBar plugin={this} />
+  }
+
+  renderComponent() {
+    this.dispatch && this.dispatch({})
+  }
+}

apps/remix-ide/src/app/components/bottom-bar.tsx

@@ -28,8 +28,7 @@ export const BottomBar = ({ plugin }: BottomBarProps) => {
         setCurrentFilePath(path)
         const ext = path?.split('.').pop()?.toLowerCase() || ''
         setCurrentExt(ext)
-      } catch (err) {
-        console.info('No current file selected.')
+      } catch {
         setCurrentFilePath('')
         setCurrentExt('')
       }
@@ -38,32 +37,30 @@ export const BottomBar = ({ plugin }: BottomBarProps) => {
     getAI()
     getCurrentExt()
 
-    plugin.on('settings', 'copilotChoiceUpdated', (isChecked) => {
-      setAiSwitch(isChecked)
-    })
+    const onCopilot = (isChecked: boolean) => setAiSwitch(!!isChecked)
 
+    plugin.on('settings', 'copilotChoiceUpdated', onCopilot)
     plugin.on('fileManager', 'currentFileChanged', getCurrentExt)
 
     return () => {
+      plugin.off('settings', 'copilotChoiceUpdated')
       plugin.off('fileManager', 'currentFileChanged')
     }
-
   }, [plugin])
 
   const handleExplain = async () => {
     if (!currentFilePath) {
-      plugin.call('notification', 'toast', 'No file selected to explain.');
+      plugin.call('notification', 'toast', 'No file selected to explain.')
       return
     }
     setExplaining(true)
     try {
       await plugin.call('menuicons', 'select', 'remixaiassistant')
-      await new Promise(resolve => setTimeout(resolve, 500))
+      await new Promise((resolve) => setTimeout(resolve, 500))
       const content = await plugin.call('fileManager', 'readFile', currentFilePath)
       await plugin.call('remixAI', 'chatPipe', 'code_explaining', content)
-
     } catch (err) {
-      console.error("Explain failed:", err)
+      console.error('Explain failed:', err)
     }
     setExplaining(false)
   }
@@ -84,21 +81,22 @@ export const BottomBar = ({ plugin }: BottomBarProps) => {
   }
 
   return (
-    <div className="bottom-bar border-top border-bottom">
+    <div className="bottom-bar border-top border-bottom" data-id="bottomBarPanel">
       {getExplainLabel() && (
         <button
           className="btn btn-ai"
           onClick={handleExplain}
           disabled={explaining || !currentFilePath}
+          data-id="bottomBarExplainBtn"
         >
           <img src="assets/img/remixAI_small.svg" alt="Remix AI" className="explain-icon" />
           <span>{getExplainLabel()}</span>
         </button>
       )}
       <div className="copilot-toggle">
-        <span className={aiSwitch ? "on" : ""}>AI copilot</span>
-        <label className="switch" data-id="copilot_toggle" >
-          <input type="checkbox" checked={aiSwitch} onChange={toggleAI}/>
+        <span className={aiSwitch ? 'on' : ''}>AI copilot</span>
+        <label className="switch" data-id="copilot_toggle">
+          <input type="checkbox" checked={aiSwitch} onChange={toggleAI} />
           <span className="slider"></span>
         </label>
       </div>

apps/remix-ide/src/app/components/styles/bottom-bar.css

@@ -1,17 +1,18 @@
 .bottom-bar {
     display: flex;
+    flex: 0 0 auto;
     align-items: center;
     padding: 4px 16px;
     background-color: var(--bs-light) !important;
     height: 32px;
 }
 
-.explain-icon {
+.bottom-bar .explain-icon {
     width: 12px;
     height: 12px;
 }
 
-.copilot-toggle {
+.bottom-bar .copilot-toggle {
     margin-left: auto;
     display: flex;
     align-items: center;
@@ -22,32 +23,32 @@
     line-height: 1; 
 }
 
-.copilot-toggle span {
+.bottom-bar .copilot-toggle span {
     font-family: 'Nunito Sans', sans-serif;
     font-size: 12px;
     font-weight: 700;
     color: var(--text-muted);
     transition: color 0.3s;
 }
 
-.copilot-toggle span.on {
+.bottom-bar .copilot-toggle span.on {
     color: var(--text-bright);
 }
 
-.switch {
+.bottom-bar .switch {
     position: relative;
     display: inline-block;
     width: 18px;
     height: 10px;
 }
 
-.switch input {
+.bottom-bar .switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }
 
-.slider {
+.bottom-bar .slider {
     position: absolute;
     cursor: pointer;
     top: 0; left: 0; right: 0; bottom: 0;
@@ -57,7 +58,7 @@
     padding: 1px;
 }
 
-.slider:before {
+.bottom-bar .slider:before {
     position: absolute;
     content: "";
     height: 8px;
@@ -69,10 +70,10 @@
     border-radius: 50%;
 }
 
-.switch input:checked + .slider {
+.bottom-bar .switch input:checked + .slider {
     background-color: var(--custom-ai-color);
 }
 
-.switch input:checked + .slider:before {
+.bottom-bar .switch input:checked + .slider:before {
     transform: translateX(8px);
 }

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

@@ -18,6 +18,7 @@ interface panels {
   tabs: panelState
   editor: panelState
   main: panelState
+  bottomBar: panelState
   terminal: panelState
 }
 

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

@@ -10,7 +10,6 @@ import EventManager from '../../lib/events'
 
 import { CompilerImports } from '@remix-project/core-plugin' // eslint-disable-line
 import { RemixUiXterminals } from '@remix-ui/xterm'
-import { BottomBar } from '../components/bottom-bar'
 
 const KONSOLES = []
 
@@ -143,7 +142,6 @@ export default class Terminal extends Plugin {
   updateComponent(state) {
     return (
       <>
-        <BottomBar plugin={this} />
         <RemixUITerminalWrapper
           plugin={state.plugin}
           onReady={state.onReady}