[Website] Add refresh button to the left of address bar (#2828)

Added a circular refresh button with an SVG icon to the left of the
address bar input field. The button reloads the current page when
clicked:

<img width="3762" height="1522" alt="CleanShot 2025-10-28 at 00 02
52@2x"
src="https://github.com/user-attachments/assets/042cefbc-93e9-47f6-ac59-adeb149b56b8"
/>

## Testing Instructions (or ideally a Blueprint)

Confirm the button is there and refreshes the page

Co-authored-by: Claude <[email protected]>

Author: adamziel

packages/playground/website-extras/src/components/address-bar/index.tsx

@@ -26,8 +26,38 @@ export default function AddressBar({ url, onUpdate }: AddressBarProps) {
 		[onUpdate]
 	);
 
+	const handleRefresh = useCallback(
+		function (e: React.MouseEvent<HTMLButtonElement>) {
+			e.preventDefault();
+			if (url) {
+				onUpdate?.(url);
+			}
+		},
+		[url, onUpdate]
+	);
+
 	return (
 		<form className={css.form} onSubmit={handleSubmit}>
+			<button
+				type="button"
+				className={css.refreshButton}
+				onClick={handleRefresh}
+				aria-label="Refresh page"
+				title="Refresh page"
+			>
+				<svg
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M13.65 2.35C12.2 0.9 10.21 0 8 0 3.58 0 0.01 3.58 0.01 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L9 7h7V0l-2.35 2.35z"
+						fill="currentColor"
+					/>
+				</svg>
+			</button>
 			<div className={css.inputContainer}>
 				<input
 					ref={input}

packages/playground/website-extras/src/components/address-bar/style.module.css

@@ -2,6 +2,29 @@
 	position: relative;
 	display: flex;
 	transition: opacity 0.5s ease;
+	align-items: center;
+	gap: 8px;
+}
+
+.refresh-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 5px;
+	background: transparent;
+	border: none;
+	color: #b4becb;
+	cursor: pointer;
+	transition: color 0.2s ease;
+	flex-shrink: 0;
+}
+
+.refresh-button:hover {
+	color: #fff;
+}
+
+.refresh-button:active {
+	transform: scale(0.95);
 }
 
 .input-container {

packages/playground/website/src/components/address-bar/index.tsx

@@ -26,8 +26,38 @@ export default function AddressBar({ url, onUpdate }: AddressBarProps) {
 		[onUpdate]
 	);
 
+	const handleRefresh = useCallback(
+		function (e: React.MouseEvent<HTMLButtonElement>) {
+			e.preventDefault();
+			if (url) {
+				onUpdate?.(url);
+			}
+		},
+		[url, onUpdate]
+	);
+
 	return (
 		<form className={css.form} onSubmit={handleSubmit}>
+			<button
+				type="button"
+				className={css.refreshButton}
+				onClick={handleRefresh}
+				aria-label="Refresh page"
+				title="Refresh page"
+			>
+				<svg
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M13.65 2.35C12.2 0.9 10.21 0 8 0 3.58 0 0.01 3.58 0.01 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L9 7h7V0l-2.35 2.35z"
+						fill="currentColor"
+					/>
+				</svg>
+			</button>
 			<div className={css.inputContainer}>
 				<input
 					ref={input}

packages/playground/website/src/components/address-bar/style.module.css

@@ -3,6 +3,29 @@
 	display: flex;
 	transition: opacity 0.5s ease;
 	width: 100%;
+	align-items: center;
+	gap: 8px;
+}
+
+.refresh-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 5px;
+	background: transparent;
+	border: none;
+	color: #b4becb;
+	cursor: pointer;
+	transition: color 0.2s ease;
+	flex-shrink: 0;
+}
+
+.refresh-button:hover {
+	color: #fff;
+}
+
+.refresh-button:active {
+	transform: scale(0.95);
 }
 
 .input-container {