@opensumi/ide-main-layout 2.12.1-next-079c1930

package/lib/browser/tabbar/panel.view.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextBottomTabPanelRenderer = exports.BottomTabPanelRenderer = exports.LeftTabPanelRenderer = exports.RightTabPanelRenderer = exports.BaseTabPanelView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
+const styles_module_less_1 = (0, tslib_1.__importDefault)(require("./styles.module.less"));
+const di_1 = require("@opensumi/di");
+const ide_core_browser_1 = require("@opensumi/ide-core-browser");
+const tabbar_service_1 = require("./tabbar.service");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const renderer_view_1 = require("./renderer.view");
+const accordion_view_1 = require("../accordion/accordion.view");
+const actions_1 = require("@opensumi/ide-core-browser/lib/components/actions");
+const titlebar_view_1 = require("../accordion/titlebar.view");
+const accordion_service_1 = require("../accordion/accordion.service");
+const progress_1 = require("@opensumi/ide-core-browser/lib/progress");
+const progress_bar_1 = require("@opensumi/ide-core-browser/lib/progress/progress-bar");
+const NoUpdateBoundary = react_1.default.memo(({ children }) => children, (prev, next) => !(prev.visible || next.visible));
+exports.BaseTabPanelView = (0, mobx_react_lite_1.observer)(({ PanelView, panelSize }) => {
+    const { side } = react_1.default.useContext(renderer_view_1.TabbarConfig);
+    const tabbarService = (0, ide_core_browser_1.useInjectable)(tabbar_service_1.TabbarServiceFactory)(side);
+    const appConfig = (0, ide_core_browser_1.useInjectable)(ide_core_browser_1.AppConfig);
+    const customPanelSize = appConfig.panelSizes && appConfig.panelSizes[side];
+    const { currentContainerId } = tabbarService;
+    const panelVisible = { zIndex: 1, display: 'block' };
+    const panelInVisible = { zIndex: -1, display: 'none' };
+    react_1.default.useEffect(() => {
+        // panelSize = 384-1-48
+        tabbarService.panelSize = customPanelSize || panelSize || 335;
+    }, []);
+    // tslint:disable-next-line:no-unused-variable
+    const forceUpdate = tabbarService.forceUpdate;
+    return (react_1.default.createElement("div", { className: styles_module_less_1.default.tab_panel }, tabbarService.visibleContainers.map((component) => {
+        const containerId = component.options.containerId;
+        const titleMenu = tabbarService.getTitleToolbarMenu(containerId);
+        return react_1.default.createElement("div", { key: containerId, className: (0, classnames_1.default)(styles_module_less_1.default.panel_wrap, containerId) /* @deprecated: query by data-viewlet-id */, "data-viewlet-id": containerId, style: currentContainerId === containerId ? panelVisible : panelInVisible },
+            react_1.default.createElement(ide_core_browser_1.ErrorBoundary, null,
+                react_1.default.createElement(NoUpdateBoundary, { visible: currentContainerId === containerId },
+                    react_1.default.createElement(PanelView, { titleMenu: titleMenu, side: side, component: component }))));
+    })));
+});
+const ContainerView = (({ component, titleMenu, side }) => {
+    var _a;
+    const ref = react_1.default.useRef();
+    const containerRef = react_1.default.useRef(null);
+    const configContext = (0, ide_core_browser_1.useInjectable)(ide_core_browser_1.AppConfig);
+    const { title, titleComponent, component: CustomComponent, containerId } = component.options;
+    const injector = (0, ide_core_browser_1.useInjectable)(di_1.INJECTOR_TOKEN);
+    const handleContextMenu = (e) => {
+        const accordionService = injector.get(accordion_service_1.AccordionServiceFactory)(containerId);
+        accordionService.handleContextMenu(e);
+    };
+    const progressService = (0, ide_core_browser_1.useInjectable)(progress_1.IProgressService);
+    const indicator = progressService.getIndicator(containerId);
+    const viewState = (0, ide_core_browser_1.useViewState)(side, containerRef);
+    return (react_1.default.createElement("div", { ref: containerRef, className: styles_module_less_1.default.view_container },
+        !CustomComponent && react_1.default.createElement("div", { onContextMenu: handleContextMenu, className: styles_module_less_1.default.panel_titlebar },
+            !title ? null :
+                react_1.default.createElement(titlebar_view_1.TitleBar, { title: title, menubar: react_1.default.createElement(actions_1.InlineActionBar, { menus: titleMenu }) }),
+            titleComponent && react_1.default.createElement("div", { className: styles_module_less_1.default.panel_component },
+                react_1.default.createElement(ide_core_browser_1.ConfigProvider, { value: configContext },
+                    react_1.default.createElement(ide_core_browser_1.ComponentRenderer, { Component: titleComponent, initialProps: (_a = component.options) === null || _a === void 0 ? void 0 : _a.titleProps })))),
+        react_1.default.createElement("div", { className: styles_module_less_1.default.container_wrap, ref: (ele) => ref.current = ele },
+            react_1.default.createElement(progress_bar_1.ProgressBar, { progressModel: indicator.progressModel }),
+            CustomComponent ? react_1.default.createElement(ide_core_browser_1.ConfigProvider, { value: configContext },
+                react_1.default.createElement(ide_core_browser_1.ComponentRenderer, { initialProps: Object.assign({ viewState }, component.options.initialProps), Component: CustomComponent })) : react_1.default.createElement(accordion_view_1.AccordionContainer, { views: component.views, containerId: component.options.containerId }))));
+});
+const PanelView = (({ component, titleMenu, side }) => {
+    var _a;
+    const contentRef = react_1.default.useRef();
+    const titleComponent = component.options && component.options.titleComponent;
+    return (react_1.default.createElement("div", { className: styles_module_less_1.default.panel_container, ref: (ele) => contentRef.current = ele },
+        react_1.default.createElement("div", { className: styles_module_less_1.default.float_container },
+            titleComponent && react_1.default.createElement("div", { className: styles_module_less_1.default.toolbar_container },
+                react_1.default.createElement(ide_core_browser_1.ComponentRenderer, { Component: titleComponent, initialProps: (_a = component.options) === null || _a === void 0 ? void 0 : _a.titleProps })),
+            react_1.default.createElement("div", { className: 'toolbar_container' }, titleMenu && react_1.default.createElement(actions_1.InlineActionBar, { menus: titleMenu }))),
+        react_1.default.createElement(ide_core_browser_1.ComponentRenderer, { initialProps: component.options && component.options.initialProps, Component: component.views[0].component || component.options.component })));
+});
+const NextPanelView = (({ component, titleMenu, side }) => {
+    var _a;
+    const contentRef = react_1.default.useRef();
+    const titleComponent = component.options && component.options.titleComponent;
+    const tabbarService = (0, ide_core_browser_1.useInjectable)(tabbar_service_1.TabbarServiceFactory)(side);
+    // 注入自定义视图 or 通过views注入视图
+    const progressService = (0, ide_core_browser_1.useInjectable)(progress_1.IProgressService);
+    const indicator = progressService.getIndicator(component.options.containerId);
+    const viewState = (0, ide_core_browser_1.useViewState)(side, contentRef);
+    return (react_1.default.createElement("div", { className: styles_module_less_1.default.panel_container },
+        react_1.default.createElement("div", { className: styles_module_less_1.default.panel_title_bar },
+            react_1.default.createElement("h1", null, component.options.title),
+            react_1.default.createElement("div", { className: styles_module_less_1.default.title_component_container }, titleComponent && react_1.default.createElement(ide_core_browser_1.ComponentRenderer, { Component: titleComponent, initialProps: (_a = component.options) === null || _a === void 0 ? void 0 : _a.titleProps })),
+            react_1.default.createElement("div", { className: styles_module_less_1.default.panel_toolbar_container },
+                titleMenu && react_1.default.createElement(actions_1.InlineActionBar, { menus: titleMenu }),
+                react_1.default.createElement(actions_1.InlineMenuBar, { menus: tabbarService.commonTitleMenu, moreAtFirst: true }))),
+        react_1.default.createElement("div", { ref: (ele) => contentRef.current = ele, className: styles_module_less_1.default.panel_wrapper },
+            react_1.default.createElement(progress_bar_1.ProgressBar, { progressModel: indicator.progressModel }),
+            react_1.default.createElement(ide_core_browser_1.ComponentRenderer, { initialProps: Object.assign({ viewState }, component.options.initialProps), Component: component.options.component ? component.options.component : component.views[0].component }))));
+});
+const RightTabPanelRenderer = () => react_1.default.createElement(exports.BaseTabPanelView, { PanelView: ContainerView });
+exports.RightTabPanelRenderer = RightTabPanelRenderer;
+const LeftTabPanelRenderer = () => react_1.default.createElement(exports.BaseTabPanelView, { PanelView: ContainerView });
+exports.LeftTabPanelRenderer = LeftTabPanelRenderer;
+const BottomTabPanelRenderer = () => react_1.default.createElement(exports.BaseTabPanelView, { PanelView: PanelView });
+exports.BottomTabPanelRenderer = BottomTabPanelRenderer;
+const NextBottomTabPanelRenderer = () => react_1.default.createElement(exports.BaseTabPanelView, { PanelView: NextPanelView, panelSize: 280 });
+exports.NextBottomTabPanelRenderer = NextBottomTabPanelRenderer;
+//# sourceMappingURL=panel.view.js.map

