From f10941e30aa90ed387b638554ec5f3ed4fef4b81 Mon Sep 17 00:00:00 2001
From: victorEdeh <quickpickconcepts@gmail.com>
Date: Sat, 25 Apr 2026 10:40:47 -0700
Subject: [PATCH] feat: add creator profile share action with Web Share API
 fallback (#115)

- Replace copy-only button with unified share action
- Use navigator.share() when available (mobile/supported browsers)
- Fall back to navigator.clipboard.writeText() on unsupported environments
- Silently swallow AbortError when user dismisses native share sheet
- Show success toast on clipboard copy, error toast on failure
- Adapt button label and icon based on Web Share API availability
- Remove redundant mobile-only icon button
---
 .../common/CreatorProfileHeader.tsx           | 46 ++++++++++++-------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/components/common/CreatorProfileHeader.tsx b/src/components/common/CreatorProfileHeader.tsx
index 21d93255..045a0362 100644
--- a/src/components/common/CreatorProfileHeader.tsx
+++ b/src/components/common/CreatorProfileHeader.tsx
@@ -23,18 +23,37 @@ const CreatorProfileHeader: React.FC<CreatorProfileHeaderProps> = ({
 }) => {
 	const [copied, setCopied] = useState(false);
 
-	const handleCopy = async () => {
+	const handleShare = async () => {
+		const url = window.location.href;
+
+		if (navigator.share) {
+			try {
+				await navigator.share({
+					title: `${name} (@${handle}) on Access Layer`,
+					url,
+				});
+			} catch (err) {
+				// User cancelled the share dialog — not an error worth surfacing
+				if (err instanceof Error && err.name !== 'AbortError') {
+					showToast.error('Failed to share profile');
+				}
+			}
+			return;
+		}
+
+		// Fallback: copy to clipboard
 		try {
-			await navigator.clipboard.writeText(window.location.href);
+			await navigator.clipboard.writeText(url);
 			setCopied(true);
 			showToast.success('Profile link copied to clipboard!');
 			setTimeout(() => setCopied(false), 2000);
-		} catch (err) {
-			console.error('Failed to copy profile link:', err);
+		} catch {
 			showToast.error('Failed to copy link');
 		}
 	};
 
+	const canNativeShare = typeof navigator !== 'undefined' && !!navigator.share;
+
 	return (
 		<div
 			className={cn(
@@ -59,28 +78,23 @@ const CreatorProfileHeader: React.FC<CreatorProfileHeaderProps> = ({
 
 			<div className="flex items-center gap-3">
 				<Button
-					onClick={handleCopy}
+					onClick={handleShare}
 					variant="outline"
 					className="h-11 rounded-xl border-white/10 bg-white/5 px-4 font-bold text-white transition-all hover:border-amber-500/30 hover:bg-amber-500/10 active:scale-95"
 				>
 					{copied ? (
 						<Check className="mr-2 size-4 text-emerald-400" />
+					) : canNativeShare ? (
+						<Share2 className="mr-2 size-4 text-amber-500" />
 					) : (
 						<Copy className="mr-2 size-4 text-amber-500" />
 					)}
 					<span className="hidden sm:inline">
-						{copied ? 'Copied!' : 'Copy Profile Link'}
+						{copied ? 'Copied!' : canNativeShare ? 'Share Profile' : 'Copy Profile Link'}
+					</span>
+					<span className="sm:hidden">
+						{copied ? 'Copied' : canNativeShare ? 'Share' : 'Copy'}
 					</span>
-					<span className="sm:hidden">{copied ? 'Copied' : 'Copy'}</span>
-				</Button>
-				<Button
-					variant="outline"
-					size="icon"
-					className="h-11 w-11 rounded-xl border-white/10 bg-white/5 text-white transition-all hover:border-amber-500/30 hover:bg-amber-500/10 md:hidden active:scale-95"
-					onClick={handleCopy}
-					aria-label="Share profile"
-				>
-					<Share2 className="size-4" />
 				</Button>
 			</div>
 		</div>