Feature: Saved / Bookmarked Bounties

[Benjtalkshow]

Overview

The bounty catalog has filters but no way for a user to mark a bounty as "interesting" and revisit it later. Contributors browsing 20–50 active bounties at a time often want to compare a few before applying. Add a bookmark system so users can save bounties to a personal list and optionally receive notifications when those bounties change status.

Goals

• Allow authenticated users to bookmark/unbookmark any bounty
• Show a bookmark icon on bounty cards and the bounty detail page that toggles state
• Provide a "Saved Bounties" view (sidebar widget on the profile page, or a dedicated /saved route) that lists everything the user has bookmarked
• Trigger notifications (via the existing notification center) when a bookmarked bounty changes status (deadline approaching, status moves to IN_REVIEW, etc.)

Implementation Details

1. Bookmark mutations and query

Create: hooks/use-bookmarks.ts

• useBookmarks() returns the current user's bookmarks
• useToggleBookmark(bountyId) adds or removes with optimistic update
• Uses a new bookmarkKeys factory in lib/query/query-keys.ts

2. Bookmark icon component

Create: components/bounty/bookmark-button.tsx

• Renders a bookmark icon (filled when active, outline when not)
• Click toggles via useToggleBookmark
• Accessible: aria-pressed, keyboard activatable

3. Wire into existing surfaces

Modify: components/bounty/bounty-card.tsx

• Add BookmarkButton to the card header (top-right corner)

Modify: components/bounty-detail/bounty-detail-header-card.tsx

• Add BookmarkButton next to the StatusBadge

4. Saved Bounties view

Create: app/saved/page.tsx

• Lists bookmarked bounties with the same BountyCard grid as /bounty
• Empty state with a primary CTA back to /bounty
• Server-side guard: redirect to sign-in if unauthenticated

5. Notification integration

Extend: hooks/use-notifications.ts and hooks/use-bounty-subscription.ts

• When bountyUpdated fires for a bounty in the user's bookmarks, push a notification of type saved-bounty-updated
• Notification links back to /bounty/[id]

---

Files Affected

Created

• hooks/use-bookmarks.ts
• components/bounty/bookmark-button.tsx
• app/saved/page.tsx

Modified

• components/bounty/bounty-card.tsx
• components/bounty-detail/bounty-detail-header-card.tsx
• hooks/use-notifications.ts
• hooks/use-bounty-subscription.ts
• lib/query/query-keys.ts

---

Acceptance Criteria

• Authenticated users can bookmark and unbookmark any bounty from the card and detail page
• Bookmark state persists across sessions and devices (server-backed, not just localStorage)
• /saved lists all bookmarked bounties for the current user
• Unauthenticated users see a sign-in prompt instead of the bookmark icon
• Bookmarked bounties trigger notifications via the notification center when their status changes
• Bookmark toggle is keyboard-accessible and has correct ARIA attributes

---

Additional Notes

• For optimism: write through to the cache so the icon flips immediately, then reconcile on success/error
• If the backend mutation isn't ready, the issue can land with a localStorage fallback gated by a TODO, but the persistence layer should be server-backed before this ships to production
• Consider a small "saved" count badge in the navbar next to the bookmark icon (optional polish)

[linear]

BOU-189

[coderabbitai]

🔗 Related PRs

#34 - feat: Implement API-driven bounty fetching and display with dedicated loading, empty, and error UI components. [merged]
#111 - Feat: implementation logic for single claim model [merged]
#117 - feat: add frontend hooks for submission mutations [merged]
#155 - feat: real-time notifications with GraphQL subscriptions [merged]
#161 - feat(bounty): add FCFS single-claim flow with claim/approve UI and cl… [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[patopatrish]

@patopatrish has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

Hello maintainer, i would love to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @patopatrish to this issue.

[SamixYasuke]

@SamixYasuke has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

Hi maintainer, I'd like to take this on! I can handle the full scope bookmark hook with optimistic updates, the toggle button component, saved route, and notification integration.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @SamixYasuke to this issue.

[itsjaneossai]

@itsjaneossai has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

I would like to work on this issue to help contribute.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @itsjaneossai to this issue.

[Shadow-MMN]

@Shadow-MMN has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

Hi , please can I work on this issue. I have read the issue description and understand the need for a full bookmakring system for bounties similar to the save for later features. I will implement it in these steps :

• Creating use-bookmarks.ts to fetch and toggle bookmarks with server-backed persistence and optimistic updates
• Building BookmarkButton component with toggle UI, keyboard support, and aria-pressed accessibility
• Integrating the button into bounty-card.tsx and bounty-detail-header-card.tsx
• Adding /saved page to list all bookmarked bounties, with empty state and auth guard
• Ensuring bookmarks persist across sessions via backend (localStorage only as fallback if needed)
• Hooking into notification system to trigger updates when bookmarked bounties change status
• Testing accessibility, persistence, and notification flow end-to-end

ETA 24hrs

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Shadow-MMN to this issue.

[ryzen-xp]

@ryzen-xp has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

Hi maintainers 👋
I’m a blockchain developer with strong expertise in Stellar, Rust,TS and Stellar SDK integrations. I’ve worked on multiple Stellar-based smart contract and backend systems.

I understand the scope of this issue and can deliver a reliable, production-quality solution with proper tests and documentation.
Plz assign me !!

ETA: 12 hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ryzen-xp to this issue.