refactor(invite): simplify share UX and fix copy behavior

[mcull]

Summary

Improves the share link UX in the Manage Members modal by removing the redundant "Share..." button and fixing the copy behavior when using iOS share sheet.

Problems Addressed

1. Redundant buttons: After PR fix(invite): use native share on mobile for Copy Join Link button #321, both "Copy Join Link" and "Share..." buttons did the same thing on mobile (open native share sheet)
2. Messy copy output: When tapping "Copy" in iOS share sheet, users got "Here's your invite to [Library name]\n[link]" instead of just the clean link

Changes

1. Removed Redundant "Share..." Button

• The second "Share..." button is now removed
• Single button provides clearer UX

2. Dynamic Button Label Based on Platform

• Mobile devices (iOS/Android): Button displays "Share Link"
  • Accurately reflects that it opens native share sheet
• Desktop: Button displays "Copy Join Link"
  • Accurately reflects that it copies to clipboard
• Button label now matches actual behavior on each platform

3. Fixed Share Sheet Copy Behavior

Before:

await navigator.share({
  title: `Join ${collectionName} on StuffLibrary`,
  text: `Here's your invite to ${collectionName}`,
  url: link,
});

When user tapped "Copy" in iOS share sheet, they got:

Here's your invite to Piedmont Pines
https://stufflibrary.org/j/f76cdee

After:

await navigator.share({
  url: link,
});

Now "Copy" in share sheet gives just the clean URL:

https://stufflibrary.org/j/f76cdee

Technical Details

• Extracted mobile detection to isMobile variable for better code organization
• Button label uses inline conditional based on navigator.userAgent
• Share API now only passes { url: link } instead of { title, text, url }
• Net reduction: 42 lines of code (removed duplicate button handler)

Testing Checklist

Mobile (iOS/Android)

• ✅ Button label reads "Share Link"
• ✅ Tapping button opens native share sheet
• ✅ Share sheet shows clean URL
• ✅ Copying from share sheet gives clean URL only
• ✅ Sharing to Messages/Mail/etc works correctly
• ✅ Canceling share dialog doesn't show error

Desktop

• ✅ Button label reads "Copy Join Link"
• ✅ Clicking button copies link to clipboard
• ✅ Shows success message after copy
• ✅ Paste gives clean URL

Screenshots

Before: Two buttons ("Copy Join Link" and "Share...")
After: One smart button ("Share Link" on mobile, "Copy Join Link" on desktop)

Related

• Builds on fix(invite): use native share on mobile for Copy Join Link button #321 (initial mobile share fix)

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
stufflibrary	Ready	Preview	Comment	Sep 30, 2025 2:05am