feat: make terminal draggable

packages/ai-native/src/browser/layout/layout.module.less

@@ -119,20 +119,20 @@
   border: none;
 }
 
+.header {
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  background-color: var(--editorGroupHeader-tabsBackground);
+}
+
 .right_slot_container_wrap {
   height: 100%;
   display: flex;
   flex-direction: column;
 
-  .header {
-    height: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 10px;
-    background-color: var(--editorGroupHeader-tabsBackground);
-  }
-
   .container {
     flex: 1;
   }

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

@@ -174,16 +174,18 @@ export const AIRightTabRenderer = ({
     return (
       <ContainerView
         {...props}
+        customTitleBar={
+          <div className={styles.header}>
+            <span className={styles.title}>{options && options.title}</span>
+            <div className={styles.side}>
+              <EnhancePopover id={'ai_right_panel_header_close'} title={localize('editor.title.context.close')}>
+                <EnhanceIcon icon='close' onClick={handleClose} />
+              </EnhancePopover>
+            </div>
+          </div>
+        }
         renderContainerWrap={({ children }) => (
           <div className={styles.right_slot_container_wrap}>
-            <div className={styles.header}>
-              <span className={styles.title}>{options && options.title}</span>
-              <div className={styles.side}>
-                <EnhancePopover id={'ai_right_panel_header_close'} title={localize('editor.title.context.close')}>
-                  <EnhanceIcon icon='close' onClick={handleClose} />
-                </EnhancePopover>
-              </div>
-            </div>
             <div className={styles.container}>{children}</div>
           </div>
         )}

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

@@ -74,11 +74,14 @@ export interface ExtViewContainerOptions {
   hideIfEmpty?: boolean;
   // 隐藏tab图标，仅挂载视图，视图切换交给其他逻辑控制
   hideTab?: boolean;
+  // 隐藏指定位置的图标
+  hideLocationTab?: SlotLocation[];
   noResize?: boolean;
   fromExtension?: boolean;
   // viewContainer 最小高度，默认 120
   miniSize?: number;
   alignment?: Layout.alignment;
+  draggable?: boolean;
 }
 export const ComponentRegistry = Symbol('ComponentRegistry');
 

packages/design/src/browser/style/design.module.less

@@ -601,6 +601,7 @@
 
     &::-webkit-scrollbar {
       width: 4px;
+
       &:hover {
         width: 10px;
       }
@@ -716,6 +717,25 @@
   .design-extension_item {
     border-radius: 8px;
   }
+
+  .design-tab_item_wrapper {
+    > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      line-height: 22px;
+      padding: 0;
+      border-radius: 4px;
+      font-size: 16px;
+
+      &:hover {
+        color: var(--design-text-hoverForeground);
+        background-color: var(--kt-icon-hoverBackground);
+      }
+    }
+  }
 }
 
 :global(.kt-dialog-content) {

packages/i18n/src/common/en-US.lang.ts

@@ -1326,6 +1326,7 @@ export const localizationBundle = {
     'main-layout.bottom-panel.toggle': 'Toggle Bottom Side Bar',
     'main-layout.bottom-panel.show': 'Show Bottom Side Bar',
     'main-layout.bottom-panel.hide': 'Hide Bottom Side Bar',
+    'main-layout.drop-area.tip': 'drop here',
 
     'refactor-preview.title': 'REFACTOR PREVIEW',
     'refactor-preview.title.clear': 'Discard Refactoring',

packages/i18n/src/common/zh-CN.lang.ts

@@ -924,6 +924,7 @@ export const localizationBundle = {
     'main-layout.bottom-panel.toggle': '切换底部面板',
     'main-layout.bottom-panel.show': '显示底部面板',
     'main-layout.bottom-panel.hide': '隐藏底部面板',
+    'main-layout.drop-area.tip': '放置此处',
 
     'refactor-preview.title': '重构预览',
     'refactor-preview.title.clear': '放弃重构',

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

@@ -1,18 +1,43 @@
 import React from 'react';
 
-import { useDesignStyles } from '@opensumi/ide-core-browser';
+import { useDesignStyles, useInjectable } from '@opensumi/ide-core-browser';
+
+import { TabbarService, TabbarServiceFactory } from '../tabbar/tabbar.service';
 
 import styles from './styles.module.less';
 
 export const TitleBar: React.FC<{
   title: string;
   menubar?: React.ReactNode;
   height?: number;
+  draggable?: boolean;
+  side?: string;
+  containerId?: string;
 }> = React.memo((props) => {
   const styles_titlebar = useDesignStyles(styles.titlebar, 'titlebar');
+  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(props.side);
+
+  const handleDragStart = (e: React.DragEvent) => {
+    if (props.containerId && props.side) {
+      tabbarService.handleDragStart(e, props.containerId);
+    }
+  };
+
+  const handleDragEnd = React.useCallback(
+    (e: React.DragEvent) => {
+      tabbarService.handleDragEnd(e);
+    },
+    [tabbarService],
+  );
+
   return (
     <div className={styles_titlebar} style={{ height: props.height }}>
-      <h1>{props.title}</h1>
+      {!props.draggable && <h1>{props.title}</h1>}
+      {!!props.draggable && (
+        <h1 draggable style={{ cursor: 'pointer' }} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+          {props.title}
+        </h1>
+      )}
       {props.menubar || null}
     </div>
   );

packages/main-layout/src/browser/default-config.ts

@@ -1,6 +1,8 @@
 /* istanbul ignore file */
 import { LayoutConfig, SlotLocation } from '@opensumi/ide-core-browser';
 
+import { DROP_BOTTOM_CONTAINER, DROP_RIGHT_CONTAINER } from '../common';
+
 export const defaultConfig: LayoutConfig = {
   [SlotLocation.top]: {
     modules: ['@opensumi/ide-menu-bar'],
@@ -19,13 +21,19 @@ export const defaultConfig: LayoutConfig = {
     ],
   },
   [SlotLocation.right]: {
-    modules: [],
+    modules: [DROP_RIGHT_CONTAINER],
   },
   [SlotLocation.main]: {
     modules: ['@opensumi/ide-editor'],
   },
   [SlotLocation.bottom]: {
-    modules: ['@opensumi/ide-terminal-next', '@opensumi/ide-output', 'debug-console', '@opensumi/ide-markers'],
+    modules: [
+      DROP_BOTTOM_CONTAINER,
+      '@opensumi/ide-terminal-next',
+      '@opensumi/ide-output',
+      'debug-console',
+      '@opensumi/ide-markers',
+    ],
   },
   [SlotLocation.statusBar]: {
     modules: ['@opensumi/ide-status-bar'],

packages/main-layout/src/browser/drop-area/drop-area.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { localize, useInjectable } from '@opensumi/ide-core-browser';
+
+import { IMainLayoutService } from '../../common';
+
+import styles from './styles.module.less';
+
+interface IDropAreaProps {
+  location: string;
+}
+
+const DropArea: React.FC<IDropAreaProps> = (props) => {
+  const { location } = props;
+  const layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
+
+  const handleDrop = React.useCallback(
+    (e: React.DragEvent) => {
+      const containerId = e.dataTransfer?.getData('containerId');
+      layoutService.moveContainerTo(containerId, location);
+    },
+    [layoutService, location],
+  );
+
+  return (
+    <div
+      className={styles.drop_area}
+      onDrop={handleDrop}
+      onDragOver={(e) => {
+        e.preventDefault();
+      }}
+    >
+      {localize('main-layout.drop-area.tip')}
+    </div>
+  );
+};
+
+export const RightDropArea = () => <DropArea location='right' />;
+
+export const BottomDropArea = () => <DropArea location='bottom' />;

packages/main-layout/src/browser/drop-area/styles.module.less

@@ -0,0 +1,7 @@
+.drop_area {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}