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

package/src/browser/layout.service.ts

@@ -18,7 +18,7 @@ import {
   WithEventBus,
   slotRendererRegistry,
 } from '@opensumi/ide-core-browser';
-import { Layout, fixLayout } from '@opensumi/ide-core-browser/lib/components';
+import { 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,13 +29,11 @@ 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_EXTEND_VIEW_CONTAINER,
-  DROP_PANEL_CONTAINER,
-  DROP_VIEW_CONTAINER,
+  DROP_BOTTOM_CONTAINER,
+  DROP_RIGHT_CONTAINER,
   IMainLayoutService,
   MainLayoutContribution,
   SUPPORT_ACCORDION_LOCATION,
@@ -47,21 +45,19 @@ import { TabbarService } from './tabbar/tabbar.service';
 import { TabBarHandler } from './tabbar-handler';
 
 const defaultLayoutState = {
-  [SlotLocation.view]: {
+  [SlotLocation.left]: {
     currentId: undefined,
     size: undefined,
   },
-  [SlotLocation.extendView]: {
+  [SlotLocation.right]: {
     // 依照下面的恢复逻辑，这里设置为 `''` 时，就不会恢复右侧的 TabBar 的状态（即选中相应的 viewContainer）
     currentId: '',
     size: undefined,
   },
-  [SlotLocation.panel]: {
+  [SlotLocation.bottom]: {
     currentId: undefined,
     size: undefined,
   },
-  // 存储 Container 的移动信息：containerId -> location
-  containerLocations: {},
 };
 
 @Injectable()
@@ -158,7 +154,6 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
       currentId,
       size: service.prevSize,
     };
-
     this.layoutState.setState(LAYOUT_STATE.MAIN, this.state);
   }
 
@@ -179,86 +174,63 @@ 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;
-
-    // 根据存储的容器位置信息恢复容器位置(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);
+    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;
           } else {
-            // 清理无用的状态
-            delete this.state.containerLocations[containerId];
-            this.layoutState.setState(LAYOUT_STATE.MAIN, this.state);
+            this.logger.warn(`[defaultPanels] No \`${restorePanel}\` view found!`);
           }
         }
+      } else {
+        defaultContainer = '';
       }
     }
-
-    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,
-  ) {
+    /**
+     * ContainerId 存在三种值类型，对应的处理模式如下：
+     * 1. undefined: 采用首个注册的容器作为当前 containerId
+     * 2. string: 非 drop container 直接使用该 containerId 作为当前 containerId
+     * 3. '': 直接清空当前 containerId，不展开相应的 viewContainer
+     */
     if (isUndefined(currentId)) {
-      // 未指定 currentId 时,使用默认容器或第一个注册的容器
       if (isUndefined(defaultContainer)) {
+        // 默认采用首个注册的容器作为当前 containerId
         service.updateNextContainerId();
       } else {
         service.updateCurrentContainerId(defaultContainer);
       }
-      return;
-    }
-
-    if (currentId && !this.isDropContainer(currentId)) {
+    } else if (currentId && !this.isDropContainer(currentId)) {
       if (service.containersMap.has(currentId)) {
         service.updateCurrentContainerId(currentId);
-        return;
+      } else {
+        // 如果在别的 tabbar 中存在该 containerId，则将其移动到当前 tabbar
+        if (this.findTabbarServiceByContainerId(currentId)) {
+          this.moveContainerTo(currentId, service.location);
+          service.updateCurrentContainerId(currentId);
+        } else {
+          service.updateCurrentContainerId(defaultContainer);
+          // 等待后续新容器注册时，更新当前的 containerId
+          service.updateNextContainerId(currentId);
+        }
       }
-
-      // 如果当前 containerId 不存在，则使用默认容器
-      service.updateCurrentContainerId(defaultContainer || '');
-      service.updateNextContainerId(currentId);
-      return;
-    }
-
-    if (currentId === '' || this.isDropContainer(currentId)) {
+    } else if (currentId === '' || this.isDropContainer(currentId)) {
       service.updateCurrentContainerId('');
     }
-  }
+  };
 
   findTabbarServiceByContainerId(containerId: string): TabbarService | undefined {
     let tabbarService: undefined | TabbarService;
@@ -284,7 +256,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
       this.logger.error(`cannot find container: ${containerId}`);
       return;
     }