package/lib/browser/tabbar/panel.view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.view.js","sourceRoot":"","sources":["../../../src/browser/tabbar/panel.view.tsx"],"names":[],"mappings":"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"}

package/lib/browser/tabbar/renderer.view.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Layout } from '@opensumi/ide-core-browser/lib/components/layout/layout';
+import { ComponentRegistryInfo } from '@opensumi/ide-core-browser';
+export declare const TabbarConfig: React.Context<{
+    side: string;
+    direction: Layout.direction;
+    fullSize: number;
+}>;
+export declare const TabRendererBase: React.FC<{
+    side: string;
+    className?: string;
+    components: ComponentRegistryInfo[];
+    direction?: Layout.direction;
+    TabbarView: React.FC;
+    TabpanelView: React.FC;
+    noAccordion?: boolean;
+}>;
+export declare const RightTabRenderer: ({ className, components }: {
+    className: string;
+    components: ComponentRegistryInfo[];
+}) => JSX.Element;
+export declare const LeftTabRenderer: ({ className, components }: {
+    className: string;
+    components: ComponentRegistryInfo[];
+}) => JSX.Element;
+export declare const BottomTabRenderer: ({ className, components }: {
+    className: string;
+    components: ComponentRegistryInfo[];
+}) => JSX.Element;
+export declare const NextBottomTabRenderer: ({ className, components }: {
+    className: string;
+    components: ComponentRegistryInfo[];
+}) => JSX.Element;
+//# sourceMappingURL=renderer.view.d.ts.map

