GearBox/.planning/phases/32-setup-sharing-system/32-03-SUMMARY.md

Plan 32-03 Summary: Share Modal UI

Status: Complete Commit: 7003e99

What was done

1. Share hooks (src/client/hooks/useShares.ts):

   • useShareLinks(setupId) — Query hook for fetching share links
   • useCreateShareLink(setupId) — Mutation with query invalidation
   • useRevokeShareLink(setupId) — Mutation with query invalidation

2. ShareModal component (src/client/components/ShareModal.tsx):

   • Visibility picker with three options (private/link/public) — immediate API call on change
   • Color-coded options: gray (private), blue (link), green (public)
   • Share link creation with expiration dropdown (7/14/30 days, no expiration)
   • Active links list with copy-to-clipboard and revoke actions
   • Deactivation warning when links exist and switching to private
   • Empty state "No share links yet"
   • Escape key and overlay click to close
   • Responsive: works on desktop and mobile

3. Setup detail page update (src/client/routes/setups/$setupId.tsx):

   • Replaced static visibility badge with interactive share button
   • Desktop: "Share" text + visibility icon
   • Mobile: Icon-only with 44px touch target
   • ShareModal rendered with visibility change wired to updateSetup.mutate

Verification

• bun run lint: Passes
• ShareModal follows existing modal patterns (overlay, escape key, z-50)
• Colors match UI-SPEC: gray-500/gray-50, blue-600/blue-50, green-700/green-50