chore: improve terminal tab title (#1705)

* chore: improve terminal tab title

* chore: improve terminal tab title

Author: Ricbet

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

@@ -635,6 +635,7 @@ export const localizationBundle = {
     'terminal.try.reconnect': 'Try To Reconnect The Terminal',
     'terminal.try.recreate': 'Try To Recreate The Terminal',
     'terminal.new': 'Create Terminal',
+    'terminal.new.type': 'Create terminal by type',
     'terminal.split': 'Split Terminal',
     'terminal.clear': 'Remove All Terminals',
     'terminal.clear.content': 'Clear All Contents',

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

@@ -668,6 +668,7 @@ export const localizationBundle = {
     'terminal.try.reconnect': '重新连接终端',
     'terminal.try.recreate': '重新启动终端',
     'terminal.new': '新建终端',
+    'terminal.new.type': '根据终端类型新建',
     'terminal.split': '拆分终端',
     'terminal.clear': '终止所有终端',
     'terminal.clear.content': '清空当前终端内容',

packages/terminal-next/src/browser/component/tab.item.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import React, { useEffect, useRef, KeyboardEvent, createElement } from 'react';
 
 import { Icon } from '@opensumi/ide-components/lib/icon/icon';
-import { getIcon, useInjectable, URI } from '@opensumi/ide-core-browser';
+import { getIcon, useInjectable, URI, localize, TERMINAL_COMMANDS } from '@opensumi/ide-core-browser';
 import { Loading } from '@opensumi/ide-core-browser/lib/components/loading';
 import { LAYOUT_VIEW_SIZE } from '@opensumi/ide-core-browser/lib/layout/constants';
 import { IIconService } from '@opensumi/ide-theme';
@@ -101,17 +101,22 @@ export const renderInfoItem = observer((props: ItemProps) => {
 
 export const renderAddItem = observer((props: ItemProps) => {
   const handleAdd = debounce(() => props.onClick && props.onClick(), 20);
+  const keybinding = props.getKeybinding && props.getKeybinding(TERMINAL_COMMANDS.ADD.id);
+
+  const createTitle = keybinding ? `${localize('terminal.new')}(${keybinding})` : localize('terminal.new');
 
   return (
     <div className={styles.item_wrapper}>
       <div
+        title={createTitle}
         className={clx({
           [getIcon('plus')]: true,
           [styles.item_add]: true,
         })}
         onClick={() => handleAdd()}
       />
       <div
+        title={localize('terminal.new.type')}
         className={clx({
           [getIcon('down')]: true,
           [styles.item_more]: true,

packages/terminal-next/src/browser/component/tab.view.tsx

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react-lite';
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 
-import { useInjectable } from '@opensumi/ide-core-browser';
+import { KeybindingRegistry, useInjectable } from '@opensumi/ide-core-browser';
 import { Scroll } from '@opensumi/ide-core-browser/lib/components/scroll';
 import { IThemeService, ThemeType } from '@opensumi/ide-theme';
 
@@ -16,6 +16,7 @@ export default observer(() => {
   const provider = useInjectable<ITerminalRenderProvider>(ITerminalRenderProvider);
   const menuService = useInjectable<TerminalContextMenuService>(TerminalContextMenuService);
   const themeService = useInjectable<IThemeService>(IThemeService);
+  const keybindingService = useInjectable<KeybindingRegistry>(KeybindingRegistry);
   const tabContainer = useRef<HTMLDivElement | null>();
   const [theme, setTheme] = useState<ThemeType>('dark');
 
@@ -70,6 +71,13 @@ export default observer(() => {
                   view.createWidget(group);
                   view.selectGroup(index);
                 }}
+                getKeybinding={(id) => {
+                  const bindings = keybindingService.getKeybindingsForCommand(id);
+                  if (Array.isArray(bindings) && bindings[0]) {
+                    return keybindingService.acceleratorFor(bindings[0], '')[0] || '';
+                  }
+                  return '';
+                }}
                 onDropdown={(event) => menuService.onDropDownContextMenu(event)}
                 provider={provider}
                 theme={theme}

packages/terminal-next/src/common/render.ts

@@ -20,6 +20,7 @@ export interface ItemProps {
   onInputEnter?: (id: string, name: string) => void;
   onDropdown?: (event: React.MouseEvent<HTMLElement>) => void;
   onContextMenu?: (event: React.MouseEvent<HTMLElement>) => void;
+  getKeybinding?: (command: string) => string;
   provider: ITerminalRenderProvider;
   theme: ThemeType;
 }