package/lib/browser/tabbar/renderer.view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.view.d.ts","sourceRoot":"","sources":["../../../src/browser/tabbar/renderer.view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,MAAM,EAAE,MAAM,yDAAyD,CAAC;AACjF,OAAO,EAAE,qBAAqB,EAAyC,MAAM,4BAA4B,CAAC;AAO1G,eAAO,MAAM,YAAY;UACjB,MAAM;eACD,OAAO,SAAS;cACjB,MAAM;EAKhB,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,qBAAqB,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC;IAC7B,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAEvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAuCC,CAAC;AAEH,eAAO,MAAM,gBAAgB;eAAyC,MAAM;gBAAc,qBAAqB,EAAE;iBAEhH,CAAC;AAEF,eAAO,MAAM,eAAe;eAAyC,MAAM;gBAAc,qBAAqB,EAAE;iBAE/G,CAAC;AAEF,eAAO,MAAM,iBAAiB;eAAyC,MAAM;gBAAc,qBAAqB,EAAE;iBAEjH,CAAC;AAEF,eAAO,MAAM,qBAAqB;eAAyC,MAAM;gBAAc,qBAAqB,EAAE;iBAErH,CAAC"}

package/lib/browser/tabbar/renderer.view.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextBottomTabRenderer = exports.BottomTabRenderer = exports.LeftTabRenderer = exports.RightTabRenderer = exports.TabRendererBase = exports.TabbarConfig = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
+const styles_module_less_1 = (0, tslib_1.__importDefault)(require("./styles.module.less"));
+const layout_1 = require("@opensumi/ide-core-browser/lib/components/layout/layout");
+const ide_core_browser_1 = require("@opensumi/ide-core-browser");
+const bar_view_1 = require("./bar.view");
+const panel_view_1 = require("./panel.view");
+const tabbar_service_1 = require("./tabbar.service");
+const components_1 = require("@opensumi/ide-core-browser/lib/components");
+// TODO 将过深的prop挪到这里
+exports.TabbarConfig = react_1.default.createContext({
+    side: 'left',
+    direction: 'left-to-right',
+    fullSize: 0,
+});
+exports.TabRendererBase = ((_a) => {
+    var { className, components, direction = 'left-to-right', TabbarView, side, TabpanelView } = _a, restProps = (0, tslib_1.__rest)(_a, ["className", "components", "direction", "TabbarView", "side", "TabpanelView"]);
+    const tabbarService = (0, ide_core_browser_1.useInjectable)(tabbar_service_1.TabbarServiceFactory)(side);
+    const eventBus = (0, ide_core_browser_1.useInjectable)(ide_core_browser_1.IEventBus);
+    const resizeHandle = react_1.default.useContext(components_1.PanelContext);
+    const rootRef = react_1.default.useRef(null);
+    const [fullSize, setFullSize] = react_1.default.useState(0);
+    react_1.default.useLayoutEffect(() => {
+        components.forEach((component) => {
+            tabbarService.registerContainer(component.options.containerId, component);
+        });
+        tabbarService.updatePanelVisibility();
+        tabbarService.registerResizeHandle(resizeHandle);
+        tabbarService.viewReady.resolve();
+    }, []);
+    react_1.default.useEffect(() => {
+        if (rootRef.current) {
+            setFullSize(rootRef.current[layout_1.Layout.getDomSizeProperty(direction)]);
+            let lastFrame;
+            eventBus.on(ide_core_browser_1.ResizeEvent, (e) => {
+                if (e.payload.slotLocation === side) {
+                    if (lastFrame) {
+                        window.cancelAnimationFrame(lastFrame);
+                    }
+                    lastFrame = window.requestAnimationFrame(() => {
+                        setFullSize(rootRef.current[layout_1.Layout.getDomSizeProperty(direction)]);
+                    });
+                }
+            });
+        }
+    }, []);
+    return (react_1.default.createElement("div", { ref: rootRef, className: (0, classnames_1.default)(styles_module_less_1.default.tab_container, className), style: { flexDirection: layout_1.Layout.getFlexDirection(direction) } },
+        react_1.default.createElement(exports.TabbarConfig.Provider, { value: { side, direction, fullSize } },
+            react_1.default.createElement(TabbarView, null),
+            react_1.default.createElement(TabpanelView, null))));
+});
+const RightTabRenderer = ({ className, components }) => (react_1.default.createElement(exports.TabRendererBase, { side: 'right', direction: 'right-to-left', className: (0, classnames_1.default)(className, 'right-slot'), components: components, TabbarView: bar_view_1.RightTabbarRenderer, TabpanelView: panel_view_1.RightTabPanelRenderer }));
+exports.RightTabRenderer = RightTabRenderer;
+const LeftTabRenderer = ({ className, components }) => (react_1.default.createElement(exports.TabRendererBase, { side: 'left', direction: 'left-to-right', className: (0, classnames_1.default)(className, 'left-slot'), components: components, TabbarView: bar_view_1.LeftTabbarRenderer, TabpanelView: panel_view_1.LeftTabPanelRenderer }));
+exports.LeftTabRenderer = LeftTabRenderer;
+const BottomTabRenderer = ({ className, components }) => (react_1.default.createElement(exports.TabRendererBase, { side: 'bottom', direction: 'top-to-bottom', className: (0, classnames_1.default)(className, 'bottom-slot'), components: components, TabbarView: bar_view_1.BottomTabbarRenderer, TabpanelView: panel_view_1.BottomTabPanelRenderer, noAccordion: true }));
+exports.BottomTabRenderer = BottomTabRenderer;
+const NextBottomTabRenderer = ({ className, components }) => (react_1.default.createElement(exports.TabRendererBase, { side: 'bottom', direction: 'bottom-to-top', className: (0, classnames_1.default)(className, 'bottom-slot'), components: components, TabbarView: bar_view_1.NextBottomTabbarRenderer, TabpanelView: panel_view_1.NextBottomTabPanelRenderer, noAccordion: true }));
+exports.NextBottomTabRenderer = NextBottomTabRenderer;
+//# sourceMappingURL=renderer.view.js.map

package/lib/browser/tabbar/renderer.view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.view.js","sourceRoot":"","sources":["../../../src/browser/tabbar/renderer.view.tsx"],"names":[],"mappings":"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"}

package/lib/browser/tabbar/styles.module.less

@@ -0,0 +1,367 @@
+.dragging {
+  background-color: var(--kt-activityBar-dropUpBackground)!important;
+}
+.tab_badge {
+  background-color: var(--activityBarBadge-background) !important;
+  color: var(--activityBarBadge-foreground) !important;
+  border-color: var(--kt-activityBarBadge-border) !important;
+  position: absolute;
+  top: 22px;
+  right: 8px;
+  .icon_wrapper {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  :global(.kt-icon) {
+    color: var(--activityBarBadge-foreground);
+  }
+}
+.icon_tab {
+  padding: 0 0;
+  position: relative;
+  height: 40px;
+  background-color: transparent;
+  border: none;
+  line-height: normal;
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  :global {
+    div.activity-icon {
+      font-size: 24px;
+      width: 24px;
+      height: 24px;
+      color: var(--activityBar-inactiveForeground);
+      &.mask-mode {
+        background-color: var(--activityBar-inactiveForeground);
+        -webkit-mask-size: 24px;
+      }
+    }
+  }
+  &:hover {
+    cursor: pointer;
+    :global {
+      .activity-icon {
+        color: var(--activityBar-foreground);
+        &.mask-mode {
+          background-color: var(--activityBar-foreground);
+        }
+      }
+    }
+  }
+}
+.tab_bar {
+  display: flex;
+  user-select: none;
+}
+.tab_panel {
+  position: relative;
+  flex: 1;
+}
+.left_tab_bar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: var(--activityBar-background);
+  border-right: 1px solid var(--activityBar-border);
+  border-top: 1px solid var(--activityBar-border);
+  .tab_bar {
+    flex: 1;
+    overflow: hidden;
+  }
+}
+.tab_container {
+  display: flex;
+}
+.panel_wrap {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 100%;
+}
+:global(.left-slot) {
+  height: 100%;
+  .panel_wrap{
+    border-right: 1px solid var(--sideBar-border);
+  }
+}
+
+:global(.bottom-slot) {
+  .panel_wrap{
+    border-top: 1px solid var(--sideBar-border);
+  }
+}
+
+:global(.right-slot) {
+  height: 100%;
+  background-color: var(--activityBar-background);
+  .tab_bar {
+    border-left: 1px solid var(--activityBar-border);
+    height: 100%;
+    .icon_tab {
+      width: 40px;
+      height: 44px;
+      margin: 0;
+    }
+    :global {
+      .activity-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+  .panel_wrap{
+    border-left: 1px solid var(--sideBar-border);
+  }
+}
+.view_container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--sideBar-background);
+}
+.panel_container {
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--panel-background);
+  display: flex;
+  flex-direction: column;
+}
+
+.container_wrap {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+.bar_content {
+  display: flex;
+}
+.float_container {
+  flex-direction: row;
+  display: flex;
+  position: absolute;
+  top: -25.5px;
+  right: 8px;
+  align-items: center;
+}
+.panel_title_bar {
+  flex-direction: row;
+  display: flex;
+  background-color: var(--kt-panelTitle-background);
+  user-select: none;
+  height: 28px;
+  align-items: center;
+  border-bottom: 1px solid var(--kt-panelTab-border);;
+  box-sizing: border-box;
+  h1 {
+    margin: 0;
+    font-size: 12px;
+    line-height: 24px;
+    font-weight: 400;
+    padding: 0 12px;
+    color: var(--kt-panel-secondaryForeground);
+  }
+}
+:global(.bottom-slot) {
+  height: 100%;
+  .tab_bar {
+    background-color: var(--kt-panelTitle-background);
+    height: 24px;
+    color: var(--panelTitle-inactiveForeground);
+    font-size: 12px;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 1;
+    flex: 1;
+    user-select: none;
+    .tab_badge {
+      position: static;
+      margin-left: 6px;
+      background-color: var(--badge-background);
+      color: var(--badge-foreground);
+      border: 1px solid var(--kt-activityBarBadge-border);
+      border-radius: 9px;
+      font-size: 12px;
+      font-weight: 400;
+      text-align: center;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+      padding: 0 6px;
+      height: 18px;
+      line-height: 18px;
+    }
+  }
+  .next_bottom_bar {
+    .tab_badge {
+      margin-left: 4px;
+    }
+  }
+  .tab_panel {
+    select {
+      outline: none;
+      padding-left: 8px;
+      padding-right: 38px;
+      font-size: 12px;
+      border: 0;
+      height: 22px;
+      line-height: 22px;
+      border-radius: 2px;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      color: var(--input-foreground);
+      background: url(https://img.alicdn.com/tfs/TB1rFGZrYr1gK0jSZR0XXbP8XXa-200-200.png) no-repeat var(--input-background);
+      background-position: right 8px top 4px;
+      background-size: 14px;
+      &>option {
+        background-color: var(--dropdown-listBackground)
+      }
+    }
+  }
+}
+.kt_left_tab {
+  margin-top: 8px;
+  background-color: var(--activityBar-background);
+  width: 48px;
+  &:global(.on-drag-over) {
+    background-color: var(--activityBar-dropBackground);
+  }
+  &:global(.active) {
+    .icon_tab {
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        height: 100%;
+        border-left: 3px solid var(--activityBar-activeBorder);
+      }
+      :global {
+        div.activity-icon {
+          color: var(--activityBar-foreground);
+          &.mask-mode {
+            background-color: var(--activityBar-foreground);
+          }
+        }
+      }
+    }
+  }
+}
+.kt_right_tab {
+  background-color: var(--activityBar-background);
+  width: 40px;
+  border-left: 1px solid var(--activityBar-border);
+  border-top: 1px solid var(--activityBar-border);
+  &:global(.on-drag-over) {
+    background-color: var(--activityBar-dropBackground);
+  }
+  &:global(.active) {
+    .icon_tab {
+      background-color: var(--sideBar-background);
+    }
+  }
+}
+.kt_bottom_tab {
+  margin: 0 4px;
+  padding: 0 8px;
+  position: relative;
+  height: 24px;
+  line-height: 24px;
+  display: inline-block;
+  font-size: 12px;
+  background-color: var(--kt-panelTitle-background);
+  &:hover {
+    color: var(--panelTitle-activeForeground);
+    cursor: pointer;
+  }
+  &:global(.active) {
+    color: var(--panelTitle-activeForeground);
+    >div {
+      position: relative;
+    }
+    >div::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      background-color: var(--panelTitle-activeBorder);
+      width: 100%;
+      height: 2px;
+    }
+  }
+  &.dragging {
+    >div::after{
+      display: none;
+    }
+  }
+  &:global(.on-drag-over) {
+    background-color: var(--panel-dropBackground);
+  }
+}
+.title_component_container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.panel_toolbar_container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 12px;
+}
+.panel_wrapper {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+.bottom_tab_title {
+  display: inline-block;
+  white-space: no-wrap;
+}
+.bottom_bar_container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  z-index: 1;
+  border-top: 1px solid var(--sideBar-border);
+  box-sizing: border-box;
+  height: 24px;
+}
+.split_line {
+  border-left: 1px solid #202224;
+  height: 14px;
+  width: 0px;
+  margin: 0 8px;
+}
+.left_tab_bar .vertical_icons {
+  height: auto;
+  flex-direction: column;
+  >span {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--activityBar-inactiveForeground);
+    margin: 8px auto;
+    background-size: cover;
+    &:hover {
+      transform: scale(1);
+      color: var(--activityBar-activeForeground);
+    }
+    &:last-child {
+      margin-bottom: 18px;
+    }
+  }
+}