feat: show copyable invite link in pending invites list (#239)

[zacharias-ona]

Closes #239

What

Adds the ability for workspace admins to copy invite links, both immediately after creating an invite and from the pending invites list.

How

Invite form (invite-form.tsx):

• After a successful invite creation, the generated invite URL ({origin}/invite/{token}) is displayed inline below the form with a copy button
• The link clears when the user starts typing a new email

Pending invites list (pending-invite-list.tsx):

• Each pending invite row now has a "Copy link" button (Copy icon) next to the existing revoke button
• Uses the existing Tooltip component (base-ui pattern with render prop) for hover feedback
• Icon transitions from Copy → Check with accent color for 2 seconds after copying

Both use navigator.clipboard.writeText() for clipboard access and clean up timers on unmount.

Testing

• pnpm lint ✅
• pnpm typecheck ✅
• pnpm test — 252 tests pass ✅
• No E2E tests added — clipboard interaction is a single-action UI pattern, not a multi-step flow

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
memo	Ready	Preview, Comment	Apr 19, 2026 2:36am

[zacharias-ona]

Review: one issue to fix

Both clipboard write calls lack error handling. navigator.clipboard.writeText() can reject when the document isn't focused or clipboard permissions are denied, causing unhandled promise rejections.

1. invite-form.tsx: Wrap handleCopyLink body in try/catch
2. pending-invite-list.tsx: Wrap handleCopy body in try/catch

Everything else looks good — clean implementation, proper timer cleanup, correct design tokens, good accessibility labels. Fixing inline.

[zacharias-ona]

✅ UI verification passed — design spec compliance confirmed.

Static analysis (2 changed UI files):

• Color tokens: all values use CSS variables from the design spec (text-accent, text-muted-foreground, text-white/30)
• Typography: text-xs, text-sm — within the allowed scale
• Spacing: gap-1, gap-2, gap-3, w-20 — Tailwind scale only, no arbitrary values
• Button variants: ghost for icon buttons (toolbar actions), default for submit — correct per spec
• Icons: h-4 w-4 (16px) — matches spec
• Accessibility: aria-label on both copy and revoke icon-only buttons
• Component usage: shadcn Button, Tooltip, Table, Badge used correctly
• No decorative animations, no box shadows, sharp corners throughout

Visual verification (Playwright screenshots — desktop 1280×800, mobile 375×812):

• Desktop: invite form, members table, and pending invites table render correctly with proper alignment and spacing
• Mobile: content adapts to narrow viewport; table overflow at mobile width is pre-existing (from feat: workspace members — invite, roles, management (#32) #51), not a regression from this PR
• Dark mode tokens applied correctly throughout

[zacharias-ona]

❌ Post-merge verification failed.

E2E suite: 63 passed, 3 failed, 8 skipped (serial deps of failed tests)

Regression from this PR (1):

• members.spec.ts > owner can invite a user by email — test expects "Invite sent." text which was replaced by the invite link display. This blocks 6 dependent serial tests.

Pre-existing failures unrelated to this PR (2):

• search.spec.ts > search with no matches shows empty state — empty state text mismatch
• workspace-settings.spec.ts > personal workspace shows 'cannot be deleted' message — test env issue (listUsers can't find test user)

Ad-hoc smoke tests: All passed (landing page, sign-in, health endpoint, authenticated login + workspace load).

See #241.