resizable site panel

packages/playground/website/src/components/layout/index.tsx

@@ -1,4 +1,5 @@
 import css from './style.module.css';
+import classNames from 'classnames';
 
 import { SiteManager } from '../site-manager';
 import { CSSTransition } from 'react-transition-group';
@@ -25,14 +26,17 @@ import {
 	supportedDisplayModes,
 	PlaygroundViewport,
 } from '../playground-viewport';
-import {
-	setActiveModal,
-	setSiteManagerOpen,
-} from '../../lib/state/redux/slice-ui';
+import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import { ImportFormModal } from '../import-form-modal';
 import { PreviewPRModal } from '../../github/preview-pr';
 import { MissingSiteModal } from '../missing-site-modal';
 import { RenameSiteModal } from '../rename-site-modal';
+import {
+	PanelGroup,
+	Panel,
+	PanelResizeHandle,
+	type ImperativePanelHandle,
+} from 'react-resizable-panels';
 
 acquireOAuthTokenIfNeeded();
 
@@ -62,47 +66,75 @@ export function Layout() {
 		(state) => state.ui.siteManagerIsOpen
 	);
 	const siteManagerWrapperRef = useRef<HTMLDivElement>(null);
-	const dispatch = useAppDispatch();
+	const siteManagerPanelRef = useRef<ImperativePanelHandle | null>(null);
+	const [defaultPanelSize] = useState(() => {
+		if (typeof window === 'undefined') {
+			return 55;
+		}
+		const defaultWidth = 320 + 555 + 24; // sidebar + info + borders
+		const percent = (defaultWidth / window.innerWidth) * 100;
+		return Math.max(35, Math.min(70, Math.round(percent)));
+	});
+
+	useEffect(() => {
+		if (!siteManagerPanelRef.current) {
+			return;
+		}
+		if (siteManagerIsOpen) {
+			siteManagerPanelRef.current.expand();
+		} else {
+			siteManagerPanelRef.current.collapse();
+		}
+	}, [siteManagerIsOpen]);
 
 	return (
 		<div className={`${css.layout}`}>
 			<Modals />
-			<CSSTransition
-				nodeRef={siteManagerWrapperRef}
-				in={siteManagerIsOpen}
-				timeout={500}
-				classNames={{
-					enter: css.siteManagerWrapperEnter,
-					enterActive: css.siteManagerWrapperEnterActive,
-					exit: css.siteManagerWrapperExit,
-					exitActive: css.siteManagerWrapperExitActive,
-				}}
-				unmountOnExit
+			<PanelGroup
+				direction="horizontal"
+				className={css.mainPanels}
+				autoSaveId="layout-panels"
 			>
-				<div
-					ref={siteManagerWrapperRef}
-					className={css.siteManagerWrapper}
+				<Panel
+					ref={siteManagerPanelRef}
+					defaultSize={defaultPanelSize}
+					minSize={30}
+					collapsible
+					collapsedSize={0}
 				>
-					<SiteManager />
-				</div>
-			</CSSTransition>
-			<div className={css.siteView}>
-				{siteManagerIsOpen && (
-					<div
-						title="Open site"
-						className={css.siteViewOverlay}
-						onClick={() => {
-							dispatch(setSiteManagerOpen(false));
+					<CSSTransition
+						nodeRef={siteManagerWrapperRef}
+						in={siteManagerIsOpen}
+						timeout={300}
+						classNames={{
+							enter: css.siteManagerWrapperEnter,
+							enterActive: css.siteManagerWrapperEnterActive,
+							exit: css.siteManagerWrapperExit,
+							exitActive: css.siteManagerWrapperExitActive,
 						}}
-					/>
-				)}
-				<div className={css.siteViewContent}>
-					<PlaygroundViewport
-						displayMode={displayMode}
-						hideToolbar={siteManagerIsOpen}
-					/>
-				</div>
-			</div>
+						unmountOnExit
+					>
+						<div
+							ref={siteManagerWrapperRef}
+							className={css.siteManagerWrapper}
+						>
+							<SiteManager />
+						</div>
+					</CSSTransition>
+				</Panel>
+				<PanelResizeHandle
+					className={classNames(css.layoutResizeHandle, {
+						[css.handleHidden]: !siteManagerIsOpen,
+					})}
+				/>
+				<Panel minSize={30}>
+					<div className={css.siteView}>
+						<div className={css.siteViewContent}>
+							<PlaygroundViewport displayMode={displayMode} />
+						</div>
+					</div>
+				</Panel>
+			</PanelGroup>
 		</div>
 	);
 }

packages/playground/website/src/components/layout/style.module.css

@@ -3,8 +3,8 @@
 	--site-manager-site-info-min-width: 555px;
 	--site-manager-width-desktop: calc(
 		var(--site-manager-site-list-width) +
-		var(--site-manager-site-info-min-width) +
-		2 * var(--site-manager-border-width)
+			var(--site-manager-site-info-min-width) + 2 *
+			var(--site-manager-border-width)
 	);
 	--site-view-min-width: 320px;
 	--site-manager-background-color: #1e1e1e;
@@ -29,134 +29,78 @@ body {
 	overflow: hidden;
 }
 
-.site-view {
+.main-panels {
+	display: flex;
+	width: 100%;
 	height: 100%;
 }
 
 .site-manager-wrapper {
-	max-width: var(--site-manager-width-desktop);
-	@media (max-width: 875px) {
-		min-width: 0;
-		width: 100%;
-	}
+	height: 100%;
+	display: flex;
 }
 
 .site-manager-wrapper-enter {
 	opacity: 0;
-	max-width: 0;
 }
 
-.site-manager-wrapper-exit,
+.site-manager-wrapper-enter-active,
+.site-manager-wrapper-exit-active {
+	transition: opacity 300ms ease;
+}
+
 .site-manager-wrapper-enter-active {
 	opacity: 1;
-	transform: none;
-	max-width: var(--site-manager-width-desktop);
-	@media (max-width: 875px) {
-		width: 100%;
-	}
 }
 
-/*
- * Repeated rule to ensure it's more specific than
- * .site-manager-wrapper-exit
- */
-.site-manager-wrapper-exit-active {
-	opacity: 0;
-	max-width: 0;
+.site-manager-wrapper-exit {
+	opacity: 1;
 }
 
-.site-manager-wrapper-exit-active,
-.site-manager-wrapper-enter-active {
-	transition:
-		/*
-		 * Workaround: Animate max-width to allow `width: auto`
-		 * The `width` property needs to be `auto` to ensure the
-		 * site manager panel expands and shrinks with its content.
-		 * Unfortunately, we can't animate width from `0` to `auto`.
-		 * Therefore, we animate the `max-width` property instead.
-		 * We assign a large enough number (1300px) to make sure it won't
-		 * interfere with regular use cases, and give it more time to animate
-		 * so that it hits its `auto` width approximately around the same time
-		 * as the `opacity` transition finishes.
-		 */ max-width
-			450ms,
-		opacity 300ms;
+.site-manager-wrapper-exit-active {
+	opacity: 0;
 }
 
-.site-view {
-	position: relative;
-	flex: 1 1 auto;
-	min-width: var(--site-view-min-width);
-	height: 100dvh;
-	border: 0px solid var(--site-manager-background-color);
-	transition: border-radius 300ms ease, border-width 300ms ease,
-		transform 300ms ease;
-	border-radius: 0;
-	border-width: 0;
+.layoutResizeHandle {
+	width: 12px;
+	cursor: col-resize;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
-.site-manager-wrapper + .site-view {
-	position: relative;
-	border-width: var(--site-manager-border-width);
-	border-left-width: 0;
-	.site-view-content {
-		border-radius: var(--site-manager-border-radius);
-	}
+.layoutResizeHandle::before {
+	content: '';
+	display: block;
+	width: 2px;
+	height: 70%;
+	border-radius: 1px;
+	background: rgba(255, 255, 255, 0.18);
 }
 
-.site-manager-wrapper:not(
-		.site-manager-wrapper-exit-active,
-		.site-manager-wrapper-enter-active
-	)
-	+ .site-view:hover {
-	transform: scale(1.01);
+.handleHidden {
+	visibility: hidden;
+	pointer-events: none;
 }
 
-.site-manager-wrapper-exit-active + .site-view {
-	border-radius: 0;
-	border-width: 0;
-	.site-view-content {
-		border-radius: 0;
-	}
+.site-view {
+	height: 100%;
+	display: flex;
 }
 
 .site-view-content {
 	overflow: hidden;
-	transition: border-radius 300ms;
 	height: 100%;
+	border-radius: var(--site-manager-border-radius);
+	border: var(--site-manager-border-width) solid
+		var(--site-manager-background-color);
+	border-left-width: 0;
+	width: 100%;
+	transition: border-radius 300ms ease;
 }
 
-.site-view-overlay {
-	content: '';
-	display: block;
-	width: 100%;
-	height: 100dvh;
-	background-color: transparent;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 1;
-	cursor: pointer;
-}
-
-/*
- * Unfortunately we cannot use calc() in media queries.
- *
- * 1166px = --site-manager-width + --site-view-min-width
- *
- * This manual calculation ensures the site view gets hidden
- * on smaller screens and never overflows out of the screen.
- */
 @media (max-width: 1126px) {
-	.site-manager-wrapper + .site-view {
+	.layoutResizeHandle {
 		display: none;
 	}
-	.site-manager-wrapper,
-	.site-manager-wrapper-exit,
-	.site-manager-wrapper-enter-active {
-		width: 100%;
-	}
-	.site-manager-wrapper-exit-active + .site-view {
-		display: block;
-	}
 }