fix: hide bottom tab panel if no container (#3925)

Author: bytemain

packages/ai-native/src/browser/layout/ai-layout.tsx

@@ -33,7 +33,13 @@ export const AILayout = () => {
           />
           <SplitPanel id='main-vertical' minResize={300} flexGrow={1} direction='top-to-bottom'>
             <SlotRenderer flex={2} flexGrow={1} minResize={200} slot='main' />
-            <SlotRenderer flex={1} defaultSize={layout.bottom?.size} minResize={160} slot='bottom' isTabbar={true} />
+            <SlotRenderer
+              flex={1}
+              defaultSize={layout.bottom?.currentId ? layout.bottom?.size : 24}
+              minResize={160}
+              slot='bottom'
+              isTabbar={true}
+            />
           </SplitPanel>
           <SlotRenderer
             slot='right'

packages/core-browser/src/components/layout/default-layout.tsx

@@ -5,14 +5,26 @@ import { SlotRenderer } from '../../react-providers/slot';
 import { BoxPanel } from './box-panel';
 import { SplitPanel } from './split-panel';
 
+export interface ILayoutConfigCache {
+  [key: string]: { size: number; currentId: string };
+}
+
 export const getStorageValue = () => {
   // 启动时渲染的颜色和尺寸，弱依赖
-  let savedLayout: { [key: string]: { size: number; currentId: string } } = {};
+  let savedLayout: ILayoutConfigCache = {};
   let savedColors: { [colorKey: string]: string } = {};
   try {
-    savedLayout = JSON.parse(localStorage.getItem('layout') || '{}');
-    savedColors = JSON.parse(localStorage.getItem('theme') || '{}');
+    const layoutConfigStr = localStorage.getItem('layout');
+    if (layoutConfigStr) {
+      savedLayout = JSON.parse(layoutConfigStr);
+    }
+
+    const themeConfigStr = localStorage.getItem('theme');
+    if (themeConfigStr) {
+      savedColors = JSON.parse(themeConfigStr);
+    }
   } catch (err) {}
+
   return {
     layout: savedLayout,
     colors: savedColors,
@@ -42,7 +54,13 @@ export function ToolbarActionBasedLayout(
         />
         <SplitPanel id='main-vertical' minResize={300} flexGrow={1} direction='top-to-bottom'>
           <SlotRenderer flex={2} flexGrow={1} minResize={200} slot='main' />
-          <SlotRenderer flex={1} defaultSize={layout.bottom?.size} minResize={160} slot='bottom' isTabbar={true} />
+          <SlotRenderer
+            flex={1}
+            defaultSize={layout.bottom?.currentId ? layout.bottom?.size : 24}
+            minResize={160}
+            slot='bottom'
+            isTabbar={true}
+          />
         </SplitPanel>
         <SlotRenderer
           slot='right'

packages/editor/src/browser/grid/grid.service.ts

@@ -1,23 +1,25 @@
 import { Emitter, IDisposable, IEventBus, MaybeNull } from '@opensumi/ide-core-browser';
-import { makeRandomHexString } from '@opensumi/ide-core-common';
+import { DisposableStore, makeRandomHexString } from '@opensumi/ide-core-common';
 
 import { Direction, IEditorGroup, IEditorGroupState } from '../../common';
 import { GridResizeEvent } from '../types';
 
 export const editorGridUid = new Set();
 
 export class EditorGrid implements IDisposable {
+  private _disposables = new DisposableStore();
+
   public editorGroup: IGridEditorGroup | null = null;
 
   public children: EditorGrid[] = [];
 
   public splitDirection: SplitDirection | undefined;
 
-  protected readonly _onDidGridStateChange = new Emitter<void>();
+  protected readonly _onDidGridStateChange = this._disposables.add(new Emitter<void>());
 
   public readonly onDidGridStateChange = this._onDidGridStateChange.event;
 
-  protected readonly _onDidGridAndDesendantStateChange = new Emitter<void>();
+  protected readonly _onDidGridAndDesendantStateChange = this._disposables.add(new Emitter<void>());
 
   public readonly onDidGridAndDesendantStateChange = this._onDidGridAndDesendantStateChange.event;
 
@@ -30,10 +32,12 @@ export class EditorGrid implements IDisposable {
     }
     this.uid = uid;
     editorGridUid.add(uid);
-    this.onDidGridStateChange(() => {
-      this._onDidGridAndDesendantStateChange.fire();
-      this.parent?._onDidGridAndDesendantStateChange.fire();
-    });
+    this._disposables.add(
+      this.onDidGridStateChange(() => {
+        this._onDidGridAndDesendantStateChange.fire();
+        this.parent?._onDidGridAndDesendantStateChange.fire();
+      }),
+    );
   }
 
   setEditorGroup(editorGroup: IGridEditorGroup) {
@@ -106,6 +110,8 @@ export class EditorGrid implements IDisposable {
     } else {
       // 应该不会落入这里
     }
+
+    this._disposables.dispose();
   }
 
   public replaceBy(target: EditorGrid) {

packages/editor/src/browser/workbench-editor.service.ts

@@ -491,10 +491,13 @@ export class WorkbenchEditorServiceImpl extends WithEventBus implements Workbenc
       state = this.openedResourceState.get<IEditorGridState>('grid', state);
     }
     this.topGrid = new EditorGrid();
-    this.topGrid.onDidGridAndDesendantStateChange(() => {
-      this._sortedEditorGroups = undefined;
-      this._onDidEditorGroupsChanged.fire();
-    });
+    this.addDispose(this.topGrid);
+    this.addDispose(
+      this.topGrid.onDidGridAndDesendantStateChange(() => {
+        this._sortedEditorGroups = undefined;
+        this._onDidEditorGroupsChanged.fire();
+      }),
+    );
     const editorRestorePromises = [];
     const promise = this.topGrid
       .deserialize(state, () => this.createEditorGroup(), editorRestorePromises)