fix: layout view state logic and improve panel style

packages/core-browser/src/components/resize/resize.tsx

@@ -396,7 +396,7 @@ export const ResizeHandleVertical = (props: ResizeHandleProps) => {
   const cachedNextElement = React.useRef<HTMLElement>();
 
   const requestFrame = React.useRef<number>();
-  // direction: true为向下，false为向上
+  // direction: true 为向下，false 为向上
   const setSize = (prev: number, next: number, direction?: boolean) => {
     const prevEle = props.findPrevElement ? props.findPrevElement(direction) : prevElement.current!;
     const nextEle = props.findNextElement ? props.findNextElement(direction) : nextElement.current!;

packages/core-browser/src/layout/layout-state.ts

@@ -66,7 +66,7 @@ export class LayoutState {
       LAYOUT_STATE.isScoped(key) ||
         (this.saveLayoutWithWorkspace && (LAYOUT_STATE.isLayout(key) || LAYOUT_STATE.isStatusBar(key))),
     );
-  }, 60);
+  }, 200);
 
   private setStorageValue(key: string, state: object, scope?: boolean) {
     if (scope) {

packages/core-browser/src/layout/layout.interface.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import { MaybeNull, BasicEvent } from '@opensumi/ide-core-common';
+import { MaybeNull, BasicEvent, Event } from '@opensumi/ide-core-common';
 
 import { Layout } from '../components/layout/index';
 import type { IMenu, IContextMenu } from '../menu/next';
@@ -36,6 +36,7 @@ export interface View {
   weight?: number;
   priority?: number;
   collapsed?: boolean;
+  badge?: string;
   hidden?: boolean;
   component?: React.ComponentType<any>;
   // 使用该参数时, view 的 toolbar 默认不渲染
@@ -91,6 +92,11 @@ export interface ComponentRegistryInfo {
   options?: ViewContainerOptions;
 }
 
+export interface ComponentRegistryProvider extends ComponentRegistryInfo {
+  fireChange: (component: ComponentRegistryProvider) => void;
+  onChange: Event<ComponentRegistryProvider>;
+}
+
 export class ResizePayload {
   /**
    * Resize事件，会在用户拖动resize或窗口resize时触发

packages/core-browser/src/services/storage-service.ts

@@ -112,7 +112,7 @@ abstract class BaseBrowserStorageService implements StorageService {
   }
 
   /**
-   * 验证是否还有空间生育用来存储另一个工作区配置
+   * 验证是否还有空间用来存储另一个工作区配置
    * 如果超出限制大小，提示用户进行清理
    *
    * @private

packages/core-common/src/browser-fs/ensure-dir.ts

@@ -4,14 +4,6 @@ import { promisify } from './util';
 
 const PATH_SEPARATOR = '/';
 
-function fsExistsAsync(path: string): Promise<boolean> {
-  return new Promise((resolve) => {
-    fs.exists(path, (exists: boolean) => {
-      resolve(exists);
-    });
-  });
-}
-
 interface FsLike {
   access: (path: string) => Promise<boolean>;
   mkdir: (path: string) => Promise<void>;

packages/main-layout/__tests__/browser/layout.service.test.tsx

@@ -303,7 +303,7 @@ describe('main layout test', () => {
       handler.setCollapsed('test-view-id5', true);
     });
     expect(handler.isCollapsed('test-view-id5')).toBeTruthy();
-    expect(mockCb).toBeCalledTimes(4);
+    expect(mockCb).toBeCalledTimes(2);
     let newTitle = 'new title';
     act(() => {
       handler.setBadge('20');

packages/main-layout/src/browser/accordion/accordion.service.ts

@@ -18,6 +18,7 @@ import {
   Emitter,
   IScopedContextKeyService,
   isDefined,
+  ILogger,
 } from '@opensumi/ide-core-browser';
 import { RESIZE_LOCK } from '@opensumi/ide-core-browser/lib/components';
 import {
@@ -87,6 +88,9 @@ export class AccordionService extends WithEventBus {
   @Autowired(IProgressService)
   private progressService: IProgressService;
 
+  @Autowired(ILogger)
+  private logger: ILogger;
+
   protected splitPanelService: SplitPanelService;
 
   // 用于强制显示功能的contextKey
@@ -99,9 +103,9 @@ export class AccordionService extends WithEventBus {
   private viewsWithContextKey = new Set<View>();
 
   @observable.shallow
-  views: View[] = observable.array([]);
+  views: View[] = [];
 
-  @observable.shallow
+  @observable
   state: { [viewId: string]: SectionState } = {};
 
   rendered = false;
@@ -159,20 +163,48 @@ export class AccordionService extends WithEventBus {
     });
   }
 
+  @action
   updateViewTitle(viewId: string, title: string) {
-    this.didChangeViewTitleEmitter.fire({ id: viewId, title });
+    const view = this.views.find((view) => view.id === viewId);
+    if (view) {
+      view.name = title;
+      this.didChangeViewTitleEmitter.fire({ id: viewId, title });
+    } else {
+      this.logger.error(`No target view \`${viewId}\` found, unable to update accordion title`);
+    }
   }
 
+  @action
   updateViewDesciption(viewId: string, desc: string) {
-    this.didChangeViewTitleEmitter.fire({ id: viewId, description: desc });
+    const view = this.views.find((view) => view.id === viewId);
+    if (view) {
+      view.description = desc;
+      this.didChangeViewTitleEmitter.fire({ id: viewId, description: desc });
+    } else {
+      this.logger.error(`No target view \`${viewId}\` found, unable to update accordion description`);
+    }
   }
 
+  @action
   updateViewMessage(viewId: string, msg: string) {
-    this.didChangeViewTitleEmitter.fire({ id: viewId, message: msg });
+    const view = this.views.find((view) => view.id === viewId);
+    if (view) {
+      view.message = msg;
+      this.didChangeViewTitleEmitter.fire({ id: viewId, message: msg });
+    } else {
+      this.logger.error(`No target view \`${viewId}\` found, unable to update accordion message`);
+    }
   }
 
+  @action
   updateViewBadge(viewId: string, badge: string) {
-    this.didChangeViewTitleEmitter.fire({ id: viewId, badge });
+    const view = this.views.find((view) => view.id === viewId);
+    if (view) {
+      view.badge = badge;
+      this.didChangeViewTitleEmitter.fire({ id: viewId, badge });
+    } else {
+      this.logger.error(`No target view \`${viewId}\` found, unable to update accordion message`);
+    }
   }
 
   tryUpdateResize() {
@@ -404,12 +436,12 @@ export class AccordionService extends WithEventBus {
     return `${forceRevealKey} == true`;
   }
 
-  protected storeState = debounce(() => {
+  protected storeState = () => {
     if (this.noRestore || !this.rendered) {
       return;
     }
     this.layoutState.setState(LAYOUT_STATE.getContainerSpace(this.containerId), this.state);
-  }, 200);
+  };
 
   private registerGlobalToggleCommand() {
     const commandId = `view-container.hide.${this.containerId}`;
@@ -454,6 +486,7 @@ export class AccordionService extends WithEventBus {
     return commandId;
   }
 
+  @action
   protected doToggleView(viewId: string, forceShow?: boolean) {
     const state = this.getViewState(viewId);
     let nextState: boolean;
@@ -463,7 +496,7 @@ export class AccordionService extends WithEventBus {
       nextState = !forceShow;
     }
     state.hidden = nextState;
-    this.setViewState(viewId, state);
+    this.updateViewState(viewId, state);
     this.popViewKeyIfOnlyOneViewVisible();
     this.storeState();
   }
@@ -499,18 +532,18 @@ export class AccordionService extends WithEventBus {
     });
   }
 
-  @action toggleOpen(viewId: string, collapsed: boolean) {
+  toggleOpen(viewId: string, collapsed: boolean) {
     const index = this.visibleViews.findIndex((view) => view.id === viewId);
     if (index > -1) {
       this.doToggleOpen(viewId, collapsed, index, true);
     }
   }
 
-  @action.bound handleSectionClick(viewId: string, collapsed: boolean, index: number) {
+  handleSectionClick = (viewId: string, collapsed: boolean, index: number) => {
     this.doToggleOpen(viewId, collapsed, index);
-  }
+  };
 
-  @action.bound handleContextMenu(event: React.MouseEvent, viewId?: string) {
+  handleContextMenu = (event: React.MouseEvent, viewId?: string) => {
     event.preventDefault();
     const menus = this.ctxMenuService.createMenu({
       id: this.menuId,
@@ -526,26 +559,21 @@ export class AccordionService extends WithEventBus {
         y: event.clientY,
       },
     });
-  }
+  };
 
   public getViewState(viewId: string) {
     let viewState = this.state[viewId];
     const view = this.views.find((item) => item.id === viewId);
     if (!viewState) {
-      runInAction(() => {
-        this.state[viewId] = { collapsed: view?.collapsed || false, hidden: view?.hidden || false };
-        viewState = this.state[viewId]!;
-      });
+      this.updateViewState(viewId, { collapsed: view?.collapsed || false, hidden: view?.hidden || false });
+      viewState = this.state[viewId];
     }
     return viewState;
   }
 
   @action
-  public setViewState(viewId: string, state: SectionState) {
-    this.state = {
-      ...this.state,
-      [viewId]: state,
-    };
+  public updateViewState(viewId: string, state: SectionState) {
+    this.state[viewId] = observable.object(state);
   }
 
   @action
@@ -594,6 +622,7 @@ export class AccordionService extends WithEventBus {
     );
   }
 
+  @action
   protected setSize(index: number, targetSize: number, isIncrement?: boolean, noAnimation?: boolean): number {
     const fullHeight = this.splitPanelService.rootNode?.clientHeight;
     const panel = this.splitPanelService.panels[index];

packages/main-layout/src/browser/accordion/accordion.view.tsx

@@ -44,6 +44,7 @@ export const AccordionContainer = observer(
     React.useEffect(() => {
       accordionService.initConfig({ headerSize, minSize });
     }, []);
+
     const allCollapsed = !accordionService.visibleViews.find((view) => {
       const viewState: SectionState = accordionService.getViewState(view.id);
       return !viewState.collapsed;
@@ -74,6 +75,10 @@ export const AccordionContainer = observer(
               header={(view.name && replaceLocalizePlaceholder(view.name)) || view.id}
               viewId={view.id}
               key={view.id}
+              message={view.message}
+              description={view.description}
+              badge={view.badge}
+              title={view.name}
               expanded={!collapsed}
               accordionService={accordionService}
               index={index}

packages/main-layout/src/browser/layout.service.ts

@@ -27,7 +27,7 @@ import {
   AbstractMenuService,
   IContextMenu,
 } from '@opensumi/ide-core-browser/lib/menu/next';
-import { Deferred, getDebugLogger } from '@opensumi/ide-core-common';
+import { Deferred, getDebugLogger, isUndefined } from '@opensumi/ide-core-common';
 import { ThemeChangedEvent } from '@opensumi/ide-theme';
 
 import {
@@ -195,7 +195,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
         defaultContainer = '';
       }
     }
-    if (currentId === undefined) {
+    if (isUndefined(currentId)) {
       service.updateCurrentContainerId(defaultContainer);
     } else {
       service.updateCurrentContainerId(

packages/main-layout/src/browser/tabbar-handler.ts

@@ -1,5 +1,5 @@
 import { Injectable, Autowired } from '@opensumi/di';
-import { Event, Emitter, ILogger } from '@opensumi/ide-core-common';
+import { Event, Emitter } from '@opensumi/ide-core-common';
 
 import { IMainLayoutService } from '../common';
 
@@ -10,9 +10,6 @@ export class TabBarHandler {
   @Autowired(IMainLayoutService)
   private layoutService!: IMainLayoutService;
 
-  @Autowired(ILogger)
-  private readonly logger: ILogger;
-
   protected readonly onActivateEmitter = new Emitter<void>();
   readonly onActivate: Event<void> = this.onActivateEmitter.event;
 
@@ -91,11 +88,11 @@ export class TabBarHandler {
    * 设置视图的顶部标题组件
    */
   setTitleComponent(Fc: React.ComponentType, props?: object) {
-    const componentInfo = this.tabbarService.getContainer(this.containerId);
-    if (componentInfo) {
-      componentInfo.options!.titleProps = props;
-      componentInfo.options!.titleComponent = Fc;
-      this.tabbarService.forceUpdateTabbar();
+    const component = this.tabbarService.getContainer(this.containerId);
+    if (component && component.options) {
+      component.options.titleProps = props;
+      component.options.titleComponent = Fc;
+      component.fireChange(component);
     }
   }
   /**
@@ -144,52 +141,34 @@ export class TabBarHandler {
   toggleViews(viewIds: string[], show: boolean) {
     for (const viewId of viewIds) {
       const viewState = this.accordionService.getViewState(viewId);
-      this.accordionService.setViewState(viewId, { ...viewState, hidden: !show });
+      this.accordionService.updateViewState(viewId, { ...viewState, hidden: !show });
     }
   }
   /**
    * 更新子视图的标题
    */
   updateViewTitle(viewId: string, title: string) {
-    const targetView = this.accordionService.views.find((view) => view.id === viewId);
-    if (targetView) {
-      targetView.name = title;
-      this.accordionService.updateViewTitle(viewId, title);
-    } else {
-      this.logger.error(`No target view \`${viewId}\` found, unable to update accordion title`);
-    }
+    this.accordionService.updateViewTitle(viewId, title);
   }
 
   /**
    * 更新子视图的描述
    */
   updateViewDescription(viewId: string, desciption: string) {
-    const targetView = this.accordionService.views.find((view) => view.id === viewId);
-    if (targetView) {
-      targetView.description = desciption;
-      this.accordionService.updateViewDesciption(viewId, desciption);
-    } else {
-      this.logger.error(`No target view \`${viewId}\` found, unable to update accordion description`);
-    }
+    this.accordionService.updateViewDesciption(viewId, desciption);
   }
 
   /**
    * 更新子视图的 message
    */
   updateViewMessage(viewId: string, message: string) {
-    const targetView = this.accordionService.views.find((view) => view.id === viewId);
-    if (targetView) {
-      targetView.message = message;
-      this.accordionService.updateViewMessage(viewId, message);
-    } else {
-      this.logger.error(`No target view \`${viewId}\` found, unable to update accordion message`);
-    }
+    this.accordionService.updateViewMessage(viewId, message);
   }
   /**
    * 更新视图的标题
    */
-  updateTitle(label: string) {
-    this.tabbarService.getContainer(this.containerId)!.options!.title = label;
+  updateTitle(title: string) {
+    this.tabbarService.updateTitle(this.containerId, title);
   }
   /**
    * 禁用侧边栏的resize功能