Add resizable sidebar

apps/cli/lib/import-export/export/types.ts

@@ -1,4 +1,3 @@
-import { z } from 'zod';
 import { SiteData } from 'cli/lib/cli-config/core';
 import type { ImportExportEventEmitter } from '../events';
 

apps/studio/src/components/app.tsx

@@ -12,6 +12,7 @@ import WindowsTitlebar from 'src/components/windows-titlebar';
 import { useListenDeepLinkConnection } from 'src/hooks/sync-sites/use-listen-deep-link-connection';
 import { useAuth } from 'src/hooks/use-auth';
 import { useLocalizationSupport } from 'src/hooks/use-localization-support';
+import { useSidebarResize } from 'src/hooks/use-sidebar-resize';
 import { useSidebarVisibility } from 'src/hooks/use-sidebar-visibility';
 import { useSiteDetails } from 'src/hooks/use-site-details';
 import { isWindows } from 'src/lib/app-globals';
@@ -31,6 +32,10 @@ export default function App() {
 	const { needsOnboarding } = useOnboarding();
 	const isOnboardingLoading = useRootSelector( selectOnboardingLoading );
 	const { isSidebarVisible, toggleSidebar } = useSidebarVisibility();
+	const { sidebarWidth, isDragging, handleMouseDown } = useSidebarResize(
+		isSidebarVisible,
+		toggleSidebar
+	);
 	const { showWhatsNew, closeWhatsNew } = useWhatsNew();
 	const { sites: localSites, loadingSites } = useSiteDetails();
 	const isEmpty = ! loadingSites && ! localSites.length;
@@ -87,10 +92,25 @@ export default function App() {
 					<HStack spacing="0" alignment="left" className="flex-grow">
 						<MainSidebar
 							className={ cx(
-								'h-full transition-all duration-500',
-								isSidebarVisible ? 'basis-52 flex-shrink-0' : 'basis-0 !min-w-[10px]'
+								'h-full flex-shrink-0',
+								! isDragging && 'transition-all duration-500',
+								! isSidebarVisible && 'basis-0 !min-w-[10px]'
 							) }
+							style={ isSidebarVisible ? { flexBasis: `${ sidebarWidth }px` } : undefined }
 						/>
+						{ /* Resize handle */ }
+						<div
+							className="group h-full w-3 cursor-col-resize flex-shrink-0 z-20 flex items-stretch justify-start -ml-1.5 -mr-1.5"
+							onMouseDown={ handleMouseDown }
+						>
+							<div
+								className={ cx(
+									'w-[3px] rounded-[2px] transition-opacity duration-150 bg-frame-theme',
+									isDragging ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+								) }
+							/>
+						</div>
+						{ isDragging && <div className="fixed inset-0 z-50 cursor-col-resize" /> }
 						<main
 							data-testid="site-content"
 							className="bg-frame text-frame-text h-full flex-grow rounded-chrome overflow-hidden z-10"

apps/studio/src/components/main-sidebar.tsx

@@ -8,15 +8,17 @@ import AddSite from 'src/modules/add-site';
 
 interface MainSidebarProps {
 	className?: string;
+	style?: React.CSSProperties;
 }
 
-export default function MainSidebar( { className }: MainSidebarProps ) {
+export default function MainSidebar( { className, style }: MainSidebarProps ) {
 	const { sites: localSites } = useSiteDetails();
 
 	return (
 		<div
 			data-testid="main-sidebar"
 			className={ cx( 'text-chrome-inverted relative pt-[10px]', className ) }
+			style={ style }
 		>
 			{ ! localSites.length ? (
 				<div className="flex h-full px-[20px] justify-center items-center app-no-drag-region text-center text-[12px] text-a8c-gray-50">

apps/studio/src/components/running-sites.tsx

@@ -22,7 +22,7 @@ export function RunningSites() {
 	}
 
 	return (
-		<div className="flex flex-row px-5 pb-1 justify-between align-center self-stretch opacity-70">
+		<div className="flex flex-row px-5 pb-1 justify-between align-center self-stretch opacity-70 whitespace-nowrap min-w-0">
 			<p className="text-xxs leading-4">
 				{ anyRunning
 					? sprintf(

apps/studio/src/constants.ts

@@ -2,7 +2,10 @@ import { HOUR_MS } from '@studio/common/constants';
 export const DEFAULT_WIDTH = 900;
 export const MAIN_MIN_HEIGHT = 600;
 export const SIDEBAR_WIDTH = 208;
+export const SIDEBAR_MIN_WIDTH = 200;
+export const SIDEBAR_MAX_WIDTH = 400;
 export const MAIN_MIN_WIDTH = DEFAULT_WIDTH - SIDEBAR_WIDTH + 20;
+export const LOCAL_STORAGE_SIDEBAR_WIDTH_KEY = 'sidebar_width';
 export const APP_CHROME_SPACING = 10;
 export const MIN_WIDTH_CLASS_TO_MEASURE = 'app-measure-tabs-width';
 export const MIN_WIDTH_SELECTOR_TO_MEASURE = `.${ MIN_WIDTH_CLASS_TO_MEASURE }`;

apps/studio/src/hooks/use-sidebar-resize.ts

@@ -0,0 +1,75 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import {
+	SIDEBAR_MIN_WIDTH,
+	SIDEBAR_MAX_WIDTH,
+	LOCAL_STORAGE_SIDEBAR_WIDTH_KEY,
+} from 'src/constants';
+import { getSavedSidebarWidth } from 'src/lib/sidebar-utils';
+
+function saveWidth( width: number ) {
+	localStorage.setItem( LOCAL_STORAGE_SIDEBAR_WIDTH_KEY, String( width ) );
+}
+
+export function useSidebarResize( isSidebarVisible: boolean, toggleSidebar: () => void ) {
+	const [ sidebarWidth, setSidebarWidth ] = useState( getSavedSidebarWidth );
+	const [ isDragging, setIsDragging ] = useState( false );
+	const dragStartX = useRef( 0 );
+	const dragStartWidth = useRef( 0 );
+
+	const handleMouseDown = useCallback(
+		( e: React.MouseEvent ) => {
+			e.preventDefault();
+			setIsDragging( true );
+			dragStartX.current = e.clientX;
+			dragStartWidth.current = isSidebarVisible ? sidebarWidth : 0;
+		},
+		[ sidebarWidth, isSidebarVisible ]
+	);
+
+	useEffect( () => {
+		if ( ! isDragging ) {
+			return;
+		}
+
+		let rafId: number;
+
+		const handleMouseMove = ( e: MouseEvent ) => {
+			cancelAnimationFrame( rafId );
+			rafId = requestAnimationFrame( () => {
+				const delta = e.clientX - dragStartX.current;
+				const newWidth = dragStartWidth.current + delta;
+				setSidebarWidth( Math.min( SIDEBAR_MAX_WIDTH, Math.max( SIDEBAR_MIN_WIDTH, newWidth ) ) );
+			} );
+		};
+
+		const handleMouseUp = ( e: MouseEvent ) => {
+			setIsDragging( false );
+			cancelAnimationFrame( rafId );
+
+			const delta = e.clientX - dragStartX.current;
+			const finalWidth = dragStartWidth.current + delta;
+			const clampedWidth = Math.min( SIDEBAR_MAX_WIDTH, Math.max( SIDEBAR_MIN_WIDTH, finalWidth ) );
+			setSidebarWidth( clampedWidth );
+			saveWidth( clampedWidth );
+
+			if ( ! isSidebarVisible ) {
+				toggleSidebar();
+			}
+		};
+
+		document.addEventListener( 'mousemove', handleMouseMove );
+		document.addEventListener( 'mouseup', handleMouseUp );
+
+		return () => {
+			cancelAnimationFrame( rafId );
+			document.removeEventListener( 'mousemove', handleMouseMove );
+			document.removeEventListener( 'mouseup', handleMouseUp );
+		};
+	}, [ isDragging, isSidebarVisible, toggleSidebar ] );
+
+	return {
+		sidebarWidth,
+		isDragging,
+		handleMouseDown,
+	};
+}

apps/studio/src/hooks/use-sidebar-visibility.ts

@@ -1,11 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
-import {
-	DEFAULT_WIDTH,
-	SIDEBAR_WIDTH,
-	MIN_WIDTH_SELECTOR_TO_MEASURE,
-	APP_CHROME_SPACING,
-} from 'src/constants';
+import { DEFAULT_WIDTH, MIN_WIDTH_SELECTOR_TO_MEASURE, APP_CHROME_SPACING } from 'src/constants';
 import { getIpcApi } from 'src/lib/get-ipc-api';
+import { getSavedSidebarWidth } from 'src/lib/sidebar-utils';
 
 const SIDEBAR_BREAKPOINT = DEFAULT_WIDTH;
 
@@ -35,7 +31,7 @@ export function useSidebarVisibility( elementSelector: string = MIN_WIDTH_SELECT
 				el?.clientWidth < el?.scrollWidth
 			) {
 				// The new breakpoint is the width of the element to measure plus the sidebar plus the right padding
-				setDynamicBreakPoint( el.clientWidth + SIDEBAR_WIDTH + APP_CHROME_SPACING );
+				setDynamicBreakPoint( el.clientWidth + getSavedSidebarWidth() + APP_CHROME_SPACING );
 			}
 
 			setIsLowerThanBreakpoint( window.innerWidth < dynamicBreakPoint );
@@ -55,7 +51,7 @@ export function useSidebarVisibility( elementSelector: string = MIN_WIDTH_SELECT
 	}, [ isLowerThanBreakpoint ] );
 
 	const toggleSidebar = useCallback( () => {
-		void getIpcApi().toggleMinWindowWidth( isSidebarVisible );
+		void getIpcApi().toggleMinWindowWidth( isSidebarVisible, getSavedSidebarWidth() );
 		setIsSidebarVisible( ! isSidebarVisible );
 	}, [ isSidebarVisible ] );
 

apps/studio/src/ipc-handlers.ts

@@ -1461,15 +1461,20 @@ export function resetDefaultLocaleData( _event: IpcMainInvokeEvent ) {
 	defaultI18n.resetLocaleData();
 }
 
-export function toggleMinWindowWidth( event: IpcMainInvokeEvent, isSidebarVisible: boolean ) {
+export function toggleMinWindowWidth(
+	event: IpcMainInvokeEvent,
+	isSidebarVisible: boolean,
+	currentSidebarWidth?: number
+) {
 	const parentWindow = BrowserWindow.fromWebContents( event.sender );
 	if ( ! parentWindow || parentWindow.isDestroyed() || event.sender.isDestroyed() ) {
 		return;
 	}
+	const sidebarW = currentSidebarWidth ?? SIDEBAR_WIDTH;
 	const [ currentWidth, currentHeight ] = parentWindow.getSize();
 	const newWidth = Math.max(
 		MAIN_MIN_WIDTH,
-		isSidebarVisible ? currentWidth - SIDEBAR_WIDTH : currentWidth + SIDEBAR_WIDTH
+		isSidebarVisible ? currentWidth - sidebarW : currentWidth + sidebarW
 	);
 	parentWindow.setSize( newWidth, currentHeight, true );
 }

apps/studio/src/lib/sidebar-utils.ts

@@ -0,0 +1,17 @@
+import {
+	SIDEBAR_WIDTH,
+	SIDEBAR_MIN_WIDTH,
+	SIDEBAR_MAX_WIDTH,
+	LOCAL_STORAGE_SIDEBAR_WIDTH_KEY,
+} from 'src/constants';
+
+export function getSavedSidebarWidth(): number {
+	const saved = localStorage.getItem( LOCAL_STORAGE_SIDEBAR_WIDTH_KEY );
+	if ( saved ) {
+		const parsed = Number( saved );
+		if ( ! isNaN( parsed ) && parsed >= SIDEBAR_MIN_WIDTH && parsed <= SIDEBAR_MAX_WIDTH ) {
+			return parsed;
+		}
+	}
+	return SIDEBAR_WIDTH;
+}

apps/studio/src/preload.ts

@@ -115,8 +115,8 @@ const api: IpcApi = {
 		ipcRendererInvoke( 'promptWindowsSpeedUpSites', ...args ),
 	setDefaultLocaleData: ( locale ) => ipcRendererInvoke( 'setDefaultLocaleData', locale ),
 	resetDefaultLocaleData: () => ipcRendererInvoke( 'resetDefaultLocaleData' ),
-	toggleMinWindowWidth: ( isSidebarVisible ) =>
-		ipcRendererInvoke( 'toggleMinWindowWidth', isSidebarVisible ),
+	toggleMinWindowWidth: ( isSidebarVisible, currentSidebarWidth? ) =>
+		ipcRendererInvoke( 'toggleMinWindowWidth', isSidebarVisible, currentSidebarWidth ),
 	getAbsolutePathFromSite: ( siteId, relativePath ) =>
 		ipcRendererInvoke( 'getAbsolutePathFromSite', siteId, relativePath ),
 	openFileInIDE: ( relativePath, siteId ) =>