Show author on hover

Author: akirk

packages/playground/personal-wp/src/components/menu-overlay/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { external, trash } from '@wordpress/icons';
+import { external, trash, copy } from '@wordpress/icons';
 import { Icon } from '@wordpress/icons';
 import { Spinner } from '@wordpress/components';
 import { logger } from '@php-wasm/logger';
@@ -239,9 +239,6 @@ export function MenuOverlay({ onClose }: MenuOverlayProps) {
 										href={getAppBlueprintUrl(
 											app.blueprintUrl
 										)}
-										title={getBlueprintPreview(
-											app.blueprintUrl
-										)}
 									>
 										<span className={css.featureIcon}>
 											<WordPressIcon />
@@ -267,6 +264,20 @@ export function MenuOverlay({ onClose }: MenuOverlayProps) {
 											</span>
 										</span>
 									</a>
+									<button
+										className={css.copyButton}
+										onClick={(e) => {
+											e.preventDefault();
+											navigator.clipboard.writeText(
+												getBlueprintPreview(
+													app.blueprintUrl
+												)
+											);
+										}}
+										title="Copy blueprint"
+									>
+										<Icon icon={copy} size={16} />
+									</button>
 									{app.isCustom && (
 										<button
 											className={css.removeButton}

packages/playground/personal-wp/src/components/menu-overlay/style.module.css

@@ -190,6 +190,12 @@
 
 .author {
 	color: #6b7280;
+	opacity: 0;
+	transition: opacity 0.15s ease;
+}
+
+.appRow:hover .author {
+	opacity: 1;
 }
 
 .appRow {
@@ -202,13 +208,42 @@
 	min-width: 0;
 }
 
+.copyButton {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	background: none;
+	border: none;
+	border-radius: 6px;
+	color: #9ca3af;
+	cursor: pointer;
+	flex-shrink: 0;
+	opacity: 0;
+	transition: all 0.15s ease;
+}
+
+.copyButton svg {
+	fill: currentColor;
+}
+
+.appRow:hover .copyButton {
+	opacity: 1;
+}
+
+.copyButton:hover {
+	background: rgba(56, 88, 233, 0.15);
+	color: #3858e9;
+}
+
 .removeButton {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 28px;
 	height: 28px;
-	margin-left: -8px;
+	margin-left: 4px;
 	background: none;
 	border: none;
 	border-radius: 6px;