@opensumi/ide-main-layout 3.9.1-next-1748403761.0 → 3.9.1-next-1748425167.0

package/src/browser/layout.service.ts

@@ -18,7 +18,7 @@ import {
   WithEventBus,
   slotRendererRegistry,
 } from '@opensumi/ide-core-browser';
-import { fixLayout } from '@opensumi/ide-core-browser/lib/components';
+import { Layout, fixLayout } from '@opensumi/ide-core-browser/lib/components';
 import { LAYOUT_STATE, LayoutState } from '@opensumi/ide-core-browser/lib/layout/layout-state';
 import { ComponentRegistryInfo } from '@opensumi/ide-core-browser/lib/layout/layout.interface';
 import {
@@ -29,11 +29,13 @@ import {
   MenuId,
 } from '@opensumi/ide-core-browser/lib/menu/next';
 import { Deferred, getDebugLogger, isUndefined } from '@opensumi/ide-core-common';
+import { transaction } from '@opensumi/ide-monaco/lib/common/observable';
 import { ThemeChangedEvent } from '@opensumi/ide-theme';
 
 import {
-  DROP_BOTTOM_CONTAINER,
-  DROP_RIGHT_CONTAINER,
+  DROP_EXTEND_VIEW_CONTAINER,
+  DROP_PANEL_CONTAINER,
+  DROP_VIEW_CONTAINER,
   IMainLayoutService,
   MainLayoutContribution,
   SUPPORT_ACCORDION_LOCATION,
@@ -45,19 +47,21 @@ import { TabbarService } from './tabbar/tabbar.service';
 import { TabBarHandler } from './tabbar-handler';
 
 const defaultLayoutState = {
-  [SlotLocation.left]: {
+  [SlotLocation.view]: {
     currentId: undefined,
     size: undefined,
   },
-  [SlotLocation.right]: {
+  [SlotLocation.extendView]: {
     // 依照下面的恢复逻辑，这里设置为 `''` 时，就不会恢复右侧的 TabBar 的状态（即选中相应的 viewContainer）
     currentId: '',
     size: undefined,
   },
-  [SlotLocation.bottom]: {
+  [SlotLocation.panel]: {
     currentId: undefined,
     size: undefined,
   },
+  // 存储 Container 的移动信息：containerId -> location
+  containerLocations: {},
 };
 
 @Injectable()
@@ -154,6 +158,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
       currentId,
       size: service.prevSize,
     };
+
     this.layoutState.setState(LAYOUT_STATE.MAIN, this.state);
   }
 
@@ -174,63 +179,86 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
 
   restoreTabbarService = async (service: TabbarService) => {
     this.state = fixLayout(this.layoutState.getState(LAYOUT_STATE.MAIN, defaultLayoutState));
-
     const { currentId, size } = this.state[service.location] || {};
     service.prevSize = size;
-    let defaultContainer = service.visibleContainers[0] && service.visibleContainers[0].options!.containerId;
-    const defaultPanels = this.appConfig.defaultPanels;
-    const restorePanel = defaultPanels && defaultPanels[service.location];
-    if (defaultPanels && restorePanel !== undefined) {
-      if (restorePanel) {
-        if (service.containersMap.has(restorePanel)) {
-          defaultContainer = restorePanel;
-        } else {
-          const componentInfo = this.componentRegistry.getComponentRegistryInfo(restorePanel);
-          if (
-            componentInfo &&
-            this.appConfig.layoutConfig[service.location]?.modules &&
-            ~this.appConfig.layoutConfig[service.location].modules.indexOf(restorePanel)
-          ) {
-            defaultContainer = componentInfo.options!.containerId;
+
+    // 根据存储的容器位置信息恢复容器位置(drag & drop 移动过的)
+    if (this.state.containerLocations) {
+      for (const [containerId, targetLocation] of Object.entries(this.state.containerLocations)) {
+        if (targetLocation === service.location && !this.isDropContainer(containerId)) {
+          // 检查容器是否在其他 tabbar 中，如果是则移动到当前 tabbar
+          const expectTabbar = this.findTabbarServiceByContainerId(containerId);
+          if (expectTabbar && expectTabbar.location !== service.location) {
+            this.moveContainerTo(containerId, service.location);
           } else {
-            this.logger.warn(`[defaultPanels] No \`${restorePanel}\` view found!`);
+            // 清理无用的状态
+            delete this.state.containerLocations[containerId];
+            this.layoutState.setState(LAYOUT_STATE.MAIN, this.state);
           }
         }
-      } else {
-        defaultContainer = '';
       }
     }
-    /**
-     * ContainerId 存在三种值类型，对应的处理模式如下：
-     * 1. undefined: 采用首个注册的容器作为当前 containerId
-     * 2. string: 非 drop container 直接使用该 containerId 作为当前 containerId
-     * 3. '': 直接清空当前 containerId，不展开相应的 viewContainer
-     */
+
+    const defaultContainer = this.getDefaultContainer(service);
+    this.restoreContainerId(service, currentId, defaultContainer);
+  };
+
+  private getDefaultContainer(service: TabbarService): string | undefined {
+    const defaultPanels = this.appConfig.defaultPanels;
+    const defaultPanel = defaultPanels && defaultPanels[service.location];
+
+    // 如果配置了默认面板,则使用配置的面板
+    if (defaultPanels && defaultPanel !== undefined) {
+      if (service.containersMap.has(defaultPanel)) {
+        return defaultPanel;
+      }
+
+      const componentInfo = this.componentRegistry.getComponentRegistryInfo(defaultPanel);
+      const isValidModule =
+        componentInfo && this.appConfig.layoutConfig[service.location]?.modules?.includes(defaultPanel);
+
+      if (isValidModule) {
+        return componentInfo.options!.containerId;
+      }
+
+      this.logger.warn(`[defaultPanels] No \`${defaultPanel}\` view found!`);
+    }
+
+    // 获取第一个可见容器作为默认值
+    return service.visibleContainers[0]?.options?.containerId;
+  }
+
+  private restoreContainerId(
+    service: TabbarService,
+    currentId: string | undefined,
+    defaultContainer: string | undefined,
+  ) {
     if (isUndefined(currentId)) {
+      // 未指定 currentId 时,使用默认容器或第一个注册的容器
       if (isUndefined(defaultContainer)) {
-        // 默认采用首个注册的容器作为当前 containerId
         service.updateNextContainerId();
       } else {
         service.updateCurrentContainerId(defaultContainer);
       }
-    } else if (currentId && !this.isDropContainer(currentId)) {
+      return;
+    }
+
+    if (currentId && !this.isDropContainer(currentId)) {
       if (service.containersMap.has(currentId)) {
         service.updateCurrentContainerId(currentId);
-      } else {
-        // 如果在别的 tabbar 中存在该 containerId，则将其移动到当前 tabbar
-        if (this.findTabbarServiceByContainerId(currentId)) {
-          this.moveContainerTo(currentId, service.location);
-          service.updateCurrentContainerId(currentId);
-        } else {
-          service.updateCurrentContainerId(defaultContainer);
-          // 等待后续新容器注册时，更新当前的 containerId
-          service.updateNextContainerId(currentId);
-        }
+        return;
       }
-    } else if (currentId === '' || this.isDropContainer(currentId)) {
+
+      // 如果当前 containerId 不存在，则使用默认容器
+      service.updateCurrentContainerId(defaultContainer || '');
+      service.updateNextContainerId(currentId);
+      return;
+    }
+
+    if (currentId === '' || this.isDropContainer(currentId)) {
       service.updateCurrentContainerId('');
     }
-  };
+  }
 
   findTabbarServiceByContainerId(containerId: string): TabbarService | undefined {
     let tabbarService: undefined | TabbarService;
@@ -256,7 +284,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
       this.logger.error(`cannot find container: ${containerId}`);
       return;
     }
-    if (!container.options?.draggable) {
+    if (container.options?.draggable === false) {
       this.logger.warn(`container: ${containerId} is not draggable`);
       return;
     }
@@ -271,33 +299,59 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
     toTabbar.dynamicAddContainer(containerId, container);
     const newHandler = this.injector.get(TabBarHandler, [containerId, this.getTabbarService(toTabbar.location)]);
     this.handleMap.set(containerId, newHandler!);
+
+    // 更新容器位置信息
+    if (!this.state.containerLocations) {
+      this.state.containerLocations = {};
+    }
+    this.state.containerLocations[containerId] = to;
+    // this.layoutState.setState(LAYOUT_STATE.MAIN, this.state);
   }
 
   showDropAreaForContainer(containerId: string): void {
     const tabbarService = this.findTabbarServiceByContainerId(containerId);
-    const bottomService = this.tabbarServices.get('bottom');
-    const rightService = this.tabbarServices.get('right');
+    const panelService = this.tabbarServices.get(SlotLocation.panel);
+    const extendViewService = this.tabbarServices.get(SlotLocation.extendView);
+    const viewService = this.tabbarServices.get(SlotLocation.view);
     if (!tabbarService) {
       this.logger.error(`cannot find container: ${containerId}`);
       return;
     }
-    if (tabbarService?.location === 'right') {
-      bottomService?.updateCurrentContainerId(DROP_BOTTOM_CONTAINER);
-    }
-    if (tabbarService?.location === 'bottom') {
-      rightService?.updateCurrentContainerId(DROP_RIGHT_CONTAINER);
-    }
+    const otherServices = {
+      [SlotLocation.extendView]: [panelService, viewService],
+      [SlotLocation.panel]: [extendViewService, viewService],
+      [SlotLocation.view]: [panelService, extendViewService],
+    };
+
+    const dropContainers = {
+      [SlotLocation.panel]: DROP_PANEL_CONTAINER,
+      [SlotLocation.extendView]: DROP_EXTEND_VIEW_CONTAINER,
+      [SlotLocation.view]: DROP_VIEW_CONTAINER,
+    };
+
+    transaction((tx) => {
+      otherServices[tabbarService?.location]?.forEach((service) => {
+        service?.updateCurrentContainerId(dropContainers[service?.location], tx);
+      });
+    });
   }
 
   hideDropArea(): void {
-    const bottomService = this.tabbarServices.get('bottom');
-    const rightService = this.tabbarServices.get('right');
-    if (bottomService?.currentContainerId.get() === DROP_BOTTOM_CONTAINER) {
-      bottomService.updateCurrentContainerId(bottomService.previousContainerId || '');
-    }
-    if (rightService?.currentContainerId.get() === DROP_RIGHT_CONTAINER) {
-      rightService.updateCurrentContainerId(rightService.previousContainerId || '');
-    }
+    const panelService = this.tabbarServices.get(SlotLocation.panel);
+    const extendViewService = this.tabbarServices.get(SlotLocation.extendView);
+    const viewService = this.tabbarServices.get(SlotLocation.view);
+
+    transaction((tx) => {
+      if (panelService?.currentContainerId.get() === DROP_PANEL_CONTAINER) {
+        panelService.updateCurrentContainerId(panelService.previousContainerId || '', tx);
+      }
+      if (extendViewService?.currentContainerId.get() === DROP_EXTEND_VIEW_CONTAINER) {
+        extendViewService.updateCurrentContainerId(extendViewService.previousContainerId || '', tx);
+      }
+      if (viewService?.currentContainerId.get() === DROP_VIEW_CONTAINER) {
+        viewService.updateCurrentContainerId(viewService.previousContainerId || '', tx);
+      }
+    });
   }
 
   isVisible(location: string) {
@@ -336,7 +390,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
   }
 
   private isDropContainer(containerId: string): boolean {
-    return [DROP_BOTTOM_CONTAINER, DROP_RIGHT_CONTAINER].includes(containerId);
+    return [DROP_PANEL_CONTAINER, DROP_EXTEND_VIEW_CONTAINER, DROP_VIEW_CONTAINER].includes(containerId);
   }
 
   private findNonDropContainerId(tabbarService: TabbarService): string {
@@ -382,7 +436,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
         });
       const debouncedStoreState = debounce(() => this.storeState(service, service.currentContainerId.get()), 100);
       service.addDispose(service.onSizeChange(debouncedStoreState));
-      if (location === SlotLocation.bottom) {
+      if (location === SlotLocation.panel) {
         // use this getter's side effect to set bottomExpanded contextKey
         const debouncedUpdate = debounce(() => void this.bottomExpanded, 100);
         service.addDispose(service.onSizeChange(() => debouncedUpdate));
@@ -463,6 +517,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
     if (Fc) {
       this.debug.warn('collectTabbarComponent api warning: Please move react component into options.component!');
     }
+    side = this.mapSideToLocation(side);
     if (options.hideIfEmpty && !views.length && !options.component) {
       this.holdTabbarComponent.set(options.containerId, { views, options, side });
       if (this.tabbarUpdateSet.has(options.containerId)) {
@@ -495,6 +550,19 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
     return options.containerId;
   }
 
+  private mapSideToLocation(side: string): SlotLocation {
+    switch (side) {
+      case 'left':
+        return SlotLocation.view;
+      case 'right':
+        return SlotLocation.extendView;
+      case 'bottom':
+        return SlotLocation.panel;
+      default:
+        return side;
+    }
+  }
+
   getViewAccordionService(viewId: string) {
     const containerId = this.viewToContainerMap.get(viewId);
     if (!containerId) {
@@ -640,7 +708,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
 
   // TODO 这样很耦合，不能做到tab renderer自由拆分
   expandBottom(expand: boolean): void {
-    const tabbarService = this.getTabbarService(SlotLocation.bottom);
+    const tabbarService = this.getTabbarService(SlotLocation.panel);
     if (!tabbarService.currentContainerId.get()) {
       tabbarService.updateCurrentContainerId(
         tabbarService.currentContainerId.get() ||
@@ -653,7 +721,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
   }
 
   get bottomExpanded(): boolean {
-    const tabbarService = this.getTabbarService(SlotLocation.bottom);
+    const tabbarService = this.getTabbarService(SlotLocation.panel);
     this.contextKeyService.createKey('bottomFullExpanded', tabbarService.isExpanded);
     return tabbarService.isExpanded;
   }

package/src/browser/main-layout.contribution.ts

@@ -39,85 +39,34 @@ import {
   MenuId,
 } from '@opensumi/ide-core-browser/lib/menu/next';
 import { ContributionProvider, Domain, IEventBus, WithEventBus, localize } from '@opensumi/ide-core-common';
-import { Command, CommandContribution, CommandRegistry, CommandService } from '@opensumi/ide-core-common/lib/command';
+import { CommandContribution, CommandRegistry, CommandService } from '@opensumi/ide-core-common/lib/command';
 
-import { DROP_BOTTOM_CONTAINER, DROP_RIGHT_CONTAINER, IMainLayoutService } from '../common';
+import { DROP_EXTEND_VIEW_CONTAINER, DROP_PANEL_CONTAINER, DROP_VIEW_CONTAINER, IMainLayoutService } from '../common';
 
-import { BottomDropArea, RightDropArea } from './drop-area/drop-area';
+import {
+  EXPAND_BOTTOM_PANEL,
+  EXPAND_PANEL_COMMAND,
+  IS_VISIBLE_BOTTOM_PANEL_COMMAND,
+  IS_VISIBLE_EXTEND_VIEW_COMMAND,
+  IS_VISIBLE_LEFT_PANEL_COMMAND,
+  IS_VISIBLE_PANEL_COMMAND,
+  IS_VISIBLE_RIGHT_PANEL_COMMAND,
+  IS_VISIBLE_VIEW_COMMAND,
+  RETRACT_BOTTOM_PANEL,
+  RETRACT_PANEL_COMMAND,
+  TOGGLE_BOTTOM_PANEL_COMMAND,
+  TOGGLE_EXTEND_VIEW_COMMAND,
+  TOGGLE_LEFT_PANEL_COMMAND,
+  TOGGLE_PANEL_COMMAND,
+  TOGGLE_RIGHT_PANEL_COMMAND,
+  TOGGLE_VIEW_COMMAND,
+  WORKBENCH_ACTION_CLOSEPANEL,
+  WORKBENCH_ACTION_CLOSESIDECAR,
+} from './command';
+import { ExtendViewDropArea, PanelDropArea, ViewDropArea } from './drop-area/drop-area';
 import { ViewQuickOpenHandler } from './quick-open-view';
 import { BottomTabRenderer, LeftTabRenderer, RightTabRenderer } from './tabbar/renderer.view';
 
-// NOTE 左右侧面板的展开、折叠命令请使用组合命令 activity-bar.left.toggle，layout命令仅做折叠展开，不处理tab激活逻辑
-export const HIDE_LEFT_PANEL_COMMAND: Command = {
-  id: 'main-layout.left-panel.hide',
-  label: '%main-layout.left-panel.hide%',
-};
-
-export const WORKBENCH_ACTION_CLOSESIDECAR: Command = {
-  id: 'workbench.action.closeSidebar',
-  label: '%main-layout.sidebar.hide%',
-};
-
-export const SHOW_LEFT_PANEL_COMMAND: Command = {
-  id: 'main-layout.left-panel.show',
-  label: '%main-layout.left-panel.show%',
-};
-export const TOGGLE_LEFT_PANEL_COMMAND: MenuCommandDesc = {
-  id: 'main-layout.left-panel.toggle',
-  label: '%main-layout.left-panel.toggle%',
-};
-export const HIDE_RIGHT_PANEL_COMMAND: Command = {
-  id: 'main-layout.right-panel.hide',
-  label: '%main-layout.right-panel.hide%',
-};
-export const SHOW_RIGHT_PANEL_COMMAND: Command = {
-  id: 'main-layout.right-panel.show',
-  label: '%main-layout.right-panel.show%',
-};
-export const TOGGLE_RIGHT_PANEL_COMMAND: MenuCommandDesc = {
-  id: 'main-layout.right-panel.toggle',
-  label: '%main-layout.right-panel.toggle%',
-};
-
-export const HIDE_BOTTOM_PANEL_COMMAND: Command = {
-  id: 'main-layout.bottom-panel.hide',
-  label: '%main-layout.bottom-panel.hide%',
-};
-
-export const WORKBENCH_ACTION_CLOSEPANEL: Command = {
-  id: 'workbench.action.closePanel',
-  delegate: HIDE_BOTTOM_PANEL_COMMAND.id,
-};
-
-export const SHOW_BOTTOM_PANEL_COMMAND: Command = {
-  id: 'main-layout.bottom-panel.show',
-  label: '%main-layout.bottom-panel.show%',
-};
-export const TOGGLE_BOTTOM_PANEL_COMMAND: Command = {
-  id: 'main-layout.bottom-panel.toggle',
-  iconClass: getIcon('minus'),
-  label: '%layout.tabbar.toggle%',
-};
-export const IS_VISIBLE_BOTTOM_PANEL_COMMAND: Command = {
-  id: 'main-layout.bottom-panel.is-visible',
-};
-export const IS_VISIBLE_LEFT_PANEL_COMMAND: Command = {
-  id: 'main-layout.left-panel.is-visible',
-};
-export const IS_VISIBLE_RIGHT_PANEL_COMMAND: Command = {
-  id: 'main-layout.right-panel.is-visible',
-};
-export const EXPAND_BOTTOM_PANEL: Command = {
-  id: 'main-layout.bottom-panel.expand',
-  label: '%layout.tabbar.expand%',
-  iconClass: getIcon('expand'),
-};
-export const RETRACT_BOTTOM_PANEL: Command = {
-  id: 'main-layout.bottom-panel.retract',
-  label: '%layout.tabbar.retract%',
-  iconClass: getIcon('shrink'),
-};
-
 @Domain(
   CommandContribution,
   ClientAppContribution,
@@ -196,15 +145,20 @@ export class MainLayoutModuleContribution
   }
 
   registerComponent(registry: ComponentRegistry): void {
-    registry.register(DROP_RIGHT_CONTAINER, [], {
-      component: RightDropArea,
+    registry.register(DROP_EXTEND_VIEW_CONTAINER, [], {
+      component: ExtendViewDropArea,
+      hideTab: true,
+      containerId: DROP_EXTEND_VIEW_CONTAINER,
+    });
+    registry.register(DROP_PANEL_CONTAINER, [], {
+      component: PanelDropArea,
       hideTab: true,
-      containerId: DROP_RIGHT_CONTAINER,
+      containerId: DROP_PANEL_CONTAINER,
     });
-    registry.register(DROP_BOTTOM_CONTAINER, [], {
-      component: BottomDropArea,
+    registry.register(DROP_VIEW_CONTAINER, [], {
+      component: ViewDropArea,
       hideTab: true,
-      containerId: DROP_BOTTOM_CONTAINER,
+      containerId: DROP_VIEW_CONTAINER,
     });
   }
 
@@ -217,78 +171,75 @@ export class MainLayoutModuleContribution
   }
 
   registerRenderer(registry: SlotRendererRegistry) {
-    registry.registerSlotRenderer(SlotLocation.right, RightTabRenderer);
-    registry.registerSlotRenderer(SlotLocation.left, LeftTabRenderer);
-    registry.registerSlotRenderer(SlotLocation.bottom, BottomTabRenderer);
-  }
-
-  registerCommands(commands: CommandRegistry): void {
-    // @deprecated
-    commands.registerCommand(HIDE_LEFT_PANEL_COMMAND, {
-      execute: () => {
-        this.mainLayoutService.toggleSlot(SlotLocation.left, false);
+    registry.registerSlotRenderer(SlotLocation.extendView, RightTabRenderer, {
+      isLatter: true,
+      supportedActions: {
+        accordion: true,
       },
     });
-    // @deprecated
-    commands.registerCommand(SHOW_LEFT_PANEL_COMMAND, {
-      execute: (size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.left, true, size);
+    registry.registerSlotRenderer(SlotLocation.view, LeftTabRenderer, {
+      supportedActions: {
+        accordion: true,
       },
     });
-    commands.registerCommand(TOGGLE_LEFT_PANEL_COMMAND, {
-      execute: (show?: boolean, size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.left, show, size);
+    registry.registerSlotRenderer(SlotLocation.panel, BottomTabRenderer, {
+      isLatter: true,
+      supportedActions: {
+        expand: true,
+        toggle: true,
       },
     });
+  }
 
-    // @deprecated
-    commands.registerCommand(HIDE_RIGHT_PANEL_COMMAND, {
-      execute: () => {
-        this.mainLayoutService.toggleSlot(SlotLocation.right, false);
+  registerCommands(commands: CommandRegistry): void {
+    commands.registerCommand(TOGGLE_VIEW_COMMAND, {
+      execute: (show?: boolean, size?: number) => {
+        this.mainLayoutService.toggleSlot(SlotLocation.view, show, size);
       },
     });
-    // @deprecated
-    commands.registerCommand(SHOW_RIGHT_PANEL_COMMAND, {
-      execute: (size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.right, true, size);
+    commands.registerCommand(TOGGLE_EXTEND_VIEW_COMMAND, {
+      execute: (show?: boolean, size?: number) => {
+        this.mainLayoutService.toggleSlot(SlotLocation.extendView, show, size);
       },
     });
-    commands.registerCommand(TOGGLE_RIGHT_PANEL_COMMAND, {
+    commands.registerCommand(TOGGLE_PANEL_COMMAND, {
       execute: (show?: boolean, size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.right, show, size);
+        this.mainLayoutService.toggleSlot(SlotLocation.panel, show, size);
       },
     });
+    commands.registerCommand(IS_VISIBLE_VIEW_COMMAND, {
+      execute: () => this.mainLayoutService.isVisible(SlotLocation.view),
+    });
+    commands.registerCommand(IS_VISIBLE_EXTEND_VIEW_COMMAND, {
+      execute: () => this.mainLayoutService.isVisible(SlotLocation.extendView),
+    });
+    commands.registerCommand(IS_VISIBLE_PANEL_COMMAND, {
+      execute: () => this.mainLayoutService.isVisible(SlotLocation.panel),
+    });
+    // TODO: 下个版本废弃掉
+    commands.registerCommand(TOGGLE_LEFT_PANEL_COMMAND);
+    commands.registerCommand(TOGGLE_RIGHT_PANEL_COMMAND);
+    commands.registerCommand(TOGGLE_BOTTOM_PANEL_COMMAND);
+    commands.registerCommand(EXPAND_BOTTOM_PANEL);
+    commands.registerCommand(RETRACT_BOTTOM_PANEL);
+    commands.registerCommand(IS_VISIBLE_LEFT_PANEL_COMMAND);
+    commands.registerCommand(IS_VISIBLE_RIGHT_PANEL_COMMAND);
+    commands.registerCommand(IS_VISIBLE_BOTTOM_PANEL_COMMAND);
 
     commands.registerCommand(WORKBENCH_ACTION_CLOSESIDECAR, {
       execute: () =>
         Promise.all([
-          this.mainLayoutService.toggleSlot(SlotLocation.left, false),
-          this.mainLayoutService.toggleSlot(SlotLocation.right, false),
+          this.mainLayoutService.toggleSlot(SlotLocation.view, false),
+          this.mainLayoutService.toggleSlot(SlotLocation.extendView, false),
         ]),
     });
 
-    commands.registerCommand(SHOW_BOTTOM_PANEL_COMMAND, {
+    commands.registerCommand(WORKBENCH_ACTION_CLOSEPANEL, {
       execute: () => {
-        this.mainLayoutService.toggleSlot(SlotLocation.bottom, true);
+        this.mainLayoutService.toggleSlot(SlotLocation.panel, false);
       },
     });
 
-    commands.registerCommand(HIDE_BOTTOM_PANEL_COMMAND, {
-      execute: () => {
-        this.mainLayoutService.toggleSlot(SlotLocation.bottom, false);
-      },
-    });
-    commands.registerCommand(WORKBENCH_ACTION_CLOSEPANEL);
-    commands.registerCommand(IS_VISIBLE_BOTTOM_PANEL_COMMAND, {
-      execute: () => this.mainLayoutService.getTabbarService('bottom').currentContainerId.get() !== '',
-    });
-    commands.registerCommand(IS_VISIBLE_LEFT_PANEL_COMMAND, {
-      execute: () => this.mainLayoutService.isVisible(SlotLocation.left),
-    });
-    commands.registerCommand(IS_VISIBLE_RIGHT_PANEL_COMMAND, {
-      execute: () => this.mainLayoutService.isVisible(SlotLocation.left),
-    });
-
     commands.registerCommand(
       {
         id: 'view.outward.right-panel.hide',
@@ -359,14 +310,14 @@ export class MainLayoutModuleContribution
     });
 
     Object.entries({
-      [SlotLocation.left]: [
+      [SlotLocation.view]: [
         EXPLORER_CONTAINER_ID,
         SEARCH_CONTAINER_ID,
         SCM_CONTAINER_ID,
         DEBUG_CONTAINER_ID,
         EXTENSION_CONTAINER_ID,
       ],
-      [SlotLocation.bottom]: [
+      [SlotLocation.panel]: [
         MARKER_CONTAINER_ID,
         OUTPUT_CONTAINER_ID,
         DEBUG_CONSOLE_CONTAINER_ID,
@@ -396,24 +347,24 @@ export class MainLayoutModuleContribution
     });
 
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: TOGGLE_LEFT_PANEL_COMMAND,
+      command: TOGGLE_VIEW_COMMAND,
       group: '5_panel',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: TOGGLE_RIGHT_PANEL_COMMAND,
+      command: TOGGLE_EXTEND_VIEW_COMMAND,
       group: '5_panel',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: TOGGLE_BOTTOM_PANEL_COMMAND as MenuCommandDesc,
+      command: TOGGLE_PANEL_COMMAND as MenuCommandDesc,
       group: '5_panel',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: EXPAND_BOTTOM_PANEL as MenuCommandDesc,
+      command: EXPAND_PANEL_COMMAND as MenuCommandDesc,
       group: '5_panel',
       when: '!bottomFullExpanded',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: RETRACT_BOTTOM_PANEL as MenuCommandDesc,
+      command: RETRACT_PANEL_COMMAND as MenuCommandDesc,
       group: '5_panel',
       when: 'bottomFullExpanded',
     });
@@ -431,20 +382,24 @@ export class MainLayoutModuleContribution
   protected registerSideToggleKey() {
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+b',
-      command: TOGGLE_LEFT_PANEL_COMMAND.id,
+      command: TOGGLE_VIEW_COMMAND.id,
+    });
+    this.keybindingRegistry.registerKeybinding({
+      keybinding: 'ctrlcmd+alt+b',
+      command: TOGGLE_EXTEND_VIEW_COMMAND.id,
     });
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+j',
-      command: TOGGLE_BOTTOM_PANEL_COMMAND.id,
+      command: TOGGLE_PANEL_COMMAND.id,
     });
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+shift+j',
-      command: EXPAND_BOTTOM_PANEL.id,
+      command: EXPAND_PANEL_COMMAND.id,
       when: '!bottomFullExpanded',
     });
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+shift+j',
-      command: RETRACT_BOTTOM_PANEL.id,
+      command: RETRACT_PANEL_COMMAND.id,
       when: 'bottomFullExpanded',
     });
   }