[workers-playground] TopBar fixes (#4046)

* disable Deploy button if hash isn't present.

Fixes DEVX-968

* Fix editing worker name not updating query param.

Due to a race condition with the flip-flopping `isEditing` value, the worker name value wasn't being persisted to query params until the user edits the value a second time.

* Make the Copy Link confirmation text no longer cause layout shift

While the confirmation text is absolutely-positioned and isn't part of the layout flow, the wrapper div (needed to provide a positioning anchor) had a gap applied between it and its siblings due to its flex container.

* Remove unused AnimatedToast component

packages/workers-playground/src/QuickEditor/TopBar.tsx

@@ -6,7 +6,6 @@ import { Icon } from "@cloudflare/component-icon";
 import { BAR_HEIGHT } from "./constants";
 import { WorkersLogo } from "./WorkersLogo";
 import { Input } from "@cloudflare/component-input";
-import { Toast } from "@cloudflare/component-toast";
 
 const Wrapper = createComponent(({ theme }) => ({
 	display: "flex",
@@ -19,19 +18,6 @@ const Wrapper = createComponent(({ theme }) => ({
 	backgroundColor: theme.colors.white,
 }));
 
-const AnimatedToast = createComponent(
-	({ theme }) => ({
-		position: "fixed",
-		right: theme.space[3],
-		top: `calc(${BAR_HEIGHT}px + ${theme.space[1] + theme.space[2]}px)`,
-		zIndex: 10,
-		display: "flex",
-		alignItems: "center",
-		gap: theme.space[2],
-	}),
-	Toast
-);
-
 export function TopBar() {
 	const [isEditing, setIsEditing] = useState(false);
 
@@ -43,6 +29,8 @@ export function TopBar() {
 		return searchParams.get("name") || "workers-playground";
 	});
 
+	const workerHash = location.hash.slice(1);
+
 	function setValue(v: string) {
 		const sanitised = v.replace(/[^a-z0-9-]+/g, "-");
 		_setValue(sanitised);
@@ -74,75 +62,81 @@ export function TopBar() {
 					New
 				</Button>
 			</A>
-			<Form
-				ml="auto"
-				mr="auto"
-				display="flex"
-				gap={1}
-				alignItems="center"
-				onSubmit={(e) => {
-					e.preventDefault();
-					if (isEditing) {
-						persistValue();
-					}
-				}}
-			>
+
+			<Div ml="auto" mr="auto" display="flex" gap={1} alignItems="center">
 				{isEditing ? (
-					<Input
-						name="path"
-						value={value}
-						autoComplete="off"
-						spellCheck={false}
-						onChange={(e) => setValue(e.target.value)}
-						mb={0}
-					/>
+					<Form
+						display="contents"
+						onSubmit={(e) => {
+							e.preventDefault();
+							persistValue();
+							setIsEditing(false);
+						}}
+					>
+						<Input
+							name="path"
+							value={value}
+							autoComplete="off"
+							autoFocus={true}
+							spellCheck={false}
+							onChange={(e) => setValue(e.target.value)}
+							mb={0}
+						/>
+						<Button type="plain" submit={true} p={2} ml={1}>
+							<Icon type="ok" />
+						</Button>
+					</Form>
 				) : (
-					<Strong>{value}</Strong>
+					<>
+						<Strong>{value}</Strong>
+						<Button
+							type="plain"
+							onClick={() => setIsEditing(true)}
+							p={2}
+							ml={1}
+						>
+							<Icon type="edit" />
+						</Button>
+					</>
 				)}
-				<Button
-					type="plain"
-					p={2}
-					ml={1}
-					submit={isEditing}
-					onClick={() => {
-						setIsEditing(!isEditing);
-					}}
-				>
-					<Icon type={isEditing ? "ok" : "edit"} />
-				</Button>
-			</Form>
-			{hasCopied && (
-				<Div position="relative">
+			</Div>
+
+			<Div position="relative">
+				{hasCopied && (
 					<Span
 						height="100%"
 						display="flex"
 						gap={1}
 						alignItems="center"
 						mr={2}
-						position={"absolute"}
-						right={0}
+						position="absolute"
+						right="100%"
 					>
-						<Icon type="ok" color={"green"} size={20}></Icon>
+						<Icon type="ok" color="green" size={20}></Icon>
 						Copied!
 					</Span>
-				</Div>
-			)}
-			<Button
-				type="primary"
-				inverted={true}
-				onClick={() => {
-					void navigator.clipboard.writeText(location.href);
-					setHasCopied(!hasCopied);
-				}}
-			>
-				<Icon label="Add" type="link" mr={1} />
-				Copy Link
-			</Button>
+				)}
+				<Button
+					type="primary"
+					inverted={true}
+					onClick={() => {
+						void navigator.clipboard.writeText(location.href);
+						setHasCopied(!hasCopied);
+					}}
+				>
+					<Icon label="Add" type="link" mr={1} />
+					Copy Link
+				</Button>
+			</Div>
+
 			<A
 				target="_blank"
-				href={`https://dash.cloudflare.com/workers-and-pages/deploy/playground/${value}${location.hash}`}
+				href={`https://dash.cloudflare.com/workers-and-pages/deploy/playground/${value}#${workerHash}`}
+				style={workerHash ? undefined : { pointerEvents: "none" }}
 			>
-				<Button type="primary">Deploy</Button>
+				<Button type="primary" disabled={!Boolean(workerHash)} tabIndex={-1}>
+					Deploy
+				</Button>
 			</A>
 		</Wrapper>
 	);