chore(new-ui): implement drag to hide hint card

lib/static/new-ui/components/Card/KeepDraggingToHideCard.module.css

@@ -0,0 +1,55 @@
+
+@keyframes appear {
+    0% { opacity: 0; visibility: hidden; }
+    100% { opacity: 1; visibility: visible; }
+}
+
+.overlay-container {
+    align-items: center;
+    background: #9176ffa9;
+    box-shadow: inset 0 0 0 4px #9176ff;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    transition: opacity .5s ease, visibility .5s ease;
+    width: 100%;
+    visibility: hidden;
+    z-index: 999;
+}
+
+@keyframes overlay-pulse {
+    0% { box-shadow: inset 0 0 0 0 #9176ff; }
+    95% { box-shadow: inset 0 0 0 30px #9176ff; }
+    100% {  opacity: 0; }
+}
+
+.pulsing {
+    animation: overlay-pulse 2s ease infinite;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+@container (max-width: 400px) {
+    :global(.is-resizing) .overlay-container {
+        visibility: visible;
+        opacity: 1;
+    }
+}
+
+:global(.is-collapsed) .hint {
+    opacity: 0
+}
+
+.hint {
+    font-size: 18px;
+    color: white;
+    font-weight: 500;
+    opacity: 1;
+    white-space: nowrap;
+    transition: opacity .1s ease;
+}

lib/static/new-ui/components/Card/KeepDraggingToHideCard.tsx

@@ -0,0 +1,12 @@
+import classNames from 'classnames';
+import React, {ReactNode} from 'react';
+
+import cardStyles from './index.module.css';
+import styles from './KeepDraggingToHideCard.module.css';
+
+export function KeepDraggingToHideCard(): ReactNode {
+    return <div className={classNames(cardStyles.commonCard, styles.overlayContainer)}>
+        <div className={styles.pulsing}></div>
+        <span className={styles.hint}>Keep dragging to hide</span>
+    </div>;
+}

lib/static/new-ui/components/Card/index.module.css

@@ -1,3 +1,12 @@
+.common-card {
+    border-radius: 10px;
+    position: relative;
+}
+
 .card {
-    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(9, 9, 11, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+    box-shadow: rgb(255, 255, 255) 0 0 0 0, rgba(9, 9, 11, 0.05) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 1px 2px 0;
+}
+
+.wrapper {
+    overflow: hidden;
 }

lib/static/new-ui/components/Card/index.tsx

@@ -9,5 +9,9 @@ interface CardProps {
 }
 
 export function Card(props: CardProps): React.ReactNode {
-    return <div className={classNames(styles.card, props.className)}>{props.children}</div>;
+    return <div className={styles.wrapper}>
+        <div className={classNames(styles.commonCard, styles.card, props.className)}>
+            {props.children}
+        </div>
+    </div>;
 }

lib/static/new-ui/components/SplitViewLayout.module.css

@@ -2,19 +2,67 @@
     display: flex;
     flex-direction: row;
     height: 100vh;
+    padding: 0 10px;
 }
 
-    .split > div {
-        overflow-y: scroll;
-    }
-
     .split :global(.gutter) {
         background-color: #eee;
         background-repeat: no-repeat;
         background-position: 50%;
     }
 
-    .split :global(.gutter.gutter-horizontal) {
-        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
-        cursor: col-resize;
+.gutter {
+    cursor: col-resize;
+    min-width: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.gutter-handle {
+    background: var(--g-color-private-black-200);
+    height: 40px;
+    border-radius: 10px;
+    width: 8px;
+}
+
+@keyframes gutter-activate {
+    100% {
+        transform: scale(1.1);
+        background: var(--g-color-private-black-400);
+    }
+}
+
+:global(.is-resizing) .gutter-handle {
+    animation: gutter-activate 0.3s forwards ease-in;
+}
+
+@keyframes gutter-deactivate {
+    0% {
+        transform: scale(1.1);
+        background: var(--g-color-private-black-400);
+    }
+
+    50% { transform: scale(0.9); }
+
+    100% {
+        transform: scale(1);
+        background: var(--g-color-private-black-200);
     }
+}
+
+:global(.is-idle) .gutter-handle {
+    animation: gutter-deactivate 0.4s forwards ease-in;
+}
+
+.container {
+    min-width: 400px;
+    container-type: size;
+    margin: 10px 0;
+    position: relative;
+    transition: min-width .2s ease;
+}
+
+.container-collapsed {
+    min-width: 0;
+}

lib/static/new-ui/components/SplitViewLayout.tsx

@@ -1,13 +1,59 @@
-import React from 'react';
+import classNames from 'classnames';
+import React, {ReactNode} from 'react';
 import Split from 'react-split';
 import styles from './SplitViewLayout.module.css';
+import {KeepDraggingToHideCard} from '@/static/new-ui/components/Card/KeepDraggingToHideCard';
 
 interface SplitViewLayoutProps {
-    children?: React.ReactNode;
+    sections: React.ReactNode[];
 }
 
-export function SplitViewLayout(props: SplitViewLayoutProps): JSX.Element {
-    return <Split direction={'horizontal'} className={styles.split} minSize={0} snapOffset={350}>
-        {props.children}
+export function SplitViewLayout(props: SplitViewLayoutProps): ReactNode {
+    const snapOffset = 200;
+    const [wasDragged, setWasDragged] = React.useState(false);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [isHiddenByIndex, setIsHiddenByIndex] = React.useState<boolean[]>([]);
+
+    const onDragHandler = (sizes: number[]): void => {
+        setIsHiddenByIndex(sizes.map(size => size < 1));
+    };
+
+    const onDragStartHandler = (): void => {
+        setWasDragged(true);
+        setIsDragging(true);
+    };
+
+    const onDragEndHandler = (): void => {
+        setIsDragging(false);
+    };
+
+    const createGutter = (): HTMLDivElement => {
+        const handle = document.createElement('div');
+        handle.classList.add(styles.gutterHandle);
+
+        const gutter = document.createElement('div');
+        gutter.appendChild(handle);
+        gutter.classList.add(styles.gutter);
+
+        return gutter;
+    };
+
+    return <Split
+        direction={'horizontal'}
+        className={classNames(styles.split, {'is-resizing': isDragging, 'is-idle': wasDragged && !isDragging})}
+        minSize={0} snapOffset={snapOffset}
+        onDrag={onDragHandler}
+        onDragStart={onDragStartHandler}
+        onDragEnd={onDragEndHandler}
+        gutter={createGutter}
+    >
+        {props.sections.map((section, index) =>
+            <div
+                key={index}
+                className={classNames(styles.container, {[styles.containerCollapsed]: isHiddenByIndex[index], 'is-collapsed': isHiddenByIndex[index]})}
+            >
+                <KeepDraggingToHideCard/>
+                {section}
+            </div>)}
     </Split>;
 }

lib/static/new-ui/features/suites/components/SuitesPage/index.module.css

@@ -19,25 +19,22 @@
     background-color: #fff;
     display: flex;
     flex-direction: column;
-    margin: 10px;
-    border-radius: 10px;
-    border: 20px solid white;
-    border-top: 15px solid white;
+    padding: 0 20px 20px 20px;
+    overflow: hidden;
+    position: relative;
+    height: calc(100vh - 20px);
 }
 
 .card__title {
     margin-bottom: 8px !important;
+    padding-top: 15px;
 }
 
 .tree-view-card {
-    height: calc(100vh - 20px);
-    margin-right: 2px;
     gap: 8px;
 }
 
 .test-view-card {
-    margin-left: 2px;
-    max-height: calc(100vh - 20px);
     gap: 12px;
     overflow: scroll;
 }

lib/static/new-ui/features/suites/components/SuitesPage/index.tsx

@@ -26,31 +26,27 @@ interface SuitesPageProps {
 }
 
 function SuitesPageInternal(props: SuitesPageProps): ReactNode {
-    return <SplitViewLayout>
-        <div>
-            <Card className={classNames(styles.card, styles.treeViewCard)}>
-                <h2 className={classNames('text-display-1', styles['card__title'])}>Suites</h2>
-                <Flex gap={2}>
-                    <TestNameFilter/>
-                    <BrowsersSelect/>
-                </Flex>
-                <TestStatusFilter/>
-                <SuitesTreeView/>
-            </Card>
-        </div>
-        <div>
-            <Card className={classNames(styles.card, styles.testViewCard)}>
-                <div className={styles.stickyHeader}>
-                    <SuiteTitle className={styles['card__title']} />
-                    <AttemptPicker onChange={(browserId, _, retryIndex): unknown => props.actions.changeTestRetry({browserId, retryIndex})} />
-                </div>
-                <CollapsibleSection className={styles['collapsible-section-overview']} title={'Overview'} body={props.currentResultId && <div className={styles['collapsible-section__body']}>
-                    <MetaInfo resultId={props.currentResultId} />
-                </div>} id={'overview'}/>
-                <TestSteps />
-            </Card>
-        </div>
-    </SplitViewLayout>;
+    return <SplitViewLayout sections={[
+        <Card key='tree-view' className={classNames(styles.card, styles.treeViewCard)}>
+            <h2 className={classNames('text-display-1', styles['card__title'])}>Suites</h2>
+            <Flex gap={2}>
+                <TestNameFilter/>
+                <BrowsersSelect/>
+            </Flex>
+            <TestStatusFilter/>
+            <SuitesTreeView/>
+        </Card>,
+        <Card key='test-view' className={classNames(styles.card, styles.testViewCard)}>
+            <div className={styles.stickyHeader}>
+                <SuiteTitle className={styles['card__title']} />
+                <AttemptPicker onChange={(browserId, _, retryIndex): unknown => props.actions.changeTestRetry({browserId, retryIndex})} />
+            </div>
+            <CollapsibleSection className={styles['collapsible-section-overview']} title={'Overview'} body={props.currentResultId && <div className={styles['collapsible-section__body']}>
+                <MetaInfo resultId={props.currentResultId} />
+            </div>} id={'overview'}/>
+            <TestSteps />
+        </Card>
+    ]} />;
 }
 
 export const SuitesPage = connect(

lib/static/styles.css

@@ -608,8 +608,10 @@ a:active {
 }
 
 .tab-switcher {
-    display: inline-block;
+    display: inline-flex;
     margin-bottom: 5px;
+    gap: 2px;
+    flex-wrap: wrap;
 }
 
 .tab-switcher:before {