diff --git a/apps/remix-ide/src/app/components/popup-panel.tsx b/apps/remix-ide/src/app/components/popup-panel.tsx index 2f0f5ef049..8388e8a83f 100644 --- a/apps/remix-ide/src/app/components/popup-panel.tsx +++ b/apps/remix-ide/src/app/components/popup-panel.tsx @@ -1,9 +1,11 @@ import React from 'react' // eslint-disable-line import { AbstractPanel } from './panel' -import { RemixPluginPanel } from '@remix-ui/panel' +import { PluginRecord, RemixPluginPanel } from '@remix-ui/panel' import packageJson from '../../../../../package.json' import { PluginViewWrapper } from '@remix-ui/helper' -import {EventEmitter} from 'events' +import { EventEmitter } from 'events' +import { AppState } from 'libs/remix-ui/app/src/lib/remix-app/interface' +import { AppAction, appActionTypes } from '@remix-ui/app' const profile = { name: 'popupPanel', @@ -13,22 +15,28 @@ const profile = { events: ['popupPanelShown'], methods: ['addView', 'removeView', 'showContent', 'showPopupPanel'] } +type popupPanelState = { + plugins: Record +} export class PopupPanel extends AbstractPanel { element: HTMLDivElement - dispatch: React.Dispatch = () => {} - showPanel: boolean + dispatch: React.Dispatch = () => { } + appStateDispatch: React.Dispatch = () => { } constructor(config) { super(profile) this.event = new EventEmitter() - this.showPanel = true } setDispatch(dispatch: React.Dispatch) { this.dispatch = dispatch } + setAppStateDispatch(appStateDispatch: React.Dispatch) { + this.appStateDispatch = appStateDispatch + } + onActivation() { this.renderComponent() } @@ -56,23 +64,31 @@ export class PopupPanel extends AbstractPanel { } async showPopupPanel(show) { - console.log("hide in popup-panel =", show) - this.showPanel = show - this.event.emit('popupPanelShown', show) + + this.appStateDispatch({ + type: appActionTypes.setShowPopupPanel, + payload: show + }) this.renderComponent() } renderComponent() { this.dispatch({ - plugins: this.plugins, - showPpPanel: this.showPanel + plugins: this.plugins }) } render() { + return ( + + ) + } + + updateComponent(state: popupPanelState & Partial) { + console.log("state in updateComponent =", state) return (
- {this.showPanel && } -
- ) - } - - updateComponent(state: any) { - return ( -
@@ -108,6 +116,7 @@ export class PopupPanel extends AbstractPanel { } plugins={state.plugins} /> -
) + + ) } } diff --git a/libs/remix-ui/app/src/lib/remix-app/actions/app.ts b/libs/remix-ui/app/src/lib/remix-app/actions/app.ts index 716d351e94..246b10cad0 100644 --- a/libs/remix-ui/app/src/lib/remix-app/actions/app.ts +++ b/libs/remix-ui/app/src/lib/remix-app/actions/app.ts @@ -17,6 +17,7 @@ export const enum appActionTypes { setCurrentBranch = 'SET_CURRENT_BRANCH', setNeedsGitInit = 'SET_NEEDS_GIT_INIT', setCanUseGit = 'SET_CAN_USE_GIT', + setShowPopupPanel = 'SET_SHOW_POPUP_PANEL', } type AppPayload = { @@ -24,6 +25,7 @@ type AppPayload = { [appActionTypes.setCurrentBranch]: branch, [appActionTypes.setNeedsGitInit]: boolean, [appActionTypes.setCanUseGit]: boolean, + [appActionTypes.setShowPopupPanel]: boolean, } export type AppAction = ActionMap[keyof ActionMap< diff --git a/libs/remix-ui/app/src/lib/remix-app/interface/index.ts b/libs/remix-ui/app/src/lib/remix-app/interface/index.ts index 0c146c98f7..531c2764d0 100644 --- a/libs/remix-ui/app/src/lib/remix-app/interface/index.ts +++ b/libs/remix-ui/app/src/lib/remix-app/interface/index.ts @@ -52,5 +52,6 @@ export interface AppState { currentBranch: branch needsGitInit: boolean canUseGit: boolean + showPopupPanel: boolean } diff --git a/libs/remix-ui/app/src/lib/remix-app/reducer/app.ts b/libs/remix-ui/app/src/lib/remix-app/reducer/app.ts index 6dd37603bc..5abe07626c 100644 --- a/libs/remix-ui/app/src/lib/remix-app/reducer/app.ts +++ b/libs/remix-ui/app/src/lib/remix-app/reducer/app.ts @@ -3,29 +3,36 @@ import { AppState } from "../interface"; export const appReducer = (state: AppState, action: AppAction): AppState => { switch (action.type) { - case appActionTypes.setGitHubUser: { - return { - ...state, - gitHubUser: action.payload + case appActionTypes.setGitHubUser: { + return { + ...state, + gitHubUser: action.payload + } } - } - case appActionTypes.setCurrentBranch: { - return { - ...state, - currentBranch: action.payload + case appActionTypes.setCurrentBranch: { + return { + ...state, + currentBranch: action.payload + } } - } - case appActionTypes.setNeedsGitInit: { - return { - ...state, - needsGitInit: action.payload + case appActionTypes.setNeedsGitInit: { + return { + ...state, + needsGitInit: action.payload + } } - } - case appActionTypes.setCanUseGit: { - return { - ...state, - canUseGit: action.payload + case appActionTypes.setCanUseGit: { + return { + ...state, + canUseGit: action.payload + } + } + + case appActionTypes.setShowPopupPanel: { + return { + ...state, + showPopupPanel: action.payload + } } - } } } \ No newline at end of file diff --git a/libs/remix-ui/app/src/lib/remix-app/state/app.ts b/libs/remix-ui/app/src/lib/remix-app/state/app.ts index 8086b75c9c..2778233a09 100644 --- a/libs/remix-ui/app/src/lib/remix-app/state/app.ts +++ b/libs/remix-ui/app/src/lib/remix-app/state/app.ts @@ -5,5 +5,6 @@ export const appInitialState: AppState = { gitHubUser: {} as GitHubUser, currentBranch: null, needsGitInit: true, - canUseGit: false + canUseGit: false, + showPopupPanel: true } \ No newline at end of file diff --git a/libs/remix-ui/helper/src/lib/components/PluginViewWrapper.tsx b/libs/remix-ui/helper/src/lib/components/PluginViewWrapper.tsx index c88f985ef6..168f1095f2 100644 --- a/libs/remix-ui/helper/src/lib/components/PluginViewWrapper.tsx +++ b/libs/remix-ui/helper/src/lib/components/PluginViewWrapper.tsx @@ -1,4 +1,5 @@ -import React from 'react' +import { AppContext } from '@remix-ui/app' +import React, { useContext } from 'react' import { useEffect, useState } from 'react' interface IPluginViewWrapperProps { @@ -7,12 +8,21 @@ interface IPluginViewWrapperProps { export const PluginViewWrapper = (props: IPluginViewWrapperProps) => { const [state, setState] = useState(null) + const appContext = useContext(AppContext) useEffect(() => { if (props.plugin.setDispatch) { props.plugin.setDispatch(setState) } + if(props.plugin.setAppStateDispatch) { + props.plugin.setAppStateDispatch(appContext.appStateDispatch) + } }, []) - return <>{state ? <>{props.plugin.updateComponent(state)} : <>} + return <>{state ? <>{props.plugin.updateComponent( + { + ...state, + ...appContext['appState'] + })} + : <>} } diff --git a/libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx b/libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx index 71aa3db8b0..ba6c494a04 100644 --- a/libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx +++ b/libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx @@ -14,7 +14,7 @@ export interface RemixPanelProps { export function RemixPluginPanel(props: RemixPanelProps) { return ( -
+ <> {props.header}
@@ -28,7 +28,7 @@ export function RemixPluginPanel(props: RemixPanelProps) { }) }
-
+ ) } diff --git a/libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx b/libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx index d476fba092..55b4fbf43d 100644 --- a/libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx +++ b/libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx @@ -12,14 +12,8 @@ interface AIStatusProps { export default function AIStatus(props: AIStatusProps) { const [copilotActive, setCopilotActive] = useState(false) - const [expandAIChat, setExpandAIChat] = useState(true) useEffect(() => { - const popupPanelListener = async (show) => { - setTimeout(() => setExpandAIChat(show), 0); - }; - - props.plugin.on('popupPanel', 'popupPanelShown', popupPanelListener) const run = async () => { const aiActivate = await props.plugin.call('settings', 'get', 'settings/copilot/suggest/activate') @@ -71,10 +65,10 @@ export default function AIStatus(props: AIStatusProps) { }} className='p-1 alert alert-info border border-info fa-solid fa-message-bot' onClick={async () => { - await props.plugin.call('popupPanel', 'showPopupPanel', !expandAIChat) + await props.plugin.call('popupPanel', 'showPopupPanel', true) }} > - {expandAIChat ? '1' : '0'} +