-    if (container.options?.draggable === false) {
+    if (!container.options?.draggable) {
       this.logger.warn(`container: ${containerId} is not draggable`);
       return;
     }
@@ -299,59 +271,33 @@ 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 panelService = this.tabbarServices.get(SlotLocation.panel);
-    const extendViewService = this.tabbarServices.get(SlotLocation.extendView);
-    const viewService = this.tabbarServices.get(SlotLocation.view);
+    const bottomService = this.tabbarServices.get('bottom');
+    const rightService = this.tabbarServices.get('right');
     if (!tabbarService) {
       this.logger.error(`cannot find container: ${containerId}`);
       return;
     }
-    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);
-      });
-    });
+    if (tabbarService?.location === 'right') {
+      bottomService?.updateCurrentContainerId(DROP_BOTTOM_CONTAINER);
+    }
+    if (tabbarService?.location === 'bottom') {
+      rightService?.updateCurrentContainerId(DROP_RIGHT_CONTAINER);
+    }
   }
 
   hideDropArea(): void {
-    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);
-      }
-    });
+    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 || '');
+    }
   }
 
   isVisible(location: string) {
@@ -390,7 +336,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
   }
 
   private isDropContainer(containerId: string): boolean {
-    return [DROP_PANEL_CONTAINER, DROP_EXTEND_VIEW_CONTAINER, DROP_VIEW_CONTAINER].includes(containerId);
+    return [DROP_BOTTOM_CONTAINER, DROP_RIGHT_CONTAINER].includes(containerId);
   }
 
   private findNonDropContainerId(tabbarService: TabbarService): string {
@@ -436,7 +382,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.panel) {
+      if (location === SlotLocation.bottom) {
         // use this getter's side effect to set bottomExpanded contextKey
         const debouncedUpdate = debounce(() => void this.bottomExpanded, 100);
         service.addDispose(service.onSizeChange(() => debouncedUpdate));
@@ -517,7 +463,6 @@ 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)) {
@@ -550,19 +495,6 @@ 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) {
@@ -708,7 +640,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
 
   // TODO 这样很耦合，不能做到tab renderer自由拆分
   expandBottom(expand: boolean): void {
-    const tabbarService = this.getTabbarService(SlotLocation.panel);
+    const tabbarService = this.getTabbarService(SlotLocation.bottom);
     if (!tabbarService.currentContainerId.get()) {
       tabbarService.updateCurrentContainerId(
         tabbarService.currentContainerId.get() ||
@@ -721,7 +653,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
   }
 
   get bottomExpanded(): boolean {
-    const tabbarService = this.getTabbarService(SlotLocation.panel);
+    const tabbarService = this.getTabbarService(SlotLocation.bottom);
     this.contextKeyService.createKey('bottomFullExpanded', tabbarService.isExpanded);
     return tabbarService.isExpanded;
   }

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

@@ -39,34 +39,85 @@ import {
   MenuId,
 } from '@opensumi/ide-core-browser/lib/menu/next';
 import { ContributionProvider, Domain, IEventBus, WithEventBus, localize } from '@opensumi/ide-core-common';
-import { CommandContribution, CommandRegistry, CommandService } from '@opensumi/ide-core-common/lib/command';
+import { Command, CommandContribution, CommandRegistry, CommandService } from '@opensumi/ide-core-common/lib/command';
 
-import { DROP_EXTEND_VIEW_CONTAINER, DROP_PANEL_CONTAINER, DROP_VIEW_CONTAINER, IMainLayoutService } from '../common';
+import { DROP_BOTTOM_CONTAINER, DROP_RIGHT_CONTAINER, IMainLayoutService } from '../common';
 
-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 { BottomDropArea, RightDropArea } 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,
@@ -145,20 +196,15 @@ export class MainLayoutModuleContribution
   }
 
   registerComponent(registry: ComponentRegistry): void {
-    registry.register(DROP_EXTEND_VIEW_CONTAINER, [], {
-      component: ExtendViewDropArea,
-      hideTab: true,
-      containerId: DROP_EXTEND_VIEW_CONTAINER,
-    });
-    registry.register(DROP_PANEL_CONTAINER, [], {
-      component: PanelDropArea,
+    registry.register(DROP_RIGHT_CONTAINER, [], {
+      component: RightDropArea,
       hideTab: true,
-      containerId: DROP_PANEL_CONTAINER,
+      containerId: DROP_RIGHT_CONTAINER,
     });
-    registry.register(DROP_VIEW_CONTAINER, [], {
-      component: ViewDropArea,
+    registry.register(DROP_BOTTOM_CONTAINER, [], {
+      component: BottomDropArea,
       hideTab: true,
-      containerId: DROP_VIEW_CONTAINER,
+      containerId: DROP_BOTTOM_CONTAINER,
     });
   }
 
@@ -171,75 +217,78 @@ export class MainLayoutModuleContribution
   }
 
   registerRenderer(registry: SlotRendererRegistry) {
-    registry.registerSlotRenderer(SlotLocation.extendView, RightTabRenderer, {
-      isLatter: true,
-      supportedActions: {
-        accordion: true,
+    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.view, LeftTabRenderer, {
-      supportedActions: {
-        accordion: true,
+    // @deprecated
+    commands.registerCommand(SHOW_LEFT_PANEL_COMMAND, {
+      execute: (size?: number) => {
+        this.mainLayoutService.toggleSlot(SlotLocation.left, true, size);
       },
     });
-    registry.registerSlotRenderer(SlotLocation.panel, BottomTabRenderer, {
-      isLatter: true,
-      supportedActions: {
-        expand: true,
-        toggle: true,
+    commands.registerCommand(TOGGLE_LEFT_PANEL_COMMAND, {
+      execute: (show?: boolean, size?: number) => {
+        this.mainLayoutService.toggleSlot(SlotLocation.left, show, size);
       },
     });
-  }
 
-  registerCommands(commands: CommandRegistry): void {
-    commands.registerCommand(TOGGLE_VIEW_COMMAND, {
-      execute: (show?: boolean, size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.view, show, size);
+    // @deprecated
+    commands.registerCommand(HIDE_RIGHT_PANEL_COMMAND, {
+      execute: () => {
+        this.mainLayoutService.toggleSlot(SlotLocation.right, false);
       },
     });
-    commands.registerCommand(TOGGLE_EXTEND_VIEW_COMMAND, {
-      execute: (show?: boolean, size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.extendView, show, size);
+    // @deprecated
+    commands.registerCommand(SHOW_RIGHT_PANEL_COMMAND, {
+      execute: (size?: number) => {
+        this.mainLayoutService.toggleSlot(SlotLocation.right, true, size);
       },
     });
-    commands.registerCommand(TOGGLE_PANEL_COMMAND, {
+    commands.registerCommand(TOGGLE_RIGHT_PANEL_COMMAND, {
       execute: (show?: boolean, size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.panel, show, size);
+        this.mainLayoutService.toggleSlot(SlotLocation.right, 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.view, false),
-          this.mainLayoutService.toggleSlot(SlotLocation.extendView, false),
+          this.mainLayoutService.toggleSlot(SlotLocation.left, false),
+          this.mainLayoutService.toggleSlot(SlotLocation.right, false),
         ]),
     });
 
-    commands.registerCommand(WORKBENCH_ACTION_CLOSEPANEL, {
+    commands.registerCommand(SHOW_BOTTOM_PANEL_COMMAND, {
       execute: () => {
-        this.mainLayoutService.toggleSlot(SlotLocation.panel, false);
+        this.mainLayoutService.toggleSlot(SlotLocation.bottom, true);
       },
     });
 
+    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',
@@ -310,14 +359,14 @@ export class MainLayoutModuleContribution
     });
 
     Object.entries({
-      [SlotLocation.view]: [
+      [SlotLocation.left]: [
         EXPLORER_CONTAINER_ID,
         SEARCH_CONTAINER_ID,
         SCM_CONTAINER_ID,
         DEBUG_CONTAINER_ID,
         EXTENSION_CONTAINER_ID,
       ],
-      [SlotLocation.panel]: [
+      [SlotLocation.bottom]: [
         MARKER_CONTAINER_ID,
         OUTPUT_CONTAINER_ID,
         DEBUG_CONSOLE_CONTAINER_ID,
@@ -347,24 +396,24 @@ export class MainLayoutModuleContribution
     });
 
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: TOGGLE_VIEW_COMMAND,
+      command: TOGGLE_LEFT_PANEL_COMMAND,
       group: '5_panel',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: TOGGLE_EXTEND_VIEW_COMMAND,
+      command: TOGGLE_RIGHT_PANEL_COMMAND,
       group: '5_panel',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: TOGGLE_PANEL_COMMAND as MenuCommandDesc,
+      command: TOGGLE_BOTTOM_PANEL_COMMAND as MenuCommandDesc,
       group: '5_panel',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: EXPAND_PANEL_COMMAND as MenuCommandDesc,
+      command: EXPAND_BOTTOM_PANEL as MenuCommandDesc,
       group: '5_panel',
       when: '!bottomFullExpanded',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: RETRACT_PANEL_COMMAND as MenuCommandDesc,
+      command: RETRACT_BOTTOM_PANEL as MenuCommandDesc,
       group: '5_panel',
       when: 'bottomFullExpanded',
     });
@@ -382,24 +431,20 @@ export class MainLayoutModuleContribution
   protected registerSideToggleKey() {
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+b',
-      command: TOGGLE_VIEW_COMMAND.id,
-    });
-    this.keybindingRegistry.registerKeybinding({
-      keybinding: 'ctrlcmd+alt+b',
-      command: TOGGLE_EXTEND_VIEW_COMMAND.id,
+      command: TOGGLE_LEFT_PANEL_COMMAND.id,
     });
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+j',
-      command: TOGGLE_PANEL_COMMAND.id,
+      command: TOGGLE_BOTTOM_PANEL_COMMAND.id,
     });
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+shift+j',
-      command: EXPAND_PANEL_COMMAND.id,
+      command: EXPAND_BOTTOM_PANEL.id,
       when: '!bottomFullExpanded',
     });
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+shift+j',
-      command: RETRACT_PANEL_COMMAND.id,
+      command: RETRACT_BOTTOM_PANEL.id,
       when: 'bottomFullExpanded',
     });
   }