Implement Apply for Slot on Multi-Winner Milestone bounties

[Michaelkingsdev]

Closes #204
Implement Apply for Slot on Multi-Winner Milestone bounties

Summary by CodeRabbit

• New Features

  • Added "Apply for Slot" functionality for multi-winner milestone bounties, allowing users to join and compete for individual slots.
  • Introduced slot availability indicators displaying occupied vs. maximum slots on bounty cards and detail pages.
  • Implemented slot application UI across mobile and sidebar views with loading states and validation.

• Tests

  • Added comprehensive end-to-end test coverage for multi-winner bounty slot application flows.

[vercel]

@Michaelkingsdev is attempting to deploy a commit to the Threadflow Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR implements the complete "Apply for Slot" feature for multi-winner milestone bounties. A new mutation hook handles contract interaction and optimistic cache updates; CTA state derivation exposes slot-application handlers and computed slot conditions to sidebar and mobile components; both render conditional "apply for slot" UI branches with appropriate disable logic; bounty cards display updated slot counts; and E2E tests cover the full interaction flow.

Changes

Multi-Winner Slot Application Feature

Layer / File(s)	Summary
Slot Application Mutation Hook hooks/use-bounty-application.ts	Introduces useApplyForSlot() hook that mutates the slot-application contract, performs optimistic cache updates by appending contributor progress and incrementing slot occupancy, rolls back on error, and invalidates queries on settlement.
CTA State Hook Integration components/bounty-detail/use-bounty-cta-state.ts	Extends hook to import and initialize the slot-application mutation, compute slot fullness and already-joined status, derive button label, wire the handler, and expose all new state to consuming components.
Sidebar and Mobile CTA UI components/bounty-detail/bounty-detail-sidebar-cta.tsx, components/bounty-detail/bounty-detail-mobile-cta.tsx	Both CTA components render conditional "apply for slot" button branches for MULTI_WINNER_MILESTONE bounties with disabled states based on slot capacity, already-joined status, wallet presence, and mutation pending state.
Slot Count Badges on Bounty Cards components/bounty/bounty-card.tsx, components/cards/bounty-card.tsx	Adds slot occupancy/max slot count badges to both bounty card display components for MULTI_WINNER_MILESTONE bounties with Users icon and fallback defaults.
E2E Test Coverage for Slot Application e2e/bounty-application.spec.ts	Adds multi-winner milestone bounty mocks, updates GraphQL responses, wires applyForSlot contract mock with call tracking, and includes test cases verifying button rendering, contract invocation, and disabled states for slot capacity and already-joined scenarios.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

• #204: PR implements all acceptance criteria—eligible contributors can click "Apply for Slot," slot counts increment on sidebar and cards, contributor avatars appear in milestone funnel, and button disables when slots are full or user already joined.

Possibly related PRs

• boundlessfi/bounties#186: Both PRs implement the MULTI_WINNER_MILESTONE "apply for slot" CTA flow; retrieved PR adds the sidebar/mobile slot-application UI with mocked dialog/coming-soon behavior, while main PR wires the same CTA into real useApplyForSlot mutation state/handlers.
• boundlessfi/bounties#241: Both PRs modify the same bounty-detail CTA codepaths (use-bounty-cta-state plus bounty-detail-sidebar-cta/bounty-detail-mobile-cta), with main PR extending those components to add multi-winner "apply for slot" state/handlers and UI branch.
• boundlessfi/bounties#178: Both PRs directly modify the same bounty-detail CTA components to change join/apply behavior; retrieved PR removes the MULTI_WINNER_MILESTONE "Apply for Slot" flow while main PR reintroduces it via new useBountyCTAState "applyForSlot" state/handlers.

Suggested reviewers

• Benjtalkshow

Poem

🐰 A rabbit hops through slots with glee,
Applying now for all to see!
Cache updates optimistically fast,
While badges show how slots amass—
Milestone funnels overflow with cheer! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 12.50% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main implementation: adding Apply for Slot functionality to Multi-Winner Milestone bounties.
Linked Issues check	✅ Passed	The PR implements all primary requirements: useApplyForSlot hook [#204], optimistic cache updates with rollback, slot-application mutation in components [#204], button label updates without [Coming soon] [#204], and proper disable conditions [#204].
Out of Scope Changes check	✅ Passed	The PR includes changes to bounty card components and E2E tests that extend the multi-winner milestone UI display and test coverage, which are supportive enhancements directly related to the core requirement of implementing slot application.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[drips-wave]

@Michaelkingsdev Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits