Cb 4429 change divider behavior

webapp/packages/core-app/src/AppScreen/Main.m.css

@@ -1,5 +1,5 @@
 .space {
-  composes: theme-typography--body2 theme-background-primary from global;
+  composes: theme-background-surface theme-text-on-surface from global;
   display: flex;
   flex-direction: row;
   flex: 1;

webapp/packages/core-app/src/AppScreen/Main.tsx

@@ -28,12 +28,7 @@ export const Main = observer(function Main() {
   return (
     <Loader className={s(styles, { loader: true })} suspense>
       <main className={s(styles, { space: true })}>
-        <Split
-          {...splitMainState}
-          sticky={30}
-          mode={leftBarDisabled ? 'minimize' : splitMainState.mode}
-          disable={leftBarDisabled}
-        >
+        <Split {...splitMainState} sticky={30} mode={leftBarDisabled ? 'minimize' : splitMainState.mode} disable={leftBarDisabled}>
           <Pane className={s(styles, { pane: true })} basis="250px" main>
             <Loader suspense>
               <SideBarPanel container={leftBarPanelService.tabsContainer} />

webapp/packages/core-blocks/src/Split/Pane.m.css

@@ -3,3 +3,8 @@
   overflow: auto;
   z-index: 0;
 }
+
+.hiddenContent {
+  opacity: 0;
+  pointer-events: none;
+}

webapp/packages/core-blocks/src/Split/Pane.tsx

@@ -11,9 +11,12 @@ import { observer } from 'mobx-react-lite';
 import { s } from '../s';
 import { useS } from '../useS';
 import style from './Pane.m.css';
+import { useSplit } from './useSplit';
 
 export const Pane = observer<PaneProps>(function Pane({ className, ...rest }) {
   const styles = useS(style);
+  const split = useSplit();
+  const hiddenContent = rest.main && split.state.mode === 'minimize';
 
-  return <BasePane className={s(styles, { pane: true }, className)} {...rest} />;
+  return <BasePane className={s(styles, { pane: true, hiddenContent }, className)} {...rest} />;
 });

webapp/packages/core-blocks/src/Split/Split.tsx

@@ -12,13 +12,24 @@ import { s } from '../s';
 import { useS } from '../useS';
 import style from './Split.m.css';
 
-export type ISplitProps = SplitProps;
+export type ISplitProps = SplitProps & {
+  disableAutoMargin?: boolean;
+};
 
-export const Split = observer<ISplitProps>(function Split({ className, split, ...rest }) {
+const AUTO_MARGIN = 22;
+
+export const Split = observer<ISplitProps>(function Split({ className, minSize, maxSize, split, disableAutoMargin = false, ...rest }) {
   const styles = useS(style);
 
   const vertical = split === 'vertical' || split === undefined;
   const horizontal = split === 'horizontal';
 
-  return <BaseSplit className={s(styles, { split: true, vertical, horizontal }, className)} split={split} {...rest} />;
+  if (!disableAutoMargin) {
+    minSize = AUTO_MARGIN;
+    maxSize = -AUTO_MARGIN;
+  }
+
+  return (
+    <BaseSplit minSize={minSize} maxSize={maxSize} className={s(styles, { split: true, vertical, horizontal }, className)} split={split} {...rest} />
+  );
 });

webapp/packages/core-blocks/src/Split/SplitControls.m.css

@@ -15,7 +15,7 @@
 
 .button {
   composes: theme-button theme-button_unelevated theme-button_background theme-elevation-z3 from global;
-  opacity: 0;
+  opacity: 1;
   transition-property: opacity, box-shadow !important;
   transition: opacity 0.3s ease-in-out;
 }
@@ -24,10 +24,14 @@
   composes: theme-button_ripple from global;
 }
 
-.container:hover .button {
+.container:hover .resizeButton {
   opacity: 1;
 }
 
+.resizeButton {
+  opacity: 0;
+}
+
 .container[data-s-split='vertical'] {
   flex-direction: column;
   cursor: ew-resize;

webapp/packages/core-blocks/src/Split/SplitControls.tsx

@@ -14,6 +14,7 @@ import { useSplit } from './useSplit';
 export const SplitControls: React.FC = function SplitControls() {
   const split = useSplit();
   const styles = useS(SplitControlsStyles);
+  const isResizeMode = split.state.mode === 'resize';
 
   const inverse = split.state.isMainSecond();
 
@@ -64,12 +65,16 @@ export const SplitControls: React.FC = function SplitControls() {
       onDoubleClick={split.state.onDoubleClick}
     >
       {split.state.mode !== 'minimize' && (
-        <button className={s(styles, { button: true, primary: !inverse })} type="button" onClick={handlers.handleCollapse}>
+        <button
+          className={s(styles, { button: true, primary: !inverse, resizeButton: isResizeMode })}
+          type="button"
+          onClick={handlers.handleCollapse}
+        >
           <div className={s(styles, { ripple: true })} />
         </button>
       )}
       {split.state.mode !== 'maximize' && (
-        <button className={s(styles, { button: true, primary: inverse })} type="button" onClick={handlers.handleExpand}>
+        <button className={s(styles, { button: true, primary: inverse, resizeButton: isResizeMode })} type="button" onClick={handlers.handleExpand}>
           <div className={s(styles, { ripple: true })} />
         </button>
       )}