Website: Remove unused React components

packages/playground/components/src/icons.tsx

@@ -143,3 +143,22 @@ export const layout = (
 export function getLogoDataURL(logo: { mime: string; data: string }): string {
 	return `data:${logo.mime};base64,${logo.data}`;
 }
+
+export function SiteManagerIcon() {
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M1.99967 1.58301H4.49967C4.72979 1.58301 4.91634 1.76956 4.91634 1.99967V4.49967C4.91634 4.72979 4.72979 4.91634 4.49967 4.91634H1.99967C1.76956 4.91634 1.58301 4.72979 1.58301 4.49967V1.99967C1.58301 1.76956 1.76956 1.58301 1.99967 1.58301ZM0.333008 1.99967C0.333008 1.0792 1.0792 0.333008 1.99967 0.333008H4.49967C5.42015 0.333008 6.16634 1.0792 6.16634 1.99967V4.49967C6.16634 5.42015 5.42015 6.16634 4.49967 6.16634H1.99967C1.0792 6.16634 0.333008 5.42015 0.333008 4.49967V1.99967ZM9.49967 1.58301H11.9997C12.2298 1.58301 12.4163 1.76956 12.4163 1.99967V4.49967C12.4163 4.72979 12.2298 4.91634 11.9997 4.91634H9.49967C9.26956 4.91634 9.08301 4.72979 9.08301 4.49967V1.99967C9.08301 1.76956 9.26956 1.58301 9.49967 1.58301ZM7.83301 1.99967C7.83301 1.0792 8.5792 0.333008 9.49967 0.333008H11.9997C12.9201 0.333008 13.6663 1.0792 13.6663 1.99967V4.49967C13.6663 5.42015 12.9201 6.16634 11.9997 6.16634H9.49967C8.5792 6.16634 7.83301 5.42015 7.83301 4.49967V1.99967ZM11.9997 9.08301H9.49967C9.26956 9.08301 9.08301 9.26956 9.08301 9.49967V11.9997C9.08301 12.2298 9.26956 12.4163 9.49967 12.4163H11.9997C12.2298 12.4163 12.4163 12.2298 12.4163 11.9997V9.49967C12.4163 9.26956 12.2298 9.08301 11.9997 9.08301ZM9.49967 7.83301C8.5792 7.83301 7.83301 8.5792 7.83301 9.49967V11.9997C7.83301 12.9201 8.5792 13.6663 9.49967 13.6663H11.9997C12.9201 13.6663 13.6663 12.9201 13.6663 11.9997V9.49967C13.6663 8.5792 12.9201 7.83301 11.9997 7.83301H9.49967ZM1.99967 9.08301H4.49967C4.72979 9.08301 4.91634 9.26956 4.91634 9.49967V11.9997C4.91634 12.2298 4.72979 12.4163 4.49967 12.4163H1.99967C1.76956 12.4163 1.58301 12.2298 1.58301 11.9997V9.49967C1.58301 9.26956 1.76956 9.08301 1.99967 9.08301ZM0.333008 9.49967C0.333008 8.5792 1.0792 7.83301 1.99967 7.83301H4.49967C5.42015 7.83301 6.16634 8.5792 6.16634 9.49967V11.9997C6.16634 12.9201 5.42015 13.6663 4.49967 13.6663H1.99967C1.0792 13.6663 0.333008 12.9201 0.333008 11.9997V9.49967Z"
+				fill="white"
+			/>
+		</svg>
+	);
+}

packages/playground/website/src/components/browser-chrome/index.tsx

@@ -2,17 +2,19 @@ import React from 'react';
 import css from './style.module.css';
 import AddressBar from '../address-bar';
 import classNames from 'classnames';
-import { OpenSiteManagerButton } from '../open-site-manager-button';
 import {
 	useAppSelector,
 	getActiveClientInfo,
 	useActiveSite,
+	useAppDispatch,
 } from '../../lib/state/redux/store';
 import { SyncLocalFilesButton } from '../sync-local-files-button';
 import { Dropdown, Icon } from '@wordpress/components';
 import { cog } from '@wordpress/icons';
 import Button from '../button';
 import { ActiveSiteSettingsForm } from '../site-manager/site-settings-form';
+import { setSiteManagerOpen } from '../../lib/state/redux/slice-ui';
+import { SiteManagerIcon } from '@wp-playground/components';
 
 interface BrowserChromeProps {
 	children?: React.ReactNode;
@@ -29,6 +31,7 @@ export default function BrowserChrome({
 	const activeSite = useActiveSite();
 	const showAddressBar = !!clientInfo;
 	const url = clientInfo?.url;
+	const dispatch = useAppDispatch();
 	const addressBarClass = classNames(css.addressBarSlot, {
 		[css.isHidden]: !showAddressBar,
 	});
@@ -49,7 +52,16 @@ export default function BrowserChrome({
 					aria-label="Playground toolbar"
 				>
 					<div className={css.windowControls}>
-						<OpenSiteManagerButton />
+						<Button
+							variant="browser-chrome"
+							aria-label="Open Site Manager"
+							className={css.openSiteManagerButton}
+							onClick={() => {
+								dispatch(setSiteManagerOpen(true));
+							}}
+						>
+							<SiteManagerIcon />
+						</Button>
 					</div>
 
 					<div className={addressBarClass